mirror of https://github.com/MISP/misp-dashboard
Added skeleton pieChart
=
parent
7d38f86e2d
commit
c3344cb804
|
|
@ -85,7 +85,7 @@ sources.addSource('global');
|
||||||
var curNumLog = 0;
|
var curNumLog = 0;
|
||||||
var curMaxDataNumLog = 0;
|
var curMaxDataNumLog = 0;
|
||||||
|
|
||||||
var optionsGraph = {
|
var optionsLineChart = {
|
||||||
series: {
|
series: {
|
||||||
shadowSize: 0 ,
|
shadowSize: 0 ,
|
||||||
lines: {
|
lines: {
|
||||||
|
|
@ -109,6 +109,31 @@ var optionsGraph = {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
createHead(function() {
|
createHead(function() {
|
||||||
if (!!window.EventSource) {
|
if (!!window.EventSource) {
|
||||||
|
|
@ -133,9 +158,13 @@ $(document).ready(function () {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var rData = [
|
||||||
//var plot1 = $.plot("#feedDiv1", [ { label: "Number of log messages", data: dataNumLog } ], optionsGraph);
|
{ label: "Series1", data: 10},
|
||||||
var plot1 = $.plot("#feedDiv1", sources.getEmptyData(), optionsGraph);
|
{ label: "Series2", data: 30},
|
||||||
|
{ label: "Series3", data: 60}
|
||||||
|
];
|
||||||
|
var plotLineChart = $.plot("#feedDiv3", sources.getEmptyData(), optionsLineChart);
|
||||||
|
var plotPieChart = $.plot("#feedDiv1", rData, optionsPieChart);
|
||||||
updateChart()
|
updateChart()
|
||||||
|
|
||||||
function updateChart() {
|
function updateChart() {
|
||||||
|
|
@ -147,10 +176,10 @@ function updateChart() {
|
||||||
function updateChart1() {
|
function updateChart1() {
|
||||||
sources.slideSource();
|
sources.slideSource();
|
||||||
sources.resetCountOnSource();
|
sources.resetCountOnSource();
|
||||||
plot1.setData(sources.toArray());
|
plotLineChart.setData(sources.toArray());
|
||||||
plot1.getOptions().yaxes[0].max = sources.getGlobalMax();
|
plotLineChart.getOptions().yaxes[0].max = sources.getGlobalMax();
|
||||||
plot1.setupGrid();
|
plotLineChart.setupGrid();
|
||||||
plot1.draw();
|
plotLineChart.draw();
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateChart2() {
|
function updateChart2() {
|
||||||
|
|
@ -171,12 +200,24 @@ function updateLogTable(feedName, log) {
|
||||||
|
|
||||||
// Remove old row
|
// Remove old row
|
||||||
var logSel = document.getElementById("log_select");
|
var logSel = document.getElementById("log_select");
|
||||||
if (tableBody.rows.length > logSel.options[logSel.options.selectedIndex].value){
|
//get height of pannel, find max num of item
|
||||||
while (tableBody.rows.length != logSel.options[logSel.options.selectedIndex].value){
|
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);
|
tableBody.deleteRow(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//if (tableBody.rows.length > logSel.options[logSel.options.selectedIndex].value){
|
||||||
|
// while (tableBody.rows.length != logSel.options[logSel.options.selectedIndex].value){
|
||||||
|
// tableBody.deleteRow(0);
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function slide(orig, newData) {
|
function slide(orig, newData) {
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,12 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
|
|
@ -37,40 +43,32 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<div class="col-lg-5">
|
<div class="col-lg-5">
|
||||||
|
|
||||||
<div class="panel panel-default" style="margin-top: 15px;">
|
<div class="panel panel-default" style="margin-top: 15px; height: 37vh;">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<i class="fa fa-bar-chart-o fa-fw"></i> Log feed
|
<i class="fa fa-bar-chart-o fa-fw"></i> Statistics
|
||||||
</div>
|
</div>
|
||||||
<div id="panelbody" class="panel-body">
|
<div id="panelbody" class="panel-body" style="height: 37vh;">
|
||||||
<div id="feedDiv1" style="width:100%; height:300px; position: relative;"></div>
|
<div id="feedDiv1" style="width:100%; height: calc(100% - 30px); position: relative;"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.panel-body -->
|
<!-- /.panel-body -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.panel -->
|
<!-- /.panel -->
|
||||||
|
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default" style="height: 50vh;">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<i class="fa fa-tasks fa-fw"></i> Logs
|
<i class="fa fa-tasks fa-fw"></i> Logs
|
||||||
<div class="pull-right">
|
<div class="pull-right">
|
||||||
<label style="padding-bottom:2px;">
|
|
||||||
<select class="form-control input-sm" id="log_select">
|
|
||||||
<option value="10">10</option>
|
|
||||||
<option value="25">25</option>
|
|
||||||
<option value="50">50</option>
|
|
||||||
<option value="100">100</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<input id="checkbox_log_info" type="checkbox" value="info"> INFO
|
<input id="checkbox_log_info" type="checkbox" value="info"> INFO
|
||||||
<input id="checkbox_log_warning" type="checkbox" value="warning" checked="true"> WARNING
|
<input id="checkbox_log_warning" type="checkbox" value="warning" checked="true"> WARNING
|
||||||
<input id="checkbox_log_critical" type="checkbox" value="critical" checked="true"> CRITICAL
|
<input id="checkbox_log_critical" type="checkbox" value="critical" checked="true"> CRITICAL
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div id="divLogTable" class="panel-body" style="height: 98%;">
|
||||||
<div class="row">
|
<div class="row" style="height: 100%;">
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12" style="height: 100%;">
|
||||||
<table class="table table-bordered table-hover table-striped" id="table_log">
|
<table class="table table-bordered table-hover table-striped" id="table_log">
|
||||||
<thead id="table_log_head">
|
<thead id="table_log_head">
|
||||||
</thead>
|
</thead>
|
||||||
|
|
@ -84,20 +82,30 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- /.col-lg-6 -->
|
<!-- /.col-lg-6 -->
|
||||||
<!-- /.col-lg-6 -->
|
<!-- /.col-lg-6 -->
|
||||||
|
<!-- vh sum = 87 -->
|
||||||
<div class="col-lg-7">
|
<div class="col-lg-7">
|
||||||
|
|
||||||
<div class="panel panel-default" style="margin-top: 15px;">
|
<div class="panel panel-default" style="margin-top: 15px; height: 59vh;">
|
||||||
<!--<div class="panel-heading">
|
<!--<div class="panel-heading">
|
||||||
<i class="fa fa-bar-chart-o fa-fw"></i> Feed
|
<i class="fa fa-bar-chart-o fa-fw"></i> Feed
|
||||||
</div>-->
|
</div>-->
|
||||||
<div id="panelbody" class="panel-body">
|
<div id="panelbody" class="panel-body" style="height: 100%;">
|
||||||
<div id="feedDiv2" style="width:100%; height:700px; position: relative;"></div>
|
<div id="feedDiv2" style="width:100%; height: calc(100% - 30px); position: relative;"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /.panel-body -->
|
<!-- /.panel-body -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.panel -->
|
<!-- /.panel -->
|
||||||
|
|
||||||
|
<div class="panel panel-default" style="margin-top: 15px; height: 28vh;">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<i class="fa fa-bar-chart-o fa-fw"></i> Log feed
|
||||||
|
</div>
|
||||||
|
<div id="panelbody" class="panel-body" style="width:100%; height: calc(100% - 30px);">
|
||||||
|
<div id="feedDiv3" style="width:100%; height: calc(100% - 30px); position: relative;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /.col-lg-6 -->
|
<!-- /.col-lg-6 -->
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -124,6 +132,7 @@
|
||||||
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
|
||||||
<!-- jQuery flot -->
|
<!-- jQuery flot -->
|
||||||
<script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
|
||||||
|
<script src="{{ url_for('static', filename='js/jquery.flot.pie.min.js') }}"></script>
|
||||||
<!-- Bootstrap Core JavaScript -->
|
<!-- Bootstrap Core JavaScript -->
|
||||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
||||||
<!-- Index -->
|
<!-- Index -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue