add periodicity graph pandora_enterprise#9640

This commit is contained in:
daniel 2023-10-18 12:49:47 +02:00
parent 8d7f253e91
commit 4fb7e1719b
7 changed files with 845 additions and 385 deletions

View File

@ -1007,7 +1007,7 @@ function mainAgentsModules()
echo "<td class='center' style='text-align:left;'>";
$win_handle = dechex(crc32($module_id.$module['name']));
$graph_type = return_graphtype(modules_get_agentmodule_type($module_id));
$link = "winopeng_var('".'operation/agentes/stat_win.php?'."type=$graph_type&".'period='.SECONDS_1DAY.'&'.'id='.$module_id.'&'.'refresh='.SECONDS_10MINUTES."', 'day_".$win_handle."', 800, 480)";
$link = "winopeng_var('".'operation/agentes/stat_win.php?'."type=$graph_type&".'period='.SECONDS_1DAY.'&id='.$module_id.'&period_graph=0&refresh='.SECONDS_10MINUTES."', 'day_".$win_handle."', 800, 480)";
echo '<a href="javascript:'.$link.'">';

View File

@ -1283,7 +1283,7 @@ if (check_login()) {
}
if (is_snapshot_data($module['datos']) === false) {
$link = 'winopeng_var(\'operation/agentes/stat_win.php?type='.$graph_type.'&amp;period='.SECONDS_1DAY.'&amp;id='.$module['id_agente_modulo'].'&amp;refresh='.SECONDS_10MINUTES.'&amp;draw_events='.$draw_events.'\', \'day_'.$win_handle.'\', 800, 480)';
$link = 'winopeng_var(\'operation/agentes/stat_win.php?type='.$graph_type.'&amp;period='.SECONDS_1DAY.'&amp;id='.$module['id_agente_modulo'].'&amp;refresh='.SECONDS_10MINUTES.'&amp;period_graph=0&amp;draw_events='.$draw_events.'\', \'day_'.$win_handle.'\', 800, 480)';
$graphButtons[] = html_print_anchor(
[
'href' => 'javascript:'.$link,
@ -1499,9 +1499,14 @@ if (check_login()) {
$output = '';
$graph_data = get_parameter('graph_data', '');
$params = json_decode(base64_decode($graph_data), true);
$form_data = json_decode(base64_decode(get_parameter('form_data', [])), true);
$server_id = (int) get_parameter('server_id', 0);
include_once $config['homedir'].'/include/functions_graph.php';
$tab_active = get_parameter('active', 'tabs-chart-module-graph');
$output .= draw_form_stat_win($form_data, $tab_active);
// Metaconsole connection to the node.
if (is_metaconsole() === true && empty($server_id) === false) {
$server = metaconsole_get_connection_by_id($server_id);
@ -1553,7 +1558,15 @@ if (check_login()) {
$output .= $graph['chart'];
$output .= '</div>';
} else {
$output .= grafico_modulo_sparse($params);
if ($tab_active === 'tabs-chart-module-graph') {
$output .= grafico_modulo_sparse($params);
} else {
$output .= graphic_periodicity_module($params);
if ($params['compare'] === 'separated') {
$params['date'] = ($params['date'] - $params['period']);
$output .= graphic_periodicity_module($params);
}
}
}
}

View File

@ -2422,6 +2422,147 @@ function graphic_combined_module(
}
/**
* Draw periodicity graph
*
* @param array $params Params for draw chart.
*
* @return string Html output.
*/
function graphic_periodicity_module(array $params): string
{
$date_array = [];
$date_array['period'] = $params['period'];
$date_array['final_date'] = $params['date'];
$date_array['start_date'] = ($params['date'] - $params['period']);
$array_data = fullscale_data(
$params['agent_module_id'],
$date_array,
false,
false,
1,
false,
$params['period_slice_chart'],
0
);
if (empty($array_data) === false) {
$graph_labels = [];
$multiple_labels = [];
foreach ($array_data['sum1']['slice_data'] as $time => $array_data) {
$graph_labels[] = date('H:i', ($time / 1000));
$avg = [
'y' => $array_data['avg'],
'x' => $time,
];
$max = [
'y' => $array_data['max'],
'x' => $time,
];
$min = [
'y' => $array_data['min'],
'x' => $time,
];
$sum = [
'y' => $array_data['sum'],
'x' => $time,
];
if ((int) $params['period_mode'] === CUSTOM_GRAPH_HBARS) {
$avg = [
'x' => $array_data['avg'],
'y' => $time,
];
$max = [
'x' => $array_data['max'],
'y' => $time,
];
$min = [
'x' => $array_data['min'],
'y' => $time,
];
$sum = [
'x' => $array_data['sum'],
'y' => $time,
];
}
$graph_values_avg[] = $avg;
$graph_values_max[] = $max;
$graph_values_min[] = $min;
$graph_values_sum[] = $sum;
}
if ((bool) $params['period_average'] === true) {
$graph_values['avg'] = $graph_values_avg;
$multiple_labels['avg'] = [
'label' => __('Average'),
'fill' => ((int) $params['period_mode'] === CUSTOM_GRAPH_AREA) ? true : false,
];
}
if ((bool) $params['period_maximum'] === true) {
$graph_values['max'] = $graph_values_max;
$multiple_labels['max'] = [
'label' => __('Maximun'),
'fill' => ((int) $params['period_mode'] === CUSTOM_GRAPH_AREA) ? true : false,
];
}
if ((bool) $params['period_minimum'] === true) {
$graph_values['min'] = $graph_values_min;
$multiple_labels['min'] = [
'label' => __('Minimum'),
'fill' => ((int) $params['period_mode'] === CUSTOM_GRAPH_AREA) ? true : false,
];
}
if ((bool) $params['period_summatory'] === true) {
$graph_values['sum'] = $graph_values_sum;
$multiple_labels['sum'] = [
'label' => __('Summatory'),
'fill' => ((int) $params['period_mode'] === CUSTOM_GRAPH_AREA) ? true : false,
];
}
}
$options = [
'height' => 200,
'waterMark' => true,
'legend' => ['display' => true],
'labels' => $graph_labels,
'multiple' => $multiple_labels,
];
$output = '<div class="container-periodicity-graph">';
$output .= '<div>';
if ((int) $params['period_mode'] === CUSTOM_GRAPH_HBARS
|| (int) $params['period_mode'] === CUSTOM_GRAPH_VBARS
) {
if ((int) $params['period_mode'] === CUSTOM_GRAPH_HBARS) {
$options['axis'] = 'y';
}
$output .= vbar_graph($graph_values, $options);
} else {
$output .= line_graph($graph_values, $options);
}
$output .= '</div>';
$output .= '</div>';
return $output;
}
/**
* Function for convert data summatory.
*
@ -3909,6 +4050,7 @@ function fullscale_data(
}
$data['sum'.$series_suffix]['slice_data'][$real_date]['avg'] = ($sum_data / $count_data);
$data['sum'.$series_suffix]['slice_data'][$real_date]['sum'] = $sum_data;
if ($max_value != (-PHP_INT_MAX)) {
$data['sum'.$series_suffix]['slice_data'][$real_date]['max'] = $max_value;
@ -4174,6 +4316,7 @@ function fullscale_data(
$data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['avg'] = 0;
if (isset($count_data) === true) {
$data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['avg'] = ($sum_data / $count_data);
$data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['sum'] = $sum_data;
}
$data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['max'] = $max_value;
@ -5351,3 +5494,397 @@ function graph_analytics_filter_select()
return $result;
}
function draw_form_stat_win(array $form_data, string $tab_active)
{
$table = html_get_predefined_table('transparent', 2);
$table->width = '100%';
$table->id = 'stat_win_form_div';
$table->style[0] = 'text-align:left;font-weight: bold;font-size:8.5pt;line-height:30pt;';
$table->style[1] = 'text-align:left;font-weight: bold;line-height:30pt;';
$table->style[2] = 'text-align:left;font-weight: bold;line-height:30pt;';
$table->style[3] = 'text-align:left;font-weight: bold;line-height:30pt;';
$table->class = 'table_modal_alternate';
$table->data = [];
if ((bool) $form_data['histogram'] === true || $tab_active === 'tabs-chart-period-graph') {
$table->data[0][0] = __('Refresh time');
$table->data[0][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'refresh',
$form_data['refresh'],
'',
'',
0,
7,
true
).'</div>';
$table->data[0][2] = '';
$table->data[0][3] = '';
$table->data[1][0] = __('Begin date');
$table->data[1][1] = html_print_input_text(
'start_date',
$form_data['start_date'],
'',
10,
20,
true,
false,
false,
'',
'small-input'
);
$table->data[1][2] = __('Begin time');
$table->data[1][3] = html_print_input_text(
'start_time',
$form_data['start_time'],
'',
10,
10,
true,
false,
false,
'',
'small-input'
);
$table->data[2][0] = __('Time range');
$table->data[2][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'period',
$form_data['period'],
'',
'',
0,
7,
true
).'</div>';
$table->data[3][0] = __('Time compare (Separated)');
$table->data[3][1] = html_print_checkbox_switch(
'time_compare_separated',
1,
(bool) $form_data['time_compare_separated'],
true
);
$table->data[3][2] = '';
$table->data[3][3] = '';
if ($tab_active === 'tabs-chart-period-graph') {
$table->data[4][0] = __('Maximum');
$table->data[4][1] = html_print_checkbox_switch(
'period_maximum',
1,
(bool) $form_data['period_maximum'],
true
);
$table->data[4][2] = __('Minimum');
$table->data[4][3] = html_print_checkbox_switch(
'period_minimum',
1,
(bool) $form_data['period_minimum'],
true
);
$table->data[5][0] = __('Average');
$table->data[5][1] = html_print_checkbox_switch(
'period_average',
1,
(bool) $form_data['period_average'],
true
);
$table->data[5][2] = __('Summatory');
$table->data[5][3] = html_print_checkbox_switch(
'period_summatory',
1,
(bool) $form_data['period_summatory'],
true
);
$table->data[6][0] = __('Slice');
$table->data[6][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'period_slice_chart',
(string) $form_data['period_slice_chart'],
'',
'',
0,
7,
true,
false,
true,
'',
false,
[
SECONDS_1HOUR => __('1 hour'),
SECONDS_1DAY => __('1 day'),
SECONDS_1WEEK => __('1 week'),
SECONDS_1MONTH => __('1 month'),
]
).'</div>';
$table->data[6][2] = __('Mode');
$options_period_mode = [
CUSTOM_GRAPH_AREA => __('Area'),
CUSTOM_GRAPH_LINE => __('Line'),
// CUSTOM_GRAPH_HBARS => __('Horizontal bars'),
CUSTOM_GRAPH_VBARS => __('Vertical bars'),
];
$table->data[6][3] = '<div class="small-input-select2">'.html_print_select(
$options_period_mode,
'period_mode',
$form_data['period_mode'],
'',
'',
0,
true,
false,
false
).'</div>';
}
} else {
$table->data[0][0] = __('Refresh time');
$table->data[0][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'refresh',
$form_data['refresh'],
'',
'',
0,
7,
true
).'</div>';
$table->data[0][2] = __('Show events');
$disabled = false;
$table->data[0][3] = html_print_checkbox_switch(
'draw_events',
1,
(bool) $form_data['draw_events'],
true,
$disabled
);
$table->data[1][0] = __('Begin date');
$table->data[1][1] = html_print_input_text(
'start_date',
$form_data['start_date'],
'',
10,
20,
true,
false,
false,
'',
'small-input'
);
$table->data[1][2] = __('Show alerts');
$table->data[1][3] = html_print_checkbox_switch(
'draw_alerts',
1,
(bool) $form_data['draw_alerts'],
true
);
$table->data[2][0] = __('Begin time');
$table->data[2][1] = html_print_input_text(
'start_time',
$form_data['start_time'],
'',
10,
10,
true,
false,
false,
'',
'small-input'
);
$table->data[2][2] = __('Show unknown graph');
$table->data[2][3] = html_print_checkbox_switch(
'unknown_graph',
1,
(bool) $form_data['unknown_graph'],
true
);
$table->data[3][0] = __('Time range');
$table->data[3][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'period',
$form_data['period'],
'',
'',
0,
7,
true
).'</div>';
$table->data[3][2] = '';
$table->data[3][3] = '';
if (!modules_is_boolean($form_data['id'])) {
$table->data[4][0] = __('Zoom');
$options = [];
$options[$form_data['zoom']] = 'x'.$form_data['zoom'];
$options[1] = 'x1';
$options[2] = 'x2';
$options[3] = 'x3';
$options[4] = 'x4';
$options[5] = 'x5';
$table->data[4][1] = '<div class="small-input-select2">'.html_print_select(
$options,
'zoom',
$form_data['zoom'],
'',
'',
0,
true,
false,
false
).'</div>';
$table->data[4][2] = __('Show percentil');
$table->data[4][3] = html_print_checkbox_switch(
'show_percentil',
1,
(bool) $form_data['show_percentil'],
true
);
}
$table->data[5][0] = __('Time compare (Overlapped)');
$table->data[5][1] = html_print_checkbox_switch(
'time_compare_overlapped',
1,
(bool) $form_data['time_compare_overlapped'],
true
);
$table->data[5][2] = __('Time compare (Separated)');
$table->data[5][3] = html_print_checkbox_switch(
'time_compare_separated',
1,
(bool) $form_data['time_compare_separated'],
true
);
$table->data[6][0] = __('Show AVG/MAX/MIN data series in graph');
$table->data[6][1] = html_print_checkbox_switch(
'type_mode_graph',
1,
(bool) $form_data['type_mode_graph'],
true,
false
);
$table->data[6][2] = __('Show full scale graph (TIP)');
$table->data[6][2] .= ui_print_help_tip(
__('TIP mode charts do not support average - maximum - minimum series, you can only enable TIP or average, maximum or minimum series'),
true
);
$table->data[6][3] = html_print_checkbox_switch(
'fullscale',
1,
(bool) $form_data['fullscale'],
true,
false
);
$table->data[7][0] = __('Projection graph');
$table->data[7][0] .= ui_print_help_tip(
__('Projection graph take as begin date the current time'),
true
);
$table->data[7][1] = html_print_checkbox_switch(
'enable_projected_period',
1,
(bool) $form_data['enable_projected_period'],
true
);
$table->data[7][2] = __('Projection period');
$table->data[7][3] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'period_projected',
$form_data['period_projected'],
'',
'',
0,
7,
true
).'</div>';
}
$form_table = html_print_table($table, true);
$form_table .= html_print_div(
[
'class' => 'action-buttons-right-forced margin-top-10',
'content' => html_print_submit_button(
__('Reload'),
'submit',
false,
[
'icon' => 'search',
'mode' => 'secondary mini',
'class' => 'float-right',
],
true
),
],
true
);
$output = '<form method="GET" action="stat_win.php" style="margin-bottom: 0">';
$output .= html_print_input_hidden('id', $form_data['id'], true);
$output .= html_print_input_hidden('label', $form_data['label'], true);
if (empty($server_id) === false) {
$output .= html_print_input_hidden('server', $form_data['server_id'], true);
}
$output .= html_print_input_hidden('histogram', $form_data['histogram'], true);
$output .= html_print_input_hidden('period_graph', $form_data['period_graph'], true);
$output .= html_print_input_hidden('type', $form_data['type'], true);
$output .= ui_toggle(
$form_table,
'<span class="subsection_header_title">'.__('Graph configuration menu').'</span>'.ui_print_help_tip(
__('In Pandora FMS, data is stored compressed. The data visualization in database, charts or CSV exported data won\'t match, because is interpreted at runtime. Please check \'Pandora FMS Engineering\' chapter from documentation.'),
true
),
'',
'',
true,
true,
'',
'white-box-content',
'box-flat pdd_10px',
'images/arrow@svg.svg',
'images/arrow@svg.svg',
true
);
$output .= '</form>';
return $output;
}
function draw_container_chart_stat_win(?string $name='stat-win-module-graph')
{
$output = '<div class="margin-lr-10" id="'.$name.'">';
$output .= '<div id="'.$name.'-spinner" class="stat-win-spinner">';
$output .= html_print_image('images/spinner_charts.gif', true);
$output .= '</div>';
$output .= '<div id="'.$name.'-content">';
$output .= '</div>';
$output .= '</div>';
return $output;
}

View File

@ -1220,11 +1220,24 @@ function get_build_setup_charts($type, $options, $data)
break;
case 'BAR':
$setData->setLabel('data')->setBackgroundColor($colors);
$setData->setLabel('data')->setBorderColor($borders);
$setData->setLabel('data')->setBorderWidth(2);
$setData->setLabel('data')->data()->exchangeArray(array_values($data));
if (isset($options['multiple']) === true && empty($options['multiple']) === false) {
$i = 0;
foreach ($options['multiple'] as $key_label => $info) {
$dataSet = $chart->createDataSet();
$dataSet->setLabel(($info['label'] ?? '--'));
$dataSet->setBackgroundColor(($info['backgroundColor'] ?? $colors[$i]));
$dataSet->setBorderColor(($info['borderColor'] ?? $borders[$i]));
$dataSet->setBorderWidth(($info['borderWidth'] ?? 2));
$dataSet->data()->exchangeArray(array_values($data[$key_label]));
$chart->addDataSet($dataSet);
$i++;
}
} else {
$setData->setLabel('data')->setBackgroundColor($colors);
$setData->setLabel('data')->setBorderColor($borders);
$setData->setLabel('data')->setBorderWidth(2);
$setData->setLabel('data')->data()->exchangeArray(array_values($data));
}
// Para las horizontales.
if (isset($options['axis']) === true
@ -1250,19 +1263,32 @@ function get_build_setup_charts($type, $options, $data)
break;
case 'LINE':
$chart->labels()->exchangeArray($options['labels']);
foreach ($data as $key => $dataset) {
$dataSet1 = $chart->createDataSet();
$dataSet1->setLabel($dataset['label']);
$dataSet1->setBackgroundColor($dataset['backgroundColor']);
$dataSet1->setBorderColor($dataset['borderColor']);
$dataSet1->setPointBackgroundColor($dataset['pointBackgroundColor']);
$dataSet1->setPointBorderColor($dataset['pointBorderColor']);
$dataSet1->setPointHoverBackgroundColor($dataset['pointHoverBackgroundColor']);
$dataSet1->setPointHoverBorderColor($dataset['pointHoverBorderColor']);
$dataSet1->data()->exchangeArray($dataset['data']);
$chart->addDataSet($dataSet1);
if (isset($options['multiple']) === true && empty($options['multiple']) === false) {
$i = 0;
foreach ($options['multiple'] as $key_label => $info) {
$dataSet = $chart->createDataSet();
$dataSet->setLabel(($info['label'] ?? '--'));
$dataSet->setBackgroundColor(($info['backgroundColor'] ?? $colors[$i]));
$dataSet->setBorderColor(($info['borderColorColor'] ?? $borders[$i]));
$dataSet->setFill(($info['fill'] ?? false));
$dataSet->data()->exchangeArray(array_values($data[$key_label]));
$chart->addDataSet($dataSet);
$i++;
}
} else {
$chart->labels()->exchangeArray($options['labels']);
foreach ($data as $key => $dataset) {
$dataSet = $chart->createDataSet();
$dataSet->setLabel($dataset['label']);
$dataSet->setBackgroundColor($dataset['backgroundColor']);
$dataSet->setBorderColor($dataset['borderColor']);
$dataSet->setPointBackgroundColor($dataset['pointBackgroundColor']);
$dataSet->setPointBorderColor($dataset['pointBorderColor']);
$dataSet->setPointHoverBackgroundColor($dataset['pointHoverBackgroundColor']);
$dataSet->setPointHoverBorderColor($dataset['pointHoverBorderColor']);
$dataSet->data()->exchangeArray($dataset['data']);
$chart->addDataSet($dataSet);
}
}
break;
@ -1271,7 +1297,10 @@ function get_build_setup_charts($type, $options, $data)
break;
}
if ($type !== 'RADAR' && $type !== 'LINE') {
if ($type !== 'RADAR'
&& $type !== 'LINE'
&& ((isset($options['multiple']) === false || empty($options['multiple']) === true))
) {
$chart->addDataSet($setData);
}

View File

@ -9572,9 +9572,19 @@ div.stat-win-spinner img {
}
.stat_win_histogram {
width: 95%;
margin: 0 auto;
margin-top: 18%;
}
.bg_general {
background-color: #ffffff;
}
#tabs-chart-modal {
border: 0px;
}
#tabs-chart-ul-graphs li a img {
margin-left: 20px;
}
#stat-win-module-graph .stat_win_histogram div.nodata_container {
@ -12787,3 +12797,22 @@ tr.shown td.details-control {
position: relative;
top: -92px;
}
.container-periodicity-graph {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
border: 1px solid #e5e9ed;
border-radius: 10px;
margin-top: 25px;
padding: 10px;
}
.container-periodicity-graph > div {
flex: 0 0 auto;
width: 100%;
height: 300px;
background-color: transparent;
}

View File

@ -127,6 +127,7 @@ ui_print_message_dialog(
<?php
require_once $config['homedir'].'/include/graphs/functions_flot.php';
echo include_javascript_dependencies_flot_graph(true, '../');
echo ui_require_css_file('events', 'include/styles/', true);
?>
<script type='text/javascript'>
window.onload = function() {
@ -181,35 +182,32 @@ ui_print_message_dialog(
}
}
$draw_alerts = get_parameter('draw_alerts', 0);
$draw_alerts = get_parameter_checkbox('draw_alerts', 0);
$period = get_parameter('period');
$id = get_parameter('id', 0);
$start_date = get_parameter('start_date', date('Y/m/d'));
$start_time = get_parameter('start_time', date('H:i:s'));
$draw_events = get_parameter('draw_events', 0);
$draw_events = get_parameter_checkbox('draw_events', 0);
$graph_type = get_parameter('type', 'sparse');
$zoom = get_parameter('zoom', $config['zoom_graph']);
$baseline = get_parameter('baseline', 0);
$show_events_graph = get_parameter('show_events_graph', 0);
$show_percentil = get_parameter('show_percentil', 0);
$time_compare_separated = get_parameter('time_compare_separated', 0);
$time_compare_overlapped = get_parameter('time_compare_overlapped', 0);
$show_percentil = get_parameter_checkbox('show_percentil', 0);
$time_compare_separated = get_parameter_checkbox('time_compare_separated', 0);
$time_compare_overlapped = get_parameter_checkbox('time_compare_overlapped', 0);
$unknown_graph = get_parameter_checkbox('unknown_graph', 1);
$histogram = (bool) get_parameter('histogram', 0);
$enable_projected_period = get_parameter('enable_projected_period', 0);
$period_projected = get_parameter('period_projected', 300);
$period_graph = (int) get_parameter('period_graph', 0);
$enable_projected_period = get_parameter_checkbox('enable_projected_period', 0);
$period_projected = get_parameter('period_projected', SECONDS_5MINUTES);
// FORM TABLE.
$table = html_get_predefined_table('transparent', 2);
$table->width = '100%';
$table->id = 'stat_win_form_div';
$table->style[0] = 'text-align:left;font-weight: bold;font-size:8.5pt;line-height:30pt;';
$table->style[1] = 'text-align:left;font-weight: bold;line-height:30pt;';
$table->style[2] = 'text-align:left;font-weight: bold;line-height:30pt;';
$table->style[3] = 'text-align:left;font-weight: bold;line-height:30pt;';
$table->class = 'table_modal_alternate';
$table->data = [];
$period_maximum = get_parameter_checkbox('period_maximum', 1);
$period_minimum = get_parameter_checkbox('period_minimum', 1);
$period_average = get_parameter_checkbox('period_average', 1);
$period_summatory = get_parameter_checkbox('period_summatory', 0);
$period_slice_chart = get_parameter('period_slice_chart', SECONDS_1HOUR);
$period_mode = get_parameter('period_mode', CUSTOM_GRAPH_VBARS);
$time_compare = false;
@ -236,7 +234,7 @@ ui_print_message_dialog(
}
}
} else {
$fullscale = get_parameter('fullscale', 0);
$fullscale = get_parameter_checkbox('fullscale', 0);
}
$type_mode_graph = get_parameter_checkbox(
@ -266,277 +264,40 @@ ui_print_message_dialog(
$id
);
$table->data[0][0] = __('Refresh time');
$table->data[0][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'refresh',
$refresh,
'',
'',
0,
7,
true
).'</div>';
$table->data[0][2] = __('Show events');
$disabled = false;
$table->data[0][3] = html_print_checkbox_switch(
'draw_events',
1,
(bool) $draw_events,
true,
$disabled
);
$table->data[1][0] = __('Begin date');
$table->data[1][1] = html_print_input_text(
'start_date',
$start_date,
'',
10,
20,
true,
false,
false,
'',
'small-input'
);
$table->data[1][2] = __('Show alerts');
$table->data[1][3] = html_print_checkbox_switch(
'draw_alerts',
1,
(bool) $draw_alerts,
true
);
$table->data[2][0] = __('Begin time');
$table->data[2][1] = html_print_input_text(
'start_time',
$start_time,
'',
10,
10,
true,
false,
false,
'',
'small-input'
);
$table->data[2][2] = __('Show unknown graph');
$table->data[2][3] = html_print_checkbox_switch(
'unknown_graph',
1,
(bool) $unknown_graph,
true
);
$table->data[3][0] = __('Time range');
$table->data[3][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'period',
$period,
'',
'',
0,
7,
true
).'</div>';
$table->data[3][2] = '';
$table->data[3][3] = '';
if (!modules_is_boolean($id)) {
$table->data[4][0] = __('Zoom');
$options = [];
$options[$zoom] = 'x'.$zoom;
$options[1] = 'x1';
$options[2] = 'x2';
$options[3] = 'x3';
$options[4] = 'x4';
$options[5] = 'x5';
$table->data[4][1] = '<div class="small-input-select2">'.html_print_select(
$options,
'zoom',
$zoom,
'',
'',
0,
true,
false,
false
).'</div>';
$table->data[4][2] = __('Show percentil');
$table->data[4][3] = html_print_checkbox_switch(
'show_percentil',
1,
(bool) $show_percentil,
true
);
if (isset($_GET['type']) === true) {
$type = get_parameter_get('type');
}
$table->data[5][0] = __('Time compare (Overlapped)');
$table->data[5][1] = html_print_checkbox_switch(
'time_compare_overlapped',
1,
(bool) $time_compare_overlapped,
true
);
$table->data[5][2] = __('Time compare (Separated)');
$table->data[5][3] = html_print_checkbox_switch(
'time_compare_separated',
1,
(bool) $time_compare_separated,
true
);
$table->data[6][0] = __('Show AVG/MAX/MIN data series in graph');
$table->data[6][1] = html_print_checkbox_switch(
'type_mode_graph',
1,
(bool) $type_mode_graph,
true,
false
);
$table->data[6][2] = __('Show full scale graph (TIP)');
$table->data[6][2] .= ui_print_help_tip(
__('TIP mode charts do not support average - maximum - minimum series, you can only enable TIP or average, maximum or minimum series'),
true
);
$table->data[6][3] = html_print_checkbox_switch(
'fullscalee',
1,
(bool) $fullscale,
true,
false
);
$table->data[7][0] = __('Projection graph');
$table->data[7][0] .= ui_print_help_tip(
__('Projection graph take as begin date the current time'),
true
);
$table->data[7][1] = html_print_checkbox_switch(
'enable_projected_period',
1,
(bool) $enable_projected_period,
true
);
$table->data[7][2] = __('Projection period');
$table->data[7][3] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'period_projected',
$period_projected,
'',
'',
0,
7,
true
).'</div>';
} else {
$table->data[0][0] = __('Begin date');
$table->data[0][1] = html_print_input_text(
'start_date',
$start_date,
'',
10,
20,
true,
false,
false,
'',
'small-input'
);
$table->data[0][2] = __('Begin time');
$table->data[0][3] = html_print_input_text(
'start_time',
$start_time,
'',
10,
10,
true,
false,
false,
'',
'small-input'
);
$table->data[1][0] = __('Time range');
$table->data[1][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time(
'period',
$period,
'',
'',
0,
7,
true
).'</div>';
$table->data[1][2] = __('Time compare (Separated)');
$table->data[1][3] = html_print_checkbox_switch(
'time_compare_separated',
1,
(bool) $time_compare_separated,
true
);
}
$form_table = html_print_table($table, true);
$form_table .= html_print_div(
[
'class' => 'action-buttons-right-forced',
'content' => html_print_submit_button(
__('Reload'),
'submit',
false,
[
'icon' => 'search',
'mode' => 'secondary mini',
'class' => 'float-right',
],
true
),
],
true
);
echo '<form method="GET" action="stat_win.php" style="margin-bottom: 0">';
html_print_input_hidden('id', $id);
html_print_input_hidden('label', $label);
if (empty($server_id) === false) {
html_print_input_hidden('server', $server_id);
}
html_print_input_hidden('histogram', $histogram);
if (isset($_GET['type']) === true) {
$type = get_parameter_get('type');
html_print_input_hidden('type', $type);
}
ui_toggle(
$form_table,
'<span class="subsection_header_title">'.__('Graph configuration menu').'</span>'.ui_print_help_tip(
__('In Pandora FMS, data is stored compressed. The data visualization in database, charts or CSV exported data won\'t match, because is interpreted at runtime. Please check \'Pandora FMS Engineering\' chapter from documentation.'),
true
)
);
echo '</form>';
// Hidden div to forced title.
html_print_div(
[
'id' => 'forced_title_layer',
'class' => 'forced_title_layer',
'hidden' => true,
]
);
$form_data = [
'id' => $id,
'refresh' => $refresh,
'draw_events' => $draw_events,
'draw_alerts' => $draw_alerts,
'start_date' => $start_date,
'start_time' => $start_time,
'unknown_graph' => $unknown_graph,
'period' => $period,
'zoom' => $zoom,
'show_percentil' => $show_percentil,
'time_compare_overlapped' => $time_compare_overlapped,
'time_compare_separated' => $time_compare_separated,
'type_mode_graph' => $type_mode_graph,
'fullscale' => $fullscale,
'enable_projected_period' => $enable_projected_period,
'period_projected' => $period_projected,
'type' => $type,
'label' => $label,
'server_id' => $server_id,
'histogram' => $histogram,
'period_graph' => $period_graph,
'period_maximum' => $period_maximum,
'period_minimum' => $period_minimum,
'period_average' => $period_average,
'period_summatory' => $period_summatory,
'period_slice_chart' => $period_slice_chart,
'period_mode' => $period_mode,
];
$params = [
'agent_module_id' => $id,
@ -562,14 +323,59 @@ ui_print_message_dialog(
'begin_date' => strtotime($start_date.' '.$start_time),
'enable_projected_period' => $enable_projected_period,
'period_projected' => $period_projected,
'period_maximum' => $period_maximum,
'period_minimum' => $period_minimum,
'period_average' => $period_average,
'period_summatory' => $period_summatory,
'period_slice_chart' => $period_slice_chart,
'period_mode' => $period_mode,
];
// Graph.
$output = '<div class="white_box margin-lr-10" id="stat-win-module-graph">';
$output .= '<div id="stat-win-spinner" class="stat-win-spinner">';
$output .= html_print_image('images/spinner_charts.gif', true);
$output .= '</div>';
$output .= '</div>';
if ($histogram === false) {
$output = '<div id="tabs-chart-modal">';
$output .= '<ul class="tabs-chart-ul-graphs">';
$output .= '<li>';
$output .= '<a href="#tabs-chart-module-graph">';
$output .= html_print_image(
'images/module-graph.svg',
true,
[
'title' => __('Module graph'),
'class' => 'invert_filter main_menu_icon',
]
);
$output .= __('Module graph');
$output .= '</a>';
$output .= '</li>';
$output .= '<li>';
$output .= '<a href="#tabs-chart-period-graph">';
$output .= html_print_image(
'images/list.png',
true,
[
'title' => __('Period graph'),
'class' => 'invert_filter main_menu_icon',
]
);
$output .= __('Period graph');
$output .= '</a>';
$output .= '</li>';
$output .= '</ul>';
$output .= '<div id="tabs-chart-module-graph">';
$output .= draw_container_chart_stat_win('tabs-chart-module-graph');
$output .= '</div>';
$output .= '<div id="tabs-chart-period-graph">';
$output .= draw_container_chart_stat_win('tabs-chart-period-graph');
$output .= '</div>';
$output .= '</div>';
} else {
// Graph.
$output .= draw_container_chart_stat_win();
}
echo $output;
if (is_metaconsole() === true && empty($server_id) === false) {
@ -595,77 +401,53 @@ ui_include_time_picker(true);
<script>
$(document).ready (function () {
$('#checkbox-time_compare_separated').click(function(e) {
if(e.target.checked === true) {
$('#checkbox-time_compare_overlapped').prop('checked', false);
}
});
$('#checkbox-time_compare_overlapped').click(function(e) {
if(e.target.checked === true) {
$('#checkbox-time_compare_separated').prop('checked', false);
}
});
$('#checkbox-fullscale').click(function(e) {
if(e.target.checked === true) {
$('#checkbox-type_mode_graph').prop('checked', false);
}
});
$('#checkbox-type_mode_graph').click(function(e) {
if(e.target.checked === true) {
$('#checkbox-fullscale').prop('checked', false);
}
});
// Add datepicker and timepicker
$("#text-start_date").datepicker({
dateFormat: "<?php echo DATE_FORMAT_JS; ?>"
});
$("#text-start_time").timepicker({
showSecond: true,
timeFormat: '<?php echo TIME_FORMAT_JS; ?>',
timeOnlyTitle: '<?php echo __('Choose time'); ?>',
timeText: '<?php echo __('Time'); ?>',
hourText: '<?php echo __('Hour'); ?>',
minuteText: '<?php echo __('Minute'); ?>',
secondText: '<?php echo __('Second'); ?>',
currentText: '<?php echo __('Now'); ?>',
closeText: '<?php echo __('Close'); ?>'
});
$.datepicker.setDefaults(
$.datepicker.regional["<?php echo $custom_user_language; ?>"]
);
// Menu.
$('#module_graph_menu_header').on('click', function(){
var arrow = $('#module_graph_menu_header .module_graph_menu_arrow');
var arrow_up = 'arrow_up_green';
var arrow_down = 'arrow_down_green';
if( $('.module_graph_menu_content').hasClass(
'module_graph_menu_content_closed')){
$('.module_graph_menu_content').show();
$('.module_graph_menu_content').removeClass(
'module_graph_menu_content_closed');
arrow.attr('src',arrow.attr('src').replace(arrow_down, arrow_up));
}
else{
$('.module_graph_menu_content').hide();
$('.module_graph_menu_content').addClass(
'module_graph_menu_content_closed');
arrow.attr('src',arrow.attr('src').replace(arrow_up, arrow_down));
}
});
var graph_data = "<?php echo base64_encode(json_encode($params)); ?>";
var form_data = "<?php echo base64_encode(json_encode($form_data)); ?>";
var url = "<?php echo ui_get_full_url('ajax.php', false, false, false); ?>";
var serverId = "<?php echo $server_id; ?>";
get_ajax_module(url, graph_data, serverId);
var histogram = "<?php echo (int) $histogram; ?>";
var period_graph = "<?php echo ($period_graph == 1) ? 1 : 0; ?>";
if(histogram == 0) {
$("#tabs-chart-modal").tabs({
create: function( event, ui ) {
var tab_active = ui.tab.children(":first").attr('id');
get_ajax_module(url, graph_data, form_data, serverId, tab_active);
},
activate: function( event, ui ) {
var tab_active = ui.newTab.children(":first").attr('id');
change_tabs_periodicity(tab_active);
get_ajax_module(url, graph_data, form_data, serverId, tab_active);
},
active: period_graph
});
} else {
get_ajax_module(url, graph_data, form_data, serverId, null);
}
});
function change_tabs_periodicity(tab_active) {;
let pg = 0;
if (tab_active === 'ui-id-2') {
pg = 1;
}
function get_ajax_module(url, graph_data, serverId) {
var regex = /(period_graph=)[^&]+(&?)/gi;
var replacement = "$1" + pg + "$2";
// Change the URL (if the browser has support).
if ("history" in window) {
var href = window.location.href.replace(regex, replacement);
window.history.replaceState({}, document.title, href);
}
}
function get_ajax_module(url, graph_data, form_data, serverId, id) {
let active = 'stat-win-module-graph';
if(id != null) {
active = $("#"+id).parent().attr('aria-controls');
}
$("#tabs-chart-module-graph-content").empty();
$("#tabs-chart-period-graph-content").empty();
$("#"+active+"-spinner").show();
$.ajax({
type: "POST",
url: url,
@ -674,11 +456,81 @@ ui_include_time_picker(true);
page: "include/ajax/module",
get_graph_module: true,
graph_data: graph_data,
server_id: serverId
form_data: form_data,
server_id: serverId,
active: active
},
success: function (data) {
$("#stat-win-spinner").hide();
$("#stat-win-module-graph").append(data);
$("#"+active+"-spinner").hide();
$("#"+active+"-content").append(data);
let pg = 0;
if (active === 'tabs-chart-period-graph') {
pg = 1;
}
$('#hidden-period_graph').val(pg);
$('#checkbox-time_compare_separated').click(function(e) {
if(e.target.checked === true) {
$('#checkbox-time_compare_overlapped').prop('checked', false);
}
});
$('#checkbox-time_compare_overlapped').click(function(e) {
if(e.target.checked === true) {
$('#checkbox-time_compare_separated').prop('checked', false);
}
});
$('#checkbox-fullscale').click(function(e) {
if(e.target.checked === true) {
$('#checkbox-type_mode_graph').prop('checked', false);
}
});
$('#checkbox-type_mode_graph').click(function(e) {
if(e.target.checked === true) {
$('#checkbox-fullscale').prop('checked', false);
}
});
// Add datepicker and timepicker
$("#text-start_date").datepicker({
dateFormat: "<?php echo DATE_FORMAT_JS; ?>"
});
$("#text-start_time").timepicker({
showSecond: true,
timeFormat: '<?php echo TIME_FORMAT_JS; ?>',
timeOnlyTitle: '<?php echo __('Choose time'); ?>',
timeText: '<?php echo __('Time'); ?>',
hourText: '<?php echo __('Hour'); ?>',
minuteText: '<?php echo __('Minute'); ?>',
secondText: '<?php echo __('Second'); ?>',
currentText: '<?php echo __('Now'); ?>',
closeText: '<?php echo __('Close'); ?>'
});
$.datepicker.setDefaults(
$.datepicker.regional["<?php echo $custom_user_language; ?>"]
);
// Menu.
$('#module_graph_menu_header').on('click', function(){
var arrow = $('#module_graph_menu_header .module_graph_menu_arrow');
var arrow_up = 'arrow_up_green';
var arrow_down = 'arrow_down_green';
if( $('.module_graph_menu_content').hasClass(
'module_graph_menu_content_closed')){
$('.module_graph_menu_content').show();
$('.module_graph_menu_content').removeClass(
'module_graph_menu_content_closed');
arrow.attr('src',arrow.attr('src').replace(arrow_down, arrow_up));
}
else{
$('.module_graph_menu_content').hide();
$('.module_graph_menu_content').addClass(
'module_graph_menu_content_closed');
arrow.attr('src',arrow.attr('src').replace(arrow_up, arrow_down));
}
});
},
error: function (error) {
console.error(error);

View File

@ -175,7 +175,7 @@ if (!$modules || !$searchModules) {
$url = 'include/procesos.php?agente='.$module['id_agente_modulo'];
$win_handle = dechex(crc32($module['id_agente_modulo'].$module['module_name']));
$link = "winopeng('".'operation/agentes/stat_win.php?'."type=$graph_type&".'period='.SECONDS_1DAY.'&id='.$module['id_agente_modulo'].'&refresh='.SECONDS_10MINUTES."', "."'day_".$win_handle."')";
$link = "winopeng('".'operation/agentes/stat_win.php?'."type=$graph_type&".'period='.SECONDS_1DAY.'&id='.$module['id_agente_modulo'].'&period_graph=0&refresh='.SECONDS_10MINUTES."', "."'day_".$win_handle."')";
$link_module_detail = 'show_module_detail_dialog('.$module['id_agente_modulo'].', '.$module['id_agente'].', '."'', 0, ".SECONDS_1DAY.", '".$module['module_name']."')";
$graphCell = '<a href="javascript:'.$link.'">'.html_print_image('images/module-graph.svg', true, ['border' => 0, 'alt' => '', 'class' => 'main_menu_icon invert_filter' ]).'</a>';