Alerting/fix flaky instance test

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx

@@ -63,7 +63,7 @@ describe('alert_details', () => {
       ).containsMatchingElement(
         <EuiTitle size="m">
           <h1>
-            {alert.name}
+            <span>{alert.name}</span>
             &emsp;
             <EuiBetaBadge
               label="Beta"

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

@@ -68,8 +68,8 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
           <EuiPageContentHeader>
             <EuiPageContentHeaderSection>
               <EuiTitle size="m">
-                <h1 data-test-subj="alertDetailsTitle">
-                  {alert.name}
+                <h1>
+                  <span data-test-subj="alertDetailsTitle">{alert.name}</span>
                   &emsp;
                   <EuiBetaBadge
                     label="Beta"

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances.test.tsx

@@ -6,13 +6,20 @@
 import * as React from 'react';
 import uuid from 'uuid';
 import { shallow } from 'enzyme';
-import { AlertInstances, AlertInstanceListItem, alertInstanceToListItem } from './alert_instances';
+import {
+  AlertInstances,
+  AlertInstanceListItem,
+  alertInstanceToListItem,
+  durationSince,
+} from './alert_instances';
 import { Alert, AlertTaskState, RawAlertInstance } from '../../../../types';
 import { EuiBasicTable } from '@elastic/eui';
 
 const fakeNow = new Date('2020-02-09T23:15:41.941Z');
 const fake2MinutesAgo = new Date('2020-02-09T23:13:41.941Z');
 
+const durationSinceEpoch = durationSince(fakeNow.getTime());
+
 const mockAPIs = {
   muteAlertInstance: jest.fn(),
   unmuteAlertInstance: jest.fn(),
@@ -37,8 +44,18 @@ describe('alert_instances', () => {
 
     const alertState = mockAlertState();
     const instances: AlertInstanceListItem[] = [
-      alertInstanceToListItem(alert, 'first_instance', alertState.alertInstances!.first_instance),
-      alertInstanceToListItem(alert, 'second_instance', alertState.alertInstances!.second_instance),
+      alertInstanceToListItem(
+        durationSinceEpoch,
+        alert,
+        'first_instance',
+        alertState.alertInstances!.first_instance
+      ),
+      alertInstanceToListItem(
+        durationSinceEpoch,
+        alert,
+        'second_instance',
+        alertState.alertInstances!.second_instance
+      ),
     ];
 
     expect(
@@ -48,6 +65,24 @@ describe('alert_instances', () => {
     ).toEqual(instances);
   });
 
+  it('render a hidden field with durtation epoch', () => {
+    const alert = mockAlert();
+    const alertState = mockAlertState();
+
+    expect(
+      shallow(
+        <AlertInstances
+          durationEpoch={fake2MinutesAgo.getTime()}
+          {...mockAPIs}
+          alert={alert}
+          alertState={alertState}
+        />
+      )
+        .find('[name="alertInstancesDurationEpoch"]')
+        .prop('value')
+    ).toEqual(fake2MinutesAgo.getTime());
+  });
+
   it('render all active alert instances', () => {
     const alert = mockAlert();
     const instances = {
@@ -75,8 +110,8 @@ describe('alert_instances', () => {
         .find(EuiBasicTable)
         .prop('items')
     ).toEqual([
-      alertInstanceToListItem(alert, 'us-central', instances['us-central']),
-      alertInstanceToListItem(alert, 'us-east', instances['us-east']),
+      alertInstanceToListItem(durationSinceEpoch, alert, 'us-central', instances['us-central']),
+      alertInstanceToListItem(durationSinceEpoch, alert, 'us-east', instances['us-east']),
     ]);
   });
 
@@ -98,8 +133,8 @@ describe('alert_instances', () => {
         .find(EuiBasicTable)
         .prop('items')
     ).toEqual([
-      alertInstanceToListItem(alert, 'us-west'),
-      alertInstanceToListItem(alert, 'us-east'),
+      alertInstanceToListItem(durationSinceEpoch, alert, 'us-west'),
+      alertInstanceToListItem(durationSinceEpoch, alert, 'us-east'),
     ]);
   });
 });
@@ -117,7 +152,7 @@ describe('alertInstanceToListItem', () => {
       },
     };
 
-    expect(alertInstanceToListItem(alert, 'id', instance)).toEqual({
+    expect(alertInstanceToListItem(durationSinceEpoch, alert, 'id', instance)).toEqual({
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start,
@@ -140,7 +175,7 @@ describe('alertInstanceToListItem', () => {
       },
     };
 
-    expect(alertInstanceToListItem(alert, 'id', instance)).toEqual({
+    expect(alertInstanceToListItem(durationSinceEpoch, alert, 'id', instance)).toEqual({
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start,
@@ -153,7 +188,7 @@ describe('alertInstanceToListItem', () => {
     const alert = mockAlert();
     const instance: RawAlertInstance = {};
 
-    expect(alertInstanceToListItem(alert, 'id', instance)).toEqual({
+    expect(alertInstanceToListItem(durationSinceEpoch, alert, 'id', instance)).toEqual({
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start: undefined,
@@ -168,7 +203,7 @@ describe('alertInstanceToListItem', () => {
       meta: {},
     };
 
-    expect(alertInstanceToListItem(alert, 'id', instance)).toEqual({
+    expect(alertInstanceToListItem(durationSinceEpoch, alert, 'id', instance)).toEqual({
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start: undefined,
@@ -181,7 +216,7 @@ describe('alertInstanceToListItem', () => {
     const alert = mockAlert({
       mutedInstanceIds: ['id'],
     });
-    expect(alertInstanceToListItem(alert, 'id')).toEqual({
+    expect(alertInstanceToListItem(durationSinceEpoch, alert, 'id')).toEqual({
       instance: 'id',
       status: { label: 'Inactive', healthColor: 'subdued' },
       start: undefined,

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx

@@ -23,6 +23,7 @@ type AlertInstancesProps = {
   alert: Alert;
   alertState: AlertTaskState;
   requestRefresh: () => Promise<void>;
+  durationEpoch?: number;
 } & Pick<AlertApis, 'muteAlertInstance' | 'unmuteAlertInstance'>;
 
 export const alertInstancesTableColumns = (
@@ -134,18 +135,20 @@ export function AlertInstances({
   muteAlertInstance,
   unmuteAlertInstance,
   requestRefresh,
+  durationEpoch = Date.now(),
 }: AlertInstancesProps) {
   const [pagination, setPagination] = useState<Pagination>({
     index: 0,
     size: DEFAULT_SEARCH_PAGE_SIZE,
   });
 
+  const durationSinceEpoch = durationSince(durationEpoch);
   const mergedAlertInstances = [
     ...Object.entries(alertInstances).map(([instanceId, instance]) =>
-      alertInstanceToListItem(alert, instanceId, instance)
+      alertInstanceToListItem(durationSinceEpoch, alert, instanceId, instance)
     ),
     ...difference(alert.mutedInstanceIds, Object.keys(alertInstances)).map(instanceId =>
-      alertInstanceToListItem(alert, instanceId)
+      alertInstanceToListItem(durationSinceEpoch, alert, instanceId)
     ),
   ];
   const pageOfAlertInstances = getPage(mergedAlertInstances, pagination);
@@ -158,25 +161,33 @@ export function AlertInstances({
   };
 
   return (
-    <EuiBasicTable
-      items={pageOfAlertInstances}
-      pagination={{
-        pageIndex: pagination.index,
-        pageSize: pagination.size,
-        totalItemCount: mergedAlertInstances.length,
-      }}
-      onChange={({ page: changedPage }: { page: Pagination }) => {
-        setPagination(changedPage);
-      }}
-      rowProps={() => ({
-        'data-test-subj': 'alert-instance-row',
-      })}
-      cellProps={() => ({
-        'data-test-subj': 'cell',
-      })}
-      columns={alertInstancesTableColumns(onMuteAction)}
-      data-test-subj="alertInstancesList"
-    />
+    <Fragment>
+      <input
+        type="hidden"
+        data-test-subj="alertInstancesDurationEpoch"
+        name="alertInstancesDurationEpoch"
+        value={durationEpoch}
+      />
+      <EuiBasicTable
+        items={pageOfAlertInstances}
+        pagination={{
+          pageIndex: pagination.index,
+          pageSize: pagination.size,
+          totalItemCount: mergedAlertInstances.length,
+        }}
+        onChange={({ page: changedPage }: { page: Pagination }) => {
+          setPagination(changedPage);
+        }}
+        rowProps={() => ({
+          'data-test-subj': 'alert-instance-row',
+        })}
+        cellProps={() => ({
+          'data-test-subj': 'cell',
+        })}
+        columns={alertInstancesTableColumns(onMuteAction)}
+        data-test-subj="alertInstancesList"
+      />
+    </Fragment>
   );
 }
 export const AlertInstancesWithApi = withBulkAlertOperations(AlertInstances);
@@ -207,9 +218,11 @@ const INACTIVE_LABEL = i18n.translate(
   { defaultMessage: 'Inactive' }
 );
 
-const durationSince = (start?: Date) => (start ? Date.now() - start.getTime() : 0);
+export const durationSince = (durationEpoch: number) => (startTime?: number) =>
+  startTime ? durationEpoch - startTime : 0;
 
 export function alertInstanceToListItem(
+  durationSinceEpoch: (startTime: number) => number,
   alert: Alert,
   instanceId: string,
   instance?: RawAlertInstance
@@ -221,7 +234,7 @@ export function alertInstanceToListItem(
       ? { label: ACTIVE_LABEL, healthColor: 'primary' }
       : { label: INACTIVE_LABEL, healthColor: 'subdued' },
     start: instance?.meta?.lastScheduledActions?.date,
-    duration: durationSince(instance?.meta?.lastScheduledActions?.date),
+    duration: durationSinceEpoch(instance?.meta?.lastScheduledActions?.date?.getTime() ?? 0),
     isMuted,
   };
 }

x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts

@@ -18,8 +18,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const alerting = getService('alerting');
   const retry = getService('retry');
 
-  // FLAKY: https://github.com/elastic/kibana/issues/57426
-  describe.skip('Alert Details', function() {
+  describe('Alert Details', function() {
     describe('Header', function() {
       const testRunUuid = uuid.v4();
       before(async () => {
@@ -206,8 +205,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       });
 
       it('renders the active alert instances', async () => {
-        const testBeganAt = moment().utc();
-
         // Verify content
         await testSubjects.existOrFail('alertInstancesList');
 
@@ -219,30 +216,42 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
             meta: {
               lastScheduledActions: { date },
             },
-          }) => moment(date).utc()
+          }) => date
         );
 
+        log.debug(`API RESULT: ${JSON.stringify(dateOnAllInstances)}`);
+
         const instancesList = await pageObjects.alertDetailsUI.getAlertInstancesList();
         expect(instancesList.map(instance => omit(instance, 'duration'))).to.eql([
           {
             instance: 'us-central',
             status: 'Active',
-            start: dateOnAllInstances['us-central'].format('D MMM YYYY @ HH:mm:ss'),
+            start: moment(dateOnAllInstances['us-central'])
+              .utc()
+              .format('D MMM YYYY @ HH:mm:ss'),
           },
           {
             instance: 'us-east',
             status: 'Active',
-            start: dateOnAllInstances['us-east'].format('D MMM YYYY @ HH:mm:ss'),
+            start: moment(dateOnAllInstances['us-east'])
+              .utc()
+              .format('D MMM YYYY @ HH:mm:ss'),
           },
           {
             instance: 'us-west',
             status: 'Active',
-            start: dateOnAllInstances['us-west'].format('D MMM YYYY @ HH:mm:ss'),
+            start: moment(dateOnAllInstances['us-west'])
+              .utc()
+              .format('D MMM YYYY @ HH:mm:ss'),
           },
         ]);
 
+        const durationEpoch = moment(
+          await pageObjects.alertDetailsUI.getAlertInstanceDurationEpoch()
+        ).utc();
+
         const durationFromInstanceTillPageLoad = mapValues(dateOnAllInstances, date =>
-          moment.duration(testBeganAt.diff(moment(date).utc()))
+          moment.duration(durationEpoch.diff(moment(date).utc()))
         );
         instancesList
           .map(alertInstance => ({
@@ -258,13 +267,13 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
             }),
           }))
           .forEach(({ id, duration }) => {
-            // make sure the duration is within a 10 second range which is
+            // make sure the duration is within a 30 second range which is
             // good enough as the alert interval is 1m, so we know it is a fresh value
             expect(duration.as('milliseconds')).to.greaterThan(
-              durationFromInstanceTillPageLoad[id].subtract(1000 * 10).as('milliseconds')
+              durationFromInstanceTillPageLoad[id].subtract(1000 * 30).as('milliseconds')
             );
             expect(duration.as('milliseconds')).to.lessThan(
-              durationFromInstanceTillPageLoad[id].add(1000 * 10).as('milliseconds')
+              durationFromInstanceTillPageLoad[id].add(1000 * 30).as('milliseconds')
             );
           });
       });

x-pack/test/functional_with_es_ssl/page_objects/alert_details.ts

@@ -54,6 +54,12 @@ export function AlertDetailsPageProvider({ getService }: FtrProviderContext) {
           };
         });
     },
+    async getAlertInstanceDurationEpoch(): Promise<number> {
+      const alertInstancesDurationEpoch = await find.byCssSelector(
+        'input[data-test-subj="alertInstancesDurationEpoch"]'
+      );
+      return parseInt(await alertInstancesDurationEpoch.getAttribute('value'), 10);
+    },
     async clickAlertInstanceMuteButton(instance: string) {
       const muteAlertInstanceButton = await testSubjects.find(
         `muteAlertInstanceButton_${instance}`