From ca70d5fdeb155b6379495d42af2dc6a764211d62 Mon Sep 17 00:00:00 2001 From: Pablo Aragon Date: Tue, 23 Apr 2024 13:56:56 +0200 Subject: [PATCH 1/2] 13608-Change interval selector to select2 WIP --- pandora_console/include/functions_html.php | 35 ++++++++++++++++--- .../lib/Dashboard/Widgets/BlockHistogram.php | 1 + pandora_console/include/styles/dashboards.css | 4 +++ pandora_console/include/styles/pandora.css | 4 +++ 4 files changed, 40 insertions(+), 4 deletions(-) diff --git a/pandora_console/include/functions_html.php b/pandora_console/include/functions_html.php index 6a92a99016..f9f21aaec5 100644 --- a/pandora_console/include/functions_html.php +++ b/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 ''; echo '
'; - 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 '  '.html_print_image( 'images/logs@svg.svg', @@ -2632,6 +2645,7 @@ function html_print_extended_select_for_time( ] ).''; echo '
'; + echo ""; + + if ($units_select2 === true) { + echo ' + + '; + } + $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; diff --git a/pandora_console/include/lib/Dashboard/Widgets/BlockHistogram.php b/pandora_console/include/lib/Dashboard/Widgets/BlockHistogram.php index 1484823518..1fceb77c3f 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/BlockHistogram.php +++ b/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, ], ]; diff --git a/pandora_console/include/styles/dashboards.css b/pandora_console/include/styles/dashboards.css index e94ce8f1d0..8a4f042b80 100644 --- a/pandora_console/include/styles/dashboards.css +++ b/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; +} diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index c28d3cc010..366c347cdd 100644 --- a/pandora_console/include/styles/pandora.css +++ b/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; } From 5c930c25899ef3fc26e3c7efa5d42036d94bcc34 Mon Sep 17 00:00:00 2001 From: Pablo Aragon Date: Wed, 24 Apr 2024 08:54:52 +0200 Subject: [PATCH 2/2] 13608-Change interval selector to select2 in widgets --- .../lib/Dashboard/Widgets/BasicChart.php | 1 + .../lib/Dashboard/Widgets/DataMatrix.php | 2 + .../lib/Dashboard/Widgets/custom_graph.php | 1 + .../Widgets/graph_module_histogram.php | 1 + .../include/lib/Dashboard/Widgets/netflow.php | 1 + .../lib/Dashboard/Widgets/single_graph.php | 179 +++++++++--------- .../lib/Dashboard/Widgets/sla_percent.php | 1 + .../include/lib/Dashboard/Widgets/top_n.php | 1 + 8 files changed, 99 insertions(+), 88 deletions(-) diff --git a/pandora_console/include/lib/Dashboard/Widgets/BasicChart.php b/pandora_console/include/lib/Dashboard/Widgets/BasicChart.php index cc25cb01cc..2b86e79d70 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/BasicChart.php +++ b/pandora_console/include/lib/Dashboard/Widgets/BasicChart.php @@ -423,6 +423,7 @@ class BasicChart 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, ], ]; diff --git a/pandora_console/include/lib/Dashboard/Widgets/DataMatrix.php b/pandora_console/include/lib/Dashboard/Widgets/DataMatrix.php index 337f33364e..9bf1c2d1bd 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/DataMatrix.php +++ b/pandora_console/include/lib/Dashboard/Widgets/DataMatrix.php @@ -317,6 +317,7 @@ class DataMatrix 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, ], ]; @@ -335,6 +336,7 @@ class DataMatrix 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(\'slice\', \''.__('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, ], ]; diff --git a/pandora_console/include/lib/Dashboard/Widgets/custom_graph.php b/pandora_console/include/lib/Dashboard/Widgets/custom_graph.php index 29c5c17372..dc98622960 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/custom_graph.php +++ b/pandora_console/include/lib/Dashboard/Widgets/custom_graph.php @@ -394,6 +394,7 @@ class CustomGraphWidget 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, ], ]; diff --git a/pandora_console/include/lib/Dashboard/Widgets/graph_module_histogram.php b/pandora_console/include/lib/Dashboard/Widgets/graph_module_histogram.php index 51e2b89496..37cc1763ca 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/graph_module_histogram.php +++ b/pandora_console/include/lib/Dashboard/Widgets/graph_module_histogram.php @@ -373,6 +373,7 @@ class GraphModuleHistogramWidget 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, ], ]; diff --git a/pandora_console/include/lib/Dashboard/Widgets/netflow.php b/pandora_console/include/lib/Dashboard/Widgets/netflow.php index 6c0aa76eca..57cad05f49 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/netflow.php +++ b/pandora_console/include/lib/Dashboard/Widgets/netflow.php @@ -207,6 +207,7 @@ class Netflow 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, ], ]; $chart_types = netflow_get_chart_types(); diff --git a/pandora_console/include/lib/Dashboard/Widgets/single_graph.php b/pandora_console/include/lib/Dashboard/Widgets/single_graph.php index a9f242723d..ca8ca67205 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/single_graph.php +++ b/pandora_console/include/lib/Dashboard/Widgets/single_graph.php @@ -449,6 +449,7 @@ class SingleGraphWidget 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, ], ]; @@ -527,99 +528,101 @@ class SingleGraphWidget extends Widget 'id' => 'div_projection_period', 'style' => $display_projection, 'arguments' => [ - 'name' => 'period_projection', - 'type' => 'interval', - 'value' => $values['period_projection'], - '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.').'\')', - ], - ]; - - $inputs['inputs']['row2'][] = [ - 'label' => __('Maximum'), - 'id' => 'div_period_maximum', - 'style' => $display_periodicity_chart, - 'arguments' => [ - 'name' => 'period_maximum', - 'id' => 'period_maximum', - 'type' => 'switch', - 'value' => $values['period_maximum'], - ], - ]; - - $inputs['inputs']['row2'][] = [ - 'label' => __('Minimum'), - 'id' => 'div_period_minimum', - 'style' => $display_periodicity_chart, - 'arguments' => [ - 'name' => 'period_minimum', - 'id' => 'period_minimum', - 'type' => 'switch', - 'value' => $values['period_minimum'], - ], - ]; - - $inputs['inputs']['row2'][] = [ - 'label' => __('Average'), - 'id' => 'div_period_average', - 'style' => $display_periodicity_chart, - 'arguments' => [ - 'name' => 'period_average', - 'id' => 'period_average', - 'type' => 'switch', - 'value' => $values['period_average'], - ], - ]; - - $inputs['inputs']['row2'][] = [ - 'label' => __('Summatory'), - 'id' => 'div_period_summatory', - 'style' => $display_periodicity_chart, - 'arguments' => [ - 'name' => 'period_summatory', - 'id' => 'period_summatory', - 'type' => 'switch', - 'value' => $values['period_summatory'], - ], - ]; - - $inputs['inputs']['row2'][] = [ - 'label' => __('Slice period'), - 'id' => 'div_period_slice_chart', - 'style' => $display_periodicity_chart, - 'arguments' => [ - 'name' => 'period_slice_chart', + 'name' => 'period_projection', 'type' => 'interval', - 'value' => (string) $values['period_slice_chart'], - 'custom_fields' => [ - SECONDS_1HOUR => __('1 hour'), - SECONDS_1DAY => __('1 day'), - SECONDS_1WEEK => __('1 week'), - SECONDS_1MONTH => __('1 month'), + 'value' => $values['period_projection'], + '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, + ], + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Maximum'), + 'id' => 'div_period_maximum', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_maximum', + 'id' => 'period_maximum', + 'type' => 'switch', + 'value' => $values['period_maximum'], ], - ], - ]; + ]; - $options_period_mode = [ - CUSTOM_GRAPH_AREA => __('Area'), - CUSTOM_GRAPH_LINE => __('Line'), - CUSTOM_GRAPH_VBARS => __('Vertical bars'), - ]; + $inputs['inputs']['row2'][] = [ + 'label' => __('Minimum'), + 'id' => 'div_period_minimum', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_minimum', + 'id' => 'period_minimum', + 'type' => 'switch', + 'value' => $values['period_minimum'], + ], + ]; - $inputs['inputs']['row2'][] = [ - 'label' => __('Type chart'), - 'id' => 'div_period_mode', - 'style' => $display_periodicity_chart, - 'arguments' => [ - 'type' => 'select', - 'fields' => $options_period_mode, - 'name' => 'period_mode', - 'selected' => $values['period_mode'], - 'return' => true, - ], - ]; + $inputs['inputs']['row2'][] = [ + 'label' => __('Average'), + 'id' => 'div_period_average', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_average', + 'id' => 'period_average', + 'type' => 'switch', + 'value' => $values['period_average'], + ], + ]; - return $inputs; + $inputs['inputs']['row2'][] = [ + 'label' => __('Summatory'), + 'id' => 'div_period_summatory', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_summatory', + 'id' => 'period_summatory', + 'type' => 'switch', + 'value' => $values['period_summatory'], + ], + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Slice period'), + 'id' => 'div_period_slice_chart', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'name' => 'period_slice_chart', + 'type' => 'interval', + 'value' => (string) $values['period_slice_chart'], + 'custom_fields' => [ + SECONDS_1HOUR => __('1 hour'), + SECONDS_1DAY => __('1 day'), + SECONDS_1WEEK => __('1 week'), + SECONDS_1MONTH => __('1 month'), + ], + 'units_select2' => true, + ], + ]; + + $options_period_mode = [ + CUSTOM_GRAPH_AREA => __('Area'), + CUSTOM_GRAPH_LINE => __('Line'), + CUSTOM_GRAPH_VBARS => __('Vertical bars'), + ]; + + $inputs['inputs']['row2'][] = [ + 'label' => __('Type chart'), + 'id' => 'div_period_mode', + 'style' => $display_periodicity_chart, + 'arguments' => [ + 'type' => 'select', + 'fields' => $options_period_mode, + 'name' => 'period_mode', + 'selected' => $values['period_mode'], + 'return' => true, + ], + ]; + + return $inputs; } diff --git a/pandora_console/include/lib/Dashboard/Widgets/sla_percent.php b/pandora_console/include/lib/Dashboard/Widgets/sla_percent.php index f3c7fb826e..6b39939300 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/sla_percent.php +++ b/pandora_console/include/lib/Dashboard/Widgets/sla_percent.php @@ -383,6 +383,7 @@ class SLAPercentWidget 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, ], ]; diff --git a/pandora_console/include/lib/Dashboard/Widgets/top_n.php b/pandora_console/include/lib/Dashboard/Widgets/top_n.php index e48a7885fd..00691bed67 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/top_n.php +++ b/pandora_console/include/lib/Dashboard/Widgets/top_n.php @@ -262,6 +262,7 @@ class TopNWidget 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, ], ];