Improve tabs bars with Tabs component (#1705)

wazuh · Aug 22, 2019 · 4547d59 · 4547d59
1 parent fed2183
commit 4547d59
Show file tree

Hide file tree

Showing 23 changed files with 242 additions and 233 deletions.
diff --git a/public/controllers/agent/agents.js b/public/controllers/agent/agents.js
@@ -163,11 +163,6 @@ export class AgentsController {
 
     this.tabVisualizations.assign('agents');
 
-    this.$scope.hostMonitoringTabs = ['general', 'fim', 'syscollector'];
-    this.$scope.systemAuditTabs = ['pm', 'sca', 'audit', 'oscap', 'ciscat'];
-    this.$scope.securityTabs = ['vuls', 'virustotal', 'osquery', 'docker'];
-    this.$scope.complianceTabs = ['pci', 'gdpr', 'hipaa', 'nist'];
-
     /**
      * This check if given array of items contais a single given item
      * @param {Object} item
@@ -451,6 +446,7 @@ export class AgentsController {
     };
 
     this.$scope.expand = i => this.expand(i);
+    this.setTabs();
   }
   /**
    * Create metric for given object
@@ -663,6 +659,66 @@ export class AgentsController {
     } catch (error) {
       return Promise.reject(error);
     }
+
+    this.$scope.configurationTabsProps = {};
+    this.$scope.buildProps = tabs => {
+      const cleanTabs = [];
+      tabs.forEach(x => {
+        if (
+          this.$scope.configurationTab === 'integrity-monitoring' &&
+          x.id === 'fim-whodata' &&
+          x.agent &&
+          x.agent.agentPlatform !== 'linux'
+        )
+          return;
+
+        cleanTabs.push({
+          id: x.id,
+          name: x.name
+        });
+      });
+      this.$scope.configurationTabsProps = {
+        clickAction: tab => {
+          this.$scope.switchConfigurationSubTab(tab);
+        },
+        selectedTab:
+          this.$scope.configurationSubTab || (tabs && tabs.length)
+            ? tabs[0].id
+            : '',
+        tabs: cleanTabs
+      };
+    };
+
+    this.setTabs();
+  }
+
+  /**
+   * Build the current section tabs
+   */
+  setTabs() {
+    this.$scope.agentsTabsProps = false;
+    this.currentPanel = this.commonData.getCurrentPanel(this.$scope.tab);
+
+    if (!this.currentPanel) return;
+
+    const tabs = this.commonData.getTabsFromCurrentPanel(
+      this.currentPanel,
+      this.$scope.extensions,
+      this.$scope.tabNames
+    );
+
+    this.$scope.agentsTabsProps = {
+      clickAction: tab => {
+        this.switchTab(tab, true);
+      },
+      selectedTab:
+        this.$scope.tab ||
+        (this.currentPanel && this.currentPanel.length
+          ? this.currentPanel[0]
+          : ''),
+      tabs
+    };
+    this.$scope.$applyAsync();
   }
 
   goDiscover() {

diff --git a/public/controllers/agent/components/welcome.js b/public/controllers/agent/components/welcome.js
@@ -194,7 +194,12 @@ export class WelcomeScreen extends Component {
               <EuiFlexGroup gutterSize="xs">
                 <EuiFlexItem />
                 <EuiFlexItem grow={false}>
-                  {this.buildPopover('popoverRegulatory', ['pci', 'gdpr', 'hipaa', 'nist'])}
+                  {this.buildPopover('popoverRegulatory', [
+                    'pci',
+                    'gdpr',
+                    'hipaa',
+                    'nist'
+                  ])}
                 </EuiFlexItem>
               </EuiFlexGroup>
               {!this.props.extensions.pci && !this.props.extensions.gdpr && (

diff --git a/public/controllers/management/configuration.js b/public/controllers/management/configuration.js
@@ -82,6 +82,20 @@ export class ConfigurationController {
       }
       this.switchConfigurationTab(this.configurationTab, false, true);
     });
+
+    this.$scope.configurationTabsProps = {};
+    this.$scope.buildProps = tabs => {
+      this.$scope.configurationTabsProps = {
+        clickAction: tab => {
+          this.$scope.switchConfigurationSubTab(tab);
+        },
+        selectedTab:
+          this.$scope.configurationSubTab || (tabs && tabs.length)
+            ? tabs[0].id
+            : '',
+        tabs
+      };
+    };
   }
 
   switchConfigurationSubTab(configurationSubTab) {

diff --git a/public/controllers/management/groups.js b/public/controllers/management/groups.js
@@ -614,6 +614,18 @@ export function GroupsController(
     $scope.$broadcast('wazuhSearch', {});
   };
 
+  $scope.groupsTabsProps = {
+    clickAction: tab => {
+      if (tab === 'agents') {
+        $scope.goBackToAgents();
+      } else if (tab === 'content') {
+        $scope.goBackFiles();
+      }
+    },
+    selectedTab: $scope.groupsSelectedTab || 'agents',
+    tabs: [{ id: 'agents', name: 'Agents' }, { id: 'content', name: 'Content' }]
+  };
+
   // Come from the pencil icon on the groups table
   $scope.$on('openGroupFromList', (ev, parameters) => {
     $scope.editingFile = true;

diff --git a/public/controllers/management/management.js b/public/controllers/management/management.js
@@ -153,7 +153,7 @@ export class ManagementController {
 
     this.rulesetTabsProps = {
       clickAction: tab => this.setRulesTab(tab),
-      selectedTab: this.rulesetTab,
+      selectedTab: this.rulesetTab || 'rules',
       tabs: [
         { id: 'rules', name: 'Rules' },
         { id: 'decoders', name: 'Decoders' },
@@ -297,6 +297,7 @@ export class ManagementController {
       this.currentRule = false;
       this.currentDecoder = false;
       this.currentList = false;
+      this.managementTabsProps.selectedTab = this.tab;
     }
 
     this.$location.search('tab', this.tab);

diff --git a/public/controllers/overview/components/welcome.js b/public/controllers/overview/components/welcome.js
@@ -171,7 +171,12 @@ export class WelcomeScreen extends Component {
               <EuiFlexGroup gutterSize="xs">
                 <EuiFlexItem />
                 <EuiFlexItem grow={false}>
-                  {this.buildPopover('popoverRegulatory', ['pci', 'gdpr', 'hipaa', 'nist'])}
+                  {this.buildPopover('popoverRegulatory', [
+                    'pci',
+                    'gdpr',
+                    'hipaa',
+                    'nist'
+                  ])}
                 </EuiFlexItem>
               </EuiFlexGroup>
               {!this.props.extensions.pci && !this.props.extensions.gdpr && (

diff --git a/public/controllers/overview/overview.js b/public/controllers/overview/overview.js
@@ -114,11 +114,6 @@ export class OverviewController {
     // This object represents the number of visualizations per tab; used to show a progress bar
     this.tabVisualizations.assign('overview');
 
-    this.hostMonitoringTabs = ['general', 'fim', 'aws'];
-    this.systemAuditTabs = ['pm', 'audit', 'oscap', 'ciscat', 'sca'];
-    this.securityTabs = ['vuls', 'virustotal', 'osquery', 'docker'];
-    this.complianceTabs = ['pci', 'gdpr', 'hipaa', 'nist'];
-
     this.wodlesConfiguration = null;
 
     this.init();
@@ -131,6 +126,8 @@ export class OverviewController {
         this.appState.setExtensions(api, extensions)
     };
 
+    this.setTabs();
+
     this.$scope.$on('$destroy', () => {
       this.visFactoryService.clearAll();
     });
@@ -185,6 +182,35 @@ export class OverviewController {
     }
   }
 
+  /**
+   * Build the current section tabs
+   */
+  setTabs() {
+    this.overviewTabsProps = false;
+    this.currentPanel = this.commonData.getCurrentPanel(this.tab);
+
+    if (!this.currentPanel) return;
+
+    const tabs = this.commonData.getTabsFromCurrentPanel(
+      this.currentPanel,
+      this.extensions,
+      this.tabNames
+    );
+
+    this.overviewTabsProps = {
+      clickAction: tab => {
+        this.switchTab(tab, true);
+      },
+      selectedTab:
+        this.tab ||
+        (this.currentPanel && this.currentPanel.length
+          ? this.currentPanel[0]
+          : ''),
+      tabs
+    };
+    this.$scope.$applyAsync();
+  }
+
   // Switch subtab
   async switchSubtab(
     subtab,
@@ -209,9 +235,9 @@ export class OverviewController {
           localChange || preserveDiscover
         );
       } else {
-        this.$scope.$emit('changeTabView', { 
+        this.$scope.$emit('changeTabView', {
           tabView: this.tabView
-         });
+        });
       }
 
       this.checkMetrics(this.tab, subtab);
@@ -300,6 +326,7 @@ export class OverviewController {
     } catch (error) {
       this.errorHandler.handle(error.message || error);
     }
+    this.setTabs();
     this.$scope.$applyAsync();
     return;
   }

diff --git a/public/controllers/settings/settings.js b/public/controllers/settings/settings.js
@@ -95,6 +95,7 @@ export class SettingsController {
     const location = this.$location.search();
     if (location && location.tab) {
       this.tab = location.tab;
+      this.settingsTabsProps.selectedTab = this.tab;
     }
 
     this.savingApi = false;
@@ -788,4 +789,21 @@ export class SettingsController {
       this.errorHandler.handle(error);
     }
   }
+
+  settingsTabsProps = {
+    clickAction: tab => {
+      this.switchTab(tab, true);
+      if (tab === 'logs') {
+        this.refreshLogs();
+      }
+    },
+    selectedTab: this.tab || 'api',
+    tabs: [
+      { id: 'api', name: 'API' },
+      { id: 'pattern', name: 'Pattern' },
+      { id: 'configuration', name: 'Configuration' },
+      { id: 'logs', name: 'Logs' },
+      { id: 'about', name: 'About' }
+    ]
+  };
 }
diff --git a/public/services/common-data.js b/public/services/common-data.js
@@ -41,6 +41,11 @@ export class CommonData {
     this.globalState = globalState;
     this.savedTimefilter = null;
     this.refreshInterval = { pause: true, value: 0 };
+
+    this.hostMonitoringTabs = ['general', 'fim', 'aws'];
+    this.systemAuditTabs = ['pm', 'audit', 'oscap', 'ciscat', 'sca'];
+    this.securityTabs = ['vuls', 'virustotal', 'osquery', 'docker'];
+    this.complianceTabs = ['pci', 'gdpr', 'hipaa', 'nist'];
   }
 
   /**
@@ -352,4 +357,32 @@ export class CommonData {
   getRefreshInterval() {
     return this.refreshInterval;
   }
+
+  getCurrentPanel(tab) {
+    return this.hostMonitoringTabs.includes(tab)
+      ? this.hostMonitoringTabs
+      : this.systemAuditTabs.includes(tab)
+      ? this.systemAuditTabs
+      : this.securityTabs.includes(tab)
+      ? this.securityTabs
+      : this.complianceTabs.includes(tab)
+      ? this.complianceTabs
+      : false;
+  }
+
+  getTabsFromCurrentPanel(currentPanel, extensions, tabNames) {
+    const keyExists = key => Object.keys(extensions).includes(key);
+    const keyIsTrue = key => (extensions || [])[key];
+
+    let tabs = [];
+    currentPanel.forEach(x => {
+      if (keyExists(x) && keyIsTrue(x)) {
+        tabs.push({
+          id: x,
+          name: tabNames[x]
+        });
+      }
+    });
+    return tabs;
+  }
 }
diff --git a/public/templates/agents/agents.head b/public/templates/agents/agents.head
@@ -86,62 +86,11 @@
     </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">{{ tabNames['general'] }}
-        </md-nav-item>
-        <md-nav-item class="wz-nav-item" md-nav-click="switchTab('fim')" name="fim">{{ tabNames['fim'] }}</md-nav-item>
-        <md-nav-item class="wz-nav-item" md-nav-click="switchTab('syscollector')" name="syscollector">{{
-            tabNames['syscollector'] }}</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">{{ tabNames['pm'] }}</md-nav-item>
-        <md-nav-item class="wz-nav-item" md-nav-click="switchTab('sca')" name="sca">{{
-            tabNames['sca'] }}</md-nav-item>
-        <md-nav-item ng-show="extensions.audit" class="wz-nav-item" md-nav-click="switchTab('audit')" name="audit">{{
-            tabNames['audit'] }}</md-nav-item>
-        <md-nav-item ng-show="extensions.oscap" class="wz-nav-item" md-nav-click="switchTab('oscap')" name="oscap">{{
-            tabNames['oscap'] }}</md-nav-item>
-        <md-nav-item ng-show="extensions.ciscat" class="wz-nav-item" md-nav-click="switchTab('ciscat')" name="ciscat">{{
-            tabNames['ciscat'] }}</md-nav-item>
-    </md-nav-bar>
-    <!-- End System audit navigation bar -->
-
-    <!-- Security navigation bar -->
-    <md-nav-bar ng-if="inArray(tab, securityTabs)" 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">{{ tabNames['vuls'] }}
-        </md-nav-item>
-        <md-nav-item ng-show="extensions.virustotal" class="wz-nav-item" md-nav-click="switchTab('virustotal')"
-            name="virustotal">{{
-            tabNames['virustotal'] }}</md-nav-item>
-        <md-nav-item ng-show="extensions.osquery" class="wz-nav-item" md-nav-click="switchTab('osquery')"
-            name="osquery">{{
-            tabNames['osquery'] }}</md-nav-item>
-        <md-nav-item ng-show="extensions.docker" class="wz-nav-item" md-nav-click="switchTab('docker')" name="docker">{{
-            tabNames['docker'] }}</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 || extensions.hipaa || extensions.nist)" 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">{{
-            tabNames['pci'] }}</md-nav-item>
-        <md-nav-item ng-show="extensions.gdpr" class="wz-nav-item" md-nav-click="switchTab('gdpr')" name="gdpr">{{
-            tabNames['gdpr'] }}</md-nav-item>
-        <md-nav-item ng-show="extensions.hipaa" class="wz-nav-item" md-nav-click="switchTab('hipaa')" name="hipaa">{{
-            tabNames['hipaa'] }}</md-nav-item>
-        <md-nav-item ng-show="extensions.nist" class="wz-nav-item" md-nav-click="switchTab('nist')" name="nist">{{
-            tabNames['nist'] }}</md-nav-item>
-    </md-nav-bar>
-    <!-- End Compliance navigation bar -->
+    <!-- Navigation bar -->
+    <div ng-if="agentsTabsProps" ng-show="tab !== 'welcome'">
+        <react-component name="Tabs" props="agentsTabsProps" />
+    </div>
+    <!-- End of navigation bar -->
 
     <!-- Discover search bar section -->
     <kbn-dis