Merge branch 'ent-5757-mejoras-visuales-en-el-treeview' into 'develop'

Ent 5757 mejoras visuales en el treeview

See merge request artica/pandorafms!3200

pandora_console/include/ajax/module.php

@@ -1034,86 +1034,7 @@ if (check_login()) {
                 }
             }
 
-            if (is_numeric($module['datos']) && !modules_is_string_type($module['id_tipo_modulo'])) {
+            $salida = modules_get_agentmodule_data_for_humans($module);
-                if ($config['render_proc']) {
-                    switch ($module['id_tipo_modulo']) {
-                        case 2:
-                        case 6:
-                        case 9:
-                        case 18:
-                        case 21:
-                        case 31:
-                            if ($module['datos'] >= 1) {
-                                $salida = $config['render_proc_ok'];
-                            } else {
-                                $salida = $config['render_proc_fail'];
-                            }
-                        break;
-
-                        default:
-                            switch ($module['id_tipo_modulo']) {
-                                case 15:
-                                    $value = db_get_value('snmp_oid', 'tagente_modulo', 'id_agente_modulo', $module['id_agente_modulo']);
-                                    if ($value == '.1.3.6.1.2.1.1.3.0' || $value == '.1.3.6.1.2.1.25.1.1.0') {
-                                        if ($module['post_process'] > 0) {
-                                            $salida = human_milliseconds_to_string(($module['datos'] / $module['post_process']));
-                                        } else {
-                                            $salida = human_milliseconds_to_string($module['datos']);
-                                        }
-                                    } else {
-                                        $salida = remove_right_zeros(number_format($module['datos'], $config['graph_precision']));
-                                    }
-                                break;
-
-                                default:
-                                    $salida = remove_right_zeros(number_format($module['datos'], $config['graph_precision']));
-                                break;
-                            }
-                        break;
-                    }
-                } else {
-                    switch ($module['id_tipo_modulo']) {
-                        case 15:
-                            $value = db_get_value('snmp_oid', 'tagente_modulo', 'id_agente_modulo', $module['id_agente_modulo']);
-                            if ($value == '.1.3.6.1.2.1.1.3.0' || $value == '.1.3.6.1.2.1.25.1.1.0') {
-                                if ($module['post_process'] > 0) {
-                                    $salida = human_milliseconds_to_string(($module['datos'] / $module['post_process']));
-                                } else {
-                                    $salida = human_milliseconds_to_string($module['datos']);
-                                }
-                            } else {
-                                $salida = remove_right_zeros(number_format($module['datos'], $config['graph_precision']));
-                            }
-                        break;
-
-                        default:
-                            $salida = remove_right_zeros(number_format($module['datos'], $config['graph_precision']));
-                        break;
-                    }
-                }
-
-                // Show units ONLY in numeric data types
-                if (isset($module['unit'])) {
-                    $data_macro = modules_get_unit_macro($module['datos'], $module['unit']);
-                    if ($data_macro) {
-                        $salida = $data_macro;
-                    } else {
-                        $salida .= '&nbsp;<i>'.io_safe_output($module['unit']).'</i>';
-                    }
-                }
-            } else {
-                $data_macro = modules_get_unit_macro($module['datos'], $module['unit']);
-                if ($data_macro) {
-                    $salida = $data_macro;
-                } else {
-                    $salida = ui_print_module_string_value(
-                        $module['datos'],
-                        $module['id_agente_modulo'],
-                        $module['current_interval'],
-                        $module['module_name']
-                    );
-                }
-            }
 
             if ($module['id_tipo_modulo'] != 25) {
                 $data[6] = ui_print_module_warn_value($module['max_warning'], $module['min_warning'], $module['str_warning'], $module['max_critical'], $module['min_critical'], $module['str_critical'], $module['warning_inverse'], $module['critical_inverse']);

pandora_console/include/class/Tree.class.php

@@ -557,7 +557,7 @@ class Tree
         $module['id_module_type'] = (int) $module['id_tipo_modulo'];
         $module['server_type'] = (int) $module['id_modulo'];
         $module['status'] = $module['estado'];
-        $module['value'] = $module['datos'];
+        $module['value'] = modules_get_agentmodule_data_for_humans($module);
 
         if (is_metaconsole()) {
             $module['serverID'] = $this->serverID;
@@ -738,12 +738,10 @@ class Tree
             $agent['counters']['warning'],
             $agent['counters']['unknown'],
             $agent['counters']['total'],
-            $agent['counters']['not_init']
+            $agent['counters']['not_init'],
+            $agent['counters']['alerts']
         );
 
-        // Alerts fired image
-        $agent['alertImageHTML'] = agents_tree_view_alert_img_ball($agent['counters']['alerts']);
-
         // search module recalculate counters
         if (array_key_exists('state_normal', $agent)) {
             $agent['counters']['unknown'] = $agent['state_unknown'];

pandora_console/include/functions_agents.php

@@ -2642,12 +2642,28 @@ function agents_tree_view_status_img($critical, $warning, $unknown, $total, $not
 
 
 // Returns the status ball image to display tree view
-function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total, $notinit)
+function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total, $notinit, $alerts)
 {
     if ($total == 0 || $total == $notinit) {
         return ui_print_status_image(
             STATUS_AGENT_NO_MONITORS_BALL,
             __('No Monitors'),
+            true,
+            false,
+            false,
+            // Use CSS shape instead of image.
+            true
+        );
+    }
+
+    if ($alerts > 0) {
+        return ui_print_status_image(
+            STATUS_ALERT_FIRED_BALL,
+            __('Alert fired on agent'),
+            true,
+            false,
+            false,
+            // Use CSS shape instead of image.
             true
         );
     }
@@ -2656,24 +2672,40 @@ function agents_tree_view_status_img_ball($critical, $warning, $unknown, $total,
         return ui_print_status_image(
             STATUS_AGENT_CRITICAL_BALL,
             __('At least one module in CRITICAL status'),
+            true,
+            false,
+            false,
+            // Use CSS shape instead of image.
             true
         );
     } else if ($warning > 0) {
         return ui_print_status_image(
             STATUS_AGENT_WARNING_BALL,
             __('At least one module in WARNING status'),
+            true,
+            false,
+            false,
+            // Use CSS shape instead of image.
             true
         );
     } else if ($unknown > 0) {
         return ui_print_status_image(
             STATUS_AGENT_DOWN_BALL,
             __('At least one module is in UKNOWN status'),
+            true,
+            false,
+            false,
+            // Use CSS shape instead of image.
             true
         );
     } else {
         return ui_print_status_image(
             STATUS_AGENT_OK_BALL,
             __('All Monitors OK'),
+            true,
+            false,
+            false,
+            // Use CSS shape instead of image.
             true
         );
     }

pandora_console/include/functions_modules.php

@@ -2271,6 +2271,102 @@ function modules_get_agentmodule_data(
 }
 
 
+/**
+ * Return module data in readable format.
+ *
+ * @param array $module Current module.
+ *
+ * @return void
+ */
+function modules_get_agentmodule_data_for_humans($module)
+{
+    global $config;
+
+    if (is_numeric($module['datos']) && !modules_is_string_type($module['id_tipo_modulo'])) {
+        if ($config['render_proc']) {
+            switch ($module['id_tipo_modulo']) {
+                case 2:
+                case 6:
+                case 9:
+                case 18:
+                case 21:
+                case 31:
+                    if ($module['datos'] >= 1) {
+                        $salida = $config['render_proc_ok'];
+                    } else {
+                        $salida = $config['render_proc_fail'];
+                    }
+                break;
+
+                default:
+                    switch ($module['id_tipo_modulo']) {
+                        case 15:
+                            $value = db_get_value('snmp_oid', 'tagente_modulo', 'id_agente_modulo', $module['id_agente_modulo']);
+                            if ($value == '.1.3.6.1.2.1.1.3.0' || $value == '.1.3.6.1.2.1.25.1.1.0') {
+                                if ($module['post_process'] > 0) {
+                                    $salida = human_milliseconds_to_string(($module['datos'] / $module['post_process']));
+                                } else {
+                                    $salida = human_milliseconds_to_string($module['datos']);
+                                }
+                            } else {
+                                $salida = remove_right_zeros(number_format($module['datos'], $config['graph_precision']));
+                            }
+                        break;
+
+                        default:
+                            $salida = remove_right_zeros(number_format($module['datos'], $config['graph_precision']));
+                        break;
+                    }
+                break;
+            }
+        } else {
+            switch ($module['id_tipo_modulo']) {
+                case 15:
+                    $value = db_get_value('snmp_oid', 'tagente_modulo', 'id_agente_modulo', $module['id_agente_modulo']);
+                    if ($value == '.1.3.6.1.2.1.1.3.0' || $value == '.1.3.6.1.2.1.25.1.1.0') {
+                        if ($module['post_process'] > 0) {
+                            $salida = human_milliseconds_to_string(($module['datos'] / $module['post_process']));
+                        } else {
+                            $salida = human_milliseconds_to_string($module['datos']);
+                        }
+                    } else {
+                        $salida = remove_right_zeros(number_format($module['datos'], $config['graph_precision']));
+                    }
+                break;
+
+                default:
+                    $salida = remove_right_zeros(number_format($module['datos'], $config['graph_precision']));
+                break;
+            }
+        }
+
+        // Show units ONLY in numeric data types
+        if (isset($module['unit'])) {
+            $data_macro = modules_get_unit_macro($module['datos'], $module['unit']);
+            if ($data_macro) {
+                $salida = $data_macro;
+            } else {
+                $salida .= '&nbsp;<i>'.io_safe_output($module['unit']).'</i>';
+            }
+        }
+    } else {
+        $data_macro = modules_get_unit_macro($module['datos'], $module['unit']);
+        if ($data_macro) {
+            $salida = $data_macro;
+        } else {
+            $salida = ui_print_module_string_value(
+                $module['datos'],
+                $module['id_agente_modulo'],
+                $module['current_interval'],
+                $module['module_name']
+            );
+        }
+    }
+
+    return $salida;
+}
+
+
 /**
  * This function gets the modulegroup for a given group
  *

pandora_console/include/javascript/tree/TreeController.js

@@ -20,7 +20,7 @@ var TreeController = {
       recipient: "",
       tree: [],
       emptyMessage: "No data found.",
-      foundMessage: "Found groups",
+      foundMessage: "Groups found",
       errorMessage: "Error",
       baseURL: "",
       ajaxURL: "ajax.php",
@@ -48,9 +48,15 @@ var TreeController = {
               .addClass("tree-root")
               .hide()
               .prepend(
-                '<img src="' +
+                '<div class="tree-node flex-row-vcenter">' +
+                  '<img src="' +
                   (controller.baseURL.length > 0 ? controller.baseURL : "") +
-                  'images/pandora.png" />'
+                  'images/pandora.png" />' +
+                  "<span class='margin-left-1'>" +
+                  (controller.tree.length > 0
+                    ? controller.foundMessage + ": " + controller.tree.length
+                    : "") +
+                  "</div>"
               );
           }
           // Normal group
@@ -315,7 +321,7 @@ var TreeController = {
                 _processNodeCounterTitle($totalCounter, type, "total");
 
                 // Open the parentheses
-                $counters.append(" (");
+                $counters.append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [ ");
 
                 $counters.append($totalCounter);
 
@@ -409,7 +415,7 @@ var TreeController = {
               }
 
               // Close the parentheses
-              $counters.append(")");
+              $counters.append(" ]");
 
               hasCounters = true;
             }
@@ -541,6 +547,7 @@ var TreeController = {
               break;
             case "agent":
               // Is quiet
+
               if (
                 typeof element.quietImageHTML != "undefined" &&
                 element.quietImageHTML.length > 0
@@ -560,16 +567,6 @@ var TreeController = {
 
                 $content.append($statusImage);
               }
-              // Alerts fired image
-              if (
-                typeof element.alertImageHTML != "undefined" &&
-                element.alertImageHTML.length > 0
-              ) {
-                var $alertImage = $(element.alertImageHTML);
-                $alertImage.addClass("agent-alerts-fired");
-
-                $content.append($alertImage);
-              }
 
               // Events by agent
               if (element.showEventsBtn == 1) {
@@ -690,6 +687,8 @@ var TreeController = {
               $content.append(" " + element.name);
               break;
             case "module":
+              $content.addClass("module");
+
               // Status image
               if (
                 typeof element.statusImageHTML != "undefined" &&
@@ -700,17 +699,19 @@ var TreeController = {
 
                 $content.append($statusImage);
               }
-              // Server type
-              if (
-                typeof element.serverTypeHTML != "undefined" &&
-                element.serverTypeHTML.length > 0 &&
-                element.serverTypeHTML != "--"
-              ) {
-                var $serverTypeImage = $(element.serverTypeHTML);
-                $serverTypeImage.addClass("module-server-type");
 
-                $content.append($serverTypeImage);
+              // Name max 42 chars.
-              }
+              $content.append(
+                '<span class="module-name">' +
+                  element.name.substring(0, 42) +
+                  (element.name.length > 42 ? "..." : "") +
+                  "</span>"
+              );
+
+              // Value.
+              $content.append(
+                '<span class="module-value">' + element.value + "</span>"
+              );
 
               if (
                 typeof element.showGraphs != "undefined" &&
@@ -832,7 +833,6 @@ var TreeController = {
                 $content.append($alertsImage);
               }
 
-              $content.append(element.name);
               break;
             case "os":
               if (
@@ -1086,20 +1086,6 @@ var TreeController = {
         }
 
         controller.recipient.empty();
-        if (
-          controller.tree.length !== undefined &&
-          controller.foundMessage !== "not"
-        ) {
-          controller.recipient.html(
-            "<div> " +
-              controller.foundMessage +
-              ": " +
-              controller.tree.length +
-              "</div>" +
-              "<br/>"
-          );
-        }
-
         var $children = _processGroup(this.recipient, this.tree, true);
         $children.show();
 

pandora_console/include/styles/pandora.css

@@ -588,9 +588,18 @@ select:-internal-list-box {
 .padding-6 {
   padding: 6em;
 }
+.margin-right-1 {
+  margin-right: 1em;
+}
+.margin-left-1 {
+  margin-left: 1em;
+}
 .margin-right-2 {
   margin-right: 2em;
 }
+.margin-left-2 {
+  margin-left: 2em;
+}
 .no-border {
   border: none;
 }

pandora_console/include/styles/tree.css

@@ -4,7 +4,7 @@
 }
 
 .tree-group {
-  margin-left: 19px;
+  margin-left: 24px;
   padding-top: 1px;
 }
 
@@ -18,12 +18,24 @@
   min-height: 26px;
 }
 
+div.tree-node {
+  background: 0 0;
+}
+
+div.tree-node span {
+  font-size: 1.2em;
+}
+
 .tree-node:last-child {
   background: 0 0;
 }
 .node-content {
   height: 26px;
   font-size: 1.2em;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
 .node-content > img {
@@ -106,6 +118,30 @@
   padding-right: 3px;
 }
 
+.tree-node > .node-content > .agent-status.status_balls,
+.tree-node > .node-content > .status_small_balls {
+  width: 0.6em;
+  height: 1.5em;
+  margin-bottom: -0.4em;
+  border-radius: 0;
+}
+.tree-node > .node-content > .module-status.status_small_balls {
+  width: 0.4em;
+}
+
+.tree-node > .node-content > .module-name {
+  margin: 0 0 0 1em;
+  width: 250px;
+  display: inline-block;
+}
+
+.tree-node > .node-content > .module-value {
+  width: 120px;
+  display: inline-block;
+  text-align: right;
+  margin: 0 1em;
+}
+
 .tree-node > .node-content > img.module-server-type,
 .tree-node > .node-content > img.agent-status,
 .tree-node > .node-content > img.agent-alerts-fired,
@@ -121,6 +157,7 @@
 }
 
 .tree-node > .node-content > .tree-node-counters {
+  font-size: 1.2em;
 }
 
 .tree-node > .node-content > img {
@@ -129,7 +166,7 @@
 
 .tree-node > .node-content > .tree-node-counters > .tree-node-counter {
   font-weight: bold;
-  font-size: 1.2em;
+  font-size: 0.9em;
   cursor: default;
 }
 

pandora_console/operation/tree.php

@@ -345,7 +345,7 @@ enterprise_hook('close_meta_frame');
                         detailRecipient: $.fixedBottomBox({ width: 400, height: window.innerHeight * 0.9 }),
                         page: parameters['page'],
                         emptyMessage: "<?php echo __('No data found'); ?>",
-                        foundMessage: "<?php echo __('Found groups'); ?>",
+                        foundMessage: "<?php echo __('Groups found'); ?>",
                         tree: data.tree,
                         baseURL: "<?php echo ui_get_full_url(false, false, false, is_metaconsole()); ?>",
                         ajaxURL: "<?php echo ui_get_full_url('ajax.php', false, false, false); ?>",