Remove AngularJS controller of blank screen (#6538)

* feat(blank-screen): remove AngularJS controller of blank screen view - Remove AngularJS controller of blank screen view - Remove usage of controller in the html template - Move logic to manage the error message to the BlankScreen component * changelog: add pull request * fix(blank-screen): replace redirection to Overview application instead * feat(blank-screen): enhance button to go to Overview application --------- Co-authored-by: Federico Rodriguez <federico.rodriguez@wazuh.com>
wazuh · Apr 4, 2024 · f6d4ef8 · f6d4ef8
1 parent 1da123b
commit f6d4ef8
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 109 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Change the view of API is down and check connection to Server APIs application [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337)
 - Changed the usage of the endpoint GET /groups/{group_id}/files/{file_name} [#6385](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6385)
 - Refactoring and redesign endpoints summary visualizations [#6268](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6268)
+- Move the AngularJS controller and template of blank screen to ReactJS component [#6538](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6538)
 - Moved the registry data to in-memory cache [#6481](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6481)
 - Remove AngularJS controller for manage groups [#6543](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6543)
 - Remove some branding references across the application. [#6155](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6155)

diff --git a/plugins/main/public/components/wz-blank-screen/wz-blank-screen.js b/plugins/main/public/components/wz-blank-screen/wz-blank-screen.js
@@ -16,19 +16,71 @@ import {
   PLUGIN_PLATFORM_WAZUH_DOCUMENTATION_URL_PATH_TROUBLESHOOTING,
   PLUGIN_PLATFORM_URL_GUIDE,
   PLUGIN_PLATFORM_URL_GUIDE_TITLE,
+  UI_LOGGER_LEVELS,
 } from '../../../common/constants';
 import { webDocumentationLink } from '../../../common/services/web_documentation';
+import { AppState } from '../../react-services/app-state';
+import { WzMisc } from '../../factories/misc';
+import { getCore } from '../../kibana-services';
+import { ErrorHandler } from '../../react-services/error-handler';
+import { UI_ERROR_SEVERITIES } from '../../react-services/error-orchestrator/types';
+import { getErrorOrchestrator } from '../../react-services/common-services';
+import { overview } from '../../utils/applications';
+import { RedirectAppLinks } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 
 export class WzBlankScreen extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      errorToShow: null,
+    };
+
+    // Create instance of WzMisc that stores the error
+    this.wzMisc = new WzMisc();
+  }
+
+  componentDidMount() {
+    AppState.setWzMenu();
+    const catchedError = this.wzMisc.getBlankScr();
+    if (catchedError) {
+      let parsed = null;
+      try {
+        parsed = ErrorHandler.handle(catchedError, '', { silent: true });
+      } catch (error) {
+        const options = {
+          context: `${WzBlankScreen.name}.componentDidMount`,
+          level: UI_LOGGER_LEVELS.ERROR,
+          severity: UI_ERROR_SEVERITIES.UI,
+          error: {
+            error: error,
+            message: error.message || error,
+            title: error.name,
+          },
+        };
+        getErrorOrchestrator().handleError(options);
+      }
+
+      this.setState({ errorToShow: parsed || catchedError });
+      this.wzMisc.setBlankScr(false);
+    } else {
+      this.goOverview();
+    }
+  }
+
+  /**
+   * This navigate to overview
+   */
+  goOverview() {
+    getCore().application.navigateToApp(overview.id);
   }
 
   render() {
+    if (!this.state.errorToShow) {
+      return null;
+    }
     return (
       <ErrorComponentPrompt
-        errorTitle={this.props.errorToShow}
+        errorTitle={this.state.errorToShow}
         errorInfo={''}
         action={
           <>
@@ -56,9 +108,16 @@ export class WzBlankScreen extends Component {
             </p>
             <EuiSpacer />
 
-            <EuiButton onClick={this.props.goToOverview} color='primary' fill>
-              Refresh
-            </EuiButton>
+            <RedirectAppLinks application={getCore().application}>
+              <EuiButton
+                href={getCore().application.getUrlForApp(overview.id)}
+                style={{ cursor: 'pointer' }}
+                color='primary'
+                fill
+              >
+                Go to {overview.title}
+              </EuiButton>
+            </RedirectAppLinks>
           </>
         }
       />

diff --git a/plugins/main/public/controllers/index.ts b/plugins/main/public/controllers/index.ts
@@ -16,4 +16,3 @@ import './agent';
 import './settings';
 import './security';
 import './tools';
-import './misc';
diff --git a/plugins/main/public/controllers/misc/blank-screen-controller.js b/plugins/main/public/controllers/misc/blank-screen-controller.js
diff --git a/plugins/main/public/controllers/misc/index.js b/plugins/main/public/controllers/misc/index.js
diff --git a/plugins/main/public/templates/error-handler/blank-screen.html b/plugins/main/public/templates/error-handler/blank-screen.html
@@ -1,5 +1 @@
-<div ng-controller="blankScreenController as ctrl">
-    <div ng-if="ctrl.showErrorPage">
-       <react-component name="WzBlankScreen" props="blankScreenProps" ></react-component>
-    </div>
-</div>
+<react-component name="WzBlankScreen"></react-component>