mirror of https://github.com/MISP/misp-dashboard
Splitted index script into sub_scripts
Sami Mokaddem
parent
801a9111ce
commit
00e2e7bd6a
|
|
@ -1,412 +0,0 @@
|
||||||
//color: #5f6062
|
|
||||||
var updateInterval = 1000*graph_log_refresh_rate; // 1s
|
|
||||||
var maxNumPoint = 60;
|
|
||||||
var maxNumCoord = 100;
|
|
||||||
var max_img_rotation = 10;
|
|
||||||
var rotation_time = 1000*10; //10s
|
|
||||||
|
|
||||||
var mymap = L.map('feedDivMap1').setView([51.505, -0.09], 13);;
|
|
||||||
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
||||||
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
|
|
||||||
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 17, attribution: osmAttrib}).addTo(mymap);
|
|
||||||
|
|
||||||
var coord_to_change = 0;
|
|
||||||
var coord_array = [];
|
|
||||||
var img_to_change = 0;
|
|
||||||
var img_array = [];
|
|
||||||
var first_map = true;
|
|
||||||
var emptyArray = [];
|
|
||||||
var mapCoord = [];
|
|
||||||
var mapVal = [];
|
|
||||||
for(i=0; i<maxNumPoint; i++) {
|
|
||||||
emptyArray.push([i, 0]);
|
|
||||||
if (i<20) {
|
|
||||||
mapCoord.push([]);
|
|
||||||
mapVal.push(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Sources {
|
|
||||||
constructor() {
|
|
||||||
this._sourcesArray = {};
|
|
||||||
this._sourcesCount = {};
|
|
||||||
this._sourcesCountMax = {};
|
|
||||||
this._globalMax = 0;
|
|
||||||
this._sourceNames = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
addSource(sourceName) {
|
|
||||||
this._sourcesArray[sourceName] = emptyArray;
|
|
||||||
this._sourcesCount[sourceName] = 0;
|
|
||||||
this._sourcesCountMax[sourceName] = 0;
|
|
||||||
this._sourceNames.push(sourceName);
|
|
||||||
}
|
|
||||||
|
|
||||||
addIfNotPresent(sourceName) {
|
|
||||||
if (this._sourceNames.indexOf(sourceName) == -1) {
|
|
||||||
this.addSource(sourceName);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
incCountOnSource(sourceName) {
|
|
||||||
this._sourcesCount[sourceName] += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
resetCountOnSource() {
|
|
||||||
for (var src of this._sourceNames) {
|
|
||||||
this._sourcesCount[src] = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
slideSource() {
|
|
||||||
var globMax = 0;
|
|
||||||
for (var src of this._sourceNames) {
|
|
||||||
// res[0] = max, res[1] = slidedArray
|
|
||||||
var res = slideAndMax(this._sourcesArray[src], this._sourcesCount[src]);
|
|
||||||
// max
|
|
||||||
this._sourcesCountMax[src] = res[0];
|
|
||||||
globMax = globMax > res[0] ? globMax : res[0];
|
|
||||||
// data
|
|
||||||
this._sourcesArray[src] = res[1];
|
|
||||||
}
|
|
||||||
this._globalMax = globMax;
|
|
||||||
}
|
|
||||||
|
|
||||||
toArray() {
|
|
||||||
var to_return = [];
|
|
||||||
for (var src of this._sourceNames) {
|
|
||||||
to_return.push({
|
|
||||||
label: src,
|
|
||||||
data: this._sourcesArray[src]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return to_return;
|
|
||||||
}
|
|
||||||
|
|
||||||
getGlobalMax() {
|
|
||||||
return this._globalMax;
|
|
||||||
}
|
|
||||||
|
|
||||||
getSingleSource(sourceName) {
|
|
||||||
return this._sourcesArray[sourceName];
|
|
||||||
}
|
|
||||||
|
|
||||||
getEmptyData() {
|
|
||||||
return [{label: 'no data', data: emptyArray}];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var sources = new Sources();
|
|
||||||
sources.addSource('global');
|
|
||||||
|
|
||||||
var curNumLog = 0;
|
|
||||||
var curMaxDataNumLog = 0;
|
|
||||||
|
|
||||||
var optionsLineChart = {
|
|
||||||
series: {
|
|
||||||
shadowSize: 0 ,
|
|
||||||
lines: {
|
|
||||||
fill: true,
|
|
||||||
fillColor: {
|
|
||||||
colors: [ { opacity: 1 }, { opacity: 0.1 } ]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//colors: ["#2fa1db"],
|
|
||||||
yaxis: { min: 0, max: 20 },
|
|
||||||
xaxis: { min: 0, max: maxNumPoint-1 },
|
|
||||||
ticks: maxNumPoint,
|
|
||||||
grid: {
|
|
||||||
tickColor: "#dddddd",
|
|
||||||
borderWidth: 0
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
position: "nw"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function labelFormatter(label, series) {
|
|
||||||
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
|
|
||||||
+ label + "<br/>" + Math.round(series.percent) + "%</div>";
|
|
||||||
}
|
|
||||||
var optionsPieChart = {
|
|
||||||
series: {
|
|
||||||
pie: {
|
|
||||||
innerRadius: 0.5,
|
|
||||||
show: true,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
radius: 1,
|
|
||||||
formatter: labelFormatter,
|
|
||||||
background: {
|
|
||||||
opacity: 0.7,
|
|
||||||
color: '#000'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function ping() {
|
|
||||||
pnts = mapObj.latLngToPoint(map_lat, map_lon);
|
|
||||||
if (pnts != false) { //sometimes latLngToPoint return false
|
|
||||||
$("#feedDiv2").append(
|
|
||||||
$('<div class="marker_animation"></div>')
|
|
||||||
.css({'left': pnts.x-15 + 'px'}) /* HACK to center the effect */
|
|
||||||
.css({'top': pnts.y-15 + 'px'})
|
|
||||||
.css({ 'background-color': 'orange' })
|
|
||||||
.animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 400, 'linear', function(){$(this).remove(); })
|
|
||||||
);
|
|
||||||
}
|
|
||||||
setTimeout(function(){ ping(); }, rotation_time/4);
|
|
||||||
}
|
|
||||||
|
|
||||||
var map_lat, map_lon;
|
|
||||||
function rotate_map() {
|
|
||||||
var to_switch = coord_array[coord_to_change];
|
|
||||||
var coord = to_switch[0];
|
|
||||||
map_lat = coord.lat;
|
|
||||||
map_lon = coord.lon;
|
|
||||||
var marker = to_switch[1];
|
|
||||||
var headerTxt = to_switch[2];
|
|
||||||
mymap.setView([coord.lat, coord.lon], 17);
|
|
||||||
|
|
||||||
$("#textMap1").fadeOut(400, function(){ $(this).text(headerTxt); }).fadeIn(400);
|
|
||||||
coord_to_change = coord_to_change == coord_array.length-1 ? 0 : coord_to_change+1;
|
|
||||||
|
|
||||||
setTimeout(function(){ rotate_map(); }, rotation_time);
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
|
||||||
createHead(function() {
|
|
||||||
if (!!window.EventSource) {
|
|
||||||
var source_log = new EventSource(urlForLogs);
|
|
||||||
|
|
||||||
source_log.onopen = function(){
|
|
||||||
//console.log('connection is opened. '+source_log.readyState);
|
|
||||||
};
|
|
||||||
|
|
||||||
source_log.onerror = function(){
|
|
||||||
//console.log('error: '+source_log.readyState);
|
|
||||||
};
|
|
||||||
|
|
||||||
source_log.onmessage = function(event) {
|
|
||||||
var json = jQuery.parseJSON( event.data );
|
|
||||||
updateLogTable(json.feedName, json.log);
|
|
||||||
};
|
|
||||||
|
|
||||||
} else {
|
|
||||||
console.log("No event source_log");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var source_map = new EventSource(urlForMaps);
|
|
||||||
source_map.onmessage = function(event) {
|
|
||||||
var json = jQuery.parseJSON( event.data );
|
|
||||||
popupCoord(json.coord);
|
|
||||||
var img2 = linkForDefaultMap.replace(/\/[^\/]+$/, "/"+json.path);
|
|
||||||
|
|
||||||
if (coord_array.len >= max_img_rotation) {
|
|
||||||
coord_array[0][1].remove() // remove marker
|
|
||||||
coord_array.slice(1)
|
|
||||||
}
|
|
||||||
var marker = L.marker([json.coord.lat, json.coord.lon]).addTo(mymap);
|
|
||||||
coord_array.push([json.coord, marker, ""+json.coord.lat+", "+json.coord.lon]);
|
|
||||||
|
|
||||||
if (first_map) { // remove no_map pic
|
|
||||||
rotate_map();
|
|
||||||
ping();
|
|
||||||
first_map = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
source_map.onopen = function(){
|
|
||||||
console.log('connection is opened. '+source_map.readyState);
|
|
||||||
};
|
|
||||||
source_map.onerror = function(){
|
|
||||||
console.log('error: '+source_map.readyState);
|
|
||||||
};
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
var rData = [
|
|
||||||
{ label: "Series1", data: 10},
|
|
||||||
{ label: "Series2", data: 30},
|
|
||||||
{ label: "Series3", data: 60}
|
|
||||||
];
|
|
||||||
var plotLineChart = $.plot("#feedDiv3", sources.getEmptyData(), optionsLineChart);
|
|
||||||
//var plotPieChartA = $.plot("#feedDiv1A", rData, optionsPieChart);
|
|
||||||
//var plotPieChartB = $.plot("#feedDiv1B", rData, optionsPieChart);
|
|
||||||
updateChart()
|
|
||||||
|
|
||||||
function updateChart() {
|
|
||||||
updateChart1();
|
|
||||||
updateChart2();
|
|
||||||
setTimeout(updateChart, updateInterval);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateChart1() {
|
|
||||||
sources.slideSource();
|
|
||||||
sources.resetCountOnSource();
|
|
||||||
plotLineChart.setData(sources.toArray());
|
|
||||||
plotLineChart.getOptions().yaxes[0].max = sources.getGlobalMax();
|
|
||||||
plotLineChart.setupGrid();
|
|
||||||
plotLineChart.draw();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateChart2() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateLogTable(feedName, log) {
|
|
||||||
if (log.length == 0)
|
|
||||||
return;
|
|
||||||
|
|
||||||
// Create new row
|
|
||||||
tableBody = document.getElementById('table_log_body');
|
|
||||||
//curNumLog++;
|
|
||||||
sources.addIfNotPresent(feedName);
|
|
||||||
sources.incCountOnSource(feedName);
|
|
||||||
sources.incCountOnSource('global');
|
|
||||||
|
|
||||||
// only add row for attribute
|
|
||||||
if (feedName == "Attribute" ) {
|
|
||||||
createRow(tableBody, log);
|
|
||||||
|
|
||||||
// Remove old row
|
|
||||||
var logSel = document.getElementById("log_select");
|
|
||||||
//get height of pannel, find max num of item
|
|
||||||
var maxNumLogItem = document.getElementById('divLogTable').clientHeight/37;
|
|
||||||
maxNumLogItem -= 2; //take heading/padding/... into account
|
|
||||||
if (maxNumLogItem - parseInt(maxNumLogItem) < 0.5) { //beautifier
|
|
||||||
maxNumLogItem -= 1;
|
|
||||||
}
|
|
||||||
if (tableBody.rows.length > maxNumLogItem) {
|
|
||||||
while (tableBody.rows.length >= maxNumLogItem){
|
|
||||||
tableBody.deleteRow(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// do nothing
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function slideAndMax(orig, newData) {
|
|
||||||
var slided = [];
|
|
||||||
var max = newData;
|
|
||||||
for (i=1; i<orig.length; i++) {
|
|
||||||
y = orig[i][1];
|
|
||||||
slided.push([i-1, y]);
|
|
||||||
max = y > max ? y : max;
|
|
||||||
}
|
|
||||||
slided.push([orig.length-1, newData]);
|
|
||||||
curMaxDataNumLog = max;
|
|
||||||
return [curMaxDataNumLog, slided];
|
|
||||||
}
|
|
||||||
|
|
||||||
function createRow(tableBody, log) {
|
|
||||||
var tr = document.createElement('TR');
|
|
||||||
//var action = document.createElement('TD');
|
|
||||||
|
|
||||||
for (var key in log) {
|
|
||||||
if (log.hasOwnProperty(key)) {
|
|
||||||
var td = document.createElement('TD');
|
|
||||||
td.appendChild(document.createTextNode(log[key]));
|
|
||||||
tr.appendChild(td);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// level
|
|
||||||
if( log.level == "INFO" ){
|
|
||||||
tr.className = "info";
|
|
||||||
}
|
|
||||||
else if ( log.level == "WARNING" ){
|
|
||||||
tr.className = "warning";
|
|
||||||
}
|
|
||||||
else if ( log.level == "CRITICAL"){
|
|
||||||
tr.className = "danger"
|
|
||||||
}
|
|
||||||
|
|
||||||
// action
|
|
||||||
//action.appendChild(document.createTextNode("ACTION"));
|
|
||||||
//tr.appendChild(action);
|
|
||||||
|
|
||||||
tableBody.appendChild(tr);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function createHead(callback) {
|
|
||||||
if (document.getElementById('table_log_head').childNodes.length > 1)
|
|
||||||
return
|
|
||||||
$.getJSON( urlForHead, function( data ) {
|
|
||||||
var tr = document.createElement('TR');
|
|
||||||
for (head of data) {
|
|
||||||
var th = document.createElement('TH');
|
|
||||||
th.appendChild(document.createTextNode(head));
|
|
||||||
tr.appendChild(th);
|
|
||||||
}
|
|
||||||
//var action = document.createElement('TH');
|
|
||||||
//action.appendChild(document.createTextNode("Actions"));
|
|
||||||
//tr.appendChild(action);
|
|
||||||
document.getElementById('table_log_head').appendChild(tr);
|
|
||||||
callback();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* MAP */
|
|
||||||
var mapObj;
|
|
||||||
var curNumMarker = 0;
|
|
||||||
var allMarker = [];
|
|
||||||
|
|
||||||
function marker_animation(x, y, curNumMarker) {
|
|
||||||
var markerColor = mapObj.markers[curNumMarker].element.config.style.current.fill;
|
|
||||||
$("#feedDiv2").append(
|
|
||||||
$('<div class="marker_animation"></div>')
|
|
||||||
.css({'left': x-15 + 'px'}) /* HACK to center the effect */
|
|
||||||
.css({'top': y-15 + 'px'})
|
|
||||||
.css({ 'background-color': markerColor })
|
|
||||||
.animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 700, 'linear', function(){$(this).remove(); })
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function popupCoord(coord) {
|
|
||||||
var coord = [coord['lat'], coord['lon']];
|
|
||||||
var value = Math.random()*180;
|
|
||||||
pnts = mapObj.latLngToPoint(coord[0], coord[1])
|
|
||||||
if (pnts != false) { //sometimes latLngToPoint return false
|
|
||||||
mapObj.addMarker(curNumMarker, coord, [value]);
|
|
||||||
allMarker.push(curNumMarker)
|
|
||||||
marker_animation(pnts.x, pnts.y, curNumMarker);
|
|
||||||
curNumMarker = curNumMarker>=maxNumCoord ? 0 : curNumMarker+1;
|
|
||||||
if (allMarker.length >= maxNumCoord) {
|
|
||||||
to_remove = allMarker[0];
|
|
||||||
mapObj.removeMarkers([to_remove]);
|
|
||||||
allMarker = allMarker.slice(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$(function(){
|
|
||||||
$('#feedDiv2').vectorMap({
|
|
||||||
map: 'world_mill',
|
|
||||||
markers: [],
|
|
||||||
series: {
|
|
||||||
markers: [{
|
|
||||||
attribute: 'fill',
|
|
||||||
scale: ['#1A0DAB', '#e50000', '#62ff41'],
|
|
||||||
values: [],
|
|
||||||
min: 0,
|
|
||||||
max: 180
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
})
|
|
||||||
mapObj = $("#feedDiv2").vectorMap('get','mapObject');
|
|
||||||
});
|
|
||||||
|
|
@ -0,0 +1,199 @@
|
||||||
|
class Sources {
|
||||||
|
constructor() {
|
||||||
|
this._sourcesArray = {};
|
||||||
|
this._sourcesCount = {};
|
||||||
|
this._sourcesCountMax = {};
|
||||||
|
this._globalMax = 0;
|
||||||
|
this._sourceNames = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
addSource(sourceName) {
|
||||||
|
this._sourcesArray[sourceName] = [];
|
||||||
|
this._sourcesCount[sourceName] = 0;
|
||||||
|
this._sourcesCountMax[sourceName] = 0;
|
||||||
|
this._sourceNames.push(sourceName);
|
||||||
|
}
|
||||||
|
|
||||||
|
addIfNotPresent(sourceName) {
|
||||||
|
if (this._sourceNames.indexOf(sourceName) == -1) {
|
||||||
|
this.addSource(sourceName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
incCountOnSource(sourceName) {
|
||||||
|
this._sourcesCount[sourceName] += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
resetCountOnSource() {
|
||||||
|
for (var src of this._sourceNames) {
|
||||||
|
this._sourcesCount[src] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
slideSource() {
|
||||||
|
var globMax = 0;
|
||||||
|
for (var src of this._sourceNames) {
|
||||||
|
// res[0] = max, res[1] = slidedArray
|
||||||
|
var res = slideAndMax(this._sourcesArray[src], this._sourcesCount[src]);
|
||||||
|
// max
|
||||||
|
this._sourcesCountMax[src] = res[0];
|
||||||
|
globMax = globMax > res[0] ? globMax : res[0];
|
||||||
|
// data
|
||||||
|
this._sourcesArray[src] = res[1];
|
||||||
|
}
|
||||||
|
this._globalMax = globMax;
|
||||||
|
}
|
||||||
|
|
||||||
|
toArray() {
|
||||||
|
var to_return = [];
|
||||||
|
for (var src of this._sourceNames) {
|
||||||
|
to_return.push({
|
||||||
|
label: src,
|
||||||
|
data: this._sourcesArray[src]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return to_return;
|
||||||
|
}
|
||||||
|
|
||||||
|
getGlobalMax() {
|
||||||
|
return this._globalMax;
|
||||||
|
}
|
||||||
|
|
||||||
|
getSingleSource(sourceName) {
|
||||||
|
return this._sourcesArray[sourceName];
|
||||||
|
}
|
||||||
|
|
||||||
|
getEmptyData() {
|
||||||
|
return [{label: 'no data', data: []}];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* END CLASS SOURCE */
|
||||||
|
|
||||||
|
var sources = new Sources();
|
||||||
|
sources.addSource('global');
|
||||||
|
|
||||||
|
var curNumLog = 0;
|
||||||
|
var curMaxDataNumLog = 0;
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
createHead(function() {
|
||||||
|
if (!!window.EventSource) {
|
||||||
|
var source_log = new EventSource(urlForLogs);
|
||||||
|
|
||||||
|
source_log.onopen = function(){
|
||||||
|
//console.log('connection is opened. '+source_log.readyState);
|
||||||
|
};
|
||||||
|
|
||||||
|
source_log.onerror = function(){
|
||||||
|
//console.log('error: '+source_log.readyState);
|
||||||
|
};
|
||||||
|
|
||||||
|
source_log.onmessage = function(event) {
|
||||||
|
var json = jQuery.parseJSON( event.data );
|
||||||
|
updateLogTable(json.feedName, json.log);
|
||||||
|
};
|
||||||
|
|
||||||
|
} else {
|
||||||
|
console.log("No event source_log");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// LOG TABLE
|
||||||
|
function updateLogTable(feedName, log) {
|
||||||
|
if (log.length == 0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// Create new row
|
||||||
|
tableBody = document.getElementById('table_log_body');
|
||||||
|
//curNumLog++;
|
||||||
|
sources.addIfNotPresent(feedName);
|
||||||
|
sources.incCountOnSource(feedName);
|
||||||
|
sources.incCountOnSource('global');
|
||||||
|
|
||||||
|
// only add row for attribute
|
||||||
|
if (feedName == "Attribute" ) {
|
||||||
|
createRow(tableBody, log);
|
||||||
|
|
||||||
|
// Remove old row
|
||||||
|
var logSel = document.getElementById("log_select");
|
||||||
|
//get height of pannel, find max num of item
|
||||||
|
var maxNumLogItem = document.getElementById('divLogTable').clientHeight/37;
|
||||||
|
maxNumLogItem -= 2; //take heading/padding/... into account
|
||||||
|
if (maxNumLogItem - parseInt(maxNumLogItem) < 0.5) { //beautifier
|
||||||
|
maxNumLogItem -= 1;
|
||||||
|
}
|
||||||
|
if (tableBody.rows.length > maxNumLogItem) {
|
||||||
|
while (tableBody.rows.length >= maxNumLogItem){
|
||||||
|
tableBody.deleteRow(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// do nothing
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function slideAndMax(orig, newData) {
|
||||||
|
var slided = [];
|
||||||
|
var max = newData;
|
||||||
|
for (i=1; i<orig.length; i++) {
|
||||||
|
y = orig[i][1];
|
||||||
|
slided.push([i-1, y]);
|
||||||
|
max = y > max ? y : max;
|
||||||
|
}
|
||||||
|
slided.push([orig.length-1, newData]);
|
||||||
|
curMaxDataNumLog = max;
|
||||||
|
return [curMaxDataNumLog, slided];
|
||||||
|
}
|
||||||
|
|
||||||
|
function createRow(tableBody, log) {
|
||||||
|
var tr = document.createElement('TR');
|
||||||
|
//var action = document.createElement('TD');
|
||||||
|
|
||||||
|
for (var key in log) {
|
||||||
|
if (log.hasOwnProperty(key)) {
|
||||||
|
var td = document.createElement('TD');
|
||||||
|
td.appendChild(document.createTextNode(log[key]));
|
||||||
|
tr.appendChild(td);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// level
|
||||||
|
if( log.level == "INFO" ){
|
||||||
|
tr.className = "info";
|
||||||
|
}
|
||||||
|
else if ( log.level == "WARNING" ){
|
||||||
|
tr.className = "warning";
|
||||||
|
}
|
||||||
|
else if ( log.level == "CRITICAL"){
|
||||||
|
tr.className = "danger"
|
||||||
|
}
|
||||||
|
|
||||||
|
// action
|
||||||
|
//action.appendChild(document.createTextNode("ACTION"));
|
||||||
|
//tr.appendChild(action);
|
||||||
|
|
||||||
|
tableBody.appendChild(tr);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function createHead(callback) {
|
||||||
|
if (document.getElementById('table_log_head').childNodes.length > 1)
|
||||||
|
return
|
||||||
|
$.getJSON( urlForHead, function( data ) {
|
||||||
|
var tr = document.createElement('TR');
|
||||||
|
for (head of data) {
|
||||||
|
var th = document.createElement('TH');
|
||||||
|
th.appendChild(document.createTextNode(head));
|
||||||
|
tr.appendChild(th);
|
||||||
|
}
|
||||||
|
//var action = document.createElement('TH');
|
||||||
|
//action.appendChild(document.createTextNode("Actions"));
|
||||||
|
//tr.appendChild(action);
|
||||||
|
document.getElementById('table_log_head').appendChild(tr);
|
||||||
|
callback();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
var updateInterval = 1000*graph_log_refresh_rate; // 1s
|
||||||
|
var maxNumPoint = 60;
|
||||||
|
|
||||||
|
var optionsLineChart = {
|
||||||
|
series: {
|
||||||
|
shadowSize: 0 ,
|
||||||
|
lines: {
|
||||||
|
fill: true,
|
||||||
|
fillColor: {
|
||||||
|
colors: [ { opacity: 1 }, { opacity: 0.1 } ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//colors: ["#2fa1db"],
|
||||||
|
yaxis: { min: 0, max: 20 },
|
||||||
|
xaxis: { min: 0, max: maxNumPoint-1 },
|
||||||
|
ticks: maxNumPoint,
|
||||||
|
grid: {
|
||||||
|
tickColor: "#dddddd",
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
position: "nw"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var rData = [
|
||||||
|
{ label: "Series1", data: 10},
|
||||||
|
{ label: "Series2", data: 30},
|
||||||
|
{ label: "Series3", data: 60}
|
||||||
|
];
|
||||||
|
var plotLineChart = $.plot("#feedDiv3", sources.getEmptyData(), optionsLineChart);
|
||||||
|
|
||||||
|
function updateChart() {
|
||||||
|
sources.slideSource();
|
||||||
|
sources.resetCountOnSource();
|
||||||
|
plotLineChart.setData(sources.toArray());
|
||||||
|
plotLineChart.getOptions().yaxes[0].max = sources.getGlobalMax();
|
||||||
|
plotLineChart.setupGrid();
|
||||||
|
plotLineChart.draw();
|
||||||
|
setTimeout(updateChart, updateInterval);
|
||||||
|
}
|
||||||
|
updateChart()
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
var maxNumCoord = 100;
|
||||||
|
var max_img_rotation = 10;
|
||||||
|
var rotation_time = 1000*10; //10s
|
||||||
|
|
||||||
|
var mymap = L.map('feedDivMap1').setView([51.505, -0.09], 13);;
|
||||||
|
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||||
|
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
|
||||||
|
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 17, attribution: osmAttrib}).addTo(mymap);
|
||||||
|
|
||||||
|
var coord_to_change = 0;
|
||||||
|
var coord_array = [];
|
||||||
|
var first_map = true;
|
||||||
|
var map_lat, map_lon; //current lat and lon shown in openStreetMap pannel
|
||||||
|
|
||||||
|
/* MAP */
|
||||||
|
var mapObj;
|
||||||
|
var curNumMarker = 0;
|
||||||
|
var allMarker = [];
|
||||||
|
|
||||||
|
function marker_animation(x, y, curNumMarker) {
|
||||||
|
var markerColor = mapObj.markers[curNumMarker].element.config.style.current.fill;
|
||||||
|
$("#feedDiv2").append(
|
||||||
|
$('<div class="marker_animation"></div>')
|
||||||
|
.css({'left': x-15 + 'px'}) /* HACK to center the effect */
|
||||||
|
.css({'top': y-15 + 'px'})
|
||||||
|
.css({ 'background-color': markerColor })
|
||||||
|
.animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 700, 'linear', function(){$(this).remove(); })
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add makers on the map
|
||||||
|
function popupCoord(coord) {
|
||||||
|
var coord = [coord['lat'], coord['lon']];
|
||||||
|
var value = Math.random()*180;
|
||||||
|
pnts = mapObj.latLngToPoint(coord[0], coord[1])
|
||||||
|
if (pnts != false) { //sometimes latLngToPoint return false
|
||||||
|
mapObj.addMarker(curNumMarker, coord, [value]);
|
||||||
|
allMarker.push(curNumMarker)
|
||||||
|
marker_animation(pnts.x, pnts.y, curNumMarker);
|
||||||
|
curNumMarker = curNumMarker>=maxNumCoord ? 0 : curNumMarker+1;
|
||||||
|
if (allMarker.length >= maxNumCoord) {
|
||||||
|
to_remove = allMarker[0];
|
||||||
|
mapObj.removeMarkers([to_remove]);
|
||||||
|
allMarker = allMarker.slice(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Makes an animation on the marker concerned by the map shown in the openStreetMap pannel
|
||||||
|
function ping() {
|
||||||
|
pnts = mapObj.latLngToPoint(map_lat, map_lon);
|
||||||
|
if (pnts != false) { //sometimes latLngToPoint return false
|
||||||
|
$("#feedDiv2").append(
|
||||||
|
$('<div class="marker_animation"></div>')
|
||||||
|
.css({'left': pnts.x-15 + 'px'}) /* HACK to center the effect */
|
||||||
|
.css({'top': pnts.y-15 + 'px'})
|
||||||
|
.css({ 'background-color': 'orange' })
|
||||||
|
.animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 400, 'linear', function(){$(this).remove(); })
|
||||||
|
);
|
||||||
|
}
|
||||||
|
setTimeout(function(){ ping(); }, rotation_time/4);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Perform the roration of the map in the openStreetMap pannel
|
||||||
|
function rotate_map() {
|
||||||
|
var to_switch = coord_array[coord_to_change];
|
||||||
|
var coord = to_switch[0];
|
||||||
|
map_lat = coord.lat;
|
||||||
|
map_lon = coord.lon;
|
||||||
|
var marker = to_switch[1];
|
||||||
|
var headerTxt = to_switch[2];
|
||||||
|
mymap.setView([coord.lat, coord.lon], 17);
|
||||||
|
|
||||||
|
$("#textMap1").fadeOut(400, function(){ $(this).text(headerTxt); }).fadeIn(400);
|
||||||
|
coord_to_change = coord_to_change == coord_array.length-1 ? 0 : coord_to_change+1;
|
||||||
|
|
||||||
|
setTimeout(function(){ rotate_map(); }, rotation_time);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(function(){
|
||||||
|
$('#feedDiv2').vectorMap({
|
||||||
|
map: 'world_mill',
|
||||||
|
markers: [],
|
||||||
|
series: {
|
||||||
|
markers: [{
|
||||||
|
attribute: 'fill',
|
||||||
|
scale: ['#1A0DAB', '#e50000', '#62ff41'],
|
||||||
|
values: [],
|
||||||
|
min: 0,
|
||||||
|
max: 180
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
mapObj = $("#feedDiv2").vectorMap('get','mapObject');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Subscribe to the flask eventStream
|
||||||
|
var source_map = new EventSource(urlForMaps);
|
||||||
|
source_map.onmessage = function(event) {
|
||||||
|
var json = jQuery.parseJSON( event.data );
|
||||||
|
popupCoord(json.coord);
|
||||||
|
var img2 = linkForDefaultMap.replace(/\/[^\/]+$/, "/"+json.path);
|
||||||
|
|
||||||
|
if (coord_array.len >= max_img_rotation) {
|
||||||
|
coord_array[0][1].remove() // remove marker
|
||||||
|
coord_array.slice(1)
|
||||||
|
}
|
||||||
|
var marker = L.marker([json.coord.lat, json.coord.lon]).addTo(mymap);
|
||||||
|
coord_array.push([json.coord, marker, ""+json.coord.lat+", "+json.coord.lon]);
|
||||||
|
|
||||||
|
if (first_map) { // remove no_map pic
|
||||||
|
rotate_map();
|
||||||
|
ping();
|
||||||
|
first_map = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
source_map.onopen = function(){
|
||||||
|
console.log('connection is opened. '+source_map.readyState);
|
||||||
|
};
|
||||||
|
source_map.onerror = function(){
|
||||||
|
console.log('error: '+source_map.readyState);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
function labelFormatter(label, series) {
|
||||||
|
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
|
||||||
|
+ label + "<br/>" + Math.round(series.percent) + "%</div>";
|
||||||
|
}
|
||||||
|
var optionsPieChart = {
|
||||||
|
series: {
|
||||||
|
pie: {
|
||||||
|
innerRadius: 0.5,
|
||||||
|
show: true,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
radius: 1,
|
||||||
|
formatter: labelFormatter,
|
||||||
|
background: {
|
||||||
|
opacity: 0.7,
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var plotPieChartA = $.plot("#feedDiv1A", rData, optionsPieChart);
|
||||||
|
var plotPieChartB = $.plot("#feedDiv1B", rData, optionsPieChart);
|
||||||
|
|
@ -49,6 +49,20 @@ table {
|
||||||
margin-right:auto;
|
margin-right:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
.panel-default {
|
||||||
|
border-color: #ddd;
|
||||||
|
border-top-color: rgb(221, 221, 221);
|
||||||
|
border-right-color: rgb(221, 221, 221);
|
||||||
|
border-bottom-color: #fff0;
|
||||||
|
border-left-color: rgb(221, 221, 221);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -186,7 +200,10 @@ small {
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
}, 3000);
|
}, 3000);
|
||||||
</script>
|
</script>
|
||||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/index/index.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/index/index_lineChart.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/index/index_map.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/index/index_pie.js') }}"></script>
|
||||||
|
|
||||||
|
|
||||||
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
|
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue