Add tooltip to State header in Execution History flyout. Add Last executed header to Action Statuses Panel and tooltips. Update tests.

Author: CJ Cenizal

x-pack/plugins/watcher/__fixtures__/get_watch_history.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import moment, { Moment } from 'moment';
+import { ACTION_STATES, WATCH_STATES } from '../common/constants';
+import { ClientWatchStatusModel, ClientActionStatusModel } from '../common/types';
+
+interface WatchHistory {
+  id: string;
+  watchId: string;
+  startTime: Moment;
+  watchStatus: {
+    state: ClientWatchStatusModel['state'];
+    comment?: string;
+    lastExecution: Moment;
+    actionStatuses?: Array<{
+      id: string;
+      state: ClientActionStatusModel['state'];
+    }>;
+  };
+  details?: object;
+}
+
+export const getWatchHistory = ({
+  id,
+  startTime,
+}: {
+  id: string;
+  startTime: string;
+}): WatchHistory => ({
+  id,
+  startTime: moment(startTime),
+  watchId: id,
+  watchStatus: {
+    state: WATCH_STATES.OK,
+    lastExecution: moment('2019-06-03T19:44:11.088Z'),
+    actionStatuses: [
+      {
+        id: 'a',
+        state: ACTION_STATES.OK,
+      },
+    ],
+  },
+  details: {},
+});

x-pack/plugins/watcher/__fixtures__/index.ts

@@ -6,5 +6,5 @@
  */
 
 export * from './watch';
-export * from './watch_history';
+export * from './get_watch_history';
 export * from './execute_details';

x-pack/plugins/watcher/__fixtures__/watch.ts

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import { Moment } from 'moment';
 import { getRandomString } from '@kbn/test-jest-helpers';
+import { ClientWatchStatusModel } from '../common/types';
+import { WATCH_STATES, WATCH_STATE_COMMENTS } from '../common/constants';
 
 interface Watch {
   id: string;
@@ -22,14 +23,7 @@ interface Watch {
   timeWindowUnit?: string;
   threshold?: number[];
   isSystemWatch: boolean;
-  watchStatus: {
-    state: 'OK' | 'Firing' | 'Error' | 'Config error' | 'Disabled';
-    comment?: string;
-    lastMetCondition?: Moment;
-    lastChecked?: Moment;
-    isActive: boolean;
-    actionStatuses?: any[];
-  };
+  watchStatus: ClientWatchStatusModel;
 }
 
 export const getWatch = ({
@@ -47,8 +41,13 @@ export const getWatch = ({
   threshold,
   isSystemWatch = false,
   watchStatus = {
-    state: 'OK',
+    id: 'a',
+    state: WATCH_STATES.OK,
     isActive: true,
+    lastChecked: null,
+    lastMetCondition: null,
+    comment: WATCH_STATE_COMMENTS.OK,
+    actionStatuses: [],
   },
 }: Partial<Watch> = {}): Watch => ({
   id,

x-pack/plugins/watcher/__fixtures__/watch_history.ts

@@ -86,17 +86,17 @@ describe('<WatchListPage />', () => {
           // Expect "watch1" is only visible in the table
           expect(tableCellsValues.length).toEqual(1);
           const row = tableCellsValues[0];
-          const { name, id, watchStatus } = watch1;
+          const { name, id } = watch1;
 
           const expectedRow = [
             '', // checkbox
             id,
             name,
-            watchStatus.state,
-            '', // comment
+            '', // state
             '', // lastMetCondition
             '', // lastChecked
-            '', // actions
+            '', // comment
+            '', // row actions
           ];
 
           expect(row).toEqual(expectedRow);
@@ -128,7 +128,7 @@ describe('<WatchListPage />', () => {
           const { table } = testBed;
           const { tableCellsValues } = table.getMetaData('watchesTable');
 
-          const getExpectedValue = (value: any) => (typeof value === 'undefined' ? '' : value);
+          const getExpectedValue = (value: any) => value ?? '';
 
           tableCellsValues.forEach((row, i) => {
             const watch = watches[i];
@@ -138,11 +138,11 @@ describe('<WatchListPage />', () => {
               '',
               id, // required value
               getExpectedValue(name),
-              watchStatus.state, // required value
-              getExpectedValue(watchStatus.comment),
+              '', // state
               getExpectedValue(watchStatus.lastMetCondition),
               getExpectedValue(watchStatus.lastChecked),
-              '',
+              getExpectedValue(watchStatus.comment),
+              '', // row actions
             ]);
           });
         });

x-pack/plugins/watcher/__jest__/client_integration/watch_list_page.test.ts

@@ -16,8 +16,8 @@ import { API_BASE_PATH } from '../../common/constants';
 
 const { setup } = pageHelpers.watchStatusPage;
 
-const watchHistory1 = getWatchHistory({ startTime: '2019-06-04T01:11:11.294' });
-const watchHistory2 = getWatchHistory({ startTime: '2019-06-04T01:10:10.987Z' });
+const watchHistory1 = getWatchHistory({ id: 'a', startTime: '2019-06-04T01:11:11.294' });
+const watchHistory2 = getWatchHistory({ id: 'b', startTime: '2019-06-04T01:10:10.987Z' });
 
 const watchHistoryItems = { watchHistoryItems: [watchHistory1, watchHistory2] };
 
@@ -28,11 +28,13 @@ const watch = {
   watchStatus: {
     state: WATCH_STATES.ACTIVE,
     isActive: true,
+    lastExecution: moment('2019-06-03T19:44:11.088Z'),
     actionStatuses: [
       {
         id: ACTION_ID,
         state: ACTION_STATES.OK,
         isAckable: true,
+        lastExecution: moment('2019-06-03T19:44:11.088Z'),
       },
     ],
   },
@@ -100,7 +102,8 @@ describe('<WatchStatusPage />', () => {
           expect(row).toEqual([
             getExpectedValue(moment(startTime).format()),
             getExpectedValue(watchStatus.state),
-            getExpectedValue(watchStatus.comment),
+            '',
+            '',
           ]);
         });
       });
@@ -231,16 +234,20 @@ describe('<WatchStatusPage />', () => {
 
         tableCellsValues.forEach((row, i) => {
           const action = watch.watchStatus.actionStatuses[i];
-          const { id, state, isAckable } = action;
+          const { id, state, lastExecution, isAckable } = action;
 
-          expect(row).toEqual([id, state, isAckable ? 'Acknowledge' : '']);
+          expect(row).toEqual([
+            id, // Name
+            state, // State
+            lastExecution.format(), // Last executed
+            isAckable ? 'Acknowledge' : '', // Row actions
+          ]);
         });
       });
 
       test('should allow an action to be acknowledged', async () => {
         const { actions, table } = testBed;
-
-        httpRequestsMockHelpers.setAcknowledgeWatchResponse(WATCH_ID, ACTION_ID, {
+        const watchHistoryItem = {
           watchStatus: {
             state: WATCH_STATES.FIRING,
             isActive: true,
@@ -250,10 +257,13 @@ describe('<WatchStatusPage />', () => {
                 id: ACTION_ID,
                 state: ACTION_STATES.ACKNOWLEDGED,
                 isAckable: false,
+                lastExecution: moment('2019-06-03T19:44:11.088Z'),
               },
             ],
           },
-        });
+        };
+
+        httpRequestsMockHelpers.setAcknowledgeWatchResponse(WATCH_ID, ACTION_ID, watchHistoryItem);
 
         await actions.clickAcknowledgeButton(0);
 
@@ -268,7 +278,12 @@ describe('<WatchStatusPage />', () => {
         const { tableCellsValues } = table.getMetaData('watchActionStatusTable');
 
         tableCellsValues.forEach((row) => {
-          expect(row).toEqual([ACTION_ID, ACTION_STATES.ACKNOWLEDGED, '']);
+          expect(row).toEqual([
+            ACTION_ID, // Name
+            ACTION_STATES.ACKNOWLEDGED, // State
+            watchHistoryItem.watchStatus.actionStatuses[0].lastExecution.format(), // Last executed
+            '', // Row actions
+          ]);
         });
       });
     });

x-pack/plugins/watcher/__jest__/client_integration/watch_status_page.test.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { Fragment, useContext, useState } from 'react';
+import React, { Fragment, useContext, useEffect, useState } from 'react';
 
 import {
   EuiButton,
@@ -67,9 +67,11 @@ export const JsonWatchEditForm = () => {
     json: hasActionErrors ? [...errors.json, invalidActionMessage] : [...errors.json],
   };
 
-  if (errors.json.length === 0) {
-    setWatchProperty('watch', JSON.parse(watch.watchString));
-  }
+  useEffect(() => {
+    if (errors.json.length === 0) {
+      setWatchProperty('watch', JSON.parse(watch.watchString));
+    }
+  }, [setWatchProperty, errors, watch]);
 
   return (
     <Fragment>

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

@@ -8,6 +8,7 @@
 import React, { Fragment, useState, useEffect, useContext } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { Moment } from 'moment';
 
 import {
   EuiInMemoryTable,
@@ -18,6 +19,7 @@ import {
   EuiFlyout,
   EuiFlyoutHeader,
   EuiFlyoutBody,
+  EuiIcon,
 } from '@elastic/eui';
 
 import { PAGINATION } from '../../../../../common/constants';
@@ -72,17 +74,57 @@ export const ActionStatusesPanel = () => {
         defaultMessage: 'Name',
       }),
       sortable: true,
-      truncateText: true,
+      truncateText: false,
     },
     {
       field: 'state',
-      name: i18n.translate('xpack.watcher.sections.watchDetail.watchTable.stateHeader', {
-        defaultMessage: 'State',
-      }),
+      name: (
+        <EuiToolTip
+          content={i18n.translate(
+            'xpack.watcher.sections.watchDetail.watchTable.stateHeader.tooltipText',
+            {
+              defaultMessage: 'OK, acked, throttled, or error state',
+            }
+          )}
+        >
+          <span>
+            {i18n.translate('xpack.watcher.sections.watchDetail.watchTable.stateHeader', {
+              defaultMessage: 'State',
+            })}{' '}
+            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+          </span>
+        </EuiToolTip>
+      ),
       sortable: true,
       truncateText: true,
       render: (state: string) => <ActionStateBadge state={state} />,
     },
+    {
+      field: 'lastExecution',
+      name: (
+        <EuiToolTip
+          content={i18n.translate(
+            'xpack.watcher.sections.watchHistory.watchActionStatusTable.lastExecuted.tooltipText',
+            {
+              defaultMessage: `When this action was last executed`,
+            }
+          )}
+        >
+          <span>
+            {i18n.translate(
+              'xpack.watcher.sections.watchHistory.watchActionStatusTable.lastExecuted',
+              {
+                defaultMessage: 'Last executed',
+              }
+            )}{' '}
+            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+          </span>
+        </EuiToolTip>
+      ),
+      sortable: true,
+      truncateText: false,
+      render: (lastExecution?: Moment) => lastExecution?.format() ?? '',
+    },
   ];
 
   const errorColumn = {