[Refactor] Health check

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to the Wazuh app project will be documented in this file.
 
+## Wazuh v4.2.0 - Kibana 7.10.2 , 7.11.2 - Revision 4202
+
+### Changed
+- Refactored the Health check component [#2682](https://github.com/wazuh/wazuh-kibana-app/issues/2682)
+
 ## Wazuh v4.2.0 - Kibana 7.10.2 , 7.11.2 - Revision 4201
 
 ### Added

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';
 const app = getAngularModule();
@@ -81,10 +81,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/hooks/index.ts

@@ -31,3 +31,5 @@ export { useRefreshAngularDiscover } from './useResfreshAngularDiscover';
 export { useAllowedAgents } from './useAllowedAgents';
 
 export { useApiRequest } from './useApiRequest';
+
+export * from './use-app-config';

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/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');
+    });
+  });
+});

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

@@ -0,0 +1,132 @@
+/*
+ * Wazuh app - Check Result Component
+ *
+ * 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 {
+  EuiButtonIcon,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiIcon,
+  EuiLoadingSpinner,
+  EuiToolTip
+} from '@elastic/eui';
+
+type Result = 'loading' | 'ready' | 'error' | 'error_retry' | 'disabled' | 'waiting';
+
+export function CheckResult(props) {
+  const [result, setResult] = useState<Result>('waiting');
+  const [isCheckStarted, setIsCheckStarted] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (props.check && !props.isLoading && awaitForIsReady()){
+      initCheck();
+    } else if (props.check === false && !props.checksReady[props.name]) {
+      setResult('disabled');
+      setAsReady();
+    }
+  }, [props.check, props.isLoading, props.checksReady]);
+
+  const setAsReady = () => {
+    props.handleCheckReady(props.name, true);
+  };
+
+  const handleErrors = (errors, parsed?) => {
+    props.handleErrors(props.name, errors, parsed);
+  };
+
+  /**
+   * validate if the current check is not started and if the dependentes checks are ready
+   */
+  const awaitForIsReady = () => {
+    return !isCheckStarted && (props.awaitFor.length === 0 || props.awaitFor.every((check) => {
+      return props.checksReady[check];
+    }))
+  }
+
+  const initCheck = async () => {
+    setIsCheckStarted(true);
+    setResult('loading');
+    props.cleanErrors(props.name);
+    try {
+      const { errors } = await props.validationService();
+      if (errors.length) {
+        handleErrors(errors);
+        setResult('error');
+        props.canRetry ? setResult('error_retry') : setResult('error');
+      } else {
+        setResult('ready');
+        setAsReady();
+      }      
+    } catch (error) {
+      handleErrors([error], true);
+      props.canRetry ? setResult('error_retry') : setResult('error');
+    }
+  };
+
+  const renderResult = () => {
+    switch (result) {
+      case 'loading':
+        return (
+          <span>
+            <EuiLoadingSpinner size="m" /> Checking...
+          </span>
+        );
+      case 'disabled':
+        return <span>Disabled</span>;
+      case 'ready':
+        return (
+          <span>
+            <EuiIcon type="check" color="secondary"></EuiIcon> Ready
+          </span>
+        );
+      case 'error':
+        return (
+          <span>
+            <EuiIcon type="alert" color="danger"></EuiIcon> Error
+          </span>
+        );
+      case 'error_retry':
+        return (
+          <span>
+            <EuiIcon type="alert" color="danger"></EuiIcon> Error
+            <EuiToolTip
+              position='top'
+              content='Retry'
+            >
+              <EuiButtonIcon
+                display="base"
+                iconType="refresh"
+                iconSize="m"
+                onClick={initCheck}
+                size="m"
+                aria-label="Next"
+              />
+            </EuiToolTip>
+          </span>
+        );
+      case 'waiting':
+        return (
+          <span>
+            Waiting...
+          </span>
+        );
+    }
+  };
+
+  return (
+    <>
+      <EuiDescriptionListTitle>{props.title}</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>{renderResult()}</EuiDescriptionListDescription>
+    </>
+  );
+}