13608-Change interval selector to select2 WIP

pandora_console/include/functions_html.php

@@ -2505,7 +2505,8 @@ function html_print_extended_select_for_time(
     $no_change=false,
     $allow_zero=0,
     $units=null,
-    $script_input=''
+    $script_input='',
+    $units_select2=false
 ) {
     global $config;
     $admin = is_user_admin($config['id_user']);
@@ -2595,7 +2596,19 @@ function html_print_extended_select_for_time(
     echo '</div>';
 
     echo '<div id="'.$uniq_name.'_manual" class="inline_flex">';
-        html_print_input_text($uniq_name.'_text', $selected, '', $size, 255, false, $readonly, false, '', $class, $script_input);
+        html_print_input_text(
+            $uniq_name.'_text',
+            $selected,
+            '',
+            $size,
+            255,
+            false,
+            $readonly,
+            false,
+            '',
+            $class.(($units_select2 === true) ? ' w100p' : ''),
+            $script_input
+        );
 
         html_print_input_hidden($name, $selected, false, $uniq_name);
         html_print_select(
@@ -2619,7 +2632,7 @@ function html_print_extended_select_for_time(
             false,
             false,
             false,
-            false
+            $units_select2
         );
         echo '&nbsp&nbsp<a href="javascript:">'.html_print_image(
             'images/logs@svg.svg',
@@ -2632,6 +2645,7 @@ function html_print_extended_select_for_time(
             ]
         ).'</a>';
     echo '</div>';
+
     echo "<script type='text/javascript'>
 		$(document).ready (function () {
 			period_select_init('".$uniq_name."', ".(($allow_zero) ? 1 : 0).");
@@ -2652,6 +2666,18 @@ function html_print_extended_select_for_time(
             }, 100);
         }
 	</script>";
+
+    if ($units_select2 === true) {
+        echo '
+        <script>
+            $(document).ready (function () {
+                $("#'.$uniq_name.'_units").select2();
+                $("#'.$uniq_name.'_units").data("select2").$container.addClass("mrgn_lft_10px_imp");
+            });
+        </script>
+        ';
+    }
+
     $returnString = ob_get_clean();
 
     if ($return) {
@@ -6335,7 +6361,8 @@ function html_print_input($data, $wrapper='div', $input_only=false)
                 ((isset($data['no_change']) === true) ? $data['no_change'] : ''),
                 ((isset($data['allow_zero']) === true) ? $data['allow_zero'] : ''),
                 ((isset($data['units']) === true) ? $data['units'] : null),
-                ((isset($data['script_input']) === true) ? $data['script_input'] : '')
+                ((isset($data['script_input']) === true) ? $data['script_input'] : ''),
+                ((isset($data['units_select2']) === true) ? $data['units_select2'] : '')
             );
         break;
 

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

@@ -306,6 +306,7 @@ class BlockHistogram extends Widget
                 'style_icon'    => 'flex-grow: 0',
                 'script'        => 'check_period_warning(this, \''.__('Warning').'\', \''.__('Displaying items with extended historical data can have an impact on system performance. We do not recommend that you use intervals longer than 30 days, especially if you combine several of them in a report, dashboard or visual console.').'\')',
                 'script_input'  => 'check_period_warning_manual(\'period\', \''.__('Warning').'\', \''.__('Displaying items with extended historical data can have an impact on system performance. We do not recommend that you use intervals longer than 30 days, especially if you combine several of them in a report, dashboard or visual console.').'\')',
+                'units_select2' => true,
             ],
         ];
 

pandora_console/include/styles/dashboards.css

@@ -1017,3 +1017,7 @@ ul.select2-selection__rendered > li.select2-selection__choice {
   .select2-results__option {
   line-break: anywhere;
 }
+
+#period_manual > input[type="text"] {
+  box-sizing: border-box !important;
+}

pandora_console/include/styles/pandora.css

@@ -7273,6 +7273,10 @@ div.graph div.legend table {
   margin-left: 10px;
 }
 
+.mrgn_lft_10px_imp {
+  margin-left: 10px !important;
+}
+
 .mrgn_lft_15px {
   margin-left: 15px;
 }