Explore: Fix timepicker when browsing back after switching datasource (#21454)

public/app/features/explore/Explore.tsx

@@ -31,6 +31,7 @@ import {
   DataSourceApi,
   DataSourceApi,
   PanelData,
   PanelData,
   RawTimeRange,
   RawTimeRange,
+  TimeRange,
   GraphSeriesXY,
   GraphSeriesXY,
   TimeZone,
   TimeZone,
   AbsoluteTimeRange,
   AbsoluteTimeRange,
@@ -51,6 +52,7 @@ import {
   DEFAULT_RANGE,
   DEFAULT_RANGE,
   DEFAULT_UI_STATE,
   DEFAULT_UI_STATE,
   getTimeRangeFromUrl,
   getTimeRangeFromUrl,
+  getTimeRange,
   lastUsedDatasourceKeyForOrgId,
   lastUsedDatasourceKeyForOrgId,
 } from 'app/core/utils/explore';
 } from 'app/core/utils/explore';
 import { Emitter } from 'app/core/utils/emitter';
 import { Emitter } from 'app/core/utils/emitter';
@@ -93,7 +95,7 @@ interface ExploreProps {
   queryKeys: string[];
   queryKeys: string[];
   initialDatasource: string;
   initialDatasource: string;
   initialQueries: DataQuery[];
   initialQueries: DataQuery[];
-  initialRange: RawTimeRange;
+  initialRange: TimeRange;
   mode: ExploreMode;
   mode: ExploreMode;
   initialUI: ExploreUIState;
   initialUI: ExploreUIState;
   isLive: boolean;
   isLive: boolean;
@@ -394,7 +396,9 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     {}) as ExploreUrlState;
     {}) as ExploreUrlState;
   const initialDatasource = datasource || store.get(lastUsedDatasourceKeyForOrgId(state.user.orgId));
   const initialDatasource = datasource || store.get(lastUsedDatasourceKeyForOrgId(state.user.orgId));
   const initialQueries: DataQuery[] = ensureQueriesMemoized(queries);
   const initialQueries: DataQuery[] = ensureQueriesMemoized(queries);
-  const initialRange = urlRange ? getTimeRangeFromUrlMemoized(urlRange, timeZone).raw : DEFAULT_RANGE;
+  const initialRange = urlRange
+    ? getTimeRangeFromUrlMemoized(urlRange, timeZone)
+    : getTimeRange(timeZone, DEFAULT_RANGE);
 
 
   let newMode: ExploreMode | undefined;
   let newMode: ExploreMode | undefined;
 
 

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

@@ -265,7 +265,7 @@ export function initializeExplore(
   exploreId: ExploreId,
   exploreId: ExploreId,
   datasourceName: string,
   datasourceName: string,
   queries: DataQuery[],
   queries: DataQuery[],
-  rawRange: RawTimeRange,
+  range: TimeRange,
   mode: ExploreMode,
   mode: ExploreMode,
   containerWidth: number,
   containerWidth: number,
   eventBridge: Emitter,
   eventBridge: Emitter,
@@ -273,8 +273,6 @@ export function initializeExplore(
   originPanelId: number
   originPanelId: number
 ): ThunkResult<void> {
 ): ThunkResult<void> {
   return async (dispatch, getState) => {
   return async (dispatch, getState) => {
-    const timeZone = getTimeZone(getState().user);
-    const range = getTimeRange(timeZone, rawRange);
     dispatch(loadExploreDatasourcesAndSetDatasource(exploreId, datasourceName));
     dispatch(loadExploreDatasourcesAndSetDatasource(exploreId, datasourceName));
     dispatch(
     dispatch(
       initializeExploreAction({
       initializeExploreAction({