[FEAT] Refactor the layout of modules

CHANGELOG.md

@@ -38,6 +38,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Refactored all try catch strategy on Controller/Agent section [#3398](https://github.com/wazuh/wazuh-kibana-app/issues/3398)
 - Refactored all try catch value of context for ErrorOrchestrator service. [#3432](https://github.com/wazuh/wazuh-kibana-app/issues/3432)
 - Refactored all try catch strategy on Controller/Groups section [#3415](https://github.com/wazuh/wazuh-kibana-app/issues/3415)
+- Refactored as module tabs and buttons are rendered [#3494](https://github.com/wazuh/wazuh-kibana-app/pull/3494)
 
 ### Fixed
 

public/components/agents/fim/main.tsx

@@ -4,13 +4,14 @@ import '../../common/modules/module.scss';
 import { connect } from 'react-redux';
 import { PromptNoActiveAgent, PromptNoSelectedAgent } from '../prompts';
 import { compose } from 'redux';
-import { withGuard, withUserAuthorizationPrompt } from '../../common/hocs';
+import { withAgentSupportModule, withGuard, withUserAuthorizationPrompt } from '../../common/hocs';
 
 const mapStateToProps = (state) => ({
   currentAgentData: state.appStateReducers.currentAgentData,
 });
 
 export const MainFim = compose(
+  withAgentSupportModule,
   connect(mapStateToProps),
   withGuard(
     (props) => !(props.currentAgentData && props.currentAgentData.id && props.agent),

public/components/agents/prompts/index.ts

@@ -9,8 +9,9 @@
  *
  * Find more information about this on the LICENSE file.
  */
-export { PromptAgentNoSupportModule } from './prompt-agent-no-support-module';
-export { PromptNoActiveAgent, PromptNoActiveAgentWithoutSelect } from './prompt-no-active-agent';
-export { PromptNoSelectedAgent } from './prompt-no-selected-agent';
-export { PromptSelectAgent } from './prompt-select-agent';
-export { PromptAgentFeatureVersion } from './prompt-agent-feature-version';
+export * from './prompt-agent-no-support-module';
+export * from './prompt-no-active-agent';
+export * from './prompt-no-selected-agent';
+export * from './prompt-select-agent';
+export * from './prompt-agent-feature-version';
+export * from './prompt_module_not_for_agent';

public/components/agents/prompts/prompt_module_not_for_agent.tsx

@@ -0,0 +1,52 @@
+/*
+ * Wazuh app - Component for the module generate reports
+ * 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 { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import { updateCurrentAgentData } from '../../../redux/actions/appStateActions';
+import { useFilterManager } from '../../common/hooks';
+
+type PromptSelectAgentProps = {
+  body?: string;
+  title: string;
+  agentSelectionProps: {
+    setAgent: (agent: boolean) => void
+  }
+};
+
+export const PromptModuleNotForAgent = ({ body, title, ...agentSelectionProps }: PromptSelectAgentProps) => {
+  const dispatch = useDispatch();
+  const filterManager = useFilterManager();
+
+  const unpinAgent = async () => {
+    dispatch(updateCurrentAgentData({}));
+    await agentSelectionProps.setAgent(false);
+    const filters = filterManager.filters.filter(x => {
+      return x.meta.key !== 'agent.id';
+    });
+    filterManager.setFilters(filters);
+  };
+
+  return (
+    <EuiEmptyPrompt
+      iconType="watchesApp"
+      title={<h2>{title}</h2>}
+      body={body && <p>{body}</p>}
+      actions={
+        <EuiButton color="primary" fill onClick={unpinAgent}>
+          Unpin agent
+        </EuiButton>
+      }
+    />
+  );
+};

public/components/agents/sca/main.tsx

@@ -15,13 +15,14 @@ import { Inventory } from './index';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { PromptSelectAgent, PromptNoSelectedAgent } from '../prompts';
-import { withGuard, withUserAuthorizationPrompt } from '../../common/hocs';
+import { withGuard, withUserAuthorizationPrompt, withAgentSupportModule } from '../../common/hocs';
 
 const mapStateToProps = (state) => ({
   currentAgentData: state.appStateReducers.currentAgentData,
 });
 
 export const MainSca = compose(
+  withAgentSupportModule,
   withUserAuthorizationPrompt([
     [
       {action: 'agent:read', resource: 'agent:id:*'},

public/components/agents/vuls/main.tsx

@@ -4,13 +4,14 @@ import '../../common/modules/module.scss';
 import { connect } from 'react-redux';
 import { PromptNoSelectedAgent, PromptNoActiveAgent } from '../prompts';
 import { compose } from 'redux';
-import { withGuard, withUserAuthorizationPrompt } from '../../common/hocs';
+import { withGuard, withUserAuthorizationPrompt, withAgentSupportModule } from '../../common/hocs';
 
 const mapStateToProps = (state) => ({
   currentAgentData: state.appStateReducers.currentAgentData,
 });
 
 export const MainVuls = compose(
+  withAgentSupportModule,
   connect(mapStateToProps),
   withGuard(
     (props) => !((props.currentAgentData && props.currentAgentData.id) && props.agent),

public/components/common/hocs/index.ts

@@ -21,3 +21,4 @@ export * from './withButtonOpenOnClick';
 export * from './withAgentSupportModule';
 export * from './withUserLogged';
 export * from './error-boundary/with-error-boundary';
+export * from './with_module_tab_loader';

public/components/common/hocs/withAgentSupportModule.tsx

@@ -12,9 +12,17 @@
 import { PromptAgentNoSupportModule } from '../../agents/prompts';
 import { withGuard } from '../../common/hocs';
 import { hasAgentSupportModule } from '../../../react-services/wz-agents';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
 
-export const withAgentSupportModule = WrappedComponent =>
+const mapStateToProps = (state) => ({
+  agent: state.appStateReducers.currentAgentData,
+});
+
+export const withAgentSupportModule = WrappedComponent => compose(
+  connect(mapStateToProps),
   withGuard(
-    ({agent, component}) => Object.keys(agent).length && !hasAgentSupportModule(agent, component),
+    ({agent, moduleID}) => Object.keys(agent).length && !hasAgentSupportModule(agent, moduleID),
     PromptAgentNoSupportModule
-  )(WrappedComponent)
+  )
+)(WrappedComponent)

public/components/common/hocs/with_module_not_for_agent.tsx

@@ -0,0 +1,29 @@
+/*
+ * Wazuh app - React HOC to show a prompt when a module is not available for agents and let to unpin the agent
+ * 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 { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withGuard } from './withGuard';
+import { PromptModuleNotForAgent } from '../../agents/prompts';
+
+const mapStateToProps = (state) => ({
+  agent: state.appStateReducers.currentAgentData,
+});
+
+export const withModuleNotForAgent = WrappedComponent => compose(
+  connect(mapStateToProps),
+  withGuard(
+    ({agent}) => agent?.id,
+    (props) => <PromptModuleNotForAgent title='Module not avaliable for agents' body='Remove the pinned agent.' {...props}/>
+  )
+)(WrappedComponent);

public/components/common/hocs/with_module_tab_loader.tsx

@@ -0,0 +1,42 @@
+/*
+ * Wazuh app - React HOC to show a loader used for Dashboard adn Events module tabs
+ * 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, { useEffect, useState } from 'react';
+import { EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
+import { useRootScope } from '../hooks';
+
+export const withModuleTabLoader = WrappedComponent => props => {
+  const $rootScope = useRootScope();
+  const [showTab, setShowTab] = useState();
+  useEffect(() => {
+    if($rootScope){
+      $rootScope.loadingDashboard = true;
+      $rootScope.$applyAsync();
+      setTimeout(() => {
+        setShowTab(true);
+      }, 100);
+      return () => {
+        $rootScope.loadingDashboard = false;
+        $rootScope.$applyAsync();
+      }
+    }
+  },[$rootScope]);
+
+  return showTab ? <WrappedComponent {...props}/> : (
+    <>
+      <EuiSpacer size='xl' />
+      <div style={{ margin: '-8px auto', width: 32 }}>
+        <EuiLoadingSpinner size="xl" />
+      </div>
+    </>
+  )
+}

public/components/common/hooks/useRootScope.ts

@@ -9,14 +9,14 @@
  *
  * Find more information about this on the LICENSE file.
  */
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { getAngularModule } from '../../../kibana-services';
 
 export function useRootScope(){
-  const refRootScope = useRef();
+  const [refRootScope,setRefRootScope] = useState();
   useEffect(() => {
     const app = getAngularModule();
-    refRootScope.current = app.$injector.get('$rootScope');
+    setRefRootScope(app.$injector.get('$rootScope'));
   },[]);
-  return refRootScope.current;
+  return refRootScope;
 };

public/components/common/modules/buttons/generate_report.tsx

@@ -0,0 +1,63 @@
+/*
+ * Wazuh app - Component for the module generate reports
+ * 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 { useAsyncAction } from '../../hooks';
+import { getUiSettings } from '../../../../kibana-services';
+import { ReportingService } from '../../../../react-services';
+import $ from 'jquery';
+import { WzButton } from '../../../common/buttons';
+
+
+export const ButtonModuleGenerateReport = ({agent, moduleID, disabledReport}) => {
+  const action = useAsyncAction(async () => {
+    const reportingService = new ReportingService();
+    const isDarkModeTheme = getUiSettings().get('theme:darkMode');
+    if (isDarkModeTheme) {
+
+      //Patch to fix white text in dark-mode pdf reports
+      const defaultTextColor = '#DFE5EF';
+
+      //Patch to fix dark backgrounds in visualizations dark-mode pdf reports
+      const $labels = $('.euiButtonEmpty__text, .echLegendItem');
+      const $vizBackground = $('.echChartBackground');
+      const defaultVizBackground = $vizBackground.css('background-color');
+
+      try {
+        $labels.css('color', 'black');
+        $vizBackground.css('background-color', 'transparent');
+        await reportingService.startVis2Png(moduleID, agent?.id || false)
+        $vizBackground.css('background-color', defaultVizBackground);
+        $labels.css('color', defaultTextColor);
+      } catch (e) {
+        $labels.css('color', defaultTextColor);
+        $vizBackground.css('background-color', defaultVizBackground);
+      }
+    } else {
+      await reportingService.startVis2Png(moduleID, agent?.id || false)
+    }
+  });
+
+  return (
+    <WzButton
+      buttonType='empty'
+      iconType='document'
+      isLoading={action.running}
+      onClick={action.run}
+      isDisabled={disabledReport}
+      tooltip={disabledReport ? {position: 'top', content: 'No results match for this search criteria.'} : undefined}
+    >
+      Generate report
+    </WzButton>
+  )
+}
+

public/components/common/modules/buttons/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Wazuh app - Module buttons components
+ * 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.
+ */
+
+export * from './generate_report';

public/components/common/modules/dashboard.tsx

@@ -13,8 +13,14 @@
 import { Component } from 'react';
 import { ModulesHelper } from './modules-helper'
 import { getAngularModule } from '../../../kibana-services';
+import { withAgentSupportModule, withModuleTabLoader } from '../hocs';
+import { compose } from 'redux';
+import React from 'react';
 
-export class Dashboard extends Component {
+export const Dashboard = compose(
+  withAgentSupportModule,
+  withModuleTabLoader
+)(class Dashboard extends Component {
   _isMount = false;
   constructor(props) {
     super(props);
@@ -43,6 +49,7 @@ export class Dashboard extends Component {
   }
 
   render() {
-    return false;
+    return null;
   }
-}
+})
+

public/components/common/modules/events.tsx

@@ -20,8 +20,13 @@ import { PatternHandler } from '../../../react-services/pattern-handler';
 
 import { enhanceDiscoverEventsCell } from './events-enhance-discover-fields';
 import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public';
+import { withAgentSupportModule, withModuleTabLoader } from '../hocs';
+import { compose } from 'redux';
 
-export class Events extends Component {
+export const Events = compose(
+  withAgentSupportModule,
+  withModuleTabLoader
+)(class Events extends Component {
   intervalCheckExistsDiscoverTableTime: number = 200;
   isMount: boolean;
   state: {
@@ -278,4 +283,4 @@ export class Events extends Component {
       </Fragment>
     )
   }
-}
+})

public/components/common/modules/index.ts

@@ -10,8 +10,6 @@
  * Find more information about this on the LICENSE file.
  */
 
-export { Events } from './events';
-export { Dashboard } from './dashboard';
-export { Loader } from './loader';
-export { Settings } from './settings';
-export { ModulesHelper } from './modules-helper.js';
+export * from './dashboard';
+export * from './events';
+export * from './modules-helper.js';