WIP: TreeView improve

pandora_console/include/functions_treeview.php

@@ -55,19 +55,14 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
 
     $table = new StdClass();
     $table->width = '100%';
-    $table->class = 'databox data';
+    $table->class = 'floating_form';
+    $table->id = 'tree_view_module_data';
     $table->style = [];
-    $table->style['title'] = 'font-weight: bold;';
+    $table->style['title'] = 'height: 46px; width: 30%; padding-right: 5px; text-align: end;';
-
+    $table->style['data'] = 'height: 46px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';';
-    if (!$no_head) {
-        $table->head = [];
-        $table->head[] = __('Module');
-    }
-
-    $table->head_colspan[] = 2;
     $table->data = [];
 
-    // Module name
+    // Module name.
     if ($module['disabled']) {
         $cellName = '<em>'.ui_print_truncate_text($module['nombre'], GENERIC_SIZE_TEXT, true, true, true, '[&hellip;]', 'text-transform: uppercase;').ui_print_help_tip(__('Disabled'), true).'<em>';
     } else {
@@ -76,16 +71,22 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
 
     $row = [];
     $row['title'] = __('Name');
-    $row['data'] = '<b>'.$cellName.'</b>';
+    $row['data'] = html_print_anchor(
+        [
+            'href'    => $console_url.'index.php?sec=gagente&sec2=godmode/agentes/configurar_agente&id_agente='.$module['id_agente'].'&tab=module&edit_module=1&id_agent_module='.$module['id_agente_modulo'].$url_hash,
+            'content' => $cellName,
+        ],
+        true
+    );
     $table->data['name'] = $row;
 
-    // Interval
+    // Interval.
     $row = [];
     $row['title'] = __('Interval');
     $row['data'] = human_time_description_raw(modules_get_interval($module['id_agente_modulo']), true);
     $table->data['interval'] = $row;
 
-    // Warning Min/Max
+    // Warning Min/Max.
     if (modules_is_string_type($module['id_tipo_modulo'])) {
         $warning_status_str = __('Str.').': '.$module['str_warning'];
     } else {
@@ -97,7 +98,7 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
     $row['data'] = $warning_status_str;
     $table->data['warning_status'] = $row;
 
-    // Critical Min/Max
+    // Critical Min/Max.
     if (modules_is_string_type($module['id_tipo_modulo'])) {
         $critical_status_str = __('Str.').': '.$module['str_warning'];
     } else {
@@ -109,7 +110,7 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
     $row['data'] = $critical_status_str;
     $table->data['critical_status'] = $row;
 
-    // Module group
+    // Module group.
     $module_group = modules_get_modulegroup_name($module['id_module_group']);
 
     if ($module_group === false) {
@@ -135,41 +136,33 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
     );
     $table->data['description'] = $row;
 
-    // Tags
+    // Tags.
     $tags = tags_get_module_tags($module['id_agente_modulo']);
 
-    if (empty($tags)) {
+    if (empty($tags) === false) {
-        $tags = [];
+        $user_tags = tags_get_user_tags($config['id_user']);
-    }
 
-    $user_tags = tags_get_user_tags($config['id_user']);
+        foreach ($tags as $k => $v) {
-
+            if (!array_key_exists($v, $user_tags)) {
-    foreach ($tags as $k => $v) {
+                // Only show user's tags.
-        if (!array_key_exists($v, $user_tags)) {
-            // only show user's tags.
-            unset($tags[$k]);
-        } else {
-            $tag_name = tags_get_name($v);
-            if (empty($tag_name)) {
                 unset($tags[$k]);
             } else {
-                $tags[$k] = $tag_name;
+                $tag_name = tags_get_name($v);
+                if (empty($tag_name) === true) {
+                    unset($tags[$k]);
+                } else {
+                    $tags[$k] = $tag_name;
+                }
             }
         }
     }
 
-    if (empty($tags)) {
-        $tags = '<i>'.__('N/A').'</i>';
-    } else {
-        $tags = implode(', ', $tags);
-    }
-
     $row = [];
     $row['title'] = __('Tags');
-    $row['data'] = $tags;
+    $row['data'] = (empty($tags) === true) ? '<i>'.__('N/A').'</i>' : implode(', ', $tags);
     $table->data['tags'] = $row;
 
-    // Data
+    // Data.
     $last_data = db_get_row_filter('tagente_estado', ['id_agente_modulo' => $module['id_agente_modulo'], 'order' => ['field' => 'id_agente_estado', 'order' => 'DESC']]);
     if ($config['render_proc']) {
         switch ($module['id_tipo_modulo']) {
@@ -229,9 +222,9 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
         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 ($value === '.1.3.6.1.2.1.1.3.0' || $value === '.1.3.6.1.2.1.25.1.1.0') {
                     $data = "<span title='".human_milliseconds_to_string($last_data['datos'])."' class='nowrap'>".human_milliseconds_to_string($last_data['datos']).'</span>';
-                } else if (is_numeric($last_data['datos'])) {
+                } else if (is_numeric($last_data['datos']) === true) {
                     $data = "<span class='span_treeview'>".remove_right_zeros(number_format($last_data['datos'], $config['graph_precision'], $config['decimal_separator'], $config['thousand_separator'])).'</span>';
                 } else {
                     $data = ui_print_truncate_text(
@@ -264,13 +257,13 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
         }
     }
 
-    if (!empty($last_data['utimestamp'])) {
+    if (empty($last_data['utimestamp']) === false) {
         $last_data_str = $data;
 
-        if ($module['unit'] != '') {
+        if (empty($module['unit']) === false) {
             $data_macro = modules_get_unit_macro($last_data['datos'], $module['unit']);
-            if ($data_macro) {
+            if ($data_macro !== false) {
-                if (is_numeric($data_macro)) {
+                if (is_numeric($data_macro) === true) {
                     $last_data_str = "<span class='span_treeview'>".remove_right_zeros(number_format($data_macro, $config['graph_precision'], $config['decimal_separator'], $config['thousand_separator'])).'</span>';
                 } else {
                     $last_data_str = ui_print_truncate_text(
@@ -285,12 +278,12 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
                 }
             } else {
                 $last_data_str .= '&nbsp;';
-                $last_data_str .= '('.$module['unit'].')';
+                $last_data_str .= '<span class="span_treeview">('.$module['unit'].')</span>';
             }
         }
 
         $last_data_str .= '&nbsp;';
-        $last_data_str .= html_print_image('images/clock2.png', true, ['title' => $last_data['timestamp'], 'width' => '18px', 'class' => 'invert_filter']);
+        $last_data_str .= html_print_image('images/clock.svg', true, ['title' => $last_data['timestamp'], 'style' => 'margin-top: 3px; width: 20px', 'class' => 'invert_filter']);
 
         $is_snapshot = is_snapshot_data($last_data['datos']);
         $is_large_image = is_text_to_black_string($last_data['datos']);
@@ -328,14 +321,17 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
     $row['data'] = $time_elapsed;
     $table->data['tags'] = $row;
 
-    // End of table
+    // Title.
+    echo '<span style="position: relative; top: 12px; left: 12px;" class="subsection_header_title">'.__('Module information').'</span>';
+    // End of table.
     html_print_table($table);
 
     $id_group = agents_get_agent_group($module['id_agente']);
     $group_name = db_get_value('nombre', 'tgrupo', 'id_grupo', $id_group);
     $agent_name = db_get_value('nombre', 'tagente', 'id_agente', $module['id_agente']);
 
-    if ($user_access_node && check_acl($config['id_user'], $id_group, 'AW')) {
+    /*
+        if ($user_access_node && check_acl($config['id_user'], $id_group, 'AW')) {
         // Actions table
         echo '<div class="actions_treeview" style="text-align: right">';
         echo '<a target=_blank href="'.$console_url.'index.php?sec=gagente&sec2=godmode/agentes/configurar_agente&id_agente='.$module['id_agente'].'&tab=module&edit_module=1&id_agent_module='.$module['id_agente_modulo'].$url_hash.'">';
@@ -343,7 +339,7 @@ function treeview_printModuleTable($id_module, $server_data=false, $no_head=fals
         echo '</a>';
 
         echo '</div>';
-    }
+    }*/
 
     // id_module and id_agent hidden
     echo '<div id="ids" class="invisible">';
@@ -571,9 +567,11 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
 
     $table = new StdClass();
     $table->width = '100%';
-    $table->class = 'databox data';
+    $table->class = 'floating_form';
+    $table->id = 'tree_view_agent_detail';
     $table->style = [];
-    $table->style['title'] = 'font-weight: bold;';
+    $table->style['title'] = 'height: 46px; width: 30%; padding-right: 5px; text-align: end;';
+    $table->style['data'] = 'height: 46px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';';
     $table->head = [];
     $table->data = [];
 
@@ -597,7 +595,13 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
         $url = $server_data['server_url'].'/index.php?'.'sec=estado&'.'sec2=operation/agentes/ver_agente&'.'id_agente='.$agent['id_agente'];
 
         if ($grants_on_node && (bool) $user_access_node !== false) {
-            $cellName .= '<a onclick="sendHash(\''.$url.'\')" href="#"><b><span class="bolder pandora_upper" title="'.$agent['nombre'].'">'.$agent['alias'].'</span></b></a>';
+            $cellName .= html_print_anchor(
+                [
+                    'onClick' => 'sendHash(\''.$url.'\')',
+                    'content' => '<span class="bolder pandora_upper" title="'.$agent['nombre'].'">'.$agent['alias'].'</span>',
+                ],
+                true
+            );
         } else {
             $cellName .= '<b><span class="bolder pandora_upper" title="'.$agent['nombre'].'">'.$agent['alias'].'</span></b>';
         }
@@ -654,7 +658,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
     $table->data['description'] = $row;
 
     // Last contact.
-    $last_contact = ui_print_timestamp($agent['ultimo_contacto'], true);
+    $last_contact = ui_print_timestamp($agent['ultimo_contacto'], true, ['class' => 'font_11']);
 
     if ($agent['ultimo_contacto_remoto'] == '01-01-1970 00:00:00') {
         $last_remote_contact = __('Never');
@@ -685,8 +689,8 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
 
     // End of table.
     $agent_table = html_print_table($table, true);
-
+    /*
-    if ($user_access_node && check_acl($config['id_user'], $agent['id_grupo'], 'AW')) {
+        if ($user_access_node && check_acl($config['id_user'], $agent['id_grupo'], 'AW')) {
         $go_to_agent = '<div style="text-align: right">';
 
         if ($agent['id_os'] == CLUSTER_OS_ID) {
@@ -704,40 +708,46 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
         $go_to_agent .= '</div>';
 
         $agent_table .= $go_to_agent;
-    }
+        }
+    */
+    // Print agent data toggle.
+    ui_toggle($agent_table, '<span class="subsection_header_title">'.__('Agent data').'</span>', '', '', false, false, '', 'white-box-content', 'white_table_graph');
 
-    $agent_table .= '<br>';
+    // Advanced data.
-
-    // print agent data toggle
-    ui_toggle($agent_table, __('Agent data'), '', '', false);
-
-    // Advanced data
     $table = new StdClass();
     $table->width = '100%';
+    $table->class = 'floating_form';
+    $table->id = 'tree_view_agent_advanced';
     $table->style = [];
-    $table->style['title'] = 'font-weight: bold;';
+    $table->style['title'] = 'height: 46px; width: 30%; padding-right: 5px; text-align: end;';
+    $table->style['data'] = 'height: 46px; width: 70%; padding-left: 5px; font-family: \'Pandora-Regular\';';
     $table->head = [];
     $table->data = [];
 
-    // Agent version
+    // Agent version.
     $row = [];
     $row['title'] = __('Agent Version');
     $row['data'] = $agent['agent_version'];
     $table->data['agent_version'] = $row;
 
-    // Position Information
+    // Position Information.
     if ($config['activate_gis']) {
         $dataPositionAgent = gis_get_data_last_position_agent($agent['id_agente']);
 
         if ($dataPositionAgent !== false) {
-            $position = '<a href="'.$console_url.'index.php?sec=estado&amp;sec2=operation/agentes/ver_agente&amp;tab=gis&amp;id_agente='.$id_agente.'">';
+            if (empty($dataPositionAgent['description']) === false) {
-            if ($dataPositionAgent['description'] != '') {
+                $positionContent .= $dataPositionAgent['description'];
-                $position .= $dataPositionAgent['description'];
             } else {
-                $position .= $dataPositionAgent['stored_longitude'].', '.$dataPositionAgent['stored_latitude'];
+                $positionContent .= $dataPositionAgent['stored_longitude'].', '.$dataPositionAgent['stored_latitude'];
             }
 
-            $position .= '</a>';
+            $position = html_print_anchor(
+                [
+                    'href'    => $console_url.'index.php?sec=estado&amp;sec2=operation/agentes/ver_agente&amp;tab=gis&amp;id_agente='.$id_agente,
+                    'content' => $positionContent,
+                ],
+                true
+            );
 
             $row = [];
             $row['title'] = __('Position (Long, Lat)');
@@ -746,15 +756,21 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
         }
     }
 
-    // If the url description is setted
+    // If the url description is setted.
-    if ($agent['url_address'] != '') {
+    if (empty($agent['url_address']) === false) {
         $row = [];
         $row['title'] = __('Url address');
-        $row['data'] = '<a href='.$agent['url_address'].'>'.$agent['url_address'].'</a>';
+        $row['data'] = html_print_anchor(
+            [
+                'href'    => $agent['url_address'],
+                'content' => $agent['url_address'],
+            ],
+            true
+        );
         $table->data['agent_address'] = $row;
     }
 
-    // Timezone Offset
+    // Timezone Offset.
     if ($agent['timezone_offset'] != 0) {
         $row = [];
         $row['title'] = __('Timezone Offset');
@@ -789,7 +805,17 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
     $table_advanced = html_print_table($table, true);
     $table_advanced .= '<br>';
 
-    ui_toggle($table_advanced, __('Advanced information'));
+    ui_toggle(
+        $table_advanced,
+        '<span class="subsection_header_title">'.__('Advanced information').'</span>',
+        '',
+        '',
+        true,
+        false,
+        '',
+        'white-box-content',
+        'white_table_graph'
+    );
 
     if ($config['agentaccess']) {
         $access_graph = '<div class="w100p height_130px center">';
@@ -802,7 +828,14 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
 
         ui_toggle(
             $access_graph,
-            __('Agent access rate (24h)')
+            '<span class="subsection_header_title">'.__('Agent access rate (24h)').'</span>',
+            '',
+            '',
+            true,
+            false,
+            '',
+            'white-box-content',
+            'white_table_graph'
         );
     }
 
@@ -821,7 +854,17 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
     );
     $events_graph .= '</div><br>';
 
-    ui_toggle($events_graph, __('Events (24h)'));
+    ui_toggle(
+        $events_graph,
+        '<span class="subsection_header_title">'.__('Events (24h)').'</span>',
+        '',
+        '',
+        true,
+        false,
+        '',
+        'white-box-content',
+        'white_table_graph'
+    );
 
     // Table network interfaces
     $network_interfaces_by_agents = agents_get_network_interfaces([$agent]);

pandora_console/include/javascript/fixed-bottom-box.js

@@ -101,19 +101,13 @@
     self._renderHead = function(head) {
       head = head || self._head;
 
-      var headBody = $("<div></div>");
-      headBody.addClass("fixed-bottom-box-head-body").click(function(event) {
-        self.toggle();
-      });
       var headClose = $("<span></span>");
       headClose.addClass("fixed-bottom-box-head-close").click(function(event) {
         self.close();
       });
 
       self._box.head = $("<div></div>");
-      self._box.head
+      self._box.head.addClass("fixed-bottom-box-head").append(headClose);
-        .addClass("fixed-bottom-box-head")
-        .append(headClose, headBody);
       self._box.append(self._box.head);
 
       self.emit("head-rendered", {
@@ -146,8 +140,9 @@
         self._box
           .addClass("fixed-bottom-box")
           .css("position", "fixed")
-          .css("bottom", "0px")
+          .css("top", "115px")
-          .css("right", "20px");
+          .css("right", "0")
+          .css("width", "30%");
 
         self._renderHead(head);
         self._renderContent(content);

pandora_console/include/javascript/tree/TreeController.js

@@ -77,7 +77,7 @@ var TreeController = {
               .addClass("tree-root")
               .hide()
               .prepend(
-                '<div class="tree-node flex-row-vcenter">' +
+                '<div class="tree-node tree-node-header">' +
                   '<img src="' +
                   (controller.baseURL.length > 0 ? controller.baseURL : "") +
                   'images/pandora.png" />' +
@@ -648,11 +648,11 @@ var TreeController = {
                 element.icon.length > 0
               ) {
                 $content.append(
-                  '<div class="node-icon" style="background-image: url(' +
+                  '<div class="node-icon"><img src="' +
                     (controller.baseURL.length > 0 ? controller.baseURL : "") +
                     "images/" +
                     element.icon +
-                    ');" /> </div>'
+                    '" /></div>'
                 );
               } else if (
                 typeof element.iconHTML != "undefined" &&
@@ -661,7 +661,9 @@ var TreeController = {
                 $content.append(element.iconHTML + " ");
               }
               $content.append(
-                '<div class="node-name">' + element.name + "</div>"
+                '<div class="module-name module-name-parent">' +
+                  element.name +
+                  "</div>"
               );
 
               if (typeof element.edit != "undefined") {
@@ -766,7 +768,11 @@ var TreeController = {
                 }
               }
 
-              $content.append(" " + element.alias);
+              $content.append(
+                '<span class="module-name module-name-alias">' +
+                  element.alias +
+                  "</span>"
+              );
               break;
             case "IPAM_supernets":
               var IPAMSupernetDetailImage = $(
@@ -803,6 +809,8 @@ var TreeController = {
               }
 
               if (element.name !== null) {
+                console.log(element.name);
+                console.log("2");
                 $content.append("&nbsp;&nbsp;&nbsp;" + element.name);
               }
 
@@ -845,6 +853,8 @@ var TreeController = {
               }
 
               if (element.name !== null) {
+                console.log(element.name);
+                console.log("3");
                 $content.append("&nbsp;&nbsp;&nbsp;" + element.name);
               }
 
@@ -900,7 +910,7 @@ var TreeController = {
                 ) {
                   $content.append(" " + element.description);
                 } else {
-                  $content.append(" " + element.name);
+                  $content.append('<span class="">' + element.name + "</span>");
                 }
               } else {
                 $content.remove($node);
@@ -951,7 +961,7 @@ var TreeController = {
                 }
               }
 
-              $content.append(" " + element.name);
+              $content.append('<span class="">' + element.name + "</span>");
               break;
             case "module":
               $content.addClass("module");
@@ -988,6 +998,9 @@ var TreeController = {
                 '<span class="module-value">' + element.value + "</span>"
               );
 
+              var actionButtons = $("<div></div>");
+              actionButtons.addClass("module-action-buttons");
+
               if (
                 typeof element.showGraphs != "undefined" &&
                 element.showGraphs != 0
@@ -1019,7 +1032,8 @@ var TreeController = {
                       }
                     });
 
-                  $content.append(graphImageHistogram);
+                  actionButtons.append(graphImageHistogram);
+                  //$content.append(graphImageHistogram);
                 }
 
                 // Graph pop-up
@@ -1072,7 +1086,8 @@ var TreeController = {
                       }
                     });
 
-                  $content.append($graphImage);
+                  actionButtons.append($graphImage);
+                  //$content.append($graphImage);
                 }
 
                 // Data pop-up
@@ -1110,7 +1125,8 @@ var TreeController = {
                         }
                       });
 
-                    $content.append($dataImage);
+                    actionButtons.append($dataImage);
+                    //$content.append($dataImage);
                   }
                 }
               }
@@ -1145,9 +1161,12 @@ var TreeController = {
                   })
                   .css("cursor", "pointer");
 
-                $content.append($alertsImage);
+                actionButtons.append($alertsImage);
+                //$content.append($alertsImage);
               }
 
+              $content.append(actionButtons);
+
               break;
             case "os":
               if (
@@ -1155,14 +1174,18 @@ var TreeController = {
                 element.icon.length > 0
               ) {
                 $content.append(
-                  '<img src="' +
+                  '<div class="node-icon"><img src="' +
                     (controller.baseURL.length > 0 ? controller.baseURL : "") +
                     "images/" +
                     element.icon +
-                    '" /> '
+                    '" /></div>'
                 );
               }
-              $content.append(element.name);
+              $content.append(
+                '<span class="module-name module-name-parent">' +
+                  element.name +
+                  "</span>"
+              );
               break;
             case "tag":
               if (
@@ -1183,7 +1206,11 @@ var TreeController = {
                     'images/tag_red.png" /> '
                 );
               }
-              $content.append(element.name);
+              $content.append(
+                '<span class="module-name module-name-parent">' +
+                  element.name +
+                  "</span>"
+              );
               break;
             case "services":
               // Status image
@@ -1196,10 +1223,18 @@ var TreeController = {
 
                 $content.append($statusImage);
               }
-              $content.append(element.name);
+              $content.append(
+                '<span class="module-name module-name-parent">' +
+                  element.name +
+                  "</span>"
+              );
               break;
             default:
-              $content.append(element.name);
+              $content.append(
+                '<span class="module-name module-name-parent">' +
+                  element.name +
+                  "</span>"
+              );
               break;
           }
 
@@ -1232,6 +1267,8 @@ var TreeController = {
                         if (error) {
                           // console.error(error);
                         } else {
+                          console.log(element.name);
+                          console.log("1");
                           controller.detailRecipient
                             .render(element.name, data)
                             .open();

pandora_console/include/styles/fixed-bottom-box.css

@@ -1,6 +1,7 @@
 div.fixed-bottom-box {
   background: #fff;
-
+  height: -webkit-fill-available;
+  height: -moz-fill-available;
   border-radius: 10px 10px 0 0;
   -moz-border-radius: 10px 10px 0 0;
   -webkit-border-radius: 10px 10px 0 0;
@@ -11,7 +12,7 @@ div.fixed-bottom-box {
 
 /* Overrides */
 .left_align {
-  border: 1px solid #e1e1e1;
+  /*border: 1px solid #e1e1e1;*/
 }
 .white_table_graph_header {
   border-top-left-radius: 0px;
@@ -24,17 +25,20 @@ div.fixed-bottom-box {
 /* Overrides end */
 
 div.fixed-bottom-box > div.fixed-bottom-box-head {
+  width: 20px !important;
   height: 30px;
   line-height: 30px;
   vertical-align: middle;
-  background-color: #3f3f3f;
+  position: absolute;
-
+  top: 10px;
-  border-radius: 10px 10px 0 0;
+  right: 20px;
-  -moz-border-radius: 10px 10px 0 0;
+  /* background-color: #3f3f3f; */
-  -webkit-border-radius: 10px 10px 0 0;
+  /* border-radius: 10px 10px 0 0; */
-  -o-border-radius: 10px 10px 0 0;
+  /* -moz-border-radius: 10px 10px 0 0; */
-  -ms-border-radius: 10px 10px 0 0;
+  /* -webkit-border-radius: 10px 10px 0 0; */
-  -khtml-border-radius: 10px 10px 0 0;
+  /* -o-border-radius: 10px 10px 0 0; */
+  /* -ms-border-radius: 10px 10px 0 0; */
+  /* -khtml-border-radius: 10px 10px 0 0; */
 }
 
 div.fixed-bottom-box
@@ -51,9 +55,9 @@ div.fixed-bottom-box
 div.fixed-bottom-box
   > div.fixed-bottom-box-head
   > span.fixed-bottom-box-head-close {
-  height: 30px;
+  height: 20px;
-  width: 30px;
+  width: 20px;
-  background-image: url(../../images/input_cross.png);
+  background-image: url(../../images/close@svg.svg);
   background-repeat: no-repeat;
   background-position: center;
   float: right;
@@ -63,6 +67,7 @@ div.fixed-bottom-box
   > div.fixed-bottom-box-head
   > div.fixed-bottom-box-head-body:hover {
   cursor: pointer;
+  /*
   background-color: #747474;
 
   border-radius: inherit;
@@ -71,12 +76,14 @@ div.fixed-bottom-box
   -o-border-radius: inherit;
   -ms-border-radius: inherit;
   -khtml-border-radius: inherit;
+  */
 }
 
 div.fixed-bottom-box
   > div.fixed-bottom-box-head
   > span.fixed-bottom-box-head-close:hover {
   cursor: pointer;
+  /*
   background-color: #747474;
 
   border-radius: 0 10px 0 0;
@@ -85,6 +92,7 @@ div.fixed-bottom-box
   -o-border-radius: 0 10px 0 0;
   -ms-border-radius: 0 10px 0 0;
   -khtml-border-radius: 0 10px 0 0;
+  */
 }
 
 div.fixed-bottom-box.fixed-bottom-box-hided
@@ -106,5 +114,10 @@ div.fixed-bottom-box.fixed-bottom-box-opened
 div.fixed-bottom-box > div.fixed-bottom-box-content {
   vertical-align: top;
   text-align: center;
-  overflow: auto;
+  /*overflow: auto;*/
+  overflow-x: hidden;
+  box-sizing: border-box;
+  width: 100% !important;
+  height: 100% !important;
+  border-left: 1px solid #aeaeae;
 }

pandora_console/include/styles/tree.css

@@ -1,9 +1,24 @@
 .tree-root {
-  border: 1px solid red;
   margin-top: 0px;
   margin-bottom: 0px;
 }
 
+.tree-node.tree-node-header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  width: calc(100% - 25px);
+  border: 1px solid #aeaeae;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.tree-node .module-action-buttons img {
+  width: 20px;
+  float: right;
+}
+
 .tree-node img {
   padding: 10px;
 }
@@ -30,11 +45,11 @@
 
 .tree-node {
   white-space: nowrap;
-
+  /*
   background-image: url(../../images/tree/branch.png);
   background-position: 0px 0px;
   background-repeat: repeat-y;
-
+*/
   min-height: 26px;
 }
 
@@ -52,7 +67,7 @@ div.tree-node span {
 .node-content {
   border: 1px solid #aeaeae;
   border-radius: 8px;
-  width: calc(100% - 17px);
+  width: calc(100% - 40px);
   box-sizing: border-box;
   height: 40px;
   /*height: 26px;*/
@@ -151,9 +166,9 @@ div.tree-node span {
   border-radius: 0;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
-  height: 39px;
+  height: 38px;
   position: relative;
-  top: -2px;
+  top: -1px;
 }
 .tree-node > .node-content > .module-status.status_small_balls {
   top: -8px;
@@ -162,18 +177,38 @@ div.tree-node span {
 .tree-node > .node-content > .module-name {
   margin: 0 0 0 1em;
   /*width: 250px;*/
-  width: 60%;
+  width: 55%;
   display: inline-block;
+  position: relative;
   font-weight: bold;
 }
 
+.tree-node > .node-content > .module-name-alias {
+  font-size: 12pt;
+  font-weight: normal;
+  top: 8px;
+}
+
+.tree-node > .node-content > .module-name-parent {
+  font-size: 12pt;
+  margin-left: 0.5em;
+  top: -14px;
+}
+
 .tree-node > .node-content > .module-value {
   /*width: 120px;*/
-  width: 130px;
+  /*width: 130px;*/
   display: inline-block;
   text-align: right;
   margin: 8px 1em;
+  /*float: right;*/
+}
+
+.tree-node > .node-content > .module-action-buttons {
   float: right;
+  min-width: 105px;
+  position: relative;
+  /* top: 5px; */
 }
 
 .tree-node > .node-content > img.module-server-type,
@@ -213,6 +248,7 @@ div#tree-controller-recipient {
   width: 65%;
   /* width: 98%; */
   margin-top: 10px;
+  margin-left: 10px;
 }
 
 .tree-controller-recipient {
@@ -223,7 +259,7 @@ div#tree-controller-recipient {
 }
 
 .tree-node > .node-content > div + div:not(.tree-node-counters) {
-  margin-left: 3px;
+  /*margin-left: 3px;*/
 }
 
 .tree-node .disabled {