[Refactor] Health check (#3197)

* refactor(healthcheck): Adapt the refactorized health check component to last changes
  - Added monitoring and statistics index patterns checks
  - Added logic to retry the checks with a refresh button
    - Apply the retry to API connection check
  - Export react services in index file
  - Create appConfig in the Redux store

* feat(healtcheck): Replace health check initial state to waiting

* fet(healthcheck): Add can retry to healthcheck checks

* fix(menu): Fix error in toast from WzMenu and revome unnecessary return in PatternHandler

* fix(health-check): Fix create index pattern when change the setting in
Settings > Configuration and loop in health check

* fix(health-check): renamed files from appConfig Redux actions and reducer

* fix(frontend): Replace config singleton saving to Redux

* fix(health-check): Fix infinite loop rendering component when a check is disabled in the configuration

* fix(health-check): Rename health checks titles

* fix(health-check): Fix the tests for Health check

* refactor(health-check): Request changes, add max buckets check and some improvements
  - Request changes
  - Added the max buckets check when the component is mounted
  - Created the `useRootScope` hook
  - Improved the export in the HOCs and hooks index files
  - Removed the `lib` folder
  - Removed the `health-check` old component

CHANGELOG.md

@@ -15,6 +15,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 - Removed module titles [#3160](https://github.com/wazuh/wazuh-kibana-app/pull/3160)
 - Removed Sha1 field from registry key detail [#3189](https://github.com/wazuh/wazuh-kibana-app/pull/3189)
+- Refactored the Health check component [#3197](https://github.com/wazuh/wazuh-kibana-app/pull/3197)
 
 ### Fixed
 

public/app.js

@@ -53,7 +53,7 @@ import './factories';
 import { checkCurrentSecurityPlatform } from './controllers/management/components/management/configuration/utils/wz-fetch';
 import store from './redux/store';
 import { updateCurrentPlatform } from './redux/actions/appStateActions';
-import { WzAuthentication } from './react-services/wz-authentication';
+import { WzAuthentication, loadAppConfig } from './react-services';
 
 import { getAngularModule} from './kibana-services';
 import { addHelpMenuToAppChrome } from './utils';
@@ -83,10 +83,13 @@ app.run([
     // Set currentSecurity platform in Redux when app starts.
     checkCurrentSecurityPlatform().then((item) => {
       store.dispatch(updateCurrentPlatform(item))
-    }).catch(() => {})
+    }).catch(() => {});
 
     // Init the process of refreshing the user's token when app start.
     checkPluginVersion().finally(WzAuthentication.refresh);
+
+    // Load the app state
+    loadAppConfig();
   },
 ]);
 

public/components/common/hocs/index.ts

@@ -9,24 +9,14 @@
  *
  * Find more information about this on the LICENSE file.
  */
-export { withWindowSize } from './withWindowSize';
-
-export { withKibanaContext, withKibanaContextExtendsProps } from './withKibanaContext';
-
-export { withUserPermissions, withUserPermissionsRequirements, withUserPermissionsPrivate  } from './withUserPermissions';
-
-export { withUserRoles, withUserRolesRequirements, withUserRolesPrivate  } from './withUserRoles';
-
-export { withUserAuthorizationPrompt} from './withUserAuthorization';
-
-export { withGlobalBreadcrumb  } from './withGlobalBreadcrumb';
-
-export { withReduxProvider  } from './withReduxProvider';
-
-export { withGuard } from './withGuard';
-
-export { withButtonOpenOnClick } from './withButtonOpenOnClick';
-
-export { withAgentSupportModule } from './withAgentSupportModule';
-
-export { withUserLogged } from './withUserLogged';
+export * from './withWindowSize';
+export * from './withKibanaContext';
+export * from './withUserPermissions';
+export * from './withUserRoles';
+export * from './withUserAuthorization';
+export * from './withGlobalBreadcrumb';
+export * from './withReduxProvider';
+export * from './withGuard';
+export * from './withButtonOpenOnClick';
+export * from './withAgentSupportModule';
+export * from './withUserLogged';

public/components/common/hooks/index.ts

@@ -10,24 +10,16 @@
  * Find more information about this on the LICENSE file.
  */
 
-export { useFilterManager } from './use-filter-manager';
-
-export { useIndexPattern } from './use-index-pattern';
-
-export { useKbnLoadingIndicator } from './use-kbn-loading-indicator';
-
-export { useQuery } from './use-query';
-
-export { useTimeFilter } from './use-time-filter';
-
-export { useWindowSize } from './useWindowSize';
-
-export { useUserPermissions, useUserPermissionsRequirements, useUserPermissionsPrivate } from './useUserPermissions';
-
-export { useUserRoles, useUserRolesRequirements, useUserRolesPrivate } from './useUserRoles';
-
-export { useRefreshAngularDiscover } from './useResfreshAngularDiscover';
-
-export { useAllowedAgents } from './useAllowedAgents';
-
-export { useApiRequest } from './useApiRequest';
+export * from './use-filter-manager';
+export * from './use-index-pattern';
+export * from './use-kbn-loading-indicator';
+export * from './use-query';
+export * from './use-time-filter';
+export * from './useWindowSize';
+export * from './useUserPermissions';
+export * from './useUserRoles';
+export * from './useResfreshAngularDiscover';
+export * from './useAllowedAgents';
+export * from './useApiRequest';
+export * from './use-app-config';
+export * from './useRootScope';

public/components/common/hooks/use-app-config.ts

@@ -0,0 +1,19 @@
+/*
+ * Wazuh app - React hook for app configuration
+ * 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 { AppRootState } from '../../../redux/types';
+import { useSelector } from 'react-redux';
+
+export const useAppConfig = () => {
+  const appConfig = useSelector((state: AppRootState) => state.appConfig);
+  return appConfig;
+}

public/components/common/hooks/useRootScope.ts

@@ -0,0 +1,22 @@
+/*
+ * Wazuh app - React hook to get the AngularJS $rootScope
+ * 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 { useEffect, useRef } from 'react';
+import { getAngularModule } from '../../../kibana-services';
+
+export function useRootScope(){
+  const refRootScope = useRef();
+  useEffect(() => {
+    const app = getAngularModule();
+    refRootScope.current = app.$injector.get('$rootScope');
+  },[]);
+  return refRootScope.current;
+};

public/components/eui-loader.js

@@ -30,7 +30,7 @@ import {
 import { Tabs } from './common/tabs/tabs';
 import { MultipleAgentSelector } from './management/groups/multiple-agent-selector';
 import { NodeList } from './management/cluster/node-list';
-import { HealthCheck } from './health-check/health-check';
+import { HealthCheck } from './health-check';
 import { WzEmptyPromptNoPermissions } from './common/permissions/prompt';
 import { getAngularModule } from '../kibana-services';
 import { Logtest } from '../directives/wz-logtest/components/logtest';

public/components/health-check/components/__snapshots__/check-result.test.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Check result component should render a Check result screen 1`] = `
+<CheckResult
+  awaitFor={Array []}
+  canRetry={true}
+  check={true}
+  checksReady={Object {}}
+  cleanErrors={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          "test",
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  handleCheckReady={[MockFunction]}
+  handleErrors={[MockFunction]}
+  isLoading={false}
+  name="test"
+  title="test chest"
+  validationService={
+    [MockFunction] {
+      "calls": Array [
+        Array [],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": Object {
+            "errors": Array [],
+          },
+        },
+      ],
+    }
+  }
+>
+  <EuiDescriptionListTitle>
+    <dt
+      className="euiDescriptionList__title"
+    >
+      test chest
+    </dt>
+  </EuiDescriptionListTitle>
+  <EuiDescriptionListDescription>
+    <dd
+      className="euiDescriptionList__description"
+    >
+      <span>
+        <EuiLoadingSpinner
+          size="m"
+        >
+          <span
+            className="euiLoadingSpinner euiLoadingSpinner--medium"
+          />
+        </EuiLoadingSpinner>
+         Checking...
+      </span>
+    </dd>
+  </EuiDescriptionListDescription>
+</CheckResult>
+`;

public/components/health-check/components/check-result.test.tsx

@@ -0,0 +1,88 @@
+/*
+ * Wazuh app - Check Result Component - Test
+ *
+ * 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 { mount } from 'enzyme';
+import { CheckResult } from './check-result';
+
+describe('Check result component', () => {
+  const validationService = jest.fn();
+  const handleErrors = jest.fn();
+  const handleCheckReady = jest.fn();
+  const cleanErrors = jest.fn();
+
+  test('should render a Check result screen', () => {
+    validationService.mockImplementation(() => ({ errors: [] }));
+    const component = mount(
+      <CheckResult
+        name={'test'}
+        title={'Check Test'}
+        awaitFor={[]}
+        check={true}
+        validationService={validationService}
+        handleErrors={handleErrors}
+        isLoading={false}
+        handleCheckReady={handleCheckReady}
+        checksReady={{}}
+        cleanErrors={cleanErrors}
+        canRetry={true}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('should print ready', () => {
+    validationService.mockImplementation(() => ({ errors: [] }));
+    const component = mount(
+      <CheckResult
+        name={'test'}
+        title={'Check Test'}
+        awaitFor={[]}
+        check={true}
+        validationService={validationService}
+        handleErrors={handleErrors}
+        isLoading={false}
+        handleCheckReady={handleCheckReady}
+        checksReady={{}}
+        cleanErrors={cleanErrors}
+        canRetry={true}
+      />
+    );
+    setImmediate(() => {
+      expect(component.find('EuiDescriptionListDescription').find('span').at(0).text().trim()).toBe('Ready');
+    });
+  });
+
+  test('should print error', () => {
+    validationService.mockImplementation(() => ({ errors: ['error'] }));
+    const component = mount(
+      <CheckResult
+        name={'test'}
+        title={'Check Test'}
+        awaitFor={[]}
+        check={true}
+        validationService={validationService}
+        handleErrors={handleErrors}
+        isLoading={false}
+        handleCheckReady={handleCheckReady}
+        checksReady={{}}
+        cleanErrors={cleanErrors}
+        canRetry={true}
+      />
+    );
+    setImmediate(() => {
+      expect(component.find('EuiDescriptionListDescription').find('span').at(0).text().trim()).toBe('Error');
+    });
+  });
+});