diff --git a/pandora_console/extensions/realtime_graphs.php b/pandora_console/extensions/realtime_graphs.php index 1a8e17965d..5f6bca2c93 100644 --- a/pandora_console/extensions/realtime_graphs.php +++ b/pandora_console/extensions/realtime_graphs.php @@ -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 ''; // 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(' ')), false); + html_print_input_hidden ('custom_action', urlencode (base64_encode(' ')), false); html_print_input_hidden ('incremental_base', '0'); echo ''; diff --git a/pandora_console/extensions/realtime_graphs/realtime_graphs.js b/pandora_console/extensions/realtime_graphs/realtime_graphs.js index 6c535f2e5d..c909fc5b01 100644 --- a/pandora_console/extensions/realtime_graphs/realtime_graphs.js +++ b/pandora_console/extensions/realtime_graphs/realtime_graphs.js @@ -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); -} +})(); \ No newline at end of file