From 734c52d8bda4d76f3f7400892a085c59a310ce8f Mon Sep 17 00:00:00 2001 From: enriquecd Date: Fri, 4 May 2018 11:13:26 +0200 Subject: [PATCH] New graph thermometer - #2214 --- .../godmode/reporting/graph_builder.main.php | 3 +- pandora_console/include/constants.php | 1 + pandora_console/include/functions_graph.php | 73 ++++++ pandora_console/include/graphs/fgraph.php | 27 +++ .../include/graphs/functions_d3.php | 26 +- pandora_console/include/graphs/pandora.d3.js | 222 ++++++++++++++++++ .../operation/reporting/graph_viewer.php | 7 + 7 files changed, 357 insertions(+), 2 deletions(-) diff --git a/pandora_console/godmode/reporting/graph_builder.main.php b/pandora_console/godmode/reporting/graph_builder.main.php index 185f87f5ee..57e5dc9b82 100644 --- a/pandora_console/godmode/reporting/graph_builder.main.php +++ b/pandora_console/godmode/reporting/graph_builder.main.php @@ -173,7 +173,8 @@ $stackeds = array( CUSTOM_GRAPH_GAUGE => __('Gauge'), CUSTOM_GRAPH_HBARS => __('Horizontal bars'), CUSTOM_GRAPH_VBARS => __('Vertical bars'), - CUSTOM_GRAPH_PIE => __('Pie') + CUSTOM_GRAPH_PIE => __('Pie'), + CUSTOM_GRAPH_THERMOMETER => __('Thermometer') ); html_print_select ($stackeds, 'stacked', $stacked); diff --git a/pandora_console/include/constants.php b/pandora_console/include/constants.php index a4aaefbbe9..27f4421b3e 100644 --- a/pandora_console/include/constants.php +++ b/pandora_console/include/constants.php @@ -444,6 +444,7 @@ define("CUSTOM_GRAPH_LINE", 2); define("CUSTOM_GRAPH_STACKED_LINE", 3); define("CUSTOM_GRAPH_BULLET_CHART", 4); define("CUSTOM_GRAPH_GAUGE", 5); +define("CUSTOM_GRAPH_THERMOMETER", 10); define("CUSTOM_GRAPH_HBARS", 6); define("CUSTOM_GRAPH_VBARS", 7); define("CUSTOM_GRAPH_PIE", 8); diff --git a/pandora_console/include/functions_graph.php b/pandora_console/include/functions_graph.php index b444231b54..7c4f2cc3cb 100644 --- a/pandora_console/include/functions_graph.php +++ b/pandora_console/include/functions_graph.php @@ -1900,6 +1900,72 @@ function graphic_combined_module ($module_list, $weight_list, $period, $i++; } break; + case CUSTOM_GRAPH_THERMOMETER: + $datelimit = $date - $period; + $i = 0; + foreach ($module_list as $module_item) { + $automatic_custom_graph_meta = false; + if ($config['metaconsole']) { + // Automatic custom graph from the report template in metaconsole + if (is_array($module_list[$i])) { + $server = metaconsole_get_connection_by_id ($module_item['server']); + metaconsole_connect($server); + $automatic_custom_graph_meta = true; + } + } + + if ($automatic_custom_graph_meta) + $module = $module_item['module']; + else + $module = $module_item; + + $temp[$module] = modules_get_agentmodule($module); + $query_last_value = sprintf(' + SELECT datos + FROM tagente_datos + WHERE id_agente_modulo = %d + AND utimestamp < %d + ORDER BY utimestamp DESC', + $module, $date); + $temp_data = db_get_value_sql($query_last_value); + if ( $temp_data ) { + if (is_numeric($temp_data)) + $value = $temp_data; + else + $value = count($value); + } + else { + $value = false; + } + $temp[$module]['label'] = ($labels[$module] != '') ? $labels[$module] : $temp[$module]['nombre']; + + $temp[$module]['value'] = $value; + $temp[$module]['label'] = ui_print_truncate_text($temp[$module]['label'],"module_small",false,true,false,".."); + + if ($temp[$module]['unit'] == '%') { + $temp[$module]['min'] = 0; + $temp[$module]['max'] = 100; + } + else { + $min = $temp[$module]['min']; + if ($temp[$module]['max'] == 0) + $max = reporting_get_agentmodule_data_max($module,$period,$date); + else + $max = $temp[$module]['max']; + $temp[$module]['min'] = ($min == 0 ) ? 0 : $min; + $temp[$module]['max'] = ($max == 0 ) ? 100 : $max; + } + $temp[$module]['gauge'] = uniqid('gauge_'); + + if ($config['metaconsole']) { + // Automatic custom graph from the report template in metaconsole + if (is_array($module_list[0])) { + metaconsole_restore_db(); + } + } + $i++; + } + break; default: if (!is_null($percentil) && $percentil) { foreach ($graph_values as $graph_group => $point) { @@ -2376,6 +2442,13 @@ function graphic_combined_module ($module_list, $weight_list, $period, "", "", $water_mark, $config['fontpath'], $fixed_font_size, "", $ttl, $homeurl, $background_color); break; + case CUSTOM_GRAPH_THERMOMETER: + return stacked_thermometers($flash_charts, $graph_values, + $width, $height, $color, $module_name_list, $long_index, + ui_get_full_url("images/image_problem_area_small.png", false, false, false), + "", "", $water_mark, $config['fontpath'], $fixed_font_size, + "", $ttl, $homeurl, $background_color); + break; case CUSTOM_GRAPH_HBARS: return hbar_graph($flash_charts, $graph_values, $width, $height, $color, $module_name_list, $long_index, diff --git a/pandora_console/include/graphs/fgraph.php b/pandora_console/include/graphs/fgraph.php index 259876c896..ac6816ec58 100644 --- a/pandora_console/include/graphs/fgraph.php +++ b/pandora_console/include/graphs/fgraph.php @@ -531,6 +531,33 @@ function stacked_gauge($flash_chart, $chart_data, $width, $height, ); } +function stacked_thermometers($flash_chart, $chart_data, $width, $height, + $color, $legend, $long_index, $no_data_image, $xaxisname = "", + $yaxisname = "", $water_mark = "", $font = '', $font_size = '', + $unit = '', $ttl = 1, $homeurl = '', $backgroundColor = 'white') { + + include_once('functions_d3.php'); + + setup_watermark($water_mark, $water_mark_file, $water_mark_url); + + if (empty($chart_data)) { + return ''; + } + + return d3_thermometers( + $chart_data, + $width, + $height, + $color, + $legend, + $homeurl, + $unit, + $font, + $font_size + 2, + $no_data_image + ); +} + function line_graph($flash_chart, $chart_data, $width, $height, $color, $legend, $long_index, $no_data_image, $xaxisname = "", $yaxisname = "", $water_mark = "", $font = '', $font_size = '', diff --git a/pandora_console/include/graphs/functions_d3.php b/pandora_console/include/graphs/functions_d3.php index dde10a1e0a..f740f2feff 100644 --- a/pandora_console/include/graphs/functions_d3.php +++ b/pandora_console/include/graphs/functions_d3.php @@ -285,6 +285,31 @@ function d3_gauges($chart_data, $width, $height, $color, $legend, return $output; } +function d3_thermometers($chart_data, $width, $height, $color, $legend, + $homeurl, $unit, $font, $font_size, $no_data_image) { + global $config; + + foreach ($chart_data as $key => $value) { + $chart_data[$key]['agent_name'] = agents_get_alias($chart_data[$key]['id_agente']); + $chart_data[$key]['label'] = io_safe_output($chart_data[$key]['label']); + } + + if (is_array($chart_data)) + $data = json_encode($chart_data); + $output = include_javascript_d3(true); + + $count = 0; + + $output .= "
"; + + $output .= ""; + + return $output; +} + function ux_console_phases_donut ($phases, $id, $return = false) { global $config; @@ -638,7 +663,6 @@ function print_clock_digital_1 ($time_format, $timezone, $clock_animation,$width - '; diff --git a/pandora_console/include/graphs/pandora.d3.js b/pandora_console/include/graphs/pandora.d3.js index 6f4a59cab1..5c2f2e0c10 100644 --- a/pandora_console/include/graphs/pandora.d3.js +++ b/pandora_console/include/graphs/pandora.d3.js @@ -1061,6 +1061,228 @@ function createGauges(data, width, height, font_size, no_data_image, font) { } +function createthermometers(data, width, height, font_size, no_data_image, font) { + +for (var variable in data) { + module_data = data[variable]; +} + +// var svg = d3.select('.databox,.filters td') + +var svg = d3.select('#thermometers_div') + .append("svg") + .attr("width", 250) + .attr("height", 400); + + +var rect = svg.append("rect") + .attr("x", 50) + .attr("y", 50) + .attr("width", 150) + .attr("height", 330) + .attr("fill", "black") + .attr("stroke-width", 5) + .attr("stroke", "rgb(37,133,177)") + .attr("rx", "10") + .attr("ry", "10") + .attr("fill", "rgb(235,235,235)"); + + var circle = svg.append("circle") + .attr("cx", 130) + .attr("cy", 280) + .attr("r", 12) + .attr("height", 300) + .attr("fill", "rgb(74,185,197)"); + + var progress_back = svg.append('rect') + .attr('fill', 'rgb(51,51,53)') + .attr('height', 200) + .attr('width', 12) + .attr('x', 123) + .attr('y', 70); + + + +var defs = svg.append("defs"); + +var gradient = defs.append("linearGradient") + .attr("id", "svgGradient") + .attr("x1", "0%") + .attr("x2", "0%") + .attr("y1", "100%") + .attr("y2", "0%"); + +gradient.append("stop") + .attr('class', 'start') + .attr("offset", "0%") + .attr("stop-color", "rgb(74,185,197)"); + + if(parseFloat(module_data.value) >= parseFloat(module_data.min_warning) && parseFloat(module_data.value) < parseFloat(module_data.min_critical)){ + gradient.append("stop") + .attr('class', 'end') + .attr("offset", "100%") + .attr("stop-color", "yellow"); + } + else if((module_data.min_critical != 0 && module_data.max_critical != 0) && parseFloat(module_data.value) >= parseFloat(module_data.min_critical) && (parseFloat(module_data.value) <= parseFloat(module_data.max_critical) || parseFloat(module_data.max_critical) == 0)){ + gradient.append("stop") + .attr('class', 'end') + .attr("offset", "100%") + .attr("stop-color", "red"); + } + else{ + gradient.append("stop") + .attr('class', 'end') + .attr("offset", "100%") + .attr("stop-color", "rgb(130,185,46)"); + } + + var progress_front = svg.append('rect') + .attr('fill', 'red') + .attr('height', 0) + .attr('width', 12) + .attr('x', 123) + .attr('y', 270) + .attr("fill", "url(#svgGradient)"); + + if(module_data.value.toString().indexOf('.') != -1){ + if(Math.trunc(module_data.value).toString().length > 1){ + module_data.value = Math.trunc(module_data.value); + } + else { + module_data.value = parseFloat(module_data.value).toFixed(2); + } + } + + if(module_data.value >= 1000){ + module_data.value_label = Math.trunc(module_data.value/1000); + var text = svg.append("text") + .attr("x", 100) + .attr("y", 320) + .style("font-size", "1.5em") + .text(module_data.value_label+"k"+" ["+module_data.unit+"]"); + } + else{ + var text = svg.append("text") + .attr("x", 100) + .attr("y", 320) + .style("font-size", "1.5em") + .text(module_data.value+" ["+module_data.unit+"]"); + } + + + agent_text = module_data.agent_name; + + if(agent_text.length > 12){ + agent_text = agent_text.substring(0, 10)+"..."; + } + + var text = svg.append("text") + .attr("x", 65) + .attr("y", 370) + .style("font-size", "1.5em") + .text(agent_text); + + + label_text = module_data.label; + + if(label_text.length > 12){ + label_text = label_text.substring(0, 10)+"..."; + } + + var text = svg.append("text") + .attr("x", 65) + .attr("y", 350) + .style("font-size", "1.5em") + .text(label_text); + + var temp_sum = module_data.max-module_data.min; + var div_sum = (temp_sum/10); + var max_temp = module_data.max; + var min_temp = module_data.min; + var y = 75; + + var count = 0; + + var startPercent = 0; + var endPercent = module_data.value * 200 / max_temp; + + var step = endPercent / 20; + + while (max_temp >= min_temp) { + + if(count != 9){ + if(max_temp.toString().indexOf('.') != -1){ + if(Math.trunc(max_temp).toString().length > 1){ + max_temp = Math.trunc(max_temp); + } + else { + max_temp = parseFloat(max_temp).toFixed(2); + } + } + + if(max_temp >= 1000){ + max_temp_label = Math.trunc(max_temp/1000); + var text = svg.append("text") + .attr("x", 160) + .attr("y", y) + .style("font-size", "1.2em") + .text(max_temp_label+'k'); + } + else{ + var text = svg.append("text") + .attr("x", 160) + .attr("y", y) + .style("font-size", "1.2em") + .text(max_temp); + } + + var line = svg.append("line") + .attr("x1", 142) + .attr("y1", y-4) + .attr("x2", 153) + .attr("y2", y-4) + .attr("stroke", "black") + .style("font-size", "1.2em") + .text(max_temp); + + y += 20; + + max_temp = max_temp-div_sum; + } + if(count==10){ + max_temp = module_data.min; + } + + count++; + } + + + + function updateProgress(bar_progress) { + var bar_progress = Number(bar_progress); + progress_front.attr('height', (bar_progress)); + progress_front.attr('y', (270-bar_progress)); + } + + var bar_progress = startPercent; + + (function loops() { + updateProgress(bar_progress); + + if (bar_progress < endPercent) { + bar_progress += step; + setTimeout(loops, 30); + } + else{ + delete data[module_data['id_agente_modulo']]; + if(Object.keys(data).length > 0){ + createthermometers(data, width, height, font_size, no_data_image, font) + } + } + })(); + +} + function Gauge(placeholderName, configuration, font) { diff --git a/pandora_console/operation/reporting/graph_viewer.php b/pandora_console/operation/reporting/graph_viewer.php index e2b4fee3bb..f5d1143623 100644 --- a/pandora_console/operation/reporting/graph_viewer.php +++ b/pandora_console/operation/reporting/graph_viewer.php @@ -124,6 +124,12 @@ if ($view_graph) { $height = $graph["height"]; } + if ($stacked == CUSTOM_GRAPH_THERMOMETER ){ + // Use the defined graph height, that's why + // the user can setup graph height. + $height = $graph["height"]; + } + $name = $graph["name"]; if (($graph["private"]==1) && ($graph["id_user"] != $id_user)) { db_pandora_audit("ACL Violation", @@ -235,6 +241,7 @@ if ($view_graph) { $stackeds[CUSTOM_GRAPH_HBARS] = __('Horizontal Bars'); $stackeds[CUSTOM_GRAPH_VBARS] = __('Vertical Bars'); $stackeds[CUSTOM_GRAPH_PIE] = __('Pie'); + $stackeds[CUSTOM_GRAPH_THERMOMETER] = __('Thermometer'); html_print_select ($stackeds, 'stacked', $stacked , '', '', -1, false, false); echo "";