Alerting: Introduce useProduceNewAlertmanagerConfiguration (#91623)

useProduceNewAlertmanagerConfiguration

package.json

@@ -383,6 +383,7 @@
     "react-window": "1.8.10",
     "react-window-infinite-loader": "1.0.9",
     "react-zoom-pan-pinch": "^3.3.0",
+    "reduce-reducers": "^1.0.4",
     "redux": "5.0.1",
     "redux-thunk": "3.1.0",
     "regenerator-runtime": "0.14.1",

public/app/features/alerting/unified/hooks/mergeRequestStates.ts

@@ -0,0 +1,19 @@
+interface RequestState {
+  error?: unknown;
+
+  isUninitialized: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+  isLoading: boolean;
+}
+
+// @TODO what to do with the other props that we get from RTKQ's state such as originalArgs, etc?
+export function mergeRequestStates(...states: RequestState[]): RequestState {
+  return {
+    error: states.find((s) => s.error),
+    isUninitialized: states.every((s) => s.isUninitialized),
+    isSuccess: states.every((s) => s.isSuccess),
+    isError: states.some((s) => s.isError),
+    isLoading: states.some((s) => s.isLoading),
+  };
+}

public/app/features/alerting/unified/hooks/useProduceNewAlertmanagerConfig.ts

@@ -0,0 +1,64 @@
+import { Action } from '@reduxjs/toolkit';
+import reduceReducers from 'reduce-reducers';
+
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+
+import { alertmanagerApi } from '../api/alertmanagerApi';
+import { useAlertmanager } from '../state/AlertmanagerContext';
+
+import { mergeRequestStates } from './mergeRequestStates';
+
+const ERR_NO_ACTIVE_AM = new Error('no active Alertmanager');
+
+const { useLazyGetAlertmanagerConfigurationQuery, useUpdateAlertmanagerConfigurationMutation } = alertmanagerApi;
+
+export const initialAlertmanagerConfiguration: AlertManagerCortexConfig = {
+  alertmanager_config: {
+    receivers: [],
+    route: {},
+    time_intervals: [],
+    mute_time_intervals: [],
+    inhibit_rules: [],
+    templates: [],
+  },
+  template_files: {},
+};
+
+const configurationReducer = reduceReducers(initialAlertmanagerConfiguration);
+
+/**
+ * This hook will make sure we are always applying actions that mutate the Alertmanager configuration
+ * on top of the latest Alertmanager configuration object.
+ */
+export function useProduceNewAlertmanagerConfiguration() {
+  const { selectedAlertmanager } = useAlertmanager();
+
+  const [fetchAlertmanagerConfig, fetchAlertmanagerState] = useLazyGetAlertmanagerConfigurationQuery();
+  const [updateAlertManager, updateAlertmanagerState] = useUpdateAlertmanagerConfigurationMutation();
+
+  const newConfigurationState = mergeRequestStates(fetchAlertmanagerState, updateAlertmanagerState);
+
+  if (!selectedAlertmanager) {
+    throw ERR_NO_ACTIVE_AM;
+  }
+
+  /**
+   * This function will fetch the latest Alertmanager configuration, apply a diff to it via a reducer and
+   * returns the result.
+   *
+   * ┌────────────────────────────┐  ┌───────────────┐  ┌───────────────────┐
+   * │ fetch latest configuration │─▶│ apply reducer │─▶│  new rule config  │
+   * └────────────────────────────┘  └───────────────┘  └───────────────────┘
+   */
+  const produceNewAlertmanagerConfiguration = async (action: Action) => {
+    const currentAlertmanagerConfiguration = await fetchAlertmanagerConfig(selectedAlertmanager).unwrap();
+    const newConfig = configurationReducer(currentAlertmanagerConfiguration, action);
+
+    return updateAlertManager({
+      selectedAlertmanager,
+      config: newConfig,
+    }).unwrap();
+  };
+
+  return [produceNewAlertmanagerConfiguration, newConfigurationState] as const;
+}

yarn.lock

@@ -17865,6 +17865,7 @@ __metadata:
     react-window: "npm:1.8.10"
     react-window-infinite-loader: "npm:1.0.9"
     react-zoom-pan-pinch: "npm:^3.3.0"
+    reduce-reducers: "npm:^1.0.4"
     redux: "npm:5.0.1"
     redux-mock-store: "npm:1.5.4"
     redux-thunk: "npm:3.1.0"
@@ -26635,6 +26636,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reduce-reducers@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "reduce-reducers@npm:1.0.4"
+  checksum: 10/9b3648fa505a3ac7834cd8150ec98f9915e4020c8df0e9a4eddb5d3615814067943913f2582d0be4763ad6583209c0cf7ad3cc1021745b9b8e6ace768d49f6a9
+  languageName: node
+  linkType: hard
+
 "redux-mock-store@npm:1.5.4":
   version: 1.5.4
   resolution: "redux-mock-store@npm:1.5.4"