[Uptime]Refactor header and action menu (#83779)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2020-12-09 12:45:40 +01:00 · 2020-12-09 12:45:40 +01:00 · 2a8c609bf9
parent 9d8dd6dc57
commit 2a8c609bf9
23 changed files with 722 additions and 411 deletions
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -20323,8 +20323,6 @@
    "xpack.uptime.breadcrumbs.overviewBreadcrumbText": "アップタイム",
    "xpack.uptime.certificates.heading": "TLS証明書（{total}）",
    "xpack.uptime.certificates.refresh": "更新",
-    "xpack.uptime.certificates.returnToOverviewLinkLabel": "概要に戻る",
-    "xpack.uptime.certificates.settingsLinkLabel": "設定",
    "xpack.uptime.certs.expired": "期限切れ",
    "xpack.uptime.certs.expires": "有効期限",
    "xpack.uptime.certs.expireSoon": "まもなく期限切れ",
@ -20462,7 +20460,6 @@
    "xpack.uptime.monitorList.table.description": "列にステータス、名前、URL、IP、ダウンタイム履歴、統合が入力されたモニターステータス表です。この表は現在 {length} 項目を表示しています。",
    "xpack.uptime.monitorList.table.url.name": "Url",
    "xpack.uptime.monitorList.tlsColumnLabel": "TLS証明書",
-    "xpack.uptime.monitorList.viewCertificateTitle": "証明書ステータス",
    "xpack.uptime.monitorStatusBar.durationTextAriaLabel": "ミリ秒単位の監視時間",
    "xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "監視ステータス",
    "xpack.uptime.monitorStatusBar.loadingMessage": "読み込み中…",
@ -20528,7 +20525,6 @@
    "xpack.uptime.settings.error.couldNotSave": "設定を保存できませんでした！",
    "xpack.uptime.settings.invalid.error": "値は0よりも大きい値でなければなりません。",
    "xpack.uptime.settings.invalid.nanError": "値は整数でなければなりません。",
-    "xpack.uptime.settings.returnToOverviewLinkLabel": "概要に戻る",
    "xpack.uptime.settings.saveSuccess": "設定が保存されました。",
    "xpack.uptime.settingsBreadcrumbText": "設定",
    "xpack.uptime.snapshot.donutChart.ariaLabel": "現在のステータスを表す円グラフ、{total}個中{down}個のモニターがダウンしています。",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -20342,8 +20342,6 @@
    "xpack.uptime.breadcrumbs.overviewBreadcrumbText": "运行时间",
    "xpack.uptime.certificates.heading": "TLS 证书 ({total})",
    "xpack.uptime.certificates.refresh": "刷新",
-    "xpack.uptime.certificates.returnToOverviewLinkLabel": "返回到概览",
-    "xpack.uptime.certificates.settingsLinkLabel": "设置",
    "xpack.uptime.certs.expired": "已过期",
    "xpack.uptime.certs.expires": "过期",
    "xpack.uptime.certs.expireSoon": "即将过期",
@ -20481,7 +20479,6 @@
    "xpack.uptime.monitorList.table.description": "具有“状态”、“名称”、“URL”、“IP”、“中断历史记录”和“集成”列的“监测状态”表。该表当前显示 {length} 个项目。",
    "xpack.uptime.monitorList.table.url.name": "URL",
    "xpack.uptime.monitorList.tlsColumnLabel": "TLS 证书",
-    "xpack.uptime.monitorList.viewCertificateTitle": "证书状态",
    "xpack.uptime.monitorStatusBar.durationTextAriaLabel": "监测持续时间（毫秒）",
    "xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "检测状态",
    "xpack.uptime.monitorStatusBar.loadingMessage": "正在加载……",
@ -20547,7 +20544,6 @@
    "xpack.uptime.settings.error.couldNotSave": "无法保存设置！",
    "xpack.uptime.settings.invalid.error": "值必须大于 0。",
    "xpack.uptime.settings.invalid.nanError": "值必须为整数。",
-    "xpack.uptime.settings.returnToOverviewLinkLabel": "返回到概览",
    "xpack.uptime.settings.saveSuccess": "设置已保存！",
    "xpack.uptime.settingsBreadcrumbText": "设置",
    "xpack.uptime.snapshot.donutChart.ariaLabel": "显示当前状态的饼图。{total} 个监测中有 {down} 个已关闭。",
--- a/x-pack/plugins/uptime/public/apps/render_app.tsx
+++ b/x-pack/plugins/uptime/public/apps/render_app.tsx
@ -21,7 +21,7 @@ export function renderApp(
  core: CoreStart,
  plugins: ClientPluginsSetup,
  startPlugins: ClientPluginsStart,
-  { element, history }: AppMountParameters
+  appMountParameters: AppMountParameters
 ) {
  const {
    application: { capabilities },
@ -47,7 +47,6 @@ export function renderApp(
    basePath: basePath.get(),
    darkMode: core.uiSettings.get(DEFAULT_DARK_MODE),
    commonlyUsedRanges: core.uiSettings.get(DEFAULT_TIMEPICKER_QUICK_RANGES),
-    history,
    isApmAvailable: apm,
    isInfraAvailable: infrastructure,
    isLogsAvailable: logs,
@ -68,12 +67,13 @@ export function renderApp(
        ],
      }),
    setBadge,
+    appMountParameters,
    setBreadcrumbs: core.chrome.setBreadcrumbs,
  };

-  ReactDOM.render(<UptimeApp {...props} />, element);
+  ReactDOM.render(<UptimeApp {...props} />, appMountParameters.element);

  return () => {
-    ReactDOM.unmountComponentAtNode(element);
+    ReactDOM.unmountComponentAtNode(appMountParameters.element);
  };
 }
