[Monitoring] Improve User Experience of Enabling Monitoring Collection (#19451) (#19969)

* [Monitoring/No Data] Show a "still waiting" link after 19s

* minor bug fix: spinner if _interval_ updating

* update "we tried"

* some wording changes on activating / trying to activate monitoring

* cancel the setTimeout when component gets unmounted

* more wording tweaks

* update snapshot

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

@@ -23,11 +23,25 @@ export class ExplainCollectionEnabled extends React.Component {
   constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
+    this.waitedTooLongTimer = null;
+
+    this.state = {
+      waitedTooLong: false
+    };
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.waitedTooLongTimer);
   }
 
   handleClick() {
     const { enabler } = this.props;
     enabler.enableCollectionEnabled();
+
+    // wait 19 seconds, show link to reload
+    this.waitedTooLongTimer = setTimeout(() => {
+      this.setState({ waitedTooLong: true });
+    }, 19 * 1000);
   }
 
   render() {
@@ -72,6 +86,13 @@ export class ExplainCollectionEnabled extends React.Component {
         </EuiFlexGroup>
       </Fragment>
     );
+
+    const stillWaiting = this.state.waitedTooLong ? (
+      <p>
+        <a href="#/">Still waiting?</a>
+      </p>
+    ) : null;
+
     const renderSuccess = () => (
       <Fragment>
         <EuiTitle size="l" data-test-subj="monitoringCollectionEnabledMessage">
@@ -80,13 +101,14 @@ export class ExplainCollectionEnabled extends React.Component {
         <EuiHorizontalRule size="half" />
         <EuiText>
           <p>
-            When the data is in your
-            cluster, your monitoring
-            dashboard will show up here. This only takes a few seconds.
+            When the data is in your cluster, your monitoring dashboard will
+            show up here. This might take a few seconds.
           </p>
         </EuiText>
         <EuiSpacer />
         <EuiLoadingSpinner size="l" />
+        <EuiSpacer />
+        {stillWaiting}
       </Fragment>
     );
 

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

@@ -199,18 +199,28 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
             data-test-subj="enableCollectionInterval"
             fill={true}
             iconSide="left"
+            isLoading={true}
             onClick={[Function]}
             type="button"
           >
             <button
               className="euiButton euiButton--primary euiButton--fill"
               data-test-subj="enableCollectionInterval"
+              disabled={true}
               onClick={[Function]}
               type="button"
             >
               <span
                 className="euiButton__content"
               >
+                <EuiLoadingSpinner
+                  className="euiButton__spinner"
+                  size="m"
+                >
+                  <div
+                    className="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
+                  />
+                </EuiLoadingSpinner>
                 <span
                   className="euiButton__text"
                 >
@@ -367,6 +377,7 @@ exports[`ExplainCollectionInterval should explain about xpack.monitoring.collect
             data-test-subj="enableCollectionInterval"
             fill={true}
             iconSide="left"
+            isLoading={false}
             onClick={[Function]}
             type="button"
           >

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

@@ -36,7 +36,7 @@ export class ExplainCollectionInterval extends React.Component {
       property,
       data,
       isCollectionIntervalUpdated,
-      isCollectionEnabledUpdating
+      isCollectionIntervalUpdating
     } = this.props;
 
     const renderButton = () => (
@@ -68,7 +68,7 @@ export class ExplainCollectionInterval extends React.Component {
               onClick={this.handleClick}
               type="button"
               data-test-subj="enableCollectionInterval"
-              isLoading={isCollectionEnabledUpdating}
+              isLoading={isCollectionIntervalUpdating}
             >
               Turn on monitoring
             </EuiButton>

x-pack/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/we_tried.test.js.snap

@@ -7,17 +7,6 @@ Array [
   >
     We couldn't activate monitoring
   </h2>,
-  <span
-    class="euiTextColor euiTextColor--subdued"
-  >
-    <div
-      class="euiText"
-    >
-      <p>
-        Here might be some things to check
-      </p>
-    </div>
-  </span>,
   <hr
     class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginLarge"
   />,
@@ -25,13 +14,10 @@ Array [
     class="euiText noData__alignLeft"
   >
     <p>
-      No Monitoring data could be found for the selected time period, but we could not find the cluster setting that makes the data unavailable.
+      No monitoring data found. Try setting the time filter to "Last 1 hour" or check if data is available for a different time period.
     </p>
     <p>
-      There may be data available for a different time period than we have selected. Try adjusting the time filter controls to a time range where the Monitoring data is expected.
-    </p>
-    <p>
-      We are refreshing the search for data in the background. If cluster data is found, we will redirect to the cluster overview page.
+      If data is in your cluster, your monitoring dashboards will show up here.
     </p>
   </div>,
 ]

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

@@ -8,7 +8,6 @@ import React, { Fragment } from 'react';
 import {
   EuiText,
   EuiHorizontalRule,
-  EuiTextColor,
   EuiTitle,
 } from '@elastic/eui';
 
@@ -18,25 +17,14 @@ export function WeTried() {
       <EuiTitle size="l">
         <h2>We couldn&apos;t activate monitoring</h2>
       </EuiTitle>
-      <EuiTextColor color="subdued">
-        <EuiText>
-          <p>Here might be some things to check</p>
-        </EuiText>
-      </EuiTextColor>
       <EuiHorizontalRule size="half" />
       <EuiText className="noData__alignLeft">
         <p>
-          No Monitoring data could be found for the selected time period, but we
-          could not find the cluster setting that makes the data unavailable.
+          No monitoring data found. Try setting the time filter to &quot;Last 1
+          hour&quot; or check if data is available for a different time period.
         </p>
         <p>
-          There may be data available for a different time period than we have
-          selected. Try adjusting the time filter controls to a time range where
-          the Monitoring data is expected.
-        </p>
-        <p>
-          We are refreshing the search for data in the background. If cluster data
-          is found, we will redirect to the cluster overview page.
+          If data is in your cluster, your monitoring dashboards will show up here.
         </p>
       </EuiText>
     </Fragment>