Add loading page (#75362)

x-pack/plugins/monitoring/public/directives/main/index.js

@@ -205,6 +205,7 @@ export class MonitoringMainController {
 
 export function monitoringMainProvider(breadcrumbs, license, $injector) {
   const $executor = $injector.get('$executor');
+  const $parse = $injector.get('$parse');
 
   return {
     restrict: 'E',
@@ -221,6 +222,10 @@ export function monitoringMainProvider(breadcrumbs, license, $injector) {
         Object.keys(setupObj.attributes).forEach((key) => {
           attributes.$observe(key, () => controller.setup(getSetupObj()));
         });
+        if (attributes.onLoaded) {
+          const onLoaded = $parse(attributes.onLoaded)(scope);
+          onLoaded();
+        }
       });
 
       initSetupModeState(scope, $injector, () => {

x-pack/plugins/monitoring/public/views/all.js

@@ -35,3 +35,4 @@ import './beats/beat';
 import './apm/overview';
 import './apm/instances';
 import './apm/instance';
+import './loading';

x-pack/plugins/monitoring/public/views/cluster/listing/index.js

@@ -79,4 +79,4 @@ uiRoutes
       }
     },
   })
-  .otherwise({ redirectTo: '/no-data' });
+  .otherwise({ redirectTo: '/loading' });

x-pack/plugins/monitoring/public/views/cluster/overview/index.html

@@ -1,3 +1,3 @@
-<monitoring-main name="overview" data-test-subj="clusterOverviewContainer">
+<monitoring-main name="overview" data-test-subj="clusterOverviewContainer" on-loaded="monitoringClusterOverview.init">
   <div id="monitoringClusterOverviewApp"></div>
 </monitoring-main>

x-pack/plugins/monitoring/public/views/cluster/overview/index.js

@@ -25,6 +25,7 @@ uiRoutes.when('/overview', {
       return routeInit({ codePaths: CODE_PATHS });
     },
   },
+  controllerAs: 'monitoringClusterOverview',
   controller: class extends MonitoringViewBaseController {
     constructor($injector, $scope) {
       const monitoringClusters = $injector.get('monitoringClusters');
@@ -52,6 +53,8 @@ uiRoutes.when('/overview', {
         },
       });
 
+      this.init = () => this.renderReact(null);
+
       $scope.$watch(
         () => this.data,
         async (data) => {

x-pack/plugins/monitoring/public/views/loading/index.html

@@ -0,0 +1,5 @@
+<monitoring-main name="no-data" on-loaded="monitoringLoading.init">
+  <div data-test-subj="monitoringLoadingContainer">
+    <div id="monitoringLoadingReact"></div>
+  </div>
+</monitoring-main>

x-pack/plugins/monitoring/public/views/loading/index.js

@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/**
+ * Controller for single index detail
+ */
+import React from 'react';
+import { render } from 'react-dom';
+import { i18n } from '@kbn/i18n';
+import { uiRoutes } from '../../angular/helpers/routes';
+import { routeInitProvider } from '../../lib/route_init';
+import template from './index.html';
+import { Legacy } from '../../legacy_shims';
+import { CODE_PATH_ELASTICSEARCH } from '../../../common/constants';
+import { PageLoading } from '../../components';
+
+const CODE_PATHS = [CODE_PATH_ELASTICSEARCH];
+uiRoutes.when('/loading', {
+  template,
+  controllerAs: 'monitoringLoading',
+  controller: class {
+    constructor($injector, $scope) {
+      const Private = $injector.get('Private');
+      const titleService = $injector.get('title');
+      titleService(
+        $scope.cluster,
+        i18n.translate('xpack.monitoring.loading.pageTitle', {
+          defaultMessage: 'Loading',
+        })
+      );
+
+      this.init = () => {
+        const reactNodeId = 'monitoringLoadingReact';
+        const renderElement = document.getElementById(reactNodeId);
+        if (!renderElement) {
+          console.warn(`"#${reactNodeId}" element has not been added to the DOM yet`);
+          return;
+        }
+        const I18nContext = Legacy.shims.I18nContext;
+        render(
+          <I18nContext>
+            <PageLoading />
+          </I18nContext>,
+          renderElement
+        );
+      };
+
+      const routeInit = Private(routeInitProvider);
+      routeInit({ codePaths: CODE_PATHS, fetchAllClusters: true }).then((clusters) => {
+        if (!clusters || !clusters.length) {
+          window.location.hash = '#/no-data';
+          return;
+        }
+        if (clusters.length === 1) {
+          // Bypass the cluster listing if there is just 1 cluster
+          window.history.replaceState(null, null, '#/overview');
+          return;
+        }
+
+        window.history.replaceState(null, null, '#/home');
+      });
+    }
+  },
+});