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;'>"; echo "<td class='center' style='text-align:left;'>";
$win_handle = dechex(crc32($module_id.$module['name'])); $win_handle = dechex(crc32($module_id.$module['name']));
$graph_type = return_graphtype(modules_get_agentmodule_type($module_id)); $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.'">'; echo '<a href="javascript:'.$link.'">';

View File

@ -1283,7 +1283,7 @@ if (check_login()) {
} }
if (is_snapshot_data($module['datos']) === false) { 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( $graphButtons[] = html_print_anchor(
[ [
'href' => 'javascript:'.$link, 'href' => 'javascript:'.$link,
@ -1499,9 +1499,14 @@ if (check_login()) {
$output = ''; $output = '';
$graph_data = get_parameter('graph_data', ''); $graph_data = get_parameter('graph_data', '');
$params = json_decode(base64_decode($graph_data), true); $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); $server_id = (int) get_parameter('server_id', 0);
include_once $config['homedir'].'/include/functions_graph.php'; 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. // Metaconsole connection to the node.
if (is_metaconsole() === true && empty($server_id) === false) { if (is_metaconsole() === true && empty($server_id) === false) {
$server = metaconsole_get_connection_by_id($server_id); $server = metaconsole_get_connection_by_id($server_id);
@ -1553,7 +1558,15 @@ if (check_login()) {
$output .= $graph['chart']; $output .= $graph['chart'];
$output .= '</div>'; $output .= '</div>';
} else { } 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. * 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]['avg'] = ($sum_data / $count_data);
$data['sum'.$series_suffix]['slice_data'][$real_date]['sum'] = $sum_data;
if ($max_value != (-PHP_INT_MAX)) { if ($max_value != (-PHP_INT_MAX)) {
$data['sum'.$series_suffix]['slice_data'][$real_date]['max'] = $max_value; $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; $data['sum'.$series_suffix]['slice_data'][($date_array['final_date'] * 1000)]['avg'] = 0;
if (isset($count_data) === true) { 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)]['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; $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; 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; break;
case 'BAR': case 'BAR':
$setData->setLabel('data')->setBackgroundColor($colors); if (isset($options['multiple']) === true && empty($options['multiple']) === false) {
$setData->setLabel('data')->setBorderColor($borders); $i = 0;
$setData->setLabel('data')->setBorderWidth(2); foreach ($options['multiple'] as $key_label => $info) {
$dataSet = $chart->createDataSet();
$setData->setLabel('data')->data()->exchangeArray(array_values($data)); $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. // Para las horizontales.
if (isset($options['axis']) === true if (isset($options['axis']) === true
@ -1250,19 +1263,32 @@ function get_build_setup_charts($type, $options, $data)
break; break;
case 'LINE': case 'LINE':
$chart->labels()->exchangeArray($options['labels']); if (isset($options['multiple']) === true && empty($options['multiple']) === false) {
$i = 0;
foreach ($data as $key => $dataset) { foreach ($options['multiple'] as $key_label => $info) {
$dataSet1 = $chart->createDataSet(); $dataSet = $chart->createDataSet();
$dataSet1->setLabel($dataset['label']); $dataSet->setLabel(($info['label'] ?? '--'));
$dataSet1->setBackgroundColor($dataset['backgroundColor']); $dataSet->setBackgroundColor(($info['backgroundColor'] ?? $colors[$i]));
$dataSet1->setBorderColor($dataset['borderColor']); $dataSet->setBorderColor(($info['borderColorColor'] ?? $borders[$i]));
$dataSet1->setPointBackgroundColor($dataset['pointBackgroundColor']); $dataSet->setFill(($info['fill'] ?? false));
$dataSet1->setPointBorderColor($dataset['pointBorderColor']); $dataSet->data()->exchangeArray(array_values($data[$key_label]));
$dataSet1->setPointHoverBackgroundColor($dataset['pointHoverBackgroundColor']); $chart->addDataSet($dataSet);
$dataSet1->setPointHoverBorderColor($dataset['pointHoverBorderColor']); $i++;
$dataSet1->data()->exchangeArray($dataset['data']); }
$chart->addDataSet($dataSet1); } 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; break;
@ -1271,7 +1297,10 @@ function get_build_setup_charts($type, $options, $data)
break; break;
} }
if ($type !== 'RADAR' && $type !== 'LINE') { if ($type !== 'RADAR'
&& $type !== 'LINE'
&& ((isset($options['multiple']) === false || empty($options['multiple']) === true))
) {
$chart->addDataSet($setData); $chart->addDataSet($setData);
} }

View File

@ -9572,9 +9572,19 @@ div.stat-win-spinner img {
} }
.stat_win_histogram { .stat_win_histogram {
width: 95%;
margin: 0 auto; 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 { #stat-win-module-graph .stat_win_histogram div.nodata_container {
@ -12787,3 +12797,22 @@ tr.shown td.details-control {
position: relative; position: relative;
top: -92px; 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 <?php
require_once $config['homedir'].'/include/graphs/functions_flot.php'; require_once $config['homedir'].'/include/graphs/functions_flot.php';
echo include_javascript_dependencies_flot_graph(true, '../'); echo include_javascript_dependencies_flot_graph(true, '../');
echo ui_require_css_file('events', 'include/styles/', true);
?> ?>
<script type='text/javascript'> <script type='text/javascript'>
window.onload = function() { 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'); $period = get_parameter('period');
$id = get_parameter('id', 0); $id = get_parameter('id', 0);
$start_date = get_parameter('start_date', date('Y/m/d')); $start_date = get_parameter('start_date', date('Y/m/d'));
$start_time = get_parameter('start_time', date('H:i:s')); $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'); $graph_type = get_parameter('type', 'sparse');
$zoom = get_parameter('zoom', $config['zoom_graph']); $zoom = get_parameter('zoom', $config['zoom_graph']);
$baseline = get_parameter('baseline', 0); $baseline = get_parameter('baseline', 0);
$show_events_graph = get_parameter('show_events_graph', 0); $show_events_graph = get_parameter('show_events_graph', 0);
$show_percentil = get_parameter('show_percentil', 0); $show_percentil = get_parameter_checkbox('show_percentil', 0);
$time_compare_separated = get_parameter('time_compare_separated', 0); $time_compare_separated = get_parameter_checkbox('time_compare_separated', 0);
$time_compare_overlapped = get_parameter('time_compare_overlapped', 0); $time_compare_overlapped = get_parameter_checkbox('time_compare_overlapped', 0);
$unknown_graph = get_parameter_checkbox('unknown_graph', 1); $unknown_graph = get_parameter_checkbox('unknown_graph', 1);
$histogram = (bool) get_parameter('histogram', 0); $histogram = (bool) get_parameter('histogram', 0);
$enable_projected_period = get_parameter('enable_projected_period', 0); $period_graph = (int) get_parameter('period_graph', 0);
$period_projected = get_parameter('period_projected', 300); $enable_projected_period = get_parameter_checkbox('enable_projected_period', 0);
$period_projected = get_parameter('period_projected', SECONDS_5MINUTES);
// FORM TABLE. $period_maximum = get_parameter_checkbox('period_maximum', 1);
$table = html_get_predefined_table('transparent', 2); $period_minimum = get_parameter_checkbox('period_minimum', 1);
$table->width = '100%'; $period_average = get_parameter_checkbox('period_average', 1);
$table->id = 'stat_win_form_div'; $period_summatory = get_parameter_checkbox('period_summatory', 0);
$table->style[0] = 'text-align:left;font-weight: bold;font-size:8.5pt;line-height:30pt;'; $period_slice_chart = get_parameter('period_slice_chart', SECONDS_1HOUR);
$table->style[1] = 'text-align:left;font-weight: bold;line-height:30pt;'; $period_mode = get_parameter('period_mode', CUSTOM_GRAPH_VBARS);
$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 = [];
$time_compare = false; $time_compare = false;
@ -236,7 +234,7 @@ ui_print_message_dialog(
} }
} }
} else { } else {
$fullscale = get_parameter('fullscale', 0); $fullscale = get_parameter_checkbox('fullscale', 0);
} }
$type_mode_graph = get_parameter_checkbox( $type_mode_graph = get_parameter_checkbox(
@ -266,277 +264,40 @@ ui_print_message_dialog(
$id $id
); );
$table->data[0][0] = __('Refresh time'); if (isset($_GET['type']) === true) {
$table->data[0][1] = '<div class="small-input-select2">'.html_print_extended_select_for_time( $type = get_parameter_get('type');
'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
);
} }
$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_data = [
$form_table .= html_print_div( 'id' => $id,
[ 'refresh' => $refresh,
'class' => 'action-buttons-right-forced', 'draw_events' => $draw_events,
'content' => html_print_submit_button( 'draw_alerts' => $draw_alerts,
__('Reload'), 'start_date' => $start_date,
'submit', 'start_time' => $start_time,
false, 'unknown_graph' => $unknown_graph,
[ 'period' => $period,
'icon' => 'search', 'zoom' => $zoom,
'mode' => 'secondary mini', 'show_percentil' => $show_percentil,
'class' => 'float-right', 'time_compare_overlapped' => $time_compare_overlapped,
], 'time_compare_separated' => $time_compare_separated,
true 'type_mode_graph' => $type_mode_graph,
), 'fullscale' => $fullscale,
], 'enable_projected_period' => $enable_projected_period,
true 'period_projected' => $period_projected,
); 'type' => $type,
'label' => $label,
echo '<form method="GET" action="stat_win.php" style="margin-bottom: 0">'; 'server_id' => $server_id,
html_print_input_hidden('id', $id); 'histogram' => $histogram,
html_print_input_hidden('label', $label); 'period_graph' => $period_graph,
'period_maximum' => $period_maximum,
if (empty($server_id) === false) { 'period_minimum' => $period_minimum,
html_print_input_hidden('server', $server_id); 'period_average' => $period_average,
} 'period_summatory' => $period_summatory,
'period_slice_chart' => $period_slice_chart,
html_print_input_hidden('histogram', $histogram); 'period_mode' => $period_mode,
];
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,
]
);
$params = [ $params = [
'agent_module_id' => $id, 'agent_module_id' => $id,
@ -562,14 +323,59 @@ ui_print_message_dialog(
'begin_date' => strtotime($start_date.' '.$start_time), 'begin_date' => strtotime($start_date.' '.$start_time),
'enable_projected_period' => $enable_projected_period, 'enable_projected_period' => $enable_projected_period,
'period_projected' => $period_projected, '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. if ($histogram === false) {
$output = '<div class="white_box margin-lr-10" id="stat-win-module-graph">'; $output = '<div id="tabs-chart-modal">';
$output .= '<div id="stat-win-spinner" class="stat-win-spinner">'; $output .= '<ul class="tabs-chart-ul-graphs">';
$output .= html_print_image('images/spinner_charts.gif', true); $output .= '<li>';
$output .= '</div>'; $output .= '<a href="#tabs-chart-module-graph">';
$output .= '</div>'; $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; echo $output;
if (is_metaconsole() === true && empty($server_id) === false) { if (is_metaconsole() === true && empty($server_id) === false) {
@ -595,77 +401,53 @@ ui_include_time_picker(true);
<script> <script>
$(document).ready (function () { $(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 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 url = "<?php echo ui_get_full_url('ajax.php', false, false, false); ?>";
var serverId = "<?php echo $server_id; ?>"; 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({ $.ajax({
type: "POST", type: "POST",
url: url, url: url,
@ -674,11 +456,81 @@ ui_include_time_picker(true);
page: "include/ajax/module", page: "include/ajax/module",
get_graph_module: true, get_graph_module: true,
graph_data: graph_data, graph_data: graph_data,
server_id: serverId form_data: form_data,
server_id: serverId,
active: active
}, },
success: function (data) { success: function (data) {
$("#stat-win-spinner").hide(); $("#"+active+"-spinner").hide();
$("#stat-win-module-graph").append(data); $("#"+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) { error: function (error) {
console.error(error); console.error(error);

View File

@ -175,7 +175,7 @@ if (!$modules || !$searchModules) {
$url = 'include/procesos.php?agente='.$module['id_agente_modulo']; $url = 'include/procesos.php?agente='.$module['id_agente_modulo'];
$win_handle = dechex(crc32($module['id_agente_modulo'].$module['module_name'])); $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']."')"; $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>'; $graphCell = '<a href="javascript:'.$link.'">'.html_print_image('images/module-graph.svg', true, ['border' => 0, 'alt' => '', 'class' => 'main_menu_icon invert_filter' ]).'</a>';