#12153 Create button and ajax request

pandora_console/include/ajax/events.php

@@ -92,6 +92,8 @@ $get_id_source_event = get_parameter('get_id_source_event');
 $node_id = (int) get_parameter('node_id', 0);
 $settings_modal = get_parameter('settings', 0);
 $parameters_modal = get_parameter('parameters', 0);
+$draw_events_graph = get_parameter('drawEventsGraph', false);
+
 // User private filter.
 $current_filter = get_parameter('current_filter', 0);
 $private_filter_event = get_parameter('private_filter_event', 0);
@@ -2759,3 +2761,12 @@ if ($draw_row_response_info === true) {
     echo $output;
     return;
 }
+
+if ((bool) $draw_events_graph === true) {
+    $filter = get_parameter('filter');
+    $output = '';
+    hd($filter, true);
+    $output .= '<h1>grafica</h1>';
+    echo $output;
+    return;
+}

pandora_console/include/functions_events.php

@@ -6203,3 +6203,93 @@ function event_get_counter_extraId(array $event, ?array $filters)
 
     return $counters;
 }
+
+
+function event_print_graph(
+    $filter,
+    $start_utimestamp,
+    $end_utimestamp,
+    $graph_width,
+    $graph_height,
+) {
+    global $config;
+    $num_data = 10;
+    $num_intervals = ($num_data > 75) ? 75 : $num_data;
+
+    $period = ($end_utimestamp - $start_utimestamp);
+    if ($period <= SECONDS_6HOURS) {
+        $chart_time_format = 'H:i:s';
+    } else if ($period < SECONDS_1DAY) {
+        $chart_time_format = 'H:i';
+    } else if ($period < SECONDS_15DAYS) {
+        $chart_time_format = 'M d H:i';
+    } else if ($period < SECONDS_1MONTH) {
+        $chart_time_format = 'M d H\h';
+    } else {
+        $chart_time_format = 'M d H\h';
+    }
+
+    $interval_length = (int) ($period / $num_intervals);
+
+    $currentutimestamp = $start_utimestamp;
+    for ($i = 0; $i < $num_intervals; $i++) {
+        if ($currentutimestamp === $start_utimestamp) {
+            $filter['aggs']['messages']['filters']['filters'][$i]['range']['utimestamp'] = [
+                'gte' => $currentutimestamp,
+                'lte' => ($currentutimestamp + $interval_length),
+            ];
+        } else if ($currentutimestamp === $end_utimestamp) {
+            $filter['aggs']['messages']['filters']['filters'][$i]['range']['utimestamp'] = [
+                'gt'  => $currentutimestamp,
+                'lte' => $end_utimestamp,
+            ];
+        } else {
+            $filter['aggs']['messages']['filters']['filters'][$i]['range']['utimestamp'] = [
+                'gt'  => $currentutimestamp,
+                'lte' => ($currentutimestamp + $interval_length),
+            ];
+        }
+
+        $currentutimestamp += $interval_length;
+    }
+
+    $chart = [];
+    $labels = [];
+    $color = [];
+    $currentutimestamp = $start_utimestamp;
+    for ($i = 0; $i < $num_intervals; $i++,$currentutimestamp += $interval_length) {
+        $labels[] = date($chart_time_format, $currentutimestamp);
+        $chart[] = [
+            'y' => 1,
+            'x' => date($chart_time_format, $currentutimestamp),
+        ];
+        $color[] = '#82b92f';
+    }
+
+    $water_mark = [
+        'file' => $config['homedir'].'/images/logo_vertical_water.png',
+        'url'  => ui_get_full_url('/images/logo_vertical_water.png'),
+    ];
+
+    $options = [
+        'height'    => $graph_height,
+        'waterMark' => $water_mark,
+        'legend'    => ['display' => false],
+        'colors'    => $color,
+        'scales'    => [
+            'x' => [
+                'grid' => ['display' => false],
+            ],
+            'y' => [
+                'grid' => ['display' => false],
+            ],
+        ],
+        'labels'    => $labels,
+    ];
+
+    $graph = '<div style="width:100%; height: '.$graph_height.'px; margin-bottom: 10px;margin-top: 50px;">';
+    $graph .= vbar_graph($chart, $options);
+    $graph .= '</div>';
+
+    echo $graph;
+}

pandora_console/operation/events/events.php

@@ -2609,6 +2609,27 @@ try {
     // Open current filter quick reference.
     $active_filters_div = '<div class="filter_summary">';
 
+    $active_filters_div .= '<div>';
+    $active_filters_div .= '<div class="label box-shadow">'.__('Show graph').'</div>';
+
+    $active_filters_div .= html_print_div(
+        [
+            'class'   => 'content',
+            'style'   => 'padding-top: 5px !important;',
+            'content' => html_print_checkbox_switch_extended(
+                'show_event_graph',
+                1,
+                false,
+                false,
+                '',
+                '',
+                true
+            ),
+        ],
+        true
+    );
+    $active_filters_div .= '</div>';
+
     // Current filter.
     $active_filters_div .= '<div>';
     $active_filters_div .= '<div class="label box-shadow">'.__('Current filter').'</div>';
@@ -2695,6 +2716,43 @@ try {
         $show_hide_filters = 'invisible';
     }
 
+
+    // Print graphs
+    $graph_background = '';
+    if ($config['style'] === 'pandora') {
+        $graph_background = ' background-color: #fff;';
+    } else if ($config['style'] === 'pandora_black') {
+        $graph_background = ' background-color: #222;';
+    }
+
+    $graph_div = html_print_div(
+        [
+            'id'    => 'events-graph',
+            'class' => 'mrgn_top_10px mrg_btt_60 invisible',
+            'style' => 'text-align: left;'.$graph_background,
+        ],
+        true
+    );
+
+    $graph_div .= html_print_div(
+        [
+            'id'      => 'events-graph-loading',
+            'class'   => 'center invisible',
+            'content' => html_print_image(
+                'images/spinner.gif',
+                true,
+                [
+                    'title' => __('Loading'),
+                    'class' => 'invert_filter',
+                ]
+            ),
+        ],
+        true
+    );
+
+    hd(get_parameter('filter'), true);
+
+
     // Print datatable.
     html_print_div(
         [
@@ -2718,7 +2776,7 @@ try {
                         'inputs'        => [],
                         'extra_buttons' => $buttons,
                     ],
-                    'extra_html'                     => $active_filters_div,
+                    'extra_html'                     => $active_filters_div.$graph_div,
                     'pagination_options'             => [
                         [
                             $config['block_size'],
@@ -3266,6 +3324,19 @@ function reorder_tags_inputs() {
 }
 /* Tag management ends */
 $(document).ready( function() {
+    
+    let hidden_graph = true;
+    $('#checkbox-show_event_graph').on('change', function(){
+        if (hidden_graph == true) {
+            hidden_graph = false;
+            $('#events-graph').removeClass('invisible');
+            show_events_graph();
+        } else {
+            hidden_graph = true;
+            $('#events-graph').html();
+            $('#events-graph').addClass('invisible');
+        }
+    });
 
     let refresco = <?php echo get_parameter('refr', 0); ?>;
     $('#refresh option[value='+refresco+']').attr('selected', 'selected');
@@ -3646,4 +3717,29 @@ function show_event_dialo(event, dialog_page) {
     );
     return false;
 }
+
+function show_events_graph(){
+    var inputs = $("#events_form :input");
+    var values = {};
+    inputs.each(function() {
+        values[this.name] = $(this).val();
+    });
+
+    $.ajax({
+        method: 'POST',
+        url: '<?php echo ui_get_full_url('ajax.php'); ?>',
+        data: {
+            page: 'include/ajax/events',
+            drawEventsGraph: true,
+            filter: values
+        },
+        success: function (data){
+            $('#events-graph')
+            .empty()
+            .html(data);
+            console.log('success');
+            console.log(data);
+        }
+    });
+}
 </script>