diff --git a/pandora_console/include/javascript/general_tactical_view.js b/pandora_console/include/javascript/general_tactical_view.js index c3d48b133b..817315db50 100644 --- a/pandora_console/include/javascript/general_tactical_view.js +++ b/pandora_console/include/javascript/general_tactical_view.js @@ -64,7 +64,10 @@ $(document).ready(function() { }, type: "POST", success: function(data) { - $("#heatmap-group").html(data); + var title = $(data)[1]; + var heatmap = $(data)[0]; + $("#heatmap-group").html(heatmap); + $("#heatmap-title").html($(title).html()); } }); }); diff --git a/pandora_console/include/lib/TacticalView/elements/Database.php b/pandora_console/include/lib/TacticalView/elements/Database.php index 7d46d29cb1..ef5925162b 100644 --- a/pandora_console/include/lib/TacticalView/elements/Database.php +++ b/pandora_console/include/lib/TacticalView/elements/Database.php @@ -147,10 +147,11 @@ class Database extends Element */ public function getEvents():string { - // TODO connect to automonitorization. + $data = $this->valueMonitoring('last_events_24h'); + $value = round($data[0]['datos']); return html_print_div( [ - 'content' => '9.999.999', + 'content' => $value, 'class' => 'text-l', 'id' => 'total-events', 'style' => 'margin: 0px 10px 10px 10px;', diff --git a/pandora_console/include/lib/TacticalView/elements/Events.php b/pandora_console/include/lib/TacticalView/elements/Events.php index 2e20aaa4c0..b304e59300 100644 --- a/pandora_console/include/lib/TacticalView/elements/Events.php +++ b/pandora_console/include/lib/TacticalView/elements/Events.php @@ -103,6 +103,8 @@ class Events extends Element ]; } + $graph_values = array_slice($graph_values, -24); + $danger = $max_value; $ok = ($max_value / 3); diff --git a/pandora_console/include/lib/TacticalView/elements/Groups.php b/pandora_console/include/lib/TacticalView/elements/Groups.php index 016700ef92..82b0f358b1 100644 --- a/pandora_console/include/lib/TacticalView/elements/Groups.php +++ b/pandora_console/include/lib/TacticalView/elements/Groups.php @@ -81,11 +81,11 @@ class Groups extends Element $agents = agents_get_agents(); if (is_array($agents) === true && count($agents) >= 10) { $this->title = __('My monitored agents'); - return $this->getStatusHeatMapAgents(); + return $this->getStatusHeatMapAgents().''.$this->title.''; } $this->title = __('My monitored modules'); - return $this->getStatusHeatMapModules(); + return $this->getStatusHeatMapModules().''.$this->title.''; } diff --git a/pandora_console/include/lib/TacticalView/elements/Overview.php b/pandora_console/include/lib/TacticalView/elements/Overview.php index 706e6db321..01e4a67a49 100644 --- a/pandora_console/include/lib/TacticalView/elements/Overview.php +++ b/pandora_console/include/lib/TacticalView/elements/Overview.php @@ -153,27 +153,25 @@ class Overview extends Element */ public function getLicenseUsageGraph():string { - // TODO connect to automonitorization. - $options = [ - 'labels' => [ - 'Agents used', - 'Free agents', + // TODO: show real data. + $data = [ + 'free_agents' => [ + 'label' => __('Free agents'), + 'perc' => 40, + 'color' => '#5C63A2', ], - 'colors' => [ - '#1C4E6B', - '#5C63A2', + 'agents_used' => [ + 'label' => __('Agents used'), + 'perc' => 60, + 'color' => '#1C4E6B', ], - 'legend' => [ - 'position' => 'bottom', - 'align' => 'right', - ], - 'cutout' => 80, ]; - $pie = ring_graph([60, 40], $options); + + $bar = $this->printHorizontalBar($data); $output = html_print_div( [ - 'content' => $pie, - 'style' => 'margin: 0 auto; max-width: 320px', + 'content' => $bar, + 'style' => 'margin: 0 auto;', ], true ); @@ -183,11 +181,60 @@ class Overview extends Element /** - * Returns the html of a graph with the processed xmls + * Print horizontal bar divided by percentage. + * + * @param array $data Required [perc, color, label]. * * @return string */ - public function getXmlProcessedGraph():string + private function printHorizontalBar(array $data):string + { + $output = '
'; + $output .= '
'; + foreach ($data as $key => $value) { + $output .= html_print_div( + [ + 'content' => '
'.$value['label'], + 'class' => 'label', + ], + true + ); + } + + $output .= '
'; + $output .= '
'; + foreach ($data as $key => $value) { + $output .= html_print_div( + [ + 'content' => $value['perc'].' %', + 'style' => 'width: '.$value['perc'].'%; background-color: '.$value['color'].';', + ], + true + ); + } + + $output .= '
'; + $output .= ' +
+
0 %
+
20 %
+
40 %
+
60 %
+
80 %
+
100 %
+
'; + $output .= '
'; + + return $output; + } + + + /** + * Returns the html of a graph with the cpu load. + * + * @return string + */ + public function getCPULoadGraph():string { $sql = 'SELECT utimestamp, @@ -199,14 +246,13 @@ class Overview extends Element ORDER BY hour;'; $rows = db_process_sql($sql); - + $data_last24h = $this->valueMonitoring('CPU Load', (time() - 86400), time()); $dates = []; - $xml_proccessed = []; + $cpu_load = []; $total = 0; - foreach ($rows as $key => $raw_data) { - $dates[] = date('H:00:00', $raw_data['utimestamp']); - $total += $raw_data['xml_proccessed']; - $xml_proccessed[] = $raw_data['xml_proccessed']; + foreach ($data_last24h as $key => $raw_data) { + $dates[] = date('H:m:s', $raw_data['utimestamp']); + $cpu_load[] = $raw_data['datos']; } $options = [ @@ -215,8 +261,9 @@ class Overview extends Element 'tooltips' => [ 'display' => false ], 'scales' => [ 'y' => [ - 'grid' => ['display' => false], - 'ticks' => ['display' => false], + 'grid' => ['display' => false], + 'ticks' => ['display' => false], + 'display' => false, ], 'x' => [ 'grid' => ['display' => false], @@ -231,7 +278,7 @@ class Overview extends Element 'borderColor' => '#009D9E', 'pointBackgroundColor' => '#009D9E', 'pointHoverBorderColor' => '#009D9E', - 'data' => $xml_proccessed, + 'data' => $cpu_load, ], ]; @@ -239,7 +286,7 @@ class Overview extends Element [ 'content' => line_graph($data, $options), 'class' => 'margin-top-5 w100p h100p', - 'style' => 'max-height: 330px;', + 'style' => 'max-height: 50px;', ], true ); @@ -252,7 +299,7 @@ class Overview extends Element true ); - $output = $total.$graph_area; + $output = $graph_area; return $output; } diff --git a/pandora_console/include/styles/general_tactical_view.css b/pandora_console/include/styles/general_tactical_view.css index ff76053f69..3763ef1bd9 100644 --- a/pandora_console/include/styles/general_tactical_view.css +++ b/pandora_console/include/styles/general_tactical_view.css @@ -131,6 +131,64 @@ padding: 10px 10px 5px 10px; } +#Agents > .row { + min-height: 550px; +} +#horizontalBar { + padding: 0px 20px; + position: relative; +} +#horizontalBar .bar { + display: flex; + color: white; + height: 43px; +} + +#horizontalBar .bar div { + display: flex; + align-items: center; + justify-content: center; + z-index: 1; +} + +.marks { + display: flex; + justify-content: space-between; + margin-top: 20px; +} +.marks .line { + height: 76px; + background: #00000033; + width: 1px; + position: absolute; + top: 24px; + margin-left: 11px; +} +.mark:nth-child(1) .line { + margin-left: 0px; +} + +.mark:nth-last-child(1) .line { + margin-left: 31px; +} + +.labels { + display: flex; + margin-bottom: 19px; +} +.label { + display: flex; + justify-content: center; + align-items: center; + margin-right: 10px; +} +.label div { + width: 10px; + height: 10px; + border-radius: 2px; + margin-right: 3px; +} + .indicative-text { color: #6e7079; font-size: 12px; diff --git a/pandora_console/views/tacticalView/view.php b/pandora_console/views/tacticalView/view.php index 8472f2f236..b1b37d3d46 100644 --- a/pandora_console/views/tacticalView/view.php +++ b/pandora_console/views/tacticalView/view.php @@ -12,9 +12,9 @@
-
+
-
+
@@ -22,7 +22,7 @@ getLogSizeStatus(); ?>
-
+
@@ -30,6 +30,14 @@ getServerStatus(); ?>
+
+
+ + + + getCPULoadGraph(); ?> +
+
@@ -40,12 +48,6 @@
-
-
- -
- getXmlProcessedGraph(); ?> -
@@ -150,7 +152,7 @@
-
+
title; ?>
@@ -337,7 +339,7 @@
-
+
title; ?>