From cef5c478e961c57abc00900e1a8af0d9a1de1474 Mon Sep 17 00:00:00 2001
From: Jonathan <jonathan.leon@pandorafms.com>
Date: Thu, 2 Mar 2023 17:17:10 +0100
Subject: [PATCH] Graph viewer and graph template item editor visual

---
 .../operation/reporting/graph_viewer.php      | 131 ++++++++++++------
 1 file changed, 89 insertions(+), 42 deletions(-)

diff --git a/pandora_console/operation/reporting/graph_viewer.php b/pandora_console/operation/reporting/graph_viewer.php
index c77d02245e..e4e7a7ce48 100644
--- a/pandora_console/operation/reporting/graph_viewer.php
+++ b/pandora_console/operation/reporting/graph_viewer.php
@@ -312,31 +312,43 @@ if ($view_graph) {
     }
 
     $period_label = human_time_description_raw($period);
-    echo '<form method="POST" action="index.php?sec=reporting&sec2=operation/reporting/graph_viewer&view_graph=1&id=$id_graph">';
-    echo "<table class='databox filters w100p' cellpadding='4' cellspacing='4'>";
-    echo '<tr>';
+    $searchForm = '<form method="POST" action="index.php?sec=reporting&sec2=operation/reporting/graph_viewer&view_graph=1&id='.$id_graph.'">';
+    $searchForm .= "<table class='filter-table-adv w100p' cellpadding='4' cellspacing='4'>";
+    $searchForm .= '<tr>';
 
-    echo '<td>';
-    echo '<b>'.__('Date').'</b>';
-    echo '</td>';
-
-    echo '<td>';
-    echo html_print_input_text('date', $date, '', 12, 10, true).' ';
-    echo '</td>';
-
-    echo '<td>';
-    echo html_print_input_text('time', $time, '', 7, 7, true).' ';
-    echo '</td>';
-
-    echo "<td class='datos'>";
-    echo '<b>'.__('Time range').'</b>';
-    echo '</td>';
-
-    echo "<td class='datos'>";
-    echo html_print_extended_select_for_time('period', $period, '', '', '0', 10, true);
-    echo '</td>';
-
-    echo "<td class='datos'>";
+    $searchForm .= '<td class="w30p">';
+    $searchForm .= html_print_label_input_block(
+        __('Date'),
+        html_print_input_text(
+            'date',
+            $date,
+            '',
+            '',
+            10,
+            true
+        )
+    );
+    $searchForm .= '</td><td class="datos w30p">';
+    $searchForm .= html_print_label_input_block(
+        __('Time'),
+        html_print_input_text(
+            'time',
+            $time,
+            '',
+            '',
+            7,
+            true
+        )
+    );
+    $searchForm .= '</td>';
+    $searchForm .= "<td class='datos w30p'>";
+    $searchForm .= html_print_label_input_block(
+        __('Time range'),
+        html_print_extended_select_for_time('period', $period, '', '', '0', 10, true, 'width:100%')
+    );
+    $searchForm .= '</td>';
+    $searchForm .= '</tr><tr>';
+    $searchForm .= "<td class='datos w30p'>";
     $stackeds = [];
     $stackeds[0] = __('Graph defined');
     $stackeds[CUSTOM_GRAPH_AREA] = __('Area');
@@ -348,32 +360,67 @@ if ($view_graph) {
     $stackeds[CUSTOM_GRAPH_HBARS] = __('Horizontal Bars');
     $stackeds[CUSTOM_GRAPH_VBARS] = __('Vertical Bars');
     $stackeds[CUSTOM_GRAPH_PIE] = __('Pie');
-    html_print_select($stackeds, 'stacked', $stacked, '', '', -1, false, false);
-    echo '</td>';
+    $searchForm .= html_print_label_input_block(__('Type'), html_print_select($stackeds, 'stacked', $stacked, '', '', -1, true, false, true, '', false, 'width:100%'));
+    $searchForm .= '</td>';
+    $searchForm .= "<td class='datos w30p'>";
+    $searchForm .= html_print_label_input_block(
+        __('Equalize maxiddmum thresholds').ui_print_help_tip(
+            __('If an option is selected, all graphs will have the highest value from all modules included in the graph as a maximum threshold'),
+            true
+        ),
+        html_print_checkbox(
+            'threshold',
+            CUSTOM_GRAPH_BULLET_CHART_THRESHOLD,
+            $check,
+            true,
+            false,
+            '',
+            false
+        )
+    );
+    $searchForm .= '</div>';
+    $searchForm .= '</td>';
 
-    echo "<td class='datos'>";
-    echo "<div class='float-left' id='thresholdDiv' name='thresholdDiv'>&nbsp;&nbsp;<b>".__('Equalize maxiddmum thresholds').'</b>'.ui_print_help_tip(__('If an option is selected, all graphs will have the highest value from all modules included in the graph as a maximum threshold'), true);
-
-    html_print_checkbox('threshold', CUSTOM_GRAPH_BULLET_CHART_THRESHOLD, $check, false, false, '', false);
-    echo '</div>';
-    echo '</td>';
-
-    echo "<td class='datos'>";
+    $searchForm .= "<td class='datos w30p'>";
     $zooms = [];
     $zooms[0] = __('Graph defined');
     $zooms[1] = __('Zoom x1');
     $zooms[2] = __('Zoom x2');
     $zooms[3] = __('Zoom x3');
-    html_print_select($zooms, 'zoom', $zoom, '', '', 0);
-    echo '</td>';
+    $searchForm .= html_print_label_input_block(__('Zoom'), html_print_select($zooms, 'zoom', $zoom, '', '', 0, true, false, true, '', false, 'width:100%'));
+    $searchForm .= '</td>';
 
-    echo "<td class='datos'>";
-    echo "<input id='submit-refresh' type=submit value='".__('Refresh')."' class='sub upd'>";
-    echo '</td>';
+    $searchForm .= '</tr>';
+    $searchForm .= '</table>';
+    $searchForm .= html_print_div(
+        [
+            'class'   => 'action-buttons',
+            'content' => html_print_submit_button(
+                __('Filter'),
+                'submit-refresh',
+                false,
+                [
+                    'mode' => 'mini',
+                    'icon' => 'search',
+                ],
+                true
+            ),
+        ],
+        true
+    );
+    $searchForm .= '</form>';
 
-    echo '</tr>';
-    echo '</table>';
-    echo '</form>';
+    ui_toggle(
+        $searchForm,
+        '<span class="subsection_header_title">'.__('Filters').'</span>',
+        'filter_form',
+        '',
+        true,
+        false,
+        '',
+        'white-box-content',
+        'box-flat white_table_graph fixed_filter_bar'
+    );
 
     if ($graph_return) {
         echo "<table id='graph-container' class='databox filters' cellpadding='0' cellspacing='0' style='height:100%;width:100%;overflow:hidden;'>";