Merge branch 'ent-9640-agrupacion-de-graficas-en-periodos-de-tiempo' into 'develop'

add periodicity graph pandora_enterprise#9640

See merge request artica/pandorafms!6574
This commit is contained in:
Diego Muñoz-Reja 2023-12-19 08:45:30 +00:00
commit 4f72ea91a5
32 changed files with 1863 additions and 510 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

@ -1097,6 +1097,10 @@ SET @sqlstmt = IF (@exist>0, 'ALTER TABLE `tagente` DROP COLUMN `transactional_a
prepare stmt from @sqlstmt;
execute stmt;
ALTER TABLE `tlayout_template_data` ADD COLUMN `title` TEXT default '';
ALTER TABLE `tlayout_data` ADD COLUMN `period_chart_options` TEXT default '';
ALTER TABLE `tlayout_template_data` ADD COLUMN `period_chart_options` TEXT default '';
ALTER TABLE `tdashboard`
ADD COLUMN `date_range` TINYINT NOT NULL DEFAULT 0 AFTER `cells_slideshow`,
ADD COLUMN `date_from` INT NOT NULL DEFAULT 0 AFTER `date_range`,

View File

@ -235,6 +235,7 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
$header_autorefresh = '';
$header_autorefresh_counter = '';
$header_setup = '';
if (($_GET['sec2'] !== 'operation/visual_console/render_view')) {
if ($autorefresh_list !== null
@ -352,7 +353,6 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
$display_counter = 'display:none';
}
$header_setup = '';
if ((bool) check_acl($config['id_user'], 0, 'PM') === true) {
$header_setup .= '<div id="header_logout"><a class="white" href="'.ui_get_full_url('index.php?sec=general&sec2=godmode/setup/setup&section=general').'">';
$header_setup .= html_print_image(

View File

@ -154,6 +154,14 @@ $image_threshold = false;
$time_compare_overlapped = false;
$unknowns_graph = false;
$periodicity_chart = false;
$period_maximum = true;
$period_minimum = true;
$period_average = true;
$period_summatory = false;
$period_slice_chart = SECONDS_1HOUR;
$period_mode = CUSTOM_GRAPH_VBARS;
// Added for events items.
$server_multiple = [0];
$show_summary_group = false;
@ -353,11 +361,19 @@ switch ($action) {
break;
case 'simple_graph':
$fullscale = isset($style['fullscale']) ? (bool) $style['fullscale'] : 0;
$fullscale = (isset($style['fullscale']) === true) ? (bool) $style['fullscale'] : 0;
$percentil = isset($style['percentil']) ? (bool) $style['percentil'] : 0;
$image_threshold = (isset($style['image_threshold']) === true) ? (bool) $style['image_threshold'] : false;
$graph_render = $item['graph_render'];
$unknowns_graph = $item['check_unknowns_graph'];
$periodicity_chart = (isset($style['periodicity_chart']) === true) ? $style['periodicity_chart'] : false;
$period_maximum = (isset($style['period_maximum']) === true) ? $style['period_maximum'] : true;
$period_minimum = (isset($style['period_minimum']) === true) ? $style['period_minimum'] : true;
$period_average = (isset($style['period_average']) === true) ? $style['period_average'] : true;
$period_summatory = (isset($style['period_summatory']) === true) ? $style['period_summatory'] : false;
$period_slice_chart = (isset($style['period_slice_chart']) === true) ? $style['period_slice_chart'] : SECONDS_1HOUR;
$period_mode = (isset($style['period_mode']) === true) ? $style['period_mode'] : CUSTOM_GRAPH_VBARS;
// The break hasn't be forgotten.
case 'simple_baseline_graph':
case 'projection_graph':
@ -3050,6 +3066,22 @@ if (is_metaconsole() === true) {
</td>
</tr>
<tr id="row_periodicity_chart" class="datos">
<td class="bolder"><?php echo __('Sliced mode'); ?></td>
<td >
<?php
html_print_checkbox_switch(
'periodicity_chart',
1,
(bool) $periodicity_chart,
false,
false,
'showPeriodicityOptions(this)'
);
?>
</td>
</tr>
<tr id="row_graph_render" class="datos">
<td class="bolder">
<?php
@ -3197,6 +3229,111 @@ if (is_metaconsole() === true) {
</td>
</tr>
<tr id="row_period_maximum" class="datos">
<td class="bolder"><?php echo __('Maximum'); ?></td>
<td >
<?php
html_print_checkbox_switch(
'period_maximum',
1,
(bool) $period_maximum,
false
);
?>
</td>
</tr>
<tr id="row_period_minimum" class="datos">
<td class="bolder"><?php echo __('Minimum'); ?></td>
<td >
<?php
html_print_checkbox_switch(
'period_minimum',
1,
(bool) $period_minimum,
false
);
?>
</td>
</tr>
<tr id="row_period_average" class="datos">
<td class="bolder"><?php echo __('Average'); ?></td>
<td >
<?php
html_print_checkbox_switch(
'period_average',
1,
(bool) $period_average,
false
);
?>
</td>
</tr>
<tr id="row_period_summatory" class="datos">
<td class="bolder"><?php echo __('Summatory'); ?></td>
<td >
<?php
html_print_checkbox_switch(
'period_summatory',
1,
(bool) $period_summatory,
false
);
?>
</td>
</tr>
<tr id="row_period_slice_chart" class="datos">
<td class="bolder"><?php echo __('Slice'); ?></td>
<td >
<?php
html_print_extended_select_for_time(
'period_slice_chart',
(string) $period_slice_chart,
'',
'',
0,
7,
false,
false,
true,
'',
false,
[
SECONDS_1HOUR => __('1 hour'),
SECONDS_1DAY => __('1 day'),
SECONDS_1WEEK => __('1 week'),
SECONDS_1MONTH => __('1 month'),
]
);
?>
</td>
</tr>
<tr id="row_period_mode" class="datos">
<td class="bolder"><?php echo __('Mode'); ?></td>
<td >
<?php
$options_period_mode = [
CUSTOM_GRAPH_AREA => __('Area'),
CUSTOM_GRAPH_LINE => __('Line'),
CUSTOM_GRAPH_VBARS => __('Vertical bars'),
];
html_print_select(
$options_period_mode,
'period_mode',
$period_mode,
'',
'',
0,
false,
false,
false
);
?>
</td>
</tr>
<tr id="row_exception_condition" class="datos">
<td class="bolder"><?php echo __('Condition'); ?></td>
<td>
@ -7305,6 +7442,13 @@ function chooseType() {
$("#row_filter_search").hide();
$("#row_filter_exclude").hide();
$("#row_percentil").hide();
$("#row_periodicity_chart").hide();
$("#row_period_maximum").hide();
$("#row_period_minimum").hide();
$("#row_period_average").hide();
$("#row_period_summatory").hide();
$("#row_period_slice_chart").hide();
$("#row_period_mode").hide();
$("#log_help_tip").css("visibility", "hidden");
$("#agents_row").hide();
$("#agents_modules_row").hide();
@ -7448,12 +7592,23 @@ function chooseType() {
break;
case 'simple_graph':
$("#row_time_compare_overlapped").show();
$("#row_fullscale").show();
$("#row_image_threshold").show();
$("#row_graph_render").show();
$("#row_percentil").show();
$("#row_unknowns_graph").show();
$("#row_periodicity_chart").show();
var periodicity_chart = $("input[name='periodicity_chart']").prop("checked");
if(periodicity_chart){
$("#row_period_maximum").show();
$("#row_period_minimum").show();
$("#row_period_average").show();
$("#row_period_summatory").show();
$("#row_period_slice_chart").show();
$("#row_period_mode").show();
} else {
$("#row_time_compare_overlapped").show();
$("#row_fullscale").show();
$("#row_image_threshold").show();
$("#row_graph_render").show();
$("#row_percentil").show();
$("#row_unknowns_graph").show();
}
// Force type.
if('<?php echo $action; ?>' === 'new'){

View File

@ -2523,6 +2523,15 @@ switch ($action) {
$style['image_threshold'] = (int) get_parameter(
'image_threshold'
);
$style['periodicity_chart'] = (int) get_parameter_checkbox('periodicity_chart', 0);
$style['period_maximum'] = (int) get_parameter_checkbox('period_maximum', 1);
$style['period_minimum'] = (int) get_parameter_checkbox('period_minimum', 1);
$style['period_average'] = (int) get_parameter_checkbox('period_average', 1);
$style['period_summatory'] = (int) get_parameter_checkbox('period_summatory', 0);
$style['period_slice_chart'] = get_parameter('period_slice_chart', SECONDS_1HOUR);
$style['period_mode'] = get_parameter('period_mode', CUSTOM_GRAPH_VBARS);
if ($label != '') {
$style['label'] = $label;
} else {
@ -3512,6 +3521,15 @@ switch ($action) {
$style['image_threshold'] = (int) get_parameter(
'image_threshold'
);
$style['periodicity_chart'] = (int) get_parameter_checkbox('periodicity_chart', 0);
$style['period_maximum'] = (int) get_parameter_checkbox('period_maximum', 1);
$style['period_minimum'] = (int) get_parameter_checkbox('period_minimum', 1);
$style['period_average'] = (int) get_parameter_checkbox('period_average', 1);
$style['period_summatory'] = (int) get_parameter_checkbox('period_summatory', 0);
$style['period_slice_chart'] = get_parameter('period_slice_chart', SECONDS_1HOUR);
$style['period_mode'] = get_parameter('period_mode', CUSTOM_GRAPH_VBARS);
if ($label != '') {
$style['label'] = $label;
} else {

View File

@ -1310,7 +1310,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,
@ -1529,9 +1529,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);
@ -1583,7 +1588,23 @@ 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 .= '<div class="container-periodicity-graph">';
$output .= '<div>';
$output .= graphic_periodicity_module($params);
$output .= '</div>';
$output .= '</div>';
if ($params['compare'] === 'separated') {
$params['date'] = ($params['date'] - $params['period']);
$output .= '<div class="container-periodicity-graph">';
$output .= '<div>';
$output .= graphic_periodicity_module($params);
$output .= '</div>';
$output .= '</div>';
}
}
}
}

View File

@ -492,6 +492,7 @@ class HTML
$class = '';
}
$style_li = '';
if (empty($input['style']) === false) {
$style_li = $input['style'];
}

View File

@ -4049,6 +4049,7 @@ function series_type_graph_array($data, $show_elements_graph)
$i = 0;
if (isset($data) && is_array($data)) {
foreach ($data as $key => $value) {
$str = '';
if ($show_elements_graph['compare'] == 'overlapped') {
if ($key == 'sum2') {
$str = ' ('.__('Previous').')';
@ -4132,7 +4133,7 @@ function series_type_graph_array($data, $show_elements_graph)
} else {
$name_legend = '';
if ($show_elements_graph['graph_analytics'] === true) {
if (isset($show_elements_graph['graph_analytics']) === true && $show_elements_graph['graph_analytics'] === true) {
$name_legend .= '<div class="graph-analytics-legend-main">';
$name_legend .= '<div class="graph-analytics-legend-square" style="background-color: '.$color_series[$i]['color'].';">';
$name_legend .= '<span class="square-value">';

View File

@ -2424,6 +2424,150 @@ 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
{
if (isset($params['date']) === false || !$params['date']) {
$params['date'] = get_system_time();
}
$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' => (isset($params['height']) === true) ? $params['height'] : 200,
'waterMark' => true,
'legend' => ['display' => true],
'labels' => $graph_labels,
'multiple' => $multiple_labels,
'legend' => [
'display' => (isset($params['show_legend'])) ? $params['show_legend'] : true,
],
'ttl' => (isset($params['ttl']) === true) ? $params['ttl'] : 1,
];
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);
}
return $output;
}
/**
* Function for convert data summatory.
*
@ -3847,6 +3991,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;
@ -4112,6 +4257,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;
@ -5300,3 +5446,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

@ -5871,7 +5871,7 @@ function html_print_input($data, $wrapper='div', $input_only=false)
$output .= html_print_radio_button_extended(
$data['name'],
$data['value'],
$data['label'],
((isset($data['label']) === true) ? $data['label'] : ''),
((isset($data['checkedvalue']) === true) ? $data['checkedvalue'] : 1),
((isset($data['disabled']) === true) ? $data['disabled'] : ''),
((isset($data['script']) === true) ? $data['script'] : ''),
@ -5928,7 +5928,7 @@ function html_print_input($data, $wrapper='div', $input_only=false)
}
$params = [];
$params['disabled'] = $data['disabled'];
$params['disabled'] = ($data['disabled'] ?? false);
$params['return'] = $data['return'];
$params['show_helptip'] = false;
$params['input_name'] = $data['name'];
@ -5993,11 +5993,11 @@ function html_print_input($data, $wrapper='div', $input_only=false)
];
} else {
$string_filter = '';
if ($data['get_only_string_modules'] === true) {
if (isset($data['get_only_string_modules']) === true && $data['get_only_string_modules'] === true) {
$string_filter = 'AND id_tipo_modulo IN (17,23,3,10,33,36)';
}
if ($data['from_wux'] === true) {
if (isset($data['from_wux']) === true && $data['from_wux'] === true) {
$string_filter = ' AND id_tipo_modulo = 25';
}

View File

@ -11370,6 +11370,41 @@ function reporting_simple_graph(
$fullscale = (bool) $content['style']['fullscale'];
}
$periodicity_chart = false;
if (isset($content['style']['periodicity_chart'])) {
$periodicity_chart = (bool) $content['style']['periodicity_chart'];
}
$period_maximum = true;
if (isset($content['style']['period_maximum'])) {
$period_maximum = (bool) $content['style']['period_maximum'];
}
$period_minimum = true;
if (isset($content['style']['period_minimum'])) {
$period_minimum = (bool) $content['style']['period_minimum'];
}
$period_average = true;
if (isset($content['style']['period_average'])) {
$period_average = (bool) $content['style']['period_average'];
}
$period_summatory = false;
if (isset($content['style']['period_summatory'])) {
$period_summatory = (bool) $content['style']['period_summatory'];
}
$period_slice_chart = SECONDS_1HOUR;
if (isset($content['style']['period_slice_chart'])) {
$period_slice_chart = $content['style']['period_slice_chart'];
}
$period_mode = CUSTOM_GRAPH_VBARS;
if (isset($content['style']['period_mode'])) {
$period_mode = $content['style']['period_mode'];
}
$image_threshold = false;
if (isset($content['style']['image_threshold'])) {
$image_threshold = (bool) $content['style']['image_threshold'];
@ -11432,10 +11467,28 @@ function reporting_simple_graph(
'image_threshold' => $image_threshold,
];
if ((bool) $periodicity_chart === true) {
$params['width'] = null;
$params['period_maximum'] = $period_maximum;
$params['period_minimum'] = $period_minimum;
$params['period_average'] = $period_average;
$params['period_summatory'] = $period_summatory;
$params['period_slice_chart'] = $period_slice_chart;
$params['period_mode'] = $period_mode;
}
if ($only_image === false) {
$return['chart'] = grafico_modulo_sparse($params);
if ((bool) $periodicity_chart === false) {
$return['chart'] = \grafico_modulo_sparse($params);
} else {
$return['chart'] = \graphic_periodicity_module($params);
}
} else {
$return['chart'] = '<img src="data:image/png;base64,'.grafico_modulo_sparse($params).'" />';
if ((bool) $periodicity_chart === false) {
$return['chart'] = '<img src="data:image/png;base64,'.\grafico_modulo_sparse($params).'" />';
} else {
$return['chart'] = '<img src="data:image/png;base64,'.\graphic_periodicity_module($params).'" />';
}
}
break;

View File

@ -697,6 +697,7 @@ function get_build_setup_charts($type, $options, $data)
if (isset($options['waterMark']) === true
&& empty($options['waterMark']) === false
&& isset($options['waterMark']['url']) === true
) {
// WaterMark.
$chart->defaults()->getWaterMark()->setWidth(88);
@ -1283,12 +1284,12 @@ function get_build_setup_charts($type, $options, $data)
case 'BAR':
if (isset($options['multiple']) === true && empty($options['multiple']) === false) {
$i = 0;
foreach ($options['multiple'] as $key_label => $label) {
foreach ($options['multiple'] as $key_label => $info) {
$dataSet = $chart->createDataSet();
$dataSet->setLabel($label);
$dataSet->setBackgroundColor($colors[$i]);
$dataSet->setBorderColor($borders[$i]);
$dataSet->setBorderWidth(2);
$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++;
@ -1338,19 +1339,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;

View File

@ -277,7 +277,7 @@ function flot_area_graph(
'></div>";
$return .= "<div id='$graph_id' class='";
if ($params['type'] == 'area_simple') {
if (isset($params['type']) === true && $params['type'] == 'area_simple') {
$return .= 'noresizevc ';
}
@ -287,10 +287,12 @@ function flot_area_graph(
$width = 'width: '.$params['width'].';';
}
if (strpos($params['graph_width'], '%') === false) {
$width = 'width: '.$params['graph_width'].'px;';
} else {
$width = 'width: '.$params['graph_width'].';';
if (isset($params['graph_width']) === true) {
if (strpos($params['graph_width'], '%') === false) {
$width = 'width: '.$params['graph_width'].'px;';
} else {
$width = 'width: '.$params['graph_width'].';';
}
}
$return .= 'graph'.$params['adapt_key']."'
@ -346,10 +348,6 @@ function flot_area_graph(
$array_events_alerts = json_encode($array_events_alerts);
// Javascript code.
if ($font_size == '') {
$font_size = '\'\'';
}
$return .= "<script type='text/javascript'>";
$return .= "pandoraFlotArea(\n";

View File

@ -2566,6 +2566,40 @@ function WarningPeriodicityModal(title, message) {
});
}
function showPeriodicityOptions(element) {
if ($(element).is(":checked") === true) {
$("#row_period_maximum").show();
$("#row_period_minimum").show();
$("#row_period_average").show();
$("#row_period_summatory").show();
$("#row_period_slice_chart").show();
$("#row_period_mode").show();
$("#li-row_period_type").show();
$("#row_time_compare_overlapped").hide();
$("#row_fullscale").hide();
$("#row_image_threshold").hide();
$("#row_graph_render").hide();
$("#row_percentil").hide();
$("#MGgraphType").hide();
$("#row_unknowns_graph").hide();
} else {
$("#row_time_compare_overlapped").show();
$("#row_fullscale").show();
$("#row_image_threshold").show();
$("#row_graph_render").show();
$("#row_percentil").show();
$("#MGgraphType").show();
$("#row_unknowns_graph").show();
$("#row_period_maximum").hide();
$("#row_period_minimum").hide();
$("#row_period_average").hide();
$("#row_period_summatory").hide();
$("#row_period_slice_chart").hide();
$("#row_period_mode").hide();
$("#li-row_period_type").hide();
}
}
function christmas_click(flagEasternEgg) {
let counter = $("#count_click").val();
counter++;

View File

@ -1,4 +1,4 @@
/* globals $, GridStack, load_modal, TreeController, forced_title_callback, createVisualConsole, tinyMCE*/
/* globals $, GridStack, load_modal, TreeController, forced_title_callback, createVisualConsole, UndefineTinyMCE*/
// eslint-disable-next-line no-unused-vars
function show_option_dialog(settings) {
load_modal({
@ -1034,6 +1034,7 @@ function processTreeSearch(settings) {
});
}
// eslint-disable-next-line no-unused-vars
function processServiceTree(settings) {
var treeController = TreeController.getController();
@ -1606,6 +1607,38 @@ function showManualThresholds(element) {
}
}
// eslint-disable-next-line no-unused-vars
function showPeriodicityOptions(element) {
if ($(element).is(":checked") === true) {
$("#div_projection_switch").hide();
$("#div_type_mode_graph").hide();
$("#div_color_chart").hide();
$("#div_type_graph").hide();
$("#div_period_maximum").show();
$("#div_period_minimum").show();
$("#div_period_average").show();
$("#div_period_summatory").show();
$("#div_period_slice_chart").show();
$("#div_period_mode").show();
} else {
$("#div_projection_switch").show();
$("#div_type_mode_graph").show();
$("#div_color_chart").show();
$("#div_type_graph").show();
if ($("#projection_switch").is(":checked")) {
$("#div_projection_period").show();
} else {
$("#div_projection_period").hide();
}
$("#div_period_maximum").hide();
$("#div_period_minimum").hide();
$("#div_period_average").hide();
$("#div_period_summatory").hide();
$("#div_period_slice_chart").hide();
$("#div_period_mode").hide();
}
}
/**
* @return {void}
*/
@ -1637,6 +1670,7 @@ function type_change() {
}
// Show/Hide period for projection on agent module graph.
// eslint-disable-next-line no-unused-vars
function show_projection_period() {
if ($("#projection_switch").is(":checked")) {
$("#div_projection_period").show();

View File

@ -648,41 +648,15 @@ function createVisualConsole(
item.setMeta({ isUpdating: false });
var itemRetrieved = item.props;
if (itemRetrieved["type"] == 13 || itemRetrieved["type"] == 21) {
var startIsLeft =
itemRetrieved["startPosition"]["x"] -
itemRetrieved["endPosition"]["x"] <=
0;
var startIsTop =
itemRetrieved["startPosition"]["y"] -
itemRetrieved["endPosition"]["y"] <=
0;
itemRetrieved["startX"] = startIsLeft
? itemRetrieved["x"] + 20
: itemRetrieved["width"] + itemRetrieved["x"] + 20;
itemRetrieved["startY"] = startIsTop
? itemRetrieved["y"] + 20
: itemRetrieved["height"] + itemRetrieved["y"] + 20;
itemRetrieved["endX"] = startIsLeft
? itemRetrieved["width"] + itemRetrieved["x"] + 20
: itemRetrieved["x"] + 20;
itemRetrieved["endY"] = startIsTop
? itemRetrieved["height"] + itemRetrieved["y"] + 20
: itemRetrieved["y"] + 20;
} else {
itemRetrieved["x"] = itemRetrieved["x"] + 20;
itemRetrieved["y"] = itemRetrieved["y"] + 20;
}
itemRetrieved["receivedAt"] = new Date();
itemRetrieved["id"] = data;
var newItem = visualConsole.addElement(itemRetrieved);
newItem.setMeta({ editMode: true, isSelected: true });
var newItemData = JSON.parse(data);
newItemData["receivedAt"] = new Date();
var newItem = visualConsole.addElement(newItemData);
newItem.setMeta({
editMode: true,
isSelected: true,
isUpdating: false
});
visualConsole.buildRelations();
visualConsole.selectItem(newItem.props.id);
done();
@ -1232,7 +1206,7 @@ function cleanupDOM() {
$("#modalVCItemForm").empty();
}
/* Defined in operations/visual_console/view.php */
/* global $, load_modal, tinyMCE */
/* global $, load_modal, UndefineTinyMCE */
function createOrUpdateVisualConsoleItem(
visualConsole,
asyncTaskManager,
@ -1415,12 +1389,23 @@ function typeModuleGraph(type) {
$("#MGshowLegend").show();
$("#MGcustomGraph").hide();
$("#customGraphId").val(0);
$("#row_periodicity_chart").show();
if ($("#periodicityChart").is(":checked") === true) {
$("#MGgraphType").hide();
$("#li-row_period_type").show();
$("#row_period_slice_chart").show();
$("#row_period_mode").show();
}
} else if (type == "custom") {
$("#MGautoCompleteAgent").hide();
$("#MGautoCompleteModule").hide();
$("#MGgraphType").hide();
$("#MGshowLegend").hide();
$("#MGcustomGraph").show();
$("#row_periodicity_chart").hide();
$("#li-row_period_type").hide();
$("#row_period_slice_chart").hide();
$("#row_period_mode").hide();
}
}

View File

@ -269,6 +269,10 @@ class SingleGraphWidget extends Widget
$values['showLegend'] = $decoder['showLegend'];
}
if (isset($decoder['type_mode_graph']) === true) {
$values['type_mode_graph'] = $decoder['type_mode_graph'];
}
if (isset($decoder['projection_switch']) === true) {
$values['projection_switch'] = $decoder['projection_switch'];
}
@ -277,6 +281,42 @@ class SingleGraphWidget extends Widget
$values['period_projection'] = $decoder['period_projection'];
}
if (isset($decoder['periodicity_chart']) === true) {
$values['periodicity_chart'] = $decoder['periodicity_chart'];
}
if (isset($decoder['period_maximum']) === true) {
$values['period_maximum'] = $decoder['period_maximum'];
}
if (isset($decoder['period_minimum']) === true) {
$values['period_minimum'] = $decoder['period_minimum'];
}
if (isset($decoder['period_average']) === true) {
$values['period_average'] = $decoder['period_average'];
}
if (isset($decoder['period_summatory']) === true) {
$values['period_summatory'] = $decoder['period_summatory'];
}
if (isset($decoder['period_slice_chart']) === true) {
$values['period_slice_chart'] = $decoder['period_slice_chart'];
}
if (isset($decoder['period_mode']) === true) {
$values['period_mode'] = $decoder['period_mode'];
}
if (isset($decoder['color_chart']) === true) {
$values['color_chart'] = $decoder['color_chart'];
}
if (isset($decoder['type_graph']) === true) {
$values['type_graph'] = $decoder['type_graph'];
}
return $values;
}
@ -290,6 +330,7 @@ class SingleGraphWidget extends Widget
*/
public function getFormInputs(): array
{
global $config;
$values = $this->values;
// Retrieve global - common inputs.
@ -308,8 +349,49 @@ class SingleGraphWidget extends Widget
$values['showLegend'] = 1;
}
if (isset($values['type_graph']) === false) {
$values['type_graph'] = CUSTOM_GRAPH_AREA;
}
if (isset($values['period_maximum']) === false) {
$values['period_maximum'] = 1;
}
if (isset($values['period_minimum']) === false) {
$values['period_minimum'] = 1;
}
if (isset($values['period_average']) === false) {
$values['period_average'] = 1;
}
if (isset($values['period_slice_chart']) === false) {
$values['period_slice_chart'] = SECONDS_1HOUR;
}
if (isset($values['period_mode']) === false) {
$values['period_mode'] = CUSTOM_GRAPH_VBARS;
}
if (empty($values['color_chart']) === true) {
$values['color_chart'] = $config['graph_color1'];
}
$blocks = [
'row1',
'row2',
];
$inputs['blocks'] = $blocks;
foreach ($inputs as $kInput => $vInput) {
$inputs['inputs']['row1'][] = $vInput;
}
$display_periodicity_chart = ($values['periodicity_chart'] === true) ? '' : 'display:none';
// Autocomplete agents.
$inputs[] = [
$inputs['inputs']['row1'][] = [
'label' => __('Agent'),
'arguments' => [
'type' => 'autocomplete_agent',
@ -327,7 +409,7 @@ class SingleGraphWidget extends Widget
];
// Autocomplete module.
$inputs[] = [
$inputs['inputs']['row1'][] = [
'label' => __('Module').ui_print_help_tip(__('Warning, this requires to have data for a mid-term (days/weeks) of the source data, if not, projection will not be reliable.'), true),
'arguments' => [
'type' => 'autocomplete_module',
@ -340,11 +422,12 @@ class SingleGraphWidget extends Widget
'style' => 'width: inherit;',
'nothing' => __('None'),
'nothing_value' => 0,
'required' => 1,
],
];
// Show legend.
$inputs[] = [
$inputs['inputs']['row1'][] = [
'label' => __('Show legend'),
'arguments' => [
'name' => 'showLegend',
@ -355,7 +438,7 @@ class SingleGraphWidget extends Widget
];
// Period.
$inputs[] = [
$inputs['inputs']['row1'][] = [
'label' => __('Interval'),
'arguments' => [
'name' => 'period',
@ -369,9 +452,65 @@ class SingleGraphWidget extends Widget
],
];
$inputs['inputs']['row1'][] = [
'label' => __('Sliced mode'),
'arguments' => [
'name' => 'periodicity_chart',
'id' => 'periodicity_chart',
'type' => 'switch',
'value' => $values['periodicity_chart'],
'onclick' => 'showPeriodicityOptions(this)',
],
];
$inputs['inputs']['row2'][] = [
'label' => __('Chart color'),
'id' => 'div_color_chart',
'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '',
'arguments' => [
'wrapper' => 'div',
'name' => 'color_chart',
'type' => 'color',
'value' => $values['color_chart'],
'return' => true,
],
];
$options_mode = [
CUSTOM_GRAPH_AREA => __('Area'),
CUSTOM_GRAPH_LINE => __('Line'),
];
$inputs['inputs']['row2'][] = [
'label' => __('Type graph'),
'id' => 'div_type_graph',
'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '',
'arguments' => [
'type' => 'select',
'fields' => $options_mode,
'name' => 'type_graph',
'selected' => $values['type_graph'],
'return' => true,
],
];
$inputs['inputs']['row2'][] = [
'label' => __('AVG/MAX/MIN'),
'id' => 'div_type_mode_graph',
'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '',
'arguments' => [
'name' => 'type_mode_graph',
'id' => 'type_mode_graph',
'type' => 'switch',
'value' => $values['type_mode_graph'],
],
];
// Projection.
$inputs[] = [
$inputs['inputs']['row2'][] = [
'label' => __('Projection Graph'),
'id' => 'div_projection_switch',
'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '',
'arguments' => [
'name' => 'projection_switch',
'id' => 'projection_switch',
@ -383,7 +522,7 @@ class SingleGraphWidget extends Widget
// Period Projection.
$display_projection = ($values['projection_switch'] === true) ? '' : 'display:none';
$inputs[] = [
$inputs['inputs']['row2'][] = [
'label' => __('Period Projection'),
'id' => 'div_projection_period',
'style' => $display_projection,
@ -396,6 +535,90 @@ class SingleGraphWidget extends Widget
],
];
$inputs['inputs']['row2'][] = [
'label' => __('Maximum'),
'id' => 'div_period_maximum',
'style' => $display_periodicity_chart,
'arguments' => [
'name' => 'period_maximum',
'id' => 'period_maximum',
'type' => 'switch',
'value' => $values['period_maximum'],
],
];
$inputs['inputs']['row2'][] = [
'label' => __('Minimum'),
'id' => 'div_period_minimum',
'style' => $display_periodicity_chart,
'arguments' => [
'name' => 'period_minimum',
'id' => 'period_minimum',
'type' => 'switch',
'value' => $values['period_minimum'],
],
];
$inputs['inputs']['row2'][] = [
'label' => __('Average'),
'id' => 'div_period_average',
'style' => $display_periodicity_chart,
'arguments' => [
'name' => 'period_average',
'id' => 'period_average',
'type' => 'switch',
'value' => $values['period_average'],
],
];
$inputs['inputs']['row2'][] = [
'label' => __('Summatory'),
'id' => 'div_period_summatory',
'style' => $display_periodicity_chart,
'arguments' => [
'name' => 'period_summatory',
'id' => 'period_summatory',
'type' => 'switch',
'value' => $values['period_summatory'],
],
];
$inputs['inputs']['row2'][] = [
'label' => __('Slice period'),
'id' => 'div_period_slice_chart',
'style' => $display_periodicity_chart,
'arguments' => [
'name' => 'period_slice_chart',
'type' => 'interval',
'value' => (string) $values['period_slice_chart'],
'custom_fields' => [
SECONDS_1HOUR => __('1 hour'),
SECONDS_1DAY => __('1 day'),
SECONDS_1WEEK => __('1 week'),
SECONDS_1MONTH => __('1 month'),
],
],
];
$options_period_mode = [
CUSTOM_GRAPH_AREA => __('Area'),
CUSTOM_GRAPH_LINE => __('Line'),
CUSTOM_GRAPH_VBARS => __('Vertical bars'),
];
$inputs['inputs']['row2'][] = [
'label' => __('Type chart'),
'id' => 'div_period_mode',
'style' => $display_periodicity_chart,
'arguments' => [
'type' => 'select',
'fields' => $options_period_mode,
'name' => 'period_mode',
'selected' => $values['period_mode'],
'return' => true,
],
];
return $inputs;
}
@ -407,6 +630,7 @@ class SingleGraphWidget extends Widget
*/
public function getPost():array
{
global $config;
// Retrieve global - common inputs.
$values = parent::getPost();
@ -414,9 +638,21 @@ class SingleGraphWidget extends Widget
$values['metaconsoleId'] = \get_parameter('metaconsoleId', 0);
$values['moduleId'] = \get_parameter('moduleId', 0);
$values['period'] = \get_parameter('period', 0);
$values['type_graph'] = \get_parameter('type_graph', CUSTOM_GRAPH_AREA);
$values['showLegend'] = \get_parameter_switch('showLegend');
$values['projection_switch'] = (boolean) get_parameter_switch('projection_switch');
$values['type_mode_graph'] = \get_parameter_switch('type_mode_graph');
$values['projection_switch'] = (boolean) \get_parameter_switch('projection_switch');
$values['period_projection'] = \get_parameter('period_projection', 0);
$values['color_chart'] = \get_parameter('color_chart', $config['graph_color1']);
// Values periodicity chart.
$values['periodicity_chart'] = (boolean) \get_parameter_switch('periodicity_chart');
$values['period_maximum'] = (boolean) \get_parameter_switch('period_maximum');
$values['period_minimum'] = (boolean) \get_parameter_switch('period_minimum');
$values['period_average'] = (boolean) \get_parameter_switch('period_average');
$values['period_summatory'] = (boolean) \get_parameter_switch('period_summatory');
$values['period_slice_chart'] = \get_parameter('period_slice_chart', SECONDS_1HOUR);
$values['period_mode'] = \get_parameter('period_mode', CUSTOM_GRAPH_VBARS);
return $values;
}
@ -447,7 +683,7 @@ class SingleGraphWidget extends Widget
$trickHight = 0;
if ($this->values['showLegend'] === 1) {
// Needed for legend.
$trickHight = 60;
$trickHight = 30;
}
$output = '<div class="container-center widget-mrgn-0px">';
@ -479,21 +715,69 @@ class SingleGraphWidget extends Widget
);
$output .= $return['chart'];
} else {
if ($this->values['showLegend'] === 1 && (bool) $this->values['type_mode_graph'] === true) {
$trickHight *= 3;
}
if (isset($this->values['color_chart']) === false
|| empty($this->values['color_chart']) === true
) {
$this->values['color_chart'] = $config['graph_color1'];
}
if (isset($this->values['type_graph']) === false
|| empty($this->values['type_graph']) === true
) {
$this->values['type_graph'] = CUSTOM_GRAPH_AREA;
}
$params = [
'agent_module_id' => $this->values['moduleId'],
'width' => '100%',
'height' => ((int) $size['height'] - $trickHight),
'period' => $this->values['period'],
'title' => $module_name,
'unit' => $units_name,
'homeurl' => $config['homeurl'],
'backgroundColor' => 'transparent',
'show_legend' => $this->values['showLegend'],
'show_title' => $module_name,
'menu' => false,
'dashboard' => true,
'agent_module_id' => $this->values['moduleId'],
'width' => '100%',
'height' => ((int) $size['height'] - $trickHight),
'period' => $this->values['period'],
'title' => $module_name,
'unit' => $units_name,
'homeurl' => $config['homeurl'],
'backgroundColor' => 'transparent',
'show_legend' => $this->values['showLegend'],
'show_title' => $module_name,
'menu' => false,
'dashboard' => true,
'type_graph' => (int) $this->values['type_graph'],
'type_mode_graph' => $this->values['type_mode_graph'],
'period_maximum' => $this->values['period_maximum'],
'period_minimum' => $this->values['period_minimum'],
'period_average' => $this->values['period_average'],
'period_summatory' => $this->values['period_summatory'],
'period_slice_chart' => $this->values['period_slice_chart'],
'period_mode' => $this->values['period_mode'],
'array_colors' => [
[
'border' => '#000000',
'color' => $this->values['color_chart'].'80',
'alpha' => 75,
],
[
'border' => '#000000',
'color' => $this->values['color_chart'],
'alpha' => 50,
],
[
'border' => '#000000',
'color' => $this->values['color_chart'].'60',
'alpha' => 25,
],
],
];
$output .= \grafico_modulo_sparse($params);
if ((bool) $this->values['periodicity_chart'] === false) {
$output .= \grafico_modulo_sparse($params);
} else {
$params['width'] = null;
$params['height'] = (int) $size['height'];
$output .= \graphic_periodicity_module($params);
}
}
$output .= '</div>';
@ -531,7 +815,7 @@ class SingleGraphWidget extends Widget
public function getSizeModalConfiguration(): array
{
$size = [
'width' => 450,
'width' => 800,
'height' => 430,
];

View File

@ -95,7 +95,7 @@ if ($doLogin === true) {
if ($visualConsoleId) {
// Retrieve the visual console.
$visualConsole = VisualConsole::fromDB(['id' => $visualConsoleId], $ratio);
$visualConsole = VisualConsole::fromDB(['id' => $visualConsoleId]);
$visualConsoleData = $visualConsole->toArray();
$vcGroupId = $visualConsoleData['groupId'];
@ -307,18 +307,19 @@ if ($getVisualConsole === true) {
}
unset($data['id']);
$class = VisualConsole::getItemClass((int) $data['type']);
try {
// Save the new item.
$result = $class::create($data);
$itemId = $class::create($data);
$item = VisualConsole::getItemFromDB($itemId);
$result = $item->toArray();
} catch (\Throwable $th) {
// There is no item in the database.
echo false;
return;
}
echo $result;
echo json_encode($result);
return;
} else if ($getImagesVisualConsole) {
$img = get_parameter('nameImg', 'appliance');

View File

@ -2515,7 +2515,7 @@ class Item extends CachedModel
'arguments' => [
'name' => 'linkedLayoutStatusTypeWeight',
'type' => 'number',
'value' => $values['linkedLayoutStatusTypeWeight'],
'value' => ($values['linkedLayoutStatusTypeWeight'] ?? 0),
'return' => true,
'min' => 0,
],

View File

@ -60,9 +60,8 @@ final class ModuleGraph extends Item
protected static function encode(array $data): array
{
$return = parent::encode($data);
$id_custom_graph = static::extractIdCustomGraph($data);
if (!empty($id_custom_graph)) {
if (empty($id_custom_graph) === false) {
if (\is_metaconsole()) {
$explode_custom_graph = explode('|', $id_custom_graph);
$return['id_custom_graph'] = $explode_custom_graph[0];
@ -82,6 +81,18 @@ final class ModuleGraph extends Item
$return['show_statistics'] = static::parseBool($show_legend);
}
$return['period_chart_options'] = json_encode(
[
'periodicityChart' => static::extractPeriodicityChart($data),
'periodMaximum' => static::extractPeriodMaximum($data),
'periodMinimum' => static::extractPeriodMinimum($data),
'periodAverage' => static::extractPeriodAverage($data),
'periodSummatory' => static::extractPeriodSummatory($data),
'periodSliceChart' => static::extractPeriodSliceChart($data),
'periodMode' => static::extractPeriodMode($data),
]
);
return $return;
}
@ -149,6 +160,15 @@ final class ModuleGraph extends Item
$return['period'] = static::extractPeriod($data);
$return['showLegend'] = static::extractShowLegend($data);
$return['periodChartOptions'] = static::extractPeriodChartOptions($data);
$return['periodicityChart'] = static::extractPeriodicityChart($return['periodChartOptions']);
$return['periodMaximum'] = static::extractPeriodMaximum($return['periodChartOptions']);
$return['periodMinimum'] = static::extractPeriodMinimum($return['periodChartOptions']);
$return['periodAverage'] = static::extractPeriodAverage($return['periodChartOptions']);
$return['periodSummatory'] = static::extractPeriodSummatory($return['periodChartOptions']);
$return['periodSliceChart'] = static::extractPeriodSliceChart($return['periodChartOptions']);
$return['periodMode'] = static::extractPeriodMode($return['periodChartOptions']);
$customGraphId = static::extractCustomGraphId($data);
if (empty($customGraphId) === false) {
@ -161,6 +181,30 @@ final class ModuleGraph extends Item
}
/**
* Extract a dynamic data structure from the 'periodChartOptions' field.
*
* @param array $data Unknown input data structure.
*
* @return array Dynamic data structure.
* @throws \InvalidArgumentException If the structure cannot be built.
*/
private static function extractPeriodChartOptions(array $data): array
{
$periodChartOptions = static::notEmptyStringOr($data['period_chart_options'], null);
$result = [];
if ($periodChartOptions !== null) {
try {
$result = \json_decode($periodChartOptions, true);
} catch (\Throwable $e) {
throw new \InvalidArgumentException('invalid dynamic data');
}
}
return $result;
}
/**
* Extract a background type value.
*
@ -216,6 +260,118 @@ final class ModuleGraph extends Item
}
/**
* Extract the "type sliced" switch value.
*
* @param array $data Unknown input data structure.
*
* @return boolean
*/
private static function extractPeriodicityChart(array $data): bool
{
return static::parseBool(
static::issetInArray($data, ['periodicityChart']),
false
);
}
/**
* Extract the "period maximum" switch value.
*
* @param array $data Unknown input data structure.
*
* @return boolean
*/
private static function extractPeriodMaximum(array $data): bool
{
return static::parseBool(
static::issetInArray($data, ['periodMaximum']),
true
);
}
/**
* Extract the "period minimum" switch value.
*
* @param array $data Unknown input data structure.
*
* @return boolean
*/
private static function extractPeriodMinimum(array $data): bool
{
return static::parseBool(
static::issetInArray($data, ['periodMinimum']),
true
);
}
/**
* Extract the "period average" switch value.
*
* @param array $data Unknown input data structure.
*
* @return boolean
*/
private static function extractPeriodAverage(array $data): bool
{
return static::parseBool(
static::issetInArray($data, ['periodAverage']),
true
);
}
/**
* Extract the "period summatory" switch value.
*
* @param array $data Unknown input data structure.
*
* @return boolean
*/
private static function extractPeriodSummatory(array $data): bool
{
return static::parseBool(
static::issetInArray($data, ['periodSummatory']),
false
);
}
/**
* Extract the "period Slice" switch value.
*
* @param array $data Unknown input data structure.
*
* @return boolean
*/
private static function extractPeriodSliceChart(array $data): int
{
return static::parseIntOr(
static::issetInArray($data, ['periodSliceChart']),
SECONDS_1HOUR
);
}
/**
* Extract the "period mode" switch value.
*
* @param array $data Unknown input data structure.
*
* @return boolean
*/
private static function extractPeriodMode(array $data): int
{
return static::parseIntOr(
static::issetInArray($data, ['periodMode']),
CUSTOM_GRAPH_VBARS
);
}
/**
* Extract a custom graph Id value.
*
@ -289,6 +445,15 @@ final class ModuleGraph extends Item
$period = static::extractPeriod($data);
$showLegend = static::extractShowLegend($data);
$periodChartOptions = static::extractPeriodChartOptions($data);
$periodicityChart = static::extractPeriodicityChart($periodChartOptions);
$periodMaximum = static::extractPeriodMaximum($periodChartOptions);
$periodMinimum = static::extractPeriodMinimum($periodChartOptions);
$periodAverage = static::extractPeriodAverage($periodChartOptions);
$periodSummatory = static::extractPeriodSummatory($periodChartOptions);
$periodSliceChart = static::extractPeriodSliceChart($periodChartOptions);
$periodMode = static::extractPeriodMode($periodChartOptions);
$customGraphId = static::extractCustomGraphId($data);
$graphType = static::extractGraphType($data);
$linkedModule = static::extractLinkedModule($data);
@ -425,7 +590,23 @@ final class ModuleGraph extends Item
'server_id' => $metaconsoleId,
];
$chart = \grafico_modulo_sparse($params);
if ($periodicityChart === true) {
$params['width'] = null;
$params['period_maximum'] = $periodMaximum;
$params['period_minimum'] = $periodMinimum;
$params['period_average'] = $periodAverage;
$params['period_summatory'] = $periodSummatory;
$params['period_slice_chart'] = $periodSliceChart;
$params['period_mode'] = $periodMode;
}
if ($periodicityChart === false) {
$chart = \grafico_modulo_sparse($params);
} else {
$chart = '<div style="background:'.$params['backgroundColor'].'; width: inherit; height: inherit;">';
$chart .= \graphic_periodicity_module($params);
$chart .= '</div>';
}
}
$data['html'] = $chart;
@ -505,6 +686,26 @@ final class ModuleGraph extends Item
$values['showLegend'] = true;
}
if (isset($values['periodMaximum']) === false) {
$values['periodMaximum'] = true;
}
if (isset($values['periodMinimum']) === false) {
$values['periodMinimum'] = true;
}
if (isset($values['periodAverage']) === false) {
$values['periodAverage'] = true;
}
if (isset($values['periodSliceChart']) === false) {
$values['periodSliceChart'] = SECONDS_1HOUR;
}
if (isset($values['periodMode']) === false) {
$values['periodMode'] = CUSTOM_GRAPH_VBARS;
}
// Background color.
$fields = [
'white' => __('White'),
@ -608,9 +809,13 @@ final class ModuleGraph extends Item
// Custom graph.
$fields = self::getListCustomGraph();
$selected_custom_graph = (\is_metaconsole() === true)
? $values['customGraphId'].'|'.$values['metaconsoleId']
: $values['customGraphId'];
$selected_custom_graph = 0;
if (isset($values['customGraphId']) === true) {
$selected_custom_graph = (\is_metaconsole() === true)
? $values['customGraphId'].'|'.$values['metaconsoleId']
: $values['customGraphId'];
}
$inputs[] = [
'id' => 'MGcustomGraph',
'hidden' => $hiddenCustom,
@ -640,25 +845,6 @@ final class ModuleGraph extends Item
],
];
// Graph Type.
$fields = [
'line' => __('Line'),
'area' => __('Area'),
];
$inputs[] = [
'id' => 'MGgraphType',
'hidden' => $hiddenModule,
'label' => __('Graph Type'),
'arguments' => [
'type' => 'select',
'fields' => $fields,
'name' => 'graphType',
'selected' => $values['graphType'],
'return' => true,
],
];
// Show legend.
$inputs[] = [
'id' => 'MGshowLegend',
@ -672,6 +858,124 @@ final class ModuleGraph extends Item
],
];
$inputs[] = [
'label' => __('Sliced mode'),
'id' => 'row_periodicity_chart',
'hidden' => $hiddenModule,
'arguments' => [
'name' => 'periodicityChart',
'id' => 'periodicityChart',
'type' => 'switch',
'value' => $values['periodicityChart'],
'onclick' => 'showPeriodicityOptions(this)',
],
];
// Graph Type.
$fields = [
'line' => __('Line'),
'area' => __('Area'),
];
$inputs[] = [
'label' => __('Graph Type'),
'id' => 'MGgraphType',
'style' => ($values['periodicityChart'] === false) ? '' : 'display:none',
'hidden' => $hiddenModule,
'arguments' => [
'type' => 'select',
'fields' => $fields,
'name' => 'graphType',
'selected' => $values['graphType'],
'return' => true,
],
];
$displayPeriodicityChart = ($values['periodicityChart'] === true) ? '' : 'display:none';
$inputs[] = [
'block_id' => 'row_period_type',
'class' => 'flex-row flex-start w100p',
'style' => $displayPeriodicityChart,
'hidden' => $hiddenModule,
'direct' => 1,
'block_content' => [
[
'label' => __('Maximum'),
'arguments' => [
'name' => 'periodMaximum',
'id' => 'periodMaximum',
'type' => 'switch',
'value' => $values['periodMaximum'],
],
],
[
'label' => __('Minimum'),
'arguments' => [
'name' => 'periodMinimum',
'id' => 'periodMinimum',
'type' => 'switch',
'value' => $values['periodMinimum'],
],
],
[
'label' => __('Average'),
'arguments' => [
'name' => 'periodAverage',
'id' => 'periodAverage',
'type' => 'switch',
'value' => $values['periodAverage'],
],
],
[
'label' => __('Summatory'),
'arguments' => [
'name' => 'periodSummatory',
'id' => 'periodSummatory',
'type' => 'switch',
'value' => $values['periodSummatory'],
],
],
],
];
$inputs[] = [
'label' => __('Slice period'),
'id' => 'row_period_slice_chart',
'style' => $displayPeriodicityChart,
'hidden' => $hiddenModule,
'arguments' => [
'name' => 'periodSliceChart',
'type' => 'interval',
'value' => (string) $values['periodSliceChart'],
'custom_fields' => [
SECONDS_1HOUR => __('1 hour'),
SECONDS_1DAY => __('1 day'),
SECONDS_1WEEK => __('1 week'),
SECONDS_1MONTH => __('1 month'),
],
],
];
$optionsPeriodMode = [
CUSTOM_GRAPH_AREA => __('Area'),
CUSTOM_GRAPH_LINE => __('Line'),
CUSTOM_GRAPH_VBARS => __('Vertical bars'),
];
$inputs[] = [
'label' => __('Type chart'),
'id' => 'row_period_mode',
'style' => $displayPeriodicityChart,
'hidden' => $hiddenModule,
'arguments' => [
'type' => 'select',
'fields' => $optionsPeriodMode,
'name' => 'periodMode',
'selected' => $values['periodMode'],
'return' => true,
],
];
// Inputs LinkedVisualConsole.
$inputsLinkedVisualConsole = self::inputsLinkedVisualConsole(
$values

View File

@ -341,6 +341,13 @@ class View extends \HTML
$data['graphType'] = \get_parameter('graphType');
$data['showLegend'] = \get_parameter_switch('showLegend');
$data['period'] = \get_parameter('period');
$data['periodicityChart'] = \get_parameter_switch('periodicityChart');
$data['periodMaximum'] = \get_parameter_switch('periodMaximum');
$data['periodMinimum'] = \get_parameter_switch('periodMinimum');
$data['periodAverage'] = \get_parameter_switch('periodAverage');
$data['periodSummatory'] = \get_parameter_switch('periodSummatory');
$data['periodSliceChart'] = \get_parameter('periodSliceChart');
$data['periodMode'] = \get_parameter('periodMode');
break;
case SIMPLE_VALUE:

View File

@ -282,6 +282,8 @@ li#div-textarea label {
.container-center:has(div.parent_graph) {
display: initial;
width: 98%;
margin: 0 auto;
}
.content-widget .container-top {

View File

@ -9627,9 +9627,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 {
@ -12202,6 +12212,14 @@ td[id^="table_info_box"] a {
border-bottom: 1px solid #dedede !important;
}
div#visual-console-container div.parent_graph > p.legend_background {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin: 0px;
}
div.parent_graph > p.legend_background > table > tbody {
display: flex;
flex-direction: row;
@ -12870,6 +12888,25 @@ tr.shown td.details-control {
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;
}
@-moz-keyframes nieve {
from {
top: -40px;

View File

@ -746,6 +746,7 @@ p {
strong {
font-size: inherit;
}
/* Styles for the solid icons */
.fa {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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 .= __('Sliced');
$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

@ -177,7 +177,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>';

View File

@ -1149,11 +1149,6 @@ if ($edit_capable === true) {
visualConsoleManager.copyItem(item);
}
});
setTimeout(
function()
{
visualConsoleManager.forceUpdateVisualConsole();
}, 500);
});
$('.link-create-item').click(function (event){

View File

@ -1749,7 +1749,8 @@ CREATE TABLE IF NOT EXISTS `tlayout_data` (
`timezone` VARCHAR(60) NOT NULL DEFAULT 'Europe/Madrid',
`show_last_value` TINYINT UNSIGNED NULL DEFAULT 0,
`cache_expiration` INT UNSIGNED NOT NULL DEFAULT 0,
`title` TEXT ,
`title` TEXT,
`period_chart_options` TEXT,
PRIMARY KEY(`id`),
INDEX `tlayout_data_layout` (`id_layout`)
) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;
@ -3827,6 +3828,8 @@ CREATE TABLE IF NOT EXISTS `tlayout_template_data` (
`timezone` VARCHAR(60) NOT NULL DEFAULT 'Europe/Madrid',
`show_last_value` TINYINT UNSIGNED NULL DEFAULT 0,
`cache_expiration` INT UNSIGNED NOT NULL DEFAULT 0,
`title` TEXT,
`period_chart_options` TEXT,
PRIMARY KEY(`id`),
FOREIGN KEY (`id_layout_template`) REFERENCES tlayout_template(`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;

View File

@ -815,7 +815,13 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
this.elementRef.style.minWidth = "max-content";
this.elementRef.style.minHeight = "max-content";
}
this.updateDomElement(this.childElementRef);
if (
prevProps.type == ItemType.LINE_ITEM ||
prevProps.type == ItemType.NETWORK_LINK
) {
this.updateDomElement(this.childElementRef);
}
}
// Move box.
if (!prevProps || this.positionChanged(prevProps, this.props)) {
@ -863,8 +869,6 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// Change link.
if (prevProps && prevProps.isLinkEnabled !== this.props.isLinkEnabled) {
const container = this.createContainerDomElement();
// Add the children of the old element.
container.innerHTML = this.elementRef.innerHTML;
// Copy the attributes.
const attrs = this.elementRef.attributes;
for (let i = 0; i < attrs.length; i++) {
@ -873,7 +877,8 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
attrs[i].nodeName
);
if (cloneIsNeeded !== null) {
container.setAttributeNode(<any>cloneIsNeeded.cloneNode());
let cloneAttr = cloneIsNeeded.cloneNode(true) as Attr;
container.setAttributeNode(cloneAttr);
}
}
}
@ -884,6 +889,10 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
// Changed the reference to the main element. It's ugly, but needed.
this.elementRef = container;
// Insert the elements into the container.
this.elementRef.appendChild(this.childElementRef);
this.elementRef.appendChild(this.labelElementRef);
}
if (