Explore: Update time range before running queries (#17349)

This makes sure that refresh/update/run query are parsing a
relative time range to get proper epoch time range before
running queries.

Fixes #17322

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

@@ -230,6 +230,7 @@ export interface LoadExploreDataSourcesPayload {
 
 export interface RunQueriesPayload {
   exploreId: ExploreId;
+  range: TimeRange;
 }
 
 export interface ResetQueryErrorPayload {

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

@@ -521,6 +521,7 @@ export function runQueries(exploreId: ExploreId, ignoreUIState = false, replaceU
       datasourceError,
       containerWidth,
       mode,
+      range,
     } = getState().explore[exploreId];
 
     if (datasourceError) {
@@ -538,7 +539,10 @@ export function runQueries(exploreId: ExploreId, ignoreUIState = false, replaceU
     // but we're using the datasource interval limit for now
     const interval = datasourceInstance.interval;
 
-    dispatch(runQueriesAction({ exploreId }));
+    const timeZone = getTimeZone(getState().user);
+    const updatedRange = getTimeRange(timeZone, range.raw);
+
+    dispatch(runQueriesAction({ exploreId, range: updatedRange }));
     // Keep table queries first since they need to return quickly
     if ((ignoreUIState || showingTable) && mode === ExploreMode.Metrics) {
       dispatch(

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

@@ -4,6 +4,7 @@ import {
   exploreReducer,
   makeInitialUpdateState,
   initialExploreState,
+  DEFAULT_RANGE,
 } from './reducers';
 import {
   ExploreId,
@@ -31,7 +32,7 @@ import { ActionOf } from 'app/core/redux/actionCreatorFactory';
 import { updateLocation } from 'app/core/actions/location';
 import { serializeStateToUrlParam } from 'app/core/utils/explore';
 import TableModel from 'app/core/table_model';
-import { DataSourceApi, DataQuery, LogsModel, LogsDedupStrategy } from '@grafana/ui';
+import { DataSourceApi, DataQuery, LogsModel, LogsDedupStrategy, dateTime } from '@grafana/ui';
 
 describe('Explore item reducer', () => {
   describe('scanning', () => {
@@ -193,6 +194,7 @@ describe('Explore item reducer', () => {
       it('then it should set correct state', () => {
         const initalState: Partial<ExploreItemState> = {
           showingStartPage: true,
+          range: null,
         };
         const expectedState = {
           queryIntervals: {
@@ -200,11 +202,16 @@ describe('Explore item reducer', () => {
             intervalMs: 1000,
           },
           showingStartPage: false,
+          range: {
+            from: dateTime(),
+            to: dateTime(),
+            raw: DEFAULT_RANGE,
+          },
         };
 
         reducerTester()
           .givenReducer(itemReducer, initalState)
-          .whenActionIsDispatched(runQueriesAction({ exploreId: ExploreId.left }))
+          .whenActionIsDispatched(runQueriesAction({ exploreId: ExploreId.left, range: expectedState.range }))
           .thenStateShouldEqual(expectedState);
       });
     });

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

@@ -599,8 +599,9 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
   })
   .addMapper({
     filter: runQueriesAction,
-    mapper: (state): ExploreItemState => {
+    mapper: (state, action): ExploreItemState => {
-      const { range, datasourceInstance, containerWidth } = state;
+      const { range } = action.payload;
+      const { datasourceInstance, containerWidth } = state;
       let interval = '1s';
       if (datasourceInstance && datasourceInstance.interval) {
         interval = datasourceInstance.interval;
@@ -608,6 +609,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
       const queryIntervals = getIntervals(range, interval, containerWidth);
       return {
         ...state,
+        range,
         queryIntervals,
         showingStartPage: false,
       };