New design for the tables - #3707

Former-commit-id: 3ff7435a5edbbd736d56df4c7fc02d21209c3d96

pandora_console/extensions/files_repo/files_repo_list.php

@@ -45,11 +45,9 @@ if (!empty($files)) {
 
     $table = new stdClass();
     $table->width = '100%';
-    $table->class = 'databox data';
+    $table->class = 'info_table';
     $table->style = [];
     $table->style[1] = 'max-width: 200px;';
-    $table->style[2] = 'text-align: center;';
-    $table->style[3] = 'text-align: center;';
     $table->style[4] = 'text-align: center;';
     $table->head = [];
     $table->head[0] = __('Name');
@@ -81,6 +79,7 @@ if (!empty($files)) {
         // Last modification
         // Public URL
         $data[4] = '';
+        $table->cellclass[][4] = 'action_buttons';
         if (!empty($file['hash'])) {
             $public_url = ui_get_full_url(EXTENSIONS_DIR.'/files_repo/files_repo_get_file.php?file='.$file['hash']);
             $message = __('Copy to clipboard').': Ctrl+C -> Enter';
@@ -92,7 +91,7 @@ if (!empty($files)) {
         }
 
         $data[4] .= "<a href=\"$url\" target=\"_blank\">";
-        $data[4] .= html_print_image('images/download.png', true, ['title' => __('Download')]);
+        $data[4] .= html_print_image('images/download.png', true, ['title' => __('Download'), 'style' => 'padding:3px' ]);
         // Download image
         $data[4] .= '</a>';
 

pandora_console/godmode/snmpconsole/snmp_filters.php

@@ -226,13 +226,13 @@ if ($edit_filter > -2) {
     $table->cellpadding = 4;
     $table->cellspacing = 4;
     $table->width = '100%';
-    $table->class = 'databox data';
+    $table->class = 'info_table';
     $table->align = [];
 
     $table->head[0] = __('Description');
     $table->head[1] = __('Filter');
     $table->head[2] = __('Action');
-    $table->size[2] = '50px';
+    $table->size[2] = '65px';
     $table->align[2] = 'center';
 
     foreach ($aglomerate_result as $ind => $row) {
@@ -263,6 +263,7 @@ if ($edit_filter > -2) {
             $data[0] = $compose_id;
             $data[1] = implode(' AND ', $compose_filter);
             $data[2] = $compose_action;
+            $table->cellclass[][2] = 'action_buttons';
             array_push($table->data, $data);
         }
     }

pandora_console/include/functions_filemanager.php

@@ -513,34 +513,81 @@ function filemanager_file_explorer(
     ?>
     <script type="text/javascript">
         function show_form_create_folder() {
-            show_main_buttons_folder()
+            actions_dialog('create_folder');
-            $("#table_filemanager-1").css('display', '');
+            $("#create_folder").css("display", "block");
-            
+            check_opened_dialog('create_folder');
-            $("#main_buttons").css("display", "none");
+        }      
-            $("#create_folder").css("display", "");
+
-        }
-        
-        function show_upload_file() {
-            show_main_buttons_folder()
-            $("#table_filemanager-1").css('display', '');
-            
-            $("#main_buttons").css("display", "none");
-            $("#upload_file").css("display", "");
-        }
-    
         function show_create_text_file() {
-            show_main_buttons_folder()
+            actions_dialog('create_text_file');
-            $("#table_filemanager-1").css('display', '');
+            $("#create_text_file").css("display", "block");
-        
+            check_opened_dialog('create_text_file');
-            $("#main_buttons").css("display", "none");
-            $("#create_text_file").css("display", "");
         }
-    
+
-        function show_main_buttons_folder() {
+        function show_upload_file() {
-            $("#table_filemanager-1").css('display', 'none');
+            actions_dialog('upload_file');
-            $("#create_folder").css("display", "none");
+            $("#upload_file").css("display", "block");
-            $("#upload_file").css("display", "none");
+            check_opened_dialog('upload_file');
-            $("#create_text_file").css("display", "none");
+        }   
+
+        function check_opened_dialog(check_opened){
+            if(check_opened !== 'create_folder'){
+                if (($("#create_folder").hasClass("ui-dialog-content") && $('#create_folder').dialog('isOpen') === true)) {
+                    $('#create_folder').dialog('close');
+                }
+            }
+
+            if(check_opened !== 'create_text_file'){
+                if (($("#create_text_file").hasClass("ui-dialog-content") && $('#create_text_file').dialog('isOpen') === true)) {
+                    $('#create_text_file').dialog('close');
+                }
+            }
+            if(check_opened !== 'upload_file'){
+                if (($("#upload_file").hasClass("ui-dialog-content") && $('#upload_file').dialog('isOpen')) === true) {
+                    $('#upload_file').dialog('close');
+                }
+            }
+        }
+
+        function actions_dialog(action){
+            $('.'+action).addClass('file_table_modal_active');
+            var title_action ='';
+            switch (action) {
+                case 'create_folder':
+                title_action = "<?php echo __('Create a Directory'); ?>";
+                    break;
+
+                case 'create_text_file':
+                title_action = "<?php echo __('Create a Text'); ?>";
+                    break;
+
+                case 'upload_file':
+                title_action = "<?php echo __('Upload Files'); ?>";
+                    break;
+                                    
+                default:
+                    break;
+            }
+         
+            $('#'+action)
+            .dialog({
+                title: title_action,
+                resizable: true,
+                draggable: true,
+                modal: true,
+                overlay: {
+                    opacity: 0.5,
+                    background: "black"
+                },
+                width: 500,
+                minWidth: 500,
+                minHeight: 210,
+                maxWidth: 800,
+                maxHeight: 300,
+                close: function () {
+                    $('.'+action).removeClass('file_table_modal_active');
+                }
+            }).show();
         }
     </script>
     <?php
@@ -556,7 +603,7 @@ function filemanager_file_explorer(
     $table->width = '100%';
     $table->id = 'table_filemanager';
     if (!defined('METACONSOLE')) {
-        $table->class = 'databox data';
+        $table->class = 'info_table';
         $table->title = '<span>'.__('Index of %s', $relative_directory).'</span>';
     }
 
@@ -582,13 +629,6 @@ function filemanager_file_explorer(
     $table->head[2] = __('Last modification');
     $table->head[3] = __('Size');
     $table->head[4] = __('Actions');
-    if (!defined('METACONSOLE')) {
-        $table->headstyle[0] = 'background-color:#82B92E';
-        $table->headstyle[1] = 'background-color:#82B92E';
-        $table->headstyle[2] = 'background-color:#82B92E';
-        $table->headstyle[3] = 'background-color:#82B92E';
-        $table->headstyle[4] = 'background-color:#82B92E';
-    }
 
     $prev_dir = explode('/', $relative_directory);
     $prev_dir_str = '';
@@ -608,85 +648,6 @@ function filemanager_file_explorer(
         $table->colspan[0][1] = 5;
     }
 
-    if (is_writable($real_directory)) {
-        $table->rowstyle[1] = 'display: none;';
-        $table->data[1][0] = '';
-        $table->data[1][1] = '';
-
-        $table->data[1][1] .= '<div id="create_folder" style="display: none;">';
-        $table->data[1][1] .= '<form method="post" action="'.$url.'">';
-        $table->data[1][1] .= html_print_input_text('dirname', '', '', 30, 255, true);
-        $table->data[1][1] .= '&nbsp;&nbsp;'.html_print_submit_button(__('Create'), 'crt', false, 'class="sub next"', true);
-
-        $table->data[1][1] .= '&nbsp;&nbsp;'.html_print_button(
-            __('Close'),
-            'close',
-            false,
-            'show_main_buttons_folder();',
-            "class='sub cancel'",
-            true
-        );
-
-        $table->data[1][1] .= html_print_input_hidden('directory', $relative_directory, true);
-        $table->data[1][1] .= html_print_input_hidden('create_dir', 1, true);
-        $table->data[1][1] .= html_print_input_hidden('hash', md5($relative_directory.$config['dbpass']), true);
-        $table->data[1][1] .= html_print_input_hidden('hash2', md5($relative_directory.$config['dbpass']), true);
-        $table->data[1][1] .= '</form>';
-        $table->data[1][1] .= '</div>';
-
-        $table->data[1][1] .= '<div id="upload_file" style="display: none;">';
-
-        $table->data[1][1] .= '<form method="post" action="'.$url.'" enctype="multipart/form-data">';
-        $table->data[1][1] .= ui_print_help_tip(__('The zip upload in this dir, easy to upload multiple files.'), true);
-        $table->data[1][1] .= html_print_input_file('file', true, false);
-        $table->data[1][1] .= html_print_input_hidden('umask', $umask, true);
-        $table->data[1][1] .= html_print_checkbox('decompress', 1, false, true);
-        $table->data[1][1] .= __('Decompress');
-        $table->data[1][1] .= '&nbsp;&nbsp;&nbsp;';
-        $table->data[1][1] .= '&nbsp;&nbsp;'.html_print_submit_button(__('Go'), 'go', false, 'class="sub next"', true);
-
-        $table->data[1][1] .= '&nbsp;&nbsp;'.html_print_button(
-            __('Close'),
-            'close',
-            false,
-            'show_main_buttons_folder();',
-            "class='sub cancel'",
-            true
-        );
-
-        $table->data[1][1] .= html_print_input_hidden('real_directory', $real_directory, true);
-        $table->data[1][1] .= html_print_input_hidden('directory', $relative_directory, true);
-        $table->data[1][1] .= html_print_input_hidden('hash', md5($real_directory.$relative_directory.$config['dbpass']), true);
-        $table->data[1][1] .= html_print_input_hidden('hash2', md5($relative_directory.$config['dbpass']), true);
-        $table->data[1][1] .= html_print_input_hidden('upload_file_or_zip', 1, true);
-        $table->data[1][1] .= '</form>';
-        $table->data[1][1] .= '</div>';
-
-        $table->data[1][1] .= '<div id="create_text_file" style="display: none;">';
-        $table->data[1][1] .= '<form method="post" action="'.$url.'">';
-        $table->data[1][1] .= html_print_input_text('name_file', '', '', 30, 50, true);
-        $table->data[1][1] .= '&nbsp;&nbsp;'.html_print_submit_button(__('Create'), 'create', false, 'class="sub next"', true);
-
-        $table->data[1][1] .= '&nbsp;&nbsp;'.html_print_button(
-            __('Close'),
-            'close',
-            false,
-            'show_main_buttons_folder();',
-            "class='sub cancel'",
-            true
-        );
-
-        $table->data[1][1] .= html_print_input_hidden('real_directory', $real_directory, true);
-        $table->data[1][1] .= html_print_input_hidden('directory', $relative_directory, true);
-        $table->data[1][1] .= html_print_input_hidden('hash', md5($real_directory.$relative_directory.$config['dbpass']), true);
-        $table->data[1][1] .= html_print_input_hidden('umask', $umask, true);
-        $table->data[1][1] .= html_print_input_hidden('create_text_file', 1, true);
-        $table->data[1][1] .= '</form>';
-        $table->data[1][1] .= '</div>';
-
-        $table->colspan[1][1] = 5;
-    }
-
     foreach ($files as $fileinfo) {
         $fileinfo['realpath'] = str_replace('\\', '/', $fileinfo['realpath']);
         $relative_path = str_replace($_SERVER['DOCUMENT_ROOT'], '', $fileinfo['realpath']);
@@ -815,10 +776,45 @@ function filemanager_file_explorer(
             if (defined('METACONSOLE')) {
                 echo "<div style='text-align: left; width: ".$table->width.";'>";
             } else {
-                echo "<div style='text-align: right; width: ".$table->width."; margin-bottom:5px;'>";
+                $tabs_dialog = '<ul id="file_table_modal">
+                <li class="create_folder">
+                    <a href="javascript: show_form_create_folder();">'.html_print_image(
+                    'images/create_directory.png',
+                    true,
+                    ['title' => __('Create directory')]
+                ).'<span>'.__('Create a Directory').'</span>
+                    </a>
+                </li>
+                <li class="create_text_file">
+                    <a href="javascript: show_create_text_file();">'.html_print_image(
+                    'images/create_file.png',
+                    true,
+                    ['title' => __('Create a Text')]
+                ).'<span>'.__('Create a Text').'</span>
+                    </a>
+                </li>
+                <li class="upload_file">
+                    <a href="javascript: show_upload_file();">'.html_print_image(
+                    'images/upload_file.png',
+                    true,
+                    ['title' => __('Upload Files')]
+                ).'<span>'.__('Upload Files').'</span>
+                    </a>
+                </li></ul>';
+
+                echo '<div id="create_folder" style="display: none;">'.$tabs_dialog.'
+                <form method="post" action="'.$url.'">'.html_print_input_text('dirname', '', '', 30, 255, true).html_print_submit_button(__('Create'), 'crt', false, 'class="sub next"', true).html_print_input_hidden('directory', $relative_directory, true).html_print_input_hidden('create_dir', 1, true).html_print_input_hidden('hash', md5($relative_directory.$config['dbpass']), true).html_print_input_hidden('hash2', md5($relative_directory.$config['dbpass']), true).'</form></div>';
+
+                echo '<div id="upload_file" style="display: none;"> '.$tabs_dialog.'
+                <form method="post" action="'.$url.'" enctype="multipart/form-data">'.ui_print_help_tip(__('The zip upload in this dir, easy to upload multiple files.'), true).html_print_input_file('file', true, false).html_print_input_hidden('umask', $umask, true).html_print_checkbox('decompress', 1, false, true).__('Decompress').html_print_submit_button(__('Go'), 'go', false, 'class="sub next"', true).html_print_input_hidden('real_directory', $real_directory, true).html_print_input_hidden('directory', $relative_directory, true).html_print_input_hidden('hash', md5($real_directory.$relative_directory.$config['dbpass']), true).html_print_input_hidden('hash2', md5($relative_directory.$config['dbpass']), true).html_print_input_hidden('upload_file_or_zip', 1, true).'</form></div>';
+
+                echo ' <div id="create_text_file" style="display: none;">'.$tabs_dialog.'
+                <form method="post" action="'.$url.'">'.html_print_input_text('name_file', '', '', 30, 50, true).html_print_submit_button(__('Create'), 'create', false, 'class="sub next"', true).html_print_input_hidden('real_directory', $real_directory, true).html_print_input_hidden('directory', $relative_directory, true).html_print_input_hidden('hash', md5($real_directory.$relative_directory.$config['dbpass']), true).html_print_input_hidden('umask', $umask, true).html_print_input_hidden('create_text_file', 1, true).'</form></div>';
+
+                echo "<div style='width: ".$table->width.";' class='file_table_buttons'>";
             }
 
-            echo "<a href='javascript: show_form_create_folder();' style='margin-right: 3px; margin-bottom: 5px;'>";
+            echo "<a href='javascript: show_form_create_folder();'>";
             echo html_print_image(
                 'images/create_directory.png',
                 true,
@@ -826,7 +822,7 @@ function filemanager_file_explorer(
             );
             echo '</a>';
 
-            echo "<a href='javascript: show_create_text_file();' style='margin-right: 3px; margin-bottom: 5px;'>";
+            echo "<a href='javascript: show_create_text_file();'>";
             echo html_print_image(
                 'images/create_file.png',
                 true,
@@ -844,7 +840,7 @@ function filemanager_file_explorer(
 
             echo '</div>';
         } else {
-            echo "<div style='text-align: right; width: ".$table->width."; color:#AC4444;'>";
+            echo "<div style='text-align: right; width: ".$table->width."; color:#AC4444; margin-bottom:10px;'>";
             echo "<image src='images/info.png' />".__('The directory is read-only');
             echo '</div>';
         }

pandora_console/include/styles/menu.css

@@ -260,11 +260,6 @@ ul li {
 }
 /* End */
 
-ul li a:hover {
-  color: #e2144a;
-} /* Hover Styles */
-/*li ul li a { padding: 2px 5px; }  Sub Menu Styles */
-
 /*
  * ---------------------------------------------------------------------
  * - MAIN LEFT MENU and SUBMENU 									-

pandora_console/include/styles/pandora.css

@@ -1014,7 +1014,6 @@ div#cont {
 }
 
 td.datos3,
-/*td.datos3 **/
 td.datos4 {
   background-color: #fff;
   color: #000 !important;
@@ -1026,12 +1025,9 @@ td.datos4 {
   font-weight: normal;
 }
 
-td.datos4 /*,
+td.datos4 {
-td.datos4 */ {
   /*Add !important because in php the function html_print_table write style in cell and this is style head.*/
   text-align: center !important;
-  /* background-color: #666;
-  color: white !important;*/
 }
 
 td.datos3 *,
@@ -5162,6 +5158,186 @@ table.info_table > tbody > tr:hover {
   background-color: #fff !important;
 }
 
+/* Tables to upload files */
+#table_filemanager tr:first-child th span {
+  font-weight: bold;
+}
+
+.file_table_buttons {
+  text-align: right;
+  margin-bottom: 10px;
+}
+
+.file_table_buttons a img {
+  border: 1px solid #e2e2e2;
+  padding: 5px;
+  border-radius: 4px;
+  margin-right: 10px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+#file_table_modal {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 40px;
+}
+
+#file_table_modal .create_folder,
+#file_table_modal .create_text_file,
+#file_table_modal .upload_file {
+  width: 33%;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  margin-right: 2px;
+  background-color: #e6e6e6;
+}
+
+.file_table_buttons a:last-child img,
+#file_table_modal .upload_file {
+  margin-right: 0px !important;
+}
+
+#file_table_modal li a {
+  display: block;
+  padding: 5px;
+}
+
+#file_table_modal li img,
+#file_table_modal li span {
+  vertical-align: middle;
+}
+
+#file_table_modal li img {
+  margin-right: 10px;
+}
+
+#create_folder,
+#create_text_file,
+#upload_file {
+  margin-bottom: 30px;
+}
+
+#create_folder input#text-dirname,
+#create_text_file input#text-name_file {
+  width: 100%;
+  margin-right: 5px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+}
+
+#upload_file input#file-file {
+  width: 70%;
+}
+
+#create_folder input#submit-crt,
+#create_text_file input#submit-create,
+#upload_file input#submit-go {
+  float: right;
+}
+
+#upload_file input#submit-go {
+  margin-top: 10px;
+}
+
+.file_table_modal_active {
+  background-color: #fff !important;
+  border: 1px solid #e6e6e6;
+  border-bottom: none;
+}
+
+/* Inventory table */
+.inventory_table_buttons {
+  text-align: right;
+  margin-bottom: 10px;
+}
+
+.inventory_table_buttons a {
+  font-weight: bolder;
+  display: inline-block;
+  border: 1px solid #e2e2e2;
+  padding: 8px;
+  border-radius: 4px;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.inventory_table_buttons a img,
+.inventory_table_buttons a span {
+  vertical-align: middle;
+}
+
+.inventory_table_buttons a img {
+  padding-left: 10px;
+}
+
+.inventory_tables thead th span:first-child {
+  float: left;
+  font-weight: bold;
+}
+
+.inventory_tables thead th span {
+  font-size: 8.6pt;
+}
+
+.inventory_tables tbody > tr:first-child {
+  font-weight: bold;
+}
+
+/* Tag view */
+table.info_table.agent_info_table {
+  margin-bottom: 20px;
+}
+table.agent_info_table tr {
+  background-color: #fff !important;
+}
+
+table.agent_info_table > tbody > tr > td {
+  border-bottom: none;
+}
+
+table.agent_info_table > tbody > tr:last-child > td {
+  border-bottom: 1px solid #e2e2e2;
+}
+
+table.agent_info_table thead > tr:first-child th {
+  background-color: #f5f5f5;
+}
+
+table.agent_info_table thead > tr:first-child th span,
+table.agent_info_table thead > tr:first-child th {
+  font-weight: bold;
+  font-size: 8.6pt;
+}
+
+table.info_table.agent_info_table td {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+table.info_table.agent_info_table table#agent_table {
+  padding-top: 15px;
+}
+
+table.info_table.agent_info_table table#module_table {
+  padding-top: 10px;
+  padding-bottom: 15px;
+}
+
+table.info_table.agent_info_table table.info_table {
+  margin-bottom: 0;
+}
+
+.agent_info_table_opened {
+  background-color: #82b92e !important;
+  color: #fff !important;
+  border-color: #82b92e !important;
+}
+
+.agent_info_table_closed {
+  background-color: #fff !important;
+  color: #000 !important;
+  border-radius: 4px;
+}
+
 /* Arrows to sort the tables. */
 .sort_arrow {
   display: inline-grid;

pandora_console/index.php

@@ -1254,6 +1254,11 @@ require 'include/php_to_js_values.php';
 
 <script type="text/javascript" language="javascript">
 
+    // When there are less than 5 rows, all rows must be white
+    if($('table.info_table tbody > tr').length <= 5){
+        $('table.info_table tbody > tr').css('background-color', '#fff');
+    }
+
     // When the user scrolls down 400px from the top of the document, show the button.
     window.onscroll = function() {scrollFunction()};
 

pandora_console/operation/agentes/estado_generalagente.php

@@ -211,7 +211,7 @@ $table_contact->id = 'agent_contact_main';
 $table_contact->width = '100%';
 $table_contact->cellspacing = 0;
 $table_contact->cellpadding = 0;
-$table_contact->class = 'info_table';
+$table_contact->class = 'databox data';
 $table_contact->style[0] = 'width: 30%;height:30px;';
 $table_contact->style[1] = 'width: 70%;';
 
@@ -254,7 +254,7 @@ $table_data->width = '100%';
 $table_data->styleTable = 'height:180px';
 $table_data->cellspacing = 0;
 $table_data->cellpadding = 0;
-$table_data->class = 'info_table';
+$table_data->class = 'databox data';
 $table_data->style[0] = 'width: 30%;';
 $table_data->style[1] = 'width: 40%;';
 
@@ -416,7 +416,7 @@ if ($last_incident != false) {
     $table_incident->width = '100%';
     $table_incident->cellspacing = 0;
     $table_incident->cellpadding = 0;
-    $table_incident->class = 'info_table';
+    $table_incident->class = 'databox';
     $table_incident->style[0] = 'width: 30%;';
     $table_incident->style[1] = 'width: 70%;';
 
@@ -456,7 +456,7 @@ if (!empty($network_interfaces_by_agents) && !empty($network_interfaces_by_agent
 if (!empty($network_interfaces)) {
     $table_interface = new stdClass();
     $table_interface->id = 'agent_interface_info';
-    $table_interface->class = 'info_table';
+    $table_interface->class = 'databox data';
     $table_interface->width = '98%';
     $table_interface->style = [];
     $table_interface->style['interface_status'] = 'width: 30px;padding-top:0px;padding-bottom:0px;';
@@ -478,7 +478,7 @@ if (!empty($network_interfaces)) {
         'class' => 'closed',
         'style' => 'vertical-align:righ; cursor:pointer;',
     ];
-    $table_interface->head[0] = html_print_image('images/go.png', true, $options).'  ';
+    $table_interface->head[0] = html_print_image('images/graphmenu_arrow.png', true, $options).'  ';
     $table_interface->head[0] .= '<span style="vertical-align: middle;">'.__('Interface information').' (SNMP)</span>';
     $table_interface->head_colspan = [];
     $table_interface->head_colspan[0] = 8;
@@ -610,11 +610,11 @@ if (!empty($network_interfaces)) {
                     var arrow = $("#agent_interface_info").find("thead").find("img");
                     if (arrow.hasClass("closed")) {
                         arrow.removeClass("closed");
-                        arrow.prop("src", "images/down.png");
+                        arrow.prop("src", "images/arrow-down-white.png");
                         $("#agent_interface_info").find("tbody").show();
                     } else {
                         arrow.addClass("closed");
-                        arrow.prop("src", "images/go.png");
+                        arrow.prop("src", "images/graphmenu_arrow.png");
                         $("#agent_interface_info").find("tbody").hide();
                     }
                 })

pandora_console/operation/agentes/status_monitor.php

@@ -735,21 +735,23 @@ unset($table);
 // End Build Search Form
 //
 // Sort functionality
-$selected = 'border: 1px solid black;';
+$selected = true;
-$selectAgentNameUp = '';
+$selectAgentNameUp = false;
-$selectAgentNameDown = '';
+$selectAgentNameDown = false;
-$selectTypeUp = '';
+$selectDataTypeUp = false;
-$selectTypeDown = '';
+$selectDataTypeDown = false;
-$selectModuleNameUp = '';
+$selectTypeUp = false;
-$selectModuleNameDown = '';
+$selectTypeDown = false;
-$selectIntervalUp = '';
+$selectModuleNameUp = false;
-$selectIntervalDown = '';
+$selectModuleNameDown = false;
-$selectStatusUp = '';
+$selectIntervalUp = false;
-$selectStatusDown = '';
+$selectIntervalDown = false;
-$selectDataUp = '';
+$selectStatusUp = false;
-$selectDataDown = '';
+$selectStatusDown = false;
-$selectTimestampUp = '';
+$selectDataUp = false;
-$selectTimestampDown = '';
+$selectDataDown = false;
+$selectTimestampUp = false;
+$selectTimestampDown = false;
 $order = null;
 
 switch ($sortField) {
@@ -776,7 +778,7 @@ switch ($sortField) {
     case 'type':
         switch ($sort) {
             case 'up':
-                $selectTypeUp = $selected;
+                $selectDataTypeUp = $selected;
                 $order = [
                     'field' => 'tagente_modulo.id_tipo_modulo',
                     'order' => 'ASC',
@@ -784,7 +786,7 @@ switch ($sortField) {
             break;
 
             case 'down':
-                $selectTypeDown = $selected;
+                $selectDataTypeDown = $selected;
                 $order = [
                     'field' => 'tagente_modulo.id_tipo_modulo',
                     'order' => 'DESC',
@@ -896,7 +898,7 @@ switch ($sortField) {
     case 'data':
         switch ($sort) {
             case 'up':
-                $selectTimestampUp = $selected;
+                $selectDataUp = $selected;
                 $order = [
                     'field' => 'tagente_estado.datos',
                     'order' => 'ASC',
@@ -904,7 +906,7 @@ switch ($sortField) {
             break;
 
             case 'down':
-                $selectTimestampDown = $selected;
+                $selectDataDown = $selected;
                 $order = [
                     'field' => 'tagente_estado.datos',
                     'order' => 'DESC',
@@ -915,19 +917,21 @@ switch ($sortField) {
 
     default:
         $selectAgentNameUp = $selected;
-        $selectAgentNameDown = '';
+        $selectAgentNameDown = false;
-        $selectTypeUp = '';
+        $selectDataTypeUp = false;
-        $selectTypeDown = '';
+        $selectDataTypeDown = false;
-        $selectModuleNameUp = '';
+        $selectTypeUp = false;
-        $selectModuleNameDown = '';
+        $selectTypeDown = false;
-        $selectIntervalUp = '';
+        $selectModuleNameUp = false;
-        $selectIntervalDown = '';
+        $selectModuleNameDown = false;
-        $selectStatusUp = '';
+        $selectIntervalUp = false;
-        $selectStatusDown = '';
+        $selectIntervalDown = false;
-        $selectDataUp = '';
+        $selectStatusUp = false;
-        $selectDataDown = '';
+        $selectStatusDown = false;
-        $selectTimestampUp = '';
+        $selectDataUp = false;
-        $selectTimestampDown = '';
+        $selectDataDown = false;
+        $selectTimestampUp = false;
+        $selectTimestampDown = false;
         $order = [
             'field' => 'tagente.alias',
             'order' => 'ASC',
@@ -1066,8 +1070,19 @@ if (($config['dbtype'] == 'oracle') && ($result !== false)) {
 }
 
 
+// Urls to sort the table.
+$url_agent_name = 'index.php?sec=view&sec2=operation/agentes/status_monitor&refr='.$refr.'&datatype='.$datatype.'&moduletype='.$moduletype.'&modulegroup='.$modulegroup.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=agent_alias&sort=';
+$url_type = 'index.php?sec=view&sec2=operation/agentes/status_monitor&datatype='.$datatype.'&moduletype='.$moduletype.'&refr='.$refr.'&modulegroup='.$modulegroup.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=type&sort=';
+$url_module_name = 'index.php?sec=view&sec2=operation/agentes/status_monitor&datatype='.$datatype.'&moduletype='.$moduletype.'&refr='.$refr.'&modulegroup='.$modulegroup.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=module_name&sort=';
+$url_server_type = 'index.php?sec=view&sec2=operation/agentes/status_monitor&datatype='.$datatype.'&moduletype='.$moduletype.'&refr='.$refr.'&modulegroup='.$modulegroup.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=moduletype&sort=';
+$url_interval = 'index.php?sec=view&sec2=operation/agentes/status_monitor&datatype='.$datatype.'&moduletype='.$moduletype.'&refr='.$refr.'&modulegroup='.$modulegroup.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=interval&sort=';
+$url_status = 'index.php?sec=view&sec2=operation/agentes/status_monitor&datatype='.$datatype.'&moduletype='.$moduletype.'&refr='.$refr.'&modulegroup='.$modulegroup.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=status&sort=';
+$url_data = 'index.php?sec=view&sec2=operation/agentes/status_monitor&datatype='.$datatype.'&moduletype='.$moduletype.'&refr='.$refr.'&modulegroup='.$modulegroup.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=data&sort=';
+$url_timestamp_up = 'index.php?sec=view&sec2=operation/agentes/status_monitor&datatype='.$datatype.'&moduletype='.$moduletype.'&refr='.$refr.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=timestamp&sort=up';
+$url_timestamp_down = 'index.php?sec=view&sec2=operation/agentes/status_monitor&datatype='.$datatype.'&moduletype='.$moduletype.'&refr='.$refr.'&modulegroup='.$modulegroup.'&offset='.$offset.'&ag_group='.$ag_group.'&ag_freestring='.$ag_freestring.'&ag_modulename='.$ag_modulename.'&status='.$status.$ag_custom_fields_params.'&sort_field=timestamp&sort=down';
+
+
 // Start Build List Result
-//
 if (!empty($result)) {
     $table = new StdClass();
     $table->cellpadding = 0;
@@ -1090,36 +1105,34 @@ if (!empty($result)) {
 
     if (in_array('agent', $show_fields) || is_metaconsole()) {
         $table->head[1] = __('Agent');
-        $table->head[1] .= ' <a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;refr='.$refr.'&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=agent_alias&amp;sort=up">'.html_print_image('images/sort_up.png', true, ['style' => $selectAgentNameUp, 'alt' => 'up']).'</a>'.'<a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;refr='.$refr.'&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=agent_alias&amp;sort=down">'.html_print_image('images/sort_down.png', true, ['style' => $selectAgentNameDown, 'alt' => 'down']).'</a>';
+        $table->head[1] .= ui_get_sorting_arrows($url_agent_name.'up', $url_agent_name.'down', $selectAgentNameUp, $selectAgentNameDown);
     }
 
     if (in_array('data_type', $show_fields) || is_metaconsole()) {
         $table->head[2] = __('Data Type');
-        $table->head[2] .= ' <a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=type&amp;sort=up">'.html_print_image('images/sort_up.png', true, ['style' => $selectTypeUp, 'alt' => 'up']).'</a>'.'<a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=type&amp;sort=down">'.html_print_image('images/sort_down.png', true, ['style' => $selectTypeDown, 'alt' => 'down']).'</a>';
+        $table->head[2] .= ui_get_sorting_arrows($url_type.'up', $url_type.'down', $selectDataTypeUp, $selectDataTypeDown);
-
         $table->align[2] = 'left';
     }
 
     if (in_array('module_name', $show_fields) || is_metaconsole()) {
         $table->head[3] = __('Module name');
-        $table->head[3] .= ' <a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=module_name&amp;sort=up">'.html_print_image('images/sort_up.png', true, ['style' => $selectModuleNameUp, 'alt' => 'up']).'</a>'.'<a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=module_name&amp;sort=down">'.html_print_image('images/sort_down.png', true, ['style' => $selectModuleNameDown, 'alt' => 'down']).'</a>';
+        $table->head[3] .= ui_get_sorting_arrows($url_module_name.'up', $url_module_name.'down', $selectModuleNameUp, $selectModuleNameDown);
     }
 
     if (in_array('server_type', $show_fields) || is_metaconsole()) {
         $table->head[4] = __('Server type');
-        $table->head[4] .= ' <a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=moduletype&amp;sort=up">'.html_print_image('images/sort_up.png', true, ['style' => $selectModuleNameUp, 'alt' => 'up']).'</a>'.'<a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=moduletype&amp;sort=down">'.html_print_image('images/sort_down.png', true, ['style' => $selectModuleNameDown, 'alt' => 'down']).'</a>';
+        $table->head[4] .= ui_get_sorting_arrows($url_server_type.'up', $url_server_type.'down', $selectTypeUp, $selectTypeDown);
     }
 
     if (in_array('interval', $show_fields) || is_metaconsole()) {
         $table->head[5] = __('Interval');
-        $table->head[5] .= ' <a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=interval&amp;sort=up">'.html_print_image('images/sort_up.png', true, ['style' => $selectIntervalUp, 'alt' => 'up']).'</a>'.'<a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=interval&amp;sort=down">'.html_print_image('images/sort_down.png', true, ['style' => $selectIntervalDown, 'alt' => 'down']).'</a>';
+        $table->head[5] .= ui_get_sorting_arrows($url_interval.'up', $url_interval.'down', $selectIntervalUp, $selectIntervalDown);
         $table->align[5] = 'left';
     }
 
     if (in_array('status', $show_fields) || is_metaconsole()) {
         $table->head[6] = __('Status');
-        $table->head[6] .= ' <a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=status&amp;sort=up">'.html_print_image('images/sort_up.png', true, ['style' => $selectStatusUp, 'alt' => 'up']).'</a>'.'<a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=status&amp;sort=down">'.html_print_image('images/sort_down.png', true, ['style' => $selectStatusDown, 'alt' => 'down']).'</a>';
+        $table->head[6] .= ui_get_sorting_arrows($url_status.'up', $url_status.'down', $selectStatusUp, $selectStatusDown);
-
         $table->align[6] = 'left';
     }
 
@@ -1137,13 +1150,13 @@ if (!empty($result)) {
         $table->head[9] = __('Data');
         $table->align[9] = 'left';
         if (is_metaconsole()) {
-            $table->head[9] .= ' <a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=data&amp;sort=up">'.html_print_image('images/sort_up.png', true, ['style' => $selectStatusUp, 'alt' => 'up']).'</a>'.'<a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=data&amp;sort=down">'.html_print_image('images/sort_down.png', true, ['style' => $selectStatusDown, 'alt' => 'down']).'</a>';
+            $table->head[9] .= ui_get_sorting_arrows($url_data.'up', $url_data.'down', $selectDataUp, $selectDataDown);
         }
     }
 
     if (in_array('timestamp', $show_fields) || is_metaconsole()) {
         $table->head[10] = __('Timestamp');
-        $table->head[10] .= ' <a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=timestamp&amp;sort=up">'.html_print_image('images/sort_up.png', true, ['style' => $selectTimestampUp, 'alt' => 'up']).'</a>'.'<a href="index.php?sec=view&amp;sec2=operation/agentes/status_monitor&amp;datatype='.$datatype.'&amp;moduletype='.$moduletype.'&amp;refr='.$refr.'&amp;modulegroup='.$modulegroup.'&amp;offset='.$offset.'&amp;ag_group='.$ag_group.'&amp;ag_freestring='.$ag_freestring.'&amp;ag_modulename='.$ag_modulename.'&amp;status='.$status.$ag_custom_fields_params.'&amp;sort_field=timestamp&amp;sort=down">'.html_print_image('images/sort_down.png', true, ['style' => $selectTimestampDown, 'alt' => 'down']).'</a>';
+        $table->head[10] .= ui_get_sorting_arrows($url_timestamp_up, $url_timestamp_down, $selectTimestampUp, $selectTimestampDown);
         $table->align[10] = 'left';
     }