WIP

chrisronline · chrisronline · commit 3aa6a2c68261 · 2021-01-14T12:15:21.000-05:00
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
@@ -11,11 +11,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 export const CloudDeployment = () => {
   return (
     <Fragment>
-      <EuiTitle size="l">
+      <EuiTitle size="m">
         <h2>
           <FormattedMessage
             id="xpack.monitoring.noData.blurbs.cloudDeploymentTitle"
-            defaultMessage="Your monitoring data is not available here."
+            defaultMessage="Your monitoring data is configured through Cloud."
           />
         </h2>
       </EuiTitle>
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
@@ -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 { WhatIs, CloudDeployment } from './blurbs';
 import { getSafeForExternalLink } from '../../lib/get_safe_for_external_link';
 
 function NoDataMessage(props) {
@@ -45,14 +46,43 @@ 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" />
+            <WhatIs />
+            <EuiHorizontalRule size="half" />
+            <CloudDeployment />
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+
   if (useInternalCollection) {
     return (
       <EuiPage>
