From 7aee212dc9d564a8d5b50bdcc512c29c6be516ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 4 May 2019 23:34:27 +0100
Subject: [PATCH] fix(ui): fix fallback sorting by timestamps

Sorting by timestaps should be reversed - most recent timestamps first
---
 ui/src/Components/Grid/AlertGrid/index.js     | 31 ++++++++++++-------
 .../Components/Grid/AlertGrid/index.test.js   |  4 +--
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js
index 59d749bb6..2ddeafa06 100644
--- a/ui/src/Components/Grid/AlertGrid/index.js
+++ b/ui/src/Components/Grid/AlertGrid/index.js
@@ -25,7 +25,8 @@ import { GridSizesConfig, GetGridElementWidth } from "./GridSize";
 
 import "./index.css";
 
-const getGroupStartsAt = g => moment.max(g.alerts.map(a => moment(a.startsAt)));
+const getGroupStartsAt = g =>
+  moment.max(g.alerts.map(a => moment(a.startsAt))).valueOf();
 
 const getLabelValue = (alertStore, settingsStore, sortOrder, sortLabel, g) => {
   // if timestamp sort is enabled use latest alert for sorting
@@ -52,6 +53,18 @@ const getLabelValue = (alertStore, settingsStore, sortOrder, sortLabel, g) => {
   return mappedValue !== undefined ? mappedValue : labelValue;
 };
 
+const compareByTimestamp = (a, b) => {
+  const ast = getGroupStartsAt(a);
+  const bst = getGroupStartsAt(b);
+  if (ast > bst) {
+    return -1;
+  } else if (ast < bst) {
+    return 1;
+  } else {
+    return 0;
+  }
+};
+
 const AlertGrid = observer(
   class AlertGrid extends Component {
     static propTypes = {
@@ -181,8 +194,8 @@ const AlertGrid = observer(
       );
 
       if (av === undefined && av === undefined) {
-        // if both alerts lack the label they are equal
-        return 0;
+        // if both alerts lack the label they are equal, fallback to timestamps
+        return compareByTimestamp(a, b);
       } else if (av === undefined || av > bv) {
         // if first one lacks it it's should be rendered after alerts with that label
         return val;
@@ -192,15 +205,9 @@ const AlertGrid = observer(
       } else if (
         sortOrder !== settingsStore.gridConfig.options.startsAt.value
       ) {
-        const ast = getGroupStartsAt(a);
-        const bst = getGroupStartsAt(b);
-        if (ast > bst) {
-          return 1;
-        } else if (ast < bst) {
-          return -1;
-        } else {
-          return 0;
-        }
+        // if values are equal use timestamps as secondary sort, but only
+        // if we didn't already sort by timestamps
+        return compareByTimestamp(a, b);
       } else {
         return 0;
       }
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.js b/ui/src/Components/Grid/AlertGrid/index.test.js
index e7cce65b5..ad41e366e 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/index.test.js
@@ -342,9 +342,9 @@ describe("<AlertGrid />", () => {
     const tree = ShallowAlertGrid();
     const alertGroups = tree.find("AlertGroup");
     expect(alertGroups.map(g => g.props().group.id)).toEqual([
-      "id3",
+      "id2",
       "id1",
-      "id2"
+      "id3"
     ]);
   });