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

Continuation of contrib page (2)

pull/3/head
Sami Mokaddem 2017-10-31 15:08:44 +01:00
parent cd27648804
commit 7438af5292
3 changed files with 156 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
server.py
View File

@ -133,36 +133,67 @@ def contrib():
return render_template('contrib.html', return render_template('contrib.html',
) )
@app.route("/_getTopContributor") @app.route("/_getLastContributor")
def getTopContributor(): def getLastContributor():
data = [ data = [
{ {
'progression': '', 'rank': random.randint(1,16),
'logo_path': 'logo1', 'logo_path': 'logo1',
'org': 'CIRCL', 'org': 'CIRCL',
}, },
{ {
'progression': '', 'rank': random.randint(1,16),
'logo_path': 'logo2', 'logo_path': 'logo2',
'org': 'CASES', 'org': 'CASES',
}, },
{ {
'progression': '', 'rank': random.randint(1,16),
'logo_path': 'logo3', 'logo_path': 'logo3',
'org': 'SMILE', 'org': 'SMILE',
}, },
{ {
'progression': '', 'rank': random.randint(1,16),
'logo_path': 'logo4', 'logo_path': 'logo4',
'org': 'ORG4', 'org': 'ORG4',
}, },
{ {
'progression': '', 'rank': random.randint(1,16),
'logo_path': 'logo5', 'logo_path': 'logo5',
'org': 'ORG5', 'org': 'ORG5',
}, },
] ]
return jsonify(data) return jsonify(data*2)
@app.route("/_getTopContributor")
def getTopContributor():
data = [
{
'rank': random.randint(1,16),
'logo_path': 'logo1',
'org': 'CIRCL',
},
{
'rank': random.randint(1,16),
'logo_path': 'logo2',
'org': 'CASES',
},
{
'rank': random.randint(1,16),
'logo_path': 'logo3',
'org': 'SMILE',
},
{
'rank': random.randint(1,16),
'logo_path': 'logo4',
'org': 'ORG4',
},
{
'rank': random.randint(1,16),
'logo_path': 'logo5',
'org': 'ORG5',
},
]
return jsonify(data*2)
@app.route("/_getTop5Overtime") @app.route("/_getTop5Overtime")
def getTop5Overtime(): def getTop5Overtime():
@ -171,12 +202,49 @@ def getTop5Overtime():
@app.route("/_getCategPerContrib") @app.route("/_getCategPerContrib")
def getCategPerContrib(): def getCategPerContrib():
data = [["", "", "CIRCL", 723, 21, 32], data = [
["", "", "CASES", 32, 435, 2], {
["", "", "SMILE", 65, 231, 3], 'rank': random.randint(1,16),
["", "", "ORG4", 34, 21, 7], 'logo_path': 'logo1',
["", "", "ORG5", 45, 211, 9]] 'org': 'CIRCL',
return jsonify(data) 'network_activity': random.randint(100,1600),
'payload_delivery': random.randint(100,1600),
'others': random.randint(1,16)
},
{
'rank': random.randint(1,16),
'logo_path': 'logo2',
'org': 'CASES',
'network_activity': random.randint(10,1600),
'payload_delivery': random.randint(10,1600),
'others': random.randint(1,16)
},
{
'rank': random.randint(1,16),
'logo_path': 'logo3',
'org': 'SMILE',
'network_activity': random.randint(1,160),
'payload_delivery': random.randint(1,160),
'others': random.randint(1,160)
},
{
'rank': random.randint(1,16),
'logo_path': 'logo4',
'org': 'ORG4',
'network_activity': random.randint(1,160),
'payload_delivery': random.randint(1,160),
'others': random.randint(1,16)
},
{
'rank': random.randint(1,16),
'logo_path': 'logo5',
'org': 'ORG5',
'network_activity': random.randint(1,16),
'payload_delivery': random.randint(1,16),
'others': random.randint(1,16)
},
]
return jsonify(data*2)
@app.route("/_getTopCoord") @app.route("/_getTopCoord")
def getTopCoord(): def getTopCoord():

2
static/css/ranking.css
View File

@ -12,6 +12,8 @@
.table > tbody > tr > td.centerCellPic { .table > tbody > tr > td.centerCellPic {
padding: 5px; padding: 5px;
text-align: center;
min-width: 45px;
} }
.star1-1{ .star1-1{

155
templates/contrib.html
View File

@ -135,8 +135,8 @@ small {
<table id="topContribTable" class="table table-hover table-striped"> <table id="topContribTable" class="table table-hover table-striped">
<thead> <thead>
<tr> <tr>
<th></th> <th>#</th>
<th></th> <th>Org rank</th>
<th>Logo</th> <th>Logo</th>
<th>Organization name</th> <th>Organization name</th>
</tr> </tr>
@ -154,51 +154,21 @@ small {
<div class="col-lg-4"> <div class="col-lg-4">
<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="glyphicon glyphicon-fire " style="margin-right: 5px;"></i><b>Top progression</b> <i class="glyphicon glyphicon-fire " style="margin-right: 5px;"></i><b>Last contributors</b>
</div> </div>
<div id="panelProgress" class="panel-body" style="height: 100%;"> <div id="panellast" class="panel-body" style="height: 100%;">
<div class="table-responsive"> <div class="table-responsive">
<table id="topProgressTable" class="table table-hover table-striped"> <table id="lastTable" class="table table-hover table-striped">
<thead> <thead>
<tr> <tr>
<th></th> <th>#</th>
<th></th> <th>Org rank</th>
<th>Logo</th> <th>Logo</th>
<th>Organization name</th> <th>Org name</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td><img src="{{ url_for('static', filename='pics/rankingMISP/4-1.png') }}" height=26px width=26px></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="{{ url_for('static', filename='pics/rankingMISP/4-2.png') }}" height=26px width=26px></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="{{ url_for('static', filename='pics/rankingMISP/4-3.png') }}" height=26px width=26px></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="{{ url_for('static', filename='pics/rankingMISP/4-4.png') }}" height=26px width=26px></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="{{ url_for('static', filename='pics/rankingMISP/4-5.png') }}" height=26px width=26px></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -218,7 +188,8 @@ small {
<table id="categTable" class="table table-hover table-striped"> <table id="categTable" class="table table-hover table-striped">
<thead> <thead>
<tr> <tr>
<th></th> <th>#</th>
<th>Org rank</th>
<th>Logo</th> <th>Logo</th>
<th>Organization name</th> <th>Organization name</th>
<th>Network Activity</th> <th>Network Activity</th>
@ -252,7 +223,8 @@ small {
<table id="fameTable" class="table table-hover table-striped" style="margin-bottom: 0px;"> <table id="fameTable" class="table table-hover table-striped" style="margin-bottom: 0px;">
<thead> <thead>
<tr> <tr>
<th></th> <th>#</th>
<th>prev. rank</th>
<th>Logo</th> <th>Logo</th>
<th>Organization name</th> <th>Organization name</th>
</tr> </tr>
@ -271,7 +243,7 @@ small {
<i class="fa fa-line-chart" style="margin-right: 5px;"></i><b>Top 5 Contributor overtime</b> <i class="fa fa-line-chart" style="margin-right: 5px;"></i><b>Top 5 Contributor overtime</b>
</div> </div>
<div id="panelRanking" class="panel-body" style="height: 100%;"> <div id="panelRanking" class="panel-body" style="height: 100%;">
<div id="divTop5Overtime" style="height: 38vh"></div> <div id="divTop5Overtime" style="height: 32vh"></div>
</div> </div>
<!-- /.panel-body --> <!-- /.panel-body -->
@ -295,6 +267,17 @@ small {
/* DATA FROM CONF */ /* DATA FROM CONF */
function getRankIcon(rank) {
var imgsPath = "{{ url_for('static', filename='pics/rankingMISP/1.png') }}";
imgsPath = imgsPath.substring(0, imgsPath.length-5);
rankLogoPath = imgsPath+rank+'.png';
var img = document.createElement('img');
img.src = rankLogoPath;
img.height = 26;
img.width = 26;
return img.outerHTML;
}
function create_stars_dom(n) { function create_stars_dom(n) {
var n = 4-n; //1 is best -> 3 stars var n = 4-n; //1 is best -> 3 stars
var div = document.createElement('DIV'); var div = document.createElement('DIV');
@ -358,7 +341,7 @@ small {
responsive: true, responsive: true,
searching: false, searching: false,
ordering: false, ordering: false,
scrollY: '50vh', scrollY: '30vh',
scrollCollapse: true, scrollCollapse: true,
paging: false, paging: false,
"language": { "language": {
@ -368,61 +351,34 @@ small {
"infoEmpty": "", "infoEmpty": "",
}, },
"info": false, "info": false,
"columnDefs": [
{ className: "centerCell", "targets": [ 0 ] }
]
};
var optionDatatable_light2 = {
responsive: true,
searching: false,
ordering: false,
scrollY: '50vh',
scrollCollapse: true,
paging: false,
"language": {
"lengthMenu": "",
"info": "",
"infoFiltered": "",
"infoEmpty": "",
},
"info": false,
"columnDefs": [
{ className: "centerCellPic", "targets": [ 0 ] }
]
}; };
var optionDatatable_top = jQuery.extend({}, optionDatatable_light)
var optionDatatable_last = jQuery.extend({}, optionDatatable_light)
var optionDatatable_fame = jQuery.extend({}, optionDatatable_light)
optionDatatable_fame.scrollY = '50vh';
var optionDatatable_Categ = { var optionDatatable_Categ = {
ajax: {
url: "{{ url_for('getCategPerContrib') }}",
dataSrc: ''
},
responsive: true, responsive: true,
searching: false, searching: true,
scrollY: '50vh', scrollY: '39vh',
scrollCollapse: true, scrollCollapse: true,
paging: false, paging: false,
"info": false, "info": false,
"columnDefs": [
{ className: "centerCell", "targets": [ 0 ] }
]
}; };
$.getJSON( "{{ url_for('getCategPerContrib') }}", function( data ) {
console.log(data);
});
$(document).ready(function() { $(document).ready(function() {
datatableTop = $('#topContribTable').DataTable(optionDatatable_light); datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
datatableFame = $('#fameTable').DataTable(optionDatatable_light); datatableFame = $('#fameTable').DataTable(optionDatatable_fame);
datatableCateg = $('#categTable').DataTable(optionDatatable_Categ); datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);
datatableProgress = $('#topProgressTable').DataTable(optionDatatable_light2); datatableLast = $('#lastTable').DataTable(optionDatatable_last);
// top contributors // top contributors
$.getJSON( "{{ url_for('getTopContributor') }}", function( data ) { $.getJSON( "{{ url_for('getTopContributor') }}", function( data ) {
for (i in data) { for (i in data) {
var row = data[i]; var row = data[i];
i = parseInt(i);
var to_add = [ var to_add = [
getIndexRank(), i+1,
row.progression, getRankIcon(row.rank),
row.logo_path, row.logo_path,
row.org row.org
]; ];
@ -434,11 +390,12 @@ small {
// hall of fame // hall of fame
$.getJSON( "{{ url_for('getTopContributor') }}", function( data ) { $.getJSON( "{{ url_for('getTopContributor') }}", function( data ) {
datatableIndex = 1; datatableIndex = 1;
var table = document.getElementById('fameTableBody');
for (i in data) { for (i in data) {
var row = data[i]; var row = data[i];
i = parseInt(i);
var to_add = [ var to_add = [
getIndexRank(), i+1,
getRankIcon(row.rank),
row.logo_path, row.logo_path,
row.org row.org
]; ];
@ -447,6 +404,38 @@ small {
datatableFame.draw(); datatableFame.draw();
}); });
$.getJSON( "{{ url_for('getTopContributor') }}", function( data ) {
for (i in data) {
var row = data[i];
i = parseInt(i);
var to_add = [
i+1,
getRankIcon(row.rank),
row.logo_path,
row.org
];
datatableLast.row.add(to_add);
}
datatableLast.draw();
});
$.getJSON( "{{ url_for('getCategPerContrib') }}", function( data ) {
for (i in data) {
var row = data[i];
i = parseInt(i);
var to_add = [
i+1,
getRankIcon(row.rank),
row.logo_path,
row.org,
row.network_activity,
row.payload_delivery,
row.others
];
datatableCateg.row.add(to_add);
}
datatableCateg.draw();
});
// top 5 contrib overtime // top 5 contrib overtime
$.getJSON( "{{ url_for('getTop5Overtime') }}", function( data ) { $.getJSON( "{{ url_for('getTop5Overtime') }}", function( data ) {
var plotLineChart = $.plot("#divTop5Overtime", data, optionsLineChart); var plotLineChart = $.plot("#divTop5Overtime", data, optionsLineChart);