From 4f969aac30a9dccd31f592e731eb57a39ce4a229 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 29 Mar 2020 16:55:34 +0100
Subject: [PATCH] feat(ui): handle API response with grids instead of flat
 groups

---
 ui/src/Stores/AlertStore.js      |  6 ++---
 ui/src/Stores/AlertStore.test.js | 42 ++++++++++++++++++++++++++------
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js
index 1bdf0be01..3eec57bbf 100644
--- a/ui/src/Stores/AlertStore.js
+++ b/ui/src/Stores/AlertStore.js
@@ -161,7 +161,7 @@ class AlertStore {
     {
       colors: {},
       counters: [],
-      groups: [],
+      grids: [],
       silences: {},
       upstreams: { instances: [], clusters: {} },
       getAlertmanagerByName(name) {
@@ -326,7 +326,7 @@ class AlertStore {
 
     const alertsURI =
       FormatBackendURI(
-        `alerts.json?sortOrder=${sortOrder}&sortLabel=${sortLabel}&sortReverse=${sortReverse}&`
+        `alerts.json?sortOrder=${sortOrder}&sortLabel=${sortLabel}&sortReverse=${sortReverse}&gridLabel=severity&`
       ) + FormatAPIFilterQuery(this.filters.values.map((f) => f.raw));
 
     return FetchGet(alertsURI, {}, this.info.setIsRetrying)
@@ -401,7 +401,7 @@ class AlertStore {
     for (const key of [
       "colors",
       "counters",
-      "groups",
+      "grids",
       "silences",
       "upstreams",
     ]) {
diff --git a/ui/src/Stores/AlertStore.test.js b/ui/src/Stores/AlertStore.test.js
index 77e1cb617..8b595fb00 100644
--- a/ui/src/Stores/AlertStore.test.js
+++ b/ui/src/Stores/AlertStore.test.js
@@ -554,23 +554,49 @@ describe("AlertStore.fetch", () => {
 
   it("adds new groups to the store after fetch", () => {
     const response = EmptyAPIResponse();
-    response.groups = { foo: "foo", bar: "bar" };
+    response.grids = [
+      {
+        labelName: "",
+        labelValue: "",
+        alertGroups: { foo: "foo", bar: "bar" },
+      },
+    ];
     const store = new AlertStore(["label=value"]);
     store.parseAPIResponse(response);
-    expect(Object.keys(store.data.groups)).toHaveLength(2);
-    expect(store.data.groups).toMatchObject({ foo: "foo", bar: "bar" });
+    expect(store.data.grids).toHaveLength(1);
+    expect(Object.keys(store.data.grids[0].alertGroups)).toHaveLength(2);
+    expect(store.data.grids[0].alertGroups).toMatchObject({
+      foo: "foo",
+      bar: "bar",
+    });
   });
 
   it("removes old groups from the store after fetch", () => {
     const store = new AlertStore(["label=value"]);
-    store.data.groups = { foo: "foo", delete: "me", bar: "bar" };
-    expect(Object.keys(store.data.groups)).toHaveLength(3);
+    store.data.grids = [
+      {
+        labelName: "",
+        labelValue: "",
+        alertGroups: { foo: "foo", delete: "me", bar: "bar" },
+      },
+    ];
+    expect(store.data.grids).toHaveLength(1);
+    expect(Object.keys(store.data.grids[0].alertGroups)).toHaveLength(3);
 
     const response = EmptyAPIResponse();
-    response.groups = { foo: "foo", bar: "bar" };
+    response.grids = [
+      {
+        labelName: "",
+        labelValue: "",
+        alertGroups: { foo: "foo", bar: "bar" },
+      },
+    ];
 
     store.parseAPIResponse(response);
-    expect(Object.keys(store.data.groups)).toHaveLength(2);
-    expect(store.data.groups).toMatchObject({ foo: "foo", bar: "bar" });
+    expect(Object.keys(store.data.grids[0].alertGroups)).toHaveLength(2);
+    expect(store.data.grids[0].alertGroups).toMatchObject({
+      foo: "foo",
+      bar: "bar",
+    });
   });
 });