[Watcher] Migrate to use new page layout (#101956)

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

@@ -24295,8 +24295,6 @@
     "xpack.watcher.sections.watchEdit.json.titlePanel.editWatchTitle": "{watchName}を編集",
     "xpack.watcher.sections.watchEdit.loadingWatchDescription": "ウォッチの読み込み中…",
     "xpack.watcher.sections.watchEdit.loadingWatchVisualizationDescription": "ウォッチビジュアライゼーションを読み込み中…",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText": "ウォッチ'{watchName}'はシステムウォッチであるため、編集できません。{watchStatusLink}",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText": "このウォッチは編集できません。",
     "xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle": "ウォッチステータスを表示します。",
     "xpack.watcher.sections.watchEdit.simulate.form.actionModesFieldLabel": "アクションモード",
     "xpack.watcher.sections.watchEdit.simulate.form.actionOverridesDescription": "ウォッチでアクションを実行またはスキップすることができるようにします。{actionsLink}",

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

@@ -24665,8 +24665,6 @@
     "xpack.watcher.sections.watchEdit.json.titlePanel.editWatchTitle": "编辑 {watchName}",
     "xpack.watcher.sections.watchEdit.loadingWatchDescription": "正在加载监视……",
     "xpack.watcher.sections.watchEdit.loadingWatchVisualizationDescription": "正在加载监视可视化……",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText": "监视“{watchName}”为系统监视，无法编辑。{watchStatusLink}",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText": "此监视无法编辑。",
     "xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle": "查看监视状态。",
     "xpack.watcher.sections.watchEdit.simulate.form.actionModesFieldLabel": "操作模式",
     "xpack.watcher.sections.watchEdit.simulate.form.actionOverridesDescription": "允许监视执行或跳过操作。{actionsLink}",

x-pack/plugins/watcher/public/application/app.tsx

@@ -17,7 +17,7 @@ import {
 
 import { Router, Switch, Route, Redirect, withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -62,24 +62,30 @@ export const App = (deps: AppDeps) => {
 
   if (!valid) {
     return (
-      <EuiCallOut
-        title={
-          <FormattedMessage
-            id="xpack.watcher.app.licenseErrorTitle"
-            defaultMessage="License error"
-          />
-        }
-        color="danger"
-        iconType="help"
-      >
-        {message}{' '}
-        <EuiLink href={deps.getUrlForApp('management', { path: 'stack/license_management/home' })}>
-          <FormattedMessage
-            id="xpack.watcher.app.licenseErrorLinkText"
-            defaultMessage="Manage your license."
-          />
-        </EuiLink>
-      </EuiCallOut>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+        <EuiEmptyPrompt
+          iconType="alert"
+          title={
+            <h1>
+              <FormattedMessage
+                id="xpack.watcher.app.licenseErrorTitle"
+                defaultMessage="License error"
+              />
+            </h1>
+          }
+          body={<p>{message}</p>}
+          actions={[
+            <EuiLink
+              href={deps.getUrlForApp('management', { path: 'stack/license_management/home' })}
+            >
+              <FormattedMessage
+                id="xpack.watcher.app.licenseErrorLinkText"
+                defaultMessage="Manage your license"
+              />
+            </EuiLink>,
+          ]}
+        />
+      </EuiPageContent>
     );
   }
   return (

x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx

@@ -25,7 +25,7 @@ export function getPageErrorCode(errorOrErrors: any) {
   }
 }
 
-export function PageError({ errorCode, id }: { errorCode?: any; id?: any }) {
+export function PageError({ errorCode, id }: { errorCode?: number; id?: string }) {
   switch (errorCode) {
     case 404:
       return <PageErrorNotExist id={id} />;

x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx

@@ -13,8 +13,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 export function PageErrorForbidden() {
   return (
     <EuiEmptyPrompt
-      iconType="securityApp"
-      iconColor={undefined}
+      iconType="alert"
       title={
         <h1>
           <FormattedMessage

x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx

@@ -10,11 +10,10 @@ import React from 'react';
 import { EuiEmptyPrompt } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function PageErrorNotExist({ id }: { id: any }) {
+export function PageErrorNotExist({ id }: { id?: string }) {
   return (
     <EuiEmptyPrompt
-      iconType="search"
-      iconColor="primary"
+      iconType="alert"
       title={
         <h1>
           <FormattedMessage
@@ -25,11 +24,18 @@ export function PageErrorNotExist({ id }: { id: any }) {
       }
       body={
         <p>
-          <FormattedMessage
-            id="xpack.watcher.pageErrorNotExist.description"
-            defaultMessage="A watch with ID '{id}' could not be found."
-            values={{ id }}
-          />
+          {id ? (
+            <FormattedMessage
+              id="xpack.watcher.pageErrorNotExist.description"
+              defaultMessage="A watch with ID '{id}' could not be found."
+              values={{ id }}
+            />
+          ) : (
+            <FormattedMessage
+              id="xpack.watcher.pageErrorNotExist.noWatchIdDescription"
+              defaultMessage="A watch could not be found."
+            />
+          )}
         </p>
       }
     />

x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx

@@ -7,15 +7,7 @@
 
 import React, { useContext, useState } from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiSpacer, EuiPageContentBody } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ExecuteDetails } from '../../../../models/execute_details';
 import { getActionType } from '../../../../../../common/lib/get_action_type';
@@ -96,36 +88,31 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   const hasExecuteWatchErrors = !!Object.keys(executeWatchErrors).find(
     (errorKey) => executeWatchErrors[errorKey].length >= 1
   );
+
   return (
-    <EuiPageContent>
-      <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1 data-test-subj="pageTitle">{pageTitle}</h1>
-          </EuiTitle>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiTabs>
-        {WATCH_TABS.map((tab, index) => (
-          <EuiTab
-            onClick={() => {
-              setSelectedTab(tab.id);
-              setExecuteDetails(
-                new ExecuteDetails({
-                  ...executeDetails,
-                  actionModes: getActionModes(watchActions),
-                })
-              );
-            }}
-            isSelected={tab.id === selectedTab}
-            key={index}
-            data-test-subj="tab"
-          >
-            {tab.name}
-          </EuiTab>
-        ))}
-      </EuiTabs>
+    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+      <EuiPageHeader
+        pageTitle={<span data-test-subj="pageTitle">{pageTitle}</span>}
+        bottomBorder
+        tabs={WATCH_TABS.map((tab, index) => ({
+          onClick: () => {
+            setSelectedTab(tab.id);
+            setExecuteDetails(
+              new ExecuteDetails({
+                ...executeDetails,
+                actionModes: getActionModes(watchActions),
+              })
+            );
+          },
+          isSelected: tab.id === selectedTab,
+          key: index,
+          'data-test-subj': 'tab',
+          label: tab.name,
+        }))}
+      />
+
       <EuiSpacer size="l" />
+
       {selectedTab === WATCH_SIMULATE_TAB && (
         <JsonWatchEditSimulate
           executeDetails={executeDetails}
@@ -135,7 +122,8 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
           watchActions={watchActions}
         />
       )}
+
       {selectedTab === WATCH_EDIT_TAB && <JsonWatchEditForm />}
-    </EuiPageContent>
+    </EuiPageContentBody>
   );
 };

x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx

@@ -7,16 +7,7 @@
 
 import React, { useContext } from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent,
-  EuiSpacer,
-  EuiTitle,
-  EuiCallOut,
-  EuiText,
-  EuiLink,
-} from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { WatchContext } from '../../watch_context';
 import { useAppContext } from '../../../../app_context';
@@ -27,46 +18,31 @@ export const MonitoringWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   const { watch } = useContext(WatchContext);
   const { history } = useAppContext();
 
-  const systemWatchTitle = (
-    <FormattedMessage
-      id="xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText"
-      defaultMessage="This watch cannot be edited."
-    />
-  );
-
   const systemWatchMessage = (
     <FormattedMessage
       id="xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText"
-      defaultMessage="Watch '{watchName}' is a system watch and cannot be edited. {watchStatusLink}"
+      defaultMessage="Watch '{watchName}' is a system watch and cannot be edited."
       values={{
         watchName: watch.name,
-        watchStatusLink: (
-          <EuiLink {...reactRouterNavigate(history, `/watches/watch/${watch.id}/status`)}>
-            <FormattedMessage
-              id="xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle"
-              defaultMessage="View watch status."
-            />
-          </EuiLink>
-        ),
       }}
     />
   );
 
   return (
-    <EuiPageContent>
-      <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1>{pageTitle}</h1>
-          </EuiTitle>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="s" />
-      <EuiCallOut title={systemWatchTitle} iconType="pin">
-        <EuiText>
-          <p>{systemWatchMessage}</p>
-        </EuiText>
-      </EuiCallOut>
+    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiEmptyPrompt
+        iconType=""
+        title={<h1>{pageTitle}</h1>}
+        body={<p>{systemWatchMessage}</p>}
+        actions={[
+          <EuiLink {...reactRouterNavigate(history, `/watches/watch/${watch.id}/status`)}>
+            <FormattedMessage
+              id="xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle"
+              defaultMessage="View watch status"
+            />
+          </EuiLink>,
+        ]}
+      />
     </EuiPageContent>
   );
 };

x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx

@@ -18,13 +18,14 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiPageContent,
   EuiPopover,
   EuiPopoverTitle,
   EuiSelect,
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiPageHeader,
+  EuiPageContentBody,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -236,19 +237,15 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   };
 
   return (
-    <EuiPageContent>
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1 data-test-subj="pageTitle">{pageTitle}</h1>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText size="s" color="subdued">
-            {watch.titleDescription}
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
+    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+      <EuiPageHeader
+        pageTitle={<span data-test-subj="pageTitle">{pageTitle}</span>}
+        description={watch.titleDescription}
+        bottomBorder
+      />
+
+      <EuiSpacer size="l" />
+
       <EuiForm data-test-subj="thresholdWatchForm">
         {serverError && (
           <Fragment>
@@ -957,6 +954,6 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
           close={() => setIsRequestVisible(false)}
         />
       ) : null}
-    </EuiPageContent>
+    </EuiPageContentBody>
   );
 };

x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx

@@ -10,19 +10,20 @@ import { isEqual } from 'lodash';
 
 import { EuiPageContent } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
 import { FormattedMessage } from '@kbn/i18n/react';
-import { Watch } from '../../../models/watch';
+
 import { WATCH_TYPES } from '../../../../../common/constants';
 import { BaseWatch } from '../../../../../common/types/watch_types';
-import { getPageErrorCode, PageError, SectionLoading, SectionError } from '../../../components';
+import { getPageErrorCode, PageError, SectionLoading } from '../../../components';
 import { loadWatch } from '../../../lib/api';
 import { listBreadcrumb, editBreadcrumb, createBreadcrumb } from '../../../lib/breadcrumbs';
+import { useAppContext } from '../../../app_context';
+import { Watch } from '../../../models/watch';
+import { PageError as GenericPageError } from '../../../shared_imports';
+import { WatchContext } from '../watch_context';
 import { JsonWatchEdit } from './json_watch_edit';
 import { ThresholdWatchEdit } from './threshold_watch_edit';
 import { MonitoringWatchEdit } from './monitoring_watch_edit';
-import { WatchContext } from '../watch_context';
-import { useAppContext } from '../../../app_context';
 
 const getTitle = (watch: BaseWatch) => {
   if (watch.isNew) {
@@ -115,7 +116,7 @@ export const WatchEdit = ({
           const loadedWatch = await loadWatch(id);
           dispatch({ command: 'setWatch', payload: loadedWatch });
         } catch (error) {
-          dispatch({ command: 'setError', payload: error });
+          dispatch({ command: 'setError', payload: error.body });
         }
       } else if (type) {
         const WatchType = Watch.getWatchTypes()[type];
@@ -135,36 +136,34 @@ export const WatchEdit = ({
   const errorCode = getPageErrorCode(loadError);
   if (errorCode) {
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
         <PageError errorCode={errorCode} id={id} />
       </EuiPageContent>
     );
-  }
-
-  if (loadError) {
+  } else if (loadError) {
     return (
-      <EuiPageContent>
-        <SectionError
-          title={
-            <FormattedMessage
-              id="xpack.watcher.sections.watchEdit.errorTitle"
-              defaultMessage="Error loading watch"
-            />
-          }
-          error={loadError}
-        />
-      </EuiPageContent>
+      <GenericPageError
+        title={
+          <FormattedMessage
+            id="xpack.watcher.sections.watchEdit.errorTitle"
+            defaultMessage="Error loading watch"
+          />
+        }
+        error={loadError}
+      />
     );
   }
 
   if (!watch) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchEdit.loadingWatchDescription"
-          defaultMessage="Loading watch…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchEdit.loadingWatchDescription"
+            defaultMessage="Loading watch…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 

x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx

@@ -11,25 +11,25 @@ import {
   CriteriaWithPagination,
   EuiButton,
   EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiInMemoryTable,
   EuiLink,
   EuiPageContent,
   EuiSpacer,
   EuiText,
-  EuiTitle,
   EuiToolTip,
   EuiEmptyPrompt,
   EuiButtonIcon,
   EuiPopover,
   EuiContextMenuPanel,
   EuiContextMenuItem,
+  EuiPageHeader,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Moment } from 'moment';
 
+import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
+
 import { REFRESH_INTERVALS, PAGINATION, WATCH_TYPES } from '../../../../../common/constants';
 import { listBreadcrumb } from '../../../lib/breadcrumbs';
 import {
@@ -37,15 +37,13 @@ import {
   PageError,
   DeleteWatchesModal,
   WatchStatus,
-  SectionError,
   SectionLoading,
   Error,
 } from '../../../components';
 import { useLoadWatches } from '../../../lib/api';
 import { goToCreateThresholdAlert, goToCreateAdvancedWatch } from '../../../lib/navigation';
 import { useAppContext } from '../../../app_context';
-
-import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
+import { PageError as GenericPageError } from '../../../shared_imports';
 
 export const WatchList = () => {
   // hooks
@@ -173,21 +171,36 @@ export const WatchList = () => {
 
   if (isWatchesLoading) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchList.loadingWatchesDescription"
-          defaultMessage="Loading watches…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchList.loadingWatchesDescription"
+            defaultMessage="Loading watches…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 
-  if (getPageErrorCode(error)) {
+  const errorCode = getPageErrorCode(error);
+  if (errorCode) {
     return (
-      <EuiPageContent>
-        <PageError />
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+        <PageError errorCode={errorCode} />
       </EuiPageContent>
     );
+  } else if (error) {
+    return (
+      <GenericPageError
+        title={
+          <FormattedMessage
+            id="xpack.watcher.sections.watchList.errorTitle"
+            defaultMessage="Error loading watches"
+          />
+        }
+        error={(error as unknown) as Error}
+      />
+    );
   }
 
   if (availableWatches && availableWatches.length === 0) {
@@ -206,7 +219,7 @@ export const WatchList = () => {
     );
 
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
         <EuiEmptyPrompt
           iconType="managementApp"
           title={
@@ -227,19 +240,7 @@ export const WatchList = () => {
 
   let content;
 
-  if (error) {
-    content = (
-      <SectionError
-        title={
-          <FormattedMessage
-            id="xpack.watcher.sections.watchList.errorTitle"
-            defaultMessage="Error loading watches"
-          />
-        }
-        error={(error as unknown) as Error}
-      />
-    );
-  } else if (availableWatches) {
+  if (availableWatches) {
     const columns = [
       {
         field: 'id',
@@ -463,56 +464,46 @@ export const WatchList = () => {
     );
   }
 
-  if (content) {
-    return (
-      <EuiPageContent>
-        <DeleteWatchesModal
-          callback={(deleted?: string[]) => {
-            if (deleted) {
-              setDeletedWatches([...deletedWatches, ...watchesToDelete]);
-            }
-            setWatchesToDelete([]);
-          }}
-          watchesToDelete={watchesToDelete}
-        />
+  return (
+    <>
+      <EuiPageHeader
+        pageTitle={
+          <span data-test-subj="appTitle">
+            <FormattedMessage
+              id="xpack.watcher.sections.watchList.header"
+              defaultMessage="Watcher"
+            />
+          </span>
+        }
+        bottomBorder
+        rightSideItems={[
+          <EuiButtonEmpty
+            href={watcherGettingStartedUrl}
+            target="_blank"
+            iconType="help"
+            data-test-subj="documentationLink"
+          >
+            <FormattedMessage
+              id="xpack.watcher.sections.watchList.watcherGettingStartedDocsLinkText"
+              defaultMessage="Watcher docs"
+            />
+          </EuiButtonEmpty>,
+        ]}
+        description={watcherDescriptionText}
+      />
+      <DeleteWatchesModal
+        callback={(deleted?: string[]) => {
+          if (deleted) {
+            setDeletedWatches([...deletedWatches, ...watchesToDelete]);
+          }
+          setWatchesToDelete([]);
+        }}
+        watchesToDelete={watchesToDelete}
+      />
 
-        <EuiTitle size="l">
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={true}>
-              <h1 data-test-subj="appTitle">
-                <FormattedMessage
-                  id="xpack.watcher.sections.watchList.header"
-                  defaultMessage="Watcher"
-                />
-              </h1>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                href={watcherGettingStartedUrl}
-                target="_blank"
-                iconType="help"
-                data-test-subj="documentationLink"
-              >
-                <FormattedMessage
-                  id="xpack.watcher.sections.watchList.watcherGettingStartedDocsLinkText"
-                  defaultMessage="Watcher docs"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiTitle>
+      <EuiSpacer size="l" />
 
-        <EuiSpacer size="s" />
-
-        <EuiText color="subdued">
-          <p>{watcherDescriptionText}</p>
-        </EuiText>
-
-        <EuiSpacer size="xl" />
-
-        {content}
-      </EuiPageContent>
-    );
-  }
-  return null;
+      {content}
+    </>
+  );
 };

x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx

@@ -9,14 +9,10 @@ import React, { useEffect, useState } from 'react';
 import {
   EuiPageContent,
   EuiSpacer,
-  EuiTabs,
-  EuiTab,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTitle,
   EuiToolTip,
   EuiBadge,
   EuiButtonEmpty,
+  EuiPageHeader,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -88,18 +84,20 @@ export const WatchStatus = ({
 
   if (isWatchDetailLoading) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchStatus.loadingWatchDetailsDescription"
-          defaultMessage="Loading watch details…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchStatus.loadingWatchDetailsDescription"
+            defaultMessage="Loading watch details…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 
   if (errorCode) {
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
         <PageError errorCode={errorCode} id={id} />
       </EuiPageContent>
     );
@@ -156,20 +154,11 @@ export const WatchStatus = ({
 
     return (
       <WatchDetailsContext.Provider value={{ watchDetailError, watchDetail, isWatchDetailLoading }}>
-        <EuiPageContent>
-          <DeleteWatchesModal
-            callback={(deleted?: string[]) => {
-              if (deleted) {
-                goToWatchList();
-              }
-              setWatchesToDelete([]);
-            }}
-            watchesToDelete={watchesToDelete}
-          />
-          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="m">
-                <h1 data-test-subj="pageTitle">
+        <>
+          <EuiPageHeader
+            pageTitle={
+              <>
+                <span data-test-subj="pageTitle">
                   <FormattedMessage
                     id="xpack.watcher.sections.watchDetail.header"
                     defaultMessage="Current status for '{watch}'"
@@ -177,40 +166,41 @@ export const WatchStatus = ({
                       watch: watchName ? watchName : watchId,
                     }}
                   />
-                </h1>
-              </EuiTitle>
-            </EuiFlexItem>
-            {isSystemWatch ? (
-              <EuiFlexItem grow={false}>
-                <EuiToolTip
-                  content={
-                    <FormattedMessage
-                      id="xpack.watcher.sections.watchDetail.headerBadgeToolipText"
-                      defaultMessage="You cannot deactivate or delete a system watch."
-                    />
-                  }
-                >
-                  <EuiBadge color="hollow">
-                    <FormattedMessage
-                      id="xpack.watcher.sections.watchDetail.headerBadgeText"
-                      defaultMessage="System watch"
-                    />
-                  </EuiBadge>
-                </EuiToolTip>
-              </EuiFlexItem>
-            ) : (
-              <EuiFlexItem>
-                <EuiFlexGroup justifyContent="flexEnd">
-                  <EuiFlexItem grow={false}>
+                </span>
+                {isSystemWatch && (
+                  <>
+                    {' '}
+                    <EuiToolTip
+                      content={
+                        <FormattedMessage
+                          id="xpack.watcher.sections.watchDetail.headerBadgeToolipText"
+                          defaultMessage="You cannot deactivate or delete a system watch."
+                        />
+                      }
+                    >
+                      <EuiBadge color="hollow">
+                        <FormattedMessage
+                          id="xpack.watcher.sections.watchDetail.headerBadgeText"
+                          defaultMessage="System watch"
+                        />
+                      </EuiBadge>
+                    </EuiToolTip>
+                  </>
+                )}
+              </>
+            }
+            bottomBorder
+            rightSideItems={
+              isSystemWatch
+                ? []
+                : [
                     <EuiButtonEmpty
                       data-test-subj="toggleWatchActivationButton"
                       onClick={() => toggleWatchActivation()}
                       isLoading={isTogglingActivation}
                     >
                       {activationButtonText}
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
+                    </EuiButtonEmpty>,
                     <EuiButtonEmpty
                       data-test-subj="deleteWatchButton"
                       onClick={() => {
@@ -223,30 +213,34 @@ export const WatchStatus = ({
                         id="xpack.watcher.sections.watchHistory.deleteWatchButtonLabel"
                         defaultMessage="Delete"
                       />
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-          <EuiSpacer size="s" />
-          <EuiTabs>
-            {WATCH_STATUS_TABS.map((tab, index) => (
-              <EuiTab
-                onClick={() => {
-                  setSelectedTab(tab.id);
-                }}
-                isSelected={tab.id === selectedTab}
-                key={index}
-                data-test-subj="tab"
-              >
-                {tab.name}
-              </EuiTab>
-            ))}
-          </EuiTabs>
+                    </EuiButtonEmpty>,
+                  ]
+            }
+            tabs={WATCH_STATUS_TABS.map((tab, index) => ({
+              onClick: () => {
+                setSelectedTab(tab.id);
+              },
+              isSelected: tab.id === selectedTab,
+              key: index,
+              'data-test-subj': 'tab',
+              label: tab.name,
+            }))}
+          />
+
           <EuiSpacer size="l" />
+
           {selectedTab === WATCH_ACTIONS_TAB ? <WatchDetail /> : <WatchHistory />}
-        </EuiPageContent>
+
+          <DeleteWatchesModal
+            callback={(deleted?: string[]) => {
+              if (deleted) {
+                goToWatchList();
+              }
+              setWatchesToDelete([]);
+            }}
+            watchesToDelete={watchesToDelete}
+          />
+        </>
       </WatchDetailsContext.Provider>
     );
   }

x-pack/plugins/watcher/public/application/shared_imports.ts

@@ -12,4 +12,5 @@ export {
   sendRequest,
   useRequest,
   XJson,
+  PageError,
 } from '../../../../../src/plugins/es_ui_shared/public';