Feature/new buttom to check api again in health check (#3109)

* New bottom to check api * New buttom to reconnect with API in Health-Check * Update get-agents-filters-values.js * Update saved-objects.js * Update saved-objects.js * Update wazuh-api.ts * Update agents-preview.js * Added changelog
wazuh · Apr 5, 2021 · db78c0a · db78c0a
1 parent 5454a8b
commit db78c0a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added page size options in Security events, explore agents table [#2925](https://github.com/wazuh/wazuh-kibana-app/pull/2925)
 - Add a message to restart cluster or manager after import a file in Rules, Decoders or CDB Lists [#3051](https://github.com/wazuh/wazuh-kibana-app/pull/3051)
 - Add `logtest` PUT example on API Console [#3061](https://github.com/wazuh/wazuh-kibana-app/pull/3061)
+- New buttom to check api again in health check [#3109](https://github.com/wazuh/wazuh-kibana-app/pull/3109)
 
 ### Changed
 

diff --git a/public/components/health-check/health-check.tsx b/public/components/health-check/health-check.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { EuiLoadingSpinner, EuiDescriptionList, EuiIcon, EuiCallOut, EuiSpacer, EuiButton } from '@elastic/eui';
+import { EuiLoadingSpinner, EuiDescriptionList, EuiIcon, EuiCallOut, EuiButtonIcon, EuiSpacer, EuiButton, EuiToolTip } from '@elastic/eui';
 import { AppState } from '../../react-services/app-state';
 import { PatternHandler } from '../../react-services/pattern-handler';
 import { getAngularModule, getToasts, getHttp } from '../../kibana-services';
@@ -155,6 +155,26 @@ export class HealthCheck extends Component {
     }
   }
 
+  /**
+   * This attempts to reconnect with API
+   */
+  reconnectWithAPI(){
+    let results = this.state.results;
+    results[0].description = <span><EuiLoadingSpinner size="m" /> Checking...</span>;
+    results[1].description = <span><EuiLoadingSpinner size="m" /> Checking...</span>;
+    getToasts().toasts$._value.forEach(toast => {
+      if(toast.text.includes('3000'))
+        getToasts().remove(toast.id);
+    });
+    let errors = this.state.errors;
+    this.state.errors.forEach(error => {
+      if(error.includes('API'))
+        errors.pop(error);
+    });
+    this.setState({results, errors});
+    this.checkApiConnection();
+  }
+
   /**
    * This attempts to connect with API
    */
@@ -207,8 +227,23 @@ export class HealthCheck extends Component {
           this.setState({ results, errors });
         } else if (data.data.error || data.data.data.apiIsDown) {
           errors.push(data.data.data.apiIsDown ? 'Wazuh API is down.' : `Error connecting to the API.${data.data.error && data.data.error.message ? ` ${data.data.error.message}` : ''}`);
-          results[i].description = <span><EuiIcon type="alert" color="danger" ></EuiIcon> Error</span>;
-          results[i + 1].description = <span><EuiIcon type="alert" color="danger" ></EuiIcon> Error</span>;
+          results[i].description =    <div> <span><EuiIcon type="alert" color="danger" ></EuiIcon> Error</span> 
+          { <EuiToolTip
+                  position='top'
+                  content='Try to reconnect to the API'
+          >
+             <EuiButtonIcon
+                display="base"
+                iconType="refresh"
+                isLoading
+                iconSize="l"
+                onClick={() => this.reconnectWithAPI()}
+                size="m"
+                aria-label="Next"
+              />
+          </EuiToolTip> }
+          </div>;
+          results[i + 1].description = <span><EuiIcon type="alert" color="danger" ></EuiIcon> Error</span> 
           this.setState({ results, errors });
         } else {
           results[i].description = <span><EuiIcon type="check" color="secondary" ></EuiIcon> Ready</span>;
@@ -242,8 +277,20 @@ export class HealthCheck extends Component {
               results[i].description = <span><EuiIcon type="alert" color="danger" ></EuiIcon> Error</span>;
               this.setState({ results, errors });
             } else {
-              results[i].description = <span><EuiIcon type="check" color="secondary" ></EuiIcon> Ready</span>;
-              this.setState({ results, errors });
+               let permissionToGoToTheApp = true;
+               if(!results[i].description.props.children[1].includes('Checking')){
+                 permissionToGoToTheApp = false;
+               }
+               results[i].description = <span><EuiIcon type="check" color="secondary" ></EuiIcon> Ready</span>;
+               for (let element of results){
+                 if(results[i].description.props.children[1].includes('Error')){
+                   permissionToGoToTheApp = false;
+                 }
+               }
+
+               this.setState({ results, errors });
+               if(permissionToGoToTheApp)
+                 this.goApp();
             }
           }
         }
@@ -403,7 +450,9 @@ export class HealthCheck extends Component {
     const logo_url = getHttp().basePath.prepend('/plugins/wazuh/assets/icon_blue.svg');
     return (
       <div className="health-check">
-        <EuiLoadingSpinner className="health-check-loader" />
+        {!this.state.errors && (
+          <EuiLoadingSpinner className="health-check-loader" />
+        )}
         <img src={logo_url} className="health-check-logo" alt=""></img>
         <div className="margin-top-30">
           <EuiDescriptionList

diff --git a/server/controllers/wazuh-api.ts b/server/controllers/wazuh-api.ts
@@ -321,7 +321,7 @@ export class WazuhApiCtrl {
         );
       }catch(error){
         return ErrorResponse(
-          `ERROR3099 - ${error.response.data.detail || 'Wazuh not ready yet'}`,
+          `ERROR3099 - ${error.response?.data?.detail || 'Wazuh not ready yet'}`,
           3099,
           500,
           response