tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'ent-2555-fix-incremental-realtime-charts' into 'develop' 

Fix incremental realtime charts

See merge request artica/pandorafms!1658
This commit is contained in:
vgilc 2018-08-03 09:00:31 +02:00
parent ea22ed90e0 f5304af062
commit d84a945daa
3 changed files with 177 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pandora_console/extensions/realtime_graphs.php
View File

@ -125,7 +125,7 @@ function pandora_realtime_graphs () {
if ($graph != 'snmp_module') {
$data['incremental'] = __('Incremental') . '  ' . html_print_checkbox ('incremental', 1, 0, true);
}
$data['reset'] = html_print_button(__('Clear graph'), 'reset', false, 'clearGraph()', 'class="sub delete" style="margin-top:0px;"', true);
$data['reset'] = html_print_button(__('Clear graph'), 'reset', false, 'javascript:realtimeGraphs.clearGraph();', 'class="sub delete" style="margin-top:0px;"', true);
$table->data[] = $data;
if ($graph == 'snmp_interface' || $graph == 'snmp_module') {
@ -154,7 +154,7 @@ function pandora_realtime_graphs () {
$table->colspan[2]['snmp_oid'] = 2;
$data['snmp_ver'] = __('Version') . '  ' . html_print_select ($snmp_versions, 'snmp_version', $snmp_ver, '', '', 0, true);
$data['snmp_ver'] .= '  ' . html_print_button (__('SNMP walk'), 'snmp_walk', false, 'snmpBrowserWindow()', 'class="sub next"', true);
$data['snmp_ver'] .= '  ' . html_print_button (__('SNMP walk'), 'snmp_walk', false, 'javascript:realtimeGraphs.snmpBrowserWindow();', 'class="sub next"', true);
$table->colspan[2]['snmp_ver'] = 2;
$table->data[] = $data;
@ -176,7 +176,7 @@ function pandora_realtime_graphs () {
echo '</form>';
// Define a custom action to save the OID selected in the SNMP browser to the form
html_print_input_hidden ('custom_action', urlencode (base64_encode('&nbsp;<a href="javascript:setOID()"><img src="' . ui_get_full_url("images") . '/input_filter.disabled.png" title="' . __("Use this OID") . '" style="vertical-align: middle;"></img></a>')), false);
html_print_input_hidden ('custom_action', urlencode (base64_encode('&nbsp;<a href="javascript:realtimeGraphs.setOID();"><img src="' . ui_get_full_url("images") . '/input_filter.disabled.png" title="' . __("Use this OID") . '" style="vertical-align: middle;"></img></a>')), false);
html_print_input_hidden ('incremental_base', '0');
echo '<script type="text/javascript" src="'.ui_get_full_url("extensions/realtime_graphs/realtime_graphs.js").'"></script>';

354
pandora_console/extensions/realtime_graphs/realtime_graphs.js
View File

@ -1,192 +1,186 @@
var max_data_plot = 100;
(function () {
var numberOfPoints = 100;
var refresh = parseInt($('#refresh').val());
var incremental = $('#checkbox-incremental').is(':checked') || $('#hidden-incremental').val() == 1;
var lastIncVal = null;
var intervalRef = null;
var currentXHR = null;
var options = {
legend: { container: $("#chartLegend") },
xaxis: {
tickFormatter: function (timestamp, axis) {
var date = new Date(timestamp * 1000);
var server_timezone_offset = get_php_value('timezone_offset');
var local_timezone_offset = date.getTimezoneOffset()*60*-1;
if (server_timezone_offset != local_timezone_offset) {
// If timezone of server and client is different, adjust the time to the server
date = new Date((timestamp + (server_timezone_offset - local_timezone_offset)) * 1000);
var plot;
var plotOptions = {
legend: { container: $("#chartLegend") },
xaxis: {
tickFormatter: function (timestamp, axis) {
var date = new Date(timestamp * 1000);
var server_timezone_offset = get_php_value('timezone_offset');
var local_timezone_offset = date.getTimezoneOffset()*60*-1;
if (server_timezone_offset != local_timezone_offset) {
// If timezone of server and client is different, adjust the time to the server
date = new Date((timestamp + (server_timezone_offset - local_timezone_offset)) * 1000);
}
var hours = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
var minutes = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
var seconds = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
var formattedTime = hours + ':' + minutes + ':' + seconds;
return formattedTime;
}
},
series: {
lines: {
lineWidth: 2,
fill: true
}
},
colors: ['#6db431']
};
function updatePlot (data) {
plot = $.plot($('.graph'), data, plotOptions);
}
function requestData () {
var rel_path = $("#hidden-rel_path").val();
currentXHR = $.ajax({
url: rel_path + "extensions/realtime_graphs/ajax.php",
type: "POST",
dataType: "json",
data: {
graph: $('#graph :selected').val(),
graph_title: $('#graph :selected').html(),
snmp_community: $('#text-snmp_community').val(),
snmp_oid: $('#text-snmp_oid').val(),
snmp_ver: $('#snmp_version :selected').val(),
snmp_address: $('#text-ip_target').val(),
refresh: refresh
},
success: function (serie) {
var timestamp = serie.data[0][0];
var data = plot.getData();
if (data.length === 0) {
for (i = 0; i < numberOfPoints; i++) {
var step = i * (refresh / 1000);
serie.data.unshift([timestamp - step, 0]);
}
var hours = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
var minutes = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
var seconds = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
var formattedTime = hours + ':' + minutes + ':' + seconds;
return formattedTime;
serie = [serie];
updatePlot(serie);
return;
}
data[0].label = serie.label;
if (data[0].data.length >= numberOfPoints) {
data[0].data.shift();
}
if (incremental) {
var currentVal = serie.data[0][1];
// Try to avoid the first value, cause we need at least two values to get the increment
serie.data[0][1] = lastIncVal == null ? 0 : currentVal - lastIncVal;
// Incremental is always positive
if (serie.data[0][1] < 0) serie.data[0][1] = 0;
// Store the current value to use it into the next request
lastIncVal = currentVal;
}
data[0].data.push(serie.data[0]);
updatePlot(data);
}
});
}
function startDataPooling () {
intervalRef = window.setInterval(requestData, refresh);
}
function resetDataPooling () {
if (currentXHR !== null) currentXHR.abort();
// Stop and start the interval
window.clearInterval(intervalRef);
startDataPooling();
}
function clearGraph () {
var data = plot.getData();
if (data.length === 0) return;
for (i = 0; i < data[0].data.length; i ++) {
data[0].data[i][1] = 0;
}
if (incremental) lastIncVal = null;
updatePlot(data);
resetDataPooling();
}
// Set the form OID to the value selected in the SNMP browser
function setOID () {
if ($('#snmp_browser_version').val() == '3') {
$('#text-snmp_oid').val($('#table1-0-1').text());
} else {
$('#text-snmp_oid').val($('#snmp_selected_oid').text());
}
// Close the SNMP browser
$('.ui-dialog-titlebar-close').trigger('click');
}
// Show the SNMP browser window
function snmpBrowserWindow () {
// Keep elements in the form and the SNMP browser synced
$('#text-target_ip').val($('#text-ip_target').val());
$('#text-community').val($('#text-snmp_community').val());
$('#snmp_browser_version').val($('#snmp_version').val());
$('#snmp3_browser_auth_user').val($('#snmp3_auth_user').val());
$('#snmp3_browser_security_level').val($('#snmp3_security_level').val());
$('#snmp3_browser_auth_method').val($('#snmp3_auth_method').val());
$('#snmp3_browser_auth_pass').val($('#snmp3_auth_pass').val());
$('#snmp3_browser_privacy_method').val($('#snmp3_privacy_method').val());
$('#snmp3_browser_privacy_pass').val($('#snmp3_privacy_pass').val());
$("#snmp_browser_container").show().dialog ({
title: '',
resizable: true,
draggable: true,
modal: true,
overlay: {
opacity: 0.5,
background: "black"
},
series: {
lines: {
lineWidth: 2,
fill: true
}
},
colors: ['#6db431']
}
width: 920,
height: 500
});
}
var data = [];
var id = $('.graph').attr('id');
var plot = $.plot("#" + id, data, options);
var refresh = parseInt($('#refresh').val());
var incremental = $('#checkbox-incremental').is(':checked') || $('#hidden-incremental').val() == 1;
var incremental_base = 0;
var last_inc = 0;
var to;
refresh_graph();
function refresh_graph () {
var refresh = parseInt($('#refresh').val());
var postvars = new Array();
var postvars = {};
postvars['graph'] = $('#graph :selected').val();
postvars['graph_title'] = $('#graph :selected').html();
postvars['snmp_community'] = $('#text-snmp_community').val();
postvars['snmp_oid'] = $('#text-snmp_oid').val();
postvars['snmp_ver'] = $('#snmp_version :selected').val();
postvars['snmp_address'] = $('#text-ip_target').val();
postvars['refresh'] = refresh;
var rel_path = $("#hidden-rel_path").val();
$.ajax({
url: rel_path + "extensions/realtime_graphs/ajax.php",
type: "POST",
dataType: "json",
data: postvars,
success: function(serie) {
var timestamp = serie.data[0][0];
data = plot.getData();
if (data.length == 0) {
for(i = 0; i < max_data_plot; i ++) {
step = i * (refresh/1000);
serie.data.unshift([timestamp-step, 0]);
}
serie = [serie];
plot = $.plot("#" + id, serie, options);
return;
}
data[0].label = serie.label;
if (data[0].data.length >= max_data_plot) {
data[0].data.shift();
}
if (incremental) {
var last_item = parseInt(data[0].data.length)-1;
var last_value = data[0].data[last_item][1];
var current_value = serie.data[0][1];
serie.data[0][1] = current_value - last_inc;
last_inc = current_value;
// Incremental is always positive
if (serie.data[0][1] < 0) {
serie.data[0][1] = 0;
}
}
data[0].data.push(serie.data[0]);
$.plot("#" + id, data, options);
}
$('#graph').change(function() {
$('form#realgraph').submit();
});
to = window.setTimeout(refresh_graph, refresh);
}
$('#graph').change(function() {
$('form#realgraph').submit();
});
$('#refresh').change(function() {
var refresh = parseInt($('#refresh').val());
// Stop and start the Timeout
clearTimeout(to);
to = window.setTimeout(refresh_graph, refresh);
});
// Show the SNMP browser window
function snmpBrowserWindow () {
// Keep elements in the form and the SNMP browser synced
$('#text-target_ip').val($('#text-ip_target').val());
$('#text-community').val($('#text-snmp_community').val());
$('#snmp_browser_version').val($('#snmp_version').val());
$('#snmp3_browser_auth_user').val($('#snmp3_auth_user').val());
$('#snmp3_browser_security_level').val($('#snmp3_security_level').val());
$('#snmp3_browser_auth_method').val($('#snmp3_auth_method').val());
$('#snmp3_browser_auth_pass').val($('#snmp3_auth_pass').val());
$('#snmp3_browser_privacy_method').val($('#snmp3_privacy_method').val());
$('#snmp3_browser_privacy_pass').val($('#snmp3_privacy_pass').val());
$("#snmp_browser_container").show().dialog ({
title: '',
resizable: true,
draggable: true,
modal: true,
overlay: {
opacity: 0.5,
background: "black"
},
width: 920,
height: 500
$('#refresh').change(function () {
refresh = parseInt($('#refresh').val());
resetDataPooling();
});
}
// Set the form OID to the value selected in the SNMP browser
function setOID () {
if($('#snmp_browser_version').val() == '3'){
$('#text-snmp_oid').val($('#table1-0-1').text());
} else {
$('#text-snmp_oid').val($('#snmp_selected_oid').text());
$('#checkbox-incremental').change(function() {
incremental = $('#checkbox-incremental').is(':checked');
clearGraph();
});
updatePlot([]);
requestData();
startDataPooling();
// Expose this functions
window.realtimeGraphs = {
clearGraph: clearGraph,
setOID: setOID,
snmpBrowserWindow: snmpBrowserWindow
}
// Close the SNMP browser
$('.ui-dialog-titlebar-close').trigger('click');
}
$('#checkbox-incremental').change(function() {
incremental = $('#checkbox-incremental').is(':checked');
clearGraph();
});
function firstNotZero(data) {
var notZero = 0;
for(i = 0; i < data[0].data.length; i ++) {
if (data[0].data[i][1] != 0) {
return data[0].data[i][1];
}
}
}
function setOnIncremental() {
}
function clearGraph() {
data = plot.getData();
if (data.length == 0) {
return;
}
for(i = 0; i < data[0].data.length; i ++) {
data[0].data[i][1] = 0;
}
$.plot("#" + id, data, options);
}
})();

2
pandora_console/include/graphs/flot/pandora.flot.js
View File

@ -2362,8 +2362,6 @@ function pandoraFlotArea( graph_id, values, legend,
// Add bottom margin in the legend
// Estimated height of 24 (works fine with this data in all browsers)
menu_height = 24;
var legend_margin_bottom = parseInt(
$('#legend_'+graph_id).css('margin-bottom').split('px')[0]);
$('#legend_'+graph_id).css('margin-bottom', '10px');
parent_height = parseInt($('#menu_'+graph_id).parent().css('height').split('px')[0]);
adjust_menu(graph_id, plot, parent_height, width, show_legend);