From a37b868da74a7c2506a64bf9cb1c2e5f63c344a3 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Mon, 20 Jun 2022 16:55:12 +0200
Subject: [PATCH] Alerting: Provisioning UI (#50776)

Co-authored-by: Konrad Lalik <konrad.lalik@grafana.com>
---
 .../features/alerting/unified/AmRoutes.tsx    |  11 +-
 .../features/alerting/unified/MuteTimings.tsx |  17 ++-
 .../features/alerting/unified/RuleViewer.tsx  |   5 +-
 .../alerting/unified/api/alertmanager.ts      |   1 +
 .../unified/components/Provisioning.tsx       |  28 ++++
 .../components/amroutes/AmRootRoute.tsx       |   6 +-
 .../components/amroutes/MuteTimingForm.tsx    |   7 +-
 .../components/amroutes/MuteTimingsTable.tsx  |  34 ++++-
 .../components/receivers/EditReceiverView.tsx |   8 +-
 .../components/receivers/EditTemplateView.tsx |   3 +
 .../components/receivers/ReceiversTable.tsx   |  10 +-
 .../components/receivers/TemplateForm.tsx     | 141 +++++++++---------
 .../components/receivers/TemplatesTable.tsx   |  71 ++++++---
 .../receivers/form/CloudReceiverForm.tsx      |   3 +
 .../form/GrafanaCommonChannelSettings.tsx     |   7 +-
 .../receivers/form/GrafanaReceiverForm.tsx    |  13 +-
 .../receivers/form/ReceiverForm.tsx           |   5 +-
 .../rules/RuleDetailsActionButtons.tsx        |  15 +-
 .../unified/components/rules/RulesTable.tsx   |  19 +++
 .../alerting/unified/state/actions.ts         |   1 +
 .../alerting/unified/types/receiver-form.ts   |   1 +
 .../alerting/unified/utils/receiver-form.ts   |   1 +
 .../plugins/datasource/alertmanager/types.ts  |   8 +
 public/app/types/unified-alerting-dto.ts      |   1 +
 24 files changed, 289 insertions(+), 127 deletions(-)
 create mode 100644 public/app/features/alerting/unified/components/Provisioning.tsx

diff --git a/public/app/features/alerting/unified/AmRoutes.tsx b/public/app/features/alerting/unified/AmRoutes.tsx
index eddb4012644..9cefb26546e 100644
--- a/public/app/features/alerting/unified/AmRoutes.tsx
+++ b/public/app/features/alerting/unified/AmRoutes.tsx
@@ -11,6 +11,7 @@ import { useCleanup } from '../../../core/hooks/useCleanup';
 import { AlertManagerPicker } from './components/AlertManagerPicker';
 import { AlertingPageWrapper } from './components/AlertingPageWrapper';
 import { NoAlertManagerWarning } from './components/NoAlertManagerWarning';
+import { ProvisionedResource, ProvisioningAlert } from './components/Provisioning';
 import { AmRootRoute } from './components/amroutes/AmRootRoute';
 import { AmSpecificRouting } from './components/amroutes/AmSpecificRouting';
 import { MuteTimingsTable } from './components/amroutes/MuteTimingsTable';
@@ -30,8 +31,6 @@ const AmRoutes: FC = () => {
   const alertManagers = useAlertManagersByPermission('notification');
   const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(alertManagers);
 
-  const readOnly = alertManagerSourceName ? isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName) : true;
-
   const amConfigs = useUnifiedAlertingSelector((state) => state.amConfigs);
 
   const fetchConfig = useCallback(() => {
@@ -57,6 +56,8 @@ const AmRoutes: FC = () => {
     (config?.receivers ?? []).map((receiver: Receiver) => receiver.name)
   ) as AmRouteReceiver[];
 
+  const isProvisioned = useMemo(() => Boolean(config?.route?.provenance), [config?.route]);
+
   const enterRootRouteEditMode = () => {
     setIsRootRouteEditMode(true);
   };
@@ -109,6 +110,10 @@ const AmRoutes: FC = () => {
     );
   }
 
+  const readOnly = alertManagerSourceName
+    ? isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName) || isProvisioned
+    : true;
+
   return (
     <AlertingPageWrapper pageId="am-routes">
       <AlertManagerPicker
@@ -121,10 +126,12 @@ const AmRoutes: FC = () => {
           {resultError.message || 'Unknown error.'}
         </Alert>
       )}
+      {isProvisioned && <ProvisioningAlert resource={ProvisionedResource.RootNotificationPolicy} />}
       {resultLoading && <LoadingPlaceholder text="Loading Alertmanager config..." />}
       {result && !resultLoading && !resultError && (
         <>
           <AmRootRoute
+            readOnly={readOnly}
             alertManagerSourceName={alertManagerSourceName}
             isEditMode={isRootRouteEditMode}
             onSave={handleSave}
diff --git a/public/app/features/alerting/unified/MuteTimings.tsx b/public/app/features/alerting/unified/MuteTimings.tsx
index 3bee4439115..89349196c59 100644
--- a/public/app/features/alerting/unified/MuteTimings.tsx
+++ b/public/app/features/alerting/unified/MuteTimings.tsx
@@ -38,7 +38,18 @@ const MuteTimings = () => {
 
   const getMuteTimingByName = useCallback(
     (id: string): MuteTimeInterval | undefined => {
-      return config?.mute_time_intervals?.find(({ name }: MuteTimeInterval) => name === id);
+      const timing = config?.mute_time_intervals?.find(({ name }: MuteTimeInterval) => name === id);
+
+      if (timing) {
+        const provenance = (config?.muteTimeProvenances ?? {})[timing.name];
+
+        return {
+          ...timing,
+          provenance,
+        };
+      }
+
+      return timing;
     },
     [config]
   );
@@ -60,7 +71,9 @@ const MuteTimings = () => {
             {() => {
               if (queryParams['muteName']) {
                 const muteTiming = getMuteTimingByName(String(queryParams['muteName']));
-                return <MuteTimingForm muteTiming={muteTiming} showError={!muteTiming} />;
+                const provenance = muteTiming?.provenance;
+
+                return <MuteTimingForm muteTiming={muteTiming} showError={!muteTiming} provenance={provenance} />;
               }
               return <Redirect to="/alerting/routes" />;
             }}
diff --git a/public/app/features/alerting/unified/RuleViewer.tsx b/public/app/features/alerting/unified/RuleViewer.tsx
index 92893842427..2d35ee2c6ce 100644
--- a/public/app/features/alerting/unified/RuleViewer.tsx
+++ b/public/app/features/alerting/unified/RuleViewer.tsx
@@ -19,6 +19,7 @@ import { AlertQuery } from '../../../types/unified-alerting-dto';
 
 import { AlertLabels } from './components/AlertLabels';
 import { DetailsField } from './components/DetailsField';
+import { ProvisionedResource, ProvisioningAlert } from './components/Provisioning';
 import { RuleViewerLayout, RuleViewerLayoutContent } from './components/rule-viewer/RuleViewerLayout';
 import { RuleViewerVisualization } from './components/rule-viewer/RuleViewerVisualization';
 import { RuleDetailsActionButtons } from './components/rules/RuleDetailsActionButtons';
@@ -35,7 +36,7 @@ import { AlertingQueryRunner } from './state/AlertingQueryRunner';
 import { getRulesSourceByName } from './utils/datasource';
 import { alertRuleToQueries } from './utils/query';
 import * as ruleId from './utils/rule-id';
-import { isFederatedRuleGroup } from './utils/rules';
+import { isFederatedRuleGroup, isGrafanaRulerRule } from './utils/rules';
 
 type RuleViewerProps = GrafanaRouteComponentProps<{ id?: string; sourceName?: string }>;
 
@@ -131,6 +132,7 @@ export function RuleViewer({ match }: RuleViewerProps) {
 
   const annotations = Object.entries(rule.annotations).filter(([_, value]) => !!value.trim());
   const isFederatedRule = isFederatedRuleGroup(rule.group);
+  const isProvisioned = isGrafanaRulerRule(rule.rulerRule) && Boolean(rule.rulerRule.grafana_alert.provenance);
 
   return (
     <RuleViewerLayout wrapInContent={false} title={pageTitle}>
@@ -146,6 +148,7 @@ export function RuleViewer({ match }: RuleViewerProps) {
           </VerticalGroup>
         </Alert>
       )}
+      {isProvisioned && <ProvisioningAlert resource={ProvisionedResource.AlertRule} />}
       <RuleViewerLayoutContent>
         <div>
           <h4>
diff --git a/public/app/features/alerting/unified/api/alertmanager.ts b/public/app/features/alerting/unified/api/alertmanager.ts
index 78a4385bdc1..6921c8ea527 100644
--- a/public/app/features/alerting/unified/api/alertmanager.ts
+++ b/public/app/features/alerting/unified/api/alertmanager.ts
@@ -32,6 +32,7 @@ export async function fetchAlertManagerConfig(alertManagerSourceName: string): P
     );
     return {
       template_files: result.data.template_files ?? {},
+      template_file_provenances: result.data.template_file_provenances ?? {},
       alertmanager_config: result.data.alertmanager_config ?? {},
     };
   } catch (e) {
diff --git a/public/app/features/alerting/unified/components/Provisioning.tsx b/public/app/features/alerting/unified/components/Provisioning.tsx
new file mode 100644
index 00000000000..a5b66f73bc6
--- /dev/null
+++ b/public/app/features/alerting/unified/components/Provisioning.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { Alert, Badge } from '@grafana/ui';
+
+export enum ProvisionedResource {
+  ContactPoint = 'contact point',
+  Template = 'template',
+  MuteTiming = 'mute timing',
+  AlertRule = 'alert rule',
+  RootNotificationPolicy = 'root notification policy',
+}
+
+interface ProvisioningAlertProps {
+  resource: ProvisionedResource;
+}
+
+export const ProvisioningAlert = ({ resource }: ProvisioningAlertProps) => {
+  return (
+    <Alert title={`This ${resource} cannot be edited through the UI`} severity="info">
+      This {resource} has been provisioned, that means it was created by config. Please contact your server admin to
+      update this {resource}.
+    </Alert>
+  );
+};
+
+export const ProvisioningBadge = () => {
+  return <Badge text={'Provisioned'} color={'purple'} />;
+};
diff --git a/public/app/features/alerting/unified/components/amroutes/AmRootRoute.tsx b/public/app/features/alerting/unified/components/amroutes/AmRootRoute.tsx
index 9b12db3a6d5..a88c517e647 100644
--- a/public/app/features/alerting/unified/components/amroutes/AmRootRoute.tsx
+++ b/public/app/features/alerting/unified/components/amroutes/AmRootRoute.tsx
@@ -7,7 +7,6 @@ import { Button, useStyles2 } from '@grafana/ui';
 import { Authorize } from '../../components/Authorize';
 import { AmRouteReceiver, FormAmRoute } from '../../types/amroutes';
 import { getNotificationsPermissions } from '../../utils/access-control';
-import { isVanillaPrometheusAlertManagerDataSource } from '../../utils/datasource';
 
 import { AmRootRouteForm } from './AmRootRouteForm';
 import { AmRootRouteRead } from './AmRootRouteRead';
@@ -20,6 +19,7 @@ export interface AmRootRouteProps {
   receivers: AmRouteReceiver[];
   routes: FormAmRoute;
   alertManagerSourceName: string;
+  readOnly?: boolean;
 }
 
 export const AmRootRoute: FC<AmRootRouteProps> = ({
@@ -30,11 +30,11 @@ export const AmRootRoute: FC<AmRootRouteProps> = ({
   receivers,
   routes,
   alertManagerSourceName,
+  readOnly = false,
 }) => {
   const styles = useStyles2(getStyles);
 
   const permissions = getNotificationsPermissions(alertManagerSourceName);
-  const isReadOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
 
   return (
     <div className={styles.container} data-testid="am-root-route-container">
@@ -42,7 +42,7 @@ export const AmRootRoute: FC<AmRootRouteProps> = ({
         <h5 className={styles.title}>
           Root policy - <i>default for all alerts</i>
         </h5>
-        {!isEditMode && !isReadOnly && (
+        {!isEditMode && !readOnly && (
           <Authorize actions={[permissions.update]}>
             <Button icon="pen" onClick={onEnterEditMode} size="sm" type="button" variant="secondary">
               Edit
diff --git a/public/app/features/alerting/unified/components/amroutes/MuteTimingForm.tsx b/public/app/features/alerting/unified/components/amroutes/MuteTimingForm.tsx
index f33aac44e0a..4bd2c2c0aeb 100644
--- a/public/app/features/alerting/unified/components/amroutes/MuteTimingForm.tsx
+++ b/public/app/features/alerting/unified/components/amroutes/MuteTimingForm.tsx
@@ -22,12 +22,14 @@ import { createMuteTiming, defaultTimeInterval } from '../../utils/mute-timings'
 import { initialAsyncRequestState } from '../../utils/redux';
 import { AlertManagerPicker } from '../AlertManagerPicker';
 import { AlertingPageWrapper } from '../AlertingPageWrapper';
+import { ProvisionedResource, ProvisioningAlert } from '../Provisioning';
 
 import { MuteTimingTimeInterval } from './MuteTimingTimeInterval';
 
 interface Props {
   muteTiming?: MuteTimeInterval;
   showError?: boolean;
+  provenance?: string;
 }
 
 const useDefaultValues = (muteTiming?: MuteTimeInterval): MuteTimingFields => {
@@ -56,7 +58,7 @@ const useDefaultValues = (muteTiming?: MuteTimeInterval): MuteTimingFields => {
   }, [muteTiming]);
 };
 
-const MuteTimingForm = ({ muteTiming, showError }: Props) => {
+const MuteTimingForm = ({ muteTiming, showError, provenance }: Props) => {
   const dispatch = useDispatch();
   const alertManagers = useAlertManagersByPermission('notification');
   const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(alertManagers);
@@ -109,11 +111,12 @@ const MuteTimingForm = ({ muteTiming, showError }: Props) => {
         disabled
         dataSources={alertManagers}
       />
+      {provenance && <ProvisioningAlert resource={ProvisionedResource.MuteTiming} />}
       {result && !loading && (
         <FormProvider {...formApi}>
           <form onSubmit={formApi.handleSubmit(onSubmit)} data-testid="mute-timing-form">
             {showError && <Alert title="No matching mute timing found" />}
-            <FieldSet label={'Create mute timing'}>
+            <FieldSet label={'Create mute timing'} disabled={Boolean(provenance)}>
               <Field
                 required
                 label="Name"
diff --git a/public/app/features/alerting/unified/components/amroutes/MuteTimingsTable.tsx b/public/app/features/alerting/unified/components/amroutes/MuteTimingsTable.tsx
index 78c7f5bc61b..7f5b6ef2106 100644
--- a/public/app/features/alerting/unified/components/amroutes/MuteTimingsTable.tsx
+++ b/public/app/features/alerting/unified/components/amroutes/MuteTimingsTable.tsx
@@ -22,6 +22,7 @@ import { makeAMLink } from '../../utils/misc';
 import { AsyncRequestState, initialAsyncRequestState } from '../../utils/redux';
 import { DynamicTable, DynamicTableItemProps, DynamicTableColumnProps } from '../DynamicTable';
 import { EmptyAreaWithCTA } from '../EmptyAreaWithCTA';
+import { ProvisioningBadge } from '../Provisioning';
 
 interface Props {
   alertManagerSourceName: string;
@@ -40,15 +41,24 @@ export const MuteTimingsTable: FC<Props> = ({ alertManagerSourceName, muteTiming
 
   const items = useMemo((): Array<DynamicTableItemProps<MuteTimeInterval>> => {
     const muteTimings = result?.alertmanager_config?.mute_time_intervals ?? [];
+    const muteTimingsProvenances = result?.alertmanager_config?.muteTimeProvenances ?? {};
+
     return muteTimings
       .filter(({ name }) => (muteTimingNames ? muteTimingNames.includes(name) : true))
       .map((mute) => {
         return {
           id: mute.name,
-          data: mute,
+          data: {
+            ...mute,
+            provenance: muteTimingsProvenances[mute.name],
+          },
         };
       });
-  }, [result?.alertmanager_config?.mute_time_intervals, muteTimingNames]);
+  }, [
+    result?.alertmanager_config?.mute_time_intervals,
+    result?.alertmanager_config?.muteTimeProvenances,
+    muteTimingNames,
+  ]);
 
   const columns = useColumns(alertManagerSourceName, hideActions, setMuteTimingName);
 
@@ -107,13 +117,18 @@ function useColumns(alertManagerSourceName: string, hideActions = false, setMute
   const userHasEditPermissions = contextSrv.hasPermission(permissions.update);
   const userHasDeletePermissions = contextSrv.hasPermission(permissions.delete);
   const showActions = !hideActions && (userHasEditPermissions || userHasDeletePermissions);
+
   return useMemo((): Array<DynamicTableColumnProps<MuteTimeInterval>> => {
     const columns: Array<DynamicTableColumnProps<MuteTimeInterval>> = [
       {
         id: 'name',
         label: 'Name',
         renderCell: function renderName({ data }) {
-          return data.name;
+          return (
+            <>
+              {data.name} {data.provenance && <ProvisioningBadge />}
+            </>
+          );
         },
         size: '250px',
       },
@@ -128,6 +143,19 @@ function useColumns(alertManagerSourceName: string, hideActions = false, setMute
         id: 'actions',
         label: 'Actions',
         renderCell: function renderActions({ data }) {
+          if (data.provenance) {
+            return (
+              <div>
+                <Link
+                  href={makeAMLink(`/alerting/routes/mute-timing/edit`, alertManagerSourceName, {
+                    muteName: data.name,
+                  })}
+                >
+                  <IconButton name="file-alt" title="View mute timing" />
+                </Link>
+              </div>
+            );
+          }
           return (
             <div>
               <Authorize actions={[permissions.update]}>
diff --git a/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx b/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx
index dce13077e0b..2d395975ac4 100644
--- a/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx
+++ b/public/app/features/alerting/unified/components/receivers/EditReceiverView.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-import { InfoBox } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 
 import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
@@ -18,9 +18,9 @@ export const EditReceiverView: FC<Props> = ({ config, receiverName, alertManager
   const receiver = config.alertmanager_config.receivers?.find(({ name }) => name === receiverName);
   if (!receiver) {
     return (
-      <InfoBox severity="error" title="Receiver not found">
-        Sorry, this receiver does not seem to exit.
-      </InfoBox>
+      <Alert severity="error" title="Receiver not found">
+        Sorry, this receiver does not seem to exist.
+      </Alert>
     );
   }
 
diff --git a/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
index 40cbc96628f..bbdceb3b3f3 100644
--- a/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
+++ b/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
@@ -13,6 +13,8 @@ interface Props {
 
 export const EditTemplateView: FC<Props> = ({ config, templateName, alertManagerSourceName }) => {
   const template = config.template_files?.[templateName];
+  const provenance = config.template_file_provenances?.[templateName];
+
   if (!template) {
     return (
       <InfoBox severity="error" title="Template not found">
@@ -25,6 +27,7 @@ export const EditTemplateView: FC<Props> = ({ config, templateName, alertManager
       alertManagerSourceName={alertManagerSourceName}
       config={config}
       existing={{ name: templateName, content: template }}
+      provenance={provenance}
     />
   );
 };
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
index b0f36628bbe..a7cfcbd6c5b 100644
--- a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
@@ -16,6 +16,7 @@ import { isReceiverUsed } from '../../utils/alertmanager';
 import { isVanillaPrometheusAlertManagerDataSource } from '../../utils/datasource';
 import { makeAMLink } from '../../utils/misc';
 import { extractNotifierTypeCounts } from '../../utils/receivers';
+import { ProvisioningBadge } from '../Provisioning';
 import { ActionIcon } from '../rules/ActionIcon';
 
 import { ReceiversSection } from './ReceiversSection';
@@ -64,6 +65,7 @@ export const ReceiversTable: FC<Props> = ({ config, alertManagerName }) => {
             return type;
           }
         ),
+        provisioned: receiver.grafana_managed_receiver_configs?.some((receiver) => receiver.provenance),
       })) ?? [],
     [config, grafanaNotifiers.result]
   );
@@ -102,11 +104,13 @@ export const ReceiversTable: FC<Props> = ({ config, alertManagerName }) => {
           )}
           {rows.map((receiver, idx) => (
             <tr key={receiver.name} className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
-              <td>{receiver.name}</td>
+              <td>
+                {receiver.name} {receiver.provisioned && <ProvisioningBadge />}
+              </td>
               <td>{receiver.types.join(', ')}</td>
               <Authorize actions={[permissions.update, permissions.delete]}>
                 <td className={tableStyles.actionsCell}>
-                  {!isVanillaAM && (
+                  {!isVanillaAM && !receiver.provisioned && (
                     <>
                       <Authorize actions={[permissions.update]}>
                         <ActionIcon
@@ -129,7 +133,7 @@ export const ReceiversTable: FC<Props> = ({ config, alertManagerName }) => {
                       </Authorize>
                     </>
                   )}
-                  {isVanillaAM && (
+                  {(isVanillaAM || receiver.provisioned) && (
                     <Authorize actions={[permissions.update]}>
                       <ActionIcon
                         data-testid="view"
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
index 1777b4cfe35..3348b3c3fce 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
@@ -4,7 +4,7 @@ import { useForm, Validate } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Button, Field, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Field, FieldSet, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 
@@ -12,6 +12,7 @@ import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelect
 import { updateAlertManagerConfigAction } from '../../state/actions';
 import { makeAMLink } from '../../utils/misc';
 import { ensureDefine } from '../../utils/templates';
+import { ProvisionedResource, ProvisioningAlert } from '../Provisioning';
 
 interface Values {
   name: string;
@@ -27,9 +28,10 @@ interface Props {
   existing?: Values;
   config: AlertManagerCortexConfig;
   alertManagerSourceName: string;
+  provenance?: string;
 }
 
-export const TemplateForm: FC<Props> = ({ existing, alertManagerSourceName, config }) => {
+export const TemplateForm: FC<Props> = ({ existing, alertManagerSourceName, config, provenance }) => {
   const styles = useStyles2(getStyles);
   const dispatch = useDispatch();
 
@@ -100,73 +102,76 @@ export const TemplateForm: FC<Props> = ({ existing, alertManagerSourceName, conf
           {error.message || (error as any)?.data?.message || String(error)}
         </Alert>
       )}
-      <Field label="Template name" error={errors?.name?.message} invalid={!!errors.name?.message} required>
-        <Input
-          {...register('name', {
-            required: { value: true, message: 'Required.' },
-            validate: { nameIsUnique: validateNameIsUnique },
-          })}
-          placeholder="Give your template a name"
-          width={42}
-          autoFocus={true}
-        />
-      </Field>
-      <Field
-        description={
-          <>
-            You can use the{' '}
-            <a
-              href="https://pkg.go.dev/text/template?utm_source=godoc"
-              target="__blank"
-              rel="noreferrer"
-              className={styles.externalLink}
-            >
-              Go templating language
-            </a>
-            .{' '}
-            <a
-              href="https://prometheus.io/blog/2016/03/03/custom-alertmanager-templates/"
-              target="__blank"
-              rel="noreferrer"
-              className={styles.externalLink}
-            >
-              More info about alertmanager templates
-            </a>
-          </>
-        }
-        label="Content"
-        error={errors?.content?.message}
-        invalid={!!errors.content?.message}
-        required
-      >
-        <TextArea
-          {...register('content', { required: { value: true, message: 'Required.' } })}
-          className={styles.textarea}
-          placeholder="Message"
-          rows={12}
-        />
-      </Field>
-      <div className={styles.buttons}>
-        {loading && (
-          <Button disabled={true} icon="fa fa-spinner" variant="primary">
-            Saving...
-          </Button>
-        )}
-        {!loading && (
-          <Button type="submit" variant="primary">
-            Save template
-          </Button>
-        )}
-        <LinkButton
-          disabled={loading}
-          href={makeAMLink('alerting/notifications', alertManagerSourceName)}
-          variant="secondary"
-          type="button"
-          fill="outline"
+      {provenance && <ProvisioningAlert resource={ProvisionedResource.Template} />}
+      <FieldSet disabled={Boolean(provenance)}>
+        <Field label="Template name" error={errors?.name?.message} invalid={!!errors.name?.message} required>
+          <Input
+            {...register('name', {
+              required: { value: true, message: 'Required.' },
+              validate: { nameIsUnique: validateNameIsUnique },
+            })}
+            placeholder="Give your template a name"
+            width={42}
+            autoFocus={true}
+          />
+        </Field>
+        <Field
+          description={
+            <>
+              You can use the{' '}
+              <a
+                href="https://pkg.go.dev/text/template?utm_source=godoc"
+                target="__blank"
+                rel="noreferrer"
+                className={styles.externalLink}
+              >
+                Go templating language
+              </a>
+              .{' '}
+              <a
+                href="https://prometheus.io/blog/2016/03/03/custom-alertmanager-templates/"
+                target="__blank"
+                rel="noreferrer"
+                className={styles.externalLink}
+              >
+                More info about alertmanager templates
+              </a>
+            </>
+          }
+          label="Content"
+          error={errors?.content?.message}
+          invalid={!!errors.content?.message}
+          required
         >
-          Cancel
-        </LinkButton>
-      </div>
+          <TextArea
+            {...register('content', { required: { value: true, message: 'Required.' } })}
+            className={styles.textarea}
+            placeholder="Message"
+            rows={12}
+          />
+        </Field>
+        <div className={styles.buttons}>
+          {loading && (
+            <Button disabled={true} icon="fa fa-spinner" variant="primary">
+              Saving...
+            </Button>
+          )}
+          {!loading && (
+            <Button type="submit" variant="primary">
+              Save template
+            </Button>
+          )}
+          <LinkButton
+            disabled={loading}
+            href={makeAMLink('alerting/notifications', alertManagerSourceName)}
+            variant="secondary"
+            type="button"
+            fill="outline"
+          >
+            Cancel
+          </LinkButton>
+        </div>
+      </FieldSet>
     </form>
   );
 };
diff --git a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
index d49e1ab3c7b..2d78751ee87 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
@@ -12,6 +12,7 @@ import { getNotificationsPermissions } from '../../utils/access-control';
 import { makeAMLink } from '../../utils/misc';
 import { CollapseToggle } from '../CollapseToggle';
 import { DetailsField } from '../DetailsField';
+import { ProvisioningBadge } from '../Provisioning';
 import { ActionIcon } from '../rules/ActionIcon';
 
 import { ReceiversSection } from './ReceiversSection';
@@ -27,7 +28,15 @@ export const TemplatesTable: FC<Props> = ({ config, alertManagerName }) => {
   const tableStyles = useStyles2(getAlertTableStyles);
   const permissions = getNotificationsPermissions(alertManagerName);
 
-  const templateRows = useMemo(() => Object.entries(config.template_files), [config]);
+  const templateRows = useMemo(() => {
+    const templates = Object.entries(config.template_files);
+
+    return templates.map(([name, template]) => ({
+      name,
+      template,
+      provenance: (config.template_file_provenances ?? {})[name],
+    }));
+  }, [config]);
   const [templateToDelete, setTemplateToDelete] = useState<string>();
 
   const deleteTemplate = () => {
@@ -66,7 +75,7 @@ export const TemplatesTable: FC<Props> = ({ config, alertManagerName }) => {
               <td colSpan={3}>No templates defined.</td>
             </tr>
           )}
-          {templateRows.map(([name, content], idx) => {
+          {templateRows.map(({ name, template, provenance }, idx) => {
             const isExpanded = !!expandedTemplates[name];
             return (
               <Fragment key={name}>
@@ -77,35 +86,49 @@ export const TemplatesTable: FC<Props> = ({ config, alertManagerName }) => {
                       onToggle={() => setExpandedTemplates({ ...expandedTemplates, [name]: !isExpanded })}
                     />
                   </td>
-                  <td>{name}</td>
-                  <Authorize actions={[permissions.update, permissions.delete]}>
-                    <td className={tableStyles.actionsCell}>
-                      <Authorize actions={[permissions.update]}>
-                        <ActionIcon
-                          to={makeAMLink(
-                            `/alerting/notifications/templates/${encodeURIComponent(name)}/edit`,
-                            alertManagerName
-                          )}
-                          tooltip="edit template"
-                          icon="pen"
-                        />
+                  <td>
+                    {name} {provenance && <ProvisioningBadge />}
+                  </td>
+                  <td className={tableStyles.actionsCell}>
+                    {provenance && (
+                      <ActionIcon
+                        to={makeAMLink(
+                          `/alerting/notifications/templates/${encodeURIComponent(name)}/edit`,
+                          alertManagerName
+                        )}
+                        tooltip="view template"
+                        icon="file-alt"
+                      />
+                    )}
+                    {!provenance && (
+                      <Authorize actions={[permissions.update, permissions.delete]}>
+                        <Authorize actions={[permissions.update]}>
+                          <ActionIcon
+                            to={makeAMLink(
+                              `/alerting/notifications/templates/${encodeURIComponent(name)}/edit`,
+                              alertManagerName
+                            )}
+                            tooltip="edit template"
+                            icon="pen"
+                          />
+                        </Authorize>
+                        <Authorize actions={[permissions.delete]}>
+                          <ActionIcon
+                            onClick={() => setTemplateToDelete(name)}
+                            tooltip="delete template"
+                            icon="trash-alt"
+                          />
+                        </Authorize>
                       </Authorize>
-                      <Authorize actions={[permissions.delete]}>
-                        <ActionIcon
-                          onClick={() => setTemplateToDelete(name)}
-                          tooltip="delete template"
-                          icon="trash-alt"
-                        />
-                      </Authorize>
-                    </td>
-                  </Authorize>
+                    )}
+                  </td>
                 </tr>
                 {isExpanded && (
                   <tr className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
                     <td></td>
                     <td colSpan={2}>
                       <DetailsField label="Description" horizontal={true}>
-                        <pre>{content}</pre>
+                        <pre>{template}</pre>
                       </DetailsField>
                     </td>
                   </tr>
diff --git a/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx
index 2f07e7dd0e8..3204798834e 100644
--- a/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/CloudReceiverForm.tsx
@@ -62,6 +62,8 @@ export const CloudReceiverForm: FC<Props> = ({ existing, alertManagerSourceName,
     [config, existing]
   );
 
+  const readOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
+
   return (
     <>
       {!isVanillaAM && (
@@ -70,6 +72,7 @@ export const CloudReceiverForm: FC<Props> = ({ existing, alertManagerSourceName,
         </Alert>
       )}
       <ReceiverForm<CloudChannelValues>
+        readOnly={readOnly}
         config={config}
         onSubmit={onSubmit}
         initialValues={existingValue}
diff --git a/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx b/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx
index f43af3a100b..527337ee02e 100644
--- a/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/GrafanaCommonChannelSettings.tsx
@@ -5,7 +5,11 @@ import { Checkbox, Field } from '@grafana/ui';
 
 import { CommonSettingsComponentProps } from '../../../types/receiver-form';
 
-export const GrafanaCommonChannelSettings: FC<CommonSettingsComponentProps> = ({ pathPrefix, className }) => {
+export const GrafanaCommonChannelSettings: FC<CommonSettingsComponentProps> = ({
+  pathPrefix,
+  className,
+  readOnly = false,
+}) => {
   const { register } = useFormContext();
   return (
     <div className={className}>
@@ -14,6 +18,7 @@ export const GrafanaCommonChannelSettings: FC<CommonSettingsComponentProps> = ({
           {...register(`${pathPrefix}disableResolveMessage`)}
           label="Disable resolved message"
           description="Disable the resolve message [OK] that is sent when alerting state returns to false"
+          disabled={readOnly}
         />
       </Field>
     </div>
diff --git a/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
index 71eaae86162..63897ef5224 100644
--- a/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/GrafanaReceiverForm.tsx
@@ -16,13 +16,14 @@ import {
   updateAlertManagerConfigAction,
 } from '../../../state/actions';
 import { GrafanaChannelValues, ReceiverFormValues } from '../../../types/receiver-form';
-import { GRAFANA_RULES_SOURCE_NAME } from '../../../utils/datasource';
+import { GRAFANA_RULES_SOURCE_NAME, isVanillaPrometheusAlertManagerDataSource } from '../../../utils/datasource';
 import {
   formChannelValuesToGrafanaChannelConfig,
   formValuesToGrafanaReceiver,
   grafanaReceiverToFormValues,
   updateConfigWithReceiver,
 } from '../../../utils/receiver-form';
+import { ProvisionedResource, ProvisioningAlert } from '../../Provisioning';
 
 import { GrafanaCommonChannelSettings } from './GrafanaCommonChannelSettings';
 import { ReceiverForm } from './ReceiverForm';
@@ -108,10 +109,20 @@ export const GrafanaReceiverForm: FC<Props> = ({ existing, alertManagerSourceNam
     [config, existing]
   );
 
+  // if any receivers in the contact point have a "provenance", the entire contact point should be readOnly
+  const hasProvisionedItems = existing
+    ? (existing.grafana_managed_receiver_configs ?? []).some((item) => Boolean(item.provenance))
+    : false;
+
+  const readOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName) || hasProvisionedItems;
+
   if (grafanaNotifiers.result) {
     return (
       <>
+        {hasProvisionedItems && <ProvisioningAlert resource={ProvisionedResource.ContactPoint} />}
+
         <ReceiverForm<GrafanaChannelValues>
+          readOnly={readOnly}
           config={config}
           onSubmit={onSubmit}
           initialValues={existingValue}
diff --git a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
index bfde9156c91..39ab027a822 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
@@ -12,7 +12,6 @@ import { NotifierDTO } from 'app/types';
 import { useControlledFieldArray } from '../../../hooks/useControlledFieldArray';
 import { useUnifiedAlertingSelector } from '../../../hooks/useUnifiedAlertingSelector';
 import { ChannelValues, CommonSettingsComponentType, ReceiverFormValues } from '../../../types/receiver-form';
-import { isVanillaPrometheusAlertManagerDataSource } from '../../../utils/datasource';
 import { makeAMLink } from '../../../utils/misc';
 
 import { ChannelSubForm } from './ChannelSubForm';
@@ -28,6 +27,7 @@ interface Props<R extends ChannelValues> {
   takenReceiverNames: string[]; // will validate that user entered receiver name is not one of these
   commonSettingsComponent: CommonSettingsComponentType;
   initialValues?: ReceiverFormValues<R>;
+  readOnly: boolean;
 }
 
 export function ReceiverForm<R extends ChannelValues>({
@@ -40,10 +40,11 @@ export function ReceiverForm<R extends ChannelValues>({
   onTestChannel,
   takenReceiverNames,
   commonSettingsComponent,
+  readOnly,
 }: Props<R>): JSX.Element {
   const notifyApp = useAppNotification();
   const styles = useStyles2(getStyles);
-  const readOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
+
   const defaultValues = initialValues || {
     name: '',
     items: [
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
index 74caa1165dc..ce59459125f 100644
--- a/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
@@ -10,7 +10,6 @@ import { useAppNotification } from 'app/core/copy/appNotification';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AccessControlAction } from 'app/types';
 import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
-import { RulerGrafanaRuleDTO, RulerRuleDTO } from 'app/types/unified-alerting-dto';
 
 import { useIsRuleEditable } from '../../hooks/useIsRuleEditable';
 import { useStateHistoryModal } from '../../hooks/useStateHistoryModal';
@@ -20,7 +19,7 @@ import { Annotation } from '../../utils/constants';
 import { getRulesSourceName, isCloudRulesSource, isGrafanaRulesSource } from '../../utils/datasource';
 import { createExploreLink, createViewLink, makeRuleBasedSilenceLink } from '../../utils/misc';
 import * as ruleId from '../../utils/rule-id';
-import { isFederatedRuleGroup } from '../../utils/rules';
+import { isFederatedRuleGroup, isGrafanaRulerRule } from '../../utils/rules';
 
 interface Props {
   rule: CombinedRule;
@@ -43,6 +42,7 @@ export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource }) => {
   const rulesSourceName = getRulesSourceName(rulesSource);
 
   const hasExplorePermission = contextSrv.hasPermission(AccessControlAction.DataSourcesExplore);
+  const isProvisioned = isGrafanaRulerRule(rule.rulerRule) && Boolean(rule.rulerRule.grafana_alert.provenance);
 
   const leftButtons: JSX.Element[] = [];
   const rightButtons: JSX.Element[] = [];
@@ -185,7 +185,7 @@ export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource }) => {
     );
   }
 
-  if (isEditable && rulerRule && !isFederated) {
+  if (isEditable && rulerRule && !isFederated && !isProvisioned) {
     const sourceName = getRulesSourceName(rulesSource);
     const identifier = ruleId.fromRulerRule(sourceName, namespace.name, group.name, rulerRule);
 
@@ -222,7 +222,7 @@ export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource }) => {
     );
   }
 
-  if (isRemovable && rulerRule && !isFederated) {
+  if (isRemovable && rulerRule && !isFederated && !isProvisioned) {
     rightButtons.push(
       <Button
         className={style.button}
@@ -282,10 +282,3 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     font-size: ${theme.typography.size.sm};
   `,
 });
-
-function isGrafanaRulerRule(rule?: RulerRuleDTO): rule is RulerGrafanaRuleDTO {
-  if (!rule) {
-    return false;
-  }
-  return (rule as RulerGrafanaRuleDTO).grafana_alert != null;
-}
diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
index e6423e96dc1..5e2ca58c4fc 100644
--- a/public/app/features/alerting/unified/components/rules/RulesTable.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
@@ -7,8 +7,10 @@ import { CombinedRule } from 'app/types/unified-alerting';
 
 import { useHasRuler } from '../../hooks/useHasRuler';
 import { Annotation } from '../../utils/constants';
+import { isGrafanaRulerRule } from '../../utils/rules';
 import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
 import { DynamicTableWithGuidelines } from '../DynamicTableWithGuidelines';
+import { ProvisioningBadge } from '../Provisioning';
 import { RuleLocation } from '../RuleLocation';
 
 import { RuleDetails } from './RuleDetails';
@@ -116,6 +118,23 @@ function useColumns(showSummaryColumn: boolean, showGroupColumn: boolean) {
         renderCell: ({ data: rule }) => rule.name,
         size: 5,
       },
+      {
+        id: 'provisioned',
+        label: '',
+        // eslint-disable-next-line react/display-name
+        renderCell: ({ data: rule }) => {
+          const rulerRule = rule.rulerRule;
+          const isGrafanaManagedRule = isGrafanaRulerRule(rulerRule);
+
+          if (!isGrafanaManagedRule) {
+            return null;
+          }
+
+          const provenance = rulerRule.grafana_alert.provenance;
+          return provenance ? <ProvisioningBadge /> : null;
+        },
+        size: '100px',
+      },
       {
         id: 'health',
         label: 'Health',
diff --git a/public/app/features/alerting/unified/state/actions.ts b/public/app/features/alerting/unified/state/actions.ts
index 32e6afba392..6526284dfee 100644
--- a/public/app/features/alerting/unified/state/actions.ts
+++ b/public/app/features/alerting/unified/state/actions.ts
@@ -129,6 +129,7 @@ export const fetchAlertManagerConfigAction = createAsyncThunk(
             return fetchStatus(alertManagerSourceName).then((status) => ({
               alertmanager_config: status.config,
               template_files: {},
+              template_file_provenances: result.template_file_provenances,
             }));
           }
           return result;
diff --git a/public/app/features/alerting/unified/types/receiver-form.ts b/public/app/features/alerting/unified/types/receiver-form.ts
index 121bf6f1559..f6c48ffae72 100644
--- a/public/app/features/alerting/unified/types/receiver-form.ts
+++ b/public/app/features/alerting/unified/types/receiver-form.ts
@@ -25,6 +25,7 @@ export interface CloudChannelValues extends ChannelValues {
 
 export interface GrafanaChannelValues extends ChannelValues {
   type: NotifierType;
+  provenance?: string;
   disableResolveMessage: boolean;
 }
 
diff --git a/public/app/features/alerting/unified/utils/receiver-form.ts b/public/app/features/alerting/unified/utils/receiver-form.ts
index 7c0c33dc101..1efc737f8a5 100644
--- a/public/app/features/alerting/unified/utils/receiver-form.ts
+++ b/public/app/features/alerting/unified/utils/receiver-form.ts
@@ -192,6 +192,7 @@ function grafanaChannelConfigToFormChannelValues(
   const values: GrafanaChannelValues = {
     __id: id,
     type: channel.type as NotifierType,
+    provenance: channel.provenance,
     secureSettings: {},
     settings: { ...channel.settings },
     secureFields: { ...channel.secureFields },
diff --git a/public/app/plugins/datasource/alertmanager/types.ts b/public/app/plugins/datasource/alertmanager/types.ts
index 2805072ad78..e9b157cbd2f 100644
--- a/public/app/plugins/datasource/alertmanager/types.ts
+++ b/public/app/plugins/datasource/alertmanager/types.ts
@@ -5,6 +5,8 @@ import { DataSourceJsonData } from '@grafana/data';
 export type AlertManagerCortexConfig = {
   template_files: Record<string, string>;
   alertmanager_config: AlertmanagerConfig;
+  /** { [name]: provenance } */
+  template_file_provenances?: Record<string, string>;
 };
 
 export type TLSConfig = {
@@ -72,6 +74,7 @@ export type GrafanaManagedReceiverConfig = {
   name: string;
   updated?: string;
   created?: string;
+  provenance?: string;
 };
 
 export type Receiver = {
@@ -106,6 +109,8 @@ export type Route = {
   repeat_interval?: string;
   routes?: Route[];
   mute_time_intervals?: string[];
+  /** only the root policy might have a provenance field defined */
+  provenance?: string;
 };
 
 export type InhibitRule = {
@@ -143,6 +148,8 @@ export type AlertmanagerConfig = {
   inhibit_rules?: InhibitRule[];
   receivers?: Receiver[];
   mute_time_intervals?: MuteTimeInterval[];
+  /** { [name]: provenance } */
+  muteTimeProvenances?: Record<string, string>;
 };
 
 export type Matcher = {
@@ -300,6 +307,7 @@ export interface TimeInterval {
 export type MuteTimeInterval = {
   name: string;
   time_intervals: TimeInterval[];
+  provenance?: string;
 };
 
 export type AlertManagerDataSourceJsonData = DataSourceJsonData & { implementation?: AlertManagerImplementation };
diff --git a/public/app/types/unified-alerting-dto.ts b/public/app/types/unified-alerting-dto.ts
index fe3134e7644..617a10da100 100644
--- a/public/app/types/unified-alerting-dto.ts
+++ b/public/app/types/unified-alerting-dto.ts
@@ -182,6 +182,7 @@ export interface GrafanaRuleDefinition extends PostableGrafanaRuleDefinition {
   uid: string;
   namespace_uid: string;
   namespace_id: number;
+  provenance?: string;
 }
 
 export interface RulerGrafanaRuleDTO {