[Monitoring] Change cloud messaging on no data page (#88375)

* WIP

* Update tests

* Update copy

* Fix translations and update copy

* Fix tests and update copy

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 React from 'react';
-import { EuiTitle, EuiText, EuiTextColor, EuiLink, EuiSpacer } from '@elastic/eui';
+import { EuiText, EuiTextColor, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const CloudDeployment = () => {
   return (
-    <Fragment>
+    <EuiTextColor color="subdued">
-      <EuiTitle size="l">
+      <EuiText>
-        <h2>
+        <p>
           <FormattedMessage
-            id="xpack.monitoring.noData.blurbs.cloudDeploymentTitle"
+            id="xpack.monitoring.noData.blurbs.cloudDeploymentDescription"
-            defaultMessage="Your monitoring data is not available here."
+            defaultMessage="Configure monitoring through "
           />
-        </h2>
+          <EuiLink href="https://cloud.elastic.co/deployments" target="_blank">
-      </EuiTitle>
+            Elasticsearch Service Console
-      <EuiTextColor color="subdued">
+          </EuiLink>{' '}
-        <EuiSpacer />
+          <FormattedMessage
-        <EuiText>
+            id="xpack.monitoring.noData.blurbs.cloudDeploymentDescription2"
-          <p>
+            defaultMessage="Go to "
-            <FormattedMessage
+          />
-              id="xpack.monitoring.noData.blurbs.cloudDeploymentDescription"
+          <EuiLink href="https://cloud.elastic.co/deployments" target="_blank">
-              defaultMessage="Please return to your "
+            Logs and metrics
-            />
+          </EuiLink>{' '}
-            <EuiLink href="https://cloud.elastic.co/deployments" target="_blank">
+          <FormattedMessage
-              cloud dashboard.
+            id="xpack.monitoring.noData.blurbs.cloudDeploymentDescription3"
-            </EuiLink>{' '}
+            defaultMessage="section for a deployment to configure monitoring. For more information visit "
-            <FormattedMessage
+          />
-              id="xpack.monitoring.noData.blurbs.cloudDeploymentDescriptionMore"
+          <EuiLink
-              defaultMessage="For more information on Monitoring in Elastic Cloud, please see "
+            href="https://www.elastic.co/guide/en/cloud/current/ec-enable-monitoring.html"
-            />
+            target="_blank"
-            <EuiLink
+          >
-              href="https://www.elastic.co/guide/en/cloud/current/ec-enable-monitoring.html"
+            the documentation page.
-              target="_blank"
+          </EuiLink>
-            >
+        </p>
-              the documentation.
+      </EuiText>
-            </EuiLink>
+    </EuiTextColor>
-          </p>
-        </EuiText>
-      </EuiTextColor>
-    </Fragment>
   );
 };

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

@@ -87,29 +87,21 @@ 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"
         >
-          cloud dashboard.
+          Elasticsearch Service Console
           <span
             aria-label="External link"
             class="euiLink__externalIcon"
@@ -121,14 +113,33 @@ Array [
             (opens in a new tab or window)
           </span>
         </a>
-         For more information on Monitoring in Elastic Cloud, please see 
+         Go to 
+        <a
+          class="euiLink euiLink--primary"
+          href="https://cloud.elastic.co/deployments"
+          rel="noopener"
+          target="_blank"
+        >
+          Logs and metrics
+          <span
+            aria-label="External link"
+            class="euiLink__externalIcon"
+            data-euiicon-type="popout"
+          />
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+         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"

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

@@ -27,6 +27,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) {
@@ -45,7 +46,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);
@@ -53,6 +55,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>

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

@@ -162,29 +162,21 @@ 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"
         >
-          cloud dashboard.
+          Elasticsearch Service Console
           <span
             aria-label="External link"
             class="euiLink__externalIcon"
@@ -196,14 +188,33 @@ Array [
             (opens in a new tab or window)
           </span>
         </a>
-         For more information on Monitoring in Elastic Cloud, please see 
+         Go to 
+        <a
+          class="euiLink euiLink--primary"
+          href="https://cloud.elastic.co/deployments"
+          rel="noopener"
+          target="_blank"
+        >
+          Logs and metrics
+          <span
+            aria-label="External link"
+            class="euiLink__externalIcon"
+            data-euiicon-type="popout"
+          />
+          <span
+            class="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+         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"

x-pack/plugins/translations/translations/ja-JP.json

@@ -15844,8 +15844,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": "監視は、ハードウェアパフォーマンスと負荷の情報を提供します。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -15887,8 +15887,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，可深入了解您的硬件性能和负载。",