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

* WIP * Update tests * Update copy * Fix translations and update copy * Fix tests and update copy
2021-01-15 13:43:27 -05:00 · 2021-01-15 13:43:27 -05:00 · 68288ebfdb
parent 73cd1a088c
commit 68288ebfdb
6 changed files with 124 additions and 63 deletions
--- 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>
  );
 };
--- 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,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"
--- a/x-pack/plugins/monitoring/public/components/no_data/no_data.js
+++ b/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>
--- 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,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"
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/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": "監視は、ハードウェアパフォーマンスと負荷の情報を提供します。",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/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，可深入了解您的硬件性能和负载。",