Alerting: Make alert group editing safer (#88627)

public/app/features/alerting/unified/RuleList.test.tsx

@@ -689,7 +689,7 @@ describe('RuleList', () => {
     expect(alertsInReorder).toHaveLength(2);
   });
 
-  describe('pausing rules', () => {
+  describe.skip('pausing rules', () => {
     beforeEach(() => {
       grantUserPermissions([
         AccessControlAction.AlertingRuleRead,

public/app/features/alerting/unified/api/alertRuleApi.ts

@@ -8,11 +8,9 @@ import {
   Annotations,
   GrafanaAlertStateDecision,
   Labels,
-  PostableRuleGrafanaRuleDTO,
+  PostableRulerRuleGroupDTO,
   PromRulesResponse,
-  RulerAlertingRuleDTO,
   RulerGrafanaRuleDTO,
-  RulerRecordingRuleDTO,
   RulerRuleGroupDTO,
   RulerRulesConfigDTO,
 } from 'app/types/unified-alerting-dto';
@@ -77,14 +75,7 @@ interface ExportRulesParams {
   ruleUid?: string;
 }
 
-export interface ModifyExportPayload {
+export interface AlertGroupUpdated {
-  rules: Array<RulerAlertingRuleDTO | RulerRecordingRuleDTO | PostableRuleGrafanaRuleDTO>;
-  name: string;
-  interval?: string | undefined;
-  source_tenants?: string[] | undefined;
-}
-
-export interface AlertRuleUpdated {
   message: string;
   /**
    * UIDs of rules updated from this request
@@ -220,7 +211,7 @@ export const alertRuleApi = alertingApi.injectEndpoints({
     }),
 
     // TODO This should be probably a separate ruler API file
-    rulerRuleGroup: build.query<
+    getRuleGroupForNamespace: build.query<
       RulerRuleGroupDTO,
       { rulerConfig: RulerDataSourceConfig; namespace: string; group: string }
     >({
@@ -231,6 +222,17 @@ export const alertRuleApi = alertingApi.injectEndpoints({
       providesTags: ['CombinedAlertRule'],
     }),
 
+    deleteRuleGroupFromNamespace: build.mutation<
+      RulerRuleGroupDTO,
+      { rulerConfig: RulerDataSourceConfig; namespace: string; group: string }
+    >({
+      query: ({ rulerConfig, namespace, group }) => {
+        const { path, params } = rulerUrlBuilder(rulerConfig).namespaceGroup(namespace, group);
+        return { url: path, params, method: 'DELETE' };
+      },
+      invalidatesTags: ['CombinedAlertRule'],
+    }),
+
     getAlertRule: build.query<RulerGrafanaRuleDTO, { uid: string }>({
       // TODO: In future, if supported in other rulers, parametrize ruler source name
       // For now, to make the consumption of this hook clearer, only support Grafana ruler
@@ -272,7 +274,7 @@ export const alertRuleApi = alertingApi.injectEndpoints({
     }),
     exportModifiedRuleGroup: build.mutation<
       string,
-      { payload: ModifyExportPayload; format: ExportFormats; nameSpaceUID: string }
+      { payload: PostableRulerRuleGroupDTO; format: ExportFormats; nameSpaceUID: string }
     >({
       query: ({ payload, format, nameSpaceUID }) => ({
         url: `/api/ruler/grafana/api/v1/rules/${nameSpaceUID}/export/`,
@@ -298,13 +300,20 @@ export const alertRuleApi = alertingApi.injectEndpoints({
       }),
       keepUnusedDataFor: 0,
     }),
+    updateRuleGroupForNamespace: build.mutation<
+      AlertGroupUpdated,
+      { rulerConfig: RulerDataSourceConfig; namespace: string; payload: PostableRulerRuleGroupDTO }
+    >({
+      query: ({ payload, namespace, rulerConfig }) => {
+        const { path, params } = rulerUrlBuilder(rulerConfig).namespace(namespace);
 
-    updateRule: build.mutation<AlertRuleUpdated, { nameSpaceUID: string; payload: ModifyExportPayload }>({
+        return {
-      query: ({ payload, nameSpaceUID }) => ({
+          url: path,
-        url: `/api/ruler/grafana/api/v1/rules/${nameSpaceUID}/`,
+          params,
-        data: payload,
+          data: payload,
-        method: 'POST',
+          method: 'POST',
-      }),
+        };
+      },
       invalidatesTags: ['CombinedAlertRule'],
     }),
   }),

public/app/features/alerting/unified/components/MenuItemPauseRule.tsx

@@ -1,13 +1,16 @@
-import { produce } from 'immer';
 import React from 'react';
 
 import { Menu } from '@grafana/ui';
 import { useAppNotification } from 'app/core/copy/appNotification';
-import { alertRuleApi } from 'app/features/alerting/unified/api/alertRuleApi';
+import {
-import { isGrafanaRulerRule, isGrafanaRulerRulePaused } from 'app/features/alerting/unified/utils/rules';
+  isGrafanaRulerRule,
+  isGrafanaRulerRulePaused,
+  getRuleGroupLocationFromCombinedRule,
+} from 'app/features/alerting/unified/utils/rules';
 import { CombinedRule } from 'app/types/unified-alerting';
 
-import { grafanaRulerConfig } from '../hooks/useCombinedRule';
+import { usePauseRuleInGroup } from '../hooks/useProduceNewRuleGroup';
+import { stringifyErrorLike } from '../utils/misc';
 
 interface Props {
   rule: CombinedRule;
@@ -22,12 +25,9 @@ interface Props {
  * and triggering API call to do so
  */
 const MenuItemPauseRule = ({ rule, onPauseChange }: Props) => {
-  // we need to fetch the group again, as maybe the group has been filtered
-  const [getGroup] = alertRuleApi.endpoints.rulerRuleGroup.useLazyQuery();
   const notifyApp = useAppNotification();
+  const [pauseRule, updateState] = usePauseRuleInGroup();
 
-  // Add any dependencies here
-  const [updateRule] = alertRuleApi.endpoints.updateRule.useMutation();
   const isPaused = isGrafanaRulerRule(rule.rulerRule) && isGrafanaRulerRulePaused(rule.rulerRule);
   const icon = isPaused ? 'play' : 'pause';
   const title = isPaused ? 'Resume evaluation' : 'Pause evaluation';
@@ -39,41 +39,17 @@ const MenuItemPauseRule = ({ rule, onPauseChange }: Props) => {
     if (!isGrafanaRulerRule(rule.rulerRule)) {
       return;
     }
-    const ruleUid = rule.rulerRule.grafana_alert.uid;
-    const targetGroup = await getGroup({
-      rulerConfig: grafanaRulerConfig,
-      namespace: rule.namespace.uid || rule.rulerRule.grafana_alert.namespace_uid,
-      group: rule.group.name,
-    }).unwrap();
 
-    if (!targetGroup) {
+    try {
-      notifyApp.error(
+      const ruleGroupId = getRuleGroupLocationFromCombinedRule(rule);
-        `Failed to ${newIsPaused ? 'pause' : 'resume'} the rule. Could not get the target group to update the rule.`
+      const ruleUID = rule.rulerRule.grafana_alert.uid;
-      );
+
+      await pauseRule(ruleGroupId, ruleUID, newIsPaused);
+    } catch (error) {
+      notifyApp.error(`Failed to ${newIsPaused ? 'pause' : 'resume'} the rule: ${stringifyErrorLike(error)}`);
       return;
     }
 
-    // Parse the rules into correct format for API
-    const modifiedRules = targetGroup.rules.map((groupRule) => {
-      if (!(isGrafanaRulerRule(groupRule) && groupRule.grafana_alert.uid === ruleUid)) {
-        return groupRule;
-      }
-      return produce(groupRule, (updatedGroupRule) => {
-        updatedGroupRule.grafana_alert.is_paused = newIsPaused;
-      });
-    });
-
-    const payload = {
-      interval: targetGroup.interval!,
-      name: targetGroup.name,
-      rules: modifiedRules,
-    };
-
-    await updateRule({
-      nameSpaceUID: rule.namespace.uid || rule.rulerRule.grafana_alert.namespace_uid,
-      payload,
-    }).unwrap();
-
     onPauseChange?.();
   };
 
@@ -81,6 +57,7 @@ const MenuItemPauseRule = ({ rule, onPauseChange }: Props) => {
     <Menu.Item
       label={title}
       icon={icon}
+      disabled={updateState.isLoading}
       onClick={() => {
         setRulePause(!isPaused);
       }}

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx

@@ -4,7 +4,7 @@ import { FormProvider, SubmitErrorHandler, UseFormWatch, useForm } from 'react-h
 import { Link, useParams } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { config } from '@grafana/runtime';
+import { config, locationService } from '@grafana/runtime';
 import { Button, ConfirmModal, CustomScrollbar, Spinner, Stack, useStyles2 } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { useAppNotification } from 'app/core/copy/appNotification';
@@ -12,7 +12,11 @@ import { contextSrv } from 'app/core/core';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import InfoPausedRule from 'app/features/alerting/unified/components/InfoPausedRule';
-import { isGrafanaRulerRule, isGrafanaRulerRulePaused } from 'app/features/alerting/unified/utils/rules';
+import {
+  getRuleGroupLocationFromRuleWithLocation,
+  isGrafanaRulerRule,
+  isGrafanaRulerRulePaused,
+} from 'app/features/alerting/unified/utils/rules';
 import { useDispatch } from 'app/types';
 import { RuleWithLocation } from 'app/types/unified-alerting';
 
@@ -23,8 +27,9 @@ import {
   trackAlertRuleFormCancelled,
   trackAlertRuleFormSaved,
 } from '../../../Analytics';
+import { useDeleteRuleFromGroup } from '../../../hooks/useProduceNewRuleGroup';
 import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
-import { deleteRuleAction, saveRuleFormAction } from '../../../state/actions';
+import { saveRuleFormAction } from '../../../state/actions';
 import { RuleFormType, RuleFormValues } from '../../../types/rule-form';
 import { initialAsyncRequestState } from '../../../utils/redux';
 import {
@@ -36,7 +41,6 @@ import {
   ignoreHiddenQueries,
   normalizeDefaultAnnotations,
 } from '../../../utils/rule-form';
-import * as ruleId from '../../../utils/rule-id';
 import { GrafanaRuleExporter } from '../../export/GrafanaRuleExporter';
 import { AlertRuleNameInput } from '../AlertRuleNameInput';
 import AnnotationsStep from '../AnnotationsStep';
@@ -60,6 +64,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
   const [queryParams] = useQueryParams();
   const [showEditYaml, setShowEditYaml] = useState(false);
   const [evaluateEvery, setEvaluateEvery] = useState(existing?.group.interval ?? DEFAULT_GROUP_EVALUATION_INTERVAL);
+  const [deleteRuleFromGroup, _deleteRuleState] = useDeleteRuleFromGroup();
 
   const routeParams = useParams<{ type: string; id: string }>();
   const ruleType = translateRouteParamToRuleType(routeParams.type);
@@ -151,16 +156,12 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
     );
   };
 
-  const deleteRule = () => {
+  const deleteRule = async () => {
     if (existing) {
-      const identifier = ruleId.fromRulerRule(
+      const ruleGroupIdentifier = getRuleGroupLocationFromRuleWithLocation(existing);
-        existing.ruleSourceName,
-        existing.namespace,
-        existing.group.name,
-        existing.rule
-      );
 
-      dispatch(deleteRuleAction(identifier, { navigateTo: '/alerting/list' }));
+      await deleteRuleFromGroup(ruleGroupIdentifier, existing.rule);
+      locationService.replace(returnTo);
     }
   };
 

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx

@@ -7,8 +7,12 @@ import { useAppNotification } from 'app/core/copy/appNotification';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 
 import { AppChromeUpdate } from '../../../../../../core/components/AppChrome/AppChromeUpdate';
-import { RulerRuleDTO, RulerRuleGroupDTO } from '../../../../../../types/unified-alerting-dto';
+import {
-import { alertRuleApi, ModifyExportPayload } from '../../../api/alertRuleApi';
+  PostableRulerRuleGroupDTO,
+  RulerRuleDTO,
+  RulerRuleGroupDTO,
+} from '../../../../../../types/unified-alerting-dto';
+import { alertRuleApi } from '../../../api/alertRuleApi';
 import { fetchRulerRulesGroup } from '../../../api/ruler';
 import { useDataSourceFeatures } from '../../../hooks/useCombinedRule';
 import { RuleFormValues } from '../../../types/rule-form';
@@ -133,7 +137,7 @@ export const getPayloadToExport = (
   uid: string,
   formValues: RuleFormValues,
   existingGroup: RulerRuleGroupDTO<RulerRuleDTO> | null | undefined
-): ModifyExportPayload => {
+): PostableRulerRuleGroupDTO => {
   const grafanaRuleDto = formValuesToRulerGrafanaRuleDTO(formValues);
 
   const updatedRule = { ...grafanaRuleDto, grafana_alert: { ...grafanaRuleDto.grafana_alert, uid: uid } };
@@ -167,7 +171,7 @@ export const getPayloadToExport = (
 
 const useGetPayloadToExport = (values: RuleFormValues, uid: string) => {
   const rulerGroupDto = useGetGroup(values.folder?.uid ?? '', values.group);
-  const payload: ModifyExportPayload = useMemo(() => {
+  const payload: PostableRulerRuleGroupDTO = useMemo(() => {
     return getPayloadToExport(uid, values, rulerGroupDto?.value);
   }, [uid, rulerGroupDto, values]);
   return { payload, loadingGroup: rulerGroupDto.loading };

public/app/features/alerting/unified/components/rule-viewer/DeleteModal.tsx

@@ -1,17 +1,19 @@
 import React, { useState, useCallback, useMemo } from 'react';
 
+import { locationService } from '@grafana/runtime';
 import { ConfirmModal } from '@grafana/ui';
 import { dispatch } from 'app/store/store';
 import { CombinedRule } from 'app/types/unified-alerting';
 
-import { deleteRuleAction } from '../../state/actions';
+import { useDeleteRuleFromGroup } from '../../hooks/useProduceNewRuleGroup';
-import { getRulesSourceName } from '../../utils/datasource';
+import { fetchPromAndRulerRulesAction } from '../../state/actions';
-import { fromRulerRule } from '../../utils/rule-id';
+import { getRuleGroupLocationFromCombinedRule } from '../../utils/rules';
 
 type DeleteModalHook = [JSX.Element, (rule: CombinedRule) => void, () => void];
 
-export const useDeleteModal = (): DeleteModalHook => {
+export const useDeleteModal = (redirectToListView = false): DeleteModalHook => {
   const [ruleToDelete, setRuleToDelete] = useState<CombinedRule | undefined>();
+  const [deleteRuleFromGroup, _deleteState] = useDeleteRuleFromGroup();
 
   const dismissModal = useCallback(() => {
     setRuleToDelete(undefined);
@@ -22,20 +24,25 @@ export const useDeleteModal = (): DeleteModalHook => {
   }, []);
 
   const deleteRule = useCallback(
-    (ruleToDelete?: CombinedRule) => {
+    async (rule?: CombinedRule) => {
-      if (ruleToDelete && ruleToDelete.rulerRule) {
+      if (!rule?.rulerRule) {
-        const identifier = fromRulerRule(
+        return;
-          getRulesSourceName(ruleToDelete.namespace.rulesSource),
+      }
-          ruleToDelete.namespace.name,
-          ruleToDelete.group.name,
-          ruleToDelete.rulerRule
-        );
 
-        dispatch(deleteRuleAction(identifier, { navigateTo: '/alerting/list' }));
+      const location = getRuleGroupLocationFromCombinedRule(rule);
-        dismissModal();
+      await deleteRuleFromGroup(location, rule.rulerRule);
+
+      // refetch rules for this rules source
+      // @TODO remove this when we moved everything to RTKQ – then the endpoint will simply invalidate the tags
+      dispatch(fetchPromAndRulerRulesAction({ rulesSourceName: location.dataSourceName }));
+
+      dismissModal();
+
+      if (redirectToListView) {
+        locationService.replace('/alerting/list');
       }
     },
-    [dismissModal]
+    [deleteRuleFromGroup, dismissModal, redirectToListView]
   );
 
   const modal = useMemo(

public/app/features/alerting/unified/components/rules/RuleActionsButtons.test.tsx

@@ -1,7 +1,7 @@
 import { produce } from 'immer';
 import React from 'react';
 import { render, screen, userEvent } from 'test/test-utils';
-import { byLabelText } from 'testing-library-selector';
+import { byLabelText, byRole } from 'testing-library-selector';
 
 import { config, setPluginExtensionsHook } from '@grafana/runtime';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -24,7 +24,9 @@ jest.mock('app/core/services/context_srv');
 const mockContextSrv = jest.mocked(contextSrv);
 
 const ui = {
+  menu: byRole('menu'),
   moreButton: byLabelText(/More/),
+  pauseButton: byRole('menuitem', { name: /Pause evaluation/ }),
 };
 
 const grantAllPermissions = () => {
@@ -76,6 +78,19 @@ describe('RuleActionsButtons', () => {
     expect(await getMenuContents()).toMatchSnapshot();
   });
 
+  it('should be able to pause a Grafana rule', async () => {
+    const user = userEvent.setup();
+    grantAllPermissions();
+    const mockRule = getGrafanaRule();
+
+    render(<RuleActionsButtons rule={mockRule} rulesSource="grafana" />);
+
+    await user.click(await ui.moreButton.find());
+    await user.click(await ui.pauseButton.find());
+
+    expect(ui.menu.query()).not.toBeInTheDocument();
+  });
+
   it('renders correct options for Cloud rule', async () => {
     const user = userEvent.setup();
     grantAllPermissions();

public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx

@@ -44,7 +44,9 @@ export const RuleActionsButtons = ({ compact, showViewButton, showCopyLinkButton
   const dispatch = useDispatch();
   const location = useLocation();
   const style = useStyles2(getStyles);
-  const [deleteModal, showDeleteModal] = useDeleteModal();
+
+  const redirectToListView = compact ? false : true;
+  const [deleteModal, showDeleteModal] = useDeleteModal(redirectToListView);
 
   const [showSilenceDrawer, setShowSilenceDrawer] = useState<boolean>(false);
 

public/app/features/alerting/unified/hooks/__snapshots__/useProduceNewRuleGroup.test.tsx.snap

@@ -0,0 +1,243 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`delete rule should be able to delete a Data source managed rule 1`] = `
+[
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "GET",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/mockCombinedNamespace/mockCombinedRuleGroup?subtype=cortex",
+  },
+  {
+    "body": {
+      "name": "group-1",
+      "rules": [
+        {
+          "alert": "r1",
+          "annotations": {
+            "summary": "test alert",
+          },
+          "expr": "up = 1",
+          "labels": {
+            "foo": "bar",
+          },
+        },
+      ],
+    },
+    "headers": [
+      [
+        "content-type",
+        "application/json",
+      ],
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "POST",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/mockCombinedNamespace?subtype=cortex",
+  },
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "GET",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/mockCombinedNamespace/mockCombinedRuleGroup?subtype=cortex",
+  },
+]
+`;
+
+exports[`delete rule should be able to delete a Grafana managed rule 1`] = `
+[
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "GET",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/NAMESPACE_UID/mockCombinedRuleGroup?subtype=cortex",
+  },
+  {
+    "body": {
+      "name": "group-1",
+      "rules": [
+        {
+          "annotations": {},
+          "for": "",
+          "grafana_alert": {
+            "condition": "",
+            "data": [],
+            "exec_err_state": "Error",
+            "namespace_uid": "NAMESPACE_UID",
+            "no_data_state": "NoData",
+            "rule_group": "my-group",
+            "title": "my rule",
+            "uid": "r1",
+          },
+          "labels": {},
+        },
+      ],
+    },
+    "headers": [
+      [
+        "content-type",
+        "application/json",
+      ],
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "POST",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/NAMESPACE_UID?subtype=cortex",
+  },
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "GET",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/NAMESPACE_UID/mockCombinedRuleGroup?subtype=cortex",
+  },
+]
+`;
+
+exports[`delete rule should delete the entire group if no more rules are left 1`] = `
+[
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "GET",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/uuid020c61ef/mockCombinedRuleGroup?subtype=cortex",
+  },
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "DELETE",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/uuid020c61ef/mockCombinedRuleGroup?subtype=cortex",
+  },
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "GET",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/uuid020c61ef/mockCombinedRuleGroup?subtype=cortex",
+  },
+]
+`;
+
+exports[`pause rule should be able to pause a rule 1`] = `
+[
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "GET",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/uuid020c61ef/grafana-group-1?subtype=cortex",
+  },
+  {
+    "body": {
+      "interval": "1m",
+      "name": "grafana-group-1",
+      "rules": [
+        {
+          "annotations": {
+            "summary": "Test alert",
+          },
+          "for": "5m",
+          "grafana_alert": {
+            "condition": "A",
+            "data": [
+              {
+                "datasourceUid": "datasource-uid",
+                "model": {
+                  "datasource": {
+                    "type": "prometheus",
+                    "uid": "datasource-uid",
+                  },
+                  "expression": "vector(1)",
+                  "queryType": "alerting",
+                  "refId": "A",
+                },
+                "queryType": "alerting",
+                "refId": "A",
+                "relativeTimeRange": {
+                  "from": 1000,
+                  "to": 2000,
+                },
+              },
+            ],
+            "exec_err_state": "Error",
+            "is_paused": true,
+            "namespace_uid": "uuid020c61ef",
+            "no_data_state": "NoData",
+            "rule_group": "grafana-group-1",
+            "title": "Grafana-rule",
+            "uid": "4d7125fee983",
+          },
+          "labels": {
+            "region": "nasa",
+            "severity": "critical",
+          },
+        },
+      ],
+    },
+    "headers": [
+      [
+        "content-type",
+        "application/json",
+      ],
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "POST",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/uuid020c61ef?subtype=cortex",
+  },
+  {
+    "body": "",
+    "headers": [
+      [
+        "accept",
+        "application/json, text/plain, */*",
+      ],
+    ],
+    "method": "GET",
+    "url": "http://localhost/api/ruler/grafana/api/v1/rules/uuid020c61ef/grafana-group-1?subtype=cortex",
+  },
+]
+`;

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

@@ -80,7 +80,7 @@ export function useCloudCombinedRulesMatching(
     groupName: filter?.groupName,
   });
 
-  const [fetchRulerRuleGroup] = alertRuleApi.endpoints.rulerRuleGroup.useLazyQuery();
+  const [fetchRulerRuleGroup] = alertRuleApi.endpoints.getRuleGroupForNamespace.useLazyQuery();
 
   const { loading, error, value } = useAsync(async () => {
     if (!dsSettings) {
@@ -210,7 +210,7 @@ export function useCombinedRule({ ruleIdentifier }: { ruleIdentifier: RuleIdenti
       error: rulerRuleGroupError,
       isUninitialized: rulerRuleGroupUninitialized,
     },
-  ] = alertRuleApi.endpoints.rulerRuleGroup.useLazyQuery();
+  ] = alertRuleApi.endpoints.getRuleGroupForNamespace.useLazyQuery();
 
   useEffect(() => {
     if (!dsFeatures?.rulerConfig || !ruleLocation) {
@@ -345,7 +345,7 @@ export function useRuleWithLocation({
       isUninitialized: isUninitializedRulerGroup,
       error: rulerRuleGroupError,
     },
-  ] = alertRuleApi.endpoints.rulerRuleGroup.useLazyQuery();
+  ] = alertRuleApi.endpoints.getRuleGroupForNamespace.useLazyQuery();
 
   useEffect(() => {
     if (!dsFeatures?.rulerConfig || !ruleLocation) {

public/app/features/alerting/unified/hooks/useProduceNewRuleGroup.test.tsx

@@ -0,0 +1,235 @@
+import { HttpResponse } from 'msw';
+import React from 'react';
+import { render, userEvent } from 'test/test-utils';
+import { byRole, byText } from 'testing-library-selector';
+
+import { setBackendSrv } from '@grafana/runtime';
+import { backendSrv } from 'app/core/services/backend_srv';
+import { CombinedRule } from 'app/types/unified-alerting';
+import { RulerGrafanaRuleDTO } from 'app/types/unified-alerting-dto';
+
+import { setupMswServer } from '../mockApi';
+import {
+  mockCombinedRule,
+  mockCombinedRuleGroup,
+  mockGrafanaRulerRule,
+  mockRulerAlertingRule,
+  mockRulerRecordingRule,
+  mockRulerRuleGroup,
+} from '../mocks';
+import { grafanaRulerGroupName, grafanaRulerNamespace, grafanaRulerRule } from '../mocks/alertRuleApi';
+import { setRulerRuleGroupHandler, setUpdateRulerRuleNamespaceHandler } from '../mocks/server/configure';
+import { captureRequests, serializeRequests } from '../mocks/server/events';
+import { rulerRuleGroupHandler, updateRulerRuleNamespaceHandler } from '../mocks/server/handlers/alertRules';
+import { stringifyErrorLike } from '../utils/misc';
+import { getRuleGroupLocationFromCombinedRule } from '../utils/rules';
+
+import { useDeleteRuleFromGroup, usePauseRuleInGroup } from './useProduceNewRuleGroup';
+
+const server = setupMswServer();
+
+beforeAll(() => {
+  setBackendSrv(backendSrv);
+});
+
+describe('pause rule', () => {
+  it('should be able to pause a rule', async () => {
+    const capture = captureRequests();
+    setUpdateRulerRuleNamespaceHandler({ delay: 0 });
+
+    render(<PauseTestComponent />);
+    expect(byText(/uninitialized/i).get()).toBeInTheDocument();
+
+    await userEvent.click(byRole('button').get());
+    expect(await byText(/loading/i).find()).toBeInTheDocument();
+
+    expect(await byText(/success/i).find()).toBeInTheDocument();
+    expect(await byText(/result/i).find()).toBeInTheDocument();
+    expect(byText(/error/i).query()).not.toBeInTheDocument();
+
+    const requests = await capture;
+    const [get, update, ...rest] = await serializeRequests(requests);
+
+    expect(update.body).toHaveProperty('rules[0].grafana_alert.is_paused', true);
+    expect([get, update, ...rest]).toMatchSnapshot();
+  });
+
+  it('should throw if the rule is not found in the group', async () => {
+    setUpdateRulerRuleNamespaceHandler();
+    render(
+      <PauseTestComponent
+        rulerRule={mockGrafanaRulerRule({ uid: 'does-not-exist', namespace_uid: grafanaRulerNamespace.uid })}
+      />
+    );
+    expect(byText(/uninitialized/i).get()).toBeInTheDocument();
+
+    await userEvent.click(byRole('button').get());
+    expect(await byText(/error: No rule with UID/i).find()).toBeInTheDocument();
+  });
+
+  it('should be able to handle error', async () => {
+    setUpdateRulerRuleNamespaceHandler({
+      delay: 0,
+      response: new HttpResponse('oops', { status: 500 }),
+    });
+
+    render(<PauseTestComponent />);
+
+    expect(await byText(/uninitialized/i).find()).toBeInTheDocument();
+
+    await userEvent.click(byRole('button').get());
+    expect(await byText(/loading/i).find()).toBeInTheDocument();
+    expect(byText(/success/i).query()).not.toBeInTheDocument();
+    expect(await byText(/error: oops/i).find()).toBeInTheDocument();
+  });
+});
+
+describe('delete rule', () => {
+  it('should be able to delete a Grafana managed rule', async () => {
+    const rules = [
+      mockCombinedRule({
+        name: 'r1',
+        rulerRule: mockGrafanaRulerRule({ uid: 'r1' }),
+      }),
+      mockCombinedRule({
+        name: 'r2',
+        rulerRule: mockGrafanaRulerRule({ uid: 'r2' }),
+      }),
+    ];
+    const group = mockRulerRuleGroup({
+      name: 'group-1',
+      rules: [rules[0].rulerRule!, rules[1].rulerRule!],
+    });
+
+    const getGroup = rulerRuleGroupHandler({
+      delay: 0,
+      response: HttpResponse.json(group),
+    });
+
+    const updateNamespace = updateRulerRuleNamespaceHandler({
+      response: new HttpResponse(undefined, { status: 200 }),
+    });
+
+    server.use(getGroup, updateNamespace);
+
+    const capture = captureRequests();
+
+    render(<DeleteTestComponent rule={rules[1]} />);
+
+    await userEvent.click(byRole('button').get());
+
+    expect(await byText(/success/i).find()).toBeInTheDocument();
+
+    const requests = await capture;
+    const serializedRequests = await serializeRequests(requests);
+    expect(serializedRequests).toMatchSnapshot();
+  });
+
+  it('should be able to delete a Data source managed rule', async () => {
+    setUpdateRulerRuleNamespaceHandler({
+      response: new HttpResponse(undefined, { status: 200 }),
+    });
+
+    const rules = [
+      mockCombinedRule({
+        name: 'r1',
+        rulerRule: mockRulerAlertingRule({ alert: 'r1', labels: { foo: 'bar' } }),
+      }),
+      mockCombinedRule({
+        name: 'r2',
+        rulerRule: mockRulerRecordingRule({ record: 'r2', labels: { bar: 'baz' } }),
+      }),
+    ];
+
+    const group = mockRulerRuleGroup({
+      name: 'group-1',
+      rules: [rules[0].rulerRule!, rules[1].rulerRule!],
+    });
+
+    setRulerRuleGroupHandler({
+      delay: 0,
+      response: HttpResponse.json(group),
+    });
+
+    const capture = captureRequests();
+
+    render(<DeleteTestComponent rule={rules[1]} />);
+
+    await userEvent.click(byRole('button').get());
+
+    expect(await byText(/success/i).find()).toBeInTheDocument();
+
+    const requests = await capture;
+    const serializedRequests = await serializeRequests(requests);
+    expect(serializedRequests).toMatchSnapshot();
+  });
+
+  it('should delete the entire group if no more rules are left', async () => {
+    const capture = captureRequests();
+
+    const combined = mockCombinedRule({
+      rulerRule: grafanaRulerRule,
+    });
+
+    render(<DeleteTestComponent rule={combined} />);
+    await userEvent.click(byRole('button').get());
+
+    expect(await byText(/success/i).find()).toBeInTheDocument();
+
+    const requests = await capture;
+    const serializedRequests = await serializeRequests(requests);
+    expect(serializedRequests).toMatchSnapshot();
+  });
+});
+
+// this test component will cycle through the loading states
+const PauseTestComponent = (options: { rulerRule?: RulerGrafanaRuleDTO }) => {
+  const [pauseRule, requestState] = usePauseRuleInGroup();
+
+  const rulerRule = options.rulerRule ?? grafanaRulerRule;
+  const rule = mockCombinedRule({
+    rulerRule,
+    group: mockCombinedRuleGroup(grafanaRulerGroupName, []),
+  });
+  const ruleGroupID = getRuleGroupLocationFromCombinedRule(rule);
+
+  const onClick = () => {
+    // always handle your errors!
+    pauseRule(ruleGroupID, rulerRule.grafana_alert.uid, true).catch(() => {});
+  };
+
+  return (
+    <>
+      <button onClick={() => onClick()} />
+      {requestState.isUninitialized && 'uninitialized'}
+      {requestState.isLoading && 'loading'}
+      {requestState.isSuccess && 'success'}
+      {requestState.result && 'result'}
+      {requestState.isError && `error: ${stringifyErrorLike(requestState.error)}`}
+    </>
+  );
+};
+
+type DeleteTestComponentProps = {
+  rule: CombinedRule;
+};
+const DeleteTestComponent = ({ rule }: DeleteTestComponentProps) => {
+  const [deleteRuleFromGroup, requestState] = useDeleteRuleFromGroup();
+
+  // always handle your errors!
+  const ruleGroupID = getRuleGroupLocationFromCombinedRule(rule);
+  const onClick = () => {
+    deleteRuleFromGroup(ruleGroupID, rule.rulerRule!);
+  };
+
+  return (
+    <>
+      <button onClick={() => onClick()} />
+      {requestState.isUninitialized && 'uninitialized'}
+      {requestState.isLoading && 'loading'}
+      {requestState.isSuccess && 'success'}
+      {requestState.result && `result: ${JSON.stringify(requestState.result, null, 2)}`}
+      {requestState.isError && `error: ${stringifyErrorLike(requestState.error)}`}
+    </>
+  );
+};

public/app/features/alerting/unified/hooks/useProduceNewRuleGroup.tsx

@@ -0,0 +1,148 @@
+import { Action } from '@reduxjs/toolkit';
+import { useCallback, useState } from 'react';
+
+import { dispatch, getState } from 'app/store/store';
+import { RuleGroupIdentifier } from 'app/types/unified-alerting';
+import { RulerRuleDTO, RulerRuleGroupDTO } from 'app/types/unified-alerting-dto';
+
+import { AlertGroupUpdated, alertRuleApi } from '../api/alertRuleApi';
+import { deleteRuleAction, pauseRuleAction, ruleGroupReducer } from '../reducers/ruler/ruleGroups';
+import { fetchRulesSourceBuildInfoAction, getDataSourceRulerConfig } from '../state/actions';
+
+type ProduceResult = RulerRuleGroupDTO | AlertGroupUpdated;
+
+/**
+ * Hook for reuse that handles freshly fetching a rule group's definition, applying an action to it,
+ * and then performing the API mutations necessary to persist the change.
+ *
+ * All rule groups changes should ideally be implemented as a wrapper around this hook,
+ * to ensure that we always protect as best we can against accidentally overwriting changes,
+ * and to guard against user concurrency issues.
+ *
+ * @throws
+ * @TODO the manual state tracking here is not great, but I don't have a better idea that works /shrug
+ */
+function useProduceNewRuleGroup() {
+  const [fetchRuleGroup] = alertRuleApi.endpoints.getRuleGroupForNamespace.useLazyQuery();
+  const [updateRuleGroup] = alertRuleApi.endpoints.updateRuleGroupForNamespace.useMutation();
+  const [deleteRuleGroup] = alertRuleApi.endpoints.deleteRuleGroupFromNamespace.useMutation();
+
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const [isUninitialized, setUninitialized] = useState<boolean>(true);
+  const [result, setResult] = useState<ProduceResult | undefined>();
+  const [error, setError] = useState<unknown | undefined>();
+
+  const isError = Boolean(error);
+  const isSuccess = !isUninitialized && !isLoading && !isError;
+
+  const requestState = {
+    isUninitialized,
+    isLoading,
+    isSuccess,
+    isError,
+    result,
+    error,
+  };
+
+  /**
+   * This function will fetch the latest we have on the rule group, apply a diff to it via a reducer and sends
+   * the new rule group update to the correct endpoint.
+   *
+   * The API does not allow operations on a single rule and will always overwrite the existing rule group with the payload.
+   *
+   * ┌─────────────────────────┐  ┌───────────────┐  ┌───────────────────┐
+   * │ fetch latest rule group │─▶│ apply reducer │─▶│ update rule group │
+   * └─────────────────────────┘  └───────────────┘  └───────────────────┘
+   */
+  const produceNewRuleGroup = async (ruleGroup: RuleGroupIdentifier, action: Action) => {
+    const { dataSourceName, groupName, namespaceName } = ruleGroup;
+
+    // @TODO we should really not work with the redux state (getState) here
+    await dispatch(fetchRulesSourceBuildInfoAction({ rulesSourceName: dataSourceName }));
+    const rulerConfig = getDataSourceRulerConfig(getState, dataSourceName);
+
+    setUninitialized(false);
+    setLoading(true);
+
+    try {
+      const latestRuleGroupDefinition = await fetchRuleGroup({
+        rulerConfig,
+        namespace: namespaceName,
+        group: groupName,
+      }).unwrap();
+
+      // @TODO convert rule group to postable rule group – TypeScript is not complaining here because
+      // the interfaces are compatible but it _should_ complain
+      const newRuleGroup = ruleGroupReducer(latestRuleGroupDefinition, action);
+
+      // if we have no more rules left after reducing, remove the entire group
+      const updateOrDeleteFunction = () => {
+        if (newRuleGroup.rules.length === 0) {
+          return deleteRuleGroup({
+            rulerConfig,
+            namespace: namespaceName,
+            group: groupName,
+          }).unwrap();
+        }
+
+        return updateRuleGroup({
+          rulerConfig,
+          namespace: namespaceName,
+          payload: newRuleGroup,
+        }).unwrap();
+      };
+
+      const result = await updateOrDeleteFunction();
+      setResult(result);
+
+      return result;
+    } catch (error) {
+      setError(error);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return [produceNewRuleGroup, requestState] as const;
+}
+
+/**
+ * Pause a single rule in a (ruler) group. This hook will ensure that mutations on the rule group are safe and will always
+ * use the latest definition of the ruler group identifier.
+ */
+export function usePauseRuleInGroup() {
+  const [produceNewRuleGroup, produceNewRuleGroupState] = useProduceNewRuleGroup();
+
+  const pauseFn = useCallback(
+    async (ruleGroup: RuleGroupIdentifier, uid: string, pause: boolean) => {
+      const action = pauseRuleAction({ uid, pause });
+
+      return produceNewRuleGroup(ruleGroup, action);
+    },
+    [produceNewRuleGroup]
+  );
+
+  return [pauseFn, produceNewRuleGroupState] as const;
+}
+
+/**
+ * Delete a single rule from a (ruler) group. This hook will ensure that mutations on the rule group are safe and will always
+ * use the latest definition of the ruler group identifier.
+ *
+ * If no more rules are left in the group it will remove the entire group instead of updating.
+ */
+export function useDeleteRuleFromGroup() {
+  const [produceNewRuleGroup, produceNewRuleGroupState] = useProduceNewRuleGroup();
+
+  const deleteFn = useCallback(
+    async (ruleGroup: RuleGroupIdentifier, rule: RulerRuleDTO) => {
+      const action = deleteRuleAction({ rule });
+
+      return produceNewRuleGroup(ruleGroup, action);
+    },
+    [produceNewRuleGroup]
+  );
+
+  return [deleteFn, produceNewRuleGroupState] as const;
+}

public/app/features/alerting/unified/mockApi.ts

@@ -4,7 +4,7 @@ import { setupServer, SetupServer } from 'msw/node';
 
 import { DataSourceInstanceSettings, PluginMeta } from '@grafana/data';
 import { setBackendSrv } from '@grafana/runtime';
-import { AlertRuleUpdated } from 'app/features/alerting/unified/api/alertRuleApi';
+import { AlertGroupUpdated } from 'app/features/alerting/unified/api/alertRuleApi';
 import allHandlers from 'app/features/alerting/unified/mocks/server/all-handlers';
 import { DashboardDTO, FolderDTO, NotifierDTO, OrgUser } from 'app/types';
 import {
@@ -276,7 +276,7 @@ export function mockAlertRuleApi(server: SetupServer) {
     rulerRules: (dsName: string, response: RulerRulesConfigDTO) => {
       server.use(http.get(`/api/ruler/${dsName}/api/v1/rules`, () => HttpResponse.json(response)));
     },
-    updateRule: (dsName: string, response: AlertRuleUpdated) => {
+    updateRule: (dsName: string, response: AlertGroupUpdated) => {
       server.use(http.post(`/api/ruler/${dsName}/api/v1/rules/:namespaceUid`, () => HttpResponse.json(response)));
     },
     rulerRuleGroup: (dsName: string, namespace: string, group: string, response: RulerRuleGroupDTO) => {

public/app/features/alerting/unified/mocks.ts

@@ -45,6 +45,7 @@ import {
   RecordingRule,
   RuleGroup,
   RuleNamespace,
+  RuleWithLocation,
 } from 'app/types/unified-alerting';
 import {
   AlertQuery,
@@ -56,6 +57,7 @@ import {
   RulerAlertingRuleDTO,
   RulerGrafanaRuleDTO,
   RulerRecordingRuleDTO,
+  RulerRuleDTO,
   RulerRuleGroupDTO,
   RulerRulesConfigDTO,
 } from 'app/types/unified-alerting-dto';
@@ -213,7 +215,7 @@ export const mockGrafanaRulerRule = (partial: Partial<GrafanaRuleDefinition> = {
     annotations: {},
     labels: {},
     grafana_alert: {
-      uid: '',
+      uid: 'mock-rule-uid-123',
       title: 'my rule',
       namespace_uid: 'NAMESPACE_UID',
       rule_group: 'my-group',
@@ -638,6 +640,23 @@ export const mockCombinedRule = (partial?: Partial<CombinedRule>): CombinedRule
   ...partial,
 });
 
+export const mockRuleWithLocation = (rule: RulerRuleDTO, partial?: Partial<RuleWithLocation>): RuleWithLocation => {
+  const ruleWithLocation: RuleWithLocation = {
+    rule,
+    ...{
+      ruleSourceName: 'grafana',
+      namespace: 'namespace-1',
+      group: mockRulerRuleGroup({
+        name: 'group-1',
+        rules: [rule],
+      }),
+    },
+    ...partial,
+  };
+
+  return ruleWithLocation;
+};
+
 export const mockFolder = (partial?: Partial<FolderDTO>): FolderDTO => {
   return {
     id: 1,

public/app/features/alerting/unified/mocks/alertRuleApi.ts

@@ -19,7 +19,7 @@ export function mockPromRulesApiResponse(server: SetupServer, result: PromRulesR
   server.use(http.get(PROM_RULES_URL, () => HttpResponse.json(result)));
 }
 
-const grafanaRulerGroupName = 'grafana-group-1';
+export const grafanaRulerGroupName = 'grafana-group-1';
 export const grafanaRulerNamespace = { name: 'test-folder-1', uid: 'uuid020c61ef' };
 export const grafanaRulerNamespace2 = { name: 'test-folder-2', uid: '6abdb25bc1eb' };
 

public/app/features/alerting/unified/mocks/server/configure.ts

@@ -1,3 +1,5 @@
+import { HttpResponse } from 'msw';
+
 import server from 'app/features/alerting/unified/mockApi';
 import { mockFolder } from 'app/features/alerting/unified/mocks';
 import {
@@ -8,6 +10,13 @@ import { getFolderHandler } from 'app/features/alerting/unified/mocks/server/han
 import { AlertManagerCortexConfig, AlertmanagerChoice } from 'app/plugins/datasource/alertmanager/types';
 import { FolderDTO } from 'app/types';
 
+import { rulerRuleGroupHandler, updateRulerRuleNamespaceHandler } from './handlers/alertRules';
+
+export type HandlerOptions = {
+  delay?: number;
+  response?: HttpResponse;
+};
+
 /**
  * Makes the mock server respond in a way that matches the different behaviour associated with
  * Alertmanager choices and the number of configured external alertmanagers
@@ -33,3 +42,23 @@ export const setFolderAccessControl = (accessControl: FolderDTO['accessControl']
 export const setGrafanaAlertmanagerConfig = (config: AlertManagerCortexConfig) => {
   server.use(getGrafanaAlertmanagerConfigHandler(config));
 };
+
+/**
+ * Makes the mock server respond with different responses for updating a ruler namespace
+ */
+export const setUpdateRulerRuleNamespaceHandler = (options?: HandlerOptions) => {
+  const handler = updateRulerRuleNamespaceHandler(options);
+  server.use(handler);
+
+  return handler;
+};
+
+/**
+ * Makes the mock server response with different responses for a ruler rule group
+ */
+export const setRulerRuleGroupHandler = (options?: HandlerOptions) => {
+  const handler = rulerRuleGroupHandler(options);
+  server.use(handler);
+
+  return handler;
+};

public/app/features/alerting/unified/mocks/server/events.ts

@@ -1,4 +1,5 @@
 import { HttpHandler, matchRequestUrl } from 'msw';
+import { JsonValue } from 'type-fest';
 
 import server from 'app/features/alerting/unified/mockApi';
 
@@ -21,3 +22,54 @@ export function waitForServerRequest(handler: HttpHandler) {
     });
   });
 }
+
+interface SerializedRequest {
+  method: string;
+  url: string;
+  body: string | JsonValue;
+  headers: string[][];
+}
+
+/**
+ * Collect all requests seen by MSW and return them when the return promise is await-ed.
+ *
+ * @example
+ * const capture = captureRequests();
+ * // click a button, invoke a hook, etc.
+ * const requests = await capture;
+ *
+ * @deprecated Try not to use this 🙏 instead aim to assert against UI side effects
+ */
+export async function captureRequests(): Promise<Request[]> {
+  let requests: Request[] = [];
+
+  server.events.on('request:start', ({ request }) => {
+    requests.push(request);
+  });
+
+  return requests;
+}
+
+const DEVICE_ID_HEADER = 'x-grafana-device-id';
+
+export async function serializeRequest(originalRequest: Request): Promise<SerializedRequest> {
+  const request = originalRequest;
+  const { method, url, headers } = request;
+
+  // omit the fingerprint ID from the request header since it is machine-specific
+  headers.delete(DEVICE_ID_HEADER);
+
+  const body = await request.json().catch(() => request.text());
+  const serializedHeaders = Array.from(headers.entries());
+
+  return {
+    method,
+    url,
+    body,
+    headers: serializedHeaders,
+  };
+}
+
+export async function serializeRequests(requests: Request[]): Promise<SerializedRequest[]> {
+  return Promise.all(requests.map(serializeRequest));
+}

public/app/features/alerting/unified/mocks/server/handlers/alertRules.ts

@@ -1,4 +1,4 @@
-import { http, HttpResponse } from 'msw';
+import { delay, http, HttpResponse } from 'msw';
 
 export const MOCK_GRAFANA_ALERT_RULE_TITLE = 'Test alert';
 
@@ -7,7 +7,9 @@ import {
   RulerRuleGroupDTO,
   RulerRulesConfigDTO,
 } from '../../../../../../types/unified-alerting-dto';
+import { AlertGroupUpdated } from '../../../api/alertRuleApi';
 import { grafanaRulerRule, namespaceByUid, namespaces } from '../../alertRuleApi';
+import { HandlerOptions } from '../configure';
 
 export const rulerRulesHandler = () => {
   return http.get(`/api/ruler/grafana/api/v1/rules`, () => {
@@ -20,8 +22,8 @@ export const rulerRulesHandler = () => {
   });
 };
 
-export const rulerRuleNamespaceHandler = () => {
+export const getRulerRuleNamespaceHandler = () =>
-  return http.get<{ folderUid: string }>(`/api/ruler/grafana/api/v1/rules/:folderUid`, ({ params: { folderUid } }) => {
+  http.get<{ folderUid: string }>(`/api/ruler/grafana/api/v1/rules/:folderUid`, ({ params: { folderUid } }) => {
     // This mimic API response as closely as possible - Invalid folderUid returns 403
     const namespace = namespaces[folderUid];
     if (!namespace) {
@@ -32,12 +34,41 @@ export const rulerRuleNamespaceHandler = () => {
       [namespaceByUid[folderUid].name]: namespaces[folderUid],
     });
   });
-};
 
-export const rulerRuleGroupHandler = () => {
+export const updateRulerRuleNamespaceHandler = (options?: HandlerOptions) =>
+  http.post<{ folderUid: string }>(`/api/ruler/grafana/api/v1/rules/:folderUid`, async ({ params }) => {
+    const { folderUid } = params;
+
+    // @TODO make this more generic so we can use this in other endpoints too
+    if (options?.delay !== undefined) {
+      await delay(options.delay);
+    }
+
+    if (options?.response) {
+      return options.response;
+    }
+
+    // This mimic API response as closely as possible.
+    // Invalid folderUid returns 403 but invalid group will return 202 with empty list of rules
+    const namespace = namespaces[folderUid];
+    if (!namespace) {
+      return new HttpResponse(null, { status: 403 });
+    }
+
+    return HttpResponse.json<AlertGroupUpdated>({
+      message: 'updated',
+      updated: [],
+    });
+  });
+
+export const rulerRuleGroupHandler = (options?: HandlerOptions) => {
   return http.get<{ folderUid: string; groupName: string }>(
     `/api/ruler/grafana/api/v1/rules/:folderUid/:groupName`,
     ({ params: { folderUid, groupName } }) => {
+      if (options?.response) {
+        return options.response;
+      }
+
       // This mimic API response as closely as possible.
       // Invalid folderUid returns 403 but invalid group will return 202 with empty list of rules
       const namespace = namespaces[folderUid];
@@ -55,6 +86,24 @@ export const rulerRuleGroupHandler = () => {
   );
 };
 
+export const deleteRulerRuleGroupHandler = () =>
+  http.delete<{ folderUid: string; groupName: string }>(
+    `/api/ruler/grafana/api/v1/rules/:folderUid/:groupName`,
+    ({ params: { folderUid } }) => {
+      const namespace = namespaces[folderUid];
+      if (!namespace) {
+        return new HttpResponse(null, { status: 403 });
+      }
+
+      return HttpResponse.json(
+        {
+          message: 'Rules deleted',
+        },
+        { status: 202 }
+      );
+    }
+  );
+
 export const rulerRuleHandler = () => {
   const grafanaRules = new Map<string, RulerGrafanaRuleDTO>(
     [grafanaRulerRule].map((rule) => [rule.grafana_alert.uid, rule])
@@ -69,5 +118,12 @@ export const rulerRuleHandler = () => {
   });
 };
 
-const handlers = [rulerRulesHandler(), rulerRuleNamespaceHandler(), rulerRuleGroupHandler(), rulerRuleHandler()];
+const handlers = [
+  rulerRulesHandler(),
+  getRulerRuleNamespaceHandler(),
+  updateRulerRuleNamespaceHandler(),
+  rulerRuleGroupHandler(),
+  deleteRulerRuleGroupHandler(),
+  rulerRuleHandler(),
+];
 export default handlers;

public/app/features/alerting/unified/reducers/ruler/__snapshots__/ruleGroups.test.ts.snap

@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`pausing rules should pause a Grafana managed rule in a group 1`] = `
+{
+  "interval": "5m",
+  "name": "group-1",
+  "rules": [
+    {
+      "annotations": {
+        "message": "alert with severity "{{.warning}}}"",
+      },
+      "for": "1m",
+      "grafana_alert": {
+        "condition": "A",
+        "data": [
+          {
+            "datasourceUid": "123",
+            "model": {},
+            "queryType": "huh",
+            "refId": "A",
+          },
+        ],
+        "exec_err_state": "Alerting",
+        "namespace_uid": "123",
+        "no_data_state": "Alerting",
+        "rule_group": "my-group",
+        "title": "myalert",
+        "uid": "1",
+      },
+      "labels": {
+        "severity": "warning",
+      },
+    },
+    {
+      "annotations": {
+        "message": "alert with severity "{{.warning}}}"",
+      },
+      "for": "1m",
+      "grafana_alert": {
+        "condition": "A",
+        "data": [
+          {
+            "datasourceUid": "123",
+            "model": {},
+            "queryType": "huh",
+            "refId": "A",
+          },
+        ],
+        "exec_err_state": "Alerting",
+        "is_paused": true,
+        "namespace_uid": "123",
+        "no_data_state": "Alerting",
+        "rule_group": "my-group",
+        "title": "myalert",
+        "uid": "2",
+      },
+      "labels": {
+        "severity": "warning",
+      },
+    },
+    {
+      "annotations": {
+        "message": "alert with severity "{{.warning}}}"",
+      },
+      "for": "1m",
+      "grafana_alert": {
+        "condition": "A",
+        "data": [
+          {
+            "datasourceUid": "123",
+            "model": {},
+            "queryType": "huh",
+            "refId": "A",
+          },
+        ],
+        "exec_err_state": "Alerting",
+        "namespace_uid": "123",
+        "no_data_state": "Alerting",
+        "rule_group": "my-group",
+        "title": "myalert",
+        "uid": "3",
+      },
+      "labels": {
+        "severity": "warning",
+      },
+    },
+  ],
+}
+`;
+
+exports[`removing a rule should remove a Data source managed ruler rule without touching other rules 1`] = `
+{
+  "interval": "5m",
+  "name": "group-1",
+  "rules": [
+    {
+      "alert": "do not delete me",
+      "annotations": {
+        "summary": "test alert",
+      },
+      "expr": "up = 1",
+      "labels": {
+        "severity": "warning",
+      },
+    },
+    {
+      "alert": "alert1",
+      "annotations": {
+        "summary": "test alert",
+      },
+      "expr": "up = 1",
+      "labels": {
+        "severity": "warning",
+      },
+      "record": "do not delete me",
+    },
+  ],
+}
+`;
+
+exports[`removing a rule should remove a Grafana managed ruler rule without touching other rules 1`] = `
+{
+  "interval": "5m",
+  "name": "group-1",
+  "rules": [
+    {
+      "annotations": {
+        "message": "alert with severity "{{.warning}}}"",
+      },
+      "for": "1m",
+      "grafana_alert": {
+        "condition": "A",
+        "data": [
+          {
+            "datasourceUid": "123",
+            "model": {},
+            "queryType": "huh",
+            "refId": "A",
+          },
+        ],
+        "exec_err_state": "Alerting",
+        "namespace_uid": "123",
+        "no_data_state": "Alerting",
+        "rule_group": "my-group",
+        "title": "myalert",
+        "uid": "1",
+      },
+      "labels": {
+        "severity": "warning",
+      },
+    },
+    {
+      "annotations": {
+        "message": "alert with severity "{{.warning}}}"",
+      },
+      "for": "1m",
+      "grafana_alert": {
+        "condition": "A",
+        "data": [
+          {
+            "datasourceUid": "123",
+            "model": {},
+            "queryType": "huh",
+            "refId": "A",
+          },
+        ],
+        "exec_err_state": "Alerting",
+        "namespace_uid": "123",
+        "no_data_state": "Alerting",
+        "rule_group": "my-group",
+        "title": "myalert",
+        "uid": "3",
+      },
+      "labels": {
+        "severity": "warning",
+      },
+    },
+  ],
+}
+`;

public/app/features/alerting/unified/reducers/ruler/ruleGroups.test.ts

@@ -0,0 +1,98 @@
+import { PostableRulerRuleGroupDTO } from 'app/types/unified-alerting-dto';
+
+import { mockRulerAlertingRule, mockRulerGrafanaRule, mockRulerRecordingRule } from '../../mocks';
+
+import { deleteRuleAction, pauseRuleAction, ruleGroupReducer } from './ruleGroups';
+
+describe('pausing rules', () => {
+  // pausing only works for Grafana managed rules
+  it('should pause a Grafana managed rule in a group', () => {
+    const initialGroup: PostableRulerRuleGroupDTO = {
+      name: 'group-1',
+      interval: '5m',
+      rules: [
+        mockRulerGrafanaRule({}, { uid: '1' }),
+        mockRulerGrafanaRule({}, { uid: '2' }),
+        mockRulerGrafanaRule({}, { uid: '3' }),
+      ],
+    };
+
+    // we will pause rule with UID "2"
+    const action = pauseRuleAction({ uid: '2', pause: true });
+    const output = ruleGroupReducer(initialGroup, action);
+
+    expect(output).toHaveProperty('rules');
+    expect(output.rules).toHaveLength(initialGroup.rules.length);
+
+    expect(output).toHaveProperty('rules.1.grafana_alert.is_paused', true);
+    expect(output.rules[0]).toStrictEqual(initialGroup.rules[0]);
+    expect(output.rules[2]).toStrictEqual(initialGroup.rules[2]);
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should throw if the uid does not exist in the group', () => {
+    const group: PostableRulerRuleGroupDTO = {
+      name: 'group-1',
+      interval: '5m',
+      rules: [mockRulerGrafanaRule({}, { uid: '1' })],
+    };
+
+    const action = pauseRuleAction({ uid: '2', pause: true });
+
+    expect(() => {
+      ruleGroupReducer(group, action);
+    }).toThrow();
+  });
+});
+
+describe('removing a rule', () => {
+  it('should remove a Grafana managed ruler rule without touching other rules', () => {
+    const ruleToDelete = mockRulerGrafanaRule({}, { uid: '2' });
+
+    const initialGroup: PostableRulerRuleGroupDTO = {
+      name: 'group-1',
+      interval: '5m',
+      rules: [mockRulerGrafanaRule({}, { uid: '1' }), ruleToDelete, mockRulerGrafanaRule({}, { uid: '3' })],
+    };
+
+    const action = deleteRuleAction({ rule: ruleToDelete });
+    const output = ruleGroupReducer(initialGroup, action);
+
+    expect(output).toHaveProperty('rules');
+    expect(output.rules).toHaveLength(2);
+    expect(output.rules[0]).toStrictEqual(initialGroup.rules[0]);
+    expect(output.rules[1]).toStrictEqual(initialGroup.rules[2]);
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should remove a Data source managed ruler rule without touching other rules', () => {
+    const ruleToDelete = mockRulerAlertingRule({
+      alert: 'delete me',
+    });
+
+    const initialGroup: PostableRulerRuleGroupDTO = {
+      name: 'group-1',
+      interval: '5m',
+      rules: [
+        mockRulerAlertingRule({ alert: 'do not delete me' }),
+        ruleToDelete,
+        mockRulerRecordingRule({
+          record: 'do not delete me',
+        }),
+      ],
+    };
+
+    const action = deleteRuleAction({ rule: ruleToDelete });
+    const output = ruleGroupReducer(initialGroup, action);
+
+    expect(output).toHaveProperty('rules');
+
+    expect(output.rules).toHaveLength(2);
+    expect(output.rules[0]).toStrictEqual(initialGroup.rules[0]);
+    expect(output.rules[1]).toStrictEqual(initialGroup.rules[2]);
+
+    expect(output).toMatchSnapshot();
+  });
+});

public/app/features/alerting/unified/reducers/ruler/ruleGroups.ts

@@ -0,0 +1,76 @@
+import { createAction, createReducer } from '@reduxjs/toolkit';
+import { remove } from 'lodash';
+
+import { RuleIdentifier } from 'app/types/unified-alerting';
+import { PostableRuleDTO, PostableRulerRuleGroupDTO, RulerRuleDTO } from 'app/types/unified-alerting-dto';
+
+import { hashRulerRule } from '../../utils/rule-id';
+import { isCloudRulerRule, isGrafanaRulerRule } from '../../utils/rules';
+
+// rule-scoped actions
+export const addRuleAction = createAction<{ rule: PostableRuleDTO }>('ruleGroup/rules/add');
+export const updateRuleAction = createAction<{ identifier: RuleIdentifier; rule: PostableRuleDTO }>(
+  'ruleGroup/rules/update'
+);
+export const pauseRuleAction = createAction<{ uid: string; pause: boolean }>('ruleGroup/rules/pause');
+export const deleteRuleAction = createAction<{ rule: RulerRuleDTO }>('ruleGroup/rules/delete');
+
+// group-scoped actions
+const reorderRulesActions = createAction('ruleGroup/rules/reorder');
+const updateGroup = createAction('ruleGroup/update');
+
+const initialState: PostableRulerRuleGroupDTO = {
+  name: 'initial',
+  rules: [],
+};
+
+export const ruleGroupReducer = createReducer(initialState, (builder) => {
+  builder
+    .addCase(addRuleAction, () => {
+      throw new Error('not yet implemented');
+    })
+    .addCase(updateRuleAction, () => {
+      throw new Error('not yet implemented');
+    })
+    .addCase(deleteRuleAction, (draft, { payload }) => {
+      const { rule } = payload;
+
+      // deleting a Grafana managed rule is by using the UID
+      if (isGrafanaRulerRule(rule)) {
+        const ruleUID = rule.grafana_alert.uid;
+        remove(draft.rules, (rule) => isGrafanaRulerRule(rule) && rule.grafana_alert.uid === ruleUID);
+      }
+
+      // deleting a Data-source managed rule is by computing the rule hash
+      if (isCloudRulerRule(rule)) {
+        const ruleHash = hashRulerRule(rule);
+        remove(draft.rules, (rule) => isCloudRulerRule(rule) && hashRulerRule(rule) === ruleHash);
+      }
+    })
+    .addCase(pauseRuleAction, (draft, { payload }) => {
+      const { uid, pause } = payload;
+
+      let match = false;
+
+      for (const rule of draft.rules) {
+        if (isGrafanaRulerRule(rule) && rule.grafana_alert.uid === uid) {
+          match = true;
+          rule.grafana_alert.is_paused = pause;
+          break;
+        }
+      }
+
+      if (!match) {
+        throw new Error(`No rule with UID ${uid} found in group ${draft.name}`);
+      }
+    })
+    .addCase(reorderRulesActions, () => {
+      throw new Error('not yet implemented');
+    })
+    .addCase(updateGroup, () => {
+      throw new Error('not yet implemented');
+    })
+    .addDefaultCase((_draft, action) => {
+      throw new Error(`Unknown action for rule group reducer: ${action.type}`);
+    });
+});

public/app/features/alerting/unified/state/actions.ts

@@ -84,7 +84,7 @@ function getDataSourceConfig(getState: () => unknown, rulesSourceName: string) {
   return dsConfig;
 }
 
-function getDataSourceRulerConfig(getState: () => unknown, rulesSourceName: string) {
+export function getDataSourceRulerConfig(getState: () => unknown, rulesSourceName: string) {
   const dsConfig = getDataSourceConfig(getState, rulesSourceName);
   if (!dsConfig.rulerConfig) {
     throw new Error(`Ruler API is not available for ${rulesSourceName}`);
@@ -335,41 +335,6 @@ export function deleteRulesGroupAction(
   };
 }
 
-export function deleteRuleAction(
-  ruleIdentifier: RuleIdentifier,
-  options: { navigateTo?: string } = {}
-): ThunkResult<void> {
-  /*
-   * fetch the rules group from backend, delete group if it is found and+
-   * reload ruler rules
-   */
-  return async (dispatch, getState) => {
-    await dispatch(fetchRulesSourceBuildInfoAction({ rulesSourceName: ruleIdentifier.ruleSourceName }));
-
-    withAppEvents(
-      (async () => {
-        const rulerConfig = getDataSourceRulerConfig(getState, ruleIdentifier.ruleSourceName);
-        const rulerClient = getRulerClient(rulerConfig);
-        const ruleWithLocation = await rulerClient.findEditableRule(ruleIdentifier);
-
-        if (!ruleWithLocation) {
-          throw new Error('Rule not found.');
-        }
-        await rulerClient.deleteRule(ruleWithLocation);
-        // refetch rules for this rules source
-        await dispatch(fetchPromAndRulerRulesAction({ rulesSourceName: ruleWithLocation.ruleSourceName }));
-
-        if (options.navigateTo) {
-          locationService.replace(options.navigateTo);
-        }
-      })(),
-      {
-        successMessage: 'Rule deleted.',
-      }
-    );
-  };
-}
-
 export const saveRuleFormAction = createAsyncThunk(
   'unifiedalerting/saveRuleForm',
   (

public/app/features/alerting/unified/utils/rules.test.ts

@@ -1,9 +1,21 @@
 import { config } from '@grafana/runtime';
+import { RuleGroupIdentifier } from 'app/types/unified-alerting';
 
-import { mockCombinedRule } from '../mocks';
+import {
+  mockCombinedCloudRuleNamespace,
+  mockCombinedRule,
+  mockCombinedRuleGroup,
+  mockGrafanaRulerRule,
+  mockRuleWithLocation,
+  mockRulerAlertingRule,
+} from '../mocks';
 
 import { GRAFANA_ORIGIN_LABEL } from './labels';
-import { getRulePluginOrigin } from './rules';
+import {
+  getRuleGroupLocationFromCombinedRule,
+  getRuleGroupLocationFromRuleWithLocation,
+  getRulePluginOrigin,
+} from './rules';
 
 describe('getRuleOrigin', () => {
   it('returns undefined when no origin label is present', () => {
@@ -43,3 +55,54 @@ describe('getRuleOrigin', () => {
     expect(getRulePluginOrigin(rule)).toEqual({ pluginId: 'installed_plugin' });
   });
 });
+
+describe('ruleGroupLocation', () => {
+  it('should be able to extract rule group location from a Grafana managed combinedRule', () => {
+    const rule = mockCombinedRule({
+      group: mockCombinedRuleGroup('group-1', []),
+      rulerRule: mockGrafanaRulerRule({ namespace_uid: 'abc123' }),
+    });
+
+    const groupLocation = getRuleGroupLocationFromCombinedRule(rule);
+    expect(groupLocation).toEqual<RuleGroupIdentifier>({
+      dataSourceName: 'grafana',
+      namespaceName: 'abc123',
+      groupName: 'group-1',
+    });
+  });
+
+  it('should be able to extract rule group location from a data source managed combinedRule', () => {
+    const rule = mockCombinedRule({
+      group: mockCombinedRuleGroup('group-1', []),
+      namespace: mockCombinedCloudRuleNamespace({ name: 'abc123' }, 'prometheus-1'),
+      rulerRule: mockRulerAlertingRule(),
+    });
+
+    const groupLocation = getRuleGroupLocationFromCombinedRule(rule);
+    expect(groupLocation).toEqual<RuleGroupIdentifier>({
+      dataSourceName: 'prometheus-1',
+      namespaceName: 'abc123',
+      groupName: 'group-1',
+    });
+  });
+
+  it('should be able to extract rule group location from a Grafana managed ruleWithLocation', () => {
+    const rule = mockRuleWithLocation(mockGrafanaRulerRule({ namespace_uid: 'abc123' }));
+    const groupLocation = getRuleGroupLocationFromRuleWithLocation(rule);
+    expect(groupLocation).toEqual<RuleGroupIdentifier>({
+      dataSourceName: 'grafana',
+      namespaceName: 'abc123',
+      groupName: 'group-1',
+    });
+  });
+
+  it('should be able to extract rule group location from a data source managed ruleWithLocation', () => {
+    const rule = mockRuleWithLocation(mockRulerAlertingRule({}), { namespace: 'abc123' });
+    const groupLocation = getRuleGroupLocationFromRuleWithLocation(rule);
+    expect(groupLocation).toEqual<RuleGroupIdentifier>({
+      dataSourceName: 'grafana',
+      namespaceName: 'abc123',
+      groupName: 'group-1',
+    });
+  });
+});

public/app/features/alerting/unified/utils/rules.ts

@@ -15,15 +15,19 @@ import {
   RecordingRule,
   Rule,
   RuleIdentifier,
+  RuleGroupIdentifier,
   RuleNamespace,
+  RuleWithLocation,
 } from 'app/types/unified-alerting';
 import {
   GrafanaAlertState,
   GrafanaAlertStateWithReason,
   mapStateWithReasonToBaseState,
+  PostableRuleDTO,
   PromAlertingRuleState,
   PromRuleType,
   RulerAlertingRuleDTO,
+  RulerCloudRuleDTO,
   RulerGrafanaRuleDTO,
   RulerRecordingRuleDTO,
   RulerRuleDTO,
@@ -34,7 +38,7 @@ import { State } from '../components/StateTag';
 import { RuleHealth } from '../search/rulesSearchParser';
 
 import { RULER_NOT_SUPPORTED_MSG } from './constants';
-import { getRulesSourceName } from './datasource';
+import { getRulesSourceName, isGrafanaRulesSource } from './datasource';
 import { GRAFANA_ORIGIN_LABEL } from './labels';
 import { AsyncRequestState } from './redux';
 import { safeParsePrometheusDuration } from './time';
@@ -55,10 +59,14 @@ export function isRecordingRulerRule(rule?: RulerRuleDTO): rule is RulerRecordin
   return typeof rule === 'object' && 'record' in rule;
 }
 
-export function isGrafanaRulerRule(rule?: RulerRuleDTO): rule is RulerGrafanaRuleDTO {
+export function isGrafanaRulerRule(rule?: RulerRuleDTO | PostableRuleDTO): rule is RulerGrafanaRuleDTO {
   return typeof rule === 'object' && 'grafana_alert' in rule;
 }
 
+export function isCloudRulerRule(rule?: RulerRuleDTO | PostableRuleDTO): rule is RulerCloudRuleDTO {
+  return typeof rule === 'object' && !isGrafanaRulerRule(rule);
+}
+
 export function isGrafanaRulerRulePaused(rule: RulerGrafanaRuleDTO) {
   return rule && isGrafanaRulerRule(rule) && Boolean(rule.grafana_alert.is_paused);
 }
@@ -286,3 +294,38 @@ export const getNumberEvaluationsToStartAlerting = (forDuration: string, current
     return evaluationsBeforeCeil < 1 ? 0 : Math.ceil(forNumber / evalNumberMs) + 1;
   }
 };
+
+/*
+ * Extracts a rule group identifier from a CombinedRule
+ */
+export function getRuleGroupLocationFromCombinedRule(rule: CombinedRule): RuleGroupIdentifier {
+  const ruleSourceName = isGrafanaRulesSource(rule.namespace.rulesSource)
+    ? rule.namespace.rulesSource
+    : rule.namespace.rulesSource.name;
+
+  const namespace = isGrafanaRulerRule(rule.rulerRule)
+    ? rule.rulerRule.grafana_alert.namespace_uid
+    : rule.namespace.name;
+
+  return {
+    dataSourceName: ruleSourceName,
+    namespaceName: namespace,
+    groupName: rule.group.name,
+  };
+}
+
+/**
+ * Extracts a rule group identifier from a RuleWithLocation
+ */
+export function getRuleGroupLocationFromRuleWithLocation(rule: RuleWithLocation): RuleGroupIdentifier {
+  const dataSourceName = rule.ruleSourceName;
+
+  const namespaceName = isGrafanaRulerRule(rule.rule) ? rule.rule.grafana_alert.namespace_uid : rule.namespace;
+  const groupName = rule.group.name;
+
+  return {
+    dataSourceName,
+    namespaceName,
+    groupName,
+  };
+}

public/app/types/unified-alerting-dto.ts

@@ -230,23 +230,19 @@ export interface GrafanaRuleDefinition extends PostableGrafanaRuleDefinition {
   provenance?: string;
 }
 
-export interface RulerGrafanaRuleDTO {
+export interface RulerGrafanaRuleDTO<T = GrafanaRuleDefinition> {
-  grafana_alert: GrafanaRuleDefinition;
+  grafana_alert: T;
   for: string;
   annotations: Annotations;
   labels: Labels;
 }
 
-export interface PostableRuleGrafanaRuleDTO {
+export type PostableRuleGrafanaRuleDTO = RulerGrafanaRuleDTO<PostableGrafanaRuleDefinition>;
-  grafana_alert: PostableGrafanaRuleDefinition;
-  for: string;
-  annotations: Annotations;
-  labels: Labels;
-}
 
-export type RulerRuleDTO = RulerAlertingRuleDTO | RulerRecordingRuleDTO | RulerGrafanaRuleDTO;
+export type RulerCloudRuleDTO = RulerAlertingRuleDTO | RulerRecordingRuleDTO;
 
-export type PostableRuleDTO = RulerAlertingRuleDTO | RulerRecordingRuleDTO | PostableRuleGrafanaRuleDTO;
+export type RulerRuleDTO = RulerCloudRuleDTO | RulerGrafanaRuleDTO;
+export type PostableRuleDTO = RulerCloudRuleDTO | PostableRuleGrafanaRuleDTO;
 
 export type RulerRuleGroupDTO<R = RulerRuleDTO> = {
   name: string;

public/app/types/unified-alerting.ts

@@ -144,12 +144,16 @@ export interface RuleWithLocation<T = RulerRuleDTO> {
   rule: T;
 }
 
-export interface CombinedRuleWithLocation extends CombinedRule {
+// identifier for where we can find a RuleGroup
+export interface RuleGroupIdentifier {
   dataSourceName: string;
+  /** ⚠️ use the Grafana folder UID for Grafana-managed rules */
   namespaceName: string;
   groupName: string;
 }
 
+export type CombinedRuleWithLocation = CombinedRule & RuleGroupIdentifier;
+
 export interface PromRuleWithLocation {
   rule: AlertingRule;
   dataSourceName: string;