11423-Graph analytics. Before Share & Export

2023-08-22 10:04:33 +02:00 · 2023-08-22 10:04:33 +02:00 · ce1c8cdbb7
parent 63d3745794
commit ce1c8cdbb7
8 changed files with 1087 additions and 421 deletions
--- a/pandora_console/extras/mr/66.sql
+++ b/pandora_console/extras/mr/66.sql
@ -0,0 +1,12 @@
+START TRANSACTION;
+
+CREATE TABLE IF NOT EXISTS `tgraph_analytics_filter` (
+`id` INT NOT NULL auto_increment,
+`filter_name` VARCHAR(45) NULL,
+`user_id` VARCHAR(255) NULL,
+`graph_modules` TEXT NULL,
+`interval` INT NULL,
+PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;
+
+COMMIT;
--- a/pandora_console/include/functions.php
+++ b/pandora_console/include/functions.php
@ -270,7 +270,8 @@ function format_for_graph(
    $dec_point='.',
    $thousands_sep=',',
    $divider=1000,
-    $sufix=''
+    $sufix='',
+    $two_lines=false
 ) {
    // Exception to exclude modules whose unit is already formatted as KB (satellite modules)
    if (!empty($sufix) && $sufix == 'KB') {
@ -297,6 +298,10 @@ function format_for_graph(
    }

    // This will actually do the rounding and the decimals.
+    if ($two_lines === true) {
+        return remove_right_zeros(format_numeric($number, $decimals)).'<br>'.$shorts[$pos].$sufix;
+    }
+
    return remove_right_zeros(format_numeric($number, $decimals)).$shorts[$pos].$sufix;
 }

@ -4046,25 +4051,49 @@ function series_type_graph_array($data, $show_elements_graph)
                        }
                    } else {
                        $name_legend = '';
-                        if (isset($show_elements_graph['fullscale']) === true
-                            && (int) $show_elements_graph['fullscale'] === 1
-                        ) {
-                            $name_legend .= 'Tip: ';
-                        } else {
-                            $name_legend .= 'Avg: ';
-                        }

-                        if ($value['unit']) {
-                            $name_legend .= $value['agent_alias'];
-                            $name_legend .= ' / ';
-                            $name_legend .= $value['module_name'];
-                            $name_legend .= ' / ';
-                            $name_legend .= __('Unit ').' ';
-                            $name_legend .= $value['unit'].': ';
+                        if ($show_elements_graph['graph_analytics'] === true) {
+                            $name_legend .= '<div class="graph-analytics-legend-main">';
+                                $name_legend .= '<div class="graph-analytics-legend-square" style="background-color: '.$color_series[$i]['color'].';">';
+                                    $name_legend .= '<span class="square-value">';
+                                    $name_legend .= format_for_graph(
+                                        end(end($value['data'])),
+                                        1,
+                                        $config['decimal_separator'],
+                                        $config['thousand_separator'],
+                                        1000,
+                                        '',
+                                        true
+                                    );
+                                    $name_legend .= '</span>';
+                                    $name_legend .= '<span class="square-unit" title="'.$value['unit'].'">'.$value['unit'].'</span>';
+                                $name_legend .= '</div>';
+                                $name_legend .= '<div class="graph-analytics-legend">';
+                                    $name_legend .= '<span>'.$value['agent_alias'].'</span>';
+                                    $name_legend .= '<span title="'.$value['module_name'].'">'.$value['module_name'].'</span>';
+                                $name_legend .= '</div>';
+                            $name_legend .= '</div>';
                        } else {
-                            $name_legend .= $value['agent_alias'];
-                            $name_legend .= ' / ';
-                            $name_legend .= $value['module_name'].': ';
+                            if (isset($show_elements_graph['fullscale']) === true
+                                && (int) $show_elements_graph['fullscale'] === 1
+                            ) {
+                                $name_legend .= 'Tip: ';
+                            } else {
+                                $name_legend .= 'Avg: ';
+                            }
+
+                            if ($value['unit']) {
+                                $name_legend .= $value['agent_alias'];
+                                $name_legend .= ' / ';
+                                $name_legend .= $value['module_name'];
+                                $name_legend .= ' / ';
+                                $name_legend .= __('Unit ').' ';
+                                $name_legend .= $value['unit'].': ';
+                            } else {
+                                $name_legend .= $value['agent_alias'];
+                                $name_legend .= ' / ';
+                                $name_legend .= $value['module_name'].': ';
+                            }
                        }
                    }
                }
@ -4085,28 +4114,30 @@ function series_type_graph_array($data, $show_elements_graph)
                    $value['max'] = 0;
                }

