11423-Graph analytics (WIP)
This commit is contained in:
Pablo Aragon
parent
b45df5082a
commit
28b8eeca61
|
|
@ -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;
|
||||
--input-border: #c0ccdc;
|
||||
--border-color: #eee;
|
||||
--border-dark-color: #e1e1e1;
|
||||
--text-color: #333;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -471,6 +471,12 @@ if ($access_console_node === true) {
|
|||
'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')
|
||||
|| check_acl($config['id_user'], 0, 'RW')
|
||||
|| check_acl($config['id_user'], 0, 'RM')
|
||||
|
|
|
|||
|
|
@ -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…
Reference in New Issue