From a7ae7cd93568bb30fa191a6ce9fdec1225e5bba1 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:24:21 +0100
Subject: [PATCH] [v10.2.x] Alerting: Fix Graphite subqueries (#80816)

Alerting: Fix Graphite subqueries (#80744)

(cherry picked from commit 8a4bd85efdd4101c481244b62d70e03e315d820c)

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
---
 .../unified/components/rule-editor/QueryWrapper.tsx         | 5 ++++-
 public/app/plugins/datasource/graphite/state/context.tsx    | 6 +++---
 public/app/plugins/datasource/graphite/types.ts             | 1 +
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
index a7ef27be7e0..54809662602 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
@@ -140,6 +140,9 @@ export const QueryWrapper = ({
   }
 
   const showVizualisation = data.state !== LoadingState.NotStarted;
+  // ⚠️ the query editors want the entire array of queries passed as "DataQuery" NOT "AlertQuery"
+  // TypeScript isn't complaining here because the interfaces just happen to be compatible
+  const editorQueries = cloneDeep(queries.map((query) => query.model));
 
   return (
     <Stack direction="column" gap={0.5}>
@@ -159,7 +162,7 @@ export const QueryWrapper = ({
           onRemoveQuery={onRemoveQuery}
           onAddQuery={() => onDuplicateQuery(cloneDeep(query))}
           onRunQuery={onRunQueries}
-          queries={queries}
+          queries={editorQueries}
           renderHeaderExtras={() => <HeaderExtras query={query} index={index} error={error} />}
           app={CoreApp.UnifiedAlerting}
           hideDisableQuery={true}
diff --git a/public/app/plugins/datasource/graphite/state/context.tsx b/public/app/plugins/datasource/graphite/state/context.tsx
index cac739a1251..ba48d3a759d 100644
--- a/public/app/plugins/datasource/graphite/state/context.tsx
+++ b/public/app/plugins/datasource/graphite/state/context.tsx
@@ -76,7 +76,7 @@ export const GraphiteQueryEditorContext = ({
     () => {
       if (needsRefresh && state) {
         setNeedsRefresh(false);
-        onChange({ ...query, target: state.target.target });
+        onChange({ ...query, target: state.target.target, targetFull: state.target.targetFull });
         onRunQuery();
       }
     },
@@ -92,8 +92,8 @@ export const GraphiteQueryEditorContext = ({
         datasource: datasource,
         range: range,
         templateSrv: getTemplateSrv(),
-        // list of queries is passed only when the editor is in Dashboards. This is to allow interpolation
-        // of sub-queries which are stored in "targetFull" property used by alerting in the backend.
+        // list of queries is passed only when the editor is in Dashboards or Alerting. This is to allow interpolation
+        // of sub-queries which are stored in "targetFull" property. This is used by alerting in the backend.
         queries: queries || [],
         refresh: () => {
           // do not run onChange/onRunQuery straight away to ensure the internal state gets updated first
diff --git a/public/app/plugins/datasource/graphite/types.ts b/public/app/plugins/datasource/graphite/types.ts
index 0bdd7039ebc..fb2bbe63639 100644
--- a/public/app/plugins/datasource/graphite/types.ts
+++ b/public/app/plugins/datasource/graphite/types.ts
@@ -14,6 +14,7 @@ export interface GraphiteQuery extends DataQuery {
   queryType?: string;
   textEditor?: boolean;
   target?: string;
+  targetFull?: string;
   tags?: string[];
   fromAnnotations?: boolean;
 }