[v10.0.x] Explore: Clean up query subscriptions when a query is canceled (#70516)

Explore: Clean up query subscriptions when a query is canceled (#70235)

* Ensure clean up functions are called when query subscriptions are canceled

* Fix unit tests

(cherry picked from commit cb2cc591da)

public/app/features/explore/state/query.test.ts

@@ -4,6 +4,7 @@ import { thunkTester } from 'test/core/thunk/thunkTester';
 import { assertIsDefined } from 'test/helpers/asserts';
 
 import {
+  DataQueryRequest,
   DataQueryResponse,
   DataSourceApi,
   DataSourceJsonData,
@@ -26,32 +27,33 @@ import { supplementaryQueryTypes } from '../utils/supplementaryQueries';
 
 import { createDefaultInitialState } from './helpers';
 import { saveCorrelationsAction } from './main';
+import * as actions from './query';
 import {
+  addQueryRow,
   addQueryRowAction,
   addResultsToCache,
   cancelQueries,
   cancelQueriesAction,
+  changeQueries,
   cleanSupplementaryQueryAction,
+  cleanSupplementaryQueryDataProviderAction,
   clearCache,
+  clearLogs,
   importQueries,
+  QueryEndedPayload,
   queryReducer,
+  queryStreamUpdatedAction,
   runQueries,
   scanStartAction,
   scanStopAction,
   setSupplementaryQueryEnabled,
-  addQueryRow,
-  cleanSupplementaryQueryDataProviderAction,
-  clearLogs,
-  queryStreamUpdatedAction,
-  QueryEndedPayload,
-  changeQueries,
 } from './query';
-import * as actions from './query';
 import { makeExplorePaneState } from './utils';
 
 const { testRange, defaultInitialState } = createDefaultInitialState();
 
 const exploreId = ExploreId.left;
+const cleanUpMock = jest.fn();
 const datasources: DataSourceApi[] = [
   {
     name: 'testDs',
@@ -745,6 +747,35 @@ describe('reducer', () => {
     });
   });
 
+  describe('when data source does not support log volume supplementary query', () => {
+    it('cleans up query subscription correctly (regression #70049)', async () => {
+      const store: { dispatch: ThunkDispatch; getState: () => StoreState } = configureStore({
+        ...defaultInitialState,
+        explore: {
+          left: {
+            ...defaultInitialState.explore.left,
+            datasourceInstance: {
+              getRef: jest.fn(),
+              meta: {
+                id: 'something',
+              },
+              query(request: DataQueryRequest<DataQuery>): Promise<DataQueryResponse> | Observable<DataQueryResponse> {
+                return new Observable(() => cleanUpMock);
+              },
+            },
+          },
+        },
+      } as unknown as Partial<StoreState>);
+
+      const dispatch = store.dispatch;
+
+      cleanUpMock.mockClear();
+      await dispatch(runQueries(ExploreId.left));
+      await dispatch(cancelQueries(ExploreId.left));
+      expect(cleanUpMock).toBeCalledTimes(1);
+    });
+  });
+
   describe('supplementary queries', () => {
     let dispatch: ThunkDispatch,
       getState: () => StoreState,

public/app/features/explore/utils/supplementaryQueries.ts

@@ -73,7 +73,7 @@ const createFallbackLogVolumeProvider = (
   datasourceName: string
 ): Observable<DataQueryResponse> => {
   return new Observable<DataQueryResponse>((observer) => {
-    explorePanelData.subscribe((exploreData) => {
+    return explorePanelData.subscribe((exploreData) => {
       if (
         exploreData.logsResult &&
         exploreData.logsResult.rows &&