From cb8a5b2c96107f8b82d6c9c286968871d77d5dcd Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Fri, 7 Apr 2023 13:48:46 +0200
Subject: [PATCH] Alerting: Fix explore link in alert detail view (#66106)

---
 .../unified/GrafanaRuleQueryViewer.tsx        | 71 ++++++++++---------
 .../rule-viewer/RuleViewerVisualization.tsx   | 11 ++-
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx b/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx
index 0b2cfde30f2..03bb94aadde 100644
--- a/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx
+++ b/public/app/features/alerting/unified/GrafanaRuleQueryViewer.tsx
@@ -44,47 +44,51 @@ export function GrafanaRuleQueryViewer({
   const dsByUid = keyBy(Object.values(config.datasources), (ds) => ds.uid);
   const dataQueries = queries.filter((q) => !isExpressionQuery(q.model));
   const expressions = queries.filter((q) => isExpressionQuery(q.model));
+  const styles = useStyles2(getExpressionViewerStyles);
 
   return (
     <Stack gap={2} direction="column">
-      <Stack gap={2}>
-        {dataQueries.map(({ model, relativeTimeRange, refId, datasourceUid }, index) => {
-          const dataSource = dsByUid[datasourceUid];
-
-          return (
-            <QueryPreview
-              key={index}
-              refId={refId}
-              isAlertCondition={condition === refId}
-              model={model}
-              relativeTimeRange={relativeTimeRange}
-              evalTimeRange={evalTimeRanges[refId]}
-              dataSource={dataSource}
-              queryData={evalDataByQuery[refId]}
-              onEvalTimeRangeChange={(timeRange) => onTimeRangeChange(refId, timeRange)}
-            />
-          );
-        })}
-      </Stack>
-
-      <Stack gap={1}>
-        {expressions.map(({ model, relativeTimeRange, refId, datasourceUid }, index) => {
-          const dataSource = dsByUid[datasourceUid];
-
-          return (
-            isExpressionQuery(model) && (
-              <ExpressionPreview
+      <div className={styles.maxWidthContainer}>
+        <Stack gap={2}>
+          {dataQueries.map(({ model, relativeTimeRange, refId, datasourceUid }, index) => {
+            const dataSource = dsByUid[datasourceUid];
+
+            return (
+              <QueryPreview
                 key={index}
                 refId={refId}
                 isAlertCondition={condition === refId}
                 model={model}
+                relativeTimeRange={relativeTimeRange}
+                evalTimeRange={evalTimeRanges[refId]}
                 dataSource={dataSource}
-                evalData={evalDataByQuery[refId]}
+                queryData={evalDataByQuery[refId]}
+                onEvalTimeRangeChange={(timeRange) => onTimeRangeChange(refId, timeRange)}
               />
-            )
-          );
-        })}
-      </Stack>
+            );
+          })}
+        </Stack>
+      </div>
+      <div className={styles.maxWidthContainer}>
+        <Stack gap={1}>
+          {expressions.map(({ model, refId, datasourceUid }, index) => {
+            const dataSource = dsByUid[datasourceUid];
+
+            return (
+              isExpressionQuery(model) && (
+                <ExpressionPreview
+                  key={index}
+                  refId={refId}
+                  isAlertCondition={condition === refId}
+                  model={model}
+                  dataSource={dataSource}
+                  evalData={evalDataByQuery[refId]}
+                />
+              )
+            );
+          })}
+        </Stack>
+      </div>
     </Stack>
   );
 }
@@ -389,6 +393,9 @@ const getExpressionViewerStyles = (theme: GrafanaTheme2) => {
 
   return {
     ...common,
+    maxWidthContainer: css`
+      max-width: 100%;
+    `,
     container: css`
       padding: ${theme.spacing(1)};
       display: flex;
diff --git a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx
index c215696afdf..9c01e69ecc6 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/RuleViewerVisualization.tsx
@@ -141,12 +141,19 @@ export function RuleViewerVisualization({
 function createExploreLink(settings: DataSourceInstanceSettings, model: AlertDataQuery): string {
   const { name } = settings;
   const { refId, ...rest } = model;
-  const queryParams = { ...rest, datasource: name };
 
+  /**
+    In my testing I've found some alerts that don't have a data source embedded inside the model.
+   
+    At this moment in time it is unclear to me why some alert definitions not have a data source embedded in the model.
+    Ideally we'd resolve the datasource name to the proper datasource Ref "{ type: string, uid: string }" and pass that in to the model.
+   
+    I don't think that should happen here, the fact that the datasource ref is sometimes missing here is a symptom of another cause. (Gilles)
+   */
   return urlUtil.renderUrl(`${config.appSubUrl}/explore`, {
     left: JSON.stringify({
       datasource: name,
-      queries: [{ refId: 'A', ...queryParams }],
+      queries: [{ refId: 'A', ...rest }],
       range: { from: 'now-1h', to: 'now' },
     }),
   });