Alerting/fix flaky instance test (#58994) (#59867)

The Alert Instances list calculates duration on each page load, which makes it hard for the test runner to know what the correct value should be. In the PR we expose the epoch used by the duration calculation in such a way that the test runner can read it and asses the duration correctly. Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Mar 11, 2020 · 6304255 · 6304255
1 parent 2545374
commit 6304255
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 46 deletions.
diff --git a/...rs_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx b/...rs_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"

diff --git a/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/...riggers_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"

diff --git a/..._actions_ui/public/application/sections/alert_details/components/alert_instances.test.tsx b/..._actions_ui/public/application/sections/alert_details/components/alert_instances.test.tsx
@@ -37,8 +37,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(
+        fakeNow.getTime(),
+        alert,
+        'first_instance',
+        alertState.alertInstances!.first_instance
+      ),
+      alertInstanceToListItem(
+        fakeNow.getTime(),
+        alert,
+        'second_instance',
+        alertState.alertInstances!.second_instance
+      ),
     ];
 
     expect(
@@ -48,6 +58,24 @@ describe('alert_instances', () => {
     ).toEqual(instances);
   });
 
+  it('render a hidden field with duration 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 +103,8 @@ describe('alert_instances', () => {
         .find(EuiBasicTable)
         .prop('items')
     ).toEqual([
-      alertInstanceToListItem(alert, 'us-central', instances['us-central']),
-      alertInstanceToListItem(alert, 'us-east', instances['us-east']),
+      alertInstanceToListItem(fakeNow.getTime(), alert, 'us-central', instances['us-central']),
+      alertInstanceToListItem(fakeNow.getTime(), alert, 'us-east', instances['us-east']),
     ]);
   });
 
@@ -98,8 +126,8 @@ describe('alert_instances', () => {
         .find(EuiBasicTable)
         .prop('items')
     ).toEqual([
-      alertInstanceToListItem(alert, 'us-west'),
-      alertInstanceToListItem(alert, 'us-east'),
+      alertInstanceToListItem(fakeNow.getTime(), alert, 'us-west'),
+      alertInstanceToListItem(fakeNow.getTime(), alert, 'us-east'),
     ]);
   });
 });
@@ -117,7 +145,7 @@ describe('alertInstanceToListItem', () => {
       },
     };
 
-    expect(alertInstanceToListItem(alert, 'id', instance)).toEqual({
+    expect(alertInstanceToListItem(fakeNow.getTime(), alert, 'id', instance)).toEqual({
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start,
@@ -140,7 +168,7 @@ describe('alertInstanceToListItem', () => {
       },
     };
 
-    expect(alertInstanceToListItem(alert, 'id', instance)).toEqual({
+    expect(alertInstanceToListItem(fakeNow.getTime(), alert, 'id', instance)).toEqual({
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start,
@@ -153,7 +181,7 @@ describe('alertInstanceToListItem', () => {
     const alert = mockAlert();
     const instance: RawAlertInstance = {};
 
-    expect(alertInstanceToListItem(alert, 'id', instance)).toEqual({
+    expect(alertInstanceToListItem(fakeNow.getTime(), alert, 'id', instance)).toEqual({
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start: undefined,
@@ -168,7 +196,7 @@ describe('alertInstanceToListItem', () => {
       meta: {},
     };
 
-    expect(alertInstanceToListItem(alert, 'id', instance)).toEqual({
+    expect(alertInstanceToListItem(fakeNow.getTime(), alert, 'id', instance)).toEqual({
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start: undefined,
@@ -181,7 +209,7 @@ describe('alertInstanceToListItem', () => {
     const alert = mockAlert({
       mutedInstanceIds: ['id'],
     });
-    expect(alertInstanceToListItem(alert, 'id')).toEqual({
+    expect(alertInstanceToListItem(fakeNow.getTime(), alert, 'id')).toEqual({
       instance: 'id',
       status: { label: 'Inactive', healthColor: 'subdued' },
       start: undefined,

diff --git a/...ggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx b/...ggers_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,6 +135,7 @@ export function AlertInstances({
   muteAlertInstance,
   unmuteAlertInstance,
   requestRefresh,
+  durationEpoch = Date.now(),
 }: AlertInstancesProps) {
   const [pagination, setPagination] = useState<Pagination>({
     index: 0,
@@ -142,10 +144,10 @@ export function AlertInstances({
 
   const mergedAlertInstances = [
     ...Object.entries(alertInstances).map(([instanceId, instance]) =>
-      alertInstanceToListItem(alert, instanceId, instance)
+      alertInstanceToListItem(durationEpoch, alert, instanceId, instance)
     ),
     ...difference(alert.mutedInstanceIds, Object.keys(alertInstances)).map(instanceId =>
-      alertInstanceToListItem(alert, instanceId)
+      alertInstanceToListItem(durationEpoch, alert, instanceId)
     ),
   ];
   const pageOfAlertInstances = getPage(mergedAlertInstances, pagination);
@@ -158,25 +160,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 +217,11 @@ const INACTIVE_LABEL = i18n.translate(
   { defaultMessage: 'Inactive' }
 );
 
-const durationSince = (start?: Date) => (start ? Date.now() - start.getTime() : 0);
+const durationSince = (durationEpoch: number, startTime?: number) =>
+  startTime ? durationEpoch - startTime : 0;
 
 export function alertInstanceToListItem(
+  durationEpoch: number,
   alert: Alert,
   instanceId: string,
   instance?: RawAlertInstance
@@ -221,7 +233,10 @@ 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: durationSince(
+      durationEpoch,
+      instance?.meta?.lastScheduledActions?.date?.getTime() ?? 0
+    ),
     isMuted,
   };
 }
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts b/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 => ({

diff --git a/x-pack/test/functional_with_es_ssl/page_objects/alert_details.ts b/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}`