chore(api): refactor grid label select source

cmd/karma/api_test.go

@@ -1088,6 +1088,11 @@ func TestVerifyAllGroups(t *testing.T) {
 		if diff := cmp.Diff(expectedReceivers, ur.Receivers); diff != "" {
 			t.Errorf("Incorrect receivers list (-want +got):\n%s", diff)
 		}
+
+		expectedLabelNames := []string{"alertname", "cluster", "disk", "instance", "ip", "job"}
+		if diff := cmp.Diff(expectedLabelNames, ur.LabelNames); diff != "" {
+			t.Errorf("Incorrect labelNames list (-want +got):\n%s", diff)
+		}
 	}
 }
 

cmd/karma/views.go

@@ -245,12 +245,20 @@ func alerts(w http.ResponseWriter, r *http.Request) {
 	}
 
 	var matches int
+	labelMap := map[string]struct{}{}
 	for _, ag := range filtered {
 		perGridAlertGroup := map[string]*models.AlertGroup{}
 
+		for k := range ag.Labels {
+			labelMap[k] = struct{}{}
+		}
 		for _, alert := range ag.Alerts {
 			alert := alert // scopelint pin
 
+			for k := range alert.Labels {
+				labelMap[k] = struct{}{}
+			}
+
 			allReceivers[alert.Receiver] = true
 
 			matches++
@@ -442,7 +450,6 @@ func alerts(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
-	//resp.AlertGroups = sortAlertGroups(c, alerts)
 	v, _ := lookupQueryString(r, "gridSortReverse")
 	gridSortReverse := v == "1"
 	sortedGrids := sortGrids(r, gridLabel, grids, gridSortReverse)
@@ -477,6 +484,12 @@ func alerts(w http.ResponseWriter, r *http.Request) {
 	}
 	sort.Strings(receivers)
 
+	resp.LabelNames = make([]string, 0, len(labelMap))
+	for label := range labelMap {
+		resp.LabelNames = append(resp.LabelNames, label)
+	}
+	sort.Strings(resp.LabelNames)
+
 	resp.Grids = sortedGrids
 	resp.Silences = silences
 	resp.Colors = colors

internal/models/api.go

@@ -349,6 +349,7 @@ type AlertsResponse struct {
 	Silences       map[string]map[string]Silence `json:"silences"`
 	Grids          []APIGrid                     `json:"grids"`
 	TotalAlerts    int                           `json:"totalAlerts"`
+	LabelNames     []string                      `json:"labelNames"`
 	Colors         LabelsColorMap                `json:"colors"`
 	Filters        []Filter                      `json:"filters"`
 	Counters       LabelNameStatsList            `json:"counters"`

ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx

@@ -33,6 +33,7 @@ beforeEach(() => {
       unprocessed: 0,
     },
   };
+  alertStore.data.setLabelNames(["alertname", "job", "cluster"]);
 
   jest.useFakeTimers();
 });

ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx

@@ -45,25 +45,6 @@ const GridLabelNameSelect: FC<{
     inputValue: string,
     callback: (options: OptionT[]) => void
   ) => {
-    const labelNames: { [key: string]: boolean } = {};
-
-    alertStore.data.grids.forEach((grid) => {
-      labelNames[grid.labelName] = true;
-      grid.alertGroups.forEach((group) => {
-        Object.keys(group.labels).forEach((name) => {
-          labelNames[name] = true;
-        });
-        Object.keys(group.shared.labels).forEach((name) => {
-          labelNames[name] = true;
-        });
-        group.alerts.forEach((alert) => {
-          Object.keys(alert.labels).forEach((name) => {
-            labelNames[name] = true;
-          });
-        });
-      });
-    });
-
     const autoEnabled =
       settingsStore.multiGridConfig.config.gridLabel === "@auto";
     const options = [
@@ -71,7 +52,7 @@ const GridLabelNameSelect: FC<{
         (val) =>
           val.value !== "@auto" || (val.value === "@auto" && !autoEnabled)
       ),
-      ...Object.keys(labelNames)
+      ...alertStore.data.labelNames
         .filter(
           (labelName) =>
             autoEnabled === true ||

ui/src/Models/APITypes.ts

@@ -201,6 +201,7 @@ export interface APIAlertsResponseT {
   upstreams: APIAlertsResponseUpstreamsT;
   silences: APIAlertsResponseSilenceMapT;
   grids: APIGridT[];
+  labelNames: string[];
   totalAlerts: number;
   colors: APIAlertsResponseColorsT;
   filters: APIFilterT[];

ui/src/Stores/AlertStore.ts

@@ -139,6 +139,8 @@ interface AlertStoreDataT {
   colors: APIAlertsResponseColorsT;
   counters: APILabelCounterT[];
   grids: APIGridT[];
+  labelNames: string[];
+  setLabelNames: (v: string[]) => void;
   silences: APIAlertsResponseSilenceMapT;
   upstreams: APIAlertsResponseUpstreamsT;
   receivers: string[];
@@ -291,6 +293,10 @@ class AlertStore {
         colors: {} as APIAlertsResponseColorsT,
         counters: [] as APILabelCounterT[],
         grids: [] as APIGridT[],
+        labelNames: [] as string[],
+        setLabelNames(v: string[]) {
+          this.labelNames = v;
+        },
         silences: {} as APIAlertsResponseSilenceMapT,
         upstreams: {
           counters: { total: 0, healthy: 0, failed: 0 },
@@ -394,6 +400,7 @@ class AlertStore {
         setCounters: action.bound,
         setReceivers: action.bound,
         setColors: action.bound,
+        setLabelNames: action.bound,
       },
       { name: "API Response data" }
     );
@@ -663,6 +670,7 @@ class AlertStore {
     updates.colors = result.colors;
     updates.counters = result.counters;
     updates.grids = result.grids;
+    updates.labelNames = result.labelNames;
     updates.silences = result.silences;
     updates.upstreams = result.upstreams;
     updates.receivers = result.receivers;

ui/src/__fixtures__/Fetch.ts

@@ -30,6 +30,7 @@ const EmptyAPIResponse = (): APIAlertsResponseT => ({
   },
   silences: { default: {} },
   grids: [],
+  labelNames: ["alertname", "job", "cluster"],
   receivers: ["by-cluster-service", "by-name"],
   totalAlerts: 0,
   colors: {},