Remove management AngularJS controllers (#6555)

* feat: remove AngularJS controller of Management - Remove AngularJS controller of Management - Remove deprecated listeners - Remove deprecated methods - Remove logtestProps from some components that were passed from the AngularJS controller - Move some methods to ReactJS - Create router to manage the view to display - Change button to render the Ruleset Test or Decoders Test to use a button that opens a flyout. - Remove the flyout components in the Logtest component * changelog: add entry * feat(logtest): remove showClose prop in favor to onFlyout * remove(logtest): unused components * feat: add comment * fix(logtest): minor fixes --------- Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>
wazuh · Apr 26, 2024 · 98c64df · 98c64df
1 parent a9ff851
commit 98c64df
Show file tree

Hide file tree

Showing 11 changed files with 236 additions and 725 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Move AngularJS controller and view for manage groups to ReactJS [#6543](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6543)
 - Move AngularJS controllers and views of Tools and Dev Tools to ReactJS [#6544](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6544)
 - Move the AngularJS controller and template of blank screen to ReactJS component [#6538](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6538)
+- Move AngularJS controller for management to ReactJS component [#6555](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6555)
 - Moved the registry data to in-memory cache [#6481](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6481)
 - Enhance the validation for `enrollment.dns` on App Settings application [#6573](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6573)
 - Remove AngularJS controller for manage groups [#6543](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6543)

diff --git a/plugins/main/public/controllers/management/components/management/common/file-editor.tsx b/plugins/main/public/controllers/management/components/management/common/file-editor.tsx
@@ -48,6 +48,8 @@ import _ from 'lodash';
 import { UI_ERROR_SEVERITIES } from '../../../../../react-services/error-orchestrator/types';
 import { UI_LOGGER_LEVELS } from '../../../../../../common/constants';
 import { getErrorOrchestrator } from '../../../../../react-services/common-services';
+import { WzButtonPermissionsOpenFlyout } from '../../../../../components/common/buttons/flyout';
+import { Logtest } from '../../../../../directives/wz-logtest/components/logtest';
 
 class WzFileEditor extends Component {
   _isMounted = false;
@@ -236,22 +238,23 @@ class WzFileEditor extends Component {
 
     const xmlError = validateXML(content);
 
-    const onClickOpenLogtest = () => {
-      this.props.logtestProps.openCloseFlyout();
-    };
-
     const buildLogtestButton = () => {
       return (
-        <WzButtonPermissions
-          buttonType='empty'
-          permissions={[{ action: 'logtest:run', resource: `*:*:*` }]}
-          color='primary'
-          iconType='documentEdit'
-          style={{ margin: '0px 8px', cursor: 'pointer' }}
-          onClick={onClickOpenLogtest}
+        <WzButtonPermissionsOpenFlyout
+          flyoutTitle={isRules}
+          flyoutBody={({ onClose, onUpdateCanClose }) => (
+            <Logtest onFlyout={true}></Logtest>
+          )}
+          buttonProps={{
+            buttonType: 'empty',
+            permissions: [{ action: 'logtest:run', resource: `*:*:*` }],
+            color: 'primary',
+            iconType: 'documentEdit',
+            style: { margin: '0px 8px', cursor: 'pointer' },
+          }}
         >
           {isRules}
-        </WzButtonPermissions>
+        </WzButtonPermissionsOpenFlyout>
       );
     };
 

diff --git a/.../main/public/controllers/management/components/management/configuration/utils/wz-fetch.js b/.../main/public/controllers/management/components/management/configuration/utils/wz-fetch.js
@@ -347,11 +347,9 @@ export const restartCluster = async () => {
       const str = validationError.detail;
       throw new Error(str);
     }
-    // this.performClusterRestart(); // TODO: convert AngularJS to React
     await WzRequest.apiReq('PUT', `/cluster/restart`, {
       delay: 15000,
     });
-    // this.$rootScope.$broadcast('removeRestarting', {}); TODO: isRestarting: false?
     return {
       data: {
         data: 'Restarting cluster',

diff --git a/plugins/main/public/controllers/management/components/management/decoders/main-decoders.tsx b/plugins/main/public/controllers/management/components/management/decoders/main-decoders.tsx
@@ -16,38 +16,42 @@ import WzDecodersOverview from './views/decoders-overview';
 import WzFileEditor from '../common/file-editor';
 import { SECTION_DECODERS_SECTION } from '../common/constants';
 
-export default function WzDecoder({ logtestProps }) {
-
+export default function WzDecoder() {
   const [fileContent, setFileContent] = useState(false);
   const [addingFile, setAddingFile] = useState(false);
   const [showingFiles, setShowingFiles] = useState(false);
 
   const cleanEditState = () => {
     setFileContent(false);
     setAddingFile(false);
-  }
+  };
 
   return (
     <WzReduxProvider>
-      {
-        ((fileContent || addingFile) && (
-          <WzFileEditor
-            section={SECTION_DECODERS_SECTION}
-            fileContent={fileContent}
-            addingFile={addingFile}
-            logtestProps={logtestProps}
-            updateFileContent={(fileContent) => { setFileContent(fileContent) }}
-            cleanEditState={() => cleanEditState()}
-          />
-        )) || (
-          <WzDecodersOverview
-            updateFileContent={(fileContent) => { setFileContent(fileContent) }}
-            updateAddingFile={(addingFile) => { setAddingFile(addingFile) }}
-            setShowingFiles={() => { setShowingFiles(!showingFiles) }}
-            showingFiles={showingFiles}
-          />
-        )
-      }
+      {((fileContent || addingFile) && (
+        <WzFileEditor
+          section={SECTION_DECODERS_SECTION}
+          fileContent={fileContent}
+          addingFile={addingFile}
+          updateFileContent={fileContent => {
+            setFileContent(fileContent);
+          }}
+          cleanEditState={() => cleanEditState()}
+        />
+      )) || (
+        <WzDecodersOverview
+          updateFileContent={fileContent => {
+            setFileContent(fileContent);
+          }}
+          updateAddingFile={addingFile => {
+            setAddingFile(addingFile);
+          }}
+          setShowingFiles={() => {
+            setShowingFiles(!showingFiles);
+          }}
+          showingFiles={showingFiles}
+        />
+      )}
     </WzReduxProvider>
   );
 }
diff --git a/plugins/main/public/controllers/management/components/management/management-main.js b/plugins/main/public/controllers/management/components/management/management-main.js
@@ -27,13 +27,17 @@ import {
   SECTION_DECODERS_SECTION,
   SECTION_RULES_SECTION,
 } from './common/constants';
+import { getAngularModule } from '../../../../kibana-services';
+import {
+  withGuardAsync,
+  withReduxProvider,
+} from '../../../../components/common/hocs';
+import { compose } from 'redux';
 import { ClusterOverview } from './cluster/cluster-overview';
 
 class WzManagementMain extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
-    this.store = store;
   }
 
   render() {
@@ -47,20 +51,51 @@ class WzManagementMain extends Component {
           (section === 'statistics' && <WzStatistics />) ||
           (section === 'logs' && <WzLogs />) ||
           (section === 'configuration' && (
-            <WzConfiguration {...this.props.configurationProps} />
-          )) ||
-          (section === SECTION_DECODERS_SECTION && (
-            <WzDecoders logtestProps={this.props.logtestProps} />
-          )) ||
-          (section === SECTION_CDBLIST_SECTION && (
-            <WzCDBLists logtestProps={this.props.logtestProps} />
+            <WzConfiguration
+              agent={{
+                id: '000',
+              }}
+            />
           )) ||
+          (section === SECTION_DECODERS_SECTION && <WzDecoders />) ||
+          (section === SECTION_CDBLIST_SECTION && <WzCDBLists />) ||
           (['ruleset', SECTION_RULES_SECTION].includes(section) && (
-            <WzRuleset logtestProps={this.props.logtestProps} />
+            <WzRuleset />
           ))}
       </Fragment>
     );
   }
 }
 
-export default WzManagementMain;
+const availableViews = [
+  'groups',
+  'status',
+  'reporting',
+  'statistics',
+  'logs',
+  'configuration',
+  'decoders',
+  'lists',
+  'ruleset',
+  'rules',
+  'monitoring',
+];
+
+export const ManagementRouter = compose(
+  withReduxProvider,
+  withGuardAsync(
+    () => {
+      // This uses AngularJS to get the tab query parameter
+      const section = getAngularModule()
+        .$injector.get('$location')
+        .search().tab;
+      if (availableViews.includes(section)) {
+        return { ok: false, data: { section } };
+      }
+      return { ok: true, data: { section } };
+    },
+    () => null,
+  ),
+)(({ section }) => <WzManagementMain section={section} />);
+
+export default ManagementRouter;
diff --git a/plugins/main/public/controllers/management/components/management/ruleset/main-ruleset.tsx b/plugins/main/public/controllers/management/components/management/ruleset/main-ruleset.tsx
@@ -15,39 +15,42 @@ import WzRulesetOverview from './views/ruleset-overview';
 import WzFileEditor from '../common/file-editor';
 import { SECTION_RULES_SECTION } from '../common/constants';
 
-
-export default function WzRuleset({ logtestProps }) {
-
+export default function WzRuleset() {
   const [fileContent, setFileContent] = useState(false);
   const [addingFile, setAddingFile] = useState(false);
   const [showingFiles, setShowingFiles] = useState(false);
 
   const cleanEditState = () => {
     setFileContent(false);
     setAddingFile(false);
-  }
+  };
 
   return (
     <WzReduxProvider>
-      {
-        ((fileContent || addingFile) && (
-          <WzFileEditor
-            section={SECTION_RULES_SECTION}
-            fileContent={fileContent}
-            addingFile={addingFile}
-            logtestProps={logtestProps}
-            updateFileContent={(fileContent) => { setFileContent(fileContent) }}
-            cleanEditState={() => cleanEditState()}
-          />
-        )) || (
-          <WzRulesetOverview
-            updateFileContent={(fileContent) => { setFileContent(fileContent) }}
-            updateAddingFile={(addingFile) => { setAddingFile(addingFile) }}
-            setShowingFiles={() => { setShowingFiles(!showingFiles) }}
-            showingFiles={showingFiles}
-          />
-        )
-      }
+      {((fileContent || addingFile) && (
+        <WzFileEditor
+          section={SECTION_RULES_SECTION}
+          fileContent={fileContent}
+          addingFile={addingFile}
+          updateFileContent={fileContent => {
+            setFileContent(fileContent);
+          }}
+          cleanEditState={() => cleanEditState()}
+        />
+      )) || (
+        <WzRulesetOverview
+          updateFileContent={fileContent => {
+            setFileContent(fileContent);
+          }}
+          updateAddingFile={addingFile => {
+            setAddingFile(addingFile);
+          }}
+          setShowingFiles={() => {
+            setShowingFiles(!showingFiles);
+          }}
+          showingFiles={showingFiles}
+        />
+      )}
     </WzReduxProvider>
   );
 }
diff --git a/plugins/main/public/controllers/management/index.js b/plugins/main/public/controllers/management/index.js
@@ -9,8 +9,6 @@
  *
  * Find more information about this on the LICENSE file.
  */
-
-import { ManagementController } from './management';
 import WzManagement from './components/management/management-provider';
 import WzManagementConfiguration from './components/management/configuration/configuration-main';
 import { getAngularModule } from '../../kibana-services';
@@ -21,6 +19,5 @@ WzManagement.displayName = 'WzManagement';
 WzManagementConfiguration.displayName = 'WzManagementConfiguration';
 
 app
-  .controller('managementController', ManagementController)
   .value('WzManagement', WzManagement)
   .value('WzManagementConfiguration', WzManagementConfiguration);