From 6a1b8693e0351d776f498b1c9655a106f39574eb Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Mon, 20 Jun 2022 15:37:22 +0200
Subject: [PATCH] Alerting: Fix alert rule page crashing when datasource
 contained URL unsafe characters (#51105)

Any Prometheus datasources that contained URL unsafe characters would crash the application since it fails to find the datasource from the Grafana bootData.
---
 public/app/features/alerting/unified/RuleViewer.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/app/features/alerting/unified/RuleViewer.tsx b/public/app/features/alerting/unified/RuleViewer.tsx
index 6d46a2932cc..92893842427 100644
--- a/public/app/features/alerting/unified/RuleViewer.tsx
+++ b/public/app/features/alerting/unified/RuleViewer.tsx
@@ -45,9 +45,10 @@ const pageTitle = 'Alerting / View rule';
 
 export function RuleViewer({ match }: RuleViewerProps) {
   const styles = useStyles2(getStyles);
-  const { id, sourceName } = match.params;
+  const { id } = match.params;
   const identifier = ruleId.tryParse(id, true);
-  const { loading, error, result: rule } = useCombinedRule(identifier, sourceName);
+
+  const { loading, error, result: rule } = useCombinedRule(identifier, identifier?.ruleSourceName);
   const runner = useMemo(() => new AlertingQueryRunner(), []);
   const data = useObservable(runner.get());
   const queries2 = useMemo(() => alertRuleToQueries(rule), [rule]);
@@ -86,7 +87,7 @@ export function RuleViewer({ match }: RuleViewerProps) {
     );
   }, []);
 
-  if (!sourceName) {
+  if (!identifier?.ruleSourceName) {
     return (
       <RuleViewerLayout title={pageTitle}>
         <Alert title={errorTitle}>
@@ -96,7 +97,7 @@ export function RuleViewer({ match }: RuleViewerProps) {
     );
   }
 
-  const rulesSource = getRulesSourceByName(sourceName);
+  const rulesSource = getRulesSourceByName(identifier.ruleSourceName);
 
   if (loading) {
     return (