From 5f3cbbb12af81d0d5b71b2fc4087dc79f6dd7063 Mon Sep 17 00:00:00 2001
From: daniel <daniel.barbero@artica.es>
Date: Thu, 4 May 2023 11:14:11 +0200
Subject: [PATCH 1/3] fixed visual errors in legacy VC pandora_enterprise#11054

---
 .../reporting/visual_console_builder.data.php |   1 -
 .../visual_console_builder.editor.js          |  49 ++---
 .../visual_console_builder.editor.php         |   6 +-
 .../ajax/visual_console_builder.ajax.php      |   4 +-
 .../include/functions_visual_map.php          |  13 +-
 .../include/functions_visual_map_editor.php   | 206 +++++++++++-------
 .../lib/Dashboard/Widgets/BasicChart.php      |   1 -
 pandora_console/include/styles/pandora.css    |  22 +-
 .../include/styles/visual_maps.css            |   9 -
 .../operation/visual_console/legacy_view.php  |  19 +-
 10 files changed, 201 insertions(+), 129 deletions(-)

diff --git a/pandora_console/godmode/reporting/visual_console_builder.data.php b/pandora_console/godmode/reporting/visual_console_builder.data.php
index 6e2ac73422..739e2495fa 100644
--- a/pandora_console/godmode/reporting/visual_console_builder.data.php
+++ b/pandora_console/godmode/reporting/visual_console_builder.data.php
@@ -408,7 +408,6 @@ $(document).ready (function () {
     });
     
     $( "button[type=submit]" ).click(function( event ) {
-        console.log('aaaaaaaaaaa');
         if (parseInt($('input[name=width]').val()) < 1024){
             alert('Default width is '+$('input[name=width]').val()+'px, smaller than minimum -> 1024px');
             $('input[name=width]').val('1024');
diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.js b/pandora_console/godmode/reporting/visual_console_builder.editor.js
index eff0f416f1..3035fed8ae 100755
--- a/pandora_console/godmode/reporting/visual_console_builder.editor.js
+++ b/pandora_console/godmode/reporting/visual_console_builder.editor.js
@@ -202,15 +202,6 @@ function visual_map_main() {
       }
     }
   });
-
-  //Resize the view to adapt the screen size.
-  if ($("#main").length) {
-    //Console
-    $("#frame_view").height($("#main").height() - 75);
-  } else {
-    //Metaconsole
-    $("#frame_view").height($("#page").height() - 75);
-  }
 }
 
 function cancel_button_palette_callback() {
@@ -2426,10 +2417,10 @@ function loadFieldsFromDB(item) {
   });
 }
 
-function setAspectRatioBackground(side) {
+function setAspectRatioBackground(side, id) {
   toggle_item_palette();
 
-  parameter = Array();
+  var parameter = Array();
   parameter.push({
     name: "page",
     value: "include/ajax/visual_console_builder.ajax"
@@ -2440,18 +2431,20 @@ function setAspectRatioBackground(side) {
     value: $("#background_img").attr("src")
   });
 
+  parameter.push({ name: "id_visual_console", value: id });
+
   jQuery.ajax({
     url: "ajax.php",
     data: parameter,
     type: "POST",
     dataType: "json",
     success: function(data) {
-      old_width = parseInt(
+      var old_width = parseInt(
         $("#background")
           .css("width")
           .replace("px", "")
       );
-      old_height = parseInt(
+      var old_height = parseInt(
         $("#background")
           .css("height")
           .replace("px", "")
@@ -2464,8 +2457,12 @@ function setAspectRatioBackground(side) {
         old_height = 768;
       }
 
-      img_width = data[0];
-      img_height = data[1];
+      var img_width = data[0];
+      var img_height = data[1];
+
+      var ratio = 0;
+      var height = 0;
+      var width = 0;
 
       if (side == "width") {
         ratio = old_width / img_width;
@@ -5821,14 +5818,14 @@ function deleteDB(idElement) {
 }
 
 function activeToolboxButton(id, active) {
-  if ($("input." + id + "[name=button_toolbox2]").length == 0) {
+  if ($("button." + id + "[name=" + id + "]").length == 0) {
     return;
   }
 
   if (active) {
-    $("input." + id + "[name=button_toolbox2]").removeAttr("disabled");
+    $("button." + id + "[name=" + id + "]").removeAttr("disabled");
   } else {
-    $("input." + id + "[name=button_toolbox2]").attr("disabled", true);
+    $("button." + id + "[name=" + id + "]").attr("disabled", true);
   }
 }
 
@@ -6446,9 +6443,9 @@ function eventsBackground() {
 
 function move_elements_resize(original_width, original_height, width, height) {
   jQuery.each($(".item"), function(key, value) {
-    item = value;
+    var item = value;
     idItem = $(item).attr("id");
-    classItem = $(item)
+    var classItem = $(item)
       .attr("class")
       .replace("item", "")
       .replace("ui-draggable", "")
@@ -6456,22 +6453,22 @@ function move_elements_resize(original_width, original_height, width, height) {
       .replace(/^\s+/g, "")
       .replace(/\s+$/g, "");
 
-    old_height = parseInt(
+    var old_height = parseInt(
       $(item)
         .css("top")
         .replace("px", "")
     );
-    old_width = parseInt(
+    var old_width = parseInt(
       $(item)
         .css("left")
         .replace("px", "")
     );
 
-    ratio_width = width / original_width;
-    ratio_height = height / original_height;
+    var ratio_width = width / original_width;
+    var ratio_height = height / original_height;
 
-    new_height = old_height * ratio_height;
-    new_width = old_width * ratio_width;
+    var new_height = old_height * ratio_height;
+    var new_width = old_width * ratio_width;
 
     var values = {};
 
diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.php b/pandora_console/godmode/reporting/visual_console_builder.editor.php
index 725dab7806..3d5b8864cd 100755
--- a/pandora_console/godmode/reporting/visual_console_builder.editor.php
+++ b/pandora_console/godmode/reporting/visual_console_builder.editor.php
@@ -92,14 +92,14 @@ html_print_input_hidden('metaconsole', (is_metaconsole() === true) ? 1 : 0);
 visual_map_editor_print_hack_translate_strings();
 visual_map_editor_print_item_palette($visualConsole['id'], $background);
 
-if (is_metaconsole() === false) {
+if (is_metaconsole() === true) {
     echo '<div id="frame_view" class="frame_view_meta">';
 } else {
-    echo '<div id="frame_view" class="frame_view_node mrgn_top_meta_35px">';
+    echo '<div id="frame_view" class="frame_view_node">';
 }
 
 echo '<div id="background" class="" style="top:0px;
-margin: 0px auto;border: 1px lightgray solid; width: '.$widthBackground.'px; height: '.$heightBackground.'px;background-color: '.$visualConsole['background_color'].';">';
+margin: 0px auto;border: 1px lightgray solid; width: '.$widthBackground.'px; height: '.$heightBackground.'px;background-color: '.$visualConsole['background_color'].';z-index:0;">';
 echo "<div id='background_grid'
 	style='position: absolute; display: none; overflow: hidden;
 	background: url(".ui_get_full_url('images/console/background/white_boxed.jpg', false, false, false).');
diff --git a/pandora_console/include/ajax/visual_console_builder.ajax.php b/pandora_console/include/ajax/visual_console_builder.ajax.php
index 5736815d6c..d4f8259ac8 100755
--- a/pandora_console/include/ajax/visual_console_builder.ajax.php
+++ b/pandora_console/include/ajax/visual_console_builder.ajax.php
@@ -34,7 +34,7 @@ if ($get_image_path_status) {
 $id_visual_console = get_parameter('id_visual_console', null);
 
 // WARNING: CHECK THE ENTIRE FUNCTIONALITY
-// Visual console id required
+// Visual console id required.
 if (empty($id_visual_console)) {
     db_pandora_audit(
         AUDIT_LOG_ACL_VIOLATION,
@@ -1774,7 +1774,7 @@ switch ($action) {
     break;
 }
 
-// visual map element status check
+// Visual map element status check.
 if ($get_element_status) {
     $layoutData = db_get_row_filter(
         'tlayout_data',
diff --git a/pandora_console/include/functions_visual_map.php b/pandora_console/include/functions_visual_map.php
index 80267a18e9..058afd19bd 100755
--- a/pandora_console/include/functions_visual_map.php
+++ b/pandora_console/include/functions_visual_map.php
@@ -3564,12 +3564,13 @@ function visual_map_print_visual_map(
     }
 
     echo '<div id="background_'.$id_layout.'"
-                style="margin:0px auto;text-align:
-                z-index: 0;
-                position:relative;
-                width:'.$mapWidth.'px;
-                height:'.$mapHeight.'px;
-                background-color:'.$layout['background_color'].';">';
+        style="margin:0px auto;text-align:
+        z-index: 0;
+        position:relative;
+        width:'.$mapWidth.'px;
+        height:'.$mapHeight.'px;
+        background-color:'.$layout['background_color'].';
+        z-index:0;">';
 
     if ($layout['background'] != 'None.png') {
         echo "<img src='".ui_get_full_url($backgroundImage, false, false, false)."' width='100%' height='100%' />";
diff --git a/pandora_console/include/functions_visual_map_editor.php b/pandora_console/include/functions_visual_map_editor.php
index 6c1820a87c..c40d2e0740 100755
--- a/pandora_console/include/functions_visual_map_editor.php
+++ b/pandora_console/include/functions_visual_map_editor.php
@@ -130,18 +130,16 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 'datos',
                 'box_item',
             ];
-            $form_items['border_color_row']['html'] = '<td align="left" valign="top"  >'.__('Border color').'</td>'.'<td align="left"  >'.html_print_input_text_extended(
+            $form_items['border_color_row']['html'] = '<td align="left" valign="top"  >'.__('Border color').'</td>';
+            $form_items['border_color_row']['html'] .= '<td align="left"  >';
+            $form_items['border_color_row']['html'] .= html_print_input_color(
                 'border_color',
                 '#000000',
                 'text-border_color',
                 '',
-                7,
-                7,
-                false,
-                '',
-                'class="border_color"',
                 true
-            ).'</td>';
+            );
+            $form_items['border_color_row']['html'] .= '</td>';
 
             $form_items['border_width_row'] = [];
             $form_items['border_width_row']['items'] = [
@@ -157,18 +155,16 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 'box_item',
                 'clock',
             ];
-            $form_items['fill_color_row']['html'] = '<td align="left" valign="top"  >'.__('Fill color').'</td>'.'<td align="left"  >'.html_print_input_text_extended(
+            $form_items['fill_color_row']['html'] = '<td align="left" valign="top"  >'.__('Fill color').'</td>';
+            $form_items['fill_color_row']['html'] .= '<td align="left"  >';
+            $form_items['fill_color_row']['html'] .= html_print_input_color(
                 'fill_color',
                 '#000000',
                 'text-fill_color',
                 '',
-                7,
-                7,
-                false,
-                '',
-                'class="fill_color"',
                 true
-            ).'</td>';
+            );
+            $form_items['fill_color_row']['html'] .= '</td>';
 
             $form_items['module_graph_size_row'] = [];
             $form_items['module_graph_size_row']['items'] = [
@@ -375,18 +371,16 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
 
             $form_items['grid_color_row'] = [];
             $form_items['grid_color_row']['items'] = ['bars_graph'];
-            $form_items['grid_color_row']['html'] = '<td align="left" valign="top"  >'.__('Grid color').'</td>'.'<td align="left"  >'.html_print_input_text_extended(
+            $form_items['grid_color_row']['html'] = '<td align="left" valign="top">'.__('Grid color').'</td>';
+            $form_items['grid_color_row']['html'] .= '<td align="left"  >';
+            $form_items['grid_color_row']['html'] .= html_print_input_color(
                 'grid_color',
                 '#000000',
                 'text-grid_color',
                 '',
-                7,
-                7,
-                false,
-                '',
-                'class="grid_color"',
                 true
-            ).'</td>';
+            );
+            $form_items['grid_color_row']['html'] .= '</td>';
 
             $form_items['radio_choice_graph'] = [];
             $form_items['radio_choice_graph']['items'] = [
@@ -500,18 +494,18 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
 
             $form_items['resume_color_row'] = [];
             $form_items['resume_color_row']['items'] = ['donut_graph'];
-            $form_items['resume_color_row']['html'] = '<td align="left" valign="top"  >'.__('Resume data color').'</td>'.'<td align="left"  >'.html_print_input_text_extended(
+            $form_items['resume_color_row']['html'] = '<td align="left" valign="top"  >';
+            $form_items['resume_color_row']['html'] .= __('Resume data color');
+            $form_items['resume_color_row']['html'] .= '</td>';
+            $form_items['resume_color_row']['html'] .= '<td align="left"  >';
+            $form_items['resume_color_row']['html'] .= html_print_input_color(
                 'resume_color',
                 '#000000',
                 'text-resume_color',
                 '',
-                7,
-                7,
-                false,
-                '',
-                'class="resume_color"',
                 true
-            ).'</td>';
+            );
+            $form_items['resume_color_row']['html'] .= '</td>';
 
             $event_times = [
                 86400 => __('24h'),
@@ -637,24 +631,60 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 'background',
                 'datos',
             ];
-            $form_items['background_row_2']['html'] = '<td align="left">'.__('Original Size').'</td>
-				<td align="left">'.html_print_button(__('Apply'), 'original_false', false, "setAspectRatioBackground('original')", 'class="sub vs_button_ghost"', true).'</td>';
+            $form_items['background_row_2']['html'] = '<td align="left">'.__('Original Size').'</td>';
+            $form_items['background_row_2']['html'] .= '<td align="left">';
+            $form_items['background_row_2']['html'] .= html_print_button(
+                __('Apply'),
+                'original_false',
+                false,
+                'setAspectRatioBackground("original", '.$visualConsole_id.')',
+                [
+                    'icon' => 'cog',
+                    'mode' => 'mini secondary',
+                ],
+                true
+            );
+            $form_items['background_row_2']['html'] .= '</td>';
 
             $form_items['background_row_3'] = [];
             $form_items['background_row_3']['items'] = [
                 'background',
                 'datos',
             ];
-            $form_items['background_row_3']['html'] = '<td align="left">'.__('Aspect ratio').'</td>
-				<td align="left">'.html_print_button(__('Proportional Width'), 'original_false', false, "setAspectRatioBackground('width')", 'class="sub vs_button_ghost"', true).'</td>';
+            $form_items['background_row_3']['html'] = '<td align="left">'.__('Aspect ratio').'</td>';
+            $form_items['background_row_3']['html'] .= '<td align="left">';
+            $form_items['background_row_3']['html'] .= html_print_button(
+                __('Proportional Width'),
+                'original_false',
+                false,
+                'setAspectRatioBackground("width", '.$visualConsole_id.')',
+                [
+                    'icon' => 'cog',
+                    'mode' => 'mini secondary',
+                ],
+                true
+            );
+            $form_items['background_row_3']['html'] .= '</td>';
 
             $form_items['background_row_4'] = [];
             $form_items['background_row_4']['items'] = [
                 'background',
                 'datos',
             ];
-            $form_items['background_row_4']['html'] = '<td align="left"></td>
-				<td align="left">'.html_print_button(__('Height proportional'), 'original_false', false, "setAspectRatioBackground('height')", 'class="sub vs_button_ghost"', true).'</td>';
+            $form_items['background_row_4']['html'] = '<td align="left"></td>';
+            $form_items['background_row_4']['html'] .= '<td align="left">';
+            $form_items['background_row_4']['html'] .= html_print_button(
+                __('Height proportional'),
+                'original_false',
+                false,
+                'setAspectRatioBackground("height", '.$visualConsole_id.')',
+                [
+                    'icon' => 'cog',
+                    'mode' => 'mini secondary',
+                ],
+                true
+            );
+            $form_items['background_row_4']['html'] .= '</td>';
 
             $form_items['percentile_bar_row_1'] = [];
             $form_items['percentile_bar_row_1']['items'] = [
@@ -665,11 +695,31 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 'bars_graph',
                 'clock',
             ];
-            $form_items['percentile_bar_row_1']['html'] = '<td align="left">'.__('Widtzzzzh').html_print_input_text('width_percentile', 0, '', 3, 5, true).'</td>';
+            $form_items['percentile_bar_row_1']['html'] = '<td align="left">'.__('Width').'</td>';
+            $form_items['percentile_bar_row_1']['html'] .= '<td align="left">';
+            $form_items['percentile_bar_row_1']['html'] .= html_print_input_text(
+                'width_percentile',
+                0,
+                '',
+                3,
+                5,
+                true
+            );
+            $form_items['percentile_bar_row_1']['html'] .= '</td>';
 
             $form_items['height_bars_graph_row'] = [];
             $form_items['height_bars_graph_row']['items'] = ['bars_graph'];
-            $form_items['height_bars_graph_row']['html'] = '<td align="left">'.__('Height').html_print_input_text('bars_graph_height', 0, '', 3, 5, true).'</td>';
+            $form_items['height_bars_graph_row']['html'] = '<td align="left">'.__('Height').'</td>';
+            $form_items['height_bars_graph_row']['html'] .= '<td align="left">';
+            $form_items['height_bars_graph_row']['html'] .= html_print_input_text(
+                'bars_graph_height',
+                0,
+                '',
+                3,
+                5,
+                true
+            );
+            $form_items['height_bars_graph_row']['html'] .= '</td>';
 
             $form_items['percentile_bar_row_2'] = [];
             $form_items['percentile_bar_row_2']['items'] = [
@@ -735,16 +785,11 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 'datos',
             ];
             $form_items['percentile_item_row_5']['html'] = '<td align="left">'.__('Element color').'</td>
-				<td align="left">'.html_print_input_text_extended(
+				<td align="left">'.html_print_input_color(
                 'percentile_color',
                 '#ffffff',
                 'text-percentile_color',
                 '',
-                7,
-                7,
-                false,
-                '',
-                'class="percentile_color"',
                 true
             ).'</td>';
 
@@ -755,16 +800,11 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 'datos',
             ];
             $form_items['percentile_item_row_6']['html'] = '<td align="left">'.__('Value color').'</td>
-				<td align="left">'.html_print_input_text_extended(
+				<td align="left">'.html_print_input_color(
                 'percentile_label_color',
                 '#ffffff',
                 'text-percentile_label_color',
                 '',
-                7,
-                7,
-                false,
-                '',
-                'class="percentile_label_color"',
                 true
             ).'</td>';
 
@@ -815,8 +855,16 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
             // End of Color Cloud rows
             $form_items['show_on_top_row'] = [];
             $form_items['show_on_top_row']['items'] = ['group_item'];
-            $form_items['show_on_top_row']['html'] = '<td align="left"  >'.__('Always show on top').'</td>
-				<td align="left"  >'.html_print_checkbox('show_on_top', 1, '', true).ui_print_help_tip(__('It allows the element to be superimposed to the rest of items of the visual console'), true).'</td>';
+            $form_items['show_on_top_row']['html'] = '<td align="left"  >';
+            $form_items['show_on_top_row']['html'] .= __('Always show on top');
+            $form_items['show_on_top_row']['html'] .= ui_print_help_tip(
+                __('It allows the element to be superimposed to the rest of items of the visual console'),
+                true
+            );
+            $form_items['show_on_top_row']['html'] .= '</td>';
+            $form_items['show_on_top_row']['html'] .= '<td align="left"  >';
+            $form_items['show_on_top_row']['html'] .= html_print_checkbox('show_on_top', 1, '', true);
+            $form_items['show_on_top_row']['html'] .= '</td>';
 
             $show_last_value = [
                 '0' => __('Hide last value on boolean modules'),
@@ -875,11 +923,11 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
 
             $form_items['button_update_row'] = [];
             $form_items['button_update_row']['items'] = ['datos'];
-            $form_items['button_update_row']['html'] = '<td align="left" colspan="2" style="text-align: right;">'.html_print_button(__('Cancel'), 'cancel_button', false, 'cancel_button_palette_callback();', 'class="sub cancel"', true).'<span ="margin-right:10px;">&nbsp</span>'.html_print_button(__('Update'), 'update_button', false, 'update_button_palette_callback();', 'class="sub upd"', true).'</td>';
+            $form_items['button_update_row']['html'] = '<td align="left" colspan="2"><div class="flex flex-end">'.html_print_button(__('Cancel'), 'cancel_button', false, 'cancel_button_palette_callback();', [ 'icon' => 'delete', 'mode' => 'secondary'], true).'<span ="margin-right:10px;">&nbsp</span>'.html_print_button(__('Update'), 'update_button', false, 'update_button_palette_callback();', [ 'icon' => 'upd'], true).'</div></td>';
 
             $form_items['button_create_row'] = [];
             $form_items['button_create_row']['items'] = ['datos'];
-            $form_items['button_create_row']['html'] = '<td align="left" colspan="2"  style="text-align: right;">'.html_print_button(__('Cancel'), 'cancel_button', false, 'cancel_button_palette_callback();', 'class="sub cancel"', true).'<span ="margin-right:10px;">&nbsp</span>'.html_print_button(__('Create'), 'create_button', false, 'create_button_palette_callback();', 'class="sub wand"', true).'</td>';
+            $form_items['button_create_row']['html'] = '<td align="left" colspan="2" ><div class="flex flex-end">'.html_print_button(__('Cancel'), 'cancel_button', false, 'cancel_button_palette_callback();', [ 'icon' => 'delete', 'mode' => 'secondary'], true).'<span ="margin-right:10px;">&nbsp</span>'.html_print_button(__('Create'), 'create_button', false, 'create_button_palette_callback();', [ 'icon' => 'wand'], true).'</div></td>';
 
             foreach ($form_items as $item => $item_options) {
                 echo '<tr id="'.$item.'"   class="'.implode(' ', (array) $item_options['items']).'">';
@@ -1054,14 +1102,18 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 <?php
                 $form_items_advance['map_linked_row']['html'] .= ob_get_clean();
             } else {
-                $visual_maps = array_reduce(
-                    $visual_maps,
-                    function ($all, $item) {
-                        $all[$item['id']] = $item['name'];
-                        return $all;
-                    },
-                    []
-                );
+                $visual_maps = [];
+                if (empty($visual_maps) === false) {
+                    $visual_maps = array_reduce(
+                        $visual_maps,
+                        function ($all, $item) {
+                            $all[$item['id']] = $item['name'];
+                            return $all;
+                        },
+                        []
+                    );
+                }
+
                 $form_items_advance['map_linked_row']['html'] .= html_print_select(
                     $visual_maps,
                     'map_linked',
@@ -1201,7 +1253,15 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 'donut_graph',
                 'color_cloud',
             ];
-            $form_items_advance['element_group_row']['html'] = '<td align="left">'.__('Restrict access to group').'</td>'.'<td align="left">'.html_print_select_groups(
+            $form_items_advance['element_group_row']['html'] = '<td align="left">';
+            $form_items_advance['element_group_row']['html'] .= __('Restrict access to group');
+            $form_items_advance['element_group_row']['html'] .= ui_print_help_tip(
+                __('If selected, restrict visualization of this item in the visual console to users who have access to selected group. This is also used on calculating child visual consoles.'),
+                true
+            );
+            $form_items_advance['element_group_row']['html'] .= '</td>';
+            $form_items_advance['element_group_row']['html'] .= '<td align="left">';
+            $form_items_advance['element_group_row']['html'] .= html_print_select_groups(
                 $config['id_user'],
                 'VR',
                 true,
@@ -1211,10 +1271,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background)
                 '',
                 '',
                 true
-            ).ui_print_help_tip(
-                __('If selected, restrict visualization of this item in the visual console to users who have access to selected group. This is also used on calculating child visual consoles.'),
-                true
-            ).'</td>';
+            );
+            $form_items_advance['element_group_row']['html'] .= '</td>';
 
     if (!$config['legacy_vc']) {
         $intervals = [
@@ -1393,8 +1451,8 @@ function visual_map_editor_print_toolbox()
         visual_map_print_button_editor('icon', __('Icon'), 'left', false, 'icon_min', true);
         visual_map_print_button_editor('clock', __('Clock'), 'left', false, 'clock_min', true);
         visual_map_print_button_editor('group_item', __('Group'), 'left', false, 'group_item_min', true);
-        visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item_min', true);
-        visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item_min', true);
+        visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item', true);
+        visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item', true);
         visual_map_print_button_editor('color_cloud', __('Color cloud'), 'left', false, 'color_cloud_min', true);
     if (isset($config['legacy_vc']) === false
         || (bool) $config['legacy_vc'] === false
@@ -1415,9 +1473,9 @@ function visual_map_editor_print_toolbox()
 
         $text_autosave = html_print_input_hidden('auto_save', true, true);
         visual_map_print_item_toolbox('auto_save', $text_autosave, 'right');
-        visual_map_print_button_editor('show_grid', __('Show grid'), 'right', true, 'grid_min', true);
-        visual_map_print_button_editor('edit_item', __('Update item'), 'right', true, 'config_min', true);
-        visual_map_print_button_editor('delete_item', __('Delete item'), 'right', true, 'delete_min', true);
+        visual_map_print_button_editor('show_grid', __('Show grid'), 'right', true, 'show_grid', true);
+        visual_map_print_button_editor('edit_item', __('Update item'), 'right', true, 'edit_item', true);
+        visual_map_print_button_editor('delete_item', __('Delete item'), 'right', true, 'delete_item', true);
         visual_map_print_button_editor('copy_item', __('Copy item'), 'right', true, 'copy_item', true);
     echo '</div>';
     echo '</div>';
@@ -1435,12 +1493,12 @@ function visual_map_print_button_editor(
 ) {
     html_print_button(
         $label,
-        'button_toolbox2',
+        $idDiv,
         $disabled,
-        "click_button_toolbox('".$idDiv."');",
+        'click_button_toolbox("'.$idDiv.'");',
         [
-            'icon' => $class,
-            'mode' => 'onlyIcon',
+            'class' => $class.' float-'.$float,
+            'mode'  => 'onlyIcon',
         ],
         false,
         $imageButton
diff --git a/pandora_console/include/lib/Dashboard/Widgets/BasicChart.php b/pandora_console/include/lib/Dashboard/Widgets/BasicChart.php
index 8041cf77d9..f5c321403a 100644
--- a/pandora_console/include/lib/Dashboard/Widgets/BasicChart.php
+++ b/pandora_console/include/lib/Dashboard/Widgets/BasicChart.php
@@ -561,7 +561,6 @@ class BasicChart extends Widget
         global $config;
 
         $size = parent::getSize();
-        hd($size, true);
 
         include_once $config['homedir'].'/include/functions_graph.php';
         include_once $config['homedir'].'/include/functions_agents.php';
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 2bff29229b..72f4c3fd99 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -4403,9 +4403,13 @@ span.log_zone_line_error {
   border: 1px solid red;
 }
 
-#toolbox > input {
-  border-width: 0px 1px 0px 0px;
-  border-color: lightgray;
+/* VISUAL MAP */
+#toolbox {
+  padding-top: 10px;
+}
+
+#toolbox button {
+  margin: 0px 10px;
 }
 
 #toolbox > input.service_min {
@@ -10422,12 +10426,24 @@ button.submitButton.onlyIcon.delete_item {
   -webkit-mask: url(../../images/delete.svg) no-repeat right / contain;
 }
 
+button.buttonButton.onlyIcon.edit_item,
+button.submitButton.onlyIcon.edit_item {
+  mask: url(../../images/edit.svg) no-repeat right / contain;
+  -webkit-mask: url(../../images/edit.svg) no-repeat right / contain;
+}
+
 button.buttonButton.onlyIcon.copy_item,
 button.submitButton.onlyIcon.copy_item {
   mask: url(../../images/copy.svg) no-repeat right / contain;
   -webkit-mask: url(../../images/copy.svg) no-repeat right / contain;
 }
 
+button.buttonButton.onlyIcon.show_grid,
+button.submitButton.onlyIcon.show_grid {
+  mask: url(../../images/WMI@svg.svg) no-repeat right / contain;
+  -webkit-mask: url(../../images/WMI@svg.svg) no-repeat right / contain;
+}
+
 button.buttonButton.link-create-item,
 button.submitButton.link-create-item {
   border-radius: 0;
diff --git a/pandora_console/include/styles/visual_maps.css b/pandora_console/include/styles/visual_maps.css
index f106dda76d..7bb126fcb7 100644
--- a/pandora_console/include/styles/visual_maps.css
+++ b/pandora_console/include/styles/visual_maps.css
@@ -99,15 +99,6 @@ div#vc-controls img.vc-qr {
   flex: inherit;
 }
 
-input.vs_button_ghost {
-  background-color: transparent;
-  border: 1px solid #82b92e;
-  color: #82b92e;
-  text-align: center;
-  padding: 4px 12px;
-  font-weight: bold;
-}
-
 #toolbox #auto_save {
   padding-top: 5px;
 }
diff --git a/pandora_console/operation/visual_console/legacy_view.php b/pandora_console/operation/visual_console/legacy_view.php
index c7831cc2a5..dab3ab39e7 100644
--- a/pandora_console/operation/visual_console/legacy_view.php
+++ b/pandora_console/operation/visual_console/legacy_view.php
@@ -202,20 +202,31 @@ if (!is_metaconsole()) {
                 'class' => 'invert_filter',
             ]
         ).'</a>';
-        ui_print_page_header(
+
+        ui_print_standard_header(
             $layout_name,
             'images/visual_console.png',
             false,
             'visual_console_view',
             false,
-            $options
+            $options,
+            [
+                [
+                    'link'  => '',
+                    'label' => __('Topology maps'),
+                ],
+                [
+                    'link'  => '',
+                    'label' => __('Visual console'),
+                ],
+            ]
         );
     }
 
-    // Set the hidden value for the javascript
+    // Set the hidden value for the javascript.
     html_print_input_hidden('metaconsole', 0);
 } else {
-    // Set the hidden value for the javascript
+    // Set the hidden value for the javascript.
     html_print_input_hidden('metaconsole', 1);
 }
 

From 5b0092c019598835be9f434c43525c6f25bbe9d7 Mon Sep 17 00:00:00 2001
From: daniel <daniel.barbero@artica.es>
Date: Thu, 4 May 2023 12:55:52 +0200
Subject: [PATCH 2/3] fix legacy VC pandora_enterprise#11054

---
 .../godmode/setup/setup_visuals.php           | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/pandora_console/godmode/setup/setup_visuals.php b/pandora_console/godmode/setup/setup_visuals.php
index dc7d91872d..caee126804 100755
--- a/pandora_console/godmode/setup/setup_visuals.php
+++ b/pandora_console/godmode/setup/setup_visuals.php
@@ -70,6 +70,10 @@ html_print_input_hidden('update_config', 1);
 
 $performance_variables_control = (array) json_decode(io_safe_output($config['performance_variables_control']));
 
+echo "<div id='dialog-legacy-vc' title='".__('Legacy visual console Information')."' class='invisible'>";
+echo "<p class='center'>".__('Visual console in legacy mode will no longer be supported as of LTS 772').'</p>';
+echo '</div>';
+
 // ----------------------------------------------------------------------
 // BEHAVIOUR CONFIGURATION
 // ----------------------------------------------------------------------
@@ -2243,9 +2247,22 @@ $(document).ready (function () {
     // Show the cache expiration conf or not.
     $("input[name=legacy_vc]").change(function (e) {
         if ($(this).prop("checked") === true) {
-            $("select#vc_default_cache_expiration_select").closest("tr").hide();
+            $("select#vc_default_cache_expiration_select").closest("td").hide();
+            $("#dialog-legacy-vc").dialog({
+                modal: true,
+                width: 500,
+                buttons:[
+                    {
+                        class: 'ui-widget ui-state-default ui-corner-all ui-button-text-only sub upd submit-next',
+                        text: "<?php echo __('OK'); ?>",
+                        click: function(){
+                            $(this).dialog("close");
+                        }
+                    }
+                ]
+            });
         } else {
-            $("select#vc_default_cache_expiration_select").closest("tr").show();
+            $("select#vc_default_cache_expiration_select").closest("td").show();
         }
     }).change();
 

From 75eae248a5da34f7b58b8e7ee7f1431621abc2a2 Mon Sep 17 00:00:00 2001
From: daniel <daniel.barbero@artica.es>
Date: Thu, 4 May 2023 13:27:34 +0200
Subject: [PATCH 3/3] fixed visual errors in legacy VC pandora_enterprise#11054

---
 .../operation/visual_console/legacy_view.php  | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/pandora_console/operation/visual_console/legacy_view.php b/pandora_console/operation/visual_console/legacy_view.php
index dab3ab39e7..1ded04792e 100644
--- a/pandora_console/operation/visual_console/legacy_view.php
+++ b/pandora_console/operation/visual_console/legacy_view.php
@@ -192,37 +192,37 @@ $options['view']['text'] = '<a href="index.php?sec=network&sec2=operation/visual
 ).'</a>';
 $options['view']['active'] = true;
 
+if (!$config['pure']) {
+    $options['pure']['text'] = '<a href="index.php?sec=network&sec2=operation/visual_console/render_view&id='.$id_layout.'&refr='.$refr.'&pure=1">'.html_print_image(
+        'images/full_screen.png',
+        true,
+        [
+            'title' => __('Full screen mode'),
+            'class' => 'invert_filter',
+        ]
+    ).'</a>';
+
+    ui_print_standard_header(
+        $layout_name,
+        'images/visual_console.png',
+        false,
+        'visual_console_view',
+        false,
+        $options,
+        [
+            [
+                'link'  => '',
+                'label' => __('Topology maps'),
+            ],
+            [
+                'link'  => '',
+                'label' => __('Visual console'),
+            ],
+        ]
+    );
+}
+
 if (!is_metaconsole()) {
-    if (!$config['pure']) {
-        $options['pure']['text'] = '<a href="index.php?sec=network&sec2=operation/visual_console/render_view&id='.$id_layout.'&refr='.$refr.'&pure=1">'.html_print_image(
-            'images/full_screen.png',
-            true,
-            [
-                'title' => __('Full screen mode'),
-                'class' => 'invert_filter',
-            ]
-        ).'</a>';
-
-        ui_print_standard_header(
-            $layout_name,
-            'images/visual_console.png',
-            false,
-            'visual_console_view',
-            false,
-            $options,
-            [
-                [
-                    'link'  => '',
-                    'label' => __('Topology maps'),
-                ],
-                [
-                    'link'  => '',
-                    'label' => __('Visual console'),
-                ],
-            ]
-        );
-    }
-
     // Set the hidden value for the javascript.
     html_print_input_hidden('metaconsole', 0);
 } else {