Logs: Add a feature toggle to run logs volume query automatically (#40579)

* Add a feature toggle to run logs volume query automatically

* Add missing default value

* Move feature toggle after moving auto-load button

* Remove unused import

packages/grafana-data/src/types/config.ts

@@ -53,6 +53,7 @@ export interface FeatureToggles {
   prometheusMonaco: boolean;
   newNavigation: boolean;
   fullRangeLogsVolume: boolean;
+  autoLoadFullRangeLogsVolume: boolean;
 }
 
 /**

packages/grafana-runtime/src/config.ts

@@ -69,6 +69,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
     prometheusMonaco: false,
     newNavigation: false,
     fullRangeLogsVolume: false,
+    autoLoadFullRangeLogsVolume: false,
   };
   licenseInfo: LicenseInfo = {} as LicenseInfo;
   rendererAvailable = false;

public/app/features/explore/LogsContainer.tsx

@@ -22,6 +22,7 @@ import { Logs } from './Logs';
 import { LogsCrossFadeTransition } from './utils/LogsCrossFadeTransition';
 import { LiveTailControls } from './useLiveTailControls';
 import { getFieldLinksForExplore } from './utils/links';
+import { config } from 'app/core/config';
 
 interface LogsContainerProps extends PropsFromRedux {
   width: number;
@@ -150,7 +151,11 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
               getFieldLinks={this.getFieldLinks}
               addResultsToCache={() => addResultsToCache(exploreId)}
               clearCache={() => clearCache(exploreId)}
-              loadingLogsVolumeAvailable={hasLogsVolumeSupport(datasourceInstance) && !!logsVolumeDataProvider}
+              loadingLogsVolumeAvailable={
+                hasLogsVolumeSupport(datasourceInstance) &&
+                !!logsVolumeDataProvider &&
+                !config.featureToggles.autoLoadFullRangeLogsVolume
+              }
               onClickLoadLogsVolume={() => loadLogsVolumeData(exploreId)}
             />
           </Collapse>

public/app/features/explore/SecondaryActions.test.tsx

@@ -3,6 +3,19 @@ import { noop } from 'lodash';
 import { shallow } from 'enzyme';
 import { SecondaryActions } from './SecondaryActions';
 
+import { config } from '@grafana/runtime';
+
+jest.mock('@grafana/runtime', () => ({
+  ...((jest.requireActual('@grafana/runtime') as unknown) as object),
+  config: {
+    ...((jest.requireActual('@grafana/runtime') as unknown) as any).config,
+    featureToggles: {
+      fullRangeLogsVolume: true,
+      autoLoadFullRangeLogsVolume: false,
+    },
+  },
+}));
+
 const addQueryRowButtonSelector = '[aria-label="Add row button"]';
 const richHistoryButtonSelector = '[aria-label="Rich history button"]';
 const queryInspectorButtonSelector = '[aria-label="Query inspector button"]';
@@ -66,4 +79,8 @@ describe('SecondaryActions', () => {
     wrapper.find(queryInspectorButtonSelector).simulate('click');
     expect(onClickQueryInspector).toBeCalled();
   });
+
+  it('does not render load logs volume button when auto loading is enabled', () => {
+    config.featureToggles.autoLoadFullRangeLogsVolume = true;
+  });
 });

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

@@ -33,6 +33,7 @@ import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import { configureStore } from '../../../store/configureStore';
 import { setTimeSrv } from '../../dashboard/services/TimeSrv';
 import Mock = jest.Mock;
+import { config } from '@grafana/runtime';
 
 jest.mock('@grafana/runtime', () => ({
   ...((jest.requireActual('@grafana/runtime') as unknown) as object),
@@ -40,6 +41,7 @@ jest.mock('@grafana/runtime', () => ({
     ...((jest.requireActual('@grafana/runtime') as unknown) as any).config,
     featureToggles: {
       fullRangeLogsVolume: true,
+      autoLoadFullRangeLogsVolume: false,
     },
   },
 }));
@@ -322,6 +324,7 @@ describe('reducer', () => {
   describe('logs volume', () => {
     let dispatch: ThunkDispatch,
       getState: () => StoreState,
+      unsubscribes: Function[],
       mockLogsVolumeDataProvider: () => Observable<DataQueryResponse>;
 
     beforeEach(() => {
@@ -352,11 +355,9 @@ describe('reducer', () => {
 
       dispatch = store.dispatch;
       getState = store.getState;
-    });
 
-    it('should cancel any unfinished logs volume queries', async () => {
       setupQueryResponse(getState());
-      let unsubscribes: Function[] = [];
+      unsubscribes = [];
 
       mockLogsVolumeDataProvider = () => {
         return ({
@@ -369,7 +370,9 @@ describe('reducer', () => {
           },
         } as unknown) as Observable<DataQueryResponse>;
       };
+    });
 
+    it('should cancel any unfinished logs volume queries', async () => {
       await dispatch(runQueries(ExploreId.left));
       // no subscriptions created yet
       expect(unsubscribes).toHaveLength(0);
@@ -391,5 +394,11 @@ describe('reducer', () => {
       expect(unsubscribes[0]).toBeCalled();
       expect(unsubscribes[1]).not.toBeCalled();
     });
+
+    it('should load logs volume after running the query', async () => {
+      config.featureToggles.autoLoadFullRangeLogsVolume = true;
+      await dispatch(runQueries(ExploreId.left));
+      expect(unsubscribes).toHaveLength(1);
+    });
   });
 });

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

@@ -485,6 +485,9 @@ export const runQueries = (
         const { logsVolumeData, absoluteRange } = getState().explore[exploreId]!;
         if (!canReuseLogsVolumeData(logsVolumeData, queries, absoluteRange)) {
           dispatch(cleanLogsVolumeAction({ exploreId }));
+          if (config.featureToggles.autoLoadFullRangeLogsVolume) {
+            dispatch(loadLogsVolumeData(exploreId));
+          }
         }
       } else {
         dispatch(