cristiancmoises
/
gophish
mirror of https://github.com/gophish/gophish
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adding quick stats tooltips (#607) 

* Adding a quick stats popup to campaign page (#600)

Added quick stats popup to campaign page

* Adding summarized quick stat tooltips on dashboard
pull/603/head
Jordan Wright 2017-04-27 18:54:33 -05:00 committed by GitHub
parent 871114a17d
commit 1fafe4845f
4 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/dist/app/campaigns.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
static/js/dist/app/dashboard.min.js vendored
View File

@ -1 +1 @@
function deleteCampaign(a){confirm("Delete "+campaigns[a].name+"?")&&api.campaignId.delete(campaigns[a].id).success(function(a){successFlash(a.message),location.reload()})}var campaigns=[],labels={"In progress":"label-primary",Queued:"label-info",Completed:"label-success","Emails Sent":"label-success",Error:"label-danger"};$(document).ready(function(){api.campaigns.summary().success(function(a){if($("#loading").hide(),campaigns=a.campaigns,campaigns.length>0){$("#dashboard").show();var e={labels:[],series:[[]]},t={series:[]},s={axisX:{showGrid:!1},showArea:!0,plugins:[],low:0,high:100},i={donut:!0,donutWidth:40,chartPadding:0,showLabel:!1},n=0;campaignTable=$("#campaignTable").DataTable({columnDefs:[{orderable:!1,targets:"no-sort"}],order:[[1,"desc"]]}),$.each(campaigns,function(a,t){var s=moment(t.created_date).format("MMMM Do YYYY, h:mm:ss a"),i=labels[t.status]||"label-default";campaignTable.row.add([escapeHtml(t.name),s,'<span class="label '+i+'">'+t.status+"</span>","<div class='pull-right'><a class='btn btn-primary' href='/campaigns/"+t.id+"' data-toggle='tooltip' data-placement='right' title='View Results'> <i class='fa fa-bar-chart'></i> </a> <button class='btn btn-danger' onclick='deleteCampaign("+a+")' data-toggle='tooltip' data-placement='right' title='Delete Campaign'> <i class='fa fa-trash-o'></i> </button></div>"]).draw(),t.y=0,t.y+=t.stats.clicked+t.stats.submitted_data,t.y=Math.floor(t.y/t.stats.total*100),n+=t.y,e.labels.push(s),e.series[0].push({meta:a,value:t.y})}),n=Math.floor(n/a.total),t.series.push({meta:"Unsuccessful Phishes",value:100-n}),t.series.push({meta:"Successful Phishes",value:n});new Chartist.Pie("#average_chart",t,i),new Chartist.Line("#overview_chart",e,s);$piechart=$("#average_chart");var c=$piechart.append('<div class="chartist-tooltip"></div>').find(".chartist-tooltip").hide();$piechart.on("mouseenter",".ct-slice-donut",function(){var a=$(this);value=a.attr("ct:value"),label=a.attr("ct:meta"),c.html(label+": "+value.toString()+"%").show()}),$piechart.on("mouseleave",".ct-slice-donut",function(){c.hide()}),$piechart.on("mousemove",function(a){c.css({left:(a.offsetX||a.originalEvent.layerX)-c.width()/2-10,top:(a.offsetY+40||a.originalEvent.layerY)-c.height()-80})}),$chart=$("#overview_chart");var l=$chart.append('<div class="chartist-tooltip"></div>').find(".chartist-tooltip").hide();$chart.on("mouseenter",".ct-point",function(){var a=$(this);value=a.attr("ct:value")||0,cidx=a.attr("ct:meta"),l.html(campaigns[cidx].name+"<br>Successes: "+value.toString()+"%").show()}),$chart.on("mouseleave",".ct-point",function(){l.hide()}),$chart.on("mousemove",function(a){l.css({left:(a.offsetX||a.originalEvent.layerX)-l.width()/2-10,top:(a.offsetY+40||a.originalEvent.layerY)-l.height()-40})}),$("#overview_chart").on("click",".ct-point",function(a){$(this).attr("ct:meta");window.location.href="/campaigns/"+campaigns[cidx].id})}else $("#emptyMessage").show()}).error(function(){errorFlash("Error fetching campaigns")})});
function deleteCampaign(a){confirm("Delete "+campaigns[a].name+"?")&&api.campaignId.delete(campaigns[a].id).success(function(a){successFlash(a.message),location.reload()})}var campaigns=[],labels={"In progress":"label-primary",Queued:"label-info",Completed:"label-success","Emails Sent":"label-success",Error:"label-danger"};$(document).ready(function(){api.campaigns.summary().success(function(a){if($("#loading").hide(),campaigns=a.campaigns,campaigns.length>0){$("#dashboard").show();var t={labels:[],series:[[]]},e={series:[]},s={axisX:{showGrid:!1},showArea:!0,plugins:[],low:0,high:100},i={donut:!0,donutWidth:40,chartPadding:0,showLabel:!1},o=0;campaignTable=$("#campaignTable").DataTable({columnDefs:[{orderable:!1,targets:"no-sort"}],order:[[1,"desc"]]}),$.each(campaigns,function(a,e){var s,i=moment(e.created_date).format("MMMM Do YYYY, h:mm:ss a"),r=labels[e.status]||"label-default";if(moment(e.launch_date).isAfter(moment())){s="Scheduled to start: "+moment(e.launch_date).format("MMMM Do YYYY, h:mm:ss a");var l=s+"<br><br>Number of recipients: "+e.stats.total}else{s="Launch Date: "+moment(e.launch_date).format("MMMM Do YYYY, h:mm:ss a");var l=s+"<br><br>Number of recipients: "+e.stats.total+"<br><br>Emails opened: "+e.stats.opened+"<br><br>Emails clicked: "+e.stats.clicked+"<br><br>Submitted Credentials: "+e.stats.submitted_data+"<br><br>Errors : "+e.stats.error}campaignTable.row.add([escapeHtml(e.name),i,'<span class="label '+r+'" data-toggle="tooltip" data-placement="right" data-html="true" title="'+l+'">'+e.status+"</span>","<div class='pull-right'><a class='btn btn-primary' href='/campaigns/"+e.id+"' data-toggle='tooltip' data-placement='left' title='View Results'> <i class='fa fa-bar-chart'></i> </a> <button class='btn btn-danger' onclick='deleteCampaign("+a+")' data-toggle='tooltip' data-placement='left' title='Delete Campaign'> <i class='fa fa-trash-o'></i> </button></div>"]).draw(),$('[data-toggle="tooltip"]').tooltip(),e.y=0,e.y+=e.stats.clicked+e.stats.submitted_data,e.y=Math.floor(e.y/e.stats.total*100),o+=e.y,t.labels.push(i),t.series[0].push({meta:a,value:e.y})}),o=Math.floor(o/a.total),e.series.push({meta:"Unsuccessful Phishes",value:100-o}),e.series.push({meta:"Successful Phishes",value:o});new Chartist.Pie("#average_chart",e,i),new Chartist.Line("#overview_chart",t,s);$piechart=$("#average_chart");var r=$piechart.append('<div class="chartist-tooltip"></div>').find(".chartist-tooltip").hide();$piechart.on("mouseenter",".ct-slice-donut",function(){var a=$(this);value=a.attr("ct:value"),label=a.attr("ct:meta"),r.html(label+": "+value.toString()+"%").show()}),$piechart.on("mouseleave",".ct-slice-donut",function(){r.hide()}),$piechart.on("mousemove",function(a){r.css({left:(a.offsetX||a.originalEvent.layerX)-r.width()/2-10,top:(a.offsetY+40||a.originalEvent.layerY)-r.height()-80})}),$chart=$("#overview_chart");var l=$chart.append('<div class="chartist-tooltip"></div>').find(".chartist-tooltip").hide();$chart.on("mouseenter",".ct-point",function(){var a=$(this);value=a.attr("ct:value")||0,cidx=a.attr("ct:meta"),l.html(campaigns[cidx].name+"<br>Successes: "+value.toString()+"%").show()}),$chart.on("mouseleave",".ct-point",function(){l.hide()}),$chart.on("mousemove",function(a){l.css({left:(a.offsetX||a.originalEvent.layerX)-l.width()/2-10,top:(a.offsetY+40||a.originalEvent.layerY)-l.height()-40})}),$("#overview_chart").on("click",".ct-point",function(a){$(this).attr("ct:meta");window.location.href="/campaigns/"+campaigns[cidx].id})}else $("#emptyMessage").show()}).error(function(){errorFlash("Error fetching campaigns")})});

13
static/js/src/app/campaigns.js
View File

@ -311,10 +311,21 @@ $(document).ready(function() {
});
$.each(campaigns, function(i, campaign) {
label = labels[campaign.status] || "label-default";
//section for tooltips on the status of a campaign to show some quick stats
var launchDate;
if(moment(campaign.launch_date).isAfter(moment())){
launchDate = "Scheduled to start: "+moment(campaign.launch_date).format('MMMM Do YYYY, h:mm:ss a')
var quickStats = launchDate+"<br><br>"+"Number of recipients: "+campaign.stats.total
} else {
launchDate = "Launch Date: "+moment(campaign.launch_date).format('MMMM Do YYYY, h:mm:ss a')
var quickStats = launchDate+"<br><br>"+"Number of recipients: "+campaign.stats.total+"<br><br>"+"Emails opened: "+campaign.stats.opened+"<br><br>"+"Emails clicked: "+campaign.stats.clicked+"<br><br>"+"Submitted Credentials: "+campaign.stats.submitted_data+"<br><br>"+"Errors : "+campaign.stats.error
}
campaignTable.row.add([
escapeHtml(campaign.name),
moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a'),
"<span class=\"label " + label + "\">" + campaign.status + "</span>",
"<span class=\"label " + label + "\" data-toggle=\"tooltip\" data-placement=\"right\" data-html=\"true\" title=\""+quickStats+"\">" + campaign.status + "</span>",
"<div class='pull-right'><a class='btn btn-primary' href='/campaigns/" + campaign.id + "' data-toggle='tooltip' data-placement='left' title='View Results'>\
<i class='fa fa-bar-chart'></i>\
</a>\

16
static/js/src/app/dashboard.js
View File

@ -64,18 +64,28 @@ $(document).ready(function() {
$.each(campaigns, function(i, campaign) {
var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY, h:mm:ss a')
var label = labels[campaign.status] || "label-default";
//section for tooltips on the status of a campaign to show some quick stats
var launchDate;
if (moment(campaign.launch_date).isAfter(moment())) {
launchDate = "Scheduled to start: " + moment(campaign.launch_date).format('MMMM Do YYYY, h:mm:ss a')
var quickStats = launchDate + "<br><br>" + "Number of recipients: " + campaign.stats.total
} else {
launchDate = "Launch Date: " + moment(campaign.launch_date).format('MMMM Do YYYY, h:mm:ss a')
var quickStats = launchDate + "<br><br>" + "Number of recipients: " + campaign.stats.total + "<br><br>" + "Emails opened: " + campaign.stats.opened + "<br><br>" + "Emails clicked: " + campaign.stats.clicked + "<br><br>" + "Submitted Credentials: " + campaign.stats.submitted_data + "<br><br>" + "Errors : " + campaign.stats.error
}
// Add it to the table
campaignTable.row.add([
escapeHtml(campaign.name),
campaign_date,
"<span class=\"label " + label + "\">" + campaign.status + "</span>",
"<div class='pull-right'><a class='btn btn-primary' href='/campaigns/" + campaign.id + "' data-toggle='tooltip' data-placement='right' title='View Results'>\
"<span class=\"label " + label + "\" data-toggle=\"tooltip\" data-placement=\"right\" data-html=\"true\" title=\"" + quickStats + "\">" + campaign.status + "</span>",
"<div class='pull-right'><a class='btn btn-primary' href='/campaigns/" + campaign.id + "' data-toggle='tooltip' data-placement='left' title='View Results'>\
<i class='fa fa-bar-chart'></i>\
</a>\
<button class='btn btn-danger' onclick='deleteCampaign(" + i + ")' data-toggle='tooltip' data-placement='right' title='Delete Campaign'>\
<button class='btn btn-danger' onclick='deleteCampaign(" + i + ")' data-toggle='tooltip' data-placement='left' title='Delete Campaign'>\
<i class='fa fa-trash-o'></i>\
</button></div>"
]).draw()
$('[data-toggle="tooltip"]').tooltip()
// Add it to the chart data
campaign.y = 0
campaign.y += campaign.stats.clicked + campaign.stats.submitted_data