add periodicity graph pandora_enterprise#9640

pandora_console/extensions/agents_modules.php

@@ -1007,7 +1007,7 @@ function mainAgentsModules()
                     echo "<td class='center' style='text-align:left;'>";
                     $win_handle = dechex(crc32($module_id.$module['name']));
                     $graph_type = return_graphtype(modules_get_agentmodule_type($module_id));
-                    $link = "winopeng_var('".'operation/agentes/stat_win.php?'."type=$graph_type&".'period='.SECONDS_1DAY.'&'.'id='.$module_id.'&'.'refresh='.SECONDS_10MINUTES."', 'day_".$win_handle."', 800, 480)";
+                    $link = "winopeng_var('".'operation/agentes/stat_win.php?'."type=$graph_type&".'period='.SECONDS_1DAY.'&id='.$module_id.'&period_graph=0&refresh='.SECONDS_10MINUTES."', 'day_".$win_handle."', 800, 480)";
 
                     echo '<a href="javascript:'.$link.'">';
 

pandora_console/include/ajax/module.php

@@ -1283,7 +1283,7 @@ if (check_login()) {
                 }
 
                 if (is_snapshot_data($module['datos']) === false) {
-                    $link = 'winopeng_var(\'operation/agentes/stat_win.php?type='.$graph_type.'&period='.SECONDS_1DAY.'&id='.$module['id_agente_modulo'].'&refresh='.SECONDS_10MINUTES.'&draw_events='.$draw_events.'\', \'day_'.$win_handle.'\', 800, 480)';
+                    $link = 'winopeng_var(\'operation/agentes/stat_win.php?type='.$graph_type.'&period='.SECONDS_1DAY.'&id='.$module['id_agente_modulo'].'&refresh='.SECONDS_10MINUTES.'&period_graph=0&draw_events='.$draw_events.'\', \'day_'.$win_handle.'\', 800, 480)';
                     $graphButtons[] = html_print_anchor(
                         [
                             'href'    => 'javascript:'.$link,
@@ -1499,9 +1499,14 @@ if (check_login()) {
         $output = '';
         $graph_data = get_parameter('graph_data', '');
         $params = json_decode(base64_decode($graph_data), true);
+        $form_data = json_decode(base64_decode(get_parameter('form_data', [])), true);
         $server_id = (int) get_parameter('server_id', 0);
         include_once $config['homedir'].'/include/functions_graph.php';
 
+        $tab_active = get_parameter('active', 'tabs-chart-module-graph');
+
+        $output .= draw_form_stat_win($form_data, $tab_active);
+
         // Metaconsole connection to the node.
         if (is_metaconsole() === true && empty($server_id) === false) {
             $server = metaconsole_get_connection_by_id($server_id);
@@ -1553,7 +1558,15 @@ if (check_login()) {
                 $output .= $graph['chart'];
                 $output .= '</div>';
             } else {
-                $output .= grafico_modulo_sparse($params);
+                if ($tab_active === 'tabs-chart-module-graph') {
+                    $output .= grafico_modulo_sparse($params);
+                } else {
+                    $output .= graphic_periodicity_module($params);
+                    if ($params['compare'] === 'separated') {
+                        $params['date'] = ($params['date'] - $params['period']);
+                        $output .= graphic_periodicity_module($params);
+                    }
+                }
             }
         }
 

pandora_console/include/functions_graph.php

@@ -2422,6 +2422,147 @@ function graphic_combined_module(
 }
 
 
+/**
+ * Draw periodicity graph
+ *
+ * @param array $params Params for draw chart.
+ *
+ * @return string Html output.
+ */
+function graphic_periodicity_module(array $params): string
+{
+    $date_array = [];
+    $date_array['period']     = $params['period'];
+    $date_array['final_date'] = $params['date'];
+    $date_array['start_date'] = ($params['date'] - $params['period']);
+
+    $array_data = fullscale_data(
+        $params['agent_module_id'],
+        $date_array,
+        false,
+        false,
+        1,
+        false,
+        $params['period_slice_chart'],
+        0
+    );
+
+    if (empty($array_data) === false) {
+        $graph_labels = [];
+        $multiple_labels = [];
+        foreach ($array_data['sum1']['slice_data'] as $time => $array_data) {
+            $graph_labels[] = date('H:i', ($time / 1000));
+
+            $avg = [
+                'y' => $array_data['avg'],
+                'x' => $time,
+            ];
+
+            $max = [
+                'y' => $array_data['max'],
+                'x' => $time,
+            ];
+
+            $min = [
+                'y' => $array_data['min'],
+                'x' => $time,
+            ];
+
+            $sum = [
+                'y' => $array_data['sum'],
+                'x' => $time,
+            ];
+            if ((int) $params['period_mode'] === CUSTOM_GRAPH_HBARS) {
+                $avg = [
+                    'x' => $array_data['avg'],
+                    'y' => $time,
+                ];
+
+                $max = [
+                    'x' => $array_data['max'],
+                    'y' => $time,
+                ];
+
+                $min = [
+                    'x' => $array_data['min'],
+                    'y' => $time,
+                ];
+
+                $sum = [
+                    'x' => $array_data['sum'],
+                    'y' => $time,
+                ];
+            }
+
+            $graph_values_avg[] = $avg;
+            $graph_values_max[] = $max;
+            $graph_values_min[] = $min;
+            $graph_values_sum[] = $sum;
+        }
+
+        if ((bool) $params['period_average'] === true) {
+            $graph_values['avg'] = $graph_values_avg;
+            $multiple_labels['avg'] = [
+                'label' => __('Average'),
+                'fill'  => ((int) $params['period_mode'] === CUSTOM_GRAPH_AREA) ? true : false,
+            ];
+        }
+
+        if ((bool) $params['period_maximum'] === true) {
+            $graph_values['max'] = $graph_values_max;
+            $multiple_labels['max'] = [
+                'label' => __('Maximun'),
+                'fill'  => ((int) $params['period_mode'] === CUSTOM_GRAPH_AREA) ? true : false,
+            ];
+        }
+
+        if ((bool) $params['period_minimum'] === true) {
+            $graph_values['min'] = $graph_values_min;
+            $multiple_labels['min'] = [
+                'label' => __('Minimum'),
+                'fill'  => ((int) $params['period_mode'] === CUSTOM_GRAPH_AREA) ? true : false,
+            ];
+        }
+
+        if ((bool) $params['period_summatory'] === true) {
+            $graph_values['sum'] = $graph_values_sum;
+            $multiple_labels['sum'] = [
+                'label' => __('Summatory'),
+                'fill'  => ((int) $params['period_mode'] === CUSTOM_GRAPH_AREA) ? true : false,
+            ];
+        }
+    }
+
+    $options = [
+        'height'    => 200,
+        'waterMark' => true,
+        'legend'    => ['display' => true],
+        'labels'    => $graph_labels,
+        'multiple'  => $multiple_labels,
+    ];
+
+    $output = '<div class="container-periodicity-graph">';
+    $output .= '<div>';
+    if ((int) $params['period_mode'] === CUSTOM_GRAPH_HBARS
+        || (int) $params['period_mode'] === CUSTOM_GRAPH_VBARS
+    ) {
+        if ((int) $params['period_mode'] === CUSTOM_GRAPH_HBARS) {
+            $options['axis'] = 'y';
+        }
+
+        $output .= vbar_graph($graph_values, $options);
+    } else {
+        $output .= line_graph($graph_values, $options);
+    }
+
+    $output .= '</div>';
+    $output .= '</div>';
+
+    return $output;
+
+}
+
+
 /**
  * Function for convert data summatory.
  *
@@ -3909,6 +4050,7 @@ function fullscale_data(
                         }
 
                         $data['sum'.$series_suffix]['slice_data'][$real_date]['avg'] = ($sum_data / $count_data);
+                        $data['sum'.$series_suffix]['slice_data'][$real_date]['sum'] = $sum_data;
 
                         if ($max_value != (-PHP_INT_MAX)) {
                             $data['sum'.$series_suffix]['slice_data'][$real_date]['max'] = $max_value;
@@ -4174,6 +4316,7 @@ function fullscale_data(
                 $data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['avg'] = 0;
                 if (isset($count_data) === true) {
                     $data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['avg'] = ($sum_data / $count_data);
+                    $data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['sum'] = $sum_data;
                 }
 
                 $data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['max'] = $max_value;
@@ -5351,3 +5494,397 @@ function graph_analytics_filter_select()
 
     return $result;
 }
+
+
+function draw_form_stat_win(array $form_data, string $tab_active)
+{
+    $table = html_get_predefined_table('transparent', 2);
+    $table->width = '100%';
+    $table->id = 'stat_win_form_div';
+    $table->style[0] = 'text-align:left;font-weight: bold;font-size:8.5pt;line-height:30pt;';
+    $table->style[1] = 'text-align:left;font-weight: bold;line-height:30pt;';
+    $table->style[2] = 'text-align:left;font-weight: bold;line-height:30pt;';
+    $table->style[3] = 'text-align:left;font-weight: bold;line-height:30pt;';
+    $table->class = 'table_modal_alternate';
+    $table->data = [];
+
+    if ((bool) $form_data['histogram'] === true || $tab_active === 'tabs-chart-period-graph') {
+        $table->data[0][0] = __('Refresh time');
+        $table->data[0][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
+            'refresh',
+            $form_data['refresh'],
+            '',
+            '',
+            0,
+            7,
+            true
+        ).'</div>';
+
+        $table->data[0][2] = '';
+        $table->data[0][3] = '';
+
+        $table->data[1][0] = __('Begin date');
+        $table->data[1][1] = html_print_input_text(
+            'start_date',
+            $form_data['start_date'],
+            '',
+            10,
+            20,
+            true,
+            false,
+            false,
+            '',
+            'small-input'
+        );
+
+        $table->data[1][2] = __('Begin time');
+        $table->data[1][3] = html_print_input_text(
+            'start_time',
+            $form_data['start_time'],
+            '',
+            10,
+            10,
+            true,
+            false,
+            false,
+            '',
+            'small-input'
+        );
+
+        $table->data[2][0] = __('Time range');
+        $table->data[2][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
+            'period',
+            $form_data['period'],
+            '',
+            '',
+            0,
+            7,
+            true
+        ).'</div>';
+
+        $table->data[3][0] = __('Time compare (Separated)');
+        $table->data[3][1] = html_print_checkbox_switch(
+            'time_compare_separated',
+            1,
+            (bool) $form_data['time_compare_separated'],
+            true
+        );
+
+        $table->data[3][2] = '';
+        $table->data[3][3] = '';
+
+        if ($tab_active === 'tabs-chart-period-graph') {
+            $table->data[4][0] = __('Maximum');
+            $table->data[4][1] = html_print_checkbox_switch(
+                'period_maximum',
+                1,
+                (bool) $form_data['period_maximum'],
+                true
+            );
+
+            $table->data[4][2] = __('Minimum');
+            $table->data[4][3] = html_print_checkbox_switch(
+                'period_minimum',
+                1,
+                (bool) $form_data['period_minimum'],
+                true
+            );
+
+            $table->data[5][0] = __('Average');
+            $table->data[5][1] = html_print_checkbox_switch(
+                'period_average',
+                1,
+                (bool) $form_data['period_average'],
+                true
+            );
+
+            $table->data[5][2] = __('Summatory');
+            $table->data[5][3] = html_print_checkbox_switch(
+                'period_summatory',
+                1,
+                (bool) $form_data['period_summatory'],
+                true
+            );
+
+            $table->data[6][0] = __('Slice');
+            $table->data[6][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
+                'period_slice_chart',
+                (string) $form_data['period_slice_chart'],
+                '',
+                '',
+                0,
+                7,
+                true,
+                false,
+                true,
+                '',
+                false,
+                [
+                    SECONDS_1HOUR  => __('1 hour'),
+                    SECONDS_1DAY   => __('1 day'),
+                    SECONDS_1WEEK  => __('1 week'),
+                    SECONDS_1MONTH => __('1 month'),
+                ]
+            ).'</div>';
+
+            $table->data[6][2] = __('Mode');
+            $options_period_mode = [
+                CUSTOM_GRAPH_AREA  => __('Area'),
+                CUSTOM_GRAPH_LINE  => __('Line'),
+                // CUSTOM_GRAPH_HBARS => __('Horizontal bars'),
+                CUSTOM_GRAPH_VBARS => __('Vertical bars'),
+            ];
+
+            $table->data[6][3] = '<div class="small-input-select2">'.html_print_select(
+                $options_period_mode,
+                'period_mode',
+                $form_data['period_mode'],
+                '',
+                '',
+                0,
+                true,
+                false,
+                false
+            ).'</div>';
+        }
+    } else {
+        $table->data[0][0] = __('Refresh time');
+        $table->data[0][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
+            'refresh',
+            $form_data['refresh'],
+            '',
+            '',
+            0,
+            7,
+            true
+        ).'</div>';
+
+        $table->data[0][2] = __('Show events');
+        $disabled = false;
+
+        $table->data[0][3] = html_print_checkbox_switch(
+            'draw_events',
+            1,
+            (bool) $form_data['draw_events'],
+            true,
+            $disabled
+        );
+
+        $table->data[1][0] = __('Begin date');
+        $table->data[1][1] = html_print_input_text(
+            'start_date',
+            $form_data['start_date'],
+            '',
+            10,
+            20,
+            true,
+            false,
+            false,
+            '',
+            'small-input'
+        );
+
+        $table->data[1][2] = __('Show alerts');
+        $table->data[1][3] = html_print_checkbox_switch(
+            'draw_alerts',
+            1,
+            (bool) $form_data['draw_alerts'],
+            true
+        );
+
+        $table->data[2][0] = __('Begin time');
+        $table->data[2][1] = html_print_input_text(
+            'start_time',
+            $form_data['start_time'],
+            '',
+            10,
+            10,
+            true,
+            false,
+            false,
+            '',
+            'small-input'
+        );
+
+        $table->data[2][2] = __('Show unknown graph');
+        $table->data[2][3] = html_print_checkbox_switch(
+            'unknown_graph',
+            1,
+            (bool) $form_data['unknown_graph'],
+            true
+        );
+
+        $table->data[3][0] = __('Time range');
+        $table->data[3][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
+            'period',
+            $form_data['period'],
+            '',
+            '',
+            0,
+            7,
+            true
+        ).'</div>';
+
+        $table->data[3][2] = '';
+        $table->data[3][3] = '';
+
+        if (!modules_is_boolean($form_data['id'])) {
+            $table->data[4][0] = __('Zoom');
+            $options = [];
+            $options[$form_data['zoom']] = 'x'.$form_data['zoom'];
+            $options[1] = 'x1';
+            $options[2] = 'x2';
+            $options[3] = 'x3';
+            $options[4] = 'x4';
+            $options[5] = 'x5';
+            $table->data[4][1] = '<div class="small-input-select2">'.html_print_select(
+                $options,
+                'zoom',
+                $form_data['zoom'],
+                '',
+                '',
+                0,
+                true,
+                false,
+                false
+            ).'</div>';
+
+            $table->data[4][2] = __('Show percentil');
+            $table->data[4][3] = html_print_checkbox_switch(
+                'show_percentil',
+                1,
+                (bool) $form_data['show_percentil'],
+                true
+            );
+        }
+
+        $table->data[5][0] = __('Time compare (Overlapped)');
+        $table->data[5][1] = html_print_checkbox_switch(
+            'time_compare_overlapped',
+            1,
+            (bool) $form_data['time_compare_overlapped'],
+            true
+        );
+
+        $table->data[5][2] = __('Time compare (Separated)');
+        $table->data[5][3] = html_print_checkbox_switch(
+            'time_compare_separated',
+            1,
+            (bool) $form_data['time_compare_separated'],
+            true
+        );
+
+        $table->data[6][0] = __('Show AVG/MAX/MIN data series in graph');
+        $table->data[6][1] = html_print_checkbox_switch(
+            'type_mode_graph',
+            1,
+            (bool) $form_data['type_mode_graph'],
+            true,
+            false
+        );
+
+        $table->data[6][2] = __('Show full scale graph (TIP)');
+        $table->data[6][2] .= ui_print_help_tip(
+            __('TIP mode charts do not support average - maximum - minimum series, you can only enable TIP or average, maximum or minimum series'),
+            true
+        );
+        $table->data[6][3] = html_print_checkbox_switch(
+            'fullscale',
+            1,
+            (bool) $form_data['fullscale'],
+            true,
+            false
+        );
+
+        $table->data[7][0] = __('Projection graph');
+        $table->data[7][0] .= ui_print_help_tip(
+            __('Projection graph take as begin date the current time'),
+            true
+        );
+        $table->data[7][1] = html_print_checkbox_switch(
+            'enable_projected_period',
+            1,
+            (bool) $form_data['enable_projected_period'],
+            true
+        );
+
+        $table->data[7][2] = __('Projection period');
+        $table->data[7][3] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
+            'period_projected',
+            $form_data['period_projected'],
+            '',
+            '',
+            0,
+            7,
+            true
+        ).'</div>';
+    }
+
+    $form_table = html_print_table($table, true);
+    $form_table .= html_print_div(
+        [
+            'class'   => 'action-buttons-right-forced margin-top-10',
+            'content' => html_print_submit_button(
+                __('Reload'),
+                'submit',
+                false,
+                [
+                    'icon'  => 'search',
+                    'mode'  => 'secondary mini',
+                    'class' => 'float-right',
+                ],
+                true
+            ),
+        ],
+        true
+    );
+
+    $output = '<form method="GET" action="stat_win.php" style="margin-bottom: 0">';
+    $output .= html_print_input_hidden('id', $form_data['id'], true);
+    $output .= html_print_input_hidden('label', $form_data['label'], true);
+
+    if (empty($server_id) === false) {
+        $output .= html_print_input_hidden('server', $form_data['server_id'], true);
+    }
+
+    $output .= html_print_input_hidden('histogram', $form_data['histogram'], true);
+    $output .= html_print_input_hidden('period_graph', $form_data['period_graph'], true);
+    $output .= html_print_input_hidden('type', $form_data['type'], true);
+
+    $output .= ui_toggle(
+        $form_table,
+        '<span class="subsection_header_title">'.__('Graph configuration menu').'</span>'.ui_print_help_tip(
+            __('In Pandora FMS, data is stored compressed. The data visualization in database, charts or CSV exported data won\'t match, because is interpreted at runtime. Please check \'Pandora FMS Engineering\' chapter from documentation.'),
+            true
+        ),
+        '',
+        '',
+        true,
+        true,
+        '',
+        'white-box-content',
+        'box-flat pdd_10px',
+        'images/arrow@svg.svg',
+        'images/arrow@svg.svg',
+        true
+    );
+    $output .= '</form>';
+
+    return $output;
+}
+
+
+function draw_container_chart_stat_win(?string $name='stat-win-module-graph')
+{
+    $output = '<div class="margin-lr-10" id="'.$name.'">';
+    $output .= '<div id="'.$name.'-spinner" class="stat-win-spinner">';
+    $output .= html_print_image('images/spinner_charts.gif', true);
+    $output .= '</div>';
+
+    $output .= '<div id="'.$name.'-content">';
+    $output .= '</div>';
+
+    $output .= '</div>';
+
+    return $output;
+}

pandora_console/include/graphs/fgraph.php

@@ -1220,11 +1220,24 @@ function get_build_setup_charts($type, $options, $data)
         break;
 
         case 'BAR':
-            $setData->setLabel('data')->setBackgroundColor($colors);
+            if (isset($options['multiple']) === true && empty($options['multiple']) === false) {
-            $setData->setLabel('data')->setBorderColor($borders);
+                $i = 0;
-            $setData->setLabel('data')->setBorderWidth(2);
+                foreach ($options['multiple'] as $key_label => $info) {
-
+                    $dataSet = $chart->createDataSet();
-            $setData->setLabel('data')->data()->exchangeArray(array_values($data));
+                    $dataSet->setLabel(($info['label'] ?? '--'));
+                    $dataSet->setBackgroundColor(($info['backgroundColor'] ?? $colors[$i]));
+                    $dataSet->setBorderColor(($info['borderColor'] ?? $borders[$i]));
+                    $dataSet->setBorderWidth(($info['borderWidth'] ?? 2));
+                    $dataSet->data()->exchangeArray(array_values($data[$key_label]));
+                    $chart->addDataSet($dataSet);
+                    $i++;
+                }
+            } else {
+                $setData->setLabel('data')->setBackgroundColor($colors);
+                $setData->setLabel('data')->setBorderColor($borders);
+                $setData->setLabel('data')->setBorderWidth(2);
+                $setData->setLabel('data')->data()->exchangeArray(array_values($data));
+            }
 
             // Para las horizontales.
             if (isset($options['axis']) === true
@@ -1250,19 +1263,32 @@ function get_build_setup_charts($type, $options, $data)
         break;
 
         case 'LINE':
-            $chart->labels()->exchangeArray($options['labels']);
+            if (isset($options['multiple']) === true && empty($options['multiple']) === false) {
-
+                $i = 0;
-            foreach ($data as $key => $dataset) {
+                foreach ($options['multiple'] as $key_label => $info) {
-                $dataSet1 = $chart->createDataSet();
+                    $dataSet = $chart->createDataSet();
-                $dataSet1->setLabel($dataset['label']);
+                    $dataSet->setLabel(($info['label'] ?? '--'));
-                $dataSet1->setBackgroundColor($dataset['backgroundColor']);
+                    $dataSet->setBackgroundColor(($info['backgroundColor'] ?? $colors[$i]));
-                $dataSet1->setBorderColor($dataset['borderColor']);
+                    $dataSet->setBorderColor(($info['borderColorColor'] ?? $borders[$i]));
-                $dataSet1->setPointBackgroundColor($dataset['pointBackgroundColor']);
+                    $dataSet->setFill(($info['fill'] ?? false));
-                $dataSet1->setPointBorderColor($dataset['pointBorderColor']);
+                    $dataSet->data()->exchangeArray(array_values($data[$key_label]));
-                $dataSet1->setPointHoverBackgroundColor($dataset['pointHoverBackgroundColor']);
+                    $chart->addDataSet($dataSet);
-                $dataSet1->setPointHoverBorderColor($dataset['pointHoverBorderColor']);
+                    $i++;
-                $dataSet1->data()->exchangeArray($dataset['data']);
+                }
-                $chart->addDataSet($dataSet1);
+            } else {
+                $chart->labels()->exchangeArray($options['labels']);
+                foreach ($data as $key => $dataset) {
+                    $dataSet = $chart->createDataSet();
+                    $dataSet->setLabel($dataset['label']);
+                    $dataSet->setBackgroundColor($dataset['backgroundColor']);
+                    $dataSet->setBorderColor($dataset['borderColor']);
+                    $dataSet->setPointBackgroundColor($dataset['pointBackgroundColor']);
+                    $dataSet->setPointBorderColor($dataset['pointBorderColor']);
+                    $dataSet->setPointHoverBackgroundColor($dataset['pointHoverBackgroundColor']);
+                    $dataSet->setPointHoverBorderColor($dataset['pointHoverBorderColor']);
+                    $dataSet->data()->exchangeArray($dataset['data']);
+                    $chart->addDataSet($dataSet);
+                }
             }
         break;
 
@@ -1271,7 +1297,10 @@ function get_build_setup_charts($type, $options, $data)
         break;
     }
 
-    if ($type !== 'RADAR' && $type !== 'LINE') {
+    if ($type !== 'RADAR'
+        && $type !== 'LINE'
+        && ((isset($options['multiple']) === false || empty($options['multiple']) === true))
+    ) {
         $chart->addDataSet($setData);
     }
 

pandora_console/include/styles/pandora.css

@@ -9572,9 +9572,19 @@ div.stat-win-spinner img {
 }
 
 .stat_win_histogram {
-  width: 95%;
   margin: 0 auto;
-  margin-top: 18%;
+}
+
+.bg_general {
+  background-color: #ffffff;
+}
+
+#tabs-chart-modal {
+  border: 0px;
+}
+
+#tabs-chart-ul-graphs li a img {
+  margin-left: 20px;
 }
 
 #stat-win-module-graph .stat_win_histogram div.nodata_container {
@@ -12787,3 +12797,22 @@ tr.shown td.details-control {
   position: relative;
   top: -92px;
 }
+
+.container-periodicity-graph {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  border: 1px solid #e5e9ed;
+  border-radius: 10px;
+  margin-top: 25px;
+  padding: 10px;
+}
+
+.container-periodicity-graph > div {
+  flex: 0 0 auto;
+  width: 100%;
+  height: 300px;
+  background-color: transparent;
+}

pandora_console/operation/agentes/stat_win.php

@@ -127,6 +127,7 @@ ui_print_message_dialog(
         <?php
         require_once $config['homedir'].'/include/graphs/functions_flot.php';
             echo include_javascript_dependencies_flot_graph(true, '../');
+            echo ui_require_css_file('events', 'include/styles/', true);
         ?>
         <script type='text/javascript'>
             window.onload = function() {
@@ -181,35 +182,32 @@ ui_print_message_dialog(
             }
         }
 
-        $draw_alerts = get_parameter('draw_alerts', 0);
+        $draw_alerts = get_parameter_checkbox('draw_alerts', 0);
 
         $period = get_parameter('period');
         $id     = get_parameter('id', 0);
         $start_date = get_parameter('start_date', date('Y/m/d'));
         $start_time = get_parameter('start_time', date('H:i:s'));
-        $draw_events = get_parameter('draw_events', 0);
+        $draw_events = get_parameter_checkbox('draw_events', 0);
         $graph_type = get_parameter('type', 'sparse');
         $zoom = get_parameter('zoom', $config['zoom_graph']);
         $baseline = get_parameter('baseline', 0);
         $show_events_graph = get_parameter('show_events_graph', 0);
-        $show_percentil = get_parameter('show_percentil', 0);
+        $show_percentil = get_parameter_checkbox('show_percentil', 0);
-        $time_compare_separated = get_parameter('time_compare_separated', 0);
+        $time_compare_separated = get_parameter_checkbox('time_compare_separated', 0);
-        $time_compare_overlapped = get_parameter('time_compare_overlapped', 0);
+        $time_compare_overlapped = get_parameter_checkbox('time_compare_overlapped', 0);
         $unknown_graph = get_parameter_checkbox('unknown_graph', 1);
         $histogram = (bool) get_parameter('histogram', 0);
-        $enable_projected_period = get_parameter('enable_projected_period', 0);
+        $period_graph = (int) get_parameter('period_graph', 0);
-        $period_projected = get_parameter('period_projected', 300);
+        $enable_projected_period = get_parameter_checkbox('enable_projected_period', 0);
+        $period_projected = get_parameter('period_projected', SECONDS_5MINUTES);
 
-        // FORM TABLE.
+        $period_maximum = get_parameter_checkbox('period_maximum', 1);
-        $table = html_get_predefined_table('transparent', 2);
+        $period_minimum = get_parameter_checkbox('period_minimum', 1);
-        $table->width = '100%';
+        $period_average = get_parameter_checkbox('period_average', 1);
-        $table->id = 'stat_win_form_div';
+        $period_summatory = get_parameter_checkbox('period_summatory', 0);
-        $table->style[0] = 'text-align:left;font-weight: bold;font-size:8.5pt;line-height:30pt;';
+        $period_slice_chart = get_parameter('period_slice_chart', SECONDS_1HOUR);
-        $table->style[1] = 'text-align:left;font-weight: bold;line-height:30pt;';
+        $period_mode = get_parameter('period_mode', CUSTOM_GRAPH_VBARS);
-        $table->style[2] = 'text-align:left;font-weight: bold;line-height:30pt;';
-        $table->style[3] = 'text-align:left;font-weight: bold;line-height:30pt;';
-        $table->class = 'table_modal_alternate';
-        $table->data = [];
 
         $time_compare = false;
 
@@ -236,7 +234,7 @@ ui_print_message_dialog(
                     }
                 }
             } else {
-                $fullscale = get_parameter('fullscale', 0);
+                $fullscale = get_parameter_checkbox('fullscale', 0);
             }
 
             $type_mode_graph = get_parameter_checkbox(
@@ -266,277 +264,40 @@ ui_print_message_dialog(
                 $id
             );
 
-            $table->data[0][0] = __('Refresh time');
+            if (isset($_GET['type']) === true) {
-            $table->data[0][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
+                $type = get_parameter_get('type');
-                'refresh',
-                $refresh,
-                '',
-                '',
-                0,
-                7,
-                true
-            ).'</div>';
-
-            $table->data[0][2] = __('Show events');
-            $disabled = false;
-
-            $table->data[0][3] = html_print_checkbox_switch(
-                'draw_events',
-                1,
-                (bool) $draw_events,
-                true,
-                $disabled
-            );
-
-            $table->data[1][0] = __('Begin date');
-            $table->data[1][1] = html_print_input_text(
-                'start_date',
-                $start_date,
-                '',
-                10,
-                20,
-                true,
-                false,
-                false,
-                '',
-                'small-input'
-            );
-
-            $table->data[1][2] = __('Show alerts');
-            $table->data[1][3] = html_print_checkbox_switch(
-                'draw_alerts',
-                1,
-                (bool) $draw_alerts,
-                true
-            );
-
-            $table->data[2][0] = __('Begin time');
-            $table->data[2][1] = html_print_input_text(
-                'start_time',
-                $start_time,
-                '',
-                10,
-                10,
-                true,
-                false,
-                false,
-                '',
-                'small-input'
-            );
-
-            $table->data[2][2] = __('Show unknown graph');
-            $table->data[2][3] = html_print_checkbox_switch(
-                'unknown_graph',
-                1,
-                (bool) $unknown_graph,
-                true
-            );
-
-            $table->data[3][0] = __('Time range');
-            $table->data[3][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
-                'period',
-                $period,
-                '',
-                '',
-                0,
-                7,
-                true
-            ).'</div>';
-
-            $table->data[3][2] = '';
-            $table->data[3][3] = '';
-
-            if (!modules_is_boolean($id)) {
-                $table->data[4][0] = __('Zoom');
-                $options = [];
-                $options[$zoom] = 'x'.$zoom;
-                $options[1] = 'x1';
-                $options[2] = 'x2';
-                $options[3] = 'x3';
-                $options[4] = 'x4';
-                $options[5] = 'x5';
-                $table->data[4][1] = '<div class="small-input-select2">'.html_print_select(
-                    $options,
-                    'zoom',
-                    $zoom,
-                    '',
-                    '',
-                    0,
-                    true,
-                    false,
-                    false
-                ).'</div>';
-
-                $table->data[4][2] = __('Show percentil');
-                $table->data[4][3] = html_print_checkbox_switch(
-                    'show_percentil',
-                    1,
-                    (bool) $show_percentil,
-                    true
-                );
             }
-
-            $table->data[5][0] = __('Time compare (Overlapped)');
-            $table->data[5][1] = html_print_checkbox_switch(
-                'time_compare_overlapped',
-                1,
-                (bool) $time_compare_overlapped,
-                true
-            );
-
-            $table->data[5][2] = __('Time compare (Separated)');
-            $table->data[5][3] = html_print_checkbox_switch(
-                'time_compare_separated',
-                1,
-                (bool) $time_compare_separated,
-                true
-            );
-
-
-            $table->data[6][0] = __('Show AVG/MAX/MIN data series in graph');
-            $table->data[6][1] = html_print_checkbox_switch(
-                'type_mode_graph',
-                1,
-                (bool) $type_mode_graph,
-                true,
-                false
-            );
-
-            $table->data[6][2] = __('Show full scale graph (TIP)');
-            $table->data[6][2] .= ui_print_help_tip(
-                __('TIP mode charts do not support average - maximum - minimum series, you can only enable TIP or average, maximum or minimum series'),
-                true
-            );
-            $table->data[6][3] = html_print_checkbox_switch(
-                'fullscalee',
-                1,
-                (bool) $fullscale,
-                true,
-                false
-            );
-
-            $table->data[7][0] = __('Projection graph');
-            $table->data[7][0] .= ui_print_help_tip(
-                __('Projection graph take as begin date the current time'),
-                true
-            );
-            $table->data[7][1] = html_print_checkbox_switch(
-                'enable_projected_period',
-                1,
-                (bool) $enable_projected_period,
-                true
-            );
-
-            $table->data[7][2] = __('Projection period');
-            $table->data[7][3] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
-                'period_projected',
-                $period_projected,
-                '',
-                '',
-                0,
-                7,
-                true
-            ).'</div>';
-        } else {
-            $table->data[0][0] = __('Begin date');
-            $table->data[0][1] = html_print_input_text(
-                'start_date',
-                $start_date,
-                '',
-                10,
-                20,
-                true,
-                false,
-                false,
-                '',
-                'small-input'
-            );
-
-            $table->data[0][2] = __('Begin time');
-            $table->data[0][3] = html_print_input_text(
-                'start_time',
-                $start_time,
-                '',
-                10,
-                10,
-                true,
-                false,
-                false,
-                '',
-                'small-input'
-            );
-
-            $table->data[1][0] = __('Time range');
-            $table->data[1][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
-                'period',
-                $period,
-                '',
-                '',
-                0,
-                7,
-                true
-            ).'</div>';
-
-            $table->data[1][2] = __('Time compare (Separated)');
-            $table->data[1][3] = html_print_checkbox_switch(
-                'time_compare_separated',
-                1,
-                (bool) $time_compare_separated,
-                true
-            );
         }
 
-        $form_table = html_print_table($table, true);
+        $form_data = [
-        $form_table .= html_print_div(
+            'id'                      => $id,
-            [
+            'refresh'                 => $refresh,
-                'class'   => 'action-buttons-right-forced',
+            'draw_events'             => $draw_events,
-                'content' => html_print_submit_button(
+            'draw_alerts'             => $draw_alerts,
-                    __('Reload'),
+            'start_date'              => $start_date,
-                    'submit',
+            'start_time'              => $start_time,
-                    false,
+            'unknown_graph'           => $unknown_graph,
-                    [
+            'period'                  => $period,
-                        'icon'  => 'search',
+            'zoom'                    => $zoom,
-                        'mode'  => 'secondary mini',
+            'show_percentil'          => $show_percentil,
-                        'class' => 'float-right',
+            'time_compare_overlapped' => $time_compare_overlapped,
-                    ],
+            'time_compare_separated'  => $time_compare_separated,
-                    true
+            'type_mode_graph'         => $type_mode_graph,
-                ),
+            'fullscale'               => $fullscale,
-            ],
+            'enable_projected_period' => $enable_projected_period,
-            true
+            'period_projected'        => $period_projected,
-        );
+            'type'                    => $type,
-
+            'label'                   => $label,
-        echo '<form method="GET" action="stat_win.php" style="margin-bottom: 0">';
+            'server_id'               => $server_id,
-        html_print_input_hidden('id', $id);
+            'histogram'               => $histogram,
-        html_print_input_hidden('label', $label);
+            'period_graph'            => $period_graph,
-
+            'period_maximum'          => $period_maximum,
-        if (empty($server_id) === false) {
+            'period_minimum'          => $period_minimum,
-            html_print_input_hidden('server', $server_id);
+            'period_average'          => $period_average,
-        }
+            'period_summatory'        => $period_summatory,
-
+            'period_slice_chart'      => $period_slice_chart,
-        html_print_input_hidden('histogram', $histogram);
+            'period_mode'             => $period_mode,
-
+        ];
-        if (isset($_GET['type']) === true) {
-            $type = get_parameter_get('type');
-            html_print_input_hidden('type', $type);
-        }
-
-        ui_toggle(
-            $form_table,
-            '<span class="subsection_header_title">'.__('Graph configuration menu').'</span>'.ui_print_help_tip(
-                __('In Pandora FMS, data is stored compressed. The data visualization in database, charts or CSV exported data won\'t match, because is interpreted at runtime. Please check \'Pandora FMS Engineering\' chapter from documentation.'),
-                true
-            )
-        );
-        echo '</form>';
-
-        // Hidden div to forced title.
-        html_print_div(
-            [
-                'id'     => 'forced_title_layer',
-                'class'  => 'forced_title_layer',
-                'hidden' => true,
-            ]
-        );
 
         $params = [
             'agent_module_id'         => $id,
@@ -562,14 +323,59 @@ ui_print_message_dialog(
             'begin_date'              => strtotime($start_date.' '.$start_time),
             'enable_projected_period' => $enable_projected_period,
             'period_projected'        => $period_projected,
+            'period_maximum'          => $period_maximum,
+            'period_minimum'          => $period_minimum,
+            'period_average'          => $period_average,
+            'period_summatory'        => $period_summatory,
+            'period_slice_chart'      => $period_slice_chart,
+            'period_mode'             => $period_mode,
         ];
 
-        // Graph.
+        if ($histogram === false) {
-        $output = '<div class="white_box margin-lr-10" id="stat-win-module-graph">';
+            $output = '<div id="tabs-chart-modal">';
-        $output .= '<div id="stat-win-spinner" class="stat-win-spinner">';
+            $output .= '<ul class="tabs-chart-ul-graphs">';
-        $output .= html_print_image('images/spinner_charts.gif', true);
+            $output .= '<li>';
-        $output .= '</div>';
+            $output .= '<a href="#tabs-chart-module-graph">';
-        $output .= '</div>';
+            $output .= html_print_image(
+                'images/module-graph.svg',
+                true,
+                [
+                    'title' => __('Module graph'),
+                    'class' => 'invert_filter main_menu_icon',
+                ]
+            );
+            $output .= __('Module graph');
+            $output .= '</a>';
+            $output .= '</li>';
+            $output .= '<li>';
+            $output .= '<a href="#tabs-chart-period-graph">';
+            $output .= html_print_image(
+                'images/list.png',
+                true,
+                [
+                    'title' => __('Period graph'),
+                    'class' => 'invert_filter main_menu_icon',
+                ]
+            );
+            $output .= __('Period graph');
+            $output .= '</a>';
+            $output .= '</li>';
+            $output .= '</ul>';
+
+            $output .= '<div id="tabs-chart-module-graph">';
+            $output .= draw_container_chart_stat_win('tabs-chart-module-graph');
+            $output .= '</div>';
+
+            $output .= '<div id="tabs-chart-period-graph">';
+            $output .= draw_container_chart_stat_win('tabs-chart-period-graph');
+            $output .= '</div>';
+
+            $output .= '</div>';
+        } else {
+            // Graph.
+            $output .= draw_container_chart_stat_win();
+        }
+
         echo $output;
 
         if (is_metaconsole() === true && empty($server_id) === false) {
@@ -595,77 +401,53 @@ ui_include_time_picker(true);
 
 <script>
     $(document).ready (function () {
-        $('#checkbox-time_compare_separated').click(function(e) {
-            if(e.target.checked === true) {
-                $('#checkbox-time_compare_overlapped').prop('checked', false);
-            }
-        });
-        $('#checkbox-time_compare_overlapped').click(function(e) {
-            if(e.target.checked === true) {
-                $('#checkbox-time_compare_separated').prop('checked', false);
-            }
-        });
-
-        $('#checkbox-fullscale').click(function(e) {
-            if(e.target.checked === true) {
-                $('#checkbox-type_mode_graph').prop('checked', false);
-            }
-        });
-
-        $('#checkbox-type_mode_graph').click(function(e) {
-            if(e.target.checked === true) {
-                $('#checkbox-fullscale').prop('checked', false);
-            }
-        });
-
-        // Add datepicker and timepicker
-        $("#text-start_date").datepicker({
-            dateFormat: "<?php echo DATE_FORMAT_JS; ?>"
-        });
-        $("#text-start_time").timepicker({
-            showSecond: true,
-            timeFormat: '<?php echo TIME_FORMAT_JS; ?>',
-            timeOnlyTitle: '<?php echo __('Choose time'); ?>',
-            timeText: '<?php echo __('Time'); ?>',
-            hourText: '<?php echo __('Hour'); ?>',
-            minuteText: '<?php echo __('Minute'); ?>',
-            secondText: '<?php echo __('Second'); ?>',
-            currentText: '<?php echo __('Now'); ?>',
-            closeText: '<?php echo __('Close'); ?>'
-        });
-
-        $.datepicker.setDefaults(
-            $.datepicker.regional["<?php echo $custom_user_language; ?>"]
-        );
-
-        // Menu.
-        $('#module_graph_menu_header').on('click', function(){
-            var arrow = $('#module_graph_menu_header .module_graph_menu_arrow');
-            var arrow_up = 'arrow_up_green';
-            var arrow_down = 'arrow_down_green';
-            if( $('.module_graph_menu_content').hasClass(
-                'module_graph_menu_content_closed')){
-                $('.module_graph_menu_content').show();
-                $('.module_graph_menu_content').removeClass(
-                    'module_graph_menu_content_closed');
-                arrow.attr('src',arrow.attr('src').replace(arrow_down, arrow_up));
-            }
-            else{
-                $('.module_graph_menu_content').hide();
-                $('.module_graph_menu_content').addClass(
-                    'module_graph_menu_content_closed');
-                arrow.attr('src',arrow.attr('src').replace(arrow_up, arrow_down));
-            }
-        });
-
         var graph_data = "<?php echo base64_encode(json_encode($params)); ?>";
+        var form_data = "<?php echo base64_encode(json_encode($form_data)); ?>";
         var url = "<?php echo ui_get_full_url('ajax.php', false, false, false); ?>";
         var serverId = "<?php echo $server_id; ?>";
-        get_ajax_module(url, graph_data, serverId);
+        var histogram = "<?php echo (int) $histogram; ?>";
+        var period_graph = "<?php echo ($period_graph == 1) ? 1 : 0; ?>";
+        if(histogram == 0) {
+            $("#tabs-chart-modal").tabs({
+                create: function( event, ui ) {
+                    var tab_active = ui.tab.children(":first").attr('id');
+                    get_ajax_module(url, graph_data, form_data, serverId, tab_active);
+                },
+                activate: function( event, ui ) {
+                    var tab_active = ui.newTab.children(":first").attr('id');
+                    change_tabs_periodicity(tab_active);
+                    get_ajax_module(url, graph_data, form_data, serverId, tab_active);
+                },
+                active: period_graph
+            });
+        } else {
+            get_ajax_module(url, graph_data, form_data, serverId, null);
+        }
     });
 
+    function change_tabs_periodicity(tab_active) {;
+        let pg = 0;
+        if (tab_active === 'ui-id-2') {
+            pg = 1;
+        }
 
-    function get_ajax_module(url, graph_data, serverId) {
+        var regex = /(period_graph=)[^&]+(&?)/gi;
+        var replacement = "$1" + pg + "$2";
+        // Change the URL (if the browser has support).
+        if ("history" in window) {
+            var href = window.location.href.replace(regex, replacement);
+            window.history.replaceState({}, document.title, href);
+        }
+    }
+
+    function get_ajax_module(url, graph_data, form_data, serverId, id) {
+        let active = 'stat-win-module-graph';
+        if(id != null) {
+            active = $("#"+id).parent().attr('aria-controls');
+        }
+        $("#tabs-chart-module-graph-content").empty();
+        $("#tabs-chart-period-graph-content").empty();
+        $("#"+active+"-spinner").show();
         $.ajax({
             type: "POST",
             url: url,
@@ -674,11 +456,81 @@ ui_include_time_picker(true);
                 page: "include/ajax/module",
                 get_graph_module: true,
                 graph_data: graph_data,
-                server_id: serverId
+                form_data: form_data,
+                server_id: serverId,
+                active: active
             },
             success: function (data) {
-                $("#stat-win-spinner").hide();
+                $("#"+active+"-spinner").hide();
-                $("#stat-win-module-graph").append(data);
+                $("#"+active+"-content").append(data);
+                let pg = 0;
+                if (active === 'tabs-chart-period-graph') {
+                    pg = 1;
+                }
+                $('#hidden-period_graph').val(pg);
+                $('#checkbox-time_compare_separated').click(function(e) {
+                    if(e.target.checked === true) {
+                        $('#checkbox-time_compare_overlapped').prop('checked', false);
+                    }
+                });
+
+                $('#checkbox-time_compare_overlapped').click(function(e) {
+                    if(e.target.checked === true) {
+                        $('#checkbox-time_compare_separated').prop('checked', false);
+                    }
+                });
+
+                $('#checkbox-fullscale').click(function(e) {
+                    if(e.target.checked === true) {
+                        $('#checkbox-type_mode_graph').prop('checked', false);
+                    }
+                });
+
+                $('#checkbox-type_mode_graph').click(function(e) {
+                    if(e.target.checked === true) {
+                        $('#checkbox-fullscale').prop('checked', false);
+                    }
+                });
+
+                // Add datepicker and timepicker
+                $("#text-start_date").datepicker({
+                    dateFormat: "<?php echo DATE_FORMAT_JS; ?>"
+                });
+                $("#text-start_time").timepicker({
+                    showSecond: true,
+                    timeFormat: '<?php echo TIME_FORMAT_JS; ?>',
+                    timeOnlyTitle: '<?php echo __('Choose time'); ?>',
+                    timeText: '<?php echo __('Time'); ?>',
+                    hourText: '<?php echo __('Hour'); ?>',
+                    minuteText: '<?php echo __('Minute'); ?>',
+                    secondText: '<?php echo __('Second'); ?>',
+                    currentText: '<?php echo __('Now'); ?>',
+                    closeText: '<?php echo __('Close'); ?>'
+                });
+
+                $.datepicker.setDefaults(
+                    $.datepicker.regional["<?php echo $custom_user_language; ?>"]
+                );
+
+                // Menu.
+                $('#module_graph_menu_header').on('click', function(){
+                    var arrow = $('#module_graph_menu_header .module_graph_menu_arrow');
+                    var arrow_up = 'arrow_up_green';
+                    var arrow_down = 'arrow_down_green';
+                    if( $('.module_graph_menu_content').hasClass(
+                        'module_graph_menu_content_closed')){
+                        $('.module_graph_menu_content').show();
+                        $('.module_graph_menu_content').removeClass(
+                            'module_graph_menu_content_closed');
+                        arrow.attr('src',arrow.attr('src').replace(arrow_down, arrow_up));
+                    }
+                    else{
+                        $('.module_graph_menu_content').hide();
+                        $('.module_graph_menu_content').addClass(
+                            'module_graph_menu_content_closed');
+                        arrow.attr('src',arrow.attr('src').replace(arrow_up, arrow_down));
+                    }
+                });
             },
             error: function (error) {
                 console.error(error);

pandora_console/operation/search_modules.php

@@ -175,7 +175,7 @@ if (!$modules || !$searchModules) {
             $url = 'include/procesos.php?agente='.$module['id_agente_modulo'];
             $win_handle = dechex(crc32($module['id_agente_modulo'].$module['module_name']));
 
-            $link = "winopeng('".'operation/agentes/stat_win.php?'."type=$graph_type&".'period='.SECONDS_1DAY.'&id='.$module['id_agente_modulo'].'&refresh='.SECONDS_10MINUTES."', "."'day_".$win_handle."')";
+            $link = "winopeng('".'operation/agentes/stat_win.php?'."type=$graph_type&".'period='.SECONDS_1DAY.'&id='.$module['id_agente_modulo'].'&period_graph=0&refresh='.SECONDS_10MINUTES."', "."'day_".$win_handle."')";
             $link_module_detail = 'show_module_detail_dialog('.$module['id_agente_modulo'].', '.$module['id_agente'].', '."'', 0, ".SECONDS_1DAY.", '".$module['module_name']."')";
 
             $graphCell = '<a href="javascript:'.$link.'">'.html_print_image('images/module-graph.svg', true, ['border' => 0, 'alt' => '', 'class' => 'main_menu_icon invert_filter' ]).'</a>';