11423-Graph analytics

pandora_console/include/javascript/graph_analytics.js

@@ -38,9 +38,11 @@ $("div.filters-div-main > .filters-div-header > img").click(function(e) {
   if ($(".filters-div-main").hasClass("filters-div-main-collapsed") === true) {
     $(".filters-div-header > img").attr("src", "images/menu/contraer.svg");
     $(".filters-div-main").removeClass("filters-div-main-collapsed");
+    $("#droppable-graphs").removeClass("droppable-graphs-collapsed");
   } else {
     $(".filters-div-header > img").attr("src", "images/menu/expandir.svg");
     $(".filters-div-main").addClass("filters-div-main-collapsed");
+    $("#droppable-graphs").addClass("droppable-graphs-collapsed");
   }
 });
 
@@ -96,7 +98,13 @@ $("#search-left").keyup(function(e) {
             $("#modules-toggle").show();
             data.modules.forEach(module => {
               modulesToggle.append(
-                `<div class="draggable" data-id-module="${module.id_agente_modulo}" title="${module.nombre}">${module.nombre}</div>`
+                `<div class="draggable draggable-container" data-id-module="${module.id_agente_modulo}" title="${module.nombre}">
+                  <img class="draggable-icon" src="images/draggable.svg">
+                  <div class="draggable-module">
+                    <span class="draggable-module-name">${module.nombre}</span>
+                    <span class="draggable-agent-name">${module.alias}</span>
+                  </div>
+                </div>`
               );
             });
           } else {
@@ -156,7 +164,13 @@ function searchRight(freeSearch) {
 
         data.modules.forEach(module => {
           modulesRight.append(
-            `<div class="draggable" data-id-module="${module.id_agente_modulo}" title="${module.nombre}">${module.nombre}</div>`
+            `<div class="draggable draggable-container" data-id-module="${module.id_agente_modulo}" title="${module.nombre}">
+              <img class="draggable-icon" src="images/draggable.svg">
+              <div class="draggable-module">
+                <span class="draggable-module-name">${module.nombre}</span>
+                <span class="draggable-agent-name">${module.alias}</span>
+              </div>
+            </div>`
           );
         });
 
@@ -614,6 +628,29 @@ $("#button-export-modal").click(function(e) {
   const group = parseInt($("#export-group-id").val());
 
   if (filter !== 0 && group !== 0) {
-    // todo: Ajax save in tgraph & tgraph_source.
+    $.ajax({
+      method: "POST",
+      url: "ajax.php",
+      dataType: "html",
+      data: {
+        page: "operation/reporting/graph_analytics",
+        export_filter: filter,
+        group
+      },
+      success: function(data) {
+        if (data) {
+          confirmDialog({
+            title: titleExportConfirm,
+            message: data + " " + messageExportConfirm,
+            hideCancelButton: true,
+            onAccept: function() {
+              $(
+                "button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close"
+              ).click();
+            }
+          });
+        }
+      }
+    });
   }
 });

pandora_console/include/styles/graph_analytics.css

@@ -1,19 +1,3 @@
-/* .options-graph-analytics {
-  position: sticky;
-  top: 110px;
-  width: -webkit-fill-available;
-  width: -moz-available;
-  height: 18px;
-  margin: -25px -25px 25px -25px;
-  padding: 10px 20px;
-  z-index: 1;
-  font-weight: bold;
-  display: flex;
-  min-width: fit-content;
-  background-color: var(--secondary-color);
-  border: 1px solid #e5e9ed;
-} */
-
 div#main {
   margin-bottom: 0;
 }
@@ -21,6 +5,7 @@ div#main {
 div.box-flat.white_table_graph > div[id^="tgl_div_"] {
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
+  width: 228px;
 }
 
 div.box-flat.white_table_graph > div[id^="tgl_div_"] > div.white-box-content {
@@ -85,7 +70,8 @@ div.margin-div {
 div.filters-div-main {
   padding: 0;
   margin: 0;
-  min-width: 400px;
+  width: 500px;
+  min-width: 500px;
   border-right: 1px solid var(--border-dark-color);
 }
 
@@ -100,6 +86,10 @@ div.filters-div-main.filters-div-main-collapsed
   display: none;
 }
 
+.droppable-graphs-collapsed {
+  margin-left: -30px;
+}
+
 div.filters-div-main > .filters-div-header {
   display: flex;
   flex-direction: row;
@@ -126,7 +116,9 @@ div.filter-div {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  width: 50%;
+  width: 230px;
+  min-width: 230px;
+  max-width: 230px;
   height: 100%;
   padding: 10px;
   border-top: 1px solid var(--border-dark-color);
@@ -136,7 +128,10 @@ div.filter-div {
   border-right: 1px solid var(--border-dark-color);
 }
 
-.filters-right-div {
+div.filters-right-div {
+  width: 230px;
+  min-width: 230px;
+  max-width: 230px;
 }
 
 .search-graph-analytics {
@@ -184,11 +179,47 @@ div.graphs-div-main {
   text-overflow: ellipsis;
 }
 
+.draggable-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: -10px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.draggable-container:last-child {
+  border-bottom: 0px;
+}
+
+.draggable-module {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.draggable-icon {
+  height: 25px;
+}
+
+.draggable-module > span {
+  line-height: 10pt;
+}
+
+.draggable-module > span.draggable-module-name {
+  font-weight: bold;
+}
+
+.draggable-module > span.draggable-agent-name {
+  color: #8a96a6;
+}
+
+/* Droppable */
 #droppable-graphs * {
   cursor: default;
 }
 
-/* Droppable */
 .droppable {
   width: 100%;
   /* height: 20px; */
@@ -307,7 +338,7 @@ div.graph-analytics-legend-square > span.square-unit {
 
 div.graph-analytics-legend {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   flex-wrap: nowrap;
 }
 
@@ -315,7 +346,7 @@ div.graph-analytics-legend > span {
   line-height: 12pt;
 }
 
-div.graph-analytics-legend > span:last-child {
+div.graph-analytics-legend > span:first-child {
   font-weight: normal;
   font-size: 8pt;
   margin-left: 5px;

pandora_console/operation/reporting/graph_analytics.php

@@ -46,6 +46,7 @@ if (is_ajax()) {
     $load_filter = get_parameter('load_filter');
     $update_filter = get_parameter('update_filter');
     $get_new_values = get_parameter('get_new_values');
+    $export_filter = get_parameter('export_filter');
 
     if (empty($search_left) === false) {
         $output = [];
@@ -101,14 +102,15 @@ if (is_ajax()) {
         }
 
         $id_agents = implode(',', $result_agents);
-        $search_sql = ' AND (nombre LIKE "%%'.$search.'%%" OR descripcion LIKE "%%'.$search.'%%")';
+        $search_sql = ' AND (tam.nombre LIKE "%%'.$search.'%%" OR tam.descripcion LIKE "%%'.$search.'%%")';
 
         $sql = sprintf(
-            'SELECT id_agente_modulo, nombre, descripcion
+            'SELECT tam.id_agente_modulo, tam.nombre, tam.descripcion, ta.alias
-            FROM tagente_modulo
+            FROM tagente_modulo tam
-            WHERE (id_agente IN (%s))
+            INNER JOIN tagente ta ON ta.id_agente = tam.id_agente
+            WHERE (tam.id_agente IN (%s))
                 %s
-            ORDER BY nombre',
+            ORDER BY tam.nombre',
             $id_agents,
             $search_sql
         );
@@ -131,8 +133,9 @@ if (is_ajax()) {
         // Agent.
         if (empty($agent) === false) {
             $sql = sprintf(
-                'SELECT tam.id_agente_modulo, tam.nombre, tam.descripcion
+                'SELECT tam.id_agente_modulo, tam.nombre, tam.descripcion, ta.alias
                 FROM tagente_modulo tam
+                INNER JOIN tagente ta ON ta.id_agente = tam.id_agente
                 WHERE (tam.id_agente = %s)
                     %s
                 ORDER BY tam.nombre',
@@ -146,7 +149,7 @@ if (is_ajax()) {
         // Group.
         if (empty($group) === false) {
             $sql = sprintf(
-                'SELECT tam.id_agente_modulo, tam.nombre, tam.descripcion
+                'SELECT tam.id_agente_modulo, tam.nombre, tam.descripcion, ta.alias
                 FROM tagente_modulo tam
                 INNER JOIN tagente ta ON ta.id_agente = tam.id_agente
                 WHERE (ta.id_grupo = %s)
@@ -309,6 +312,54 @@ if (is_ajax()) {
         return;
     }
 
+    // Export graphs.
+    if (empty($export_filter) === false) {
+        $counter = 0;
+        $filter = get_parameter('export_filter');
+        $group = get_parameter('group');
+
+        $filter_name = db_get_value('filter_name', 'tgraph_analytics_filter', 'id', $filter);
+        $graphs = json_decode(db_get_value('graph_modules', 'tgraph_analytics_filter', 'id', $filter));
+        $interval = db_get_value('tgraph_analytics_filter.interval', 'tgraph_analytics_filter', 'id', $filter);
+
+        foreach ($graphs as $graph) {
+            $id_graph = db_process_sql_insert(
+                'tgraph',
+                [
+                    'id_user'     => $config['id_user'],
+                    'id_group'    => $group,
+                    'name'        => $filter_name.' ('.__('Graph').' '.($counter + 1).')',
+                    'description' => __('Created from Graph analytics. Filter:').' '.$filter_name.'. '.__('Graph').' '.($counter + 1),
+                    'period'      => $interval,
+                    'stacked'     => 2,
+                ]
+            );
+
+            if ($id_graph > 0) {
+                $counter++;
+                $field_order = 1;
+
+                foreach ($graph as $module) {
+                    $id_graph_source = db_process_sql_insert(
+                        'tgraph_source',
+                        [
+                            'id_graph'        => $id_graph,
+                            'id_server'       => 0,
+                            'id_agent_module' => $module,
+                            'weight'          => 1,
+                            'label'           => '',
+                            'field_order'     => $field_order,
+                        ]
+                    );
+
+                    $field_order++;
+                }
+            }
+        }
+
+        echo $counter;
+    }
+
     return;
 }
 
@@ -882,4 +933,7 @@ const titleLoadConfirm = "<?php echo __('Error'); ?>";
 const messageLoadConfirm = "<?php echo __('Error loading filter'); ?>";
 
 const titleExport = "<?php echo __('Export to custom graph'); ?>";
+
+const titleExportConfirm = "<?php echo __('Exported successfully'); ?>";
+const messageExportConfirm = "<?php echo __('graphs have been created in Custom graphs'); ?>";
 </script>