From eb3cb8258fb6ddd61fa0cecaf03b43a33ab54c65 Mon Sep 17 00:00:00 2001 From: Chris Roberson Date: Wed, 19 Aug 2020 14:57:53 -0400 Subject: [PATCH] Add loading page (#75362) --- .../public/directives/main/index.js | 5 ++ x-pack/plugins/monitoring/public/views/all.js | 1 + .../public/views/cluster/listing/index.js | 2 +- .../public/views/cluster/overview/index.html | 2 +- .../public/views/cluster/overview/index.js | 3 + .../public/views/loading/index.html | 5 ++ .../monitoring/public/views/loading/index.js | 67 +++++++++++++++++++ 7 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 x-pack/plugins/monitoring/public/views/loading/index.html create mode 100644 x-pack/plugins/monitoring/public/views/loading/index.js diff --git a/x-pack/plugins/monitoring/public/directives/main/index.js b/x-pack/plugins/monitoring/public/directives/main/index.js index d682e87b7ca95f..cee18004c5777d 100644 --- a/x-pack/plugins/monitoring/public/directives/main/index.js +++ b/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, () => { diff --git a/x-pack/plugins/monitoring/public/views/all.js b/x-pack/plugins/monitoring/public/views/all.js index d192b366fec331..e4903ea974a181 100644 --- a/x-pack/plugins/monitoring/public/views/all.js +++ b/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'; diff --git a/x-pack/plugins/monitoring/public/views/cluster/listing/index.js b/x-pack/plugins/monitoring/public/views/cluster/listing/index.js index b00945ca37e192..db1408e3905f02 100644 --- a/x-pack/plugins/monitoring/public/views/cluster/listing/index.js +++ b/x-pack/plugins/monitoring/public/views/cluster/listing/index.js @@ -79,4 +79,4 @@ uiRoutes } }, }) - .otherwise({ redirectTo: '/no-data' }); + .otherwise({ redirectTo: '/loading' }); diff --git a/x-pack/plugins/monitoring/public/views/cluster/overview/index.html b/x-pack/plugins/monitoring/public/views/cluster/overview/index.html index 7ea786510bf198..1762ee1c2a2823 100644 --- a/x-pack/plugins/monitoring/public/views/cluster/overview/index.html +++ b/x-pack/plugins/monitoring/public/views/cluster/overview/index.html @@ -1,3 +1,3 @@ - +
diff --git a/x-pack/plugins/monitoring/public/views/cluster/overview/index.js b/x-pack/plugins/monitoring/public/views/cluster/overview/index.js index f3e6d5def9b6f9..09aef1d4310713 100644 --- a/x-pack/plugins/monitoring/public/views/cluster/overview/index.js +++ b/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) => { diff --git a/x-pack/plugins/monitoring/public/views/loading/index.html b/x-pack/plugins/monitoring/public/views/loading/index.html new file mode 100644 index 00000000000000..9a5971a65bc393 --- /dev/null +++ b/x-pack/plugins/monitoring/public/views/loading/index.html @@ -0,0 +1,5 @@ + +
+
+
+ diff --git a/x-pack/plugins/monitoring/public/views/loading/index.js b/x-pack/plugins/monitoring/public/views/loading/index.js new file mode 100644 index 00000000000000..04e0325aa70e2a --- /dev/null +++ b/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( + + + , + 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'); + }); + } + }, +});