-                $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'] == ',' ? '.' : ','
-                    )
-                ).' '.$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'] == ',' ? '.' : ','
-                    )
-                ).' '.$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'] == ',' ? '.' : ','
-                    )
-                ).' '.$value['unit'].'</span>&nbsp;'.$str;
+                if (isset($show_elements_graph['graph_analytics']) === false) {
+                    $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'] == ',' ? '.' : ','
+                        )
+                    ).' '.$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'] == ',' ? '.' : ','
+                        )
+                    ).' '.$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'] == ',' ? '.' : ','
+                        )
+                    ).' '.$value['unit'].'</span>&nbsp;'.$str;
+                }

                if ($show_elements_graph['compare'] == 'overlapped'
                    && $key == 'sum2'
--- a/pandora_console/include/functions_graph.php
+++ b/pandora_console/include/functions_graph.php
@ -5540,3 +5540,23 @@ function graph_events_agent_by_group($id_group, $width=300, $height=200, $noWate
        $options
    );
 }
+
+
+function graph_analytics_filter_select()
+{
+    global $config;
+
+    $result = [];
+
+    if (check_acl($config['id_user'], 0, 'RW') === 1 || check_acl($config['id_user'], 0, 'RM') === 1) {
+        $filters = db_get_all_rows_sql('SELECT id, filter_name FROM tgraph_analytics_filter WHERE user_id = "'.$config['id_user'].'"');
+
+        if ($filters !== false) {
+            foreach ($filters as $filter) {
+                $result[$filter['id']] = $filter['filter_name'];
+            }
+        }
+    }
+
+    return $result;
+}
--- a/pandora_console/include/graphs/flot/pandora.flot.js
+++ b/pandora_console/include/graphs/flot/pandora.flot.js
@ -995,6 +995,9 @@ function pandoraFlotSlicebar(
  }
 }

