From e15f0e9dcea4da140e22430bb15f3d05e358c012 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Fri, 15 Jan 2021 13:43:27 -0500
Subject: [PATCH 1/2] [Monitoring] Change cloud messaging on no data page
 (#88375)

* WIP

* Update tests

* Update copy

* Fix translations and update copy

* Fix tests and update copy
---
 .../no_data/blurbs/cloud_deployment.js        | 64 +++++++++----------
 .../__snapshots__/exporters.test.js.snap      | 35 ++++++----
 .../public/components/no_data/no_data.js      | 49 +++++++++++++-
 .../__snapshots__/reason_found.test.js.snap   | 35 ++++++----
 .../translations/translations/ja-JP.json      |  2 -
 .../translations/translations/zh-CN.json      |  2 -
 6 files changed, 124 insertions(+), 63 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/no_data/blurbs/cloud_deployment.js b/x-pack/plugins/monitoring/public/components/no_data/blurbs/cloud_deployment.js
index 073c84ee382aa..c01243fdeec47 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/blurbs/cloud_deployment.js
+++ b/x-pack/plugins/monitoring/public/components/no_data/blurbs/cloud_deployment.js
@@ -4,45 +4,41 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
-import { EuiTitle, EuiText, EuiTextColor, EuiLink, EuiSpacer } from '@elastic/eui';
+import React from 'react';
+import { EuiText, EuiTextColor, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const CloudDeployment = () => {
   return (
-    <Fragment>
-      <EuiTitle size="l">
-        <h2>
+    <EuiTextColor color="subdued">
+      <EuiText>
+        <p>
           <FormattedMessage
-            id="xpack.monitoring.noData.blurbs.cloudDeploymentTitle"
-            defaultMessage="Your monitoring data is not available here."
+            id="xpack.monitoring.noData.blurbs.cloudDeploymentDescription"
+            defaultMessage="Configure monitoring through "
           />
-        </h2>
-      </EuiTitle>
-      <EuiTextColor color="subdued">
-        <EuiSpacer />
-        <EuiText>
-          <p>
-            <FormattedMessage
-              id="xpack.monitoring.noData.blurbs.cloudDeploymentDescription"
-              defaultMessage="Please return to your "
-            />
-            <EuiLink href="https://cloud.elastic.co/deployments" target="_blank">
-              cloud dashboard.
-            </EuiLink>{' '}
-            <FormattedMessage
-              id="xpack.monitoring.noData.blurbs.cloudDeploymentDescriptionMore"
-              defaultMessage="For more information on Monitoring in Elastic Cloud, please see "
-            />
-            <EuiLink
-              href="https://www.elastic.co/guide/en/cloud/current/ec-enable-monitoring.html"
-              target="_blank"
-            >
-              the documentation.
-            </EuiLink>
-          </p>
-        </EuiText>
-      </EuiTextColor>
-    </Fragment>
+          <EuiLink href="https://cloud.elastic.co/deployments" target="_blank">
+            Elasticsearch Service Console
+          </EuiLink>{' '}
+          <FormattedMessage
+            id="xpack.monitoring.noData.blurbs.cloudDeploymentDescription2"
+            defaultMessage="Go to "
+          />
+          <EuiLink href="https://cloud.elastic.co/deployments" target="_blank">
+            Logs and metrics
+          </EuiLink>{' '}
+          <FormattedMessage
+            id="xpack.monitoring.noData.blurbs.cloudDeploymentDescription3"
+            defaultMessage="section for a deployment to configure monitoring. For more information visit "
+          />
+          <EuiLink
+            href="https://www.elastic.co/guide/en/cloud/current/ec-enable-monitoring.html"
+            target="_blank"
+          >
+            the documentation page.
+          </EuiLink>
+        </p>
+      </EuiText>
+    </EuiTextColor>
   );
 };
diff --git a/x-pack/plugins/monitoring/public/components/no_data/explanations/exporters/__snapshots__/exporters.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/explanations/exporters/__snapshots__/exporters.test.js.snap
index ed45933fa9471..99f5a979c812b 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/explanations/exporters/__snapshots__/exporters.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/explanations/exporters/__snapshots__/exporters.test.js.snap
@@ -87,29 +87,40 @@ Array [
 
 exports[`ExplainExportersCloud should explain about xpack.monitoring.exporters setting in a cloud environment 1`] = `
 Array [
-  <h2
-    class="euiTitle euiTitle--large"
-  >
-    Your monitoring data is not available here.
-  </h2>,
   <span
     class="euiTextColor euiTextColor--subdued"
   >
-    <div
-      class="euiSpacer euiSpacer--l"
-    />
     <div
       class="euiText euiText--medium"
     >
       <p>
-        Please return to your 
+        Configure monitoring through 
+        <a
+          class="euiLink euiLink--primary"
+          href="https://cloud.elastic.co/deployments"
+          rel="noopener"
+          target="_blank"
+        >
+          Elasticsearch Service Console
+          <span
+            aria-label="External link"
+            class="euiLink__externalIcon"
+            data-euiicon-type="popout"
+          />
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+         Go to 
         <a
           class="euiLink euiLink--primary"
           href="https://cloud.elastic.co/deployments"
           rel="noopener"
           target="_blank"
         >
-          cloud dashboard.
+          Logs and metrics
           <span
             aria-label="External link"
             class="euiLink__externalIcon"
@@ -121,14 +132,14 @@ Array [
             (opens in a new tab or window)
           </span>
         </a>
-         For more information on Monitoring in Elastic Cloud, please see 
+         section for a deployment to configure monitoring. For more information visit 
         <a
           class="euiLink euiLink--primary"
           href="https://www.elastic.co/guide/en/cloud/current/ec-enable-monitoring.html"
           rel="noopener"
           target="_blank"
         >
-          the documentation.
+          the documentation page.
           <span
             aria-label="External link"
             class="euiLink__externalIcon"
diff --git a/x-pack/plugins/monitoring/public/components/no_data/no_data.js b/x-pack/plugins/monitoring/public/components/no_data/no_data.js
index fc5df7ea7b56e..fdf000cd85321 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/no_data.js
+++ b/x-pack/plugins/monitoring/public/components/no_data/no_data.js
@@ -26,6 +26,7 @@ import { toggleSetupMode } from '../../lib/setup_mode';
 import { CheckingSettings } from './checking_settings';
 import { ReasonFound, WeTried } from './reasons';
 import { CheckerErrors } from './checker_errors';
+import { CloudDeployment } from './blurbs';
 import { getSafeForExternalLink } from '../../lib/get_safe_for_external_link';
 
 function NoDataMessage(props) {
@@ -44,7 +45,8 @@ function NoDataMessage(props) {
 
 export function NoData(props) {
   const [isLoading, setIsLoading] = useState(false);
-  const [useInternalCollection, setUseInternalCollection] = useState(props.isCloudEnabled);
+  const [useInternalCollection, setUseInternalCollection] = useState(false);
+  const isCloudEnabled = props.isCloudEnabled;
 
   async function startSetup() {
     setIsLoading(true);
@@ -52,6 +54,51 @@ export function NoData(props) {
     window.location.hash = getSafeForExternalLink('#/elasticsearch/nodes');
   }
 
+  if (isCloudEnabled) {
+    return (
+      <EuiPage>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.noData.cloud.heading"
+              defaultMessage="No monitoring data found."
+            />
+          </h1>
+        </EuiScreenReaderOnly>
+        <EuiPageBody restrictWidth={600}>
+          <EuiPageContent
+            verticalPosition="center"
+            horizontalPosition="center"
+            className="eui-textCenter"
+          >
+            <EuiIcon type="monitoringApp" size="xxl" />
+            <EuiSpacer size="m" />
+            <EuiTitle size="l">
+              <h2>
+                <FormattedMessage
+                  id="xpack.monitoring.noData.cloud.title"
+                  defaultMessage="Monitoring data not available"
+                />
+              </h2>
+            </EuiTitle>
+            <EuiTextColor color="subdued">
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="xpack.monitoring.noData.cloud.description"
+                    defaultMessage="Monitoring provides insight to your hardware performance and load."
+                  />
+                </p>
+              </EuiText>
+            </EuiTextColor>
+            <EuiHorizontalRule size="half" />
+            <CloudDeployment />
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+
   if (useInternalCollection) {
     return (
       <EuiPage>
diff --git a/x-pack/plugins/monitoring/public/components/no_data/reasons/__snapshots__/reason_found.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/reasons/__snapshots__/reason_found.test.js.snap
index 9e3b7c0e25d5d..e3d25f97c9f78 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/reasons/__snapshots__/reason_found.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/reasons/__snapshots__/reason_found.test.js.snap
@@ -162,29 +162,40 @@ Array [
 
 exports[`ReasonFound should load ExplainExportersCloud component 1`] = `
 Array [
-  <h2
-    class="euiTitle euiTitle--large"
-  >
-    Your monitoring data is not available here.
-  </h2>,
   <span
     class="euiTextColor euiTextColor--subdued"
   >
-    <div
-      class="euiSpacer euiSpacer--l"
-    />
     <div
       class="euiText euiText--medium"
     >
       <p>
-        Please return to your 
+        Configure monitoring through 
+        <a
+          class="euiLink euiLink--primary"
+          href="https://cloud.elastic.co/deployments"
+          rel="noopener"
+          target="_blank"
+        >
+          Elasticsearch Service Console
+          <span
+            aria-label="External link"
+            class="euiLink__externalIcon"
+            data-euiicon-type="popout"
+          />
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+         Go to 
         <a
           class="euiLink euiLink--primary"
           href="https://cloud.elastic.co/deployments"
           rel="noopener"
           target="_blank"
         >
-          cloud dashboard.
+          Logs and metrics
           <span
             aria-label="External link"
             class="euiLink__externalIcon"
@@ -196,14 +207,14 @@ Array [
             (opens in a new tab or window)
           </span>
         </a>
-         For more information on Monitoring in Elastic Cloud, please see 
+         section for a deployment to configure monitoring. For more information visit 
         <a
           class="euiLink euiLink--primary"
           href="https://www.elastic.co/guide/en/cloud/current/ec-enable-monitoring.html"
           rel="noopener"
           target="_blank"
         >
-          the documentation.
+          the documentation page.
           <span
             aria-label="External link"
             class="euiLink__externalIcon"
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 60cf5261ce74f..1ae890f1009fd 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -15857,8 +15857,6 @@
     "xpack.monitoring.noData.blurbs.changesNeededDescription": "監視を実行するには、次の手順に従います",
     "xpack.monitoring.noData.blurbs.changesNeededTitle": "調整が必要です",
     "xpack.monitoring.noData.blurbs.cloudDeploymentDescription": "次の場所に戻ってください: ",
-    "xpack.monitoring.noData.blurbs.cloudDeploymentDescriptionMore": "Elastic Cloud での監視の詳細は、 ",
-    "xpack.monitoring.noData.blurbs.cloudDeploymentTitle": "監視データはこちらに表示されません。",
     "xpack.monitoring.noData.blurbs.lookingForMonitoringDataDescription": "監視は、ハードウェアパフォーマンスと負荷の情報を提供します。",
     "xpack.monitoring.noData.blurbs.lookingForMonitoringDataTitle": "監視データを検索中です",
     "xpack.monitoring.noData.blurbs.monitoringIsOffDescription": "監視は、ハードウェアパフォーマンスと負荷の情報を提供します。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 4767358c9aba3..49bfc7bf7256d 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -15900,8 +15900,6 @@
     "xpack.monitoring.noData.blurbs.changesNeededDescription": "若要运行监测，请执行以下步骤",
     "xpack.monitoring.noData.blurbs.changesNeededTitle": "您需要做些调整",
     "xpack.monitoring.noData.blurbs.cloudDeploymentDescription": "请返回到您的 ",
-    "xpack.monitoring.noData.blurbs.cloudDeploymentDescriptionMore": "有关在 Elastic Cloud 中监测的详情，请参阅 ",
-    "xpack.monitoring.noData.blurbs.cloudDeploymentTitle": "此处没有您的监测数据。",
     "xpack.monitoring.noData.blurbs.lookingForMonitoringDataDescription": "通过 Monitoring，可深入了解您的硬件性能和负载。",
     "xpack.monitoring.noData.blurbs.lookingForMonitoringDataTitle": "我们正在寻找您的监测数据",
     "xpack.monitoring.noData.blurbs.monitoringIsOffDescription": "通过 Monitoring，可深入了解您的硬件性能和负载。",

From f90a925dd3468077ae4329054477949f38e736dc Mon Sep 17 00:00:00 2001
From: chrisronline <chrisronline@gmail.com>
Date: Fri, 15 Jan 2021 14:03:23 -0500
Subject: [PATCH 2/2] Fix missing import

---
 x-pack/plugins/monitoring/public/components/no_data/no_data.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/monitoring/public/components/no_data/no_data.js b/x-pack/plugins/monitoring/public/components/no_data/no_data.js
index fdf000cd85321..3c25539400dff 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/no_data.js
+++ b/x-pack/plugins/monitoring/public/components/no_data/no_data.js
@@ -20,6 +20,7 @@ import {
   EuiTitle,
   EuiTextColor,
   EuiButtonEmpty,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { toggleSetupMode } from '../../lib/setup_mode';