create common watch actions component

x-pack/plugins/watcher/public/components/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export { getPageErrorCode, PageError } from './page_error';
+export { ConfirmWatchesModal } from './confirm_watches_modal';
+export { DeleteWatchesModal } from './delete_watches_modal';
+export { ErrableFormRow } from './form_errors';
+export { WatchStatus } from './watch_status';

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

@@ -0,0 +1,44 @@
+/*
+ * 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 { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { ACTION_STATES, WATCH_STATES } from '../../common/constants';
+
+function StatusIcon({ status }: { status: string }) {
+  switch (status) {
+    case WATCH_STATES.FIRING:
+    case ACTION_STATES.FIRING:
+      return <EuiIcon type="play" color="primary" />;
+    case WATCH_STATES.OK:
+    case ACTION_STATES.OK:
+    case ACTION_STATES.ACKNOWLEDGED:
+      return <EuiIcon type="check" color="secondary" />;
+    case ACTION_STATES.THROTTLED:
+      return <EuiIcon type="clock" color="warning" />;
+    case WATCH_STATES.DISABLED:
+      return <EuiIcon type="minusInCircleFilled" color="subdued" />;
+    case WATCH_STATES.CONFIG_ERROR:
+    case WATCH_STATES.ERROR:
+    case ACTION_STATES.CONFIG_ERROR:
+    case ACTION_STATES.ERROR:
+      return <EuiIcon type="crossInACircleFilled" color="danger" />;
+  }
+  return null;
+}
+
+export function WatchStatus({ status }: { status: string }) {
+  return (
+    <EuiFlexGroup gutterSize="xs" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <StatusIcon status={status} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText>{status}</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

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

@@ -18,8 +18,7 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { ConfirmWatchesModal } from '../../../../components/confirm_watches_modal';
-import { ErrableFormRow } from '../../../../components/form_errors';
+import { ConfirmWatchesModal, ErrableFormRow } from '../../../../components';
 import { putWatchApiUrl } from '../../../../lib/documentation_links';
 import { onWatchSave, saveWatch } from '../../watch_edit_actions';
 import { WatchContext } from '../../watch_context';

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

@@ -12,27 +12,18 @@ import {
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
-  EuiHealth,
   EuiSpacer,
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { WATCH_STATES } from '../../../../../common/constants';
 import {
   ExecutedWatchDetails,
   ExecutedWatchResults,
 } from '../../../../../common/types/watch_types';
 import { getTypeFromAction } from '../../watch_edit_actions';
 import { WatchContext } from '../../watch_context';
-
-const WATCH_ICON_COLORS = {
-  [WATCH_STATES.DISABLED]: 'subdued',
-  [WATCH_STATES.OK]: 'success',
-  [WATCH_STATES.FIRING]: 'warning',
-  [WATCH_STATES.ERROR]: 'danger',
-  [WATCH_STATES.CONFIG_ERROR]: 'danger',
-};
+import { WatchStatus } from '../../../../components/watch_status';
 
 export const JsonWatchEditSimulateResults = ({
   executeResults,
@@ -106,9 +97,7 @@ export const JsonWatchEditSimulateResults = ({
         }
       ),
       dataType: 'string',
-      render: (actionState: string) => {
-        return <EuiHealth color={WATCH_ICON_COLORS[actionState]}>{actionState}</EuiHealth>;
-      },
+      render: (actionState: string) => <WatchStatus status={actionState} />,
     },
     {
       field: 'actionReason',
@@ -133,12 +122,11 @@ export const JsonWatchEditSimulateResults = ({
           <h2 id="simulateResultsFlyOutTitle">
             {i18n.translate('xpack.watcher.sections.watchEdit.simulateResults.title', {
               defaultMessage: 'Simulation results',
-            })}{' '}
-            <EuiHealth color={WATCH_ICON_COLORS[executeResults.watchStatus.state]}>
-              {executeResults.watchStatus.state}
-            </EuiHealth>
+            })}
           </h2>
         </EuiTitle>
+        <EuiSpacer size="xs" />
+        <WatchStatus status={executeResults.watchStatus.state} />
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         {actionsTableData && actionsTableData.length > 0 && (

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

@@ -27,8 +27,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 
-import { ConfirmWatchesModal } from '../../../../components/confirm_watches_modal';
-import { ErrableFormRow } from '../../../../components/form_errors';
+import { ConfirmWatchesModal, ErrableFormRow } from '../../../../components';
 import { fetchFields, getMatchingIndices, loadIndexPatterns } from '../../../../lib/api';
 import { aggTypes } from '../../../../models/watch/agg_types';
 import { groupByTypes } from '../../../../models/watch/group_by_types';

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

@@ -15,7 +15,7 @@ import { MANAGEMENT_BREADCRUMB } from 'ui/management';
 import { Watch } from 'plugins/watcher/models/watch';
 import { WATCH_TYPES } from '../../../../common/constants';
 import { BaseWatch } from '../../../../common/types/watch_types';
-import { getPageErrorCode, PageError } from '../../../components/page_error';
+import { getPageErrorCode, PageError } from '../../../components';
 import { loadWatch } from '../../../lib/api';
 import { listBreadcrumb, editBreadcrumb, createBreadcrumb } from '../../../lib/breadcrumbs';
 import { JsonWatchEdit } from './json_watch_edit';

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

@@ -11,7 +11,6 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
   EuiInMemoryTable,
   EuiLink,
   EuiPageContent,
@@ -26,20 +25,11 @@ import { Moment } from 'moment';
 import chrome from 'ui/chrome';
 import { MANAGEMENT_BREADCRUMB } from 'ui/management';
 
-import { REFRESH_INTERVALS, WATCH_STATES } from '../../../../common/constants';
-import { DeleteWatchesModal } from '../../../components/delete_watches_modal';
+import { REFRESH_INTERVALS } from '../../../../common/constants';
 import { listBreadcrumb } from '../../../lib/breadcrumbs';
-import { getPageErrorCode, PageError } from '../../../components/page_error';
+import { getPageErrorCode, PageError, DeleteWatchesModal, WatchStatus } from '../../../components';
 import { loadWatches } from '../../../lib/api';
 
-const stateToIcon: { [key: string]: JSX.Element } = {
-  [WATCH_STATES.OK]: <EuiIcon type="check" color="green" />,
-  [WATCH_STATES.DISABLED]: <EuiIcon type="minusInCircle" color="euiColorMediumShade" />,
-  [WATCH_STATES.FIRING]: <EuiIcon type="play" color="euiColorPrimary" />,
-  [WATCH_STATES.ERROR]: <EuiIcon type="crossInACircleFilled" color="euiColorDanger" />,
-  [WATCH_STATES.CONFIG_ERROR]: <EuiIcon type="crossInACircleFilled" color="euiColorDanger" />,
-};
-
 const WatchListUi = ({ intl }: { intl: InjectedIntl }) => {
   // hooks
   const [selection, setSelection] = useState([]);
@@ -107,16 +97,7 @@ const WatchListUi = ({ intl }: { intl: InjectedIntl }) => {
         defaultMessage: 'State',
       }),
       sortable: true,
-      render: (state: string) => {
-        return (
-          <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiFlexItem grow={false}>{stateToIcon[state]}</EuiFlexItem>
-            <EuiFlexItem grow={false} className="watchState__message">
-              <EuiText>{state}</EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        );
-      },
+      render: (state: string) => <WatchStatus status={state} />,
     },
     {
       field: 'watchStatus.comment',

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

@@ -6,21 +6,13 @@
 
 import React, { Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiInMemoryTable,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiInMemoryTable, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { loadWatchDetail } from '../../../lib/api';
-import { getPageErrorCode } from '../../../components/page_error';
-import { WatchActionStatus } from './watch_action_status';
+import { getPageErrorCode, WatchStatus } from '../../../components';
 
-const WatchDetailUi = ({ intl, watchId }: { intl: InjectedIntl; watchId: string }) => {
+const WatchDetailUi = ({ watchId }: { watchId: string }) => {
   const pagination = {
     initialPageSize: 10,
     pageSizeOptions: [10, 50, 100],
@@ -45,18 +37,7 @@ const WatchDetailUi = ({ intl, watchId }: { intl: InjectedIntl; watchId: string
       }),
       sortable: true,
       truncateText: true,
-      render: (state: string) => {
-        return (
-          <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <WatchActionStatus watchState={state} />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false} className="watchState__message">
-              <EuiText>{state}</EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        );
-      },
+      render: (state: string) => <WatchStatus status={state} />,
     },
   ];
 
@@ -93,7 +74,7 @@ const WatchDetailUi = ({ intl, watchId }: { intl: InjectedIntl; watchId: string
       <EuiSpacer size="s" />
 
       <EuiInMemoryTable
-        items={watchDetail ? watchDetail.actions : []}
+        items={watchDetail ? watchDetail.watchStatus.actionStatuses : []}
         itemId="id"
         columns={columns}
         pagination={pagination}

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

@@ -27,9 +27,7 @@ import {
 } from '@elastic/eui';
 
 import { goToWatchList } from '../../../lib/navigation';
-import { DeleteWatchesModal } from '../../../components/delete_watches_modal';
-import { getPageErrorCode, PageError } from '../../../components/page_error';
-import { WatchActionStatus } from './watch_action_status';
+import { getPageErrorCode, PageError, WatchStatus, DeleteWatchesModal } from '../../../components';
 import {
   activateWatch,
   deactivateWatch,
@@ -144,18 +142,7 @@ const WatchHistoryUi = ({ intl, watchId }: { intl: InjectedIntl; watchId: string
       }),
       sortable: true,
       truncateText: true,
-      render: (state: string) => {
-        return (
-          <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <WatchActionStatus watchState={state} />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false} className="watchState__message">
-              <EuiText>{state}</EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        );
-      },
+      render: (state: string) => <WatchStatus status={state} />,
     },
     {
       field: 'watchStatus.comment',
@@ -220,18 +207,7 @@ const WatchHistoryUi = ({ intl, watchId }: { intl: InjectedIntl; watchId: string
         }),
         sortable: true,
         truncateText: true,
-        render: (state: string) => {
-          return (
-            <EuiFlexGroup gutterSize="xs" alignItems="center">
-              <EuiFlexItem grow={false}>
-                <WatchActionStatus watchState={state} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false} className="watchState__message">
-                <EuiText>{state}</EuiText>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          );
-        },
+        render: (state: string) => <WatchStatus status={state} />,
       },
     ];