+// Set array for realtime graphs
+var realtimeGraphs = [];
+
 // eslint-disable-next-line no-unused-vars
 function pandoraFlotArea(
  graph_id,
@ -1007,6 +1010,21 @@ function pandoraFlotArea(
  params,
  events_array
 ) {
+  // Realtime graphs.
+  if (typeof params.realtime !== "undefined") {
+    realtimeGraphs.push({
+      graph_id,
+      values,
+      legend,
+      series_type,
+      color,
+      date_array,
+      data_module_graph,
+      params,
+      events_array
+    });
+  }
+
  //diferents vars
  var unit = params.unit ? params.unit : "";
  var homeurl = params.homeurl;
@ -2462,15 +2480,23 @@ function pandoraFlotArea(
        if (Object.keys(update_legend).length == 0) {
          label_aux = legend[series.label];

-          $("#legend_" + graph_id + " .legendLabel")
-            .eq(i)
-            .html(
-              label_aux +
-                " value = " +
-                number_format(y, 0, "", short_data, divisor) +
-                " " +
-                unit
-            );
+          if (params.graph_analytics === true) {
+            var numberParams = {};
+            numberParams.twoLines = true;
+            $("#legend_" + graph_id + " .legendLabel .square-value")
+              .eq(i)
+              .html(number_format(y, 0, "", 1, divisor, numberParams));
+          } else {
+            $("#legend_" + graph_id + " .legendLabel")
+              .eq(i)
+              .html(
+                label_aux +
+                  " value = " +
+                  number_format(y, 0, "", short_data, divisor) +
+                  " " +
+                  unit
+              );
+          }
        } else {
          $.each(update_legend, function(index, value) {
            if (typeof value[x - 1] !== "undefined") {
@ -2844,12 +2870,16 @@ function pandoraFlotArea(
    // Add bottom margin in the legend
    // Estimated height of 24 (works fine with this data in all browsers)
    $("#legend_" + graph_id).css("margin-bottom", "10px");
-    parent_height = parseInt(
-      $("#menu_" + graph_id)
-        .parent()
-        .css("height")
-        .split("px")[0]
-    );
+
+    if (typeof params.realtime === "undefined" || params.realtime === false) {
+      parent_height = parseInt(
+        $("#menu_" + graph_id)
+          .parent()
+          .css("height")
+          .split("px")[0]
+      );
+    }
+
    adjust_menu(graph_id, plot, parent_height, width, show_legend);
  }
 }
@ -2987,7 +3017,14 @@ function check_adaptions(graph_id) {
  });
 }

-function number_format(number, force_integer, unit, short_data, divisor) {
+function number_format(
+  number,
+  force_integer,
+  unit,
+  short_data,
+  divisor,
+  params
+) {
  divisor = typeof divisor !== "undefined" ? divisor : 1000;
  var decimals = 2;

@ -3029,6 +3066,11 @@ function number_format(number, force_integer, unit, short_data, divisor) {
    number = 0;
  }

+  if (typeof params !== "undefined") {
+    if (typeof params.twoLines !== "undefined" && params.twoLines === true);
+    return number + "<br>" + shorts[pos] + unit;
+  }
+
  return number + " " + shorts[pos] + unit;
 }

--- a/pandora_console/include/graphs/functions_flot.php
+++ b/pandora_console/include/graphs/functions_flot.php
@ -262,8 +262,14 @@ function flot_area_graph(
        (empty($params['line_width']) === true) ? $config['custom_graph_width'] : $params['line_width'],
        true
    );
+
+    $timestamp_top_fixed = '';
+    if (isset($params['timestamp_top_fixed']) === true && empty($params['timestamp_top_fixed']) === false) {
+        $timestamp_top_fixed = $params['timestamp_top_fixed'];
+    }
+
    $return .= "<div id='timestamp_$graph_id'
-                     class='timestamp_graph'
+                     class='timestamp_graph ".$timestamp_top_fixed." '
                     style='font-size:".$params['font_size']."pt;
                        display:none; position:absolute;
                        background:#fff; border: solid 1px #aaa;
@ -275,8 +281,20 @@ function flot_area_graph(
        $return .= 'noresizevc ';
    }

+    if (strpos($params['width'], '%') === false) {
+        $width = 'width: '.$params['width'].'px;';
+    } else {
+        $width = 'width: '.$params['width'].';';
+    }
+
+    if (strpos($params['graph_width'], '%') === false) {
+        $width = 'width: '.$params['graph_width'].'px;';
+    } else {
+        $width = 'width: '.$params['graph_width'].';';
+    }
+
    $return .= 'graph'.$params['adapt_key']."'
-				style='	width: ".$params['width'].'px;
+				style='".$width.';
 				height: '.$params['height']."px;'></div>";

    $legend_top = 10;
--- a/pandora_console/include/styles/graph_analytics.css
+++ b/pandora_console/include/styles/graph_analytics.css
@ -31,6 +31,17 @@ div.box-flat.white_table_graph > div[id^="tgl_div_"] > div.white-box-content {
  justify-content: flex-start;
 }

+div.box-flat.white_table_graph
+  > div[id^="tgl_div_"]
+  > div.white-box-content
+  > [data-id-agent],
+div.box-flat.white_table_graph
+  > div[id^="tgl_div_"]
+  > div.white-box-content
+  > [data-id-group] {
+  cursor: pointer;
+}
+
 div#menu_tab ul li,
 div#menu_tab ul li span {
  display: flex;
@ -158,7 +169,7 @@ div.graphs-div-main {

 /* Draggable */
 .draggable.ui-draggable-dragging {
-  width: 100%;
+  width: 20%;
 }

 .draggable {
@ -166,15 +177,13 @@ div.graphs-div-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
-  width: 100px;
-  height: 20px;
-  background: #9efcab;
-}
-/* !Remove and set width 100% in .draggable */
-#droppable-graphs .draggable {
-  width: 20px;
 }

+#droppable-graphs * {
+  cursor: default;
+}
+
+/* Droppable */
 .droppable {
  width: 100%;
  /* height: 20px; */
@ -187,7 +196,10 @@ div.graphs-div-main {
  border: 2px dashed #0077ff;
  border-radius: 6px;
  width: 100%;
-  height: 20px;
+}
+
+#droppable-graphs .droppable-zone > div {
+  opacity: 0.5;
 }

 #droppable-graphs .drops-hover {
@ -238,3 +250,72 @@ div.graphs-div-main {
  > span.drop-here {
  color: #82b92e;
 }
+
+#droppable-graphs .parent_graph {
+  padding-top: 40px;
+}
+
+#droppable-graphs .timestamp_graph {
+  top: 15px;
+}
+
+#droppable-graphs .menu_graph {
+  left: 85%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+div.timestamp-top-fixed {
+  top: 15px !important;
+}
+
+div.graph-analytics-legend-main {
+  display: flex;
+}
+
+div.graph-analytics-legend-square {
+  width: 30px;
+  height: 30px;
+  max-width: 30px;
+  margin-right: 5px;
+  padding-right: 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+
+div.graph-analytics-legend-square > span {
+  text-align: right;
+  color: #fff;
+  line-height: 9pt;
+}
+
+div.graph-analytics-legend-square > span.square-unit {
+  width: 30px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+div.graph-analytics-legend {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+div.graph-analytics-legend > span {
+  line-height: 12pt;
+}
+
+div.graph-analytics-legend > span:last-child {
+  font-weight: normal;
+  font-size: 8pt;
+  margin-left: 5px;
+}
+
+#droppable-graphs td.legendColorBox {
+  display: none;
+}
--- a/pandora_console/operation/reporting/graph_analytics.php
+++ b/pandora_console/operation/reporting/graph_analytics.php
--- a/pandora_console/pandoradb.sql
+++ b/pandora_console/pandoradb.sql
@ -4408,3 +4408,15 @@ CREATE TABLE IF NOT EXISTS `tnetwork_explorer_filter` (
  `advanced_filter` TEXT NULL,
  PRIMARY KEY (`id`)
  ) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;
+
+-- ---------------------------------------------------------------------
+-- Table `tgraph_analytics_filter`
+-- ---------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS `tgraph_analytics_filter` (
+`id` INT NOT NULL auto_increment,
+`filter_name` VARCHAR(45) NULL,
+`user_id` VARCHAR(255) NULL,
+`graph_modules` TEXT NULL,
+`interval` INT NULL,
+PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;