--- a/x-pack/plugins/uptime/public/apps/uptime_app.tsx
+++ b/x-pack/plugins/uptime/public/apps/uptime_app.tsx
@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import React, { useEffect } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Router } from 'react-router-dom';
-import { I18nStart, ChromeBreadcrumb, CoreStart } from 'kibana/public';
+import { I18nStart, ChromeBreadcrumb, CoreStart, AppMountParameters } from 'kibana/public';
 import {
  KibanaContextProvider,
  RedirectAppLinks,
@ -28,7 +28,7 @@ import { PageRouter } from '../routes';
 import { UptimeAlertsFlyoutWrapper } from '../components/overview/alerts';
 import { store } from '../state';
 import { kibanaService } from '../state/kibana_service';
-import { ScopedHistory } from '../../../../../src/core/public';
+import { ActionMenu } from '../components/common/header/action_menu';
 import { EuiThemeProvider } from '../../../observability/public';

 export interface UptimeAppColors {
@ -47,7 +47,6 @@ export interface UptimeAppProps {
  canSave: boolean;
  core: CoreStart;
  darkMode: boolean;
-  history: ScopedHistory;
  i18n: I18nStart;
  isApmAvailable: boolean;
  isInfraAvailable: boolean;
@ -58,6 +57,7 @@ export interface UptimeAppProps {
  renderGlobalHelpControls(): void;
  commonlyUsedRanges: CommonlyUsedRange[];
  setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
+  appMountParameters: AppMountParameters;
 }

 const Application = (props: UptimeAppProps) => {
@ -71,6 +71,7 @@ const Application = (props: UptimeAppProps) => {
    renderGlobalHelpControls,
    setBadge,
    startPlugins,
+    appMountParameters,
  } = props;

  useEffect(() => {
@ -101,7 +102,7 @@ const Application = (props: UptimeAppProps) => {
          <KibanaContextProvider
            services={{ ...core, ...plugins, triggersActionsUi: startPlugins.triggersActionsUi }}
          >
-            <Router history={props.history}>
+            <Router history={appMountParameters.history}>
              <EuiThemeProvider darkMode={darkMode}>
                <UptimeRefreshContextProvider>
                  <UptimeSettingsContextProvider {...props}>
@ -112,6 +113,7 @@ const Application = (props: UptimeAppProps) => {
                            <main>
                              <UptimeAlertsFlyoutWrapper />
                              <PageRouter />
+                              <ActionMenu appMountParameters={appMountParameters} />
                            </main>
                          </RedirectAppLinks>
                        </EuiPage>
--- a/x-pack/plugins/uptime/public/components/certificates/cert_refresh_btn.tsx
+++ b/x-pack/plugins/uptime/public/components/certificates/cert_refresh_btn.tsx
@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useContext } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHideFor,
+  EuiShowFor,
+} from '@elastic/eui';
+import * as labels from '../../pages/translations';
+import { UptimeRefreshContext } from '../../contexts';
+
+export const CertRefreshBtn = () => {
+  const { refreshApp } = useContext(UptimeRefreshContext);
+
+  return (
+    <EuiFlexItem style={{ alignItems: 'flex-end' }} grow={false}>
+      <EuiFlexGroup responsive={false} gutterSize="s">
+        <EuiFlexItem grow={false}>
+          <EuiHideFor sizes={['xs']}>
+            <EuiButton
+              fill
+              iconType="refresh"
+              onClick={() => {
+                refreshApp();
+              }}
+              data-test-subj="superDatePickerApplyTimeButton"
+            >
+              {labels.REFRESH_CERT}
+            </EuiButton>
+          </EuiHideFor>
+          <EuiShowFor sizes={['xs']}>
+            <EuiButtonEmpty
+              iconType="refresh"
+              onClick={() => {
+                refreshApp();
+              }}
+              data-test-subj="superDatePickerApplyTimeButton"
+            />
+          </EuiShowFor>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};
--- a/x-pack/plugins/uptime/public/components/common/header/tests/snapshots/page_header.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/common/header/tests/snapshots/page_header.test.tsx.snap
@ -107,97 +107,86 @@ Array [
 }

 <div
-    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
  >
    <div
      class="euiFlexItem"
    >
-      <h1
-        class="euiTitle euiTitle--medium eui-textNoWrap"
+      <div
+        class="euiTabs euiTabs--condensed"
+        role="tablist"
+        style="padding-left:16px"
      >
-        TestingHeading
-      </h1>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="uptimeSettingsToOverviewLink"
+          href="/"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Overview
+          </span>
+        </a>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="uptimeCertificatesLink"
+          href="/certificates"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Certificates
+          </span>
+        </a>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="settings-page-link"
+          href="/settings"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Settings
+          </span>
+        </a>
+      </div>
    </div>
    <div
      class="euiFlexItem euiFlexItem--flexGrowZero"
    >
      <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow"
+        class="euiPopover euiPopover--anchorDownCenter"
      >
        <div
-          class="euiFlexItem euiFlexItem--flexGrowZero"
-        >
-          <div
-            class="euiPopover euiPopover--anchorDownCenter"
-          >
-            <div
-              class="euiPopover__anchor"
-            >
-              <button
-                aria-label="Open alert context menu"
-                class="euiButtonEmpty euiButtonEmpty--primary"
-                data-test-subj="xpack.uptime.alertsPopover.toggleButton"
-                type="button"
-              >
-                <span
-                  class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                >
-                  <span
-                    class="euiButtonContent__icon"
-                    data-euiicon-type="arrowDown"
-                  />
-                  <span
-                    class="euiButtonEmpty__text"
-                  >
-                    Alerts
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrowZero"
-        >
-          <a
-            class="euiButtonEmpty euiButtonEmpty--primary"
-            data-test-subj="settings-page-link"
-            href="/settings"
-            rel="noreferrer"
-          >
-            <span
-              class="euiButtonContent euiButtonEmpty__content"
-            >
-              <span
-                class="euiButtonContent__icon"
-                data-euiicon-type="gear"
-              />
-              <span
-                class="euiButtonEmpty__text"
-              >
-                Settings
-              </span>
-            </span>
-          </a>
-        </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrowZero"
+          class="euiPopover__anchor"
        >
          <button
+            aria-label="Open alert context menu"
            class="euiButtonEmpty euiButtonEmpty--primary"
+            data-test-subj="xpack.uptime.alertsPopover.toggleButton"
            type="button"
          >
            <span
-              class="euiButtonContent euiButtonEmpty__content"
+              class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
            >
              <span
                class="euiButtonContent__icon"
-                data-euiicon-type="plusInCircle"
+                data-euiicon-type="arrowDown"
              />
              <span
                class="euiButtonEmpty__text"
              >
-                Add data
+                Alerts
              </span>
            </span>
          </button>
@ -308,7 +297,7 @@ Array [
 }

 <div
-    class="euiSpacer euiSpacer--s"
+    class="euiSpacer euiSpacer--m"
  />,
 ]
 `;
@ -420,16 +409,91 @@ Array [
 }

 <div
-    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
  >
    <div
      class="euiFlexItem"
    >
-      <h1
-        class="euiTitle euiTitle--medium eui-textNoWrap"
+      <div
+        class="euiTabs euiTabs--condensed"
+        role="tablist"
+        style="padding-left:16px"
      >
-        TestingHeading
-      </h1>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="uptimeSettingsToOverviewLink"
+          href="/"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Overview
+          </span>
+        </a>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="uptimeCertificatesLink"
+          href="/certificates"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Certificates
+          </span>
+        </a>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="settings-page-link"
+          href="/settings"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Settings
+          </span>
+        </a>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiPopover euiPopover--anchorDownCenter"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            aria-label="Open alert context menu"
+            class="euiButtonEmpty euiButtonEmpty--primary"
+            data-test-subj="xpack.uptime.alertsPopover.toggleButton"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                data-euiicon-type="arrowDown"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Alerts
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
    </div>
    <div
      class="euiFlexItem euiFlexItem--flexGrowZero c0"
@ -535,14 +599,22 @@ Array [
 }

 <div
-    class="euiSpacer euiSpacer--s"
+    class="euiSpacer euiSpacer--m"
  />,
 ]
 `;

 exports[`PageHeader shallow renders without the date picker: page_header_no_date_picker 1`] = `
 Array [
-  <div
+  @media only screen and (max-width:1024px) and (min-width:868px) {
+
+}
+
+@media only screen and (max-width:880px) {
+
+}
+
+<div
    class="euiCallOut euiCallOut--primary"
  >
    <div
@ -608,24 +680,228 @@ Array [
      </div>
    </div>
  </div>,
-  <div
+  @media only screen and (max-width:1024px) and (min-width:868px) {
+
+}
+
+@media only screen and (max-width:880px) {
+
+}
+
+<div
    class="euiSpacer euiSpacer--s"
  />,
-  <div
-    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
+  @media only screen and (max-width:1024px) and (min-width:868px) {
+  .c0.c0.c0 .euiSuperDatePicker__flexWrapper {
+    width: 500px;
+  }
+}
+
+@media only screen and (max-width:880px) {
+  .c0.c0.c0 {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+
+  .c0.c0.c0 .euiSuperDatePicker__flexWrapper {
+    width: calc(100% + 8px);
+  }
+}
+
+<div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
  >
    <div
      class="euiFlexItem"
    >
-      <h1
-        class="euiTitle euiTitle--medium eui-textNoWrap"
+      <div
+        class="euiTabs euiTabs--condensed"
+        role="tablist"
+        style="padding-left:16px"
      >
-        TestingHeading
-      </h1>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="uptimeSettingsToOverviewLink"
+          href="/"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Overview
+          </span>
+        </a>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="uptimeCertificatesLink"
+          href="/certificates"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Certificates
+          </span>
+        </a>
+        <a
+          aria-selected="false"
+          class="euiTab"
+          data-test-subj="settings-page-link"
+          href="/settings"
+          rel="noreferrer"
+          role="tab"
+        >
+          <span
+            class="euiTab__content"
+          >
+            Settings
+          </span>
+        </a>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiPopover euiPopover--anchorDownCenter"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            aria-label="Open alert context menu"
+            class="euiButtonEmpty euiButtonEmpty--primary"
+            data-test-subj="xpack.uptime.alertsPopover.toggleButton"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                data-euiicon-type="arrowDown"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Alerts
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero c0"
+      style="flex-basis:485px"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+      >
+        <div
+          class="euiFlexItem"
+        >
+          <div
+            class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+          >
+            <div
+              class="euiPopover euiPopover--anchorDownLeft"
+              id="QuickSelectPopover"
+            >
+              <div
+                class="euiPopover__anchor euiQuickSelectPopover__anchor"
+              >
+                <button
+                  aria-label="Date quick select"
+                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                  data-test-subj="superDatePickerToggleQuickMenuButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                  >
+                    <span
+                      class="euiButtonContent__icon"
+                      data-euiicon-type="arrowDown"
+                    />
+                    <span
+                      class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                    >
+                      <span
+                        data-euiicon-type="clock"
+                      />
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="euiFormControlLayout__childrenWrapper"
+            >
+              <div
+                class="euiDatePickerRange euiDatePickerRange--inGroup"
+              >
+                <button
+                  class="euiSuperDatePicker__prettyFormat"
+                  data-test-subj="superDatePickerShowDatesButton"
+                >
+                  Last 15 minutes
+                  <span
+                    class="euiSuperDatePicker__prettyFormatLink"
+                  >
+                    Show dates
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <span
+            class="euiToolTipAnchor"
+          >
+            <button
+              class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+              data-test-subj="superDatePickerApplyTimeButton"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButtonContent__icon"
+                  data-euiicon-type="refresh"
+                />
+                <span
+                  class="euiButton__text euiSuperUpdateButton__text"
+                >
+                  Refresh
+                </span>
+              </span>
+            </button>
+          </span>
+        </div>
+      </div>
    </div>
  </div>,
-  <div
-    class="euiSpacer euiSpacer--s"
+  @media only screen and (max-width:1024px) and (min-width:868px) {
+
+}
+
+@media only screen and (max-width:880px) {
+
+}
+
+<div
+    class="euiSpacer euiSpacer--m"
  />,
 ]
 `;
--- a/x-pack/plugins/uptime/public/components/common/header/tests/page_header.test.tsx
+++ b/x-pack/plugins/uptime/public/components/common/header/tests/page_header.test.tsx
@ -6,13 +6,13 @@

 import React from 'react';
 import { PageHeader } from '../page_header';
-import { renderWithRouter, MountWithReduxProvider } from '../../lib';
+import { renderWithRouter, MountWithReduxProvider } from '../../../../lib';

 describe('PageHeader', () => {
  it('shallow renders with the date picker', () => {
    const component = renderWithRouter(
      <MountWithReduxProvider>
-        <PageHeader headingText={'TestingHeading'} datePicker={true} />
+        <PageHeader />
      </MountWithReduxProvider>
    );
    expect(component).toMatchSnapshot('page_header_with_date_picker');
@ -21,7 +21,7 @@ describe('PageHeader', () => {
  it('shallow renders without the date picker', () => {
    const component = renderWithRouter(
      <MountWithReduxProvider>
-        <PageHeader headingText={'TestingHeading'} datePicker={false} />
+        <PageHeader />
      </MountWithReduxProvider>
    );
    expect(component).toMatchSnapshot('page_header_no_date_picker');
@ -30,7 +30,7 @@ describe('PageHeader', () => {
  it('shallow renders extra links', () => {
    const component = renderWithRouter(
      <MountWithReduxProvider>
-        <PageHeader headingText={'TestingHeading'} extraLinks={true} datePicker={true} />
+        <PageHeader />
      </MountWithReduxProvider>
    );
    expect(component).toMatchSnapshot('page_header_with_extra_links');
--- a/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx
+++ b/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx
@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { HeaderMenuPortal } from '../../../../../observability/public';
+import { AppMountParameters } from '../../../../../../../src/core/public';
+
+const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
+  defaultMessage: 'Add data',
+});
+
+export const ActionMenu = ({ appMountParameters }: { appMountParameters: AppMountParameters }) => {
+  const kibana = useKibana();
+
+  return (
+    <HeaderMenuPortal setHeaderActionMenu={appMountParameters.setHeaderActionMenu}>
+      <EuiFlexGroup alignItems="flexEnd" responsive={false} style={{ paddingRight: 20 }}>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
+            color="primary"
+            iconType="indexOpen"
+          >
+            {ADD_DATA_LABEL}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </HeaderMenuPortal>
+  );
+};
--- a/x-pack/plugins/uptime/public/components/common/header/page_header.tsx
+++ b/x-pack/plugins/uptime/public/components/common/header/page_header.tsx
@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import styled from 'styled-components';
+import { useRouteMatch } from 'react-router-dom';
+import { UptimeDatePicker } from '../uptime_date_picker';
+import { SyntheticsCallout } from '../../overview/synthetics_callout';
+import { PageTabs } from './page_tabs';
+import { CERTIFICATES_ROUTE, MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants';
+import { CertRefreshBtn } from '../../certificates/cert_refresh_btn';
+import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers';
+
+const StyledPicker = styled(EuiFlexItem)`
+  &&& {
+    @media only screen and (max-width: 1024px) and (min-width: 868px) {
+      .euiSuperDatePicker__flexWrapper {
+        width: 500px;
+      }
+    }
+    @media only screen and (max-width: 880px) {
+      flex-grow: 1;
+      .euiSuperDatePicker__flexWrapper {
+        width: calc(100% + 8px);
+      }
+    }
+  }
+`;
+
+export const PageHeader = () => {
+  const isCertRoute = useRouteMatch(CERTIFICATES_ROUTE);
+  const isSettingsRoute = useRouteMatch(SETTINGS_ROUTE);
+
+  const DatePickerComponent = () =>
+    isCertRoute ? (
+      <CertRefreshBtn />
+    ) : (
+      <StyledPicker grow={false} style={{ flexBasis: 485 }}>
+        <UptimeDatePicker />
+      </StyledPicker>
+    );
+
+  const isMonRoute = useRouteMatch(MONITOR_ROUTE);
+
+  return (
+    <>
+      <SyntheticsCallout />
+      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" wrap responsive={false}>
+        <EuiFlexItem>
+          <PageTabs />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <ToggleAlertFlyoutButton />
+        </EuiFlexItem>
+        {!isSettingsRoute && <DatePickerComponent />}
+      </EuiFlexGroup>
+      {isMonRoute && <EuiHorizontalRule margin="m" />}
+      {!isMonRoute && <EuiSpacer size="m" />}
+    </>
+  );
+};
--- a/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx
+++ b/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx
@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { EuiTabs, EuiTab } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import { CERTIFICATES_ROUTE, OVERVIEW_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants';
+
+const tabs = [
+  {
+    id: OVERVIEW_ROUTE,
+    name: i18n.translate('xpack.uptime.overviewPage.headerText', {
+      defaultMessage: 'Overview',
+      description: `The text that will be displayed in the app's heading when the Overview page loads.`,
+    }),
+    dataTestSubj: 'uptimeSettingsToOverviewLink',
+  },
+  {
+    id: CERTIFICATES_ROUTE,
+    name: 'Certificates',
+    dataTestSubj: 'uptimeCertificatesLink',
+  },
+  {
+    id: SETTINGS_ROUTE,
+    dataTestSubj: 'settings-page-link',
+    name: i18n.translate('xpack.uptime.page_header.settingsLink', {
+      defaultMessage: 'Settings',
+    }),
+  },
+];
+
+export const PageTabs = () => {
+  const [selectedTabId, setSelectedTabId] = useState<string | null>(null);
+
+  const history = useHistory();
+
+  const isOverView = useRouteMatch(OVERVIEW_ROUTE);
+  const isSettings = useRouteMatch(SETTINGS_ROUTE);
+  const isCerts = useRouteMatch(CERTIFICATES_ROUTE);
+
+  useEffect(() => {
+    if (isOverView?.isExact) {
+      setSelectedTabId(OVERVIEW_ROUTE);
+    }
+    if (isCerts) {
+      setSelectedTabId(CERTIFICATES_ROUTE);
+    }
+    if (isSettings) {
+      setSelectedTabId(SETTINGS_ROUTE);
+    }
+    if (!isOverView?.isExact && !isCerts && !isSettings) {
+      setSelectedTabId(null);
+    }
+  }, [isCerts, isSettings, isOverView]);
+
+  const renderTabs = () => {
+    return tabs.map(({ dataTestSubj, name, id }, index) => (
+      <EuiTab
+        onClick={() => setSelectedTabId(id)}
+        isSelected={id === selectedTabId}
+        key={index}
+        data-test-subj={dataTestSubj}
+        href={history.createHref({ pathname: id })}
+      >
+        {name}
+      </EuiTab>
+    ));
+  };
+
+  return (
+    <EuiTabs display="condensed" style={{ paddingLeft: 16 }}>
+      {renderTabs()}
+    </EuiTabs>
+  );
+};
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/tests/snapshots/monitor_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/tests/snapshots/monitor_list.test.tsx.snap
@ -826,26 +826,20 @@ exports[`MonitorList component renders loading state 1`] = `
 `;

 exports[`MonitorList component renders the monitor list 1`] = `
-.c3 {
+.c2 {
  padding-right: 4px;
 }

-.c4 {
+.c3 {
  padding-top: 12px;
 }

-.c1 {
-  position: absolute;
-  right: 16px;
-  top: 16px;
-}
-
 .c0 {
  position: relative;
 }

@media (max-width:574px) {
-  .c2 {
+  .c1 {
    min-width: 230px;
  }
 }
@ -936,13 +930,6 @@ exports[`MonitorList component renders the monitor list 1`] = `
        </button>
      </div>
    </div>
-    <a
-      class="c1"
-      data-test-subj="uptimeCertificatesLink"
-      href="/certificates"
-    >
-      Certificates status
-    </a>
  </div>
  <div
    class="euiSpacer euiSpacer--m"
@ -1108,7 +1095,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
              >
                <div>
                  <div
-                    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c2"
+                    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
                  >
                    <div
                      class="euiFlexItem euiFlexItem--flexGrowZero"
@ -1134,7 +1121,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                      class="euiToolTipAnchor"
                    >
                      <div
-                        class="euiText euiText--extraSmall c3 eui-textNoWrap"
+                        class="euiText euiText--extraSmall c2 eui-textNoWrap"
                      >
                        <div
                          class="euiTextColor euiTextColor--subdued"
@ -1347,7 +1334,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
              >
                <div>
                  <div
-                    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c2"
+                    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
                  >
                    <div
                      class="euiFlexItem euiFlexItem--flexGrowZero"
@ -1373,7 +1360,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                      class="euiToolTipAnchor"
                    >
                      <div
-                        class="euiText euiText--extraSmall c3 eui-textNoWrap"
+                        class="euiText euiText--extraSmall c2 eui-textNoWrap"
                      >
                        <div
                          class="euiTextColor euiTextColor--subdued"
@ -1622,7 +1609,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
        >
          <button
            aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
-            class="euiButtonIcon euiButtonIcon--text c4"
+            class="euiButtonIcon euiButtonIcon--text c3"
            data-test-subj="xpack.uptime.monitorList.prevButton"
            disabled=""
            type="button"
@ -1639,7 +1626,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
        >
          <button
            aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
-            class="euiButtonIcon euiButtonIcon--text c4"
+            class="euiButtonIcon euiButtonIcon--text c3"
            data-test-subj="xpack.uptime.monitorList.nextButton"
            disabled=""
            type="button"
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/tests/enable_alert.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/tests/enable_alert.test.tsx
@ -14,6 +14,7 @@ import {
 } from '../../../../../lib';
 import { EuiPopover, EuiText } from '@elastic/eui';
 import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../../../../common/constants';
+import { ReactRouterEuiLink } from '../../../../common/react_router_helpers';

 describe('EnableAlertComponent', () => {
  let defaultConnectors: string[] = [];
@ -66,6 +67,32 @@ describe('EnableAlertComponent', () => {
    expect(wrapper.find(EuiText).text()).toBe(
      'To start enabling alerts, please define a default alert action connector in Settings'
    );
+    expect(wrapper.find(ReactRouterEuiLink)).toMatchInlineSnapshot(`
+      <ReactRouterEuiLink
+        data-test-subj="uptimeSettingsLink"
+        to="/settings?focusConnectorField=true"
+      >
+        <ReactRouterHelperForEui
+          to="/settings?focusConnectorField=true"
+        >
+          <EuiLink
+            data-test-subj="uptimeSettingsLink"
+            href="/settings?focusConnectorField=true"
+            onClick={[Function]}
+          >
+            <a
+              className="euiLink euiLink--primary"
+              data-test-subj="uptimeSettingsLink"
+              href="/settings?focusConnectorField=true"
+              onClick={[Function]}
+              rel="noreferrer"
+            >
+              Settings
+            </a>
+          </EuiLink>
+        </ReactRouterHelperForEui>
+      </ReactRouterEuiLink>
+    `);
  });

  it('does not displays define connectors when there is connector', () => {
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/columns/define_connectors.tsx
@ -7,11 +7,15 @@
 import React, { useState } from 'react';
 import { EuiPopover, EuiSwitch, EuiText } from '@elastic/eui';
 import { useRouteMatch } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ReactRouterEuiLink } from '../../../common/react_router_helpers';
 import { MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../../common/constants';
 import { ENABLE_STATUS_ALERT } from './translations';
-import { SETTINGS_LINK_TEXT } from '../../../../pages/page_header';
+
+const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink', {
+  defaultMessage: 'Settings',
+});

 export const DefineAlertConnectors = () => {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
@ -7,16 +7,8 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { StatusFilter } from './status_filter';
-import { CERTIFICATES_ROUTE } from '../../../../common/constants';
-
-const LinkStyle = styled(Link)`
-  position: absolute;
-  right: 16px;
-  top: 16px;
-`;

 const FlexGroupContainer = styled(EuiFlexGroup)`
  position: relative;
@ -38,12 +30,6 @@ export const MonitorListHeader: React.FC = () => {
      <EuiFlexItem grow={false}>
        <StatusFilter />
      </EuiFlexItem>
-      <LinkStyle to={CERTIFICATES_ROUTE} data-test-subj="uptimeCertificatesLink">
-        <FormattedMessage
-          id="xpack.uptime.monitorList.viewCertificateTitle"
-          defaultMessage="Certificates status"
-        />
-      </LinkStyle>
    </FlexGroupContainer>
  );
 };
--- a/x-pack/plugins/uptime/public/pages/certificates.tsx
+++ b/x-pack/plugins/uptime/public/pages/certificates.tsx
@ -5,31 +5,15 @@
 */

 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-  EuiSpacer,
-  EuiHideFor,
-  EuiShowFor,
-} from '@elastic/eui';
+import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import React, { useContext, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useTrackPageview } from '../../../observability/public';
-import { PageHeader } from './page_header';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
-import { OVERVIEW_ROUTE, SETTINGS_ROUTE } from '../../common/constants';
 import { getDynamicSettings } from '../state/actions/dynamic_settings';
 import { UptimeRefreshContext } from '../contexts';
-import * as labels from './translations';
 import { certificatesSelector, getCertificatesAction } from '../state/certificates/certificates';
 import { CertificateList, CertificateSearch, CertSort } from '../components/certificates';
-import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
-import { CLIENT_ALERT_TYPES } from '../../common/constants/alerts';
-import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers';

 const DEFAULT_PAGE_SIZE = 10;
 const LOCAL_STORAGE_KEY = 'xpack.uptime.certList.pageSize';
@ -56,7 +40,7 @@ export const CertificatesPage: React.FC = () => {

  const dispatch = useDispatch();

-  const { lastRefresh, refreshApp } = useContext(UptimeRefreshContext);
+  const { lastRefresh } = useContext(UptimeRefreshContext);

  useEffect(() => {
    dispatch(getDynamicSettings());
@ -74,90 +58,33 @@ export const CertificatesPage: React.FC = () => {
  }, [dispatch, page, search, sort.direction, sort.field, lastRefresh]);

  const { data: certificates } = useSelector(certificatesSelector);
-  const history = useHistory();

  return (
-    <>
-      <EuiFlexGroup responsive={false} gutterSize="s">
-        <EuiFlexItem grow={false} style={{ marginRight: 'auto', alignSelf: 'center' }}>
-          <ReactRouterEuiButtonEmpty
-            color="primary"
-            data-test-subj="uptimeCertificatesToOverviewLink"
-            to={OVERVIEW_ROUTE}
-            iconType="arrowLeft"
-            size="s"
-            aria-label={labels.RETURN_TO_OVERVIEW}
-          >
-            {labels.RETURN_TO_OVERVIEW}
-          </ReactRouterEuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <ToggleAlertFlyoutButton alertOptions={[CLIENT_ALERT_TYPES.TLS]} />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
-          <EuiButtonEmpty
-            aria-label={labels.SETTINGS_ON_CERT}
-            color="primary"
-            data-test-subj="uptimeCertificatesToOverviewLink"
-            iconType="gear"
-            href={history.createHref({ pathname: SETTINGS_ROUTE })}
-            size="s"
-          >
-            <EuiHideFor sizes={['xs']}> {labels.SETTINGS_ON_CERT}</EuiHideFor>
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiHideFor sizes={['xs']}>
-            <EuiButton
-              fill
-              iconType="refresh"
-              onClick={() => {
-                refreshApp();
-              }}
-              data-test-subj="superDatePickerApplyTimeButton"
-            >
-              {labels.REFRESH_CERT}
-            </EuiButton>
-          </EuiHideFor>
-          <EuiShowFor sizes={['xs']}>
-            <EuiButtonEmpty
-              iconType="refresh"
-              onClick={() => {
-                refreshApp();
-              }}
-              data-test-subj="superDatePickerApplyTimeButton"
-            />
-          </EuiShowFor>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+    <EuiPanel>
+      <EuiTitle>
+        <h1 className="eui-textNoWrap">
+          <FormattedMessage
+            id="xpack.uptime.certificates.heading"
+            defaultMessage="TLS Certificates ({total})"
+            values={{
+              total: <span data-test-subj="uptimeCertTotal">{certificates?.total ?? 0}</span>,
+            }}
+          />
+        </h1>
+      </EuiTitle>

      <EuiSpacer size="m" />
-      <EuiPanel>
-        <PageHeader
-          headingText={
-            <FormattedMessage
-              id="xpack.uptime.certificates.heading"
-              defaultMessage="TLS Certificates ({total})"
-              values={{
-                total: <span data-test-subj="uptimeCertTotal">{certificates?.total ?? 0}</span>,
-              }}
-            />
-          }
-          datePicker={false}
-        />
-        <EuiSpacer size="m" />
-        <CertificateSearch setSearch={setSearch} />
-        <EuiSpacer size="m" />
-        <CertificateList
-          page={page}
-          onChange={(pageVal, sortVal) => {
-            setPage(pageVal);
-            setSort(sortVal);
-            localStorage.setItem(LOCAL_STORAGE_KEY, pageVal.size.toString());
-          }}
-          sort={sort}
-        />
-      </EuiPanel>
-    </>
+      <CertificateSearch setSearch={setSearch} />
+      <EuiSpacer size="m" />
+      <CertificateList
+        page={page}
+        onChange={(pageVal, sortVal) => {
+          setPage(pageVal);
+          setSort(sortVal);
+          localStorage.setItem(LOCAL_STORAGE_KEY, pageVal.size.toString());
+        }}
+        sort={sort}
+      />
+    </EuiPanel>
  );
 };
--- a/x-pack/plugins/uptime/public/pages/monitor.tsx
+++ b/x-pack/plugins/uptime/public/pages/monitor.tsx
@ -4,11 +4,10 @@
 * you may not use this file except in compliance with the Elastic License.
 */

-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { monitorStatusSelector } from '../state/selectors';
-import { PageHeader } from './page_header';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
 import { useTrackPageview } from '../../../observability/public';
 import { useMonitorId } from '../hooks';
@ -61,22 +60,23 @@ export const MonitorPage: React.FC = () => {

  const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor);
  useBreadcrumbs([{ text: nameOrId }]);
+
  return (
    <>
-      <PageHeader
-        headingText={
-          <EuiFlexGroup wrap={false}>
-            <EuiFlexItem grow={false}>{nameOrId}</EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EnableMonitorAlert
-                monitorId={monitorId}
-                monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        }
-        datePicker={true}
-      />
+      <EuiFlexGroup wrap={false}>
+        <EuiFlexItem grow={false}>
+          <EuiTitle>
+            <h1 className="eui-textNoWrap">{nameOrId}</h1>
+          </EuiTitle>
+          <EuiSpacer size="xs" />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
+          <EnableMonitorAlert
+            monitorId={monitorId}
+            monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
      <EuiSpacer size="s" />
      <MonitorStatusDetails monitorId={monitorId} />
      <EuiSpacer size="s" />
--- a/x-pack/plugins/uptime/public/pages/overview.tsx
+++ b/x-pack/plugins/uptime/public/pages/overview.tsx
@ -10,7 +10,6 @@ import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { useDispatch } from 'react-redux';
 import { useGetUrlParams } from '../hooks';
-import { PageHeader } from './page_header';
 import { IIndexPattern } from '../../../../../src/plugins/data/public';
 import { useUpdateKueryString } from '../hooks';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
@ -62,16 +61,10 @@ export const OverviewPageComponent = React.memo(
      dispatch(getMonitorAlertsAction.get());
    }, [dispatch]);

-    const heading = i18n.translate('xpack.uptime.overviewPage.headerText', {
-      defaultMessage: 'Overview',
-      description: `The text that will be displayed in the app's heading when the Overview page loads.`,
-    });
-
    useBreadcrumbs([]); // No extra breadcrumbs on overview

    return (
      <>
-        <PageHeader headingText={heading} extraLinks={true} datePicker={true} />
        <EmptyState>
          <EuiFlexGroup gutterSize="xs" wrap responsive={false}>
            <EuiFlexItem grow={1} style={{ flexBasis: 485 }}>
@ -87,7 +80,7 @@ export const OverviewPageComponent = React.memo(
            </EuiFlexItemStyled>
            {error && !loading && <ParsingErrorCallout error={error} />}
          </EuiFlexGroup>
-          <EuiSpacer size="s" />
+          <EuiSpacer size="xs" />
          <StatusPanel />
          <EuiSpacer size="s" />
          <MonitorList filters={esFilters} />
--- a/x-pack/plugins/uptime/public/pages/page_header.tsx
+++ b/x-pack/plugins/uptime/public/pages/page_header.tsx
@ -1,107 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import styled from 'styled-components';
-import { UptimeDatePicker } from '../components/common/uptime_date_picker';
-import { SETTINGS_ROUTE } from '../../common/constants';
-import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
-import { useKibana } from '../../../../../src/plugins/kibana_react/public';
-import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers';
-import { SyntheticsCallout } from '../components/overview/synthetics_callout';
-
-interface PageHeaderProps {
-  headingText: string | JSX.Element;
-  extraLinks?: boolean;
-  datePicker?: boolean;
-}
-
-export const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink', {
-  defaultMessage: 'Settings',
-});
-
-const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
-  defaultMessage: 'Add data',
-});
-
-const StyledPicker = styled(EuiFlexItem)`
-  &&& {
-    @media only screen and (max-width: 1024px) and (min-width: 868px) {
-      .euiSuperDatePicker__flexWrapper {
-        width: 500px;
-      }
-    }
-    @media only screen and (max-width: 880px) {
-      flex-grow: 1;
-      .euiSuperDatePicker__flexWrapper {
-        width: calc(100% + 8px);
-      }
-    }
-  }
-`;
-
-export const PageHeader = React.memo(
-  ({ headingText, extraLinks = false, datePicker = true }: PageHeaderProps) => {
-    const DatePickerComponent = () =>
-      datePicker ? (
-        <StyledPicker grow={false} style={{ flexBasis: 485 }}>
-          <UptimeDatePicker />
-        </StyledPicker>
-      ) : null;
-
-    const kibana = useKibana();
-
-    const extraLinkComponents = !extraLinks ? null : (
-      <EuiFlexGroup alignItems="flexEnd" responsive={false}>
-        <EuiFlexItem grow={false}>
-          <ToggleAlertFlyoutButton />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <ReactRouterEuiButtonEmpty
-            data-test-subj="settings-page-link"
-            iconType="gear"
-            to={SETTINGS_ROUTE}
-          >
-            {SETTINGS_LINK_TEXT}
-          </ReactRouterEuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
-            color="primary"
-            iconType="plusInCircle"
-          >
-            {ADD_DATA_LABEL}
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-
-    return (
-      <>
-        <SyntheticsCallout />
-        <EuiFlexGroup
-          alignItems="center"
-          justifyContent="spaceBetween"
-          gutterSize="s"
-          wrap
-          responsive={false}
-        >
-          <EuiFlexItem grow={true}>
-            <EuiTitle>
-              <h1 className="eui-textNoWrap">{headingText}</h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          {extraLinks && <EuiFlexItem grow={false}>{extraLinkComponents}</EuiFlexItem>}
-          <DatePickerComponent />
-        </EuiFlexGroup>
-        <EuiSpacer size="s" />
-      </>
-    );
-  }
-);
--- a/x-pack/plugins/uptime/public/pages/settings.tsx
+++ b/x-pack/plugins/uptime/public/pages/settings.tsx
@ -21,7 +21,6 @@ import { selectDynamicSettings } from '../state/selectors';
 import { getDynamicSettings, setDynamicSettings } from '../state/actions/dynamic_settings';
 import { DynamicSettings } from '../../common/runtime_types';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
-import { OVERVIEW_ROUTE } from '../../common/constants';
 import { useKibana } from '../../../../../src/plugins/kibana_react/public';
 import { IndicesForm } from '../components/settings/indices_form';
 import {
@ -33,7 +32,6 @@ import {
  VALUE_MUST_BE_GREATER_THAN_ZERO,
  VALUE_MUST_BE_AN_INTEGER,
 } from '../../common/translations';
-import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers';
 import { AlertDefaultsForm } from '../components/settings/alert_defaults_form';

 interface SettingsPageFieldErrors {
@ -147,17 +145,8 @@ export const SettingsPage: React.FC = () => {

  return (
    <>
-      <ReactRouterEuiButtonEmpty
-        color="primary"
-        data-test-subj="uptimeSettingsToOverviewLink"
-        iconType="arrowLeft"
-        to={OVERVIEW_ROUTE}
-        size="s"
-      >
-        {Translations.settings.returnToOverviewLinkLabel}
-      </ReactRouterEuiButtonEmpty>
      <EuiSpacer size="s" />
-      <EuiPanel>
+      <EuiPanel style={{ maxWidth: 1000, margin: 'auto' }}>
        <EuiFlexGroup>
          <EuiFlexItem grow={false}>{cannotEditNotice}</EuiFlexItem>
        </EuiFlexGroup>
--- a/x-pack/plugins/uptime/public/pages/translations.ts
+++ b/x-pack/plugins/uptime/public/pages/translations.ts
@ -6,17 +6,6 @@

 import { i18n } from '@kbn/i18n';

-export const SETTINGS_ON_CERT = i18n.translate('xpack.uptime.certificates.settingsLinkLabel', {
-  defaultMessage: 'Settings',
-});
-
-export const RETURN_TO_OVERVIEW = i18n.translate(
-  'xpack.uptime.certificates.returnToOverviewLinkLabel',
-  {
-    defaultMessage: 'Return to overview',
-  }
-);
-
 export const REFRESH_CERT = i18n.translate('xpack.uptime.certificates.refresh', {
  defaultMessage: 'Refresh',
 });
@ -32,9 +21,6 @@ export const settings = {
    defaultMessage:
      "Your user currently has 'Read' permissions for the Uptime app. Enable a permissions-level of 'All' to edit these settings.",
  }),
-  returnToOverviewLinkLabel: i18n.translate('xpack.uptime.settings.returnToOverviewLinkLabel', {
-    defaultMessage: 'Return to overview',
-  }),
  mustBeNumber: i18n.translate('xpack.uptime.settings.blankNumberField.error', {
    defaultMessage: 'Must be a number.',
  }),
--- a/x-pack/plugins/uptime/public/routes.tsx
+++ b/x-pack/plugins/uptime/public/routes.tsx
@ -16,6 +16,7 @@ import {
 import { MonitorPage, NotFoundPage, SettingsPage } from './pages';
 import { CertificatesPage } from './pages/certificates';
 import { UptimePage, useUptimeTelemetry } from './hooks';
+import { PageHeader } from './components/common/header/page_header';

 interface RouteProps {
  path: string;
@ -72,16 +73,19 @@ const RouteInit: React.FC<Pick<RouteProps, 'path' | 'title' | 'telemetryId'>> =

 export const PageRouter: FC = () => {
  return (
-    <Switch>
-      {Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => (
-        <Route path={path} key={telemetryId}>
-          <div data-test-subj={dataTestSubj}>
-            <RouteInit title={title} path={path} telemetryId={telemetryId} />
-            <RouteComponent />
-          </div>
-        </Route>
-      ))}
-      <Route component={NotFoundPage} />
-    </Switch>
+    <>
+      <PageHeader />
+      <Switch>
+        {Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => (
+          <Route path={path} key={telemetryId} exact={true}>
+            <div data-test-subj={dataTestSubj}>
+              <RouteInit title={title} path={path} telemetryId={telemetryId} />
+              <RouteComponent />
+            </div>
+          </Route>
+        ))}
+        <Route component={NotFoundPage} />
+      </Switch>
+    </>
  );
 };
--- a/x-pack/test/functional/services/uptime/overview.ts
+++ b/x-pack/test/functional/services/uptime/overview.ts
@ -8,6 +8,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';

 export function UptimeOverviewProvider({ getService }: FtrProviderContext) {
  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');

  return {
    async expandMonitorDetail(id: string): Promise<void> {
@ -24,15 +25,20 @@ export function UptimeOverviewProvider({ getService }: FtrProviderContext) {
     * Otherwise, open the popover, then click the nested button.
     */
    async navigateToNestedPopover(): Promise<void> {
-      if (testSubjects.exists('xpack.uptime.openAlertContextPanel')) {
+      if (await testSubjects.exists('xpack.uptime.openAlertContextPanel')) {
        return testSubjects.click('xpack.uptime.openAlertContextPanel');
      }
      await testSubjects.click('xpack.uptime.alertsPopover.toggleButton');
      return testSubjects.click('xpack.uptime.openAlertContextPanel');
    },

-    async displaysDefineConnector() {
-      return await testSubjects.existOrFail('uptimeSettingsDefineConnector');
+    async clickDefineSettings() {
+      return retry.tryForTime(60 * 1000, async () => {
+        if (await testSubjects.exists('errorToastMessage', { timeout: 0 })) {
+          await testSubjects.click('toastCloseButton');
+        }
+        await testSubjects.click('uptimeSettingsLink');
+      });
    },
  };
 }
--- a/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts
@ -25,6 +25,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
    const DEFAULT_DATE_START = 'Sep 10, 2019 @ 12:40:08.078';
    const DEFAULT_DATE_END = 'Sep 11, 2019 @ 19:40:08.078';

+    const hideErrorToast = async () => {
+      if (await testSubjects.exists('errorToastMessage', { timeout: 0 })) {
+        await testSubjects.click('toastCloseButton');
+      }
+    };
+
    before(async () => {
      // delete the saved object
      await deleteUptimeSettingsObject(server);
@ -39,12 +45,13 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
    });

    it('displays to define default connector', async () => {
+      await hideErrorToast();
      await testSubjects.click('uptimeDisplayDefineConnector');
      await testSubjects.existOrFail('uptimeSettingsDefineConnector');
    });

    it('go to settings to define connector', async () => {
-      await testSubjects.click('uptimeSettingsLink');
+      await uptimeService.overview.clickDefineSettings();
      await uptimeService.common.waitUntilDataIsLoaded();
      await testSubjects.existOrFail('comboBoxInput');
    });