From 6540a229e17e66369ec4ba7576e350d8f1430af3 Mon Sep 17 00:00:00 2001
From: Pablo Aragon <pablo.aragon@pandorafms.com>
Date: Tue, 25 Apr 2023 13:31:59 +0200
Subject: [PATCH] 10755-Horizontal graph legend & interfaz graph

---
 pandora_console/include/functions.php         | 30 +++---
 .../include/graphs/flot/pandora.flot.js       | 15 +--
 pandora_console/include/styles/pandora.css    | 23 +++++
 .../agentes/estado_generalagente.php          | 96 ++++---------------
 .../agentes/interface_traffic_graph_win.php   | 40 +++-----
 5 files changed, 78 insertions(+), 126 deletions(-)

diff --git a/pandora_console/include/functions.php b/pandora_console/include/functions.php
index 5dc24eaee4..81799a549d 100644
--- a/pandora_console/include/functions.php
+++ b/pandora_console/include/functions.php
@@ -4066,28 +4066,28 @@ function series_type_graph_array($data, $show_elements_graph)
                     $value['max'] = 0;
                 }
 
-                $data_return['legend'][$key] .= '<span style="font-size: 9px;">'.__('Min').'</span><span style="font-weight: 600;">'.remove_right_zeros(
+                $data_return['legend'][$key] .= '<span class="legend-font-small">'.__('Min').' </span><span class="bolder">'.remove_right_zeros(
                     number_format(
                         $value['min'],
                         $config['graph_precision'],
                         $config['csv_decimal_separator'],
                         $config['csv_decimal_separator'] == ',' ? '.' : ','
                     )
-                ).'</span>&nbsp;<span style="font-size: 9px;">'.__('Max').'</span><span style="font-weight: 600;">'.remove_right_zeros(
+                ).' '.$value['unit'].'</span>&nbsp;<span class="legend-font-small">'.__('Max').' </span><span class="bolder">'.remove_right_zeros(
                     number_format(
                         $value['max'],
                         $config['graph_precision'],
                         $config['csv_decimal_separator'],
                         $config['csv_decimal_separator'] == ',' ? '.' : ','
                     )
-                ).'</span>&nbsp;<span style="font-size: 9px;">'._('Avg').'</span><span style="font-weight: 600;">'.remove_right_zeros(
+                ).' '.$value['unit'].'</span>&nbsp;<span class="legend-font-small">'._('Avg.').' </span><span class="bolder">'.remove_right_zeros(
                     number_format(
                         $value['avg'],
                         $config['graph_precision'],
                         $config['csv_decimal_separator'],
                         $config['csv_decimal_separator'] == ',' ? '.' : ','
                     )
-                ).'</span>&nbsp;'.$str;
+                ).' '.$value['unit'].'</span>&nbsp;'.$str;
 
                 if ($show_elements_graph['compare'] == 'overlapped'
                     && $key == 'sum2'
@@ -4129,9 +4129,9 @@ function series_type_graph_array($data, $show_elements_graph)
                     $name_legend .= $value['module_name'].': ';
                 }
 
