From 938e8cd777d47679cb8dc77768853db668a44a93 Mon Sep 17 00:00:00 2001
From: Pablo Aragon <pablo.aragon@pandorafms.com>
Date: Wed, 15 Mar 2023 11:30:22 +0100
Subject: [PATCH] Dashboards widgets

---
 pandora_console/include/ajax/module.php       | 34 +++++++++++++++++--
 pandora_console/include/functions_ui.php      | 26 +++++++++++---
 .../Dashboard/Widgets/AvgSumMaxMinModule.php  | 22 ++++++------
 .../lib/Dashboard/Widgets/ModulesByStatus.php | 28 +++++++++++++--
 .../lib/Dashboard/Widgets/alerts_fired.php    | 11 ++++--
 .../lib/Dashboard/Widgets/module_icon.php     | 22 ++++++------
 .../lib/Dashboard/Widgets/module_status.php   | 20 +++++------
 .../lib/Dashboard/Widgets/module_value.php    | 22 ++++++------
 .../lib/Dashboard/Widgets/os_quick_report.php | 10 +++---
 .../lib/Dashboard/Widgets/sla_percent.php     | 22 ++++++------
 pandora_console/include/styles/tables.css     |  4 +++
 11 files changed, 151 insertions(+), 70 deletions(-)

diff --git a/pandora_console/include/ajax/module.php b/pandora_console/include/ajax/module.php
index 5b34b6860c..94e573c4bc 100755
--- a/pandora_console/include/ajax/module.php
+++ b/pandora_console/include/ajax/module.php
@@ -1750,7 +1750,9 @@ if (check_login()) {
                 INNER JOIN tagente
                     ON tagente_modulo.id_agente = tagente.id_agente 
                 INNER JOIN tagente_estado
-                    ON tagente_estado.id_agente_modulo = tagente_modulo.id_agente_modulo'
+                    ON tagente_estado.id_agente_modulo = tagente_modulo.id_agente_modulo
+                WHERE %s',
+                $where
             );
             $recordsTotal = db_get_value_sql($sql_count);
 
@@ -1795,6 +1797,32 @@ if (check_login()) {
                 }
             }
 
+            if (in_array(0, $servers_ids) === true) {
+                $sql = sprintf(
+                    'SELECT
+                    tagente_modulo.nombre,
+                    tagente.alias,
+                    tagente.id_agente,
+                    tagente_estado.last_status_change,
+                    tagente_estado.estado
+                    FROM tagente_modulo
+                    INNER JOIN tagente
+                        ON tagente_modulo.id_agente = tagente.id_agente 
+                    INNER JOIN tagente_estado
+                        ON tagente_estado.id_agente_modulo = tagente_modulo.id_agente_modulo
+                    WHERE %s',
+                    $where
+                );
+
+                $res_sql = db_get_all_rows_sql($sql);
+
+                foreach ($res_sql as $row_sql) {
+                    $row_sql['server_name'] = __('Metaconsole');
+                    $row_sql['server_url'] = $config['homeurl'];
+                    array_push($data, $row_sql);
+                }
+            }
+
             // Drop temporary table if exist.
             db_process_sql('DROP TEMPORARY TABLE IF EXISTS temp_modules_status;');
 
