From 6531cd94c42330d96d0d652aca678b9a56576dae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Thu, 19 Oct 2023 19:31:23 +0200
Subject: [PATCH] Explore: Cancel previous queries when a new query is run
 (#76674)

* Cancel streaming queries before running new queries

* Cancel previous queries when a new query is run

* Remove redundant dependency

---------

Co-authored-by: Kristina Durivage <kristina.durivage@grafana.com>
---
 public/app/features/explore/state/query.test.ts | 10 ++++++++++
 public/app/features/explore/state/query.ts      | 15 +++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/public/app/features/explore/state/query.test.ts b/public/app/features/explore/state/query.test.ts
index 88426eade59..e9aca401bdd 100644
--- a/public/app/features/explore/state/query.test.ts
+++ b/public/app/features/explore/state/query.test.ts
@@ -242,6 +242,16 @@ describe('running queries', () => {
       cleanSupplementaryQueryAction({ exploreId, type: SupplementaryQueryType.LogsSample }),
     ]);
   });
+  it('should cancel running query when a new query is issued', async () => {
+    const initialState = {
+      ...makeExplorePaneState(),
+    };
+    const dispatchedActions = await thunkTester(initialState)
+      .givenThunk(runQueries)
+      .whenThunkIsDispatched({ exploreId });
+
+    expect(dispatchedActions).toContainEqual(cancelQueriesAction({ exploreId }));
+  });
 });
 
 describe('changeQueries', () => {
diff --git a/public/app/features/explore/state/query.ts b/public/app/features/explore/state/query.ts
index 4ada0940c71..846ff575ab1 100644
--- a/public/app/features/explore/state/query.ts
+++ b/public/app/features/explore/state/query.ts
@@ -497,6 +497,8 @@ interface RunQueriesOptions {
 export const runQueries = createAsyncThunk<void, RunQueriesOptions>(
   'explore/runQueries',
   async ({ exploreId, preserveCache }, { dispatch, getState }) => {
+    dispatch(cancelQueries(exploreId));
+
     dispatch(updateTime({ exploreId }));
 
     const correlations$ = getCorrelations(exploreId);
@@ -954,10 +956,15 @@ export const queryReducer = (state: ExploreItemState, action: AnyAction): Explor
 
     return {
       ...state,
-      queryResponse: {
-        ...state.queryResponse,
-        state: LoadingState.Done,
-      },
+      // mark existing request as done (may be incomplete)
+      ...(state.queryResponse
+        ? {
+            queryResponse: {
+              ...state.queryResponse,
+              state: LoadingState.Done,
+            },
+          }
+        : {}),
     };
   }