Datatables. Treeview graph meta

pandora_console/include/functions_graph.php

@@ -2566,7 +2566,6 @@ function graphic_agentaccess(
     }
 
     $options = [
-        'width'  => 350,
         'height' => 125,
         'colors' => $colors,
         'legend' => ['display' => false],
@@ -4809,20 +4808,6 @@ function graph_nodata_image($options)
 {
     global $config;
 
-    $height = 200;
-    if (isset($options['height']) === true
-        && empty($options['height']) === false
-    ) {
-        $height = $options['height'];
-    }
-
-    $width_style = 'width: 200px';
-    if (isset($options['width']) === true
-        && empty($options['width']) === false
-    ) {
-        $width_style = 'width:'.$options['width'].'px';
-    }
-
     if ($options['base64'] === true) {
         $dataImg = file_get_contents(
             $config['homedir'].'/images/image_problem_area_150.png'
@@ -4835,7 +4820,7 @@ function graph_nodata_image($options)
         true,
         [
             'title' => __('No data'),
-            'style' => $width_style,
+            'style' => 'width: 200px;',
         ]
     );
 }

pandora_console/include/functions_treeview.php

@@ -921,7 +921,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
         false,
         '',
         'white-box-content mrgn_top_0 mrgn_btn_0px border-bottom-gray',
-        'white_table_flex'
+        'white_table_flex margin-bottom-20'
     );
 
     if (empty($server_data) === false && is_metaconsole() === true) {
@@ -951,7 +951,7 @@ function treeview_printTable($id_agente, $server_data=[], $no_head=false)
                     type: 'hidden',
                     id: 'graph-counter',
                     value: 1
-                }).appendTo('#container');
+                }).appendTo('body');
 
                 
                 if ($('#graph-counter').val() == 1) {

pandora_console/include/functions_ui.php

@@ -3760,7 +3760,7 @@ function ui_print_datatable(array $parameters)
 
     // Base table.
     $table = '<table id="'.$table_id.'" ';
-    $table .= 'class="'.$parameters['class'].'"';
+    $table .= 'class="'.$parameters['class'].' invisible"';
     $table .= 'style="'.$parameters['style'].'">';
     $table .= '<thead><tr class="datatables_thead_tr">';
 
@@ -4027,6 +4027,7 @@ function ui_print_datatable(array $parameters)
                 $(".pagination-child-div").append($("#'.$table_id.'_wrapper > .dataTables_length"));
                 $(".pagination-child-div").append($("#'.$table_id.'_wrapper > .dt-buttons"));
                 $(".pagination-child-div").append($("#'.$table_id.'_wrapper > .dataTables_filter"));
+                $("div.spinner-fixed").hide();
             },
             columns: [';
 
@@ -4070,6 +4071,15 @@ function ui_print_datatable(array $parameters)
     }
 
     $js .= '});';
+    $js .= '
+    $(function() {
+        $(document).on("preInit.dt", function (ev, settings) {
+            // $("table#'.$table_id.'").hide();
+            $("div.dataTables_length").hide();
+            $("div.dt-buttons").hide();
+        });
+    });
+    ';
 
     $js .= '</script>';
 
@@ -4078,9 +4088,11 @@ function ui_print_datatable(array $parameters)
     $info_msg_arr['message'] = $emptyTable;
     $info_msg_arr['div_class'] = 'info_box_container invisible_important datatable-msg-info-'.$table_id;
 
+    $spinner = '<div class="spinner-fixed"><span></span><span></span><span></span><span></span></div>';
+
     $info_msg = '<div>'.ui_print_info_message($info_msg_arr).'</div>';
     $err_msg = '<div id="error-'.$table_id.'"></div>';
-    $output = $info_msg.$err_msg.$filter.$extra.$table.$js;
+    $output = $info_msg.$err_msg.$filter.$extra.$spinner.$table.$js;
     if (is_ajax() === false) {
         ui_require_css_file('datatables.min', 'include/styles/js/');
         ui_require_css_file('tables');

pandora_console/include/styles/pandora.css

@@ -11751,3 +11751,58 @@ div.relative > div > div#ui-datepicker-div {
 span.help_icon_15px > img {
   height: 15px !important;
 }
+
+/* ==== Spinner ==== */
+.spinner-fixed {
+  position: fixed;
+  left: 50%;
+  bottom: 50%;
+  z-index: 1;
+  width: 100px;
+  height: 100px;
+  border-radius: 100%;
+  background: linear-gradient(#82b92e, #c1ccdc);
+  animation: animate 1.2s linear infinite;
+  margin: auto;
+  margin-bottom: 40px;
+}
+.spinner-fixed span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background: linear-gradient(#82b92e, #c1ccdc);
+}
+.spinner-fixed span:nth-child(1) {
+  filter: blur(4px);
+}
+.spinner-fixed span:nth-child(2) {
+  filter: blur(8px);
+}
+.spinner-fixed span:nth-child(3) {
+  filter: blur(12px);
+}
+.spinner-fixed span:nth-child(4) {
+  filter: blur(16px);
+}
+.spinner-fixed:after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  /* background: transparent; */
+  background: #f1f1f1;
+  border: solid #fff 10px;
+  border-radius: 50%;
+}
+
+@keyframes animate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

pandora_console/operation/tree.php

@@ -168,6 +168,10 @@ if (!$strict_acl) {
     $header_title = $header_title.' » '.$header_sub_title;
 }
 
+if (is_metaconsole() === true) {
+    $tabs = [];
+}
+
 ui_print_standard_header(
     $header_title,
     'images/extensions.png',