diff --git a/pandora_console/include/styles/graph_analytics.css b/pandora_console/include/styles/graph_analytics.css index c73b875b2a..13dd23fe69 100644 --- a/pandora_console/include/styles/graph_analytics.css +++ b/pandora_console/include/styles/graph_analytics.css @@ -14,6 +14,23 @@ border: 1px solid #e5e9ed; } */ +div#main { + margin-bottom: 0; +} + +div.box-flat.white_table_graph > div[id^="tgl_div_"] { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +} + +div.box-flat.white_table_graph > div[id^="tgl_div_"] > div.white-box-content { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: flex-start; + justify-content: flex-start; +} + div#menu_tab ul li, div#menu_tab ul li span { display: flex; @@ -37,6 +54,7 @@ div.main-div { display: flex; flex-direction: row; flex-wrap: nowrap; + min-height: calc(100vh - 160px); } div.padding-div { @@ -44,13 +62,20 @@ div.padding-div { padding: 10px; } +div.margin-div { + margin: 10px; + padding: 0; +} + div.filters-div-main { + padding: 0; + margin: 0; min-width: 400px; border-right: 1px solid var(--border-dark-color); } div.filters-div-main.filters-div-main-collapsed { - width: 20px; + width: 35px; min-width: 20px; } @@ -64,6 +89,7 @@ div.filters-div-main > .filters-div-header { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; + margin: 10px; } div.filters-div-main > .filters-div-header > img { @@ -71,10 +97,39 @@ div.filters-div-main > .filters-div-header > img { cursor: pointer; } -div.filters-div { +div.filters-div-submain { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; +} + +div.filter-div { display: flex; flex-direction: column; flex-wrap: nowrap; + width: 50%; + height: 100%; + padding: 10px; + border-top: 1px solid var(--border-dark-color); +} + +.filters-left-div { + border-right: 1px solid var(--border-dark-color); +} + +.filters-right-div { +} + +.search-graph-analytics { + background-image: url(../../images/details.svg); + background-position: center right 10px; + background-repeat: no-repeat; + background-size: 17px; + width: 100%; + margin: 10px 0; + padding-right: 30px; } div.graphs-div-main { diff --git a/pandora_console/operation/reporting/graph_analytics.php b/pandora_console/operation/reporting/graph_analytics.php index 8f90479ee0..013f496fa3 100644 --- a/pandora_console/operation/reporting/graph_analytics.php +++ b/pandora_console/operation/reporting/graph_analytics.php @@ -35,7 +35,87 @@ ui_require_css_file('graph_analytics'); require_once 'include/functions_custom_graphs.php'; // Get parameters. -$x = (bool) get_parameter('x'); +$x = get_parameter('x'); + +// Ajax. +if (is_ajax()) { + $search_left = get_parameter('search_left'); + + if (empty($search_left) === false) { + $output = []; + $search = io_safe_input($search_left); + + // Agents. + // Concatenate AW and AD permisions to get all the possible groups where the user can manage. + $user_groupsAW = users_get_groups($config['id_user'], 'AW'); + $user_groupsAD = users_get_groups($config['id_user'], 'AD'); + + $user_groups = ($user_groupsAW + $user_groupsAD); + $user_groups_to_sql = implode(',', array_keys($user_groups)); + + $search_sql = ' AND (nombre LIKE "%%'.$search.'%%" OR alias LIKE "%%'.$search.'%%")'; + + $sql = sprintf( + 'SELECT * + FROM tagente + LEFT JOIN tagent_secondary_group tasg + ON tagente.id_agente = tasg.id_agent + WHERE (tagente.id_grupo IN (%s) OR tasg.id_group IN (%s)) + %s + GROUP BY tagente.id_agente + ORDER BY tagente.nombre', + $user_groups_to_sql, + $user_groups_to_sql, + $search_sql + ); + + $output['agents'] = db_get_all_rows_sql($sql); + + // Groups. + $search_sql = ' AND (nombre LIKE "%%'.$search.'%%" OR description LIKE "%%'.$search.'%%")'; + + $sql = sprintf( + 'SELECT id_grupo, nombre, icon, description + FROM tgrupo + WHERE (id_grupo IN (%s)) + %s + ORDER BY nombre', + $user_groups_to_sql, + $search_sql + ); + + $output['groups'] = db_get_all_rows_sql($sql); + + // Modules. + $result_agents = []; + $sql_result = db_get_all_rows_sql('SELECT id_agente FROM tagente WHERE id_grupo IN ('.$user_groups_to_sql.')'); + + foreach ($sql_result as $result) { + array_push($result_agents, $result['id_agente']); + } + + $id_agents = implode(',', $result_agents); + $search_sql = ' AND (nombre LIKE "%%'.$search.'%%" OR descripcion LIKE "%%'.$search.'%%")'; + + $sql = sprintf( + 'SELECT id_agente_modulo, nombre, descripcion + FROM tagente_modulo + WHERE (id_agente IN (%s)) + %s + ORDER BY nombre', + $id_agents, + $search_sql + ); + + $output['modules'] = db_get_all_rows_sql($sql); + + // Return. + echo json_encode($output); + return; + } + + return; +} // Header & Actions. $title_tab = __('Start realtime'); @@ -144,15 +224,26 @@ ui_print_standard_header( $left_content = ''; $right_content = ''; +// $left_content .= ''; $left_content .= '
-
-
-
-
+
+
+ +
+
+
+
+ '.ui_toggle('code', __('Agents'), 'agents-toggle', 'agents-toggle', true, true).' + '.ui_toggle('code', __('Groups'), 'groups-toggle', 'groups-toggle', true, true).' + '.ui_toggle('code', __('Modules'), 'modules-toggle', 'modules-toggle', true, true).' +
+
+ +
'; @@ -187,7 +278,7 @@ $right_content .= ' //
$filters_div = html_print_div( [ - 'class' => 'padding-div filters-div-main', + 'class' => 'filters-div-main', 'content' => $left_content, ], true @@ -228,7 +319,56 @@ $('div.filters-div-main > .filters-div-header > img').click(function (e) { } }); +// Search left. +$('#search-left').keyup(function (e) { + $.ajax({ + method: "POST", + url: 'ajax.php', + dataType: "json", + data: { + page: 'operation/reporting/graph_analytics', + search_left: e.target.value, + }, + success: function(data) { + if(data.agents || data.groups || data.modules){ + console.log(data); + var agentsToggle = $('#agents-toggle > div[id^=tgl_div_] > div.white-box-content'); + var groupsToggle = $('#groups-toggle > div[id^=tgl_div_] > div.white-box-content'); + var modulesToggle = $('#modules-toggle > div[id^=tgl_div_] > div.white-box-content'); + agentsToggle.empty(); + groupsToggle.empty(); + modulesToggle.empty(); + + data.agents.forEach(agent => { + agentsToggle.append(`
${agent.alias}
`); + }); + + data.groups.forEach(group => { + groupsToggle.append(`
${group.nombre}
`); + }); + + data.modules.forEach(module => { + modulesToggle.append(`
${module.nombre}
`); + }); + + // todo: position: static; div#tgl_div_... + $('.draggable').draggable({ + revert: "invalid", + stack: ".draggable", + helper: "clone", + }); + } else { + console.error('NO DATA FOUND'); + } + }, + error: function(data) { + // console.error("Fatal error in AJAX call", data); + } + }); +}); + $(document).ready(function(){ + // Draggable & Droppable graphs. $('.draggable').draggable({ revert: "invalid", @@ -236,6 +376,7 @@ $(document).ready(function(){ helper: "clone", }); + // Droppable options. var droppableOptions = { accept: ".draggable", hoverClass: "drops-hover", @@ -255,11 +396,10 @@ $(document).ready(function(){ // Ajax. // $.ajax({ // method: "POST", - // url: '', + // url: 'ajax.php', // data: { // page: '', - // method: "updatePriorityNodes", - // order: data + // method: "", // }, // dataType: "json", // success: function(data) { @@ -282,6 +422,7 @@ $(document).ready(function(){ // } // }); + // Create elements. createDroppableZones(droppableOptions, modulesByGraphs); }, };