mirror of
https://github.com/pandorafms/pandorafms.git
synced 2025-07-29 08:45:12 +02:00
11423-Graph analytics (WIP)
This commit is contained in:
Pablo Aragon
parent
b45df5082a
commit
28b8eeca61
81
pandora_console/include/styles/graph_analytics.css
Normal file
81
pandora_console/include/styles/graph_analytics.css
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
/* .options-graph-analytics {
|
||||||
|
position: sticky;
|
||||||
|
top: 110px;
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
width: -moz-available;
|
||||||
|
height: 18px;
|
||||||
|
margin: -25px -25px 25px -25px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
z-index: 1;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
min-width: fit-content;
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
border: 1px solid #e5e9ed;
|
||||||
|
} */
|
||||||
|
|
||||||
|
div#menu_tab ul li,
|
||||||
|
div#menu_tab ul li span {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu_tab ul.mn li.nomn.tab_operation img {
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu_tab ul li:hover,
|
||||||
|
div#menu_tab ul li span:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.main-div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.padding-div {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.filters-div {
|
||||||
|
min-width: 400px;
|
||||||
|
border-right: 1px solid var(--border-dark-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.graphs-div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-graph {
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sortable-graphs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sortable-graphs .drop-zone-sortable {
|
||||||
|
background-color: (--primary-color);
|
||||||
|
width: 100%;
|
||||||
|
height: 20px;
|
||||||
|
border: 2px dashed var(--border-dark-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.interval-div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
@ -32,6 +32,7 @@
|
|||||||
--secondary-color: #ffffff;
|
--secondary-color: #ffffff;
|
||||||
--input-border: #c0ccdc;
|
--input-border: #c0ccdc;
|
||||||
--border-color: #eee;
|
--border-color: #eee;
|
||||||
|
--border-dark-color: #e1e1e1;
|
||||||
--text-color: #333;
|
--text-color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -471,6 +471,12 @@ if ($access_console_node === true) {
|
|||||||
'godmode/reporting/graph_builder',
|
'godmode/reporting/graph_builder',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
// Graph analytics.
|
||||||
|
$sub['operation/reporting/graph_analytics']['text'] = __('Graph analytics');
|
||||||
|
$sub['operation/reporting/graph_analytics']['id'] = 'Graph_analytics';
|
||||||
|
|
||||||
|
|
||||||
if (check_acl($config['id_user'], 0, 'RR')
|
if (check_acl($config['id_user'], 0, 'RR')
|
||||||
|| check_acl($config['id_user'], 0, 'RW')
|
|| check_acl($config['id_user'], 0, 'RW')
|
||||||
|| check_acl($config['id_user'], 0, 'RM')
|
|| check_acl($config['id_user'], 0, 'RM')
|
||||||
|
|||||||
299
pandora_console/operation/reporting/graph_analytics.php
Normal file
299
pandora_console/operation/reporting/graph_analytics.php
Normal file
@ -0,0 +1,299 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Graph viewer.
|
||||||
|
*
|
||||||
|
* @category Reporting - Graph analytics
|
||||||
|
* @package Pandora FMS
|
||||||
|
* @subpackage Community
|
||||||
|
* @version 1.0.0
|
||||||
|
* @license See below
|
||||||
|
*
|
||||||
|
* ______ ___ _______ _______ ________
|
||||||
|
* | __ \.-----.--.--.--| |.-----.----.-----. | ___| | | __|
|
||||||
|
* | __/| _ | | _ || _ | _| _ | | ___| |__ |
|
||||||
|
* |___| |___._|__|__|_____||_____|__| |___._| |___| |__|_|__|_______|
|
||||||
|
*
|
||||||
|
* ============================================================================
|
||||||
|
* Copyright (c) 2005-2023 Pandora FMS
|
||||||
|
* Please see https://pandorafms.com/community/ for full contribution list
|
||||||
|
* This program is free software; you can redistribute it and/or
|
||||||
|
* modify it under the terms of the GNU General Public License
|
||||||
|
* as published by the Free Software Foundation for version 2.
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
* ============================================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Begin.
|
||||||
|
global $config;
|
||||||
|
check_login();
|
||||||
|
|
||||||
|
// Requires.
|
||||||
|
ui_require_css_file('graph_analytics');
|
||||||
|
require_once 'include/functions_custom_graphs.php';
|
||||||
|
|
||||||
|
// Get parameters.
|
||||||
|
$x = (bool) get_parameter('x');
|
||||||
|
|
||||||
|
// Header & Actions.
|
||||||
|
$title_tab = __('Start realtime');
|
||||||
|
$tab_start_realtime = [
|
||||||
|
'text' => '<span>'.html_print_image(
|
||||||
|
'images/change-active.svg',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => $title_tab,
|
||||||
|
'class' => 'invert_filter main_menu_icon',
|
||||||
|
]
|
||||||
|
).$title_tab.'</span>',
|
||||||
|
];
|
||||||
|
|
||||||
|
$title_tab = __('New');
|
||||||
|
$tab_new = [
|
||||||
|
'text' => '<span>'.html_print_image(
|
||||||
|
'images/plus-black.svg',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => $title_tab,
|
||||||
|
'class' => 'invert_filter main_menu_icon',
|
||||||
|
]
|
||||||
|
).$title_tab.'</span>',
|
||||||
|
];
|
||||||
|
|
||||||
|
$title_tab = __('Save');
|
||||||
|
$tab_save = [
|
||||||
|
'text' => '<span>'.html_print_image(
|
||||||
|
'images/save_mc.png',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => $title_tab,
|
||||||
|
'class' => 'invert_filter main_menu_icon',
|
||||||
|
]
|
||||||
|
).$title_tab.'</span>',
|
||||||
|
];
|
||||||
|
|
||||||
|
$title_tab = __('Load');
|
||||||
|
$tab_load = [
|
||||||
|
'text' => '<span>'.html_print_image(
|
||||||
|
'images/logs@svg.svg',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => $title_tab,
|
||||||
|
'class' => 'invert_filter main_menu_icon',
|
||||||
|
]
|
||||||
|
).$title_tab.'</span>',
|
||||||
|
];
|
||||||
|
|
||||||
|
$title_tab = __('Share');
|
||||||
|
$tab_share = [
|
||||||
|
'text' => '<span>'.html_print_image(
|
||||||
|
'images/responses.svg',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => $title_tab,
|
||||||
|
'class' => 'invert_filter main_menu_icon',
|
||||||
|
]
|
||||||
|
).$title_tab.'</span>',
|
||||||
|
];
|
||||||
|
|
||||||
|
$title_tab = __('Export to custom graph');
|
||||||
|
$tab_export = [
|
||||||
|
'text' => '<span>'.html_print_image(
|
||||||
|
'images/module-graph.svg',
|
||||||
|
true,
|
||||||
|
[
|
||||||
|
'title' => $title_tab,
|
||||||
|
'class' => 'invert_filter main_menu_icon',
|
||||||
|
]
|
||||||
|
).$title_tab.'</span>',
|
||||||
|
];
|
||||||
|
|
||||||
|
ui_print_standard_header(
|
||||||
|
__('Graph analytics'),
|
||||||
|
'images/menu/reporting.svg',
|
||||||
|
false,
|
||||||
|
'',
|
||||||
|
false,
|
||||||
|
[
|
||||||
|
$tab_export,
|
||||||
|
$tab_share,
|
||||||
|
$tab_load,
|
||||||
|
$tab_save,
|
||||||
|
$tab_new,
|
||||||
|
$tab_start_realtime,
|
||||||
|
],
|
||||||
|
[
|
||||||
|
[
|
||||||
|
'link' => '',
|
||||||
|
'label' => __('Reporting'),
|
||||||
|
],
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Header options.
|
||||||
|
// $options_content = 'Sample text';
|
||||||
|
// html_print_div(
|
||||||
|
// [
|
||||||
|
// 'class' => 'options-graph-analytics',
|
||||||
|
// 'content' => $options_content,
|
||||||
|
// ]
|
||||||
|
// );
|
||||||
|
// Content.
|
||||||
|
$left_content = '';
|
||||||
|
$right_content = '';
|
||||||
|
|
||||||
|
$left_content .= '
|
||||||
|
<div class="sortable-graphs-connected">
|
||||||
|
<div data-id-module="6">
|
||||||
|
<span class="handle-graph">6 </span>
|
||||||
|
<img width="25" src="images/application_double.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sortable-graphs-connected">
|
||||||
|
<div data-id-module="7">
|
||||||
|
<span class="handle-graph">7 </span>
|
||||||
|
<img width="25" src="images/building.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
$intervals = [];
|
||||||
|
$intervals[SECONDS_1HOUR] = human_time_description_raw(SECONDS_1HOUR, true, 'large');
|
||||||
|
$intervals[SECONDS_6HOURS] = human_time_description_raw(SECONDS_6HOURS, true, 'large');
|
||||||
|
$intervals[SECONDS_12HOURS] = human_time_description_raw(SECONDS_12HOURS, true, 'large');
|
||||||
|
$intervals[SECONDS_1DAY] = human_time_description_raw(SECONDS_1DAY, true, 'large');
|
||||||
|
$intervals[SECONDS_2DAY] = human_time_description_raw(SECONDS_2DAY, true, 'large');
|
||||||
|
$intervals[SECONDS_1WEEK] = human_time_description_raw(SECONDS_1WEEK, true, 'large');
|
||||||
|
|
||||||
|
$right_content .= '<div class="interval-div">'.html_print_select(
|
||||||
|
$intervals,
|
||||||
|
'interval',
|
||||||
|
SECONDS_12HOURS,
|
||||||
|
'',
|
||||||
|
'',
|
||||||
|
0,
|
||||||
|
true,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
''
|
||||||
|
).'</div>';
|
||||||
|
|
||||||
|
$right_content .= '
|
||||||
|
<div id="sortable-graphs" class="sortable-graphs-connected">
|
||||||
|
<div data-id-module="1">
|
||||||
|
<span class="handle-graph">1 </span>
|
||||||
|
<img width="25" src="images/add.png">
|
||||||
|
</div>
|
||||||
|
<div data-id-module="2">
|
||||||
|
<span class="handle-graph">2 </span>
|
||||||
|
<img width="25" src="images/advanced.png">
|
||||||
|
</div>
|
||||||
|
<div data-id-module="3">
|
||||||
|
<span class="handle-graph">3 </span>
|
||||||
|
<img width="25" src="images/agent_notinit.png">
|
||||||
|
</div>
|
||||||
|
<div data-id-module="4">
|
||||||
|
<span class="handle-graph">4 </span>
|
||||||
|
<img width="25" src="images/alerts_command.png">
|
||||||
|
</div>
|
||||||
|
<div data-id-module="5">
|
||||||
|
<span class="handle-graph">5 </span>
|
||||||
|
<img width="25" src="images/alarm-off.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
';
|
||||||
|
|
||||||
|
$filters_div = html_print_div(
|
||||||
|
[
|
||||||
|
'class' => 'padding-div filters-div',
|
||||||
|
'content' => $left_content,
|
||||||
|
],
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
$graphs_div = html_print_div(
|
||||||
|
[
|
||||||
|
'class' => 'padding-div graphs-div',
|
||||||
|
'content' => $right_content,
|
||||||
|
],
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
html_print_div(
|
||||||
|
[
|
||||||
|
'class' => 'white_box main-div',
|
||||||
|
'content' => $filters_div.$graphs_div,
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
$(".sortable-graphs-connected").sortable({
|
||||||
|
handle: '.handle-graph',
|
||||||
|
placeholder: 'drop-zone-sortable',
|
||||||
|
connectWith: ['.sortable-graphs-connected'],
|
||||||
|
containment: '#sortable-graphs',
|
||||||
|
opacity: 0.7,
|
||||||
|
cursor: 'move',
|
||||||
|
scrollSpeed: 10,
|
||||||
|
revert: 300,
|
||||||
|
start: function(event, ui) {
|
||||||
|
// console.log('start');
|
||||||
|
const divs = $('#sortable-graphs div');
|
||||||
|
const sort = $(this).sortable('instance');
|
||||||
|
|
||||||
|
ui.placeholder.height(ui.helper.height());
|
||||||
|
|
||||||
|
divs.each(function(i, v) {
|
||||||
|
sort.containment[i +1] += ui.helper.height() * 1 - sort.offset.click.bottom;
|
||||||
|
});
|
||||||
|
|
||||||
|
sort.containment[1] -= sort.offset.click.bottom;
|
||||||
|
},
|
||||||
|
stop: function(e, ui) {
|
||||||
|
// console.log('stop');
|
||||||
|
let data = [];
|
||||||
|
$('#sortable-graphs div').each(function(i, v) {
|
||||||
|
data.push($(this).data('id-module'));
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
// $.ajax({
|
||||||
|
// method: "POST",
|
||||||
|
// url: '',
|
||||||
|
// data: {
|
||||||
|
// page: '',
|
||||||
|
// method: "updatePriorityNodes",
|
||||||
|
// order: data
|
||||||
|
// },
|
||||||
|
// dataType: "json",
|
||||||
|
// success: function(data) {
|
||||||
|
// if(data.result == 1){
|
||||||
|
// confirmDialog({
|
||||||
|
// title: "<?php echo __('Update priority nodes'); ?>",
|
||||||
|
// message: "<?php echo __('Successfully updated priority order nodes'); ?>",
|
||||||
|
// hideCancelButton: true
|
||||||
|
// });
|
||||||
|
// } else {
|
||||||
|
// confirmDialog({
|
||||||
|
// title: "<?php echo __('Update priority nodes'); ?>",
|
||||||
|
// message: "<?php echo __('Could not be updated priority order nodes'); ?>",
|
||||||
|
// hideCancelButton: true
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// error: function(data) {
|
||||||
|
// console.error("Fatal error in AJAX call", data);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user