diff --git a/pandora_console/include/ajax/module.php b/pandora_console/include/ajax/module.php index 4ecaf8c345..6682ec3400 100755 --- a/pandora_console/include/ajax/module.php +++ b/pandora_console/include/ajax/module.php @@ -1561,10 +1561,18 @@ if (check_login()) { if ($tab_active === 'tabs-chart-module-graph') { $output .= grafico_modulo_sparse($params); } else { + $output .= '
'; + $output .= '
'; $output .= graphic_periodicity_module($params); + $output .= '
'; + $output .= '
'; if ($params['compare'] === 'separated') { $params['date'] = ($params['date'] - $params['period']); + $output .= '
'; + $output .= '
'; $output .= graphic_periodicity_module($params); + $output .= '
'; + $output .= '
'; } } } diff --git a/pandora_console/include/functions_graph.php b/pandora_console/include/functions_graph.php index 006870757e..8926cd6ab8 100644 --- a/pandora_console/include/functions_graph.php +++ b/pandora_console/include/functions_graph.php @@ -2431,6 +2431,10 @@ function graphic_combined_module( */ function graphic_periodicity_module(array $params): string { + if (isset($params['date']) === false || !$params['date']) { + $params['date'] = get_system_time(); + } + $date_array = []; $date_array['period'] = $params['period']; $date_array['final_date'] = $params['date']; @@ -2534,15 +2538,16 @@ function graphic_periodicity_module(array $params): string } $options = [ - 'height' => 200, + 'height' => (isset($params['height']) === true) ? $params['height'] : 200, 'waterMark' => true, 'legend' => ['display' => true], 'labels' => $graph_labels, 'multiple' => $multiple_labels, + 'legend' => [ + 'display' => (isset($params['show_legend'])) ? $params['show_legend'] : true, + ], ]; - $output = '
'; - $output .= '
'; if ((int) $params['period_mode'] === CUSTOM_GRAPH_HBARS || (int) $params['period_mode'] === CUSTOM_GRAPH_VBARS ) { @@ -2550,14 +2555,11 @@ function graphic_periodicity_module(array $params): string $options['axis'] = 'y'; } - $output .= vbar_graph($graph_values, $options); + $output = vbar_graph($graph_values, $options); } else { - $output .= line_graph($graph_values, $options); + $output = line_graph($graph_values, $options); } - $output .= '
'; - $output .= '
'; - return $output; } diff --git a/pandora_console/include/javascript/pandora_dashboards.js b/pandora_console/include/javascript/pandora_dashboards.js index 80d0625e4a..6e8126f1d1 100644 --- a/pandora_console/include/javascript/pandora_dashboards.js +++ b/pandora_console/include/javascript/pandora_dashboards.js @@ -1,4 +1,4 @@ -/* globals $, GridStack, load_modal, TreeController, forced_title_callback, createVisualConsole, tinyMCE*/ +/* globals $, GridStack, load_modal, TreeController, forced_title_callback, createVisualConsole, UndefineTinyMCE*/ // eslint-disable-next-line no-unused-vars function show_option_dialog(settings) { load_modal({ @@ -1037,6 +1037,7 @@ function processTreeSearch(settings) { }); } +// eslint-disable-next-line no-unused-vars function processServiceTree(settings) { var treeController = TreeController.getController(); @@ -1609,6 +1610,38 @@ function showManualThresholds(element) { } } +// eslint-disable-next-line no-unused-vars +function showPeriodicityOptions(element) { + if ($(element).is(":checked") === true) { + $("#div_projection_switch").hide(); + $("#div_type_mode_graph").hide(); + $("#div_color_chart").hide(); + $("#div_type_graph").hide(); + $("#div_period_maximum").show(); + $("#div_period_minimum").show(); + $("#div_period_average").show(); + $("#div_period_summatory").show(); + $("#div_period_slice_chart").show(); + $("#div_period_mode").show(); + } else { + $("#div_projection_switch").show(); + $("#div_type_mode_graph").show(); + $("#div_color_chart").show(); + $("#div_type_graph").show(); + if ($("#projection_switch").is(":checked")) { + $("#div_projection_period").show(); + } else { + $("#div_projection_period").hide(); + } + $("#div_period_maximum").hide(); + $("#div_period_minimum").hide(); + $("#div_period_average").hide(); + $("#div_period_summatory").hide(); + $("#div_period_slice_chart").hide(); + $("#div_period_mode").hide(); + } +} + /** * @return {void} */ @@ -1640,6 +1673,7 @@ function type_change() { } // Show/Hide period for projection on agent module graph. +// eslint-disable-next-line no-unused-vars function show_projection_period() { if ($("#projection_switch").is(":checked")) { $("#div_projection_period").show(); diff --git a/pandora_console/include/lib/Dashboard/Widgets/single_graph.php b/pandora_console/include/lib/Dashboard/Widgets/single_graph.php index 957159824c..93186d54d5 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/single_graph.php +++ b/pandora_console/include/lib/Dashboard/Widgets/single_graph.php @@ -269,6 +269,10 @@ class SingleGraphWidget extends Widget $values['showLegend'] = $decoder['showLegend']; } + if (isset($decoder['type_mode_graph']) === true) { + $values['type_mode_graph'] = $decoder['type_mode_graph']; + } + if (isset($decoder['projection_switch']) === true) { $values['projection_switch'] = $decoder['projection_switch']; } @@ -277,6 +281,42 @@ class SingleGraphWidget extends Widget $values['period_projection'] = $decoder['period_projection']; } + if (isset($decoder['periodicity_chart']) === true) { + $values['periodicity_chart'] = $decoder['periodicity_chart']; + } + + if (isset($decoder['period_maximum']) === true) { + $values['period_maximum'] = $decoder['period_maximum']; + } + + if (isset($decoder['period_minimum']) === true) { + $values['period_minimum'] = $decoder['period_minimum']; + } + + if (isset($decoder['period_average']) === true) { + $values['period_average'] = $decoder['period_average']; + } + + if (isset($decoder['period_summatory']) === true) { + $values['period_summatory'] = $decoder['period_summatory']; + } + + if (isset($decoder['period_slice_chart']) === true) { + $values['period_slice_chart'] = $decoder['period_slice_chart']; + } + + if (isset($decoder['period_mode']) === true) { + $values['period_mode'] = $decoder['period_mode']; + } + + if (isset($decoder['color_chart']) === true) { + $values['color_chart'] = $decoder['color_chart']; + } + + if (isset($decoder['type_graph']) === true) { + $values['type_graph'] = $decoder['type_graph']; + } + return $values; } @@ -290,6 +330,7 @@ class SingleGraphWidget extends Widget */ public function getFormInputs(): array { + global $config; $values = $this->values; // Retrieve global - common inputs. @@ -304,8 +345,49 @@ class SingleGraphWidget extends Widget $values['showLegend'] = 1; } + if (isset($values['type_graph']) === false) { + $values['type_graph'] = CUSTOM_GRAPH_AREA; + } + + if (isset($values['period_maximum']) === false) { + $values['period_maximum'] = 1; + } + + if (isset($values['period_minimum']) === false) { + $values['period_minimum'] = 1; + } + + if (isset($values['period_average']) === false) { + $values['period_average'] = 1; + } + + if (isset($values['period_slice_chart']) === false) { + $values['period_slice_chart'] = SECONDS_1HOUR; + } + + if (isset($values['period_mode']) === false) { + $values['period_mode'] = CUSTOM_GRAPH_VBARS; + } + + if (empty($values['color_chart']) === true) { + $values['color_chart'] = $config['graph_color1']; + } + + $blocks = [ + 'row1', + 'row2', + ]; + + $inputs['blocks'] = $blocks; + + foreach ($inputs as $kInput => $vInput) { + $inputs['inputs']['row1'][] = $vInput; + } + + $display_periodicity_chart = ($values['periodicity_chart'] === true) ? '' : 'display:none'; + // Autocomplete agents. - $inputs[] = [ + $inputs['inputs']['row1'][] = [ 'label' => __('Agent'), 'arguments' => [ 'type' => 'autocomplete_agent', @@ -323,7 +405,7 @@ class SingleGraphWidget extends Widget ]; // Autocomplete module. - $inputs[] = [ + $inputs['inputs']['row1'][] = [ 'label' => __('Module'), 'arguments' => [ 'type' => 'autocomplete_module', @@ -336,11 +418,12 @@ class SingleGraphWidget extends Widget 'style' => 'width: inherit;', 'nothing' => __('None'), 'nothing_value' => 0, + 'required' => 1, ], ]; // Show legend. - $inputs[] = [ + $inputs['inputs']['row1'][] = [ 'label' => __('Show legend'), 'arguments' => [ 'name' => 'showLegend', @@ -351,7 +434,7 @@ class SingleGraphWidget extends Widget ]; // Period. - $inputs[] = [ + $inputs['inputs']['row1'][] = [ 'label' => __('Interval'), 'arguments' => [ 'name' => 'period', @@ -365,9 +448,65 @@ class SingleGraphWidget extends Widget ], ]; + $inputs['inputs']['row1'][] = [ + 'label' => __('Sliced mode'), + 'arguments' => [ + 'name' => 'periodicity_chart', + 'id' => 'periodicity_chart', + 'type' => 'switch', + 'value' => $values['periodicity_chart'], + 'onclick' => 'showPeriodicityOptions(this)', + ], + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Chart color'), + 'id' => 'div_color_chart', + 'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '', + 'arguments' => [ + 'wrapper' => 'div', + 'name' => 'color_chart', + 'type' => 'color', + 'value' => $values['color_chart'], + 'return' => true, + ], + ]; + + $options_mode = [ + CUSTOM_GRAPH_AREA => __('Area'), + CUSTOM_GRAPH_LINE => __('Line'), + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Type graph'), + 'id' => 'div_type_graph', + 'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '', + 'arguments' => [ + 'type' => 'select', + 'fields' => $options_mode, + 'name' => 'type_graph', + 'selected' => $values['type_graph'], + 'return' => true, + ], + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('AVG/MAX/MIN'), + 'id' => 'div_type_mode_graph', + 'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '', + 'arguments' => [ + 'name' => 'type_mode_graph', + 'id' => 'type_mode_graph', + 'type' => 'switch', + 'value' => $values['type_mode_graph'], + ], + ]; + // Projection. - $inputs[] = [ + $inputs['inputs']['row2'][] = [ 'label' => __('Projection Graph'), + 'id' => 'div_projection_switch', + 'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '', 'arguments' => [ 'name' => 'projection_switch', 'id' => 'projection_switch', @@ -379,7 +518,7 @@ class SingleGraphWidget extends Widget // Period Projection. $display_projection = ($values['projection_switch'] === true) ? '' : 'display:none'; - $inputs[] = [ + $inputs['inputs']['row2'][] = [ 'label' => __('Period Projection'), 'id' => 'div_projection_period', 'style' => $display_projection, @@ -392,6 +531,90 @@ class SingleGraphWidget extends Widget ], ]; + $inputs['inputs']['row2'][] = [ + 'label' => __('Maximum'), + 'id' => 'div_period_maximum', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_maximum', + 'id' => 'period_maximum', + 'type' => 'switch', + 'value' => $values['period_maximum'], + ], + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Minimum'), + 'id' => 'div_period_minimum', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_minimum', + 'id' => 'period_minimum', + 'type' => 'switch', + 'value' => $values['period_minimum'], + ], + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Average'), + 'id' => 'div_period_average', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_average', + 'id' => 'period_average', + 'type' => 'switch', + 'value' => $values['period_average'], + ], + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Summatory'), + 'id' => 'div_period_summatory', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_summatory', + 'id' => 'period_summatory', + 'type' => 'switch', + 'value' => $values['period_summatory'], + ], + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Slice period'), + 'id' => 'div_period_slice_chart', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_slice_chart', + 'type' => 'interval', + 'value' => (string) $values['period_slice_chart'], + 'custom_fields' => [ + SECONDS_1HOUR => __('1 hour'), + SECONDS_1DAY => __('1 day'), + SECONDS_1WEEK => __('1 week'), + SECONDS_1MONTH => __('1 month'), + ], + ], + ]; + + $options_period_mode = [ + CUSTOM_GRAPH_AREA => __('Area'), + CUSTOM_GRAPH_LINE => __('Line'), + CUSTOM_GRAPH_VBARS => __('Vertical bars'), + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Type chart'), + 'id' => 'div_period_mode', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'type' => 'select', + 'fields' => $options_period_mode, + 'name' => 'period_mode', + 'selected' => $values['period_mode'], + 'return' => true, + ], + ]; + return $inputs; } @@ -403,6 +626,7 @@ class SingleGraphWidget extends Widget */ public function getPost():array { + global $config; // Retrieve global - common inputs. $values = parent::getPost(); @@ -410,9 +634,21 @@ class SingleGraphWidget extends Widget $values['metaconsoleId'] = \get_parameter('metaconsoleId', 0); $values['moduleId'] = \get_parameter('moduleId', 0); $values['period'] = \get_parameter('period', 0); + $values['type_graph'] = \get_parameter('type_graph', CUSTOM_GRAPH_AREA); $values['showLegend'] = \get_parameter_switch('showLegend'); - $values['projection_switch'] = (boolean) get_parameter_switch('projection_switch'); + $values['type_mode_graph'] = \get_parameter_switch('type_mode_graph'); + $values['projection_switch'] = (boolean) \get_parameter_switch('projection_switch'); $values['period_projection'] = \get_parameter('period_projection', 0); + $values['color_chart'] = \get_parameter('color_chart', $config['graph_color1']); + + // Values periodicity chart. + $values['periodicity_chart'] = (boolean) \get_parameter_switch('periodicity_chart'); + $values['period_maximum'] = (boolean) \get_parameter_switch('period_maximum'); + $values['period_minimum'] = (boolean) \get_parameter_switch('period_minimum'); + $values['period_average'] = (boolean) \get_parameter_switch('period_average'); + $values['period_summatory'] = (boolean) \get_parameter_switch('period_summatory'); + $values['period_slice_chart'] = \get_parameter('period_slice_chart', SECONDS_1HOUR); + $values['period_mode'] = \get_parameter('period_mode', CUSTOM_GRAPH_VBARS); return $values; } @@ -439,7 +675,7 @@ class SingleGraphWidget extends Widget $trickHight = 0; if ($this->values['showLegend'] === 1) { // Needed for legend. - $trickHight = 40; + $trickHight = 30; } $output = '
'; @@ -465,21 +701,69 @@ class SingleGraphWidget extends Widget ); $output .= $return['chart']; } else { + if ($this->values['showLegend'] === 1 && (bool) $this->values['type_mode_graph'] === true) { + $trickHight *= 3; + } + + if (isset($this->values['color_chart']) === false + || empty($this->values['color_chart']) === true + ) { + $this->values['color_chart'] = $config['graph_color1']; + } + + if (isset($this->values['type_graph']) === false + || empty($this->values['type_graph']) === true + ) { + $this->values['type_graph'] = CUSTOM_GRAPH_AREA; + } + $params = [ - 'agent_module_id' => $this->values['moduleId'], - 'width' => '100%', - 'height' => ((int) $size['height'] - $trickHight), - 'period' => $this->values['period'], - 'title' => $module_name, - 'unit' => $units_name, - 'homeurl' => $config['homeurl'], - 'backgroundColor' => 'transparent', - 'show_legend' => $this->values['showLegend'], - 'show_title' => $module_name, - 'menu' => false, - 'dashboard' => true, + 'agent_module_id' => $this->values['moduleId'], + 'width' => '100%', + 'height' => ((int) $size['height'] - $trickHight), + 'period' => $this->values['period'], + 'title' => $module_name, + 'unit' => $units_name, + 'homeurl' => $config['homeurl'], + 'backgroundColor' => 'transparent', + 'show_legend' => $this->values['showLegend'], + 'show_title' => $module_name, + 'menu' => false, + 'dashboard' => true, + 'type_graph' => (int) $this->values['type_graph'], + 'type_mode_graph' => $this->values['type_mode_graph'], + 'period_maximum' => $this->values['period_maximum'], + 'period_minimum' => $this->values['period_minimum'], + 'period_average' => $this->values['period_average'], + 'period_summatory' => $this->values['period_summatory'], + 'period_slice_chart' => $this->values['period_slice_chart'], + 'period_mode' => $this->values['period_mode'], + 'array_colors' => [ + [ + 'border' => '#000000', + 'color' => $this->values['color_chart'].'80', + 'alpha' => 75, + ], + [ + 'border' => '#000000', + 'color' => $this->values['color_chart'], + 'alpha' => 50, + ], + [ + 'border' => '#000000', + 'color' => $this->values['color_chart'].'60', + 'alpha' => 25, + ], + ], ]; - $output .= \grafico_modulo_sparse($params); + + if ((bool) $this->values['periodicity_chart'] === false) { + $output .= \grafico_modulo_sparse($params); + } else { + $params['width'] = null; + $params['height'] = (int) $size['height']; + $output .= \graphic_periodicity_module($params); + } } $output .= '
'; @@ -517,7 +801,7 @@ class SingleGraphWidget extends Widget public function getSizeModalConfiguration(): array { $size = [ - 'width' => 450, + 'width' => 800, 'height' => 430, ]; diff --git a/pandora_console/include/styles/dashboards.css b/pandora_console/include/styles/dashboards.css index 2cda2de6f4..cfe9197943 100644 --- a/pandora_console/include/styles/dashboards.css +++ b/pandora_console/include/styles/dashboards.css @@ -282,6 +282,8 @@ li#div-textarea label { .container-center:has(div.parent_graph) { display: initial; + width: 98%; + margin: 0 auto; } .widget-groups-status {