-                $data_return['legend'][$key] = $name_legend;
+                $data_return['legend'][$key] = '<span style="font-size: 9pt; font-weight: bolder;">'.$name_legend.'</span>';
                 if ($show_elements_graph['type_mode_graph']) {
-                    $data_return['legend'][$key] .= __('Min:');
+                    $data_return['legend'][$key] .= '<span class="legend-font-small">'.__('Min:').' </span><span class="bolder">';
                     $data_return['legend'][$key] .= remove_right_zeros(
                         number_format(
                             $value['min'],
@@ -4139,8 +4139,8 @@ function series_type_graph_array($data, $show_elements_graph)
                             $config['decimal_separator'],
                             $config['thousand_separator']
                         )
-                    );
-                    $data_return['legend'][$key] .= ' '.__('Max:');
+                    ).' '.$value['unit'];
+                    $data_return['legend'][$key] .= '</span>&nbsp;<span class="legend-font-small">'.__('Max:').' </span><span class="bolder">';
                     $data_return['legend'][$key] .= remove_right_zeros(
                         number_format(
                             $value['max'],
@@ -4148,8 +4148,8 @@ function series_type_graph_array($data, $show_elements_graph)
                             $config['decimal_separator'],
                             $config['thousand_separator']
                         )
-                    );
-                    $data_return['legend'][$key] .= ' '._('Avg:');
+                    ).' '.$value['unit'];
+                    $data_return['legend'][$key] .= '</span>&nbsp;<span class="legend-font-small">'._('Avg:').' </span><span class="bolder">';
                     $data_return['legend'][$key] .= remove_right_zeros(
                         number_format(
                             $value['avg'],
@@ -4157,7 +4157,7 @@ function series_type_graph_array($data, $show_elements_graph)
                             $config['decimal_separator'],
                             $config['thousand_separator']
                         )
-                    ).' '.$str;
+                    ).' '.$value['unit'].' </span>&nbsp;'.$str;
                 }
 
                 if ($show_elements_graph['compare'] == 'overlapped'
@@ -4171,21 +4171,21 @@ function series_type_graph_array($data, $show_elements_graph)
             } else if (strpos($key, 'event') !== false) {
                 $data_return['series_type'][$key] = 'points';
                 if ($show_elements_graph['show_events']) {
-                    $data_return['legend'][$key] = __('Events').' '.$str;
+                    $data_return['legend'][$key] = '<span style="font-size: 9pt; font-weight: bolder;">'.__('Events').'</span>'.$str;
                 }
 
                 $data_return['color'][$key] = $color_series['event'];
             } else if (strpos($key, 'alert') !== false) {
                 $data_return['series_type'][$key] = 'points';
                 if ($show_elements_graph['show_alerts']) {
-                    $data_return['legend'][$key] = __('Alert').' '.$str;
+                    $data_return['legend'][$key] = '<span style="font-size: 9pt; font-weight: bolder;">'.__('Alert').'</span>'.$str;
                 }
 
                 $data_return['color'][$key] = $color_series['alert'];
             } else if (strpos($key, 'unknown') !== false) {
                 $data_return['series_type'][$key] = 'unknown';
                 if ($show_elements_graph['show_unknown']) {
-                    $data_return['legend'][$key] = __('Unknown').' '.$str;
+                    $data_return['legend'][$key] = '<span style="font-size: 9pt; font-weight: bolder;">'.__('Unknown').'</span>'.$str;
                 }
 
                 $data_return['color'][$key] = $color_series['unknown'];
@@ -4193,7 +4193,7 @@ function series_type_graph_array($data, $show_elements_graph)
                 $data_return['series_type'][$key] = 'percentil';
                 if ($show_elements_graph['percentil']) {
                     if ($show_elements_graph['unit']) {
-                        $name_legend = __('Percentil').' ';
+                        $name_legend = '<span style="font-size: 9pt; font-weight: bolder;">'.__('Percentil').'</span>';
                         $name_legend .= $config['percentil'].'º ';
                         $name_legend .= __('of module').' ';
                         $name_legend .= $value['agent_alias'].' / ';
diff --git a/pandora_console/include/graphs/flot/pandora.flot.js b/pandora_console/include/graphs/flot/pandora.flot.js
index 48704684d2..ee99a0ad4f 100644
--- a/pandora_console/include/graphs/flot/pandora.flot.js
+++ b/pandora_console/include/graphs/flot/pandora.flot.js
@@ -2463,12 +2463,13 @@ function pandoraFlotArea(
           $.each(update_legend, function(index, value) {
             if (typeof value[x - 1] !== "undefined") {
               data_legend[index] =
-                " Min: " +
+                "<span class='legend-font-small'> Min: </span><span class='bolder'>" +
                 number_format(value[x - 1].min, 0, unit, short_data, divisor) +
-                " Max: " +
+                "</span><span class='legend-font-small'> Max: </span><span class='bolder'>" +
                 number_format(value[x - 1].max, 0, unit, short_data, divisor) +
-                " Avg: " +
-                number_format(value[x - 1].avg, 0, unit, short_data, divisor);
+                "</span><span class='legend-font-small'> Avg: </span><span class='bolder'>" +
+                number_format(value[x - 1].avg, 0, unit, short_data, divisor) +
+                "</span>";
             } else {
               data_legend[index] = " Min: " + 0 + " Max: " + 0 + " Avg: " + 0;
             }
@@ -2476,9 +2477,9 @@ function pandoraFlotArea(
 
           if (typeof data_legend[series.label] !== "undefined") {
             label_aux =
-              legend[series.label].split(": Min")[0] +
-              ": " +
-              data_legend[series.label];
+              legend[series.label].split(
+                '<span class="legend-font-small">'
+              )[0] + data_legend[series.label];
             $("#legend_" + graph_id + " .legendLabel")
               .eq(i)
               .html(label_aux);
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 25c7202216..2bff29229b 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -6584,6 +6584,17 @@ table.table_modal_alternate tr td:first-child {
   line-height: 1.3;
 }
 
+table#agent_interface_info .flot-text .flot-x-axis div {
+  word-break: unset;
+}
+
+table#agent_interface_info
+  .flot-text
+  .flot-x-axis
+  div.flot-tick-label.tickLabel {
+  max-width: 50px !important;
+}
+
 /*Font header feedback*/
 form#modal_form_feedback {
   padding: 10px;
@@ -9148,6 +9159,10 @@ div.steps_vsmap {
   top: 0px;
 }
 
+.top_0px_important {
+  top: 0px !important;
+}
+
 .top_10px {
   top: 10px;
 }
@@ -11940,3 +11955,11 @@ div.parent_graph > p.legend_background > table > tbody > tr {
 .break-word {
   word-wrap: break-word;
 }
+
+.legend-font-small {
+  font-size: 7px !important;
+}
+
+.toggle-traffic-graph {
+  margin: 0px !important;
+}
diff --git a/pandora_console/operation/agentes/estado_generalagente.php b/pandora_console/operation/agentes/estado_generalagente.php
index a013ccf8cf..cfb4fb2108 100755
--- a/pandora_console/operation/agentes/estado_generalagente.php
+++ b/pandora_console/operation/agentes/estado_generalagente.php
@@ -752,18 +752,7 @@ if (empty($network_interfaces) === false) {
     $table_interface->class = 'info_table';
     $table_interface->width = '100%';
     $table_interface->style = [];
-    $table_interface->style['interface_status'] = 'width: 30px;padding-top:0px;padding-bottom:0px;';
-    $table_interface->style['interface_graph'] = 'width: 20px;padding-top:0px;padding-bottom:0px;';
-    $table_interface->style['interface_event_graph'] = 'width: 35%;padding-top:0px;padding-bottom:0px;';
-    $table_interface->align['interface_event_graph'] = 'right';
-    $table_interface->style['interface_event_graph'] = 'width: 3%;padding-top:0px;padding-bottom:0px;';
-    $table_interface->style['interface_name'] = 'width: 30%;padding-top:0px;padding-bottom:0px;';
-    $table_interface->align['interface_name'] = 'left';
-    $table_interface->align['interface_ip'] = 'left';
-    $table_interface->align['last_contact'] = 'left';
-    $table_interface->style['last_contact'] = 'width: 20%;padding-top:0px;padding-bottom:0px;';
-    $table_interface->style['interface_ip'] = 'width: 8%;padding-top:0px;padding-bottom:0px;';
-    $table_interface->style['interface_mac'] = 'width: 12%;padding-top:0px;padding-bottom:0px;';
+    $table_interface->style['interface_event_graph'] = 'width: 35%;';
 
     $table_interface->head = [];
     $options = [
@@ -805,58 +794,22 @@ if (empty($network_interfaces) === false) {
             $graph_link = '';
         }
 
-        $events_limit = 5000;
-        $user_groups = users_get_groups($config['id_user'], 'ER');
-        $user_groups_ids = array_keys($user_groups);
-        if (empty($user_groups) === true) {
-            $groups_condition = ' 1 = 0 ';
-        } else {
-            $groups_condition = ' id_grupo IN ('.implode(',', $user_groups_ids).') ';
-        }
+        $content = [
+            'id_agent_module' => $interface['status_module_id'],
+            'id_group'        => $id_group,
+            'period'          => SECONDS_1DAY,
+            'time_from'       => '00:00:00',
+            'time_to'         => '00:00:00',
+            'sizeForTicks'    => 250,
+            'height_graph'    => 40,
+            [
+                ['id_agent_module' => $interface['status_module_id']],
+            ]
+        ];
 
-        if ((bool) check_acl($config['id_user'], 0, 'PM') === false) {
-            $groups_condition .= ' AND id_grupo != 0';
-        }
-
-        $status_condition = ' AND (estado = 0 OR estado = 1) ';
-        $unixtime = (get_system_time() - SECONDS_1DAY);
-        // Last hour.
-        $time_condition = 'AND (utimestamp > '.$unixtime.')';
-        // Tags ACLs.
-        if ($id_group > 0 && in_array(0, $user_groups_ids)) {
-            $group_array = (array) $id_group;
-        } else {
-            $group_array = $user_groups_ids;
-        }
-
-        $acl_tags = tags_get_acl_tags(
-            $config['id_user'],
-            $group_array,
-            'ER',
-            'event_condition',
-            'AND',
-            '',
-            true,
-            [],
-            true
-        );
-
-        $id_modules_array = [];
-        $id_modules_array[] = $interface['status_module_id'];
-
-        $unixtime = (get_system_time() - SECONDS_1DAY);
-        // Last hour.
-        $time_condition = 'WHERE (te.utimestamp > '.$unixtime.')';
-
-        $sqlEvents = sprintf(
-            'SELECT *
-			FROM tevento te
-			INNER JOIN tagente_estado tae
-				ON te.id_agentmodule = tae.id_agente_modulo
-					AND tae.id_agente_modulo IN (%s)
-			%s',
-            implode(',', $id_modules_array),
-            $time_condition
+        $e_graph = \reporting_module_histogram_graph(
+            ['datetime' => time()],
+            $content
         );
 
         $sqlLast_contact = sprintf(
@@ -870,21 +823,6 @@ if (empty($network_interfaces) === false) {
         $last_contact = array_shift($last_contact);
         $last_contact = array_shift($last_contact);
 
-        $events = db_get_all_rows_sql($sqlEvents);
-        $text_event_header = __('Events info (24hr.)');
-        if (!$events) {
-            $no_events = ['color' => ['criticity' => 2]];
-            $e_graph = reporting_get_event_histogram(
-                $no_events,
-                $text_event_header
-            );
-        } else {
-            $e_graph = reporting_get_event_histogram(
-                $events,
-                $text_event_header
-            );
-        }
-
         $data = [];
         $data['interface_name'] = '<strong>'.$interface_name.'</strong>';
         $data['interface_status'] = $interface['status_image'];
@@ -892,7 +830,7 @@ if (empty($network_interfaces) === false) {
         $data['interface_ip'] = $interface['ip'];
         $data['interface_mac'] = $interface['mac'];
         $data['last_contact'] = __('Last contact: ').$last_contact;
-        $data['interface_event_graph'] = $e_graph;
+        $data['interface_event_graph'] = $e_graph['chart'];
 
         $table_interface->data[] = $data;
     }
diff --git a/pandora_console/operation/agentes/interface_traffic_graph_win.php b/pandora_console/operation/agentes/interface_traffic_graph_win.php
index a2a24a724f..94c3142594 100644
--- a/pandora_console/operation/agentes/interface_traffic_graph_win.php
+++ b/pandora_console/operation/agentes/interface_traffic_graph_win.php
@@ -310,34 +310,24 @@ if (empty($server_id) === false) {
     $menu_form .= html_print_input_hidden('server', $server_id, true);
 }
 
-$menu_form .= '<div class="module_graph_menu_dropdown mrgn_top_20px">';
-$menu_form .= '<div id="module_graph_menu_header" class="module_graph_menu_header">';
-$menu_form .= html_print_image(
-    'images/arrow_down_green.png',
-    true,
-    [
-        'class' => 'module_graph_menu_arrow',
-        'float' => 'left',
-    ],
-    false,
-    false,
-    true
-);
-$menu_form .= '<span style="flex: 2; justify-content:center;" class="flex-row">';
-$menu_form .= '<b>'.__('Graph configuration menu').'</b>';
-$menu_form .= 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
-);
-$menu_form .= '</span>';
-$menu_form .= '</div>';
-$menu_form .= '<div class="module_graph_menu_content module_graph_menu_content_closed" style="display:none;">';
 $menu_form .= $form_table;
-$menu_form .= '</div>';
-$menu_form .= '</div>';
 $menu_form .= '</form>';
 
-echo $menu_form;
+ui_toggle(
+    $menu_form,
+    '<span class="subsection_header_title">'.__('Graph configuration menu').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
+    ).'</span>',
+    __('Graph configuration menu'),
+    'update',
+    true,
+    false,
+    '',
+    'white-box-content no_border',
+    'filter-datatable-main box-flat white_table_graph fixed_filter_bar top_0px_important toggle-traffic-graph'
+);
+
 
 // Hidden div to forced title.
 html_print_div(