@@ -1852,7 +1880,9 @@ if (check_login()) {
 
                 $sql_count = sprintf(
                     'SELECT COUNT(*) AS "total"
-                    FROM temp_modules_status'
+                    FROM temp_modules_status
+                    WHERE %s',
+                    $where
                 );
 
                 $recordsTotal = db_get_value_sql($sql_count);
diff --git a/pandora_console/include/functions_ui.php b/pandora_console/include/functions_ui.php
index 1c632d6f9e..89dc45d586 100755
--- a/pandora_console/include/functions_ui.php
+++ b/pandora_console/include/functions_ui.php
@@ -723,7 +723,23 @@ function ui_print_group_icon($id_group, $return=false, $path='', $style='', $lin
         $output .= '<span title="'.groups_get_name($id_group, true).'">'.groups_get_name($id_group, true).'&nbsp;</span>';
     } else {
         if (empty($icon) === true) {
-            $output .= '<span title="'.groups_get_name($id_group, true).'">&nbsp;&nbsp;</span>';
+            $output .= '<span title="'.groups_get_name($id_group, true).'">';
+            $output .= '</span>';
+            $output .= html_print_image(
+                'images/unknown@groups.svg',
+                true,
+                [
+                    'style' => $style,
+                    'class' => 'main_menu_icon '.$class,
+                    'alt'   => groups_get_name($id_group, true),
+                    'title' => groups_get_name($id_group, true),
+                ],
+                false,
+                false,
+                false,
+                true
+            );
+            $output .= '</span>';
         } else {
             if (empty($class) === true) {
                 $class = 'bot';
@@ -3879,8 +3895,8 @@ function ui_print_datatable(array $parameters)
     }
 
     $js .= 'if ($("#'.$table_id.' tr td").length == 1) {
-                $("div[id^=info_box_]").show();
-                $("div[id^=info_box_]").removeClass(\'invisible_important\');
+                $(".datatable-msg-info-'.$table_id.'").show();
+                $(".datatable-msg-info-'.$table_id.'").removeClass(\'invisible_important\');
                 $("table#'.$table_id.'").hide();
                 $("div.dataTables_paginate").hide();
                 $("div.dataTables_info").hide();
@@ -3891,7 +3907,7 @@ function ui_print_datatable(array $parameters)
                     $(".dataTables_paginate.paging_simple_numbers").show()
                 }
             } else {
-                $("div[id^=info_box_]").hide();
+                $(".datatable-msg-info-'.$table_id.'").hide();
                 $("table#'.$table_id.'").show();
                 $("div.dataTables_paginate").show();
                 $("div.dataTables_info").show();
@@ -4028,7 +4044,7 @@ function ui_print_datatable(array $parameters)
     // Order.
     $info_msg_arr = [];
     $info_msg_arr['message'] = $emptyTable;
-    $info_msg_arr['div_class'] = 'info_box_container invisible_important';
+    $info_msg_arr['div_class'] = 'info_box_container invisible_important datatable-msg-info-'.$table_id;
 
     $info_msg = '<div>'.ui_print_info_message($info_msg_arr).'</div>';
     $err_msg = '<div id="error-'.$table_id.'"></div>';
diff --git a/pandora_console/include/lib/Dashboard/Widgets/AvgSumMaxMinModule.php b/pandora_console/include/lib/Dashboard/Widgets/AvgSumMaxMinModule.php
index cf7edb70c6..033761afdf 100644
--- a/pandora_console/include/lib/Dashboard/Widgets/AvgSumMaxMinModule.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/AvgSumMaxMinModule.php
@@ -316,8 +316,8 @@ class AvgSumMaxMinModule extends Widget
             $values['unit'] = $decoder['unit'];
         }
 
-        if (isset($decoder['layout']) === true) {
-            $values['layout'] = $decoder['layout'];
+        if (isset($decoder['horizontal']) === true) {
+            $values['horizontal'] = $decoder['horizontal'];
         }
 
         return $values;
@@ -505,14 +505,14 @@ class AvgSumMaxMinModule extends Widget
             ],
         ];
 
-        // Layout.
+        // Horizontal.
         $inputs[] = [
-            'label'     => __('Layout').ui_print_help_tip(__('Off: vertical. On: horizontal'), true),
+            'label'     => __('Horizontal').ui_print_help_tip(__('If not, layout is vertical'), true),
             'arguments' => [
                 'wrapper' => 'div',
-                'name'    => 'layout',
+                'name'    => 'horizontal',
                 'type'    => 'switch',
-                'value'   => $values['layout'],
+                'value'   => $values['horizontal'],
                 'return'  => true,
             ],
         ];
@@ -541,7 +541,7 @@ class AvgSumMaxMinModule extends Widget
         $values['sizeLabel'] = \get_parameter_switch('sizeLabel');
         $values['text_color'] = \get_parameter('text_color', 0);
         $values['unit'] = \get_parameter_switch('unit');
-        $values['layout'] = \get_parameter_switch('layout');
+        $values['horizontal'] = \get_parameter_switch('horizontal');
 
         return $values;
     }
@@ -643,8 +643,8 @@ class AvgSumMaxMinModule extends Widget
         $output .= '<div class="container-center" id="container-'.$uuid.'">';
 
         $orientation = '';
-        if ((int) $this->values['layout'] === 1) {
-            $orientation = 'flex';
+        if ((int) $this->values['horizontal'] === 1) {
+            $orientation = 'flex aligni_center';
         } else {
             $orientation = 'grid';
         }
@@ -653,7 +653,7 @@ class AvgSumMaxMinModule extends Widget
         $output .= '<div class="'.$orientation.'" id="general-'.$uuid.'">';
 
         // Div value.
-        $output .= '<div class="pdd_l_15px pdd_r_15px mrgn_btn_20px" style="font-size:'.$sizeValue.'px;'.$text_color.'">';
+        $output .= '<div class="pdd_l_15px pdd_r_15px mrgn_btn_20px" style="line-height: '.$sizeValue.'px; font-size:'.$sizeValue.'px;'.$text_color.'">';
 
         if (is_numeric($data) === true) {
             $dataDatos = remove_right_zeros(
@@ -679,7 +679,7 @@ class AvgSumMaxMinModule extends Widget
 
         if (empty($label) === false) {
             // Div Label.
-            $output .= '<div class="pdd_l_15px pdd_r_15px" style="font-size:'.$sizeLabel.'px;'.$text_color.'">'.$label.'</div>';
+            $output .= '<div class="pdd_l_15px pdd_r_15px" style="line-height: '.$sizeLabel.'px; font-size:'.$sizeLabel.'px;'.$text_color.'">'.$label.'</div>';
         }
 
         $output .= '</div>';
diff --git a/pandora_console/include/lib/Dashboard/Widgets/ModulesByStatus.php b/pandora_console/include/lib/Dashboard/Widgets/ModulesByStatus.php
index 21fa53d21c..2944663135 100644
--- a/pandora_console/include/lib/Dashboard/Widgets/ModulesByStatus.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/ModulesByStatus.php
@@ -179,7 +179,7 @@ class ModulesByStatus extends Widget
         // This forces at least a first configuration.
         // This forces at least a first configuration.
         $this->configurationRequired = false;
-        if (empty($this->values['status']) === true) {
+        if (empty($this->values['status']) === true && $this->values['status'] !== '0') {
             $this->configurationRequired = true;
         }
 
@@ -311,6 +311,8 @@ class ModulesByStatus extends Widget
                 $nodes_fields[$server['id']] = $server['server_name'];
             }
 
+            $nodes_fields[0] = __('Metaconsola');
+
             $nodes_selected = explode(',', $values['nodes']);
 
             (isset($values['nodes']) === false) ? $nodes_selected = $servers_ids : '';
@@ -369,6 +371,8 @@ class ModulesByStatus extends Widget
     {
         $this->size = parent::getSize();
 
+        global $config;
+
         $output = '';
 
         if (is_metaconsole() === true) {
@@ -413,7 +417,7 @@ class ModulesByStatus extends Widget
                     [
                         'id'                 => $tableId,
                         'class'              => 'info_table align-left-important',
-                        'style'              => 'width: 100%',
+                        'style'              => 'width: 99%',
                         'columns'            => $columns,
                         'column_names'       => $column_names,
                         'ajax_url'           => 'include/ajax/module',
@@ -430,6 +434,26 @@ class ModulesByStatus extends Widget
                             'direction' => 'desc',
                         ],
                         'csv'                => 0,
+                        'pagination_options' => [
+                            [
+                                5,
+                                10,
+                                25,
+                                100,
+                                200,
+                                500,
+                                1000,
+                            ],
+                            [
+                                5,
+                                10,
+                                25,
+                                100,
+                                200,
+                                500,
+                                1000,
+                            ],
+                        ],
                     ]
                 );
             } catch (\Exception $e) {
diff --git a/pandora_console/include/lib/Dashboard/Widgets/alerts_fired.php b/pandora_console/include/lib/Dashboard/Widgets/alerts_fired.php
index 68107388b4..48eeefac75 100755
--- a/pandora_console/include/lib/Dashboard/Widgets/alerts_fired.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/alerts_fired.php
@@ -284,11 +284,16 @@ class AlertsFiredWidget extends Widget
 
         if (isset($groups) === true && is_array($groups) === true) {
             $table = new \StdClass();
-            $table->class = 'databox data';
+            $table->class = 'databox data centered';
             $table->cellspacing = '0';
-            $table->width = '90%';
+            $table->width = '100%';
             $table->data = [];
             $table->size = [];
+            $table->style = [];
+            $table->style[0] = 'text-align: left;';
+            $table->style[1] = 'text-align: left;';
+            $table->style[2] = 'text-align: left;';
+            $table->style[3] = 'text-align: left;';
 
             $url = $config['homeurl'];
             $url .= 'index.php?sec=estado&sec2=operation/agentes/alerts_status';
@@ -335,7 +340,7 @@ class AlertsFiredWidget extends Widget
             if ($flag === true) {
                 $height = (count($table->data) * 30);
                 $style = 'min-width:300px; min-height:'.$height.'px;';
-                $output .= '<div class="container-center" style="'.$style.'">';
+                $output .= '<div class="" style="'.$style.'">';
                 $output .= html_print_table($table, true);
                 $output .= '</div>';
             } else {
diff --git a/pandora_console/include/lib/Dashboard/Widgets/module_icon.php b/pandora_console/include/lib/Dashboard/Widgets/module_icon.php
index 316e8813b3..6790d70616 100644
--- a/pandora_console/include/lib/Dashboard/Widgets/module_icon.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/module_icon.php
@@ -305,8 +305,8 @@ class ModuleIconWidget extends Widget
             $values['imageSrc'] = $decoder['imageSrc'];
         }
 
-        if (isset($decoder['layout']) === true) {
-            $values['layout'] = $decoder['layout'];
+        if (isset($decoder['horizontal']) === true) {
+            $values['horizontal'] = $decoder['horizontal'];
         }
 
         return $values;
@@ -486,14 +486,14 @@ class ModuleIconWidget extends Widget
             ],
         ];
 
-        // Layout.
+        // Horizontal.
         $inputs[] = [
-            'label'     => __('Layout').ui_print_help_tip(__('Off: vertical. On: horizontal'), true),
+            'label'     => __('Horizontal').ui_print_help_tip(__('If not, layout is vertical'), true),
             'arguments' => [
                 'wrapper' => 'div',
-                'name'    => 'layout',
+                'name'    => 'horizontal',
                 'type'    => 'switch',
-                'value'   => $values['layout'],
+                'value'   => $values['horizontal'],
                 'return'  => true,
             ],
         ];
@@ -520,7 +520,7 @@ class ModuleIconWidget extends Widget
         $values['sizeValue'] = \get_parameter('sizeValue', 0);
         $values['sizeLabel'] = \get_parameter_switch('sizeLabel');
         $values['sizeIcon'] = \get_parameter_switch('sizeIcon');
-        $values['layout'] = \get_parameter_switch('layout');
+        $values['horizontal'] = \get_parameter_switch('horizontal');
 
         return $values;
     }
@@ -563,7 +563,7 @@ class ModuleIconWidget extends Widget
         $output .= '<div class="container-center" id="container-'.$uuid.'">';
 
         $orientation = '';
-        if ((int) $this->values['layout'] === 1) {
+        if ((int) $this->values['horizontal'] === 1) {
             $orientation = 'flex aligni_center';
         } else {
             $orientation = 'grid';
@@ -596,7 +596,7 @@ class ModuleIconWidget extends Widget
         // Div image.
         $style_icon = 'flex: 0 1 '.$sizeIcon.'px;';
 
-        $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 0 1 '.$sizeIcon.'px;">';
+        $output .= '<div class="pdd_l_15px pdd_r_15px mrgn_btn_25px" style="flex: 0 1 '.$sizeIcon.'px; height: '.$sizeIcon.'px;">';
         $output .= html_print_image(
             'images/console/icons/'.$icon.$color_icon.'.png',
             true,
@@ -604,7 +604,7 @@ class ModuleIconWidget extends Widget
         );
         $output .= '</div>';
         // Div value.
-        $output .= '<div class="mrgn_btn_15px" style="flex: 0 1 10px; font-size:'.$sizeValue.'px;">';
+        $output .= '<div class="mrgn_btn_15px" style="flex: 0 1 10px; line-height: '.$sizeValue.'px; font-size:'.$sizeValue.'px;">';
         $output .= remove_right_zeros(
             number_format($data_module, $config['graph_precision'], $config['decimal_separator'], $config['thousand_separator'])
         ).$unit;
@@ -612,7 +612,7 @@ class ModuleIconWidget extends Widget
 
         if (empty($label) === false) {
             // Div Label.
-            $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 1; font-size:'.$sizeLabel.'px;">'.$label.'</div>';
+            $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 1; line-height: '.$sizeLabel.'px; font-size:'.$sizeLabel.'px;">'.$label.'</div>';
         }
 
         $output .= '</div>';
diff --git a/pandora_console/include/lib/Dashboard/Widgets/module_status.php b/pandora_console/include/lib/Dashboard/Widgets/module_status.php
index f8b7dda933..a9e72fd528 100644
--- a/pandora_console/include/lib/Dashboard/Widgets/module_status.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/module_status.php
@@ -300,8 +300,8 @@ class ModuleStatusWidget extends Widget
             $values['imageSrc'] = $decoder['imageSrc'];
         }
 
-        if (isset($decoder['layout']) === true) {
-            $values['layout'] = $decoder['layout'];
+        if (isset($decoder['horizontal']) === true) {
+            $values['horizontal'] = $decoder['horizontal'];
         }
 
         return $values;
@@ -465,14 +465,14 @@ class ModuleStatusWidget extends Widget
             ],
         ];
 
-        // Layout.
+        // Horizontal.
         $inputs[] = [
-            'label'     => __('Layout').ui_print_help_tip(__('Off: vertical. On: horizontal'), true),
+            'label'     => __('Horizontal').ui_print_help_tip(__('If not, layout is vertical'), true),
             'arguments' => [
                 'wrapper' => 'div',
-                'name'    => 'layout',
+                'name'    => 'horizontal',
                 'type'    => 'switch',
-                'value'   => $values['layout'],
+                'value'   => $values['horizontal'],
                 'return'  => true,
             ],
         ];
@@ -499,7 +499,7 @@ class ModuleStatusWidget extends Widget
         $values['sizeValue'] = \get_parameter('sizeValue', 0);
         $values['sizeLabel'] = \get_parameter_switch('sizeLabel');
         $values['sizeIcon'] = \get_parameter_switch('sizeIcon');
-        $values['layout'] = \get_parameter_switch('layout');
+        $values['horizontal'] = \get_parameter_switch('horizontal');
 
         return $values;
     }
@@ -560,7 +560,7 @@ class ModuleStatusWidget extends Widget
         $output .= '<div class="container-center" id="container-'.$uuid.'">';
 
         $orientation = '';
-        if ((int) $this->values['layout'] === 1) {
+        if ((int) $this->values['horizontal'] === 1) {
             $orientation = 'flex aligni_center';
         } else {
             $orientation = 'grid';
@@ -570,7 +570,7 @@ class ModuleStatusWidget extends Widget
         $output .= '<div class="'.$orientation.'" id="general-'.$uuid.'">';
 
         // Div image.
-        $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 0 1 '.$sizeIcon.'px;">';
+        $output .= '<div class="pdd_l_15px pdd_r_15px mrgn_btn_25px" style="flex: 0 1 '.$sizeIcon.'px; height: '.$sizeIcon.'px;">';
         $output .= html_print_image(
             'images/console/icons/'.$icon,
             true,
@@ -580,7 +580,7 @@ class ModuleStatusWidget extends Widget
 
         if (empty($label) === false) {
             // Div Label.
-            $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 1 1 '.$sizeLabel.'px; font-size:'.$sizeLabel.'px;">'.$label.'</div>';
+            $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 1 1 '.$sizeLabel.'px; line-height: '.$sizeLabel.'px; font-size:'.$sizeLabel.'px;">'.$label.'</div>';
         }
 
         $output .= '</div>';
diff --git a/pandora_console/include/lib/Dashboard/Widgets/module_value.php b/pandora_console/include/lib/Dashboard/Widgets/module_value.php
index 818db36b92..83521f6b25 100644
--- a/pandora_console/include/lib/Dashboard/Widgets/module_value.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/module_value.php
@@ -284,8 +284,8 @@ class ModuleValueWidget extends Widget
             $values['sizeLabel'] = $decoder['sizeLabel'];
         }
 
-        if (isset($decoder['layout']) === true) {
-            $values['layout'] = $decoder['layout'];
+        if (isset($decoder['horizontal']) === true) {
+            $values['horizontal'] = $decoder['horizontal'];
         }
 
         return $values;
@@ -389,14 +389,14 @@ class ModuleValueWidget extends Widget
             ],
         ];
 
-        // Layout.
+        // Horizontal.
         $inputs[] = [
-            'label'     => __('Layout').ui_print_help_tip(__('Off: vertical. On: horizontal'), true),
+            'label'     => __('Horizontal').ui_print_help_tip(__('If not, layout is vertical'), true),
             'arguments' => [
                 'wrapper' => 'div',
-                'name'    => 'layout',
+                'name'    => 'horizontal',
                 'type'    => 'switch',
-                'value'   => $values['layout'],
+                'value'   => $values['horizontal'],
                 'return'  => true,
             ],
         ];
@@ -421,7 +421,7 @@ class ModuleValueWidget extends Widget
         $values['moduleId'] = \get_parameter('moduleId', 0);
         $values['sizeValue'] = \get_parameter('sizeValue', 0);
         $values['sizeLabel'] = \get_parameter_switch('sizeLabel');
-        $values['layout'] = \get_parameter_switch('layout');
+        $values['horizontal'] = \get_parameter_switch('horizontal');
 
         return $values;
     }
@@ -471,8 +471,8 @@ class ModuleValueWidget extends Widget
         $output .= '<div class="container-center" id="container-'.$uuid.'">';
 
         $orientation = '';
-        if ((int) $this->values['layout'] === 1) {
-            $orientation = 'flex';
+        if ((int) $this->values['horizontal'] === 1) {
+            $orientation = 'flex aligni_center';
         } else {
             $orientation = 'grid';
         }
@@ -481,7 +481,7 @@ class ModuleValueWidget extends Widget
         $output .= '<div class="'.$orientation.'" id="general-'.$uuid.'">';
 
         // Div value.
-        $output .= '<div class="pdd_l_15px pdd_r_15px mrgn_btn_20px" style="flex: 0 1 '.$sizeValue.'px; font-size:'.$sizeValue.'px; color: '.$color.'">';
+        $output .= '<div class="pdd_l_15px pdd_r_15px mrgn_btn_20px" style="flex: 0 1 '.$sizeValue.'px; line-height: '.$sizeValue.'px; font-size:'.$sizeValue.'px; color: '.$color.'">';
 
         if (is_numeric($data_module) === true) {
             $dataDatos = remove_right_zeros(
@@ -502,7 +502,7 @@ class ModuleValueWidget extends Widget
 
         if (empty($label) === false) {
             // Div Label.
-            $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 1 1 '.$sizeLabel.'px; font-size:'.$sizeLabel.'px;">'.$label.'</div>';
+            $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 1 1 '.$sizeLabel.'px; line-height: '.$sizeLabel.'px; font-size:'.$sizeLabel.'px;">'.$label.'</div>';
         }
 
         $output .= '</div>';
diff --git a/pandora_console/include/lib/Dashboard/Widgets/os_quick_report.php b/pandora_console/include/lib/Dashboard/Widgets/os_quick_report.php
index f775ec7444..cd500e2972 100644
--- a/pandora_console/include/lib/Dashboard/Widgets/os_quick_report.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/os_quick_report.php
@@ -300,18 +300,20 @@ class OsQuickReportWidget extends Widget
             $table->style[1] = 'background-color: '.$values['background'].';';
             $table->style[2] = 'background-color: '.$values['background'].'; font-size: 1.5em; font-weight: bolder;';
             $table->style[3] = 'background-color: '.$values['background'].'; font-size: 1.5em; font-weight: bolder;';
-            $table->style[4] = 'background-color: '.$values['background'].'; font-size: 1.5em; font-weight: bolder;';
-            $table->style[5] = 'background-color: '.$values['background'].'; font-size: 1.5em; font-weight: bolder;';
+            $table->style[4] = 'background-color: '.$values['background'].';';
+            $table->style[5] = 'background-color: '.$values['background'].';';
 
             foreach ($result as $id => $os) {
                 $data = [];
+                ($os['critical'] > 0) ? $color_critical = 'color: '.COL_CRITICAL.';' : $color_critical = '';
+                ($os['unknown'] > 0) ? $color_unknown = 'color: '.COL_UNKNOWN.';' : $color_unknown = '';
 
                 $data[0] = ui_print_os_icon($id, false, true);
                 $data[1] = $os['name'];
                 $data[2] = $os['total'];
                 $data[3] = $os['normal'];
-                $data[4] = $os['critical'];
-                $data[5] = $os['unknown'];
+                $data[4] = '<span class="widget-module-tabs-data" style="'.$color_critical.'">'.$os['critical'].'</span>';
+                $data[5] = '<span class="widget-module-tabs-data" style="'.$color_unknown.'">'.$os['unknown'].'</span>';
 
                 $table->data[] = $data;
             }
diff --git a/pandora_console/include/lib/Dashboard/Widgets/sla_percent.php b/pandora_console/include/lib/Dashboard/Widgets/sla_percent.php
index 874d07fee2..2e7483d58e 100644
--- a/pandora_console/include/lib/Dashboard/Widgets/sla_percent.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/sla_percent.php
@@ -289,8 +289,8 @@ class SLAPercentWidget extends Widget
             $values['period'] = $decoder['period'];
         }
 
-        if (isset($decoder['layout']) === true) {
-            $values['layout'] = $decoder['layout'];
+        if (isset($decoder['horizontal']) === true) {
+            $values['horizontal'] = $decoder['horizontal'];
         }
 
         return $values;
@@ -408,14 +408,14 @@ class SLAPercentWidget extends Widget
             ],
         ];
 
-        // Layout.
+        // Horizontal.
         $inputs[] = [
-            'label'     => __('Layout').ui_print_help_tip(__('Off: vertical. On: horizontal'), true),
+            'label'     => __('Horizontal').ui_print_help_tip(__('If not, layout is vertical'), true),
             'arguments' => [
                 'wrapper' => 'div',
-                'name'    => 'layout',
+                'name'    => 'horizontal',
                 'type'    => 'switch',
-                'value'   => $values['layout'],
+                'value'   => $values['horizontal'],
                 'return'  => true,
             ],
         ];
@@ -441,7 +441,7 @@ class SLAPercentWidget extends Widget
         $values['period'] = \get_parameter('period', 0);
         $values['sizeValue'] = \get_parameter('sizeValue', '');
         $values['sizeLabel'] = \get_parameter('sizeLabel', '');
-        $values['layout'] = \get_parameter_switch('layout');
+        $values['horizontal'] = \get_parameter_switch('horizontal');
 
         return $values;
     }
@@ -516,8 +516,8 @@ class SLAPercentWidget extends Widget
         $output .= '<div class="container-center" id="container-'.$uuid.'">';
 
         $orientation = '';
-        if ((int) $this->values['layout'] === 1) {
-            $orientation = 'flex';
+        if ((int) $this->values['horizontal'] === 1) {
+            $orientation = 'flex aligni_center';
         } else {
             $orientation = 'grid';
         }
@@ -525,13 +525,13 @@ class SLAPercentWidget extends Widget
         // General div.
         $output .= '<div class="'.$orientation.'" id="general-'.$uuid.'">';
         // Div value.
-        $output .= '<div class="pdd_l_15px pdd_r_15px mrgn_btn_20px" style="flex: 0 1 '.$sizeValue.'px; font-size:'.$sizeValue.'px;">';
+        $output .= '<div class="pdd_l_15px pdd_r_15px mrgn_btn_20px" style="flex: 0 1 '.$sizeValue.'px; line-height: '.$sizeValue.'px; font-size:'.$sizeValue.'px;">';
         $output .= $sla_array['sla_fixed'].'%';
         $output .= '</div>';
 
         if (empty($label) === false) {
             // Div Label.
-            $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 1 1; font-size:'.$sizeLabel.'px; text-align: left;">'.$label.'</div>';
+            $output .= '<div class="pdd_l_15px pdd_r_15px" style="flex: 1 1; line-height: '.$sizeLabel.'px; font-size:'.$sizeLabel.'px; text-align: left;">'.$label.'</div>';
         }
 
         $output .= '</div>';
diff --git a/pandora_console/include/styles/tables.css b/pandora_console/include/styles/tables.css
index 39b3368e69..25be958969 100644
--- a/pandora_console/include/styles/tables.css
+++ b/pandora_console/include/styles/tables.css
@@ -806,3 +806,7 @@ div[id^="auto-os-"] > img {
 .dataTables_paginate.paging_simple_numbers {
   margin-right: 0;
 }
+
+.w22px {
+  width: 22px;
+}