#10194 new graph for license and changes in design

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());
     }
   });
 });

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

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);
 

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().'<span id="heatmap-title">'.$this->title.'</span>';
         }
 
         $this->title = __('My monitored modules');
-        return $this->getStatusHeatMapModules();
+        return $this->getStatusHeatMapModules().'<span id="heatmap-title">'.$this->title.'</span>';
     }
 
 

pandora_console/include/lib/TacticalView/elements/Overview.php

@@ -153,27 +153,25 @@ class Overview extends Element
      */
     public function getLicenseUsageGraph():string
     {
-        // TODO connect to automonitorization.
+        // TODO: show real data.
-        $options = [
+        $data = [
-            'labels' => [
+            'free_agents' => [
-                'Agents used',
+                'label' => __('Free agents'),
-                'Free agents',
+                'perc'  => 40,
+                'color' => '#5C63A2',
             ],
-            'colors' => [
+            'agents_used' => [
-                '#1C4E6B',
+                'label' => __('Agents used'),
-                '#5C63A2',
+                '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,
+                'content' => $bar,
-                'style'   => 'margin: 0 auto; max-width: 320px',
+                '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 = '<div id="horizontalBar">';
+        $output .= '<div class="labels">';
+        foreach ($data as $key => $value) {
+            $output .= html_print_div(
+                [
+                    'content' => '<div style="background: '.$value['color'].'"></div>'.$value['label'],
+                    'class'   => 'label',
+                ],
+                true
+            );
+        }
+
+        $output .= '</div>';
+        $output .= '<div class="bar">';
+        foreach ($data as $key => $value) {
+            $output .= html_print_div(
+                [
+                    'content' => $value['perc'].' %',
+                    'style'   => 'width: '.$value['perc'].'%; background-color: '.$value['color'].';',
+                ],
+                true
+            );
+        }
+
+        $output .= '</div>';
+        $output .= '
+            <div class="marks">
+            <div class="mark"><div class="line"></div><span class="number">0 %</span></div>
+            <div class="mark"><div class="line"></div><span class="number">20 %</span></div>
+            <div class="mark"><div class="line"></div><span class="number">40 %</span></div>
+            <div class="mark"><div class="line"></div><span class="number">60 %</span></div>
+            <div class="mark"><div class="line"></div><span class="number">80 %</span></div>
+            <div class="mark"><div class="line"></div><span class="number">100 %</span></div>
+            </div>';
+        $output .= '</div>';
+
+        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) {
+        foreach ($data_last24h as $key => $raw_data) {
-            $dates[] = date('H:00:00', $raw_data['utimestamp']);
+            $dates[] = date('H:m:s', $raw_data['utimestamp']);
-            $total += $raw_data['xml_proccessed'];
+            $cpu_load[] = $raw_data['datos'];
-            $xml_proccessed[] = $raw_data['xml_proccessed'];
         }
 
         $options = [
@@ -215,8 +261,9 @@ class Overview extends Element
             'tooltips' => [ 'display' => false ],
             'scales'   => [
                 'y' => [
-                    'grid'  => ['display' => false],
+                    'grid'    => ['display' => false],
-                    'ticks' => ['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;
     }

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;

pandora_console/views/tacticalView/view.php

@@ -12,9 +12,9 @@
                 </div>
                 <div class="content br-t">
                     <div class="row">
-                        <div class="col-6">
+                        <div class="col-12">
                             <div class="row">
-                                <div class="col-6">
+                                <div class="col-4">
                                     <div class="padding10">
                                         <span class="subtitle">
                                             <?php echo __('Pandora FMS log size'); ?>
@@ -22,7 +22,7 @@
                                         <?php echo $Overview->getLogSizeStatus(); ?>
                                     </div>
                                 </div>
-                                <div class="col-6 br-l">
+                                <div class="col-4 br-l">
                                     <div class="padding10">
                                         <span class="subtitle">
                                             <?php echo __('Server status'); ?>
@@ -30,6 +30,14 @@
                                         <?php echo $Overview->getServerStatus(); ?>
                                     </div>
                                 </div>
+                                <div class="col-4 br-l">
+                                    <div class="padding10">
+                                        <span class="subtitle">
+                                            <?php echo __('System CPU Load'); ?>
+                                        </span>
+                                        <?php echo $Overview->getCPULoadGraph(); ?>
+                                    </div>
+                                </div>
                             </div>
                             <div class="br-t">
                                 <div class="padding10">
@@ -40,12 +48,6 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-6 br-l relative">
-                            <div class="subtitle link padding10 padding2">
-                                <?php echo __('XML packets processed (last 24 hrs)'); ?> <a href=""><?php echo __('Info'); ?></a>
-                            </div>
-                            <?php echo $Overview->getXmlProcessedGraph(); ?>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -150,7 +152,7 @@
         <div class="row">
             <div class="col-6 pdd_5px">
                 <div class="container">
-                    <div class="title br-b">
+                    <div class="title br-b" id="heatmap-title">
                         <?php echo $Groups->title; ?>
                     </div>
                     <div class="subtitle link padding10 padding2">
@@ -337,7 +339,7 @@
         </div>
     </div>
     <div class="col-xl-6">
-        <div class="container mrgn_5px" id="Agents">
+        <div class="container mrgn_5px">
             <div class="title br-b">
                 <?php echo $Configurations->title; ?>
             </div>