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

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>
   );
 };

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

@@ -20,12 +20,14 @@ import {
   EuiTitle,
   EuiTextColor,
   EuiButtonEmpty,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 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,14 +46,60 @@ 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);
     await toggleSetupMode(true);
     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/translations/translations/ja-JP.json

@@ -16050,8 +16050,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

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