Redesigned Overview navigability

public/controllers/overview.js

@@ -44,6 +44,15 @@ app.controller('overviewController', function ($scope, $location, $rootScope, ap
     // This object represents the number of visualizations per tab; used to show a progress bar
     tabVisualizations.assign('overview');
 
+    $scope.hostMonitoringTabs = ['general', 'fim', 'aws'];
+    $scope.systemAuditTabs = ['pm', 'audit', 'oscap', 'ciscat'];
+    $scope.securityTabs = ['vuls', 'virustotal'];
+    $scope.complianceTabs = ['pci', 'gdpr'];
+
+    $scope.inArray = (item, array) => {
+        return (array.indexOf(item) !== -1);
+    };
+
     const createMetrics = metricsObject => {
         for(let key in metricsObject) {
             $scope[key] = () => generateMetric(metricsObject[key]);

public/templates/manager/manager.head

@@ -47,4 +47,4 @@
         <md-nav-item class="wz-nav-item" md-nav-click="switchTab('monitoring')" name="monitoring">Monitoring</md-nav-item>
         <md-nav-item class="wz-nav-item" md-nav-click="switchTab('reporting')" name="reporting">Reporting</md-nav-item>
     </md-nav-bar>
-    <!-- End status and reports navigation bar -->
+    <!-- End Status and reports navigation bar -->

public/templates/overview/overview-welcome.html

@@ -1,241 +1,73 @@
 <div flex layout="column" layout-align="start stretch" ng-if="tab === 'welcome'">
 
-    <!-- Host monitoring section -->
     <!-- Headline -->
-    <div layout="row" layout-padding>
+    <div layout="column" layout-padding>
-        <span class="font-size-18"><i class="fa fa-fw fa-server" aria-hidden="true"></i> Host monitoring</span>
+        <span class="font-size-18"><i class="fa fa-fw fa-bar-chart" aria-hidden="true"></i> Overview</span>
+        <span class="md-subheader">Visualize the current overall status of your cluster</span>
     </div>
     <!-- End headline -->
 
-    <!-- Section cards -->
+    <!-- Host monitoring card -->
     <div layout="row" layout-align="start stretch" layout-wrap>
-
+        <md-card flex class="wz-md-card">
-        <!-- General -->
-        <md-card flex="25" class="wz-md-card">
             <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-home" aria-hidden="true"></i> <span ng-click="switchTab('general')" class="wz-headline-title wz-text-link cursor-pointer">General</span></span>
+                <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">
-                    <p>Brief overview of your latest Wazuh alerts</p>
+                    <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-show="extensions.aws" ng-click="switchTab('aws')" class="small wz-text-link">AWS</md-button>
                 </div>
-                <span flex></span>
             </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/user-manual/capabilities/index.html" class="wz-text-link cursor-pointer small" aria-label="Open Wazuh capabilities documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
-        </md-card>
-
-        <!-- File integrity monitoring -->
-        <md-card flex="25" class="wz-md-card">
-            <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-file" aria-hidden="true"></i> <span ng-click="switchTab('fim')" class="wz-headline-title wz-text-link cursor-pointer">File integrity</span></span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <p>Alerts from monitored files and directories</p>
-                </div>
-                <span flex></span>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/user-manual/capabilities/file-integrity/index.html" class="wz-text-link cursor-pointer small" aria-label="Open File integrity documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
-        </md-card>
-
-        <!-- Amazon -->
-        <md-card flex="25" class="wz-md-card" ng-show="extensions.aws">
-            <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-amazon" aria-hidden="true"></i> <span ng-click="switchTab('aws')" class="wz-headline-title wz-text-link cursor-pointer">AWS</span></span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <p>AWS CloudTrail logs from AWS S3 buckets</p>
-                </div>
-                <span flex></span>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/amazon/index.html" class="wz-text-link cursor-pointer small" aria-label="Open AWS integration documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
         </md-card>
     </div>
-    <!-- End section cards -->
+    <!-- End Host monitoring card -->
-    <!-- End host monitoring section -->
 
-    <!-- System audit section -->
+    <!-- System audit card -->
-    <!-- Headline -->
-    <div layout="row" layout-padding>
-        <span class="font-size-18"><i class="fa fa-fw fa-flag" aria-hidden="true"></i> System audit</span>
-    </div>
-    <!-- End headline -->
-
-    <!-- Section cards -->
     <div layout="row" layout-align="start stretch" layout-wrap>
-
+        <md-card flex class="wz-md-card">
-        <!-- Policy monitoring -->
-        <md-card flex="25" class="wz-md-card">
             <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-desktop" aria-hidden="true"></i> <span ng-click="switchTab('pm')" class="wz-headline-title wz-text-link cursor-pointer">Policy Monitoring</span></span>
+                <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">
-                    <p>Anomalous behaviour detection</p>
+                    <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>
-                <span flex></span>
             </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/user-manual/capabilities/policy-monitoring/rootcheck/index.html" class="wz-text-link cursor-pointer small" aria-label="Open AWS documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
-        </md-card>
-
-        <!-- Audit -->
-        <md-card flex="25" class="wz-md-card" ng-show="extensions.audit">
-            <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-balance-scale" aria-hidden="true"></i> <span ng-click="switchTab('audit')" class="wz-headline-title wz-text-link cursor-pointer">Audit</span></span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <p>Linux Audit system alerts</p>
-                </div>
-                <span flex></span>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/user-manual/capabilities/system-calls-monitoring/index.html" class="wz-text-link cursor-pointer small" aria-label="Open Audit documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
-        </md-card>
-
-        <!-- Open SCAP -->
-        <md-card flex="25" class="wz-md-card" ng-show="extensions.oscap">
-            <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-search" aria-hidden="true"></i> <span ng-click="switchTab('oscap')" class="wz-headline-title wz-text-link cursor-pointer">Open SCAP</span></span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <p>Alerts about OpenSCAP security policies</p>
-                </div>
-                <span flex></span>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/user-manual/capabilities/policy-monitoring/openscap/index.html" class="wz-text-link cursor-pointer small" aria-label="Open Open SCAP documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
-        </md-card>
-
-        <!-- CIS-CAT -->
-        <md-card flex="25" class="wz-md-card" ng-show="extensions.ciscat">
-            <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-rocket" aria-hidden="true"></i> <span ng-click="switchTab('ciscat')" class="wz-headline-title wz-text-link cursor-pointer">CIS-CAT</span></span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <p>Alerts from CIS benchmark assessments</p>
-                </div>
-                <span flex></span>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/user-manual/capabilities/policy-monitoring/ciscat/ciscat.html" class="wz-text-link cursor-pointer small" aria-label="Open CIS-CAT integration documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
         </md-card>
     </div>
-    <!-- End section cards -->
+    <!-- End System audit card -->
-    <!-- End system audit section -->
 
-    <!-- Security section -->
+    <!-- Security card -->
-    <!-- Headline -->
-    <div layout="row" layout-padding>
-        <span class="font-size-18"><i class="fa fa-fw fa-shield" aria-hidden="true"></i> Security</span>
-    </div>
-    <!-- End headline -->
-
-    <!-- Section cards -->
     <div layout="row" layout-align="start stretch" layout-wrap>
-
+        <md-card flex class="wz-md-card">
-        <!-- Vulnerability detection -->
-        <md-card flex="25" class="wz-md-card">
             <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-file-text" aria-hidden="true"></i> <span ng-click="switchTab('vuls')" class="wz-headline-title wz-text-link cursor-pointer">Vulnerabilities</span></span>
+                <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">
-                    <p>Alerts about known vulnerabilities on your applications</p>
+                    <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>
-                <span flex></span>
             </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/user-manual/capabilities/vulnerability-detection.html" class="wz-text-link cursor-pointer small" aria-label="Open Vulnerabilities documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
-        </md-card>
-
-        <!-- VirusTotal -->
-        <md-card flex="25" class="wz-md-card" ng-show="extensions.virustotal">
-            <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-bug" aria-hidden="true"></i> <span ng-click="switchTab('virustotal')" class="wz-headline-title wz-text-link cursor-pointer">VirusTotal</span></span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <p>Alerts from VirusTotal malicious content scans</p>
-                </div>
-                <span flex></span>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/user-manual/capabilities/virustotal-scan/index.html" class="wz-text-link cursor-pointer small" aria-label="Open VirusTotal integration documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
         </md-card>
     </div>
-    <!-- End section cards -->
+    <!-- End Security card -->
-    <!-- End security section -->
 
-    <!-- Compliance section -->
+    <!-- Compliance card -->
-    <!-- Headline -->
-    <div layout="row" layout-padding ng-show="extensions.pci || extensions.gdpr">
-        <span class="font-size-18"><i class="fa fa-fw fa-check" aria-hidden="true"></i> Compliance</span>
-    </div>
-    <!-- End headline -->
-
-    <!-- Section cards -->
     <div layout="row" layout-align="start stretch" layout-wrap ng-show="extensions.pci || extensions.gdpr">
-
+        <md-card flex class="wz-md-card">
-        <!-- PCI DSS -->
-        <md-card flex="25" class="wz-md-card" ng-show="extensions.pci">
             <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-credit-card" aria-hidden="true"></i> <span ng-click="switchTab('pci')" class="wz-headline-title wz-text-link cursor-pointer">PCI DSS</span></span>
+                <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">
-                    <p>PCI DSS compliance alerts</p>
+                    <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>
-                <span flex></span>
             </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/pci-dss/index.html" class="wz-text-link cursor-pointer small" aria-label="Open Wazuh PCI DSS documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
-        </md-card>
-
-        <!-- GDPR -->
-        <md-card flex="25" class="wz-md-card" ng-show="extensions.gdpr">
-            <md-card-content flex layout="column">
-                <span><i class="fa fa-fw fa-list-ol" aria-hidden="true"></i> <span ng-click="switchTab('gdpr')" class="wz-headline-title wz-text-link cursor-pointer">GDPR</span></span>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <div layout="row" class="wz-padding-top-10">
-                    <p>GDPR compliance alerts</p>
-                </div>
-                <span flex></span>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center" class="wz-card-actions">
-                <md-button target="_blank" href="https://documentation.wazuh.com/current/gdpr/index.html" class="wz-text-link cursor-pointer small" aria-label="Open Wazuh GDPR documentation">
-                    <i class="fa fa-fw fa-info" aria-hidden="true"></i> More info
-                </md-button>
-            </md-card-actions>
         </md-card>
     </div>
-    <!-- End section cards -->
+    <!-- End Compliance card -->
-    <!-- End compliance section -->
+
 </div>

public/templates/overview/overview.head

@@ -10,18 +10,21 @@
         <div layout="row" layout-padding>
             <!-- If you're not on the Welcome tab, show a functional breadcrumb -->
             <div ng-if="tab !== 'welcome'">
-                <i class="fa fa-fw fa-bar-chart" aria-hidden="true"></i>
                 <span class="wz-text-link cursor-pointer" ng-click="switchTab('welcome')">Overview</span>
-                <span> / {{ tabNames[tab] }}</span>
+                <span> / </span>
+                <span>{{ tabNames[tab] }}</span>
             </div>
             <!-- If you're on the Welcome tab, show a blank, simple breadcrumb -->
             <div ng-if="tab === 'welcome'">
-                <i class="fa fa-fw fa-bar-chart" aria-hidden="true"></i>
                 <span>Overview / Welcome</span>
             </div>
         </div>
         <!-- End breadcrumbs -->
 
+        <!-- Separator -->
+        <span flex></span>
+        <!-- End separator -->
+
         <!-- Reporting button section -->
         <div ng-show="tab !== 'welcome'">
             <!-- Report button -->
@@ -31,10 +34,6 @@
         </div>
         <!-- End Reporting buttons section -->
 
-        <!-- Separator -->
-        <span flex></span>
-        <!-- End separator -->
-
         <!-- Discover/Panels buttons section -->
         <div ng-show="tab !== 'welcome'">
             <!-- Panels button -->
@@ -51,6 +50,57 @@
     </div>
     <!-- End navigation section -->
 
+    <!-- Host monitoring navigation bar -->
+    <md-nav-bar
+        ng-if="inArray(tab, hostMonitoringTabs)"
+        class="wz-nav-bar"
+        ng-show="tab !== 'welcome'"
+        md-selected-nav-item="tab"
+        nav-bar-aria-label="Host monitoring navigation links">
+        <md-nav-item class="wz-nav-item" md-nav-click="switchTab('general')" name="general">General</md-nav-item>
+        <md-nav-item class="wz-nav-item" md-nav-click="switchTab('fim')" name="fim">File integrity</md-nav-item>
+        <md-nav-item ng-show="extensions.aws" class="wz-nav-item" md-nav-click="switchTab('aws')" name="aws">AWS</md-nav-item>
+    </md-nav-bar>
+    <!-- End Host monitoring navigation bar -->
+
+    <!-- System audit navigation bar -->
+    <md-nav-bar
+        ng-if="inArray(tab, systemAuditTabs) && (extensions.audit || extensions.oscap || extensions.ciscat)"
+        class="wz-nav-bar"
+        ng-show="tab !== 'welcome'"
+        md-selected-nav-item="tab"
+        nav-bar-aria-label="System audit navigation links">
+        <md-nav-item class="wz-nav-item" md-nav-click="switchTab('pm')" name="pm">Policy monitoring</md-nav-item>
+        <md-nav-item ng-show="extensions.audit" class="wz-nav-item" md-nav-click="switchTab('audit')" name="audit">Audit</md-nav-item>
+        <md-nav-item ng-show="extensions.oscap" class="wz-nav-item" md-nav-click="switchTab('oscap')" name="oscap">Open SCAP</md-nav-item>
+        <md-nav-item ng-show="extensions.ciscat" class="wz-nav-item" md-nav-click="switchTab('ciscat')" name="ciscat">CIS-CAT</md-nav-item>
+    </md-nav-bar>
+    <!-- End System audit navigation bar -->
+
+    <!-- Security navigation bar -->
+    <md-nav-bar
+        ng-if="inArray(tab, securityTabs) && extensions.virustotal"
+        class="wz-nav-bar"
+        ng-show="tab !== 'welcome'"
+        md-selected-nav-item="tab"
+        nav-bar-aria-label="Security navigation links">
+        <md-nav-item class="wz-nav-item" md-nav-click="switchTab('vuls')" name="vuls">Vulnerabilities</md-nav-item>
+        <md-nav-item ng-show="extensions.virustotal" class="wz-nav-item" md-nav-click="switchTab('virustotal')" name="virustotal">VirusTotal</md-nav-item>
+    </md-nav-bar>
+    <!-- End Security navigation bar -->
+
+    <!-- Compliance navigation bar -->
+    <md-nav-bar
+        ng-if="inArray(tab, complianceTabs) && extensions.pci && extensions.gdpr"
+        class="wz-nav-bar"
+        ng-show="tab !== 'welcome'"
+        md-selected-nav-item="tab"
+        nav-bar-aria-label="Compliance navigation links">
+        <md-nav-item ng-show="extensions.pci" class="wz-nav-item" md-nav-click="switchTab('pci')" name="pci">PCI DSS</md-nav-item>
+        <md-nav-item ng-show="extensions.gdpr" class="wz-nav-item" md-nav-click="switchTab('gdpr')" name="gdpr">GDPR</md-nav-item>
+    </md-nav-bar>
+    <!-- End Compliance navigation bar -->
+
     <!-- Discover search bar section -->
     <kbn-dis ng-show="tab !== 'welcome'"></kbn-dis>
     <!-- End Discover search bar section -->