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

elastic · Jun 16, 2021 · 447728f · 447728f
1 parent bdc8740
commit 447728f
Show file tree

Hide file tree

Showing 13 changed files with 262 additions and 309 deletions.
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/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}",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/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}",

diff --git a/x-pack/plugins/watcher/public/application/app.tsx b/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 (

diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx b/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} />;

diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx b/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

diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx b/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>
       }
     />

diff --git a/...her/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx b/...her/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>
   );
 };
diff --git a/...pplication/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx b/...pplication/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>
   );
 };
diff --git a/.../application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx b/.../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>
   );
 };