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;'>"; 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

@ -1097,6 +1097,10 @@ SET @sqlstmt = IF (@exist>0, 'ALTER TABLE `tagente` DROP COLUMN `transactional_a
prepare stmt from @sqlstmt; prepare stmt from @sqlstmt;
execute stmt; 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` ALTER TABLE `tdashboard`
ADD COLUMN `date_range` TINYINT NOT NULL DEFAULT 0 AFTER `cells_slideshow`, ADD COLUMN `date_range` TINYINT NOT NULL DEFAULT 0 AFTER `cells_slideshow`,
ADD COLUMN `date_from` INT NOT NULL DEFAULT 0 AFTER `date_range`, 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 = '';
$header_autorefresh_counter = ''; $header_autorefresh_counter = '';
$header_setup = '';
if (($_GET['sec2'] !== 'operation/visual_console/render_view')) { if (($_GET['sec2'] !== 'operation/visual_console/render_view')) {
if ($autorefresh_list !== null if ($autorefresh_list !== null
@ -352,7 +353,6 @@ echo sprintf('<div id="header_table" class="header_table_%s">', $menuTypeClass);
$display_counter = 'display:none'; $display_counter = 'display:none';
} }
$header_setup = '';
if ((bool) check_acl($config['id_user'], 0, 'PM') === true) { 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 .= '<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( $header_setup .= html_print_image(

View File

@ -154,6 +154,14 @@ $image_threshold = false;
$time_compare_overlapped = false; $time_compare_overlapped = false;
$unknowns_graph = 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. // Added for events items.
$server_multiple = [0]; $server_multiple = [0];
$show_summary_group = false; $show_summary_group = false;
@ -353,11 +361,19 @@ switch ($action) {
break; break;
case 'simple_graph': 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; $percentil = isset($style['percentil']) ? (bool) $style['percentil'] : 0;
$image_threshold = (isset($style['image_threshold']) === true) ? (bool) $style['image_threshold'] : false; $image_threshold = (isset($style['image_threshold']) === true) ? (bool) $style['image_threshold'] : false;
$graph_render = $item['graph_render']; $graph_render = $item['graph_render'];
$unknowns_graph = $item['check_unknowns_graph']; $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. // The break hasn't be forgotten.
case 'simple_baseline_graph': case 'simple_baseline_graph':
case 'projection_graph': case 'projection_graph':
@ -3050,6 +3066,22 @@ if (is_metaconsole() === true) {
</td> </td>
</tr> </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"> <tr id="row_graph_render" class="datos">
<td class="bolder"> <td class="bolder">
<?php <?php
@ -3197,6 +3229,111 @@ if (is_metaconsole() === true) {
</td> </td>
</tr> </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"> <tr id="row_exception_condition" class="datos">
<td class="bolder"><?php echo __('Condition'); ?></td> <td class="bolder"><?php echo __('Condition'); ?></td>
<td> <td>
@ -7305,6 +7442,13 @@ function chooseType() {
$("#row_filter_search").hide(); $("#row_filter_search").hide();
$("#row_filter_exclude").hide(); $("#row_filter_exclude").hide();
$("#row_percentil").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"); $("#log_help_tip").css("visibility", "hidden");
$("#agents_row").hide(); $("#agents_row").hide();
$("#agents_modules_row").hide(); $("#agents_modules_row").hide();
@ -7448,12 +7592,23 @@ function chooseType() {
break; break;
case 'simple_graph': case 'simple_graph':
$("#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_time_compare_overlapped").show();
$("#row_fullscale").show(); $("#row_fullscale").show();
$("#row_image_threshold").show(); $("#row_image_threshold").show();
$("#row_graph_render").show(); $("#row_graph_render").show();
$("#row_percentil").show(); $("#row_percentil").show();
$("#row_unknowns_graph").show(); $("#row_unknowns_graph").show();
}
// Force type. // Force type.
if('<?php echo $action; ?>' === 'new'){ if('<?php echo $action; ?>' === 'new'){

View File

@ -2523,6 +2523,15 @@ switch ($action) {
$style['image_threshold'] = (int) get_parameter( $style['image_threshold'] = (int) get_parameter(
'image_threshold' '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 != '') { if ($label != '') {
$style['label'] = $label; $style['label'] = $label;
} else { } else {
@ -3512,6 +3521,15 @@ switch ($action) {
$style['image_threshold'] = (int) get_parameter( $style['image_threshold'] = (int) get_parameter(
'image_threshold' '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 != '') { if ($label != '') {
$style['label'] = $label; $style['label'] = $label;
} else { } else {

View File

@ -1310,7 +1310,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,
@ -1529,9 +1529,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);
@ -1583,7 +1588,23 @@ if (check_login()) {
$output .= $graph['chart']; $output .= $graph['chart'];
$output .= '</div>'; $output .= '</div>';
} else { } else {
if ($tab_active === 'tabs-chart-module-graph') {
$output .= grafico_modulo_sparse($params); $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 = ''; $class = '';
} }
$style_li = '';
if (empty($input['style']) === false) { if (empty($input['style']) === false) {
$style_li = $input['style']; $style_li = $input['style'];
} }

View File

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

@ -5871,7 +5871,7 @@ function html_print_input($data, $wrapper='div', $input_only=false)
$output .= html_print_radio_button_extended( $output .= html_print_radio_button_extended(
$data['name'], $data['name'],
$data['value'], $data['value'],
$data['label'], ((isset($data['label']) === true) ? $data['label'] : ''),
((isset($data['checkedvalue']) === true) ? $data['checkedvalue'] : 1), ((isset($data['checkedvalue']) === true) ? $data['checkedvalue'] : 1),
((isset($data['disabled']) === true) ? $data['disabled'] : ''), ((isset($data['disabled']) === true) ? $data['disabled'] : ''),
((isset($data['script']) === true) ? $data['script'] : ''), ((isset($data['script']) === true) ? $data['script'] : ''),
@ -5928,7 +5928,7 @@ function html_print_input($data, $wrapper='div', $input_only=false)
} }
$params = []; $params = [];
$params['disabled'] = $data['disabled']; $params['disabled'] = ($data['disabled'] ?? false);
$params['return'] = $data['return']; $params['return'] = $data['return'];
$params['show_helptip'] = false; $params['show_helptip'] = false;
$params['input_name'] = $data['name']; $params['input_name'] = $data['name'];
@ -5993,11 +5993,11 @@ function html_print_input($data, $wrapper='div', $input_only=false)
]; ];
} else { } else {
$string_filter = ''; $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)'; $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'; $string_filter = ' AND id_tipo_modulo = 25';
} }

View File

@ -11370,6 +11370,41 @@ function reporting_simple_graph(
$fullscale = (bool) $content['style']['fullscale']; $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; $image_threshold = false;
if (isset($content['style']['image_threshold'])) { if (isset($content['style']['image_threshold'])) {
$image_threshold = (bool) $content['style']['image_threshold']; $image_threshold = (bool) $content['style']['image_threshold'];
@ -11432,10 +11467,28 @@ function reporting_simple_graph(
'image_threshold' => $image_threshold, '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) { if ($only_image === false) {
$return['chart'] = grafico_modulo_sparse($params); if ((bool) $periodicity_chart === false) {
$return['chart'] = \grafico_modulo_sparse($params);
} else { } else {
$return['chart'] = '<img src="data:image/png;base64,'.grafico_modulo_sparse($params).'" />'; $return['chart'] = \graphic_periodicity_module($params);
}
} else {
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; break;

View File

@ -697,6 +697,7 @@ function get_build_setup_charts($type, $options, $data)
if (isset($options['waterMark']) === true if (isset($options['waterMark']) === true
&& empty($options['waterMark']) === false && empty($options['waterMark']) === false
&& isset($options['waterMark']['url']) === true
) { ) {
// WaterMark. // WaterMark.
$chart->defaults()->getWaterMark()->setWidth(88); $chart->defaults()->getWaterMark()->setWidth(88);
@ -1283,12 +1284,12 @@ function get_build_setup_charts($type, $options, $data)
case 'BAR': case 'BAR':
if (isset($options['multiple']) === true && empty($options['multiple']) === false) { if (isset($options['multiple']) === true && empty($options['multiple']) === false) {
$i = 0; $i = 0;
foreach ($options['multiple'] as $key_label => $label) { foreach ($options['multiple'] as $key_label => $info) {
$dataSet = $chart->createDataSet(); $dataSet = $chart->createDataSet();
$dataSet->setLabel($label); $dataSet->setLabel(($info['label'] ?? '--'));
$dataSet->setBackgroundColor($colors[$i]); $dataSet->setBackgroundColor(($info['backgroundColor'] ?? $colors[$i]));
$dataSet->setBorderColor($borders[$i]); $dataSet->setBorderColor(($info['borderColor'] ?? $borders[$i]));
$dataSet->setBorderWidth(2); $dataSet->setBorderWidth(($info['borderWidth'] ?? 2));
$dataSet->data()->exchangeArray(array_values($data[$key_label])); $dataSet->data()->exchangeArray(array_values($data[$key_label]));
$chart->addDataSet($dataSet); $chart->addDataSet($dataSet);
$i++; $i++;
@ -1338,19 +1339,32 @@ function get_build_setup_charts($type, $options, $data)
break; break;
case 'LINE': case 'LINE':
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']); $chart->labels()->exchangeArray($options['labels']);
foreach ($data as $key => $dataset) { foreach ($data as $key => $dataset) {
$dataSet1 = $chart->createDataSet(); $dataSet = $chart->createDataSet();
$dataSet1->setLabel($dataset['label']); $dataSet->setLabel($dataset['label']);
$dataSet1->setBackgroundColor($dataset['backgroundColor']); $dataSet->setBackgroundColor($dataset['backgroundColor']);
$dataSet1->setBorderColor($dataset['borderColor']); $dataSet->setBorderColor($dataset['borderColor']);
$dataSet1->setPointBackgroundColor($dataset['pointBackgroundColor']); $dataSet->setPointBackgroundColor($dataset['pointBackgroundColor']);
$dataSet1->setPointBorderColor($dataset['pointBorderColor']); $dataSet->setPointBorderColor($dataset['pointBorderColor']);
$dataSet1->setPointHoverBackgroundColor($dataset['pointHoverBackgroundColor']); $dataSet->setPointHoverBackgroundColor($dataset['pointHoverBackgroundColor']);
$dataSet1->setPointHoverBorderColor($dataset['pointHoverBorderColor']); $dataSet->setPointHoverBorderColor($dataset['pointHoverBorderColor']);
$dataSet1->data()->exchangeArray($dataset['data']); $dataSet->data()->exchangeArray($dataset['data']);
$chart->addDataSet($dataSet1); $chart->addDataSet($dataSet);
}
} }
break; break;

View File

@ -277,7 +277,7 @@ function flot_area_graph(
'></div>"; '></div>";
$return .= "<div id='$graph_id' class='"; $return .= "<div id='$graph_id' class='";
if ($params['type'] == 'area_simple') { if (isset($params['type']) === true && $params['type'] == 'area_simple') {
$return .= 'noresizevc '; $return .= 'noresizevc ';
} }
@ -287,11 +287,13 @@ function flot_area_graph(
$width = 'width: '.$params['width'].';'; $width = 'width: '.$params['width'].';';
} }
if (isset($params['graph_width']) === true) {
if (strpos($params['graph_width'], '%') === false) { if (strpos($params['graph_width'], '%') === false) {
$width = 'width: '.$params['graph_width'].'px;'; $width = 'width: '.$params['graph_width'].'px;';
} else { } else {
$width = 'width: '.$params['graph_width'].';'; $width = 'width: '.$params['graph_width'].';';
} }
}
$return .= 'graph'.$params['adapt_key']."' $return .= 'graph'.$params['adapt_key']."'
style='".$width.'; style='".$width.';
@ -346,10 +348,6 @@ function flot_area_graph(
$array_events_alerts = json_encode($array_events_alerts); $array_events_alerts = json_encode($array_events_alerts);
// Javascript code. // Javascript code.
if ($font_size == '') {
$font_size = '\'\'';
}
$return .= "<script type='text/javascript'>"; $return .= "<script type='text/javascript'>";
$return .= "pandoraFlotArea(\n"; $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) { function christmas_click(flagEasternEgg) {
let counter = $("#count_click").val(); let counter = $("#count_click").val();
counter++; 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 // eslint-disable-next-line no-unused-vars
function show_option_dialog(settings) { function show_option_dialog(settings) {
load_modal({ load_modal({
@ -1034,6 +1034,7 @@ function processTreeSearch(settings) {
}); });
} }
// eslint-disable-next-line no-unused-vars
function processServiceTree(settings) { function processServiceTree(settings) {
var treeController = TreeController.getController(); 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} * @return {void}
*/ */
@ -1637,6 +1670,7 @@ function type_change() {
} }
// Show/Hide period for projection on agent module graph. // Show/Hide period for projection on agent module graph.
// eslint-disable-next-line no-unused-vars
function show_projection_period() { function show_projection_period() {
if ($("#projection_switch").is(":checked")) { if ($("#projection_switch").is(":checked")) {
$("#div_projection_period").show(); $("#div_projection_period").show();

View File

@ -648,41 +648,15 @@ function createVisualConsole(
item.setMeta({ isUpdating: false }); item.setMeta({ isUpdating: false });
var itemRetrieved = item.props; var newItemData = JSON.parse(data);
if (itemRetrieved["type"] == 13 || itemRetrieved["type"] == 21) { newItemData["receivedAt"] = new Date();
var startIsLeft = var newItem = visualConsole.addElement(newItemData);
itemRetrieved["startPosition"]["x"] - newItem.setMeta({
itemRetrieved["endPosition"]["x"] <= editMode: true,
0; isSelected: true,
var startIsTop = isUpdating: false
itemRetrieved["startPosition"]["y"] - });
itemRetrieved["endPosition"]["y"] <= visualConsole.buildRelations();
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 });
visualConsole.selectItem(newItem.props.id); visualConsole.selectItem(newItem.props.id);
done(); done();
@ -1232,7 +1206,7 @@ function cleanupDOM() {
$("#modalVCItemForm").empty(); $("#modalVCItemForm").empty();
} }
/* Defined in operations/visual_console/view.php */ /* Defined in operations/visual_console/view.php */
/* global $, load_modal, tinyMCE */ /* global $, load_modal, UndefineTinyMCE */
function createOrUpdateVisualConsoleItem( function createOrUpdateVisualConsoleItem(
visualConsole, visualConsole,
asyncTaskManager, asyncTaskManager,
@ -1415,12 +1389,23 @@ function typeModuleGraph(type) {
$("#MGshowLegend").show(); $("#MGshowLegend").show();
$("#MGcustomGraph").hide(); $("#MGcustomGraph").hide();
$("#customGraphId").val(0); $("#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") { } else if (type == "custom") {
$("#MGautoCompleteAgent").hide(); $("#MGautoCompleteAgent").hide();
$("#MGautoCompleteModule").hide(); $("#MGautoCompleteModule").hide();
$("#MGgraphType").hide(); $("#MGgraphType").hide();
$("#MGshowLegend").hide(); $("#MGshowLegend").hide();
$("#MGcustomGraph").show(); $("#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']; $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) { if (isset($decoder['projection_switch']) === true) {
$values['projection_switch'] = $decoder['projection_switch']; $values['projection_switch'] = $decoder['projection_switch'];
} }
@ -277,6 +281,42 @@ class SingleGraphWidget extends Widget
$values['period_projection'] = $decoder['period_projection']; $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; return $values;
} }
@ -290,6 +330,7 @@ class SingleGraphWidget extends Widget
*/ */
public function getFormInputs(): array public function getFormInputs(): array
{ {
global $config;
$values = $this->values; $values = $this->values;
// Retrieve global - common inputs. // Retrieve global - common inputs.
@ -308,8 +349,49 @@ class SingleGraphWidget extends Widget
$values['showLegend'] = 1; $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. // Autocomplete agents.
$inputs[] = [ $inputs['inputs']['row1'][] = [
'label' => __('Agent'), 'label' => __('Agent'),
'arguments' => [ 'arguments' => [
'type' => 'autocomplete_agent', 'type' => 'autocomplete_agent',
@ -327,7 +409,7 @@ class SingleGraphWidget extends Widget
]; ];
// Autocomplete module. // 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), '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' => [ 'arguments' => [
'type' => 'autocomplete_module', 'type' => 'autocomplete_module',
@ -340,11 +422,12 @@ class SingleGraphWidget extends Widget
'style' => 'width: inherit;', 'style' => 'width: inherit;',
'nothing' => __('None'), 'nothing' => __('None'),
'nothing_value' => 0, 'nothing_value' => 0,
'required' => 1,
], ],
]; ];
// Show legend. // Show legend.
$inputs[] = [ $inputs['inputs']['row1'][] = [
'label' => __('Show legend'), 'label' => __('Show legend'),
'arguments' => [ 'arguments' => [
'name' => 'showLegend', 'name' => 'showLegend',
@ -355,7 +438,7 @@ class SingleGraphWidget extends Widget
]; ];
// Period. // Period.
$inputs[] = [ $inputs['inputs']['row1'][] = [
'label' => __('Interval'), 'label' => __('Interval'),
'arguments' => [ 'arguments' => [
'name' => 'period', '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. // Projection.
$inputs[] = [ $inputs['inputs']['row2'][] = [
'label' => __('Projection Graph'), 'label' => __('Projection Graph'),
'id' => 'div_projection_switch',
'style' => ($values['periodicity_chart'] === true) ? 'display:none' : '',
'arguments' => [ 'arguments' => [
'name' => 'projection_switch', 'name' => 'projection_switch',
'id' => 'projection_switch', 'id' => 'projection_switch',
@ -383,7 +522,7 @@ class SingleGraphWidget extends Widget
// Period Projection. // Period Projection.
$display_projection = ($values['projection_switch'] === true) ? '' : 'display:none'; $display_projection = ($values['projection_switch'] === true) ? '' : 'display:none';
$inputs[] = [ $inputs['inputs']['row2'][] = [
'label' => __('Period Projection'), 'label' => __('Period Projection'),
'id' => 'div_projection_period', 'id' => 'div_projection_period',
'style' => $display_projection, '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; return $inputs;
} }
@ -407,6 +630,7 @@ class SingleGraphWidget extends Widget
*/ */
public function getPost():array public function getPost():array
{ {
global $config;
// Retrieve global - common inputs. // Retrieve global - common inputs.
$values = parent::getPost(); $values = parent::getPost();
@ -414,9 +638,21 @@ class SingleGraphWidget extends Widget
$values['metaconsoleId'] = \get_parameter('metaconsoleId', 0); $values['metaconsoleId'] = \get_parameter('metaconsoleId', 0);
$values['moduleId'] = \get_parameter('moduleId', 0); $values['moduleId'] = \get_parameter('moduleId', 0);
$values['period'] = \get_parameter('period', 0); $values['period'] = \get_parameter('period', 0);
$values['type_graph'] = \get_parameter('type_graph', CUSTOM_GRAPH_AREA);
$values['showLegend'] = \get_parameter_switch('showLegend'); $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['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; return $values;
} }
@ -447,7 +683,7 @@ class SingleGraphWidget extends Widget
$trickHight = 0; $trickHight = 0;
if ($this->values['showLegend'] === 1) { if ($this->values['showLegend'] === 1) {
// Needed for legend. // Needed for legend.
$trickHight = 60; $trickHight = 30;
} }
$output = '<div class="container-center widget-mrgn-0px">'; $output = '<div class="container-center widget-mrgn-0px">';
@ -479,6 +715,22 @@ class SingleGraphWidget extends Widget
); );
$output .= $return['chart']; $output .= $return['chart'];
} else { } 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 = [ $params = [
'agent_module_id' => $this->values['moduleId'], 'agent_module_id' => $this->values['moduleId'],
'width' => '100%', 'width' => '100%',
@ -492,8 +744,40 @@ class SingleGraphWidget extends Widget
'show_title' => $module_name, 'show_title' => $module_name,
'menu' => false, 'menu' => false,
'dashboard' => true, '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,
],
],
]; ];
if ((bool) $this->values['periodicity_chart'] === false) {
$output .= \grafico_modulo_sparse($params); $output .= \grafico_modulo_sparse($params);
} else {
$params['width'] = null;
$params['height'] = (int) $size['height'];
$output .= \graphic_periodicity_module($params);
}
} }
$output .= '</div>'; $output .= '</div>';
@ -531,7 +815,7 @@ class SingleGraphWidget extends Widget
public function getSizeModalConfiguration(): array public function getSizeModalConfiguration(): array
{ {
$size = [ $size = [
'width' => 450, 'width' => 800,
'height' => 430, 'height' => 430,
]; ];

View File

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

View File

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

View File

@ -60,9 +60,8 @@ final class ModuleGraph extends Item
protected static function encode(array $data): array protected static function encode(array $data): array
{ {
$return = parent::encode($data); $return = parent::encode($data);
$id_custom_graph = static::extractIdCustomGraph($data); $id_custom_graph = static::extractIdCustomGraph($data);
if (!empty($id_custom_graph)) { if (empty($id_custom_graph) === false) {
if (\is_metaconsole()) { if (\is_metaconsole()) {
$explode_custom_graph = explode('|', $id_custom_graph); $explode_custom_graph = explode('|', $id_custom_graph);
$return['id_custom_graph'] = $explode_custom_graph[0]; $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['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; return $return;
} }
@ -149,6 +160,15 @@ final class ModuleGraph extends Item
$return['period'] = static::extractPeriod($data); $return['period'] = static::extractPeriod($data);
$return['showLegend'] = static::extractShowLegend($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); $customGraphId = static::extractCustomGraphId($data);
if (empty($customGraphId) === false) { 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. * 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. * Extract a custom graph Id value.
* *
@ -289,6 +445,15 @@ final class ModuleGraph extends Item
$period = static::extractPeriod($data); $period = static::extractPeriod($data);
$showLegend = static::extractShowLegend($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); $customGraphId = static::extractCustomGraphId($data);
$graphType = static::extractGraphType($data); $graphType = static::extractGraphType($data);
$linkedModule = static::extractLinkedModule($data); $linkedModule = static::extractLinkedModule($data);
@ -425,7 +590,23 @@ final class ModuleGraph extends Item
'server_id' => $metaconsoleId, 'server_id' => $metaconsoleId,
]; ];
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); $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; $data['html'] = $chart;
@ -505,6 +686,26 @@ final class ModuleGraph extends Item
$values['showLegend'] = true; $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. // Background color.
$fields = [ $fields = [
'white' => __('White'), 'white' => __('White'),
@ -608,9 +809,13 @@ final class ModuleGraph extends Item
// Custom graph. // Custom graph.
$fields = self::getListCustomGraph(); $fields = self::getListCustomGraph();
$selected_custom_graph = 0;
if (isset($values['customGraphId']) === true) {
$selected_custom_graph = (\is_metaconsole() === true) $selected_custom_graph = (\is_metaconsole() === true)
? $values['customGraphId'].'|'.$values['metaconsoleId'] ? $values['customGraphId'].'|'.$values['metaconsoleId']
: $values['customGraphId']; : $values['customGraphId'];
}
$inputs[] = [ $inputs[] = [
'id' => 'MGcustomGraph', 'id' => 'MGcustomGraph',
'hidden' => $hiddenCustom, '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. // Show legend.
$inputs[] = [ $inputs[] = [
'id' => 'MGshowLegend', '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. // Inputs LinkedVisualConsole.
$inputsLinkedVisualConsole = self::inputsLinkedVisualConsole( $inputsLinkedVisualConsole = self::inputsLinkedVisualConsole(
$values $values

View File

@ -341,6 +341,13 @@ class View extends \HTML
$data['graphType'] = \get_parameter('graphType'); $data['graphType'] = \get_parameter('graphType');
$data['showLegend'] = \get_parameter_switch('showLegend'); $data['showLegend'] = \get_parameter_switch('showLegend');
$data['period'] = \get_parameter('period'); $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; break;
case SIMPLE_VALUE: case SIMPLE_VALUE:

View File

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

View File

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

View File

@ -746,6 +746,7 @@ p {
strong { strong {
font-size: inherit; font-size: inherit;
} }
/* Styles for the solid icons */ /* Styles for the solid icons */
.fa { .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 <?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');
$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
);
}
$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) { if (isset($_GET['type']) === true) {
$type = get_parameter_get('type'); $type = get_parameter_get('type');
html_print_input_hidden('type', $type); }
} }
ui_toggle( $form_data = [
$form_table, 'id' => $id,
'<span class="subsection_header_title">'.__('Graph configuration menu').'</span>'.ui_print_help_tip( 'refresh' => $refresh,
__('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.'), 'draw_events' => $draw_events,
true 'draw_alerts' => $draw_alerts,
) 'start_date' => $start_date,
); 'start_time' => $start_time,
echo '</form>'; 'unknown_graph' => $unknown_graph,
'period' => $period,
// Hidden div to forced title. 'zoom' => $zoom,
html_print_div( 'show_percentil' => $show_percentil,
[ 'time_compare_overlapped' => $time_compare_overlapped,
'id' => 'forced_title_layer', 'time_compare_separated' => $time_compare_separated,
'class' => 'forced_title_layer', 'type_mode_graph' => $type_mode_graph,
'hidden' => true, '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 = [ $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,
]; ];
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. // Graph.
$output = '<div class="white_box margin-lr-10" id="stat-win-module-graph">'; $output .= draw_container_chart_stat_win();
$output .= '<div id="stat-win-spinner" class="stat-win-spinner">'; }
$output .= html_print_image('images/spinner_charts.gif', true);
$output .= '</div>';
$output .= '</div>';
echo $output; echo $output;
if (is_metaconsole() === true && empty($server_id) === false) { if (is_metaconsole() === true && empty($server_id) === false) {
@ -595,11 +401,79 @@ ui_include_time_picker(true);
<script> <script>
$(document).ready (function () { $(document).ready (function () {
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; ?>";
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;
}
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,
dataType: "html",
data: {
page: "include/ajax/module",
get_graph_module: true,
graph_data: graph_data,
form_data: form_data,
server_id: serverId,
active: active
},
success: function (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) { $('#checkbox-time_compare_separated').click(function(e) {
if(e.target.checked === true) { if(e.target.checked === true) {
$('#checkbox-time_compare_overlapped').prop('checked', false); $('#checkbox-time_compare_overlapped').prop('checked', false);
} }
}); });
$('#checkbox-time_compare_overlapped').click(function(e) { $('#checkbox-time_compare_overlapped').click(function(e) {
if(e.target.checked === true) { if(e.target.checked === true) {
$('#checkbox-time_compare_separated').prop('checked', false); $('#checkbox-time_compare_separated').prop('checked', false);
@ -657,28 +531,6 @@ ui_include_time_picker(true);
arrow.attr('src',arrow.attr('src').replace(arrow_up, arrow_down)); arrow.attr('src',arrow.attr('src').replace(arrow_up, arrow_down));
} }
}); });
var graph_data = "<?php echo base64_encode(json_encode($params)); ?>";
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);
});
function get_ajax_module(url, graph_data, serverId) {
$.ajax({
type: "POST",
url: url,
dataType: "html",
data: {
page: "include/ajax/module",
get_graph_module: true,
graph_data: graph_data,
server_id: serverId
},
success: function (data) {
$("#stat-win-spinner").hide();
$("#stat-win-module-graph").append(data);
}, },
error: function (error) { error: function (error) {
console.error(error); console.error(error);

View File

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

View File

@ -1149,11 +1149,6 @@ if ($edit_capable === true) {
visualConsoleManager.copyItem(item); visualConsoleManager.copyItem(item);
} }
}); });
setTimeout(
function()
{
visualConsoleManager.forceUpdateVisualConsole();
}, 500);
}); });
$('.link-create-item').click(function (event){ $('.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', `timezone` VARCHAR(60) NOT NULL DEFAULT 'Europe/Madrid',
`show_last_value` TINYINT UNSIGNED NULL DEFAULT 0, `show_last_value` TINYINT UNSIGNED NULL DEFAULT 0,
`cache_expiration` INT UNSIGNED NOT NULL DEFAULT 0, `cache_expiration` INT UNSIGNED NOT NULL DEFAULT 0,
`title` TEXT , `title` TEXT,
`period_chart_options` TEXT,
PRIMARY KEY(`id`), PRIMARY KEY(`id`),
INDEX `tlayout_data_layout` (`id_layout`) INDEX `tlayout_data_layout` (`id_layout`)
) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4; ) 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', `timezone` VARCHAR(60) NOT NULL DEFAULT 'Europe/Madrid',
`show_last_value` TINYINT UNSIGNED NULL DEFAULT 0, `show_last_value` TINYINT UNSIGNED NULL DEFAULT 0,
`cache_expiration` INT UNSIGNED NOT NULL DEFAULT 0, `cache_expiration` INT UNSIGNED NOT NULL DEFAULT 0,
`title` TEXT,
`period_chart_options` TEXT,
PRIMARY KEY(`id`), PRIMARY KEY(`id`),
FOREIGN KEY (`id_layout_template`) REFERENCES tlayout_template(`id`) ON DELETE CASCADE ON UPDATE CASCADE FOREIGN KEY (`id_layout_template`) REFERENCES tlayout_template(`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4; ) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;

View File

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