#12153 Create button and ajax request
This commit is contained in:
parent
b9f94050a2
commit
874cb9c52a
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue