Agent status visualization (#1140)

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to the Wazuh app for Splunk project will be documented in th
 - Added new source type selector to customize queries used by dashboards [#1104](https://github.com/wazuh/wazuh-splunk/pull/1104)
 - Added quick settings to improve the view and selection of API, index, and source type [#1107](https://github.com/wazuh/wazuh-splunk/pull/1107)
 - Added persitence to modules in overview panel [#1135](https://github.com/wazuh/wazuh-splunk/pull/1135)
+- Added Agent status visualization on Agents main view [#1140](https://github.com/wazuh/wazuh-splunk/pull/1140)
 
 ### Fixed 
 

SplunkAppForWazuh/appserver/static/js/controllers/agents/agents/agents.html

@@ -3,7 +3,6 @@
   layout-align="start space-around">
 
   <div layout="row" layout-align="space-between stretch" ng-if="!wazuhNotReadyYet">
-
     <div class="md-padding euiFlexGroup--wrap layout-row wz-margin-top--20">
       <div class="layout-column md-padding">
         <span class="wz-headline-title">
@@ -96,13 +95,24 @@
           </div>
         </div>
       </div>
-
     </div>
 
+      <md-card flex="33" class="wz-md-card" ng-class="{'fullscreen': expandChartAgent}">
+        <md-card-content class="wazuh-column">
+              <span class="wz-headline-title">Agents status
+                <span class="wz-text-link" style="float:right;" ng-click="expand('agentStatusChart')">
+                  <wz-svg icon="expand"></wz-svg>
+                </span>
+              </span>
+          <md-divider class="wz-margin-top-10"></md-divider>
+          <div id='agentStatusChart' ng-init="getAgentStatus()"></div>
+        </md-card-content>
+      </md-card>
+    </div>
   </div>
 
   <!-- Search bar -->
-  <div ng-if="!loading" layout="row" layout-align="space-between stretch">
+  <div ng-if="!loading" layout="row" layout-align="space-between stretch" class="md-margin">
     <wz-tag-filter flex path="'/agents'" query-fn="query(q, search)" fields-model="searchBarModel"></wz-tag-filter>
     <button type="submit" aria-label="Search" class="btn wz-button-empty wz-margin-left-10 wz-margin-top-15"
       ng-click="reloadList()">
@@ -111,9 +121,8 @@
     </button>
   </div>
 
-  <md-card class="wz-md-card no-margin-sides wz-margin-top-15">
+  <md-card class="wz-md-card wz-margin-top-15">
     <!-- Table -->
-
     <md-card-actions layout="row" layout-align="start center"
       class="layout-align-start-center layout-row wz-card-actions wz-card-actions-top md-actions-ruleset">
       <a class="cursor-pointer green-href" ng-click="addNewAgent()">Add new agent</a>

SplunkAppForWazuh/appserver/static/js/controllers/agents/agents/agentsCtrl.js

@@ -1,6 +1,6 @@
 /*
  * Wazuh app - Agents controller
- * Copyright (C) 2015-2019 Wazuh, Inc.
+ * Copyright (C) 2015-2021 Wazuh, Inc.
  *
  * 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
@@ -13,8 +13,9 @@
 define([
   '../../module',
   '../../../services/visualizations/search/search-handler',
+  '../../../services/visualizations/chart/linear-chart',
   'FileSaver'
-], function(app, SearchHandler) {
+], function(app, SearchHandler, LinearChart) {
   'use strict'
 
   class Agents {
@@ -26,7 +27,13 @@ define([
      * @param {Object} $state
      * @param {Object} $notificationService
      * @param {Object} $requestService
+     * @param $csvRequestService
+     * @param $tableFilterService
      * @param {Object} agentData
+     * @param clusterInfo
+     * @param $mdDialog
+     * @param $groupHandler
+     * @param $dateDiffService
      */
 
     constructor(
@@ -44,7 +51,7 @@ define([
       $groupHandler,
       $dateDiffService
     ) {
-      this.scope = $scope
+      this.scope = $scope;
       this.submittedTokenModel = $urlTokenModel.getSubmittedTokenModel()
       this.submittedTokenModel.set('activeAgentToken', '-')
       this.currentDataService = $currentDataService
@@ -140,8 +147,8 @@ define([
             : []
         }
 
-        if (this.clusterInfo && 
-            this.clusterInfo.enabled === 'yes' && 
+        if (this.clusterInfo &&
+            this.clusterInfo.enabled === 'yes' &&
             this.clusterInfo.running === 'yes'
           ) {
           this.scope.searchBarModel.node_name = nodes || []
@@ -160,7 +167,8 @@ define([
         'loadingSearch'
       )
 
-      this.scope.$applyAsync()
+      this.scope.expandChartAgent = false;
+      this.scope.$applyAsync();
     }
 
     /**
@@ -179,6 +187,7 @@ define([
       this.scope.versionModel = 'all'
       this.scope.downloadCsv = () => this.downloadCsv()
       this.scope.$on('$destroy', () => {
+        this.linearChartAgent.destroy();
         this.topAgent.destroy()
       })
       this.scope.reloadList = () => this.reloadList()
@@ -196,6 +205,7 @@ define([
 
       this.scope.loadCharts = id => {
         setTimeout(() => {
+          // eslint-disable-next-line no-undef
           const chart = new Chart(document.getElementById(id), {
             type: 'doughnut',
             data: {
@@ -225,6 +235,65 @@ define([
           chart.update()
         }, 250)
       }
+
+      this.scope.getAgentStatus = () => {
+        try {
+          this.clusOrMng = Object.keys(
+            this.currentDataService.getFilters()[0]
+          )[0];
+
+          if (this.clusOrMng === "manager.name") {
+            this.mngName = this.currentDataService.getFilters()[0][
+              "manager.name"
+            ];
+            this.agentsStatusFilter = `manager.name=${this.mngName} index=wazuh-monitoring*`;
+          } else {
+            this.clusName = this.currentDataService.getFilters()[0][
+              "cluster.name"
+            ];
+            this.agentsStatusFilter = `cluster.name=${this.clusName} index=wazuh-monitoring*`;
+          }
+          // eslint-disable-next-line no-empty
+        } catch (error) {}
+
+        this.spanTime = "15m";
+        this.linearChartAgent = new LinearChart(
+          `agentStatusChartHistory`,
+          `${this.agentsStatusFilter} id!=000 status=* | timechart span=${this.spanTime} cont=FALSE count by status usenull=f`,
+          `agentStatusChart`,
+          this.scope,
+          { customAxisTitleX: "Time span" }
+        );
+      };
+
+      /**
+       * Expands the visualizations
+       * @param {String} id
+       */
+      this.scope.expand = id => {
+        this.scope.expandChartAgent = !this.scope.expandChartAgent;
+        let vis = $(
+          "#" + id + " .panel-body .splunk-view .shared-reportvisualizer"
+        );
+        this.scope.expandChartAgent
+          ? vis.css("height", "calc(100vh - 200px)")
+          : vis.css("height", "250px");
+
+        document.querySelectorAll('[role="main"]')[0].style.zIndex = this.scope.expandChartAgent ? 900 : '';
+
+        let vis_header = $(".wz-headline-title");
+        vis_header.dblclick(e => {
+          if (this.scope.expandChartAgent) {
+            this.scope.expandChartAgent = !this.scope.expandChartAgent;
+            this.scope.expandChartAgent
+              ? vis.css("height", "calc(100vh - 200px)")
+              : vis.css("height", "250px");
+            this.scope.$applyAsync();
+          } else {
+            e.preventDefault();
+          }
+        });
+      };
     }
 
     /**

SplunkAppForWazuh/appserver/static/js/dashboardMain.js

@@ -142,6 +142,8 @@ define([
         ? vis.css('height', 'calc(100vh - 200px)')
         : vis.css('height', '250px')
 
+      document.querySelectorAll('[role="main"]')[0].style.zIndex = this.scope.expandArray[i] ? 900 : '';
+
       let vis_header = $('.wz-headline-title')
       vis_header.dblclick(e => {
         if (this.scope.expandArray[i]) {