Remove overview AngularJS controllers

CHANGELOG.md

@@ -30,6 +30,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - 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)
+- Move AngularJS controller for overview to ReactJS component [#6594](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6594)
 - 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 some branding references across the application. [#6155](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6155)

plugins/main/public/app.js

@@ -36,7 +36,6 @@ import 'angular-material/angular-material';
 import './setup';
 
 //App imports
-import './kibana-integrations';
 import './services';
 import './controllers';
 import './factories';

plugins/main/public/components/common/welcome/welcome.scss

@@ -45,7 +45,7 @@ span.statWithLink:hover {
   text-decoration: underline;
 }
 
-[name="OverviewWelcome"] .flex-redirect-app-links {
+.wz-welcome-page .flex-redirect-app-links {
   display: flex;
   flex-grow: 1;
-}
+}

plugins/main/public/components/overview/overview.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react';
+import {
+  getAngularModule,
+  getDataPlugin,
+  getUiSettings,
+} from '../../kibana-services';
+import { Stats } from '../../controllers/overview/components/stats';
+import { AppState, WzRequest } from '../../react-services';
+import { OverviewWelcome } from '../common/welcome/overview-welcome';
+import { MainModule } from '../common/modules/main';
+import { UI_LOGGER_LEVELS } from '../../../common/constants';
+import { UI_ERROR_SEVERITIES } from '../../react-services/error-orchestrator/types';
+import { getErrorOrchestrator } from '../../react-services/common-services';
+import { WzCurrentOverviewSectionWrapper } from '../common/modules/overview-current-section-wrapper';
+import { createHashHistory } from 'history';
+import {
+  connectToQueryState,
+  opensearchFilters,
+  syncQueryStateWithUrl,
+} from '../../../../../src/plugins/data/public';
+import { once } from 'lodash';
+import {
+  createOsdUrlStateStorage,
+  createStateContainer,
+  syncState,
+} from '../../../../../src/plugins/opensearch_dashboards_utils/public';
+
+export const Overview: React.FC = () => {
+  const [agentsCounts, setAgentsCounts] = useState<object>({});
+  const [tabActive, setTabActive] = useState<string>('welcome');
+  const [tabViewActive, setTabViewActive] = useState<string>('panels');
+  const $location = getAngularModule().$injector.get('$location');
+  const $rootScope = getAngularModule().$injector.get('$rootScope');
+
+  useEffect(() => {
+    const tab = $location.search().tab;
+    const tabView = $location.search().tabView;
+    setTabActive(tab || 'welcome');
+    setTabViewActive(tabView || 'panels');
+    if (tab === 'welcome' || tab === undefined) {
+      getSummary();
+    }
+
+    // This is the code to sync the state of the URL with the state of the app
+    const data = getDataPlugin();
+    const config = getUiSettings();
+    const getHistory = once(() => createHashHistory());
+    const osdUrlStateStorage = createOsdUrlStateStorage({
+      useHash: config.get('state:storeInSessionStorage'),
+      history: getHistory(),
+    });
+
+    const appStateFromUrl = osdUrlStateStorage.get('_a') as AppState;
+    let initialAppState = {
+      ...data.query.queryString.getDefaultQuery(),
+      ...appStateFromUrl,
+    };
+    let previousAppState: AppState;
+    const appStateContainer = createStateContainer<AppState>(initialAppState);
+    const appStateContainerModified = {
+      ...appStateContainer,
+      set: (value: AppState | null) => {
+        if (value) {
+          previousAppState = appStateContainer.getState();
+          appStateContainer.set(value);
+        }
+      },
+    };
+
+    const replaceUrlAppState = async (newPartial: AppState = {}) => {
+      const state = { ...appStateContainer.getState(), ...newPartial };
+      await osdUrlStateStorage.set('_a', state, { replace: true });
+    };
+
+    const { start, stop } = syncState({
+      storageKey: '_a',
+      stateContainer: appStateContainerModified,
+      stateStorage: osdUrlStateStorage,
+    });
+
+    const stopSyncingQueryAppStateWithStateContainer = connectToQueryState(
+      data.query,
+      appStateContainer,
+      {
+        filters: opensearchFilters.FilterStateStore.APP_STATE,
+        query: true,
+      },
+    );
+
+    const { stop: stopSyncingGlobalStateWithUrl } = syncQueryStateWithUrl(
+      data.query,
+      osdUrlStateStorage,
+    );
+
+    replaceUrlAppState().then(() => start());
+
+    return () => {
+      stop();
+      stopSyncingGlobalStateWithUrl();
+      stopSyncingQueryAppStateWithStateContainer();
+    };
+  }, []);
+
+  /**
+   * This fetch de agents summary
+   */
+  const getSummary = async () => {
+    try {
+      const {
+        data: {
+          data: { connection: data },
+        },
+      } = await WzRequest.apiReq('GET', '/agents/summary/status', {});
+      setAgentsCounts(data);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  };
+
+  function switchTab(newTab: any, force: any) {
+    try {
+      if (tabActive === newTab && !force) {
+        return;
+      }
+      setTabActive(newTab);
+      setTabViewActive($location.search().tabView || 'panels');
+    } catch (error) {
+      const options = {
+        context: `${Overview.name}.switchTab`,
+        level: UI_LOGGER_LEVELS.ERROR,
+        severity: UI_ERROR_SEVERITIES.BUSINESS,
+        error: {
+          error: error,
+          message: error.message || error,
+          title: error.name || error,
+        },
+      };
+
+      getErrorOrchestrator().handleError(options);
+    }
+  }
+
+  const switchSubTab = (subTab: string) => {
+    try {
+      if (tabViewActive !== subTab) {
+        setTabViewActive(subTab);
+      }
+    } catch (error) {
+      const options = {
+        context: `${Overview.name}.switchSubtab`,
+        level: UI_LOGGER_LEVELS.ERROR,
+        severity: UI_ERROR_SEVERITIES.BUSINESS,
+        error: {
+          error: error,
+          message: error.message || error,
+          title: error.name || error,
+        },
+      };
+
+      getErrorOrchestrator().handleError(options);
+    }
+  };
+  // TODO: Create a service or add it in the dataSource the management of the pinned agent
+  const updateSelectedAgents = (agentList: Array<any>) => {
+    try {
+      // This is a workaround to sync the pinned agent with the URL
+      setTimeout(() => {
+        $location.search('agentId', agentList?.[0] || null);
+        $rootScope.$applyAsync();
+      }, 1);
+    } catch (error) {
+      const options = {
+        context: `${Overview.name}.updateSelectedAgents`,
+        level: UI_LOGGER_LEVELS.ERROR,
+        severity: UI_ERROR_SEVERITIES.BUSINESS,
+        error: {
+          error: error,
+          message: error.message || error,
+          title: error.name || error,
+        },
+      };
+
+      getErrorOrchestrator().handleError(options);
+    }
+  };
+
+  return (
+    <>
+      {tabActive && tabActive !== 'welcome' && (
+        <>
+          <MainModule
+            section={tabActive}
+            agentsSelectionProps={{
+              tab: tabActive,
+              subtab: tabViewActive,
+              setAgent: (agentList: Array<any>) =>
+                updateSelectedAgents(agentList),
+            }}
+            switchSubTab={subTab => switchSubTab(subTab)}
+          />
+          <WzCurrentOverviewSectionWrapper
+            switchTab={(tab, force) => switchTab(tab, force)}
+            currentTab={tabActive}
+          />
+        </>
+      )}
+      {tabActive === 'welcome' && (
+        <>
+          <Stats {...agentsCounts} />
+          <OverviewWelcome {...agentsCounts} />
+        </>
+      )}
+    </>
+  );
+};

plugins/main/public/controllers/agent/index.js

@@ -13,6 +13,7 @@ import { RegisterAgent } from '../../components/endpoints-summary/register-agent
 import { MainModule } from '../../components/common/modules/main';
 import { getAngularModule } from '../../kibana-services';
 import { MainEndpointsSummary } from '../../components/endpoints-summary';
+import { Overview } from '../../components/overview/overview';
 import { AgentView } from '../../components/endpoints-summary/agent';
 
 const app = getAngularModule();
@@ -21,4 +22,5 @@ app
   .value('RegisterAgent', RegisterAgent)
   .value('AgentView', AgentView)
   .value('MainModule', MainModule)
-  .value('MainEndpointsSummary', MainEndpointsSummary);
+  .value('MainEndpointsSummary', MainEndpointsSummary)
+  .value('Overview', Overview);

plugins/main/public/controllers/index.ts

@@ -10,7 +10,6 @@
  * Find more information about this on the LICENSE file.
  */
 
-import './overview';
 import './management';
 import './agent';
 import './security';