mirror of https://github.com/MISP/misp-dashboard
Moved js and css in their own scripts
Sami Mokaddem
parent
ed6bcc2b8d
commit
1ae827d202
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
.ranking {
|
.ranking {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -20,5 +19,58 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-6 {
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-8 {
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-4 {
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-12 {
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftSepa {
|
||||||
|
border-left-color: rgb(221, 221, 221);
|
||||||
|
border-left-style: solid;
|
||||||
|
border-left-width: 2px;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textTopHeader {
|
||||||
|
height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 8px;
|
||||||
|
float: left;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display:block;
|
||||||
|
margin-left:auto;
|
||||||
|
margin-right:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
/* CONFIG */
|
||||||
|
var allOrg = [];
|
||||||
|
var datatableTop;
|
||||||
|
var datatableFame;
|
||||||
|
var optionsLineChart = {
|
||||||
|
series: {
|
||||||
|
shadowSize: 0 ,
|
||||||
|
lines: {
|
||||||
|
fill: true,
|
||||||
|
fillColor: {
|
||||||
|
colors: [ { opacity: 1 }, { opacity: 0.1 } ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
points: { show: true },
|
||||||
|
lines: { show: true, fill: true },
|
||||||
|
grid: {
|
||||||
|
tickColor: "#dddddd",
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
position: "nw"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var optionDatatable_light = {
|
||||||
|
responsive: true,
|
||||||
|
searching: false,
|
||||||
|
ordering: false,
|
||||||
|
scrollY: '30vh',
|
||||||
|
scrollCollapse: true,
|
||||||
|
paging: false,
|
||||||
|
"language": {
|
||||||
|
"lengthMenu": "",
|
||||||
|
"info": "",
|
||||||
|
"infoFiltered": "",
|
||||||
|
"infoEmpty": "",
|
||||||
|
},
|
||||||
|
"info": false,
|
||||||
|
};
|
||||||
|
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 = {
|
||||||
|
responsive: true,
|
||||||
|
searching: true,
|
||||||
|
scrollY: '39vh',
|
||||||
|
scrollCollapse: true,
|
||||||
|
paging: false,
|
||||||
|
"info": false,
|
||||||
|
};
|
||||||
|
|
||||||
|
var typeaheadOption = {
|
||||||
|
source: function (query, process) {
|
||||||
|
if (allOrg.length == 0) { // caching
|
||||||
|
return $.getJSON(url_getAllOrg, function (data) {
|
||||||
|
allOrg = data;
|
||||||
|
return process(data);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return process(allOrg);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updater: function(item) {
|
||||||
|
$('#orgText').text(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FUNCTIONS */
|
||||||
|
function getRankIcon(rank, size) {
|
||||||
|
rankLogoPath = url_baseRankLogo+rank+'.png';
|
||||||
|
var img = document.createElement('img');
|
||||||
|
img.src = rankLogoPath;
|
||||||
|
if(size == undefined) {
|
||||||
|
img.height = 26;
|
||||||
|
img.width = 26;
|
||||||
|
} else {
|
||||||
|
img.height = size;
|
||||||
|
img.width = size;
|
||||||
|
}
|
||||||
|
return img.outerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addToTableFromJson(datatable, url) {
|
||||||
|
$.getJSON( url, 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
|
||||||
|
];
|
||||||
|
datatable.row.add(to_add);
|
||||||
|
}
|
||||||
|
datatable.draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('#orgName').typeahead(typeaheadOption);
|
||||||
|
$('#orgRankDiv').html(getRankIcon(8, 50));
|
||||||
|
$('#orgNextRankDiv').html(getRankIcon(9, 50));
|
||||||
|
$('#orgText').text(currOrg);
|
||||||
|
datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
|
||||||
|
datatableFame = $('#fameTable').DataTable(optionDatatable_fame);
|
||||||
|
datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);
|
||||||
|
datatableLast = $('#lastTable').DataTable(optionDatatable_last);
|
||||||
|
// top contributors
|
||||||
|
$.getJSON(url_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
|
||||||
|
];
|
||||||
|
datatableTop.row.add(to_add);
|
||||||
|
}
|
||||||
|
datatableTop.draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
// hall of fame
|
||||||
|
$.getJSON( url_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
|
||||||
|
];
|
||||||
|
datatableFame.row.add(to_add);
|
||||||
|
}
|
||||||
|
datatableFame.draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
$.getJSON( url_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_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
|
||||||
|
$.getJSON( url_getTop5Overtime, function( data ) {
|
||||||
|
var plotLineChart = $.plot("#divTop5Overtime", data, optionsLineChart);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -43,62 +43,6 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<style>
|
|
||||||
.panel-body {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
.panel {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-lg-6 {
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-lg-8 {
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-lg-4 {
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-lg-12 {
|
|
||||||
padding-right: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leftSepa {
|
|
||||||
border-left-color: rgb(221, 221, 221);
|
|
||||||
border-left-style: solid;
|
|
||||||
border-left-width: 2px;
|
|
||||||
padding-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textTopHeader {
|
|
||||||
height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
margin-left: 8px;
|
|
||||||
float: left;
|
|
||||||
padding-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
display:block;
|
|
||||||
margin-left:auto;
|
|
||||||
margin-right:auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 100%;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
|
|
@ -123,7 +67,7 @@ small {
|
||||||
<div class='leftSepa textTopHeader' style="min-width: 100px;">
|
<div class='leftSepa textTopHeader' style="min-width: 100px;">
|
||||||
<strong id="orgText"></strong>
|
<strong id="orgText"></strong>
|
||||||
</div>
|
</div>
|
||||||
<div id="orgRankDiv" class='textTopHeader'>
|
<div id="orgRankDiv" class='textTopHeader' style="padding-top: 0px;">
|
||||||
</div>
|
</div>
|
||||||
<div class='textTopHeader'>
|
<div class='textTopHeader'>
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
|
|
@ -131,7 +75,7 @@ small {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="orgNextRankDiv" class='textTopHeader'>
|
<div id="orgNextRankDiv" class='textTopHeader' style="padding-top: 0px;">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -286,170 +230,18 @@ small {
|
||||||
<!-- Index -->
|
<!-- Index -->
|
||||||
<script>
|
<script>
|
||||||
/* URL */
|
/* URL */
|
||||||
|
var url_getTopContributor = "{{ url_for('getTopContributor') }}";
|
||||||
|
var url_getCategPerContrib = "{{ url_for('getCategPerContrib') }}";
|
||||||
|
var url_getTop5Overtime = "{{ url_for('getTop5Overtime') }}";
|
||||||
|
var url_getAllOrg = "{{ url_for('getAllOrg') }}";
|
||||||
|
var url_baseRankLogo = "{{ url_for('static', filename='pics/rankingMISP/1.png') }}";
|
||||||
|
url_baseRankLogo = url_baseRankLogo.substring(0, url_baseRankLogo.length-5);
|
||||||
|
|
||||||
/* DATA FROM CONF */
|
/* DATA FROM CONF */
|
||||||
|
var currOrg = "{{ currOrg }}";
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
var allOrg = [];
|
|
||||||
var typeaheadOption = {
|
|
||||||
source: function (query, process) {
|
|
||||||
if (allOrg.length == 0) { // caching
|
|
||||||
return $.getJSON("{{ url_for('getAllOrg') }}", function (data) {
|
|
||||||
allOrg = data;
|
|
||||||
return process(data);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return process(allOrg);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updater: function(item) {
|
|
||||||
$('#orgText').text(item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var datatableTop;
|
|
||||||
var datatableFame;
|
|
||||||
|
|
||||||
var optionsLineChart = {
|
|
||||||
series: {
|
|
||||||
shadowSize: 0 ,
|
|
||||||
lines: {
|
|
||||||
fill: true,
|
|
||||||
fillColor: {
|
|
||||||
colors: [ { opacity: 1 }, { opacity: 0.1 } ]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
points: { show: true },
|
|
||||||
lines: { show: true, fill: true },
|
|
||||||
grid: {
|
|
||||||
tickColor: "#dddddd",
|
|
||||||
borderWidth: 0
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
position: "nw"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var optionDatatable_light = {
|
|
||||||
responsive: true,
|
|
||||||
searching: false,
|
|
||||||
ordering: false,
|
|
||||||
scrollY: '30vh',
|
|
||||||
scrollCollapse: true,
|
|
||||||
paging: false,
|
|
||||||
"language": {
|
|
||||||
"lengthMenu": "",
|
|
||||||
"info": "",
|
|
||||||
"infoFiltered": "",
|
|
||||||
"infoEmpty": "",
|
|
||||||
},
|
|
||||||
"info": false,
|
|
||||||
};
|
|
||||||
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 = {
|
|
||||||
responsive: true,
|
|
||||||
searching: true,
|
|
||||||
scrollY: '39vh',
|
|
||||||
scrollCollapse: true,
|
|
||||||
paging: false,
|
|
||||||
"info": false,
|
|
||||||
};
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
|
||||||
$('#orgName').typeahead(typeaheadOption);
|
|
||||||
$('#orgRankDiv').html(getRankIcon(8));
|
|
||||||
$('#orgNextRankDiv').html(getRankIcon(9));
|
|
||||||
$('#orgText').text('{{ currOrg }}');
|
|
||||||
datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
|
|
||||||
datatableFame = $('#fameTable').DataTable(optionDatatable_fame);
|
|
||||||
datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);
|
|
||||||
datatableLast = $('#lastTable').DataTable(optionDatatable_last);
|
|
||||||
// top contributors
|
|
||||||
$.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
|
|
||||||
];
|
|
||||||
datatableTop.row.add(to_add);
|
|
||||||
}
|
|
||||||
datatableTop.draw();
|
|
||||||
});
|
|
||||||
|
|
||||||
// hall of fame
|
|
||||||
$.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
|
|
||||||
];
|
|
||||||
datatableFame.row.add(to_add);
|
|
||||||
}
|
|
||||||
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
|
|
||||||
$.getJSON( "{{ url_for('getTop5Overtime') }}", function( data ) {
|
|
||||||
var plotLineChart = $.plot("#divTop5Overtime", data, optionsLineChart);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
<script src="{{ url_for('static', filename='js/contrib.js') }}"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue