1st approach

pandora_console/include/javascript/tree/TreeController.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 // Pandora FMS - http://pandorafms.com
 // ==================================================
 // Copyright (c) 2005-2010 Artica Soluciones Tecnologicas
@@ -20,7 +22,7 @@ var TreeController = {
       recipient: "",
       tree: [],
       emptyMessage: "No data found.",
-      foundMessage: "Found groups",
+      foundMessage: "Groups found",
       errorMessage: "Error",
       baseURL: "",
       ajaxURL: "ajax.php",
@@ -48,9 +50,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 +323,7 @@ var TreeController = {
                 _processNodeCounterTitle($totalCounter, type, "total");
 
                 // Open the parentheses
-                $counters.append(" (");
+                $counters.append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [ ");
 
                 $counters.append($totalCounter);
 
@@ -409,7 +417,7 @@ var TreeController = {
               }
 
               // Close the parentheses
-              $counters.append(")");
+              $counters.append(" ]");
 
               hasCounters = true;
             }
@@ -1086,20 +1094,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 {
@@ -121,6 +133,7 @@
 }
 
 .tree-node > .node-content > .tree-node-counters {
+  font-size: 1em;
 }
 
 .tree-node > .node-content > img {

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); ?>",