Redesigned welcome screen for Overview, Management and Agents

public/controllers/overview.js

@@ -97,6 +97,10 @@ function ($scope, $location, $rootScope, appState,
     $scope.switchSubtab = async (subtab, force = false, sameTab = true, preserveDiscover = false) => {
         try {
 
+            if($scope.tab && $scope.tab === 'welcome' && typeof $scope.agentsCountTotal === 'undefined'){
+                await getSummary();
+            }
+
             if ($scope.tabView === subtab && !force) return;
 
             visFactoryService.clear()
@@ -154,24 +158,33 @@ function ($scope, $location, $rootScope, appState,
         }
     };
 
+    const getSummary = async () => {
+        try {
+            const data = await apiReq.request('GET', '/agents/summary', { });
+
+            if(data && data.data && data.data.data){
+                $scope.agentsCountActive         = data.data.data.Active;
+                $scope.agentsCountDisconnected   = data.data.data.Disconnected;
+                $scope.agentsCountNeverConnected = data.data.data['Never connected'];
+                $scope.agentsCountTotal          = data.data.data.Total;
+                $scope.agentsCoverity            = (data.data.data.Active / data.data.data.Total) * 100;
+            } else {
+                throw new Error('Error fetching /agents/summary from Wazuh API');
+            }
+            return;
+        } catch (error) {
+            return Promise.reject(error);
+        }
+    }
+
     const loadConfiguration = async () => {
         try {
             const configuration = wazuhConfig.getConfig();
 
             $scope.wzMonitoringEnabled = !!configuration['wazuh.monitoring.enabled'];
 
             if(!$scope.wzMonitoringEnabled){
-                const data = await apiReq.request('GET', '/agents/summary', { });
-
-                if(data && data.data && data.data.data){
-                    $scope.agentsCountActive         = data.data.data.Active;
-                    $scope.agentsCountDisconnected   = data.data.data.Disconnected;
-                    $scope.agentsCountNeverConnected = data.data.data['Never connected'];
-                    $scope.agentsCountTotal          = data.data.data.Total;
-                    $scope.agentsCoverity            = (data.data.data.Active / data.data.data.Total) * 100;
-                } else {
-                    throw new Error('Error fetching /agents/summary from Wazuh API');
-                }
+                await getSummary();
             }
 
             return;
@@ -184,20 +197,27 @@ function ($scope, $location, $rootScope, appState,
 
     const init = async () => {
         try {
+
             await Promise.all([
                 loadPciAndGDPR(),
                 loadConfiguration()
             ]);
 
             $scope.switchTab($scope.tab,true);
 
+            if($scope.tab && $scope.tab === 'welcome'){
+                await getSummary();
+            }
+
+            if(!$scope.$$phase) $scope.$digest()
+
             return;
 
         } catch (error) {
             errorHandler.handle(error, 'Overview (init)')
             return;
         }
-    }
+    };
 
     init();
 

public/directives/index.js

@@ -13,4 +13,5 @@ import './wz-dynamic/wz-dynamic';
 import './wz-enter/wz-enter';
 import './wz-menu/wz-menu';
 import './wz-menu/wz-menu.less';
-import './wazuh-table/controller'
+import './wz-table/wz-table';
+import './wz-welcome-card/wz-welcome-card';

public/directives/wazuh-table/controller.js → public/directives/wz-table/wz-table.js

@@ -10,7 +10,7 @@
  * Find more information about this on the LICENSE file.
  */
 
-import template        from './template.html';
+import template        from './wz-table.html';
 import { uiModules }   from 'ui/modules';
 import DataFactory     from '../../services/data-factory';
 import KeyEquivalenece from '../../../util/csv-key-equivalence';

public/directives/wz-welcome-card/wz-welcome-card.html

@@ -0,0 +1,18 @@
+<div class="euiFlexItem" style="min-height: 64px;">
+    <div flex class="synopsis">
+        <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
+            <div class="euiFlexItem euiFlexItem--flexGrowZero">
+                <img ng-if="logo" class="synopsisIcon" ng-src="/plugins/kibana/assets/{{logo}}" alt="">
+                <img ng-if="wzLogo" class="synopsisIcon" ng-src="/plugins/wazuh/img/{{wzLogo}}" alt="">
+            </div>
+            <div class="euiFlexItem synopsisContent " ng-click="callSwitchTab()">
+                <h4 class="euiTitle euiTitle--small synopsisTitle wz-text-link">{{ title }}</h4>
+                <div class="euiText synopsisBody cursor-pointer" ng-if="description">
+                    <p>
+                        <span class="euiTextColor euiTextColor--subdued">{{ description }}</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

public/directives/wz-welcome-card/wz-welcome-card.js

@@ -0,0 +1,23 @@
+import template from './wz-welcome-card.html';
+import { uiModules } from 'ui/modules';
+
+const app = uiModules.get('app/wazuh', []);
+
+app.directive('wzWelcomeCard',function(){
+    return {
+        restrict: 'E',
+        scope: {
+            title:       '=title',
+            description: '=description',
+            logo:        '=logo',
+            switchTab:   '&',
+            currentTab:  '=currentTab',
+            wzLogo:      '=wzLogo'
+        },
+        replace: true,
+        link: function(scope,elm,attrs){
+            scope.callSwitchTab = () => scope.switchTab();
+        },
+        template
+    };
+});

public/less/component.less

@@ -20,7 +20,8 @@
     height: auto !important;
 }
 
-.wz-nav-item button {
+.wz-nav-item button,
+.wz-no-padding {
     padding: 0 !important;
 }
 

public/less/layout.less

@@ -83,6 +83,10 @@
     padding-top: 0px !important;
 }
 
+.wz-padding-bottom-0 {
+    padding-bottom: 0px !important;
+}
+
 .wz-padding-top-5 {
     padding-top: 5px !important;
 }

public/templates/agents/agents-welcome.html

@@ -3,13 +3,12 @@
     <!-- Headline -->
     <div layout="column" layout-padding>
         <span class="font-size-18"><i class="fa fa-fw fa-tv" aria-hidden="true"></i> Agent overview</span>
-        <span class="md-subheader">Visualize the current overall status of this agent</span>
     </div>
     <!-- End headline -->
 
     <!-- Agent information section -->
-    <div layout="row" layout-align="start center">
-        <md-card flex class="wz-metric-color wz-md-card">
+    <div layout="row" layout-padding class="wz-padding-top-0 wz-padding-bottom-0">
+        <md-card flex class="wz-metric-color wz-md-card wz-no-padding">
             <md-card-content layout="row" class="wz-padding-metric">
                 <div class="wz-text-truncatable" flex>
                     Name: <span class="wz-text-bold">{{ agent.name }}</span>
@@ -35,8 +34,8 @@
             </md-card-content>
         </md-card>
     </div>
-    <div layout="row" layout-align="start center">
-        <md-card flex class="wz-metric-color wz-md-card">
+    <div layout="row" layout-padding class="wz-padding-top-0 wz-padding-bottom-0">
+        <md-card flex class="wz-metric-color wz-md-card wz-no-padding">
             <md-card-content layout="row" class="wz-padding-metric">
                 <div class="wz-text-truncatable" flex>Last keep alive:<span class="wz-text-bold"> {{agent.lastKeepAlive || 'Unknown' }}</span></div>
                 <div class="wz-text-truncatable" flex>Registration date:<span class="wz-text-bold"> {{agent.dateAdd}}</span></div>
@@ -61,68 +60,121 @@
     </div>
     <!-- End agent information section -->
 
-    <!-- Host monitoring card -->
-    <div layout="row" layout-align="start stretch" layout-wrap>
-        <md-card flex class="wz-md-card">
-            <md-card-content flex layout="column">
-                <span class="wz-headline-title"><i class="fa fa-fw fa-server" aria-hidden="true"></i> Host monitoring</span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <md-button ng-click="switchTab('general')" class="small wz-text-link">General</md-button>
-                    <md-button ng-click="switchTab('fim')" class="small wz-text-link">File integrity</md-button>
-                    <md-button ng-click="switchTab('configuration')" class="small wz-text-link">Configuration</md-button>
-                    <md-button ng-show="syscollector && syscollector.os && syscollector.os.sysname" ng-click="switchTab('syscollector')" class="small wz-text-link">Inventory</md-button>
-                </div>
-            </md-card-content>
-        </md-card>
-    </div>
-    <!-- End Host monitoring card -->
 
-    <!-- System audit card -->
-    <div layout="row" layout-align="start stretch" layout-wrap>
-        <md-card flex class="wz-md-card">
-            <md-card-content flex layout="column">
-                <span class="wz-headline-title"><i class="fa fa-fw fa-flag" aria-hidden="true"></i> System audit</span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <md-button ng-click="switchTab('pm')" class="small wz-text-link">Policy monitoring</md-button>
-                    <md-button ng-show="extensions.audit" ng-click="switchTab('audit')" class="small wz-text-link">Audit</md-button>
-                    <md-button ng-show="extensions.oscap" ng-click="switchTab('oscap')" class="small wz-text-link">Open SCAP</md-button>
-                    <md-button ng-show="extensions.ciscat" ng-click="switchTab('ciscat')" class="small wz-text-link">CIS-CAT</md-button>
+    <div layout="row" layout-padding>
+        <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
+            <div class="euiFlexItem">
+                <div class="euiPanel euiPanel--paddingLarge">
+                    <h3 class="euiTitle">Host monitoring</h3>
+                    <div class="euiSpacer euiSpacer--m"></div>
+                    <div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--halves">
+                        <wz-welcome-card 
+                            class="euiFlexItem" logo="'app_dashboard.svg'" title="'General'"
+                            switch-tab="switchTab('general')" current-tab="'general'"
+                            description="'Explore your alerts.'"
+                        ></wz-welcome-card>
+                        <wz-welcome-card 
+                            class="euiFlexItem" logo="'app_logging.svg'" title="'File integrity'"
+                            switch-tab="switchTab('fim')" current-tab="'fim'"
+                            description="'Wazuh’s File integrity monitoring (FIM) watches specified files triggering
+                            alerts when these files are modified.'"
+                        ></wz-welcome-card>
+                        <wz-welcome-card 
+                            class="euiFlexItem" logo="'app_devtools.svg'" 
+                            title="'Configuration'" switch-tab="switchTab('configuration')" current-tab="'configuration'"
+                            description="'Agents can be configured remotely by using the agent.conf file. Check the agent configuration here.'"
+                        ></wz-welcome-card>
+                        <wz-welcome-card 
+                            ng-if="syscollector && syscollector.os && syscollector.os.sysname" class="euiFlexItem" logo="'app_index_pattern.svg'" 
+                            title="'Inventory'" switch-tab="switchTab('syscollector')" current-tab="'syscollector'"
+                            description="'Scan the system to retrieve OS, hardware and installed packages related information.'"
+                        ></wz-welcome-card>
+                    </div>
                 </div>
-            </md-card-content>
-        </md-card>
-    </div>
-    <!-- End System audit card -->
-
-    <!-- Security card -->
-    <div layout="row" layout-align="start stretch" layout-wrap>
-        <md-card flex class="wz-md-card">
-            <md-card-content flex layout="column">
-                <span class="wz-headline-title"><i class="fa fa-fw fa-shield" aria-hidden="true"></i> Security</span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <md-button ng-click="switchTab('vuls')" class="small wz-text-link">Vulnerabilities</md-button>
-                    <md-button ng-show="extensions.virustotal" ng-click="switchTab('virustotal')" class="small wz-text-link">VirusTotal</md-button>
+            </div>
+            <div class="euiFlexItem">
+                <div class="euiPanel euiPanel--paddingLarge">
+                    <h3 class="euiTitle">System audit</h3>
+                    <div class="euiSpacer euiSpacer--m"></div>
+                    <div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--halves">
+                        <wz-welcome-card 
+                            class="euiFlexItem" logo="'app_advanced_settings.svg'" 
+                            title="'Policy monitoring'" switch-tab="switchTab('pm')" current-tab="'pm'"
+                            description="'Policy monitoring is the process of verifying that all systems conform to
+                            a set of predefined rules regarding configuration settings and approved
+                            application usage.'"
+                        ></wz-welcome-card>
+                        <wz-welcome-card 
+                            ng-if="extensions.audit" class="euiFlexItem" logo="'app_monitoring.svg'" 
+                            title="'Audit'" switch-tab="switchTab('audit')" current-tab="'audit'"
+                            description="'The Linux auditd system is an extensive auditing facility, which we will
+                            only touch on here.'"
+                        ></wz-welcome-card>
+                        <wz-welcome-card 
+                            ng-if="extensions.oscap" class="euiFlexItem" logo="'app_discover.svg'" 
+                            title="'Open SCAP'" switch-tab="switchTab('oscap')" current-tab="'oscap'"
+                            description="'SCAP jointly uses several specifications in order to automate continuous
+                            monitoring, vulnerability management, and reporting on results of security
+                            compliance scans.'"
+                        ></wz-welcome-card>
+                        <wz-welcome-card 
+                            ng-if="extensions.ciscat" class="euiFlexItem" logo="'app_management.svg'" 
+                            title="'CIS-CAT'" switch-tab="switchTab('ciscat')" current-tab="'ciscat'"
+                            description="'Integrated CIS benchmark assessments into Wazuh agents.'"
+                        ></wz-welcome-card>
+                    </div>
                 </div>
-            </md-card-content>
-        </md-card>
+            </div>
+        </div>
     </div>
-    <!-- End Security card -->
 
-    <!-- Compliance card -->
-    <div layout="row" layout-align="start stretch" layout-wrap ng-show="extensions.pci || extensions.gdpr">
-        <md-card flex class="wz-md-card">
-            <md-card-content flex layout="column">
-                <span class="wz-headline-title"><i class="fa fa-fw fa-check" aria-hidden="true"></i> Compliance</span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <md-button ng-show="extensions.pci" ng-click="switchTab('pci')" class="small wz-text-link">PCI DSS</md-button>
-                    <md-button ng-show="extensions.gdpr" ng-click="switchTab('gdpr')" class="small wz-text-link">GDPR</md-button>
+    <div layout="row" layout-padding>
+        <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
+            <div class="euiFlexItem">
+                <div class="euiFlexItem">
+                    <div class="euiPanel euiPanel--paddingLarge">
+                        <h3 class="euiTitle">Security</h3>
+                        <div class="euiSpacer euiSpacer--m"></div>
+                        <div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--halves">
+                            <wz-welcome-card 
+                                class="euiFlexItem" logo="'app_security.svg'" 
+                                title="'Vulnerabilities'" switch-tab="switchTab('vuls')" current-tab="'vuls'"
+                                description="'Detect applications that are known to be vulnerable (affected by a CVE).'"
+                            ></wz-welcome-card>
+                            <wz-welcome-card 
+                                ng-if="extensions.virustotal" class="euiFlexItem" logo="'app_saved_objects.svg'" 
+                                title="'Virustotal'" switch-tab="switchTab('virustotal')" current-tab="'virustotal'"
+                                description="'Scans monitored files for malicious content.'"
+                            ></wz-welcome-card>
+                        </div>
+                    </div>
                 </div>
-            </md-card-content>
-        </md-card>
+            </div>
+            <div class="euiFlexItem" ng-if="extensions && (extensions.pci || extensions.gdpr)">
+                <div class="euiFlexItem">
+                    <div class="euiPanel euiPanel--paddingLarge">
+                        <h3 class="euiTitle">Compliance</h3>
+                        <div class="euiSpacer euiSpacer--m"></div>
+                        <div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--halves">
+                            <wz-welcome-card 
+                                ng-if="extensions.pci" class="euiFlexItem" logo="'app_apm.svg'" 
+                                title="'PCI DSS'" switch-tab="switchTab('pci')" current-tab="'pci'"
+                                description="'Wazuh helps to implement PCI DSS by performing log analysis, file integrity
+                                checking, policy monitoring, intrusion detection, real-time alerting
+                                and active response.'"
+                            ></wz-welcome-card>
+                            <wz-welcome-card 
+                                ng-if="extensions.gdpr" class="euiFlexItem" logo="'app_visualize.svg'" 
+                                title="'GDPR'" switch-tab="switchTab('gdpr')" current-tab="'gdpr'"
+                                description="'The General Data Protection Regulation took effect on 25th May 2018.
+                                Wazuh helps with most technical requirements, taking advantage of
+                                features such as File Integrity or Policy monitoring.'"
+                            ></wz-welcome-card>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <!-- End Compliance card -->
 
 </div>