[Alerting] Fixes flaky test in Alert Instances Details page (elastic#…

…60893)

Fixes flaky test in Alert Instances Details page

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

@@ -254,12 +254,15 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       });
 
       it('renders the active alert instances', async () => {
+        // refresh to ensure Api call and UI are looking at freshest output
+        await browser.refresh();
+
         // Verify content
         await testSubjects.existOrFail('alertInstancesList');
 
         const { alertInstances } = await alerting.alerts.getAlertState(alert.id);
 
-        const dateOnAllInstances = mapValues(
+        const dateOnAllInstancesFromApiResponse = mapValues<Record<string, number>>(
           alertInstances,
           ({
             meta: {
@@ -268,28 +271,32 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           }) => date
         );
 
-        log.debug(`API RESULT: ${JSON.stringify(dateOnAllInstances)}`);
+        log.debug(
+          `API RESULT: ${Object.entries(dateOnAllInstancesFromApiResponse)
+            .map(([id, date]) => `${id}: ${moment(date).utc()}`)
+            .join(', ')}`
+        );
 
         const instancesList = await pageObjects.alertDetailsUI.getAlertInstancesList();
         expect(instancesList.map(instance => omit(instance, 'duration'))).to.eql([
           {
             instance: 'us-central',
             status: 'Active',
-            start: moment(dateOnAllInstances['us-central'])
+            start: moment(dateOnAllInstancesFromApiResponse['us-central'])
               .utc()
               .format('D MMM YYYY @ HH:mm:ss'),
           },
           {
             instance: 'us-east',
             status: 'Active',
-            start: moment(dateOnAllInstances['us-east'])
+            start: moment(dateOnAllInstancesFromApiResponse['us-east'])
               .utc()
               .format('D MMM YYYY @ HH:mm:ss'),
           },
           {
             instance: 'us-west',
             status: 'Active',
-            start: moment(dateOnAllInstances['us-west'])
+            start: moment(dateOnAllInstancesFromApiResponse['us-west'])
               .utc()
               .format('D MMM YYYY @ HH:mm:ss'),
           },
@@ -299,30 +306,41 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           await pageObjects.alertDetailsUI.getAlertInstanceDurationEpoch()
         ).utc();
 
-        const durationFromInstanceTillPageLoad = mapValues(dateOnAllInstances, date =>
-          moment.duration(durationEpoch.diff(moment(date).utc()))
+        log.debug(`DURATION EPOCH is: ${durationEpoch}]`);
+
+        const durationFromInstanceInApiUntilPageLoad = mapValues(
+          dateOnAllInstancesFromApiResponse,
+          // time from Alert Instance until pageload (AKA durationEpoch)
+          date => {
+            const durationFromApiResuiltToEpoch = moment.duration(
+              durationEpoch.diff(moment(date).utc())
+            );
+            // The UI removes milliseconds, so lets do the same in the test so we can compare
+            return moment.duration({
+              hours: durationFromApiResuiltToEpoch.hours(),
+              minutes: durationFromApiResuiltToEpoch.minutes(),
+              seconds: durationFromApiResuiltToEpoch.seconds(),
+            });
+          }
         );
+
         instancesList
           .map(alertInstance => ({
             id: alertInstance.instance,
-            duration: alertInstance.duration.split(':').map(part => parseInt(part, 10)),
+            // time from Alert Instance used to render the list until pageload (AKA durationEpoch)
+            duration: moment.duration(alertInstance.duration),
           }))
-          .map(({ id, duration: [hours, minutes, seconds] }) => ({
-            id,
-            duration: moment.duration({
-              hours,
-              minutes,
-              seconds,
-            }),
-          }))
-          .forEach(({ id, duration }) => {
-            // make sure the duration is within a 10 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')
+          .forEach(({ id, duration: durationAsItAppearsOnList }) => {
+            log.debug(
+              `DURATION of ${id} [From UI: ${durationAsItAppearsOnList.as(
+                'seconds'
+              )} seconds] [From API: ${durationFromInstanceInApiUntilPageLoad[id].as(
+                'seconds'
+              )} seconds]`
             );
-            expect(duration.as('milliseconds')).to.lessThan(
-              durationFromInstanceTillPageLoad[id].add(1000 * 10).as('milliseconds')
+
+            expect(durationFromInstanceInApiUntilPageLoad[id].as('seconds')).to.equal(
+              durationAsItAppearsOnList.as('seconds')
             );
           });
       });