From 70efaa55821501e2e32c975df969fd820847204c Mon Sep 17 00:00:00 2001
From: Marcus Andersson <marcus.andersson@grafana.com>
Date: Wed, 26 May 2021 10:07:20 +0200
Subject: [PATCH] Alerting: making sure we use the updated queries when
 querying for data. (#34631)

---
 .../components/rule-editor/QueryEditor.tsx    | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
index bd480ca8f74..dbbbbd686f7 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
@@ -34,11 +34,13 @@ interface State {
 }
 export class QueryEditor extends PureComponent<Props, State> {
   private runner: AlertingQueryRunner;
+  private queries: GrafanaQuery[];
 
   constructor(props: Props) {
     super(props);
     this.state = { panelDataByRefId: {} };
     this.runner = new AlertingQueryRunner();
+    this.queries = props.value ?? [];
   }
 
   componentDidMount() {
@@ -52,29 +54,34 @@ export class QueryEditor extends PureComponent<Props, State> {
   }
 
   onRunQueries = () => {
-    const { value = [] } = this.props;
-    this.runner.run(value);
+    const { queries } = this;
+    this.runner.run(queries);
   };
 
   onCancelQueries = () => {
     this.runner.cancel();
   };
 
+  onChangeQueries = (queries: GrafanaQuery[]) => {
+    this.queries = queries;
+    this.props.onChange(queries);
+  };
+
   onDuplicateQuery = (query: GrafanaQuery) => {
-    const { onChange, value = [] } = this.props;
-    onChange(addQuery(value, query));
+    const { queries } = this;
+    this.onChangeQueries(addQuery(queries, query));
   };
 
   onNewAlertingQuery = () => {
-    const { onChange, value = [] } = this.props;
+    const { queries } = this;
     const defaultDataSource = getDatasourceSrv().getInstanceSettings('default');
 
     if (!defaultDataSource) {
       return;
     }
 
-    onChange(
-      addQuery(value, {
+    this.onChangeQueries(
+      addQuery(queries, {
         datasourceUid: defaultDataSource.uid,
         model: {
           refId: '',
@@ -85,10 +92,10 @@ export class QueryEditor extends PureComponent<Props, State> {
   };
 
   onNewExpressionQuery = () => {
-    const { onChange, value = [] } = this.props;
+    const { queries } = this;
 
-    onChange(
-      addQuery(value, {
+    this.onChangeQueries(
+      addQuery(queries, {
         datasourceUid: ExpressionDatasourceUID,
         model: expressionDatasource.newQuery({
           type: ExpressionQueryType.classic,
@@ -166,7 +173,7 @@ export class QueryEditor extends PureComponent<Props, State> {
         <QueryRows
           data={panelDataByRefId}
           queries={value}
-          onQueriesChange={this.props.onChange}
+          onQueriesChange={this.onChangeQueries}
           onDuplicateQuery={this.onDuplicateQuery}
           onRunQueries={this.onRunQueries}
         />