MISP
/
misp-dashboard
mirror of https://github.com/MISP/misp-dashboard
2
0
Fork 0
Code Issues Releases Wiki Activity

Started new contrib layout (latest awards + 2 fames tabs) + fixed bug searching org (caused by the switch to link)

pull/7/head
Sami Mokaddem 2017-11-13 16:02:09 +01:00
parent f59aac98d7
commit c35fbe969b
3 changed files with 106 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
server.py
View File

@ -356,6 +356,16 @@ def getCategPerContrib():
return jsonify(contributor_helper.getCategPerContribFromRedis(date)) return jsonify(contributor_helper.getCategPerContribFromRedis(date))
@app.route("/_getLatestAwards")
def getLatestAwards():
try:
date = datetime.datetime.fromtimestamp(float(request.args.get('date')))
except:
date = datetime.datetime.now()
return getLastContributors()
#return jsonify(contributor_helper.getCategPerContribFromRedis(date))
@app.route("/_getAllOrg") @app.route("/_getAllOrg")
def getAllOrg(): def getAllOrg():
return jsonify(contributor_helper.getAllOrgFromRedis()) return jsonify(contributor_helper.getAllOrgFromRedis())

86
static/js/contrib.js
View File

@ -1,11 +1,10 @@
/* GLOB VAR */ /* GLOB VAR */
var allOrg = []; var allOrg = [];
var datatableTop; var datatableTop;
var datatableFame; var datatableFameQuant;
var refresh_speed = min_between_reload*60; var refresh_speed = min_between_reload*60;
var will_reload = $("#reloadCheckbox").is(':checked'); var will_reload = $("#reloadCheckbox").is(':checked');
var sec_before_reload = refresh_speed; var sec_before_reload = refresh_speed;
var dataTop5Overtime;
var plotLineChart var plotLineChart
/* CONFIG */ /* CONFIG */
@ -98,6 +97,17 @@ var optionDatatable_Categ = {
{ className: "centerCellPicOrgLogo", "targets": [ 4 ]} { className: "centerCellPicOrgLogo", "targets": [ 4 ]}
] ]
}; };
var optionDatatable_awards = jQuery.extend({}, optionDatatable_light)
optionDatatable_awards.columnDefs = [
{ className: "small", "targets": [ 0 ] },
{ className: "centerCellPicOrgLogo", "targets": [ 1 ] },
{ className: "centerCellPicOrgLogo verticalAlign", "targets": [ 2 ] },
{ 'orderData':[1], 'targets': [0] },
{
'targets': [1],
'searchable': false
},
]
var typeaheadOption = { var typeaheadOption = {
source: function (query, process) { source: function (query, process) {
@ -327,7 +337,7 @@ function addLastContributor(datatable, data, update) {
datatable.row.add(to_add); datatable.row.add(to_add);
} else if(update == true) { } else if(update == true) {
datatable.rows().every( function() { datatable.rows().every( function() {
if(this.data()[3] == data.org) { if($(this.data()[6])[0].text == data.org) {
datatable.row( this ).data( to_add ); datatable.row( this ).data( to_add );
} }
}); });
@ -395,19 +405,23 @@ function updateProgressHeader(org) {
// update color in other dataTables // update color in other dataTables
datatableTop.rows().every( function() { datatableTop.rows().every( function() {
var row = this.node(); var row = this.node();
if(this.data()[5] == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); } var orgRowName = $(this.data()[5])[0].text;
if(orgRowName == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); }
}); });
datatableFame.rows().every( function() { datatableFameQuant.rows().every( function() {
var row = this.node(); var row = this.node();
if(this.data()[5] == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); } var orgRowName = $(this.data()[5])[0].text;
if(orgRowName == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); }
}); });
datatableCateg.rows().every( function() { datatableCateg.rows().every( function() {
var row = this.node(); var row = this.node();
if(this.data()[5] == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); } var orgRowName = $(this.data()[5])[0].text;
if(orgRowName == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); }
}); });
datatableLast.rows().every( function() { datatableLast.rows().every( function() {
var row = this.node(); var row = this.node();
if(this.data()[6] == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); } var orgRowName = $(this.data()[6])[0].text;
if(orgRowName == data.org) { row.classList.add('selectedOrgInTable'); } else { row.classList.remove('selectedOrgInTable'); }
}); });
}); });
@ -473,31 +487,6 @@ function updateProgressHeader(org) {
//update overtake points //update overtake points
updateOvertakePnts(); updateOvertakePnts();
//Add new data to linechart
var flag_already_displayed = false;
for(obj of dataTop5Overtime) { //check if already displayed
if (obj.label == currOrg) {
flag_already_displayed = true;
break;
}
}
if (!flag_already_displayed) {
$.getJSON( url_getOrgOvertime+'?org='+org, function( data ) {
var toPlot = dataTop5Overtime.slice(0); //cloning data
// transform secs into date
var new_data = [];
for(list of data['data']) {
new_data.push([list[0]*1000, list[1]]);
}
data['data'] = new_data;
toPlot.push(data);
plotLineChart.setData(toPlot);
plotLineChart.setupGrid();
plotLineChart.draw();
});
}
} }
function showOnlyOrg() { function showOnlyOrg() {
@ -537,13 +526,15 @@ $(document).ready(function() {
$('#orgName').typeahead(typeaheadOption); $('#orgName').typeahead(typeaheadOption);
$('#btnCurrRank').popover(popOverOption); $('#btnCurrRank').popover(popOverOption);
datatableTop = $('#topContribTable').DataTable(optionDatatable_top); datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
datatableFame = $('#fameTable').DataTable(optionDatatable_fame); datatableFameQuant = $('#fameTableQuantity').DataTable(optionDatatable_fame);
datatableFameQual = $('#fameTableQuality').DataTable(optionDatatable_fame);
datatableCateg = $('#categTable').DataTable(optionDatatable_Categ); datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);
datatableLast = $('#lastTable').DataTable(optionDatatable_last); datatableLast = $('#lastTable').DataTable(optionDatatable_last);
datatableAwards = $('#awardTable').DataTable(optionDatatable_awards);
// top contributors // top contributors
addToTableFromJson(datatableTop, url_getTopContributor); addToTableFromJson(datatableTop, url_getTopContributor);
// hall of fame // hall of fame
addToTableFromJson(datatableFame, url_getFameContributor); addToTableFromJson(datatableFameQuant, url_getFameContributor);
// last contributors // last contributors
addLastFromJson(datatableLast, url_getLastContributor); addLastFromJson(datatableLast, url_getLastContributor);
// category per contributors // category per contributors
@ -567,19 +558,22 @@ $(document).ready(function() {
} }
datatableCateg.draw(); datatableCateg.draw();
}); });
// top 5 contrib overtime // latest awards
$.getJSON( url_getTop5Overtime, function( data ) { $.getJSON( url_getLatestAwards, function( data ) {
// transform secs into date for (i in data) {
for(i in data){ var date = new Date(data[i].epoch*1000);
var new_data = []; var to_add = [
for(list of data[i]['data']) { date.toTimeString().slice(0,-15) +' '+ date.toLocaleDateString(),
new_data.push([list[0]*1000, list[1]]); getOrgRankIcon(data[i].orgRank, 60),
} createImg(data[i].logo_path, 32),
data[i]['data'] = new_data; createOrgLink(data[i].org),
createHonorImg(data[i].honorBadge, 20),
];
datatableAwards.row.add(to_add);
} }
dataTop5Overtime = data; datatableAwards.draw();
plotLineChart = $.plot("#divTop5Overtime", data, optionsLineChart);
}); });
if(currOrg != "") // currOrg selected if(currOrg != "") // currOrg selected
//FIXME: timeout used to wait that all datatables are draw. //FIXME: timeout used to wait that all datatables are draw.
setTimeout( function() { updateProgressHeader(currOrg); }, 500); setTimeout( function() { updateProgressHeader(currOrg); }, 500);

66
templates/contrib.html
View File

@ -293,7 +293,7 @@
<div class="panel-heading bg-info" style="font-weight: bold;"> <div class="panel-heading bg-info" style="font-weight: bold;">
<i class="fa fa-asterisk " style="margin-right: 5px; color: #f0ad4e;"></i><b>Contributor ranking (monthly)</b> <i class="fa fa-asterisk " style="margin-right: 5px; color: #f0ad4e;"></i><b>Contributor ranking (monthly)</b>
</div> </div>
<div id="panelRanking" class="panel-body" style="height: 100%;"> <div class="panel-body" style="height: 100%;">
<div class="table-responsive"> <div class="table-responsive">
<table id="topContribTable" class="table table-hover table-striped"> <table id="topContribTable" class="table table-hover table-striped">
@ -347,11 +347,12 @@
</div> </div>
<div class="col-lg-12"> <div class="col-lg-12">
<div class="col-lg-6">
<div class="panel panel-default" style="height: 100%;"> <div class="panel panel-default" style="height: 100%;">
<div class="panel-heading bg-info" style="font-weight: bold;"> <div class="panel-heading bg-info" style="font-weight: bold;">
<i class="fa fa-th-list " style="margin-right: 5px; color: #f0ad4e;"></i><b>Contributors and categories (total)</b> <i class="fa fa-th-list " style="margin-right: 5px; color: #f0ad4e;"></i><b>Contributors and categories (total)</b>
</div> </div>
<div id="panelRanking" class="panel-body" style="height: 100%;"> <div class="panel-body" style="height: 100%;">
<div class="table-responsive"> <div class="table-responsive">
<table id="categTable" class="table table-hover table-striped"> <table id="categTable" class="table table-hover table-striped">
@ -378,6 +379,34 @@
</div><!-- /.panel --> </div><!-- /.panel -->
</div> </div>
<div class="col-lg-6">
<div class="panel panel-default" style="height: 100%;">
<div class="panel-heading bg-info" style="font-weight: bold;">
<i class="fa fa-trophy" style="margin-right: 5px; color: #d9534f;"></i><b>Latest awards</b>
</div>
<div id="panelawards" class="panel-body" style="height: 100%;">
<div class="table-responsive">
<table id="awardTable" class="table table-hover table-striped">
<thead>
<tr>
<th>Date</th>
<th>Org. rank</th>
<th></th>
<th>Org.</th>
<th>Awards</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div><!-- /.panel -->
</div>
</div>
</div><!-- /.col-lg-8 --> </div><!-- /.col-lg-8 -->
@ -386,12 +415,12 @@
<div class="panel panel-default" style="height: 100%;"> <div class="panel panel-default" style="height: 100%;">
<div class="panel-heading bg-info" style="font-weight: bold;"> <div class="panel-heading bg-info" style="font-weight: bold;">
<i class="fa fa-star" style="margin-right: 5px; color: #f0ad4e;"></i><b>Hall Of Fame (previous month)</b> <i class="fa fa-star" style="margin-right: 5px; color: #f0ad4e;"></i><b>Hall Of Fame - Quantity (previous month)</b>
</div> </div>
<div id="panelRanking" class="panel-body" style="height: 100%;"> <div class="panel-body" style="height: 100%;">
<div class="table-responsive"> <div class="table-responsive">
<table id="fameTable" class="table table-hover table-striped" style="margin-bottom: 0px;"> <table id="fameTableQuantity" class="table table-hover table-striped" style="margin-bottom: 0px;">
<thead> <thead>
<tr> <tr>
<th>Points</th> <th>Points</th>
@ -402,7 +431,7 @@
<th>Organisation</th> <th>Organisation</th>
</tr> </tr>
</thead> </thead>
<tbody id=fameTableBody> <tbody id=fameTableQuantityBody>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -413,13 +442,29 @@
<div class="panel panel-default" style="height: 100%;"> <div class="panel panel-default" style="height: 100%;">
<div class="panel-heading bg-info" style="font-weight: bold;"> <div class="panel-heading bg-info" style="font-weight: bold;">
<i class="fa fa-line-chart" style="margin-right: 5px; color: #f0ad4e;"></i><b>Top 5 Contributor overtime</b> <i class="fa fa-star" style="margin-right: 5px; color: #f0ad4e;"></i><b>Hall Of Fame - Quality (previous month)</b>
</div> </div>
<div id="panelRanking" class="panel-body" style="height: 100%;"> <div class="panel-body" style="height: 100%;">
<div id="divTop5Overtime" style="height: 32vh"></div>
<div class="table-responsive">
<table id="fameTableQuality" class="table table-hover table-striped" style="margin-bottom: 0px;">
<thead>
<tr>
<th>Points</th>
<th>Prev. rank</th>
<th>Org. rank</th>
<th></th>
<th></th>
<th>Organisation</th>
</tr>
</thead>
<tbody id=fameTableQualityBody>
</tbody>
</table>
</div>
</div> </div>
<!-- /.panel-body --> <!-- /.panel-body -->
</div><!-- /.panel --> </div><!-- /.panel -->
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
@ -443,6 +488,7 @@
var url_getTop5Overtime = "{{ url_for('getTop5Overtime') }}"; var url_getTop5Overtime = "{{ url_for('getTop5Overtime') }}";
var url_getOrgOvertime = "{{ url_for('getOrgOvertime') }}"; var url_getOrgOvertime = "{{ url_for('getOrgOvertime') }}";
var url_getLastContributor = "{{ url_for('getLastContributors') }}"; var url_getLastContributor = "{{ url_for('getLastContributors') }}";
var url_getLatestAwards = "{{ url_for('getLatestAwards') }}";
var url_eventStreamLastContributor = "{{ url_for('getLastContributor') }}"; var url_eventStreamLastContributor = "{{ url_for('getLastContributor') }}";
var url_getAllOrg = "{{ url_for('getAllOrg') }}"; var url_getAllOrg = "{{ url_for('getAllOrg') }}";
var url_getOrgRank = "{{ url_for('getOrgRank') }}"; var url_getOrgRank = "{{ url_for('getOrgRank') }}";