Fix main and "More" menus and add prompt to modules for unsupported agents

CHANGELOG.md

@@ -6,13 +6,15 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Added
 
+- Prompt to show the unsupported module for the selected agent [#2959](https://github.com/wazuh/wazuh-kibana-app/pull/2959)
 - Added a X-Frame-Options header to the backend responses [#2977](https://github.com/wazuh/wazuh-kibana-app/pull/2977)
 
 ### Fixed
 
 - An error message is displayed when changing a group's configuration although the user has the right permissions [#2955](https://github.com/wazuh/wazuh-kibana-app/pull/2955)
 - Fix Security events table is empty when switching the pinned agents [#2956](https://github.com/wazuh/wazuh-kibana-app/pull/2956)
 - Fix disabled switch visual edit button when json content is empty [#2957](https://github.com/wazuh/wazuh-kibana-app/issues/2957)
+- Fixed main and `More` menus for unsupported agents [#2959](https://github.com/wazuh/wazuh-kibana-app/pull/2959)
 - Fixed wrong number of alerts in Security Events [#2964](https://github.com/wazuh/wazuh-kibana-app/pull/2964)
 - Fix the statusCode error message [#2971](https://github.com/wazuh/wazuh-kibana-app/pull/2971)
 - Fix the SCA policy stats didn't refresh [#2973](https://github.com/wazuh/wazuh-kibana-app/pull/2973)

common/constants.ts

@@ -175,3 +175,34 @@ export const WAZUH_DEFAULT_APP_CONFIG = {
 
 // Wazuh errors
 export const WAZUH_ERROR_DAEMONS_NOT_READY = 'ERROR3099 - Some Wazuh daemons are not ready yet in node';
+
+// Agents
+export enum WAZUH_AGENTS_OS_TYPE{
+  WINDOWS = 'windows',
+  LINUX = 'linux',
+  SUNOS = 'sunos',
+  DARWIN = 'darwin',
+  OTHERS = ''
+}
+
+export enum WAZUH_MODULES_ID{
+  SECURITY_EVENTS = 'general',
+  INTEGRITY_MONITORING = 'fim',
+  AMAZON_WEB_SERVICES = 'aws',
+  GOOGLE_CLOUD_PLATFORM = 'gcp',
+  POLICY_MONITORING = 'pm',
+  SECURITY_CONFIGURATION_ASSESSMENT = 'sca',
+  AUDITING = 'audit',
+  OPEN_SCAP = 'oscap',
+  VULNERABILITIES = 'vuls',
+  OSQUERY = 'osquery',
+  DOCKER = 'docker',
+  MITRE_ATTACK = 'mitre',
+  PCI_DSS = 'pci',
+  HIPAA = 'hipaa',
+  NIST_800_53 = 'nist',
+  TSC = 'tsc',
+  CIS_CAT = 'ciscat',
+  VIRUSTOTAL = 'virustotal',
+  GDPR = 'gdpr'
+}

public/components/agents/prompt-agent-no-support-module.tsx

@@ -0,0 +1,32 @@
+/*
+ * Wazuh app - Prompt when an agent doesn't support any module
+ * 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
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
+import { showExploreAgentModal } from '../../redux/actions/appStateActions';
+
+export const PromptAgentNoSupportModule = () => {
+  const dispatch = useDispatch();
+  const openAgentSelector = () => dispatch(showExploreAgentModal(true));
+  return (
+    <EuiEmptyPrompt
+      iconType="watchesApp"
+      title={<h2>Module not supported by the agent</h2>}
+      actions={
+        <EuiButton color="primary" fill onClick={openAgentSelector}>
+          Select agent
+        </EuiButton>
+      }
+    />
+  )
+}

public/components/common/hocs/index.ts

@@ -25,4 +25,6 @@ export { withReduxProvider  } from './withReduxProvider';
 
 export { withGuard } from './withGuard';
 
-export { withButtonOpenOnClick } from './withButtonOpenOnClick';
+export { withButtonOpenOnClick } from './withButtonOpenOnClick';
+
+export { withAgentSupportModule } from './withAgentSupportModule';

public/components/common/hocs/withAgentSupportModule.tsx

@@ -0,0 +1,20 @@
+/*
+ * Wazuh app - React HOC to show a prompt when an agent doesn't support any module
+ * 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
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+import { PromptAgentNoSupportModule } from '../../agents/prompt-agent-no-support-module';
+import { withGuard } from '../../common/hocs';
+import { hasAgentSupportModule } from '../../../react-services/wz-agents';
+
+export const withAgentSupportModule = WrappedComponent => 
+  withGuard(
+    ({agent, component}) => Object.keys(agent).length && !hasAgentSupportModule(agent, component),
+    PromptAgentNoSupportModule
+  )(WrappedComponent)

public/components/common/modules/main-agent.tsx

@@ -39,6 +39,9 @@ import { MainFim } from '../../agents/fim';
 import { MainSca } from '../../agents/sca';
 import { MainMitre } from '../modules/main-mitre';
 import { getAngularModule } from '../../../kibana-services';
+import { withAgentSupportModule } from '../../../components/common/hocs';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
 
 export class MainModuleAgent extends Component {
   props!: {
@@ -298,28 +301,7 @@ export class MainModuleAgent extends Component {
               </div>
             </div>
             {!['syscollector', 'configuration'].includes(this.props.section) &&
-              <div className='wz-module-body'>
-                {selectView === 'events' &&
-                  <Events {...this.props} />
-                }
-                {selectView === 'loader' &&
-                  <Loader {...this.props}
-                    loadSection={(section) => this.props.loadSection(section)}
-                    redirect={this.props.afterLoad}>
-                  </Loader>}
-                {selectView === 'dashboard' &&
-                  <Dashboard {...this.props} />
-                }
-                {selectView === 'settings' &&
-                  <Settings {...this.props} />
-                }
-
-                {/* ---------------------MODULES WITH CUSTOM PANELS--------------------------- */}
-                {section === 'fim' && selectView==='inventory' && <MainFim {...this.props} />}
-                {section === 'sca' && selectView==='inventory' && <MainSca {...this.props} />}
-                {section === 'mitre' && selectView==='inventory' && <MainMitre {...this.props} goToDiscover={(id) => this.props.onSelectedTabChanged(id)} />}
-                {/* -------------------------------------------------------------------------- */}
-              </div>
+              <ModuleTabViewer component={section} {...this.props}/>
             }
           </Fragment>
         }
@@ -335,3 +317,40 @@ export class MainModuleAgent extends Component {
     );
   }
 }
+
+
+
+const mapStateToProps = state => ({
+  agent: state.appStateReducers.currentAgentData
+});
+
+const ModuleTabViewer = compose(
+  connect(mapStateToProps),
+  withAgentSupportModule
+)((props) => {
+  const { section, selectView } = props;
+  return <>
+      {selectView === 'events' &&
+        <Events {...props} />
+      }
+      {selectView === 'loader' &&
+        <Loader {...props}
+          loadSection={(section) => props.loadSection(section)}
+          redirect={props.afterLoad}>
+        </Loader>}
+      {selectView === 'dashboard' &&
+        <Dashboard {...props} />
+      }
+      {selectView === 'settings' &&
+        <Settings {...props} />
+      }
+
+
+      {/* ---------------------MODULES WITH CUSTOM PANELS--------------------------- */}
+      {section === 'fim' && selectView==='inventory' && <MainFim {...props} />}
+      {section === 'sca' && selectView==='inventory' && <MainSca {...props} />}
+      {section === 'mitre' && selectView === 'inventory' && <MainMitre {...props} />}
+      {/* {['pci', 'gdpr', 'hipaa', 'nist', 'tsc'].includes(section) && selectView === 'inventory' && <ComplianceTable {...props} goToDiscover={(id) => props.onSelectedTabChanged(id)} />} */}
+      {/* -------------------------------------------------------------------------- */}
+    </>
+})

public/components/common/modules/main-overview.tsx

@@ -36,6 +36,10 @@ import { MainMitre } from './main-mitre';
 import WzReduxProvider from '../../../redux/wz-redux-provider';
 import { ComplianceTable } from '../../overview/compliance-table';
 
+import { withAgentSupportModule } from '../../../components/common/hocs';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
 export class MainModuleOverview extends Component {
   constructor(props) {
     super(props);
@@ -168,32 +172,46 @@ export class MainModuleOverview extends Component {
             </div>
           </div>
           <div className='wz-module-body'>
-            {selectView === 'events' &&
-              <Events {...this.props} />
-            }
-            {selectView === 'loader' &&
-              <Loader {...this.props}
-                loadSection={(section) => this.props.loadSection(section)}
-                redirect={this.props.afterLoad}>
-              </Loader>}
-            {selectView === 'dashboard' &&
-              <Dashboard {...this.props} />
-            }
-            {selectView === 'settings' &&
-              <Settings {...this.props} />
-            }
+            <ModuleTabViewer component={section} {...this.props}/>
           </div>
-
-
-          {/* ---------------------MODULES WITH CUSTOM PANELS--------------------------- */}
-          {section === 'fim' && selectView==='inventory' && <MainFim {...this.props} />}
-          {section === 'sca' && selectView==='inventory' && <MainSca {...this.props} />}
-
-          {section === 'mitre' && selectView === 'inventory' && <MainMitre {...this.props} />}
-          {(section === 'pci' || section === 'gdpr' || section === 'hipaa'|| section === 'nist' || section === 'tsc' )&& selectView === 'inventory' && <ComplianceTable {...this.props} goToDiscover={(id) => this.props.onSelectedTabChanged(id)} />}
-          {/* -------------------------------------------------------------------------- */}
         </Fragment>
       </div>
     );
   }
 }
+
+const mapStateToProps = state => ({
+  agent: state.appStateReducers.currentAgentData
+});
+
+const ModuleTabViewer = compose(
+  connect(mapStateToProps),
+  withAgentSupportModule
+)((props) => {
+  const { section, selectView } = props;
+  return <>
+      {selectView === 'events' &&
+        <Events {...props} />
+      }
+      {selectView === 'loader' &&
+        <Loader {...props}
+          loadSection={(section) => props.loadSection(section)}
+          redirect={props.afterLoad}>
+        </Loader>}
+      {selectView === 'dashboard' &&
+        <Dashboard {...props} />
+      }
+      {selectView === 'settings' &&
+        <Settings {...props} />
+      }
+
+
+      {/* ---------------------MODULES WITH CUSTOM PANELS--------------------------- */}
+      {section === 'fim' && selectView==='inventory' && <MainFim {...props} />}
+      {section === 'sca' && selectView==='inventory' && <MainSca {...props} />}
+
+      {section === 'mitre' && selectView === 'inventory' && <MainMitre {...props} />}
+      {['pci', 'gdpr', 'hipaa', 'nist', 'tsc'].includes(section) && selectView === 'inventory' && <ComplianceTable {...props} goToDiscover={(id) => props.onSelectedTabChanged(id)} />}
+      {/* -------------------------------------------------------------------------- */}
+    </>
+})

public/components/common/welcome/agents-welcome.js

@@ -52,8 +52,8 @@ import { FilterHandler } from '../../../utils/filter-handler';
 import { TabVisualizations } from '../../../factories/tab-visualizations';
 import { updateCurrentAgentData } from '../../../redux/actions/appStateActions';
 import WzTextWithTooltipIfTruncated from '../wz-text-with-tooltip-if-truncated';
-import { UnsupportedComponents } from './../../../utils/components-os-support';
 import { getAngularModule } from '../../../kibana-services';
+import { hasAgentSupportModule } from '../../../react-services/wz-agents';
 
 export class AgentsWelcome extends Component {
   _isMount = false;
@@ -74,11 +74,6 @@ export class AgentsWelcome extends Component {
       maxModules: 6,
       widthWindow: window.innerWidth
     };
-
-    this.platform = false;
-    if (Object.keys(this.props.agent).length) {
-      this.platform = ((this.props.agent.os || {}).uname || '').includes('Linux') ? 'linux' : ((this.props.agent.os || {}).platform || false);
-    }
   }
 
   updateWidth = () => {
@@ -202,22 +197,14 @@ export class AgentsWelcome extends Component {
     this.setState({ menuAgent: menuAgent});
   }
 
-  showModuleByPlatform(menu) {
-    try {
-      return !this.platform ? false : !UnsupportedComponents[this.platform].includes(menu.id);
-    } catch (error) {
-      return !UnsupportedComponents['other'].includes(menu.id);
-    }
-  }
-
   renderModules() {
     const menuAgent = [...Object.keys(this.state.menuAgent).map((item) => { return this.state.menuAgent[item] })];
 
     return (
       <Fragment>
         {
           menuAgent.map((menuAgent, i) => {
-            if(i < this.state.maxModules && this.showModuleByPlatform(menuAgent)) {
+            if(i < this.state.maxModules && hasAgentSupportModule(this.props.agent, menuAgent.id)) {
             return (
             <EuiFlexItem key={i} grow={false} style={{ marginLeft: 0, marginTop: 7 }}>
               <EuiButtonEmpty