[Uptime] Update no data available state

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

@@ -26137,13 +26137,7 @@
     "xpack.uptime.createPackagePolicy.stepConfigure.tlsSettings.label": "TLS設定",
     "xpack.uptime.durationChart.emptyPrompt.description": "このモニターは選択された時間範囲で一度も{emphasizedText}していません。",
     "xpack.uptime.durationChart.emptyPrompt.title": "利用可能な期間データがありません",
-    "xpack.uptime.emptyState.configureHeartbeatIndexSettings": "Heartbeatがすでに設定されている場合は、データがElasticsearchに送信されていることを確認してから、Heartbeat構成に合わせてインデックスパターン設定を更新します。",
-    "xpack.uptime.emptyState.configureHeartbeatToGetStartedMessage": "サービスの監視を開始するには、Heartbeatを設定します。",
     "xpack.uptime.emptyState.loadingMessage": "読み込み中…",
-    "xpack.uptime.emptyState.noDataMessage": "インデックス{indexName}にはアップタイムデータが見つかりません",
-    "xpack.uptime.emptyState.noIndexTitle": "パターン{indexName}のインデックスが見つかりません",
-    "xpack.uptime.emptyState.updateIndexPattern": "インデックスパターン設定を更新",
-    "xpack.uptime.emptyState.viewSetupInstructions": "セットアップの手順を表示",
     "xpack.uptime.emptyStateError.notAuthorized": "アップタイムデータの表示が承認されていません。システム管理者にお問い合わせください。",
     "xpack.uptime.emptyStateError.notFoundPage": "ページが見つかりません",
     "xpack.uptime.emptyStateError.title": "エラー",

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

@@ -26572,13 +26572,7 @@
     "xpack.uptime.createPackagePolicy.stepConfigure.tlsSettings.label": "TLS 设置",
     "xpack.uptime.durationChart.emptyPrompt.description": "在选定时间范围内此监测从未{emphasizedText}。",
     "xpack.uptime.durationChart.emptyPrompt.title": "没有持续时间数据",
-    "xpack.uptime.emptyState.configureHeartbeatIndexSettings": "如果已设置 Heartbeat，请确认其正向 Elasticsearch 发送数据，然后更新索引模式设置以匹配 Heartbeat 配置。",
-    "xpack.uptime.emptyState.configureHeartbeatToGetStartedMessage": "设置 Heartbeat 以开始监测您的服务。",
     "xpack.uptime.emptyState.loadingMessage": "正在加载……",
-    "xpack.uptime.emptyState.noDataMessage": "在索引 {indexName} 中找不到运行时间数据",
-    "xpack.uptime.emptyState.noIndexTitle": "找不到模式 {indexName} 的索引",
-    "xpack.uptime.emptyState.updateIndexPattern": "更新索引模式设置",
-    "xpack.uptime.emptyState.viewSetupInstructions": "查看设置说明",
     "xpack.uptime.emptyStateError.notAuthorized": "您无权查看 Uptime 数据，请联系系统管理员。",
     "xpack.uptime.emptyStateError.notFoundPage": "未找到页面",
     "xpack.uptime.emptyStateError.title": "错误",

x-pack/plugins/uptime/public/apps/uptime_page_template.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { EuiPageHeaderProps } from '@elastic/eui';
+import { OVERVIEW_ROUTE } from '../../common/constants';
+import { useKibana } from '../../../../../src/plugins/kibana_react/public';
+import { ClientPluginsStart } from './plugin';
+import { useNoDataConfig } from './use_no_data_config';
+import { EmptyStateLoading } from '../components/overview/empty_state/empty_state_loading';
+import { EmptyStateError } from '../components/overview/empty_state/empty_state_error';
+import { useHasData } from '../components/overview/empty_state/use_has_data';
+
+interface Props {
+  path: string;
+  pageHeader?: EuiPageHeaderProps;
+}
+
+export const UptimePageTemplateComponent: React.FC<Props> = ({ path, pageHeader, children }) => {
+  const {
+    services: { observability },
+  } = useKibana<ClientPluginsStart>();
+
+  const PageTemplateComponent = observability.navigation.PageTemplate;
+
+  const StyledPageTemplateComponent = useMemo(() => {
+    return styled(PageTemplateComponent)`
+      .euiPageHeaderContent > .euiFlexGroup {
+        flex-wrap: wrap;
+      }
+    `;
+  }, [PageTemplateComponent]);
+
+  const noDataConfig = useNoDataConfig();
+
+  const { loading, error } = useHasData();
+
+  if (error) {
+    return <EmptyStateError errors={[error]} />;
+  }
+
+  return (
+    <>
+      <div data-test-subj={noDataConfig ? 'data-missing' : undefined} />
+      <StyledPageTemplateComponent
+        pageHeader={pageHeader}
+        noDataConfig={path === OVERVIEW_ROUTE && !loading ? noDataConfig : undefined}
+      >
+        {loading && path === OVERVIEW_ROUTE && <EmptyStateLoading />}
+        <div
+          style={{ visibility: loading && path === OVERVIEW_ROUTE ? 'hidden' : 'initial' }}
+          data-test-subj={noDataConfig ? 'data-missing' : undefined}
+        >
+          {children}
+        </div>
+      </StyledPageTemplateComponent>
+    </>
+  );
+};

x-pack/plugins/uptime/public/apps/use_no_data_config.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { KibanaPageTemplateProps, useKibana } from '../../../../../src/plugins/kibana_react/public';
+import { UptimeSettingsContext } from '../contexts';
+import { ClientPluginsStart } from './plugin';
+import { indexStatusSelector } from '../state/selectors';
+
+export function useNoDataConfig(): KibanaPageTemplateProps['noDataConfig'] {
+  const { basePath } = useContext(UptimeSettingsContext);
+
+  const {
+    services: { docLinks },
+  } = useKibana<ClientPluginsStart>();
+
+  const { data } = useSelector(indexStatusSelector);
+
+  // Returns no data config when there is no historical data
+  if (data && !data.indexExists) {
+    return {
+      solution: i18n.translate('xpack.uptime.noDataConfig.solutionName', {
+        defaultMessage: 'Observability',
+      }),
+      actions: {
+        beats: {
+          title: i18n.translate('xpack.uptime.noDataConfig.beatsCard.title', {
+            defaultMessage: 'Add monitors with Heartbeat',
+          }),
+          description: i18n.translate('xpack.uptime.noDataConfig.beatsCard.description', {
+            defaultMessage:
+              'Proactively monitor the availability of your sites and services. Receive alerts and resolve issues faster to optimize your users experience.',
+          }),
+          href: basePath + `/app/home#/tutorial/uptimeMonitors`,
+        },
+      },
+      docsLink: docLinks!.links.observability.guide,
+    };
+  }
+}