sort alert instance by status in UI (#80103) (#80163)

Sorts Alert instances by their status to ensure Active come first.
elastic · Oct 12, 2020 · 90d3122 · 90d3122
1 parent 5b75571
commit 90d3122
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 12 deletions.
diff --git a/x-pack/plugins/alerts/common/alert_instance_summary.ts b/x-pack/plugins/alerts/common/alert_instance_summary.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-type AlertStatusValues = 'OK' | 'Active' | 'Error';
-type AlertInstanceStatusValues = 'OK' | 'Active';
+export type AlertStatusValues = 'OK' | 'Active' | 'Error';
+export type AlertInstanceStatusValues = 'OK' | 'Active';
 
 export interface AlertInstanceSummary {
   id: string;

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
@@ -41,24 +41,26 @@ describe('alert_instances', () => {
           muted: false,
         },
         second_instance: {
-          status: 'OK',
+          status: 'Active',
           muted: false,
         },
       },
     });
 
     const instances: AlertInstanceListItem[] = [
+      // active first
       alertInstanceToListItem(
         fakeNow.getTime(),
         alert,
-        'first_instance',
-        alertInstanceSummary.instances.first_instance
+        'second_instance',
+        alertInstanceSummary.instances.second_instance
       ),
+      // ok second
       alertInstanceToListItem(
         fakeNow.getTime(),
         alert,
-        'second_instance',
-        alertInstanceSummary.instances.second_instance
+        'first_instance',
+        alertInstanceSummary.instances.first_instance
       ),
     ];
 
@@ -176,6 +178,7 @@ describe('alertInstanceToListItem', () => {
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start,
+      sortPriority: 0,
       duration: fakeNow.getTime() - fake2MinutesAgo.getTime(),
       isMuted: false,
     });
@@ -196,6 +199,7 @@ describe('alertInstanceToListItem', () => {
       instance: 'id',
       status: { label: 'Active', healthColor: 'primary' },
       start,
+      sortPriority: 0,
       duration: fakeNow.getTime() - fake2MinutesAgo.getTime(),
       isMuted: true,
     });
@@ -213,6 +217,7 @@ describe('alertInstanceToListItem', () => {
       status: { label: 'Active', healthColor: 'primary' },
       start: undefined,
       duration: 0,
+      sortPriority: 0,
       isMuted: false,
     });
   });
@@ -230,6 +235,7 @@ describe('alertInstanceToListItem', () => {
       status: { label: 'OK', healthColor: 'subdued' },
       start: undefined,
       duration: 0,
+      sortPriority: 1,
       isMuted: true,
     });
   });

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
@@ -11,6 +11,7 @@ import { EuiBasicTable, EuiHealth, EuiSpacer, EuiSwitch } from '@elastic/eui';
 // @ts-ignore
 import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/lib/services';
 import { padStart, chunk } from 'lodash';
+import { AlertInstanceStatusValues } from '../../../../../../alerts/common';
 import { Alert, AlertInstanceSummary, AlertInstanceStatus, Pagination } from '../../../../types';
 import {
   ComponentOpts as AlertApis,
@@ -124,11 +125,12 @@ export function AlertInstances({
     size: DEFAULT_SEARCH_PAGE_SIZE,
   });
 
-  const alertInstances = Object.entries(
-    alertInstanceSummary.instances
-  ).map(([instanceId, instance]) =>
-    alertInstanceToListItem(durationEpoch, alert, instanceId, instance)
-  );
+  const alertInstances = Object.entries(alertInstanceSummary.instances)
+    .map(([instanceId, instance]) =>
+      alertInstanceToListItem(durationEpoch, alert, instanceId, instance)
+    )
+    .sort((leftInstance, rightInstance) => leftInstance.sortPriority - rightInstance.sortPriority);
+
   const pageOfAlertInstances = getPage(alertInstances, pagination);
 
   const onMuteAction = async (instance: AlertInstanceListItem) => {
@@ -185,6 +187,7 @@ export interface AlertInstanceListItem {
   start?: Date;
   duration: number;
   isMuted: boolean;
+  sortPriority: number;
 }
 
 const ACTIVE_LABEL = i18n.translate(
@@ -210,11 +213,23 @@ export function alertInstanceToListItem(
       : { label: INACTIVE_LABEL, healthColor: 'subdued' };
   const start = instance?.activeStartDate ? new Date(instance.activeStartDate) : undefined;
   const duration = start ? durationEpoch - start.valueOf() : 0;
+  const sortPriority = getSortPriorityByStatus(instance?.status);
   return {
     instance: instanceId,
     status,
     start,
     duration,
     isMuted,
+    sortPriority,
   };
 }
+
+function getSortPriorityByStatus(status?: AlertInstanceStatusValues): number {
+  switch (status) {
+    case 'Active':
+      return 0;
+    case 'OK':
+      return 1;
+  }
+  return 2;
+}