Issue 25323: Fixed error catch and route handling v2 (elastic#44800) (e…

…lastic#45852)

* Sample version

* Add to this page too

* Added base class and fixed some race conditions

* Addressed code review feedback

* Fixed sticky loading state

* Fixed unit tests

x-pack/legacy/plugins/monitoring/public/components/no_data/checking_settings.js

@@ -13,8 +13,13 @@ import {
   EuiLoadingSpinner
 } from '@elastic/eui';
 import { LookingFor } from './blurbs';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export function CheckingSettings({ checkMessage }) {
+  const message = checkMessage || (<FormattedMessage
+    id="xpack.monitoring.noData.defaultLoadingMessage"
+    defaultMessage="Loading, please wait"
+  />);
   return (
     <Fragment>
       <LookingFor />
@@ -23,12 +28,12 @@ export function CheckingSettings({ checkMessage }) {
         <EuiFlexItem grow={false}>
           <EuiLoadingSpinner size="m" />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>{checkMessage}...</EuiFlexItem>
+        <EuiFlexItem grow={false}>{message}...</EuiFlexItem>
       </EuiFlexGroup>
     </Fragment>
   );
 }
 
 CheckingSettings.propTypes = {
-  checkMessage: PropTypes.string.isRequired
+  checkMessage: PropTypes.string
 };

x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/collection_enabled.test.js

@@ -16,12 +16,14 @@ let component;
 describe('ExplainCollectionEnabled', () => {
   beforeEach(() => {
     enabler.enableCollectionEnabled = sinon.spy();
+    const reason = {
+      property: 'xpack.monitoring.collection.enabled',
+      data: '-1',
+      context: 'cluster'
+    };
     component = (
       <ExplainCollectionEnabled
-        context="cluster"
-        property="xpack.monitoring.collection.enabled"
-        data="-1"
-        enabler={enabler}
+        {...{ reason, enabler }}
       />
     );
   });

x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_enabled/collection_enabled.js

@@ -47,13 +47,13 @@ export class ExplainCollectionEnabled extends React.Component {
 
   render() {
     const {
-      context,
-      property,
-      data,
+      reason,
       isCollectionEnabledUpdated,
       isCollectionEnabledUpdating
     } = this.props;
 
+    const { property, data, context } = reason;
+
     const renderButton = () => (
       <Fragment>
         <WhatIs />
@@ -151,9 +151,7 @@ export class ExplainCollectionEnabled extends React.Component {
 
 ExplainCollectionEnabled.propTypes = {
   enabler: PropTypes.object.isRequired,
-  context: PropTypes.string.isRequired,
-  property: PropTypes.string.isRequired,
-  data: PropTypes.string.isRequired,
+  reason: PropTypes.object.isRequired,
   isCollectionEnabledUpdated: PropTypes.bool,
   isCollectionEnabledUpdating: PropTypes.bool
 };

x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/collection_interval.test.js

@@ -11,6 +11,11 @@ import { ExplainCollectionInterval } from '../collection_interval';
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 const enabler = {};
+const reason = {
+  property: 'xpack.monitoring.collection.interval',
+  data: '-1',
+  context: 'cluster'
+};
 
 describe('ExplainCollectionInterval', () => {
   beforeEach(() => {
@@ -20,9 +25,7 @@ describe('ExplainCollectionInterval', () => {
   test('should explain about xpack.monitoring.collection.interval setting', () => {
     const component = (
       <ExplainCollectionInterval
-        context="cluster"
-        property="xpack.monitoring.collection.interval"
-        data="-1"
+        reason={reason}
         isCollectionIntervalUpdating={false}
         isCollectionIntervalUpdated={false}
         enabler={enabler}
@@ -35,9 +38,7 @@ describe('ExplainCollectionInterval', () => {
   test('should have a button that triggers ajax action', () => {
     const component = (
       <ExplainCollectionInterval
-        context="cluster"
-        property="xpack.monitoring.collection.interval"
-        data="-1"
+        reason={reason}
         isCollectionIntervalUpdating={false}
         isCollectionIntervalUpdated={false}
         enabler={enabler}
@@ -53,9 +54,7 @@ describe('ExplainCollectionInterval', () => {
     test('should show a waiting indicator while updating = true', () => {
       const component = (
         <ExplainCollectionInterval
-          context="cluster"
-          property="xpack.monitoring.collection.interval"
-          data="-1"
+          reason={reason}
           isCollectionIntervalUpdating={true}
           isCollectionIntervalUpdated={false}
           enabler={enabler}
@@ -68,9 +67,7 @@ describe('ExplainCollectionInterval', () => {
     test('should show a success message while updated = true', () => {
       const component = (
         <ExplainCollectionInterval
-          context="cluster"
-          property="xpack.monitoring.collection.interval"
-          data="-1"
+          reason={reason}
           isCollectionIntervalUpdating={false}
           isCollectionIntervalUpdated={true}
           enabler={enabler}

x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/collection_interval/collection_interval.js

@@ -33,12 +33,11 @@ export class ExplainCollectionInterval extends React.Component {
 
   render() {
     const {
-      context,
-      property,
-      data,
+      reason,
       isCollectionIntervalUpdated,
       isCollectionIntervalUpdating
     } = this.props;
+    const { context, property, data } = reason;
 
     const renderButton = () => (
       <Fragment>
@@ -131,9 +130,7 @@ export class ExplainCollectionInterval extends React.Component {
 
 ExplainCollectionInterval.propTypes = {
   enabler: PropTypes.object.isRequired,
-  context: PropTypes.string.isRequired,
-  property: PropTypes.string.isRequired,
-  data: PropTypes.string.isRequired,
+  reason: PropTypes.object.isRequired,
   isCollectionIntervalUpdated: PropTypes.bool,
   isCollectionIntervalUpdating: PropTypes.bool
 };

x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/__tests__/exporters.test.js

@@ -10,11 +10,15 @@ import { ExplainExporters, ExplainExportersCloud } from '../exporters';
 
 describe('ExplainExporters', () => {
   test('should explain about xpack.monitoring.exporters setting', () => {
+    const reason = {
+      property: 'xpack.monitoring.exporters',
+      data: 'myMonitoringClusterExporter1',
+      context: 'esProd001'
+    };
+
     const component = renderWithIntl(
       <ExplainExporters
-        property="xpack.monitoring.exporters"
-        data={'myMonitoringClusterExporter1'}
-        context="esProd001"
+        {...{ reason }}
       />
     );
     expect(component).toMatchSnapshot();

x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/exporters/exporters.js

@@ -14,7 +14,8 @@ import {
 import { ChangesNeeded, CloudDeployment } from '../../blurbs';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function ExplainExporters({ context, property, data }) {
+export function ExplainExporters({ reason }) {
+  const { context, property, data } = reason;
   return (
     <Fragment>
       <ChangesNeeded />
@@ -68,9 +69,7 @@ export function ExplainExporters({ context, property, data }) {
 }
 
 ExplainExporters.propTypes = {
-  context: PropTypes.string.isRequired,
-  property: PropTypes.string.isRequired,
-  data: PropTypes.string.isRequired
+  reason: PropTypes.object.isRequired,
 };
 
 export function ExplainExportersCloud() {

x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/__tests__/plugin_enabled.test.js

@@ -10,11 +10,14 @@ import { ExplainPluginEnabled } from '../plugin_enabled';
 
 describe('ExplainPluginEnabled', () => {
   test('should explain about xpack.monitoring.enabled setting', () => {
+    const reason = {
+      property: 'xpack.monitoring.enabled',
+      data: 'false',
+      context: 'cluster'
+    };
     const component = renderWithIntl(
       <ExplainPluginEnabled
-        property="xpack.monitoring.enabled"
-        data="false"
-        context="cluster"
+        {...{ reason }}
       />
     );
     expect(component).toMatchSnapshot();

x-pack/legacy/plugins/monitoring/public/components/no_data/explanations/plugin_enabled/plugin_enabled.js

@@ -14,7 +14,8 @@ import {
 import { ChangesNeeded } from '../../blurbs';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function ExplainPluginEnabled({ context, property, data }) {
+export function ExplainPluginEnabled({ reason }) {
+  const { context, property, data } = reason;
   return (
     <Fragment>
       <ChangesNeeded />
@@ -41,7 +42,5 @@ export function ExplainPluginEnabled({ context, property, data }) {
 }
 
 ExplainPluginEnabled.propTypes = {
-  property: PropTypes.string.isRequired,
-  context: PropTypes.string.isRequired,
-  data: PropTypes.string.isRequired
+  reason: PropTypes.object.isRequired
 };

x-pack/legacy/plugins/monitoring/public/components/no_data/no_data.js

@@ -20,7 +20,7 @@ import { CheckerErrors } from './checker_errors';
 function NoDataMessage(props) {
   const { isLoading, reason, checkMessage } = props;
 
-  if (isLoading && checkMessage !== null) {
+  if (isLoading) {
     return <CheckingSettings checkMessage={checkMessage} />;
   }
 

x-pack/legacy/plugins/monitoring/public/components/no_data/reasons/reason_found.js

@@ -19,19 +19,28 @@ import {
 } from '../explanations';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-const ExplainWhyNoData = ({ reason, ...props }) => {
+const ExplainWhyNoData = (props) => {
+  const { reason } = props;
   const { property, data, context } = reason;
   switch (property) {
     case 'xpack.monitoring.collection.enabled':
-      return <ExplainCollectionEnabled {...reason} {...props} />;
+      return <ExplainCollectionEnabled {...props} />;
     case 'xpack.monitoring.collection.interval':
-      return <ExplainCollectionInterval {...reason} {...props} />;
+      return <ExplainCollectionInterval {...props} />;
     case 'xpack.monitoring.exporters':
-      return <ExplainExporters {...reason} {...props} />;
+      return <ExplainExporters {...props} />;
     case  'xpack.monitoring.exporters.cloud_enabled':
-      return <ExplainExportersCloud {...reason} {...props}/>;
+      return <ExplainExportersCloud />;
     case 'xpack.monitoring.enabled':
-      return <ExplainPluginEnabled {...reason} {...props} />;
+      return <ExplainPluginEnabled {...props} />;
+    case 'custom':
+      return (
+        <EuiText>
+          <p>
+            {reason.message}
+          </p>
+        </EuiText>
+      );
     default:
       return (
         <EuiText>

x-pack/legacy/plugins/monitoring/public/components/page_loading/index.js

@@ -17,7 +17,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 export function PageLoading() {
   return (
-    <EuiPage>
+    <EuiPage style={{ height: 'calc(100vh - 50px)' }}>
       <EuiPageBody>
         <EuiPageContent
           verticalPosition="center"