Merge branch 'ent-12196-problemas-con-la-vista-mobile' into 'develop'

fix cv in mobile pandora_enterprise#12196

See merge request artica/pandorafms!6538

pandora_console/include/ajax/visual_console.ajax.php

@@ -96,9 +96,6 @@ if ($force_remote_check) {
 if ($load_css_cv === true) {
     $uniq = get_parameter('uniq', 0);
     $ratio = get_parameter('ratio', 0);
-
-    $output = css_label_styles_visual_console($uniq, $ratio);
-    echo $output;
     return;
 }
 

pandora_console/include/functions_visual_map.php

@@ -4548,54 +4548,4 @@ function visual_map_load_client_resources()
             closedir($dh);
         }
     }
-}
+}
-
-
-/**
- * Labels styles visual console.
- *
- * @param string  $uniq  Uniq str.
- * @param integer $ratio Ratio.
- *
- * @return string Css output.
- */
-function css_label_styles_visual_console($uniq, $ratio=1)
-{
-    global $config;
-    $output = '';
-    // Horrible trick! due to the use of tinyMCE
-    // it is necessary to modify specific classes of each
-    // of the visual consoles.
-    $output .= '.c-'.$uniq.' a {color: #3f3f3f } ';
-    $output .= '.c-'.$uniq.' .label p strong span {display: inline-block !important; line-height: normal !important} ';
-    $output .= '.c-'.$uniq.' *:not(.parent_graph p table tr td span) { font-size: '.(8 * $ratio).'pt; line-height:'.(8 * ($ratio)).'pt; }';
-    $output .= '.c-'.$uniq.' .visual-console-item-label table tr td { padding: 0; margin: 0; white-space: pre-wrap; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_4pt, .c-'.$uniq.' .visual_font_size_4pt * { font-size: '.(4 * $ratio).'pt !important; line-height:'.(4 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_6pt, .c-'.$uniq.' .visual_font_size_6pt * { font-size: '.(6 * $ratio).'pt !important; line-height:'.(6 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_8pt, .c-'.$uniq.' .visual_font_size_8pt * { font-size: '.(8 * $ratio).'pt !important; line-height:'.(8 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_10pt, .c-'.$uniq.' .visual_font_size_10pt * { font-size: '.(10 * $ratio).'pt !important; line-height:'.(10 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_12pt, .c-'.$uniq.' .visual_font_size_12pt * { font-size: '.(12 * $ratio).'pt !important; line-height:'.(12 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_14pt, .c-'.$uniq.' .visual_font_size_14pt * { font-size: '.(14 * $ratio).'pt !important; line-height:'.(14 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_18pt, .c-'.$uniq.' .visual_font_size_18pt * { font-size: '.(18 * $ratio).'pt !important; line-height:'.(18 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_24pt, .c-'.$uniq.' .visual_font_size_24pt * { font-size: '.(24 * $ratio).'pt !important; line-height:'.(24 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_28pt, .c-'.$uniq.' .visual_font_size_28pt * { font-size: '.(28 * $ratio).'pt !important; line-height:'.(28 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_36pt, .c-'.$uniq.' .visual_font_size_36pt * { font-size: '.(36 * $ratio).'pt !important; line-height:'.(36 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_48pt, .c-'.$uniq.' .visual_font_size_48pt * { font-size: '.(48 * $ratio).'pt !important; line-height:'.(48 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_60pt, .c-'.$uniq.' .visual_font_size_60pt * { font-size: '.(60 * $ratio).'pt !important; line-height:'.(60 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_72pt, .c-'.$uniq.' .visual_font_size_72pt * { font-size: '.(72 * $ratio).'pt !important; line-height:'.(72 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_84pt, .c-'.$uniq.' .visual_font_size_84pt * { font-size: '.(84 * $ratio).'pt !important; line-height:'.(84 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_96pt, .c-'.$uniq.' .visual_font_size_96pt * { font-size: '.(96 * $ratio).'pt !important; line-height:'.(96 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_116pt, .c-'.$uniq.' .visual_font_size_116pt * { font-size: '.(116 * $ratio).'pt !important; line-height:'.(116 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_128pt, .c-'.$uniq.' .visual_font_size_128pt * { font-size: '.(128 * $ratio).'pt !important; line-height:'.(128 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_140pt, .c-'.$uniq.' .visual_font_size_140pt * { font-size: '.(140 * $ratio).'pt !important; line-height:'.(140 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_154pt, .c-'.$uniq.' .visual_font_size_154pt * { font-size: '.(154 * $ratio).'pt !important; line-height:'.(154 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual_font_size_196pt, .c-'.$uniq.' .visual_font_size_196pt * { font-size: '.(196 * $ratio).'pt !important; line-height:'.(196 * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .flot-text, .c-'.$uniq.' .flot-text * { font-size: '.(($config['font_size'] - 2) * $ratio).'pt !important; line-height:'.(($config['font_size'] - 2) * ($ratio)).'pt !important; }';
-    $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.time {font-size: '.(50 * $ratio).'px !important; line-height: '.(50 * $ratio).'px !important;}';
-    $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.date {font-size: '.(25 * $ratio).'px !important; line-height: '.(25 * $ratio).'px !important;}';
-    $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.timezone {font-size: '.(25 * $ratio).'px !important; line-height: '.(25 * $ratio).'px !important;}';
-    $output .= '.c-'.$uniq.' .visual-console-item .donut-graph * {font-size: '.(8 * $ratio).'px !important; line-height: '.(8 * $ratio).'px !important;}';
-    $output .= '.c-'.$uniq.' .visual-console-item .donut-graph g rect {width:'.(25 * $ratio).' !important; height: '.(15 * $ratio).' !important;}';
-
-    return $output;
-}

pandora_console/include/javascript/pandora.js

@@ -1440,22 +1440,56 @@ function openURLTagWindow(url) {
  */
 
 function defineTinyMCE(selector) {
+  var defaultToolbar =
+    "undo redo | blocks | bold italic | code | alignleft aligncenter alignright alignjustify | outdent indent";
+
   tinymce.init({
     selector: selector,
-    plugins: "preview, searchreplace, table, nonbreaking, link, image",
+    plugins:
+      "preview, searchreplace, table, nonbreaking, link, image, code, codesample",
     promotion: false,
-    branding: false
+    branding: false,
+    codesample_languages: [
+      { text: "HTML/XML", value: "markup" },
+      { text: "JavaScript", value: "javascript" },
+      { text: "CSS", value: "css" },
+      { text: "PHP", value: "php" },
+      { text: "Ruby", value: "ruby" },
+      { text: "Python", value: "python" },
+      { text: "Java", value: "java" },
+      { text: "C", value: "c" },
+      { text: "C#", value: "csharp" },
+      { text: "C++", value: "cpp" }
+    ],
+    toolbar: defaultToolbar
   });
 }
 
 function defineTinyMCEDark(selector) {
+  var defaultToolbar =
+    "undo redo | blocks | bold italic | code | alignleft aligncenter alignright alignjustify | outdent indent";
+
   tinymce.init({
     selector: selector,
-    plugins: "preview, searchreplace, table, nonbreaking, link, image",
+    plugins:
+      "preview, searchreplace, table, nonbreaking, link, image, code, codesample",
     promotion: false,
     branding: false,
     skin: "oxide-dark",
-    content_css: "dark"
+    content_css: "dark",
+    codesample_languages: [
+      { text: "HTML/XML", value: "markup" },
+      { text: "JavaScript", value: "javascript" },
+      { text: "CSS", value: "css" },
+      { text: "PHP", value: "php" },
+      { text: "Ruby", value: "ruby" },
+      { text: "Python", value: "python" },
+      { text: "Java", value: "java" },
+      { text: "C", value: "c" },
+      { text: "C#", value: "csharp" },
+      { text: "C++", value: "cpp" }
+    ],
+    toolbar: defaultToolbar
   });
 }
 

pandora_console/include/javascript/pandora_dashboards.js

@@ -1294,8 +1294,6 @@ function refresh_pagination_callback(
 
 // eslint-disable-next-line no-unused-vars
 function dashboardLoadVC(settings) {
-  var headerMobileFix = 40;
-
   var container = document.getElementById(
     "visual-console-container-" + settings.cellId
   );
@@ -1307,36 +1305,36 @@ function dashboardLoadVC(settings) {
 
   var beforeUpdate = function(items, visualConsole, props, size) {
     var ratio_visualconsole = props.height / props.width;
-    var ratio_w = size.width / props.width;
+    var ratio_ajax = size.width / props.width;
-    var ratio_h = size.height / props.height;
+    // 1.- Pantalla vertical:
-    var acum_height = props.height;
+    if (size.width < size.height) {
-    var acum_width = props.width;
+      props.width = size.width;
-
+      props.height = size.width * ratio_visualconsole;
-    props.width = size.width;
-    props.height = size.width * ratio_visualconsole;
-
-    var ratio = ratio_w;
-    if (settings.mobile != undefined && settings.mobile === true) {
-      if (props.height < props.width) {
-        if (props.height > size.height) {
-          ratio = ratio_h;
-          props.height = size.height;
-          props.width = size.height / ratio_visualconsole;
-        }
-      } else {
-        ratio = ratio_w;
-        var height = (acum_height * size.width) / acum_width;
-        props.height = height;
-        props.width = height / ratio_visualconsole;
-      }
     } else {
-      if (props.height > size.height) {
+      // 2.- Pantalla horizontal:
-        ratio = ratio_h;
+      // 2.1. - Consola visual es alargada.
-        props.height = size.height;
+      if (props.width < props.height) {
-        props.width = size.height / ratio_visualconsole;
+        props.width = size.width;
+        props.height = size.width * ratio_visualconsole;
+      } else {
+        // 2.2. - Consola visual es estrecha.
+        var aspect_ratio_cv = props.width / props.height;
+        var aspect_ratio_screen = size.width / size.height;
+        // 2.2.1 - Consola visual si su aspect ratio es menor al de la pantalla ahustamos al alto.
+        if (aspect_ratio_cv < aspect_ratio_screen) {
+          ratio_ajax = size.height / props.height;
+          var width = props.width * (size.height / props.height);
+          props.width = width;
+          props.height = size.height;
+        } else {
+          // 2.2.2 - Consola visual si su aspect ratio es mayor al de la pantalla ahustamos al ancho.
+          props.width = size.width;
+          props.height = size.width * ratio_visualconsole;
+        }
       }
     }
 
+    props.ratio = ratio_ajax;
     $.ajax({
       method: "post",
       url: settings.baseUrl + "ajax.php",
@@ -1355,6 +1353,8 @@ function dashboardLoadVC(settings) {
         // Add the datetime when the item was received.
         items.map(function(item) {
           item["receivedAt"] = receivedAt;
+          item["cellId"] = settings.cellId;
+          item["ratio"] = ratio_ajax;
           return item;
         });
 
@@ -1383,21 +1383,18 @@ function dashboardLoadVC(settings) {
           var regex_hash = /(hash=)[^&]+(&?)/gi;
           var replacement_hash = "$1" + props.hash + "$2";
 
-          /*
           var regex_width = /(width=)[^&]+(&?)/gi;
           var replacement_width = "$1" + size.width + "$2";
 
           var regex_height = /(height=)[^&]+(&?)/gi;
-          var replacement_height =
+          var replacement_height = "$1" + size.height + "$2";
-            "$1" + (size.height + headerMobileFix) + "$2";
-            */
 
           // Change the URL (if the browser has support).
           if ("history" in window) {
             var href = window.location.href.replace(regex, replacement);
             href = href.replace(regex_hash, replacement_hash);
-            //href = href.replace(regex_width, replacement_width);
+            href = href.replace(regex_width, replacement_width);
-            //href = href.replace(regex_height, replacement_height);
+            href = href.replace(regex_height, replacement_height);
             window.history.replaceState({}, document.title, href);
           }
 
@@ -1436,6 +1433,12 @@ function dashboardLoadVC(settings) {
     return item;
   });
 
+  var ratio = settings.ratio;
+  settings.items.map(function(item) {
+    item["ratio"] = ratio;
+    return item;
+  });
+
   var visualConsoleManager = createVisualConsole(
     container,
     settings.props,
@@ -1457,9 +1460,7 @@ function dashboardLoadVC(settings) {
   }
 
   if (settings.mobile_view_orientation_vc === true) {
-    $(window).on("orientationchange", function() {
+    $(window).on("orientationchange", function(event) {
-      $(container).width($(window).height());
-      $(container).height($(window).width() - headerMobileFix);
       //Remove spinner change VC.
       container.classList.remove("is-updating");
       container.classList.remove("cv-overflow");
@@ -1484,9 +1485,33 @@ function dashboardLoadVC(settings) {
       divParent.appendChild(divSpinner);
       container.appendChild(divParent);
 
+      let width = 0;
+      let height = 0;
+      let isMobile = true;
+      // If it is detected that it is a real mobile not the web inspector
+      // deducts 45 more for the header and footer of the mobile.
+      const fixHeader = 45;
+      if (navigator && navigator.userAgentData != null) {
+        isMobile = navigator.userAgentData.mobile;
+      }
+      if (event.target.screen.orientation.angle === 0) {
+        width = $(window).height();
+        if (isMobile) {
+          width += fixHeader;
+        }
+
+        height = $(window).width();
+      } else {
+        width = $(window).height();
+        height = $(window).width() - fixHeader;
+        if (isMobile) {
+          height -= fixHeader;
+        }
+      }
+
       var dimensions = {
-        width: $(window).height(),
+        width: width,
-        height: $(window).width() - 40
+        height: height
       };
 
       visualConsoleManager.changeDimensionsVc(dimensions, interval);

pandora_console/include/javascript/pandora_events.js

@@ -1497,7 +1497,11 @@ function show_dialog(dialog) {
 $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
   const requestBody = ajaxOptions.data;
   try {
-    if (requestBody && requestBody.includes("drawConsoleSound=1")) {
+    if (
+      requestBody &&
+      typeof requestBody.includes === "function" &&
+      requestBody.includes("drawConsoleSound=1")
+    ) {
       console.log(
         "AJAX request sent with drawConsoleSound=1:",
         ajaxOptions.url
@@ -1659,7 +1663,11 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
 $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
   const requestBody = ajaxOptions.data;
   try {
-    if (requestBody && requestBody.includes("drawConsoleSound=1")) {
+    if (
+      requestBody &&
+      typeof requestBody.includes === "function" &&
+      requestBody.includes("drawConsoleSound=1")
+    ) {
       console.log(
         "AJAX request sent with drawConsoleSound=1:",
         ajaxOptions.url

pandora_console/include/lib/Dashboard/Widgets/maps_made_by_user.php

@@ -417,7 +417,7 @@ class MapsMadeByUser extends Widget
 
         $size['width'] = ($size['width'] + 30);
 
-        $ratio = $visualConsole->adjustToViewport($size, 'dashboard');
+        $ratio = $visualConsole->adjustToViewport($size);
         $visualConsoleData = $visualConsole->toArray();
 
         $uniq = uniqid();
@@ -461,10 +461,6 @@ class MapsMadeByUser extends Widget
             $ratio
         );
 
-        $output .= '<style id="css_cv_'.$uniq.'" type="text/css">';
-        $output .= css_label_styles_visual_console($uniq, $ratio);
-        $output .= '</style>';
-
         $visualConsoleItems = array_reduce(
             $visualConsoleItems,
             function ($carry, $item) {
@@ -486,7 +482,7 @@ class MapsMadeByUser extends Widget
                 ),
                 'ratio'                      => $ratio,
                 'size'                       => $size,
-                'cellId'                     => $this->cellId,
+                'cellId'                     => (string) $this->cellId,
                 'hash'                       => User::generatePublicHash(),
                 'id_user'                    => $config['id_user'],
                 'page'                       => 'include/ajax/visual_console.ajax',

pandora_console/include/lib/ITSM/Manager.php

@@ -353,7 +353,6 @@ class Manager
                 }
             }
         } catch (\Exception $e) {
-            hd($e->getMessage());
             $error_upload = $e->getMessage();
         }
 
@@ -1499,7 +1498,6 @@ class Manager
             $result = $ITSM->pingItsmtoPandora($path);
         } catch (Throwable $e) {
             echo $e->getMessage();
-            hd($e->getMessage(), true);
             $result = false;
             exit;
         }

pandora_console/include/rest-api/index.php

@@ -125,17 +125,14 @@ if ($getVisualConsole === true) {
     }
 
     $size = get_parameter('size', []);
-
     $width = get_parameter('widthScreen', 0);
 
-    $mode = get_parameter('mode', '');
-
     $ratio = 0;
     if (isset($size) === true
         && is_array($size) === true
         && empty($size) === false
     ) {
-        $ratio = $visualConsole->adjustToViewport($size, $mode);
+        $ratio = $visualConsole->adjustToViewport($size);
         $visualConsoleData = $visualConsole->toArray();
     }
 

pandora_console/include/rest-api/models/Model.php

@@ -214,52 +214,41 @@ abstract class Model
 
 
     /**
-     * Calculate ratio for mobile.
+     * Calculate ratio for CV.
      *
-     * @param array  $size Size viewport.
+     * @param array $size Size viewport.
-     * @param string $mode Mode calculate (dashboard or mobile).
      *
      * @return float Ratio.
      */
-    public function adjustToViewport($size, $mode='')
+    public function adjustToViewport(array $size)
     {
-        global $config;
         $ratio_visualconsole = $this->getRatio();
-        $ratio_w = ($size['width'] / $this->data['width']);
+        $ratio = ($size['width'] / $this->data['width']);
-        $ratio_h = ($size['height'] / $this->data['height']);
+        // 1.- Pantalla vertical:
-        $acum_height = $this->data['height'];
+        if ($size['width'] < $size['height']) {
-        $acum_width = $this->data['width'];
+            $this->data['width'] = $size['width'];
-
+            $this->data['height'] = ($size['width'] * $ratio_visualconsole);
-        $this->data['width'] = $size['width'];
-        $this->data['height'] = ($size['width'] * $ratio_visualconsole);
-
-        $ratio = $ratio_w;
-        if ($mode === 'mobile') {
-            if ((bool) $config['mobile_view_orientation_vc'] === true) {
-                if ($this->data['height'] < $this->data['width']) {
-                    if ($this->data['height'] > $size['height']) {
-                        $ratio = $ratio_h;
-                        $this->data['height'] = $size['height'];
-                        $this->data['width'] = ($size['height'] / $ratio_visualconsole);
-                    }
-                } else {
-                    $ratio = $ratio_w;
-                    $height = (($acum_height * ($size['width'])) / $acum_width);
-                    $this->data['height'] = $height;
-                    $this->data['width'] = ($height / $ratio_visualconsole);
-                }
-            } else {
-                if ($this->data['height'] > $this->data['width']) {
-                    $ratio = $ratio_h;
-                    $this->data['height'] = $size['height'];
-                    $this->data['width'] = ($size['height'] / $ratio_visualconsole);
-                }
-            }
         } else {
-            if ($this->data['height'] > $size['height']) {
+            // 2.- Pantalla horizontal:
-                $ratio = $ratio_h;
+            // 2.1. - Consola visual es alargada.
-                $this->data['height'] = $size['height'];
+            if ($this->data['width'] < $this->data['height']) {
-                $this->data['width'] = ($size['height'] / $ratio_visualconsole);
+                $this->data['width'] = $size['width'];
+                $this->data['height'] = ($size['width'] * $ratio_visualconsole);
+            } else {
+                // 2.2. - Consola visual es estrecha.
+                $aspect_ratio_cv = ($this->data['width'] / $this->data['height']);
+                $aspect_ratio_screen = ($size['width'] / $size['height']);
+                // 2.2.1 - Consola visual si su aspect ratio es menor al de la pantalla ahustamos al alto.
+                if ($aspect_ratio_cv < $aspect_ratio_screen) {
+                    $ratio = ($size['height'] / $this->data['height']);
+                    $width = ($this->data['width'] * ($size['height'] / $this->data['height']));
+                    $this->data['width'] = $width;
+                    $this->data['height'] = $size['height'];
+                } else {
+                    // 2.2.2 - Consola visual si su aspect ratio es mayor al de la pantalla ahustamos al ancho.
+                    $this->data['width'] = $size['width'];
+                    $this->data['height'] = ($size['width'] * $ratio_visualconsole);
+                }
             }
         }
 

pandora_console/include/rest-api/models/VisualConsole/Item.php

@@ -806,13 +806,6 @@ class Item extends CachedModel
             $row['link'] = static::buildLink($row);
         }
 
-        if ($ratio != 0) {
-            $row['width'] = ($row['width'] * $ratio);
-            $row['height'] = ($row['height'] * $ratio);
-            $row['pos_x'] = ($row['pos_x'] * $ratio);
-            $row['pos_y'] = ($row['pos_y'] * $ratio);
-        }
-
         if ($widthRatio != 0) {
             $row['width'] = ($row['width'] * $widthRatio);
             $row['pos_x'] = ($row['pos_x'] * $widthRatio);

pandora_console/include/rest-api/models/VisualConsole/Items/BarsGraph.php

@@ -284,9 +284,6 @@ final class BarsGraph extends Item
                 }
             } else {
                 $size = $config['font_size'];
-                if ($ratio != 0) {
-                    $size = ($config['font_size'] * $ratio);
-                }
 
                 $options = [
                     'width'     => $width,

pandora_console/include/rest-api/models/VisualConsole/Items/Clock.php

@@ -429,16 +429,10 @@ final class Clock extends Item
         // Default values.
         if ((int) $data['width'] === 0) {
             $data['width'] = 100;
-            if ($ratio != 0) {
-                $data['width'] *= $ratio;
-            }
         }
 
         if ((int) $data['height'] === 0) {
             $data['height'] = 50;
-            if ($ratio != 0) {
-                $data['height'] *= $ratio;
-            }
         }
 
         return $data;

pandora_console/include/rest-api/models/VisualConsole/Items/EventsHistory.php

@@ -127,11 +127,6 @@ final class EventsHistory extends Item
         if ((int) $data['width'] === 0 && (int) $data['height'] === 0) {
             $data['width'] = 420;
             $data['height'] = 80;
-
-            if ($ratio != 0) {
-                $data['width'] = ($data['width'] * $ratio);
-                $data['height'] = ($data['height'] * $ratio);
-            }
         }
 
         // $data['height'] = ($data['height'] - 20);

pandora_console/include/rest-api/models/VisualConsole/Items/Line.php

@@ -205,13 +205,6 @@ final class Line extends Model
             throw new \Exception('error fetching the data from the DB');
         }
 
-        if ($ratio != 0) {
-            $row['width'] = ($row['width'] * $ratio);
-            $row['height'] = ($row['height'] * $ratio);
-            $row['pos_x'] = ($row['pos_x'] * $ratio);
-            $row['pos_y'] = ($row['pos_y'] * $ratio);
-        }
-
         if ($widthRatio != 0) {
             $row['width'] = ($row['width'] * $widthRatio);
             $row['pos_x'] = ($row['pos_x'] * $widthRatio);

pandora_console/include/rest-api/models/VisualConsole/Items/ModuleGraph.php

@@ -325,10 +325,6 @@ final class ModuleGraph extends Item
         $width = (int) $data['width'];
         $height = (int) $data['height'];
 
-        if ($height == 0) {
-            $height = 15;
-        }
-
         // Custom graph.
         if (empty($customGraphId) === false) {
             $customGraph = \db_get_row('tgraph', 'id_graph', $customGraphId);
@@ -340,7 +336,12 @@ final class ModuleGraph extends Item
                 'field_order'
             );
 
-            $hackLegendHight = (28 * count($sources));
+            $total_labels = $config['items_combined_charts'];
+            if (count($sources) < $config['items_combined_charts']) {
+                $total_labels = count($sources);
+            }
+
+            $hackLegendHight = (25.5 * $total_labels);
 
             // Trick for legend monstruosity.
             if ((int) $customGraph['stacked'] === CUSTOM_GRAPH_STACKED_LINE
@@ -348,16 +349,20 @@ final class ModuleGraph extends Item
                 || (int) $customGraph['stacked'] === CUSTOM_GRAPH_AREA
                 || (int) $customGraph['stacked'] === CUSTOM_GRAPH_LINE
             ) {
-                if ($width < 200 || $height < 200) {
+                if (($height - $hackLegendHight) <= 50) {
                     $showLegend = false;
                 } else {
-                    $height = ($height - 10 - $hackLegendHight);
+                    $height = ($height - $hackLegendHight);
-                    $showLegend = true;
                 }
             } else if ((int) $customGraph['stacked'] === CUSTOM_GRAPH_VBARS) {
                 $height = ($height - 40);
             }
 
+            if ($height <= 0) {
+                $showLegend = false;
+                $height = 100;
+            }
+
             $params = [
                 'period'             => $period,
                 'width'              => $width,
@@ -394,11 +399,8 @@ final class ModuleGraph extends Item
             }
 
             // Trick for legend monstruosity.
-            if ($width < 200 || $height < 200) {
+            if ((bool) $showLegend === true) {
-                $showLegend = false;
+                $height -= 30;
-            } else {
-                $height = ($height - 30);
-                $showLegend = true;
             }
 
             $params = [

pandora_console/include/rest-api/models/VisualConsole/Items/NetworkLink.php

@@ -370,13 +370,6 @@ final class NetworkLink extends Model
             throw new \Exception('error fetching the data from the DB');
         }
 
-        if ($ratio != 0) {
-            $row['width'] = ($row['width'] * $ratio);
-            $row['height'] = ($row['height'] * $ratio);
-            $row['pos_x'] = ($row['pos_x'] * $ratio);
-            $row['pos_y'] = ($row['pos_y'] * $ratio);
-        }
-
         if ($widthRatio != 0) {
             $row['width'] = ($row['width'] * $widthRatio);
             $row['pos_x'] = ($row['pos_x'] * $widthRatio);

pandora_console/include/rest-api/models/VisualConsole/Items/Odometer.php

@@ -251,11 +251,6 @@ final class Odometer extends Item
         if ((int) $data['width'] === 0 && (int) $data['height'] === 0) {
             $data['width'] = 250;
             $data['height'] = 140;
-
-            if ($ratio != 0) {
-                $data['width'] = ($data['width'] * $ratio);
-                $data['height'] = ($data['height'] * $ratio);
-            }
         }
 
         $data['height'] = ($data['height'] - 20);

pandora_console/include/rest-api/models/VisualConsole/Items/StaticGraph.php

@@ -242,13 +242,8 @@ final class StaticGraph extends Item
         if ($width === 0 || $height === 0) {
             if (isset($imagePath) === true && $imagePath !== false) {
                 $sizeImage = getimagesize($config['homedir'].'/'.$imagePath);
-                if ($ratio != 0) {
+                $data['width'] = $sizeImage[0];
-                    $data['width'] = ($sizeImage[0] * $ratio);
+                $data['height'] = $sizeImage[1];
-                    $data['height'] = ($sizeImage[1] * $ratio);
-                } else {
-                    $data['width'] = $sizeImage[0];
-                    $data['height'] = $sizeImage[1];
-                }
             }
         }
 

pandora_console/include/styles/dashboards.css

@@ -51,6 +51,11 @@ h1 {
   margin-bottom: 0.5rem;
 }
 
+.visual-console-container-dashboard h1 {
+  font-size: inherit;
+  margin-bottom: inherit;
+}
+
 .container-fluid {
   margin-top: 5px;
 }
@@ -580,9 +585,6 @@ div#main_pure {
   margin: 0 !important;
   padding: 0 !important;
 }
-#main_page > .ui-content div.label > p {
-  margin: 0;
-}
 
 form.modal-dashboard ul.wizard li label {
   max-width: 30%;

pandora_console/include/styles/pandora.css

@@ -12402,10 +12402,12 @@ div.parent_graph > p.legend_background > table > tbody > tr {
   margin-top: -2px;
 }
 
+/*
 div#visual-console-container * {
   font-size: unset;
   line-height: unset;
 }
+*/
 
 .combo-oid-button {
   display: flex !important;

pandora_console/include/visual-console-client/vc.main.css

@@ -32,6 +32,10 @@
 .visual-console-item * {
   overflow: visible;
   font-family: inherit;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 .visual-console-item.is-editing {
@@ -734,6 +738,11 @@ div.module-graph .gauge_d3_class {
   border: 2px solid #002f33;
 }
 
+p {
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+}
+
 /* Styles for the solid icons */
 
 .fa {

pandora_console/mobile/include/style/main.css

@@ -36,7 +36,7 @@
 }
 
 @font-face {
-  font-family: "lato";
+  font-family: "Lato";
   src: url("../../../fonts/lato.woff2") format("woff");
   font-weight: 400;
 }
@@ -46,7 +46,7 @@
   font-size: 12px;
 }
 
-body {
+body:not(.visual-console-container-dashboard) {
   background-color: white;
   border-style: none;
   direction: ltr;
@@ -1522,6 +1522,10 @@ div.nodata_container {
   overflow: hidden !important;
 }
 
+div.container-center div.visual-console-container-dashboard a {
+  text-decoration: none !important;
+}
+
 .visual-console-container-dashboard a:visited {
   color: inherit !important;
 }
@@ -2810,11 +2814,11 @@ div#start_date-container
 }
 
 div#graph_content > div.parent_graph {
-  width: 100% !important;
+  margin: 0 auto;
-  display: flex;
+}
-  flex-direction: column;
+
-  flex-wrap: nowrap;
+div#container {
-  align-items: center;
+  text-align: left;
 }
 
 .logout-text {
@@ -3281,3 +3285,38 @@ table#list_servers tbody td span.data a {
     margin-left: 10px !important;
   }
 }
+
+div.visual-console-container-dashboard table > tbody > tr:nth-child(even),
+table[id^="service-table-"] > tbody > tr:nth-child(even) {
+  background-color: transparent;
+}
+
+.ui-page-theme-a div.visual-console-container-dashboard a,
+html .ui-bar-a div.visual-console-container-dashboard a,
+html .ui-body-a div.visual-console-container-dashboard a,
+html body .ui-group-theme-a div.visual-console-container-dashboard a {
+  font-weight: inherit;
+}
+
+.ui-overlay-a div.visual-console-container-dashboard,
+.ui-page-theme-a div.visual-console-container-dashboard,
+.ui-page-theme-a .ui-panel-wrapper div.visual-console-container-dashboard {
+  text-shadow: none;
+}
+
+body div.visual-console-container-dashboard {
+  line-height: 16pt;
+}
+
+body div.visual-console-container-dashboard .line {
+  line-height: 0px;
+}
+
+div.visual-console-container-dashboard table,
+div.visual-console-container-dashboard fieldset {
+  padding: 0px !important;
+}
+
+.ui-page-theme-a div.visual-console-container-dashboard a {
+  color: inherit !important;
+}

pandora_console/mobile/include/ui.class.php

@@ -534,7 +534,6 @@ class Ui
             <script>
                 function show_hide_password(e, url) {
                     let inputPass = e.target.previousElementSibling.firstChild;
-                    console.log(inputPass);
                 
                     if (inputPass.type === "password") {
                         inputPass.type = "text";
@@ -1035,9 +1034,8 @@ class Ui
                 dashboardLoadVC(settings);
                 if(settings.mobile_view_orientation_vc === false) {
                     $("#main_page > .ui-content").css("display", "block");
-
                     $(".container-center").css("padding", "50% 0");
-                    $(".container-center").css("height", "100vh");
+		            $(".container-center").css("height", "100vh");
                     $(".visual-console-container-dashboard").css("display", "block");
                     $(".visual-console-container-dashboard").css("transform-origin", "left top");
                     $(".visual-console-container-dashboard").css("transform", "rotate(-90deg) translate(-100%)");
@@ -1047,8 +1045,6 @@ class Ui
                         $(".container-center").css("overflow", "auto");
                     }
                 }
-
-
             });
         </script>'
         );

pandora_console/mobile/operation/groups.php

@@ -28,15 +28,9 @@ class Groups
     function __construct()
     {
         $system = System::getInstance();
-
         if ($system->checkACL($this->acl)) {
             $this->correct_acl = true;
-
             $this->groups = $this->getListGroups();
-            // ~ foreach ($this->groups as $key => $group) {
-                // ~ $this->status[$key] = $group['status'];
-                // ~ unset($this->groups[$key]['status']);
-            // ~ }
         } else {
             $this->correct_acl = false;
         }
@@ -71,7 +65,6 @@ class Groups
     private function show_group()
     {
         $ui = Ui::getInstance();
-
         $ui->createPage();
         $ui->createDefaultHeader(
             __('Groups'),
@@ -88,10 +81,10 @@ class Groups
         $ui->showFooter(false);
         $ui->beginContent();
 
-            $ui->contentAddHtml('<div class="list_groups" data-role="collapsible-set" data-theme="a" data-content-theme="d">');
+        $ui->contentAddHtml('<div class="list_groups" data-role="collapsible-set" data-theme="a" data-content-theme="d">');
-                $count = 0;
+            $count = 0;
-                $url_agent = 'index.php?page=agents&group=%s&status=%s';
+            $url_agent = 'index.php?page=agents&group=%s&status=%s';
-                $url_modules = 'index.php?page=modules&group=%s&status=%s';
+            $url_modules = 'index.php?page=modules&group=%s&status=%s';
 
         foreach ($this->groups as $group) {
             // Calculate entire row color.
@@ -157,7 +150,15 @@ class Groups
             $agents_counter .= ']';
 
             if ($group['_iconImg_'] !== null) {
-                $img_group = html_print_image('images/'.$group['_iconImg_'], true, false, false, false, false, true);
+                $img_group = html_print_image(
+                    'images/'.groups_get_icon($group['_id_']),
+                    true,
+                    false,
+                    false,
+                    false,
+                    false,
+                    true
+                );
             }
 
             $group['_iconImg_'] = ($group['_iconImg_'] == '') ? 'world.png' : $group['_iconImg_'];
@@ -218,15 +219,7 @@ class Groups
             $count++;
         }
 
-            $ui->contentAddHtml('</div>');
+        $ui->contentAddHtml('</div>');
-
-            // $ui->contentAddHtml(ob_get_clean());
-            // ~ $table = new Table();
-            // ~ $table->setId('list_groups');
-            // ~ $table->setClass('group_view');
-            // ~ $table->importFromHash($this->groups);
-            // ~ $table->setRowClass($this->status);
-            // ~ $ui->contentAddHtml($table->getHTML());
         $ui->endContent();
         $ui->showPage();
     }

pandora_console/mobile/operation/module_graph.php

@@ -276,12 +276,8 @@ class ModuleGraph
             $(document).ready(function() {
                 function load_graph() {
                     $("#loading_graph").show();
-
+                    var heigth = $(document).width() / 2;
-                    var heigth = $(document).height()
+                    var width = $(document).width();
-                            - $(".ui-header").height()
-                            - $(".ui-collapsible").height()
-                            - 55;
-                    var width = $(document).width() - 25;
                     ajax_get_graph($("#id_module").val(), heigth, width, $("#server_id").val());
                 }
 

pandora_console/mobile/operation/visualmap.php

@@ -146,8 +146,7 @@ class Visualmap
             $ui->retrieveViewPort();
         }
 
-        // Header.
+        $this->height -= 45;
-        $this->height -= 40;
 
         $this->visualmap = db_get_row(
             'tlayout',
@@ -287,7 +286,8 @@ class Visualmap
             ];
         }
 
-        $ratio_t = $visualConsole->adjustToViewport($size, 'mobile');
+        $ratio_t = $visualConsole->adjustToViewport($size);
+
         $visualConsoleData = $visualConsole->toArray();
 
         $uniq = uniqid();
@@ -333,10 +333,6 @@ class Visualmap
             $ratio_t
         );
 
-        $output .= '<style id="css_cv_'.$uniq.'" type="text/css">';
-        $output .= css_label_styles_visual_console($uniq, $ratio_t);
-        $output .= '</style>';
-
         $visualConsoleItems = array_reduce(
             $visualConsoleItems,
             function ($carry, $item) {

visual_console_client/src/Item.ts

@@ -19,7 +19,8 @@ import {
   addMovementListener,
   debounce,
   addResizementListener,
-  t
+  t,
+  parseFloatOr
 } from "./lib";
 import TypedEvent, { Listener, Disposable } from "./lib/TypedEvent";
 import { FormContainer, InputGroup } from "./Form";
@@ -65,8 +66,9 @@ export interface ItemProps extends Position, Size {
   aclGroupId: number | null;
   cacheExpiration: number | null;
   colorStatus: string;
-  cellId: number | null;
+  cellId: string | null;
   alertOutline: boolean;
+  ratio: number | null;
 }
 
 export interface ItemClickEvent {
@@ -143,8 +145,9 @@ export function itemBasePropsDecoder(data: AnyObject): ItemProps | never {
     aclGroupId: parseIntOr(data.aclGroupId, null),
     cacheExpiration: parseIntOr(data.cacheExpiration, null),
     colorStatus: notEmptyStringOr(data.colorStatus, "#CCC"),
-    cellId: parseIntOr(data.cellId, null),
+    cellId: notEmptyStringOr(data.cellId, ""),
     alertOutline: parseBoolean(data.alertOutline),
+    ratio: parseFloatOr(data.ratio, null),
     ...sizePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
     ...positionPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
   };
@@ -506,6 +509,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
 
     // Resize element.
     this.resizeElement(this.itemProps.width, this.itemProps.height);
+
     // Set label position.
     this.changeLabelPosition(this.itemProps.labelPosition);
   }
@@ -533,6 +537,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     if (this.props.isOnTop) {
       box.classList.add("is-on-top");
     }
+
     box.style.left = `${this.props.x}px`;
     box.style.top = `${this.props.y}px`;
 
@@ -639,26 +644,6 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
       table.appendChild(row);
       table.appendChild(emptyRow2);
       table.style.textAlign = "center";
-
-      // Change the table size depending on its position.
-      switch (this.props.labelPosition) {
-        case "up":
-        case "down":
-          if (this.props.width > 0) {
-            table.style.width = `${this.props.width}px`;
-            table.style.height = "";
-          }
-          break;
-        case "left":
-        case "right":
-          if (this.props.height > 0) {
-            table.style.width = "";
-            table.style.height = `${this.props.height}px`;
-          }
-          break;
-      }
-
-      // element.innerHTML = this.props.label;
       element.appendChild(table);
     }
 
@@ -822,6 +807,14 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     prevMeta: ItemMeta | null = null
   ): void {
     if (prevProps) {
+      if (this.props.ratio !== 1 && this.props.type != ItemType.LINE_ITEM) {
+        this.elementRef.style.transform = `scale(${
+          this.props.ratio ? this.props.ratio : 1
+        })`;
+        this.elementRef.style.transformOrigin = "left top";
+        this.elementRef.style.minWidth = "max-content";
+        this.elementRef.style.minHeight = "max-content";
+      }
       this.updateDomElement(this.childElementRef);
     }
     // Move box.
@@ -835,6 +828,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
         this.updateDomElement(this.childElementRef);
       }
     }
+
     // Resize box.
     if (!prevProps || this.sizeChanged(prevProps, this.props)) {
       this.resizeElement(this.props.width, this.props.height);
@@ -852,6 +846,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     if (oldLabelHtml !== newLabelHtml) {
       this.labelElementRef.innerHTML = newLabelHtml;
     }
+
     // Change label position.
     if (!prevProps || prevProps.labelPosition !== this.props.labelPosition) {
       this.changeLabelPosition(this.props.labelPosition);
@@ -864,6 +859,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
         this.elementRef.classList.remove("is-on-top");
       }
     }
+
     // Change link.
     if (prevProps && prevProps.isLinkEnabled !== this.props.isLinkEnabled) {
       const container = this.createContainerDomElement();

visual_console_client/src/VisualConsole.ts

@@ -300,11 +300,11 @@ export default class VisualConsole {
           item.props.type !== 13 &&
           item.props.type !== 21
         ) {
-          const movement_x = e.newPosition.x - e.item.props.x;
+          const movementX = e.newPosition.x - e.item.props.x;
-          const movement_y = e.newPosition.y - e.item.props.y;
+          const movementY = e.newPosition.y - e.item.props.y;
 
-          let newX = item.props.x + movement_x;
+          let newX = item.props.x + movementX;
-          let newY = item.props.y + movement_y;
+          let newY = item.props.y + movementY;
 
           if (newX > this.props.width) {
             newX = this.props.width;
@@ -682,6 +682,7 @@ export default class VisualConsole {
         return;
       }
       let line = this.elementsById[lineId] as Line;
+
       if (line.props) {
         let startX = line.props.startPosition.x;
         let startY = line.props.startPosition.y;
@@ -792,7 +793,20 @@ export default class VisualConsole {
    */
   public addElement(item: AnyObject, context: this = this) {
     try {
+      if (item.ratio == null) {
+        item.ratio = 1;
+      }
+
+      item.x *= item.ratio;
+      item.y *= item.ratio;
+      if (item.type == ItemType.LINE_ITEM) {
+        item.startX *= item.ratio;
+        item.startY *= item.ratio;
+        item.endX *= item.ratio;
+        item.endY *= item.ratio;
+      }
       const itemInstance = itemInstanceFrom(item);
+
       // Add the item to the list.
       context.elementsById[itemInstance.props.id] = itemInstance;
       context.elementIds.push(itemInstance.props.id);
@@ -815,6 +829,15 @@ export default class VisualConsole {
         itemInstance.onResizeFinished(context.handleElementResizementFinished);
       }
 
+      if (item.ratio !== 1 && item.type != ItemType.LINE_ITEM) {
+        itemInstance.elementRef.style.transform = `scale(${
+          item.ratio ? item.ratio : 1
+        })`;
+        itemInstance.elementRef.style.transformOrigin = "left top";
+        itemInstance.elementRef.style.minWidth = "max-content";
+        itemInstance.elementRef.style.minHeight = "max-content";
+      }
+
       // Add the item to the DOM.
       context.containerRef.append(itemInstance.elementRef);
       return itemInstance;
@@ -854,6 +877,16 @@ export default class VisualConsole {
         } else {
           // Update item.
           try {
+            if (item.ratio != null) {
+              item.x *= item.ratio;
+              item.y *= item.ratio;
+              if (item.type == ItemType.LINE_ITEM) {
+                item.startX *= item.ratio;
+                item.startY *= item.ratio;
+                item.endX *= item.ratio;
+                item.endY *= item.ratio;
+              }
+            }
             this.elementsById[item.id].props = decodeProps(item);
           } catch (error) {
             console.error(
@@ -1103,8 +1136,14 @@ export default class VisualConsole {
     position: Position,
     element: Item<ItemProps>
   ): Position {
-    let x = position.x + element.elementRef.clientWidth / 2;
+    let ratio = 1;
-    let y = position.y + element.elementRef.clientHeight / 2;
+    if (element.props.ratio != null) {
+      ratio = element.props.ratio;
+    }
+
+    let x = position.x + (element.elementRef.clientWidth / 2) * ratio;
+    let y = position.y + (element.elementRef.clientHeight / 2) * ratio;
+
     if (
       typeof element.props.label !== "undefined" ||
       element.props.label !== "" ||
@@ -1114,33 +1153,38 @@ export default class VisualConsole {
         case "up":
           y =
             position.y +
-            (element.elementRef.clientHeight +
+            ((element.elementRef.clientHeight +
               element.labelElementRef.clientHeight) /
-              2;
+              2) *
+              ratio;
           break;
         case "down":
           y =
             position.y +
-            (element.elementRef.clientHeight -
+            ((element.elementRef.clientHeight -
               element.labelElementRef.clientHeight) /
-              2;
+              2) *
+              ratio;
           break;
         case "right":
           x =
             position.x +
-            (element.elementRef.clientWidth -
+            ((element.elementRef.clientWidth -
               element.labelElementRef.clientWidth) /
-              2;
+              2) *
+              ratio;
           break;
         case "left":
           x =
             position.x +
-            (element.elementRef.clientWidth +
+            ((element.elementRef.clientWidth +
               element.labelElementRef.clientWidth) /
-              2;
+              2) *
+              ratio;
           break;
       }
     }
+
     return { x, y };
   }
 
@@ -1196,12 +1240,14 @@ export default class VisualConsole {
         width: 0,
         height: 0,
         lineWidth: this.props.relationLineWidth,
-        color: notEmptyStringOr(child.props.colorStatus, "#CCC")
+        color: notEmptyStringOr(child.props.colorStatus, "#CCC"),
+        ratio: parent.props.ratio
       }),
       itemMetaDecoder({
         receivedAt: new Date()
       })
     );
+
     // Save a reference to the line item.
     this.relations[identifier] = line;
 

visual_console_client/src/items/BasicChart.ts

@@ -71,7 +71,7 @@ export default class BasicChart extends Item<BasicChartProps> {
 
     let value = "";
     if (this.props.value !== null) {
-      value = this.number_format(this.props.value, false, "", 2, 1000);
+      value = this.numberFormat(this.props.value, false, "", 2, 1000);
     }
 
     const moduleValue = document.createElement("h2");
@@ -131,7 +131,7 @@ export default class BasicChart extends Item<BasicChartProps> {
 
     let value = "";
     if (this.props.value !== null) {
-      value = this.number_format(this.props.value, false, "", 2, 1000);
+      value = this.numberFormat(this.props.value, false, "", 2, 1000);
     }
 
     const moduleValue = document.createElement("h2");
@@ -164,31 +164,31 @@ export default class BasicChart extends Item<BasicChartProps> {
     }
   }
 
-  protected number_format(
+  protected numberFormat(
     number: number,
-    force_integer: boolean,
+    forceInteger: boolean,
     unit: string,
-    short_data: number,
+    shortData: number,
     divisor: number
   ) {
     divisor = typeof divisor !== "undefined" ? divisor : 1000;
     var decimals = 2;
 
-    // Set maximum decimal precision to 99 in case short_data is not set.
+    // Set maximum decimal precision to 99 in case shortData is not set.
-    if (!short_data) {
+    if (!shortData) {
-      short_data = 99;
+      shortData = 99;
     }
 
-    if (force_integer) {
+    if (forceInteger) {
       if (Math.round(number) != number) {
         return "";
       }
     } else {
-      short_data++;
+      shortData++;
-      const aux_decimals = this.pad("1", short_data, 0);
+      const auxDecimals = this.pad("1", shortData, 0);
       number =
-        Math.round(number * Number.parseInt(aux_decimals)) /
+        Math.round(number * Number.parseInt(auxDecimals)) /
-        Number.parseInt(aux_decimals);
+        Number.parseInt(auxDecimals);
     }
 
     var shorts = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"];

visual_console_client/src/items/NetworkLink.ts

@@ -100,6 +100,11 @@ export default class NetworkLink extends Line {
   );
 
   protected updateDomElement(element: HTMLElement): void {
+    if (this.itemProps.ratio != null) {
+      this.itemProps.x /= this.itemProps.ratio;
+      this.itemProps.y /= this.itemProps.ratio;
+    }
+
     super.updateDomElement(element);
 
     let {
@@ -119,6 +124,11 @@ export default class NetworkLink extends Line {
       labelStartHeight
     } = this.props;
 
+    if (this.itemProps.ratio != null) {
+      this.itemProps.x *= this.itemProps.ratio;
+      this.itemProps.y *= this.itemProps.ratio;
+    }
+
     const svgs = element.getElementsByTagName("svg");
     let line;
     let svg;

visual_console_client/src/items/Odometer.ts

@@ -226,8 +226,8 @@ export default class Odometer extends Item<OdometerProps> {
     script.onload = () => {
       odometerB.style.transform = `rotate(${rotate}turn)`;
     };
-    var url_pandora = window.location.pathname.split("/")[1];
+    var urlPandora = window.location.pathname.split("/")[1];
-    script.src = `${document.dir}/${url_pandora}/include/javascript/pandora_alerts.js`;
+    script.src = `${document.dir}/${urlPandora}/include/javascript/pandora_alerts.js`;
     odometerA.appendChild(h1);
     odometerA.appendChild(h2);
     odometerContainer.appendChild(odometerB);
@@ -277,7 +277,7 @@ export default class Odometer extends Item<OdometerProps> {
 
   /**
    * To update the content element.
-   * @override Item.updateDomElement
+   * @override resize
    */
   public resize(width: number): void {
     this.resizeElement(this.props.width);

visual_console_client/src/items/Percentile.ts

@@ -286,7 +286,7 @@ export default class Percentile extends Item<PercentileProps> {
 
   /**
    * To update the content element.
-   * @override Item.updateDomElement
+   * @override resizeElement
    */
   public resizeElement(width: number, height: number): void {
     if (this.props.percentileType === "progress-bar") {
@@ -298,7 +298,7 @@ export default class Percentile extends Item<PercentileProps> {
 
   /**
    * To update the content element.
-   * @override Item.updateDomElement
+   * @override resize
    */
   public resize(width: number): void {
     this.resizeElement(width, width);

visual_console_client/src/main.css

@@ -32,6 +32,10 @@
 .visual-console-item * {
   overflow: visible;
   font-family: inherit;
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 .visual-console-item.is-editing {
@@ -733,3 +737,8 @@ div.module-graph .gauge_d3_class {
   height: 0px;
   border: 2px solid #002f33;
 }
+
+p {
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+}