Merge pull request #15090 from grafana/hugoh/bug-explore-cant-go-from-dashboard-to-explore

Fixed reinitialise of Explore

public/app/core/actions/location.ts

 import { LocationUpdate } from 'app/types';
 import { LocationUpdate } from 'app/types';
 
 
+export enum CoreActionTypes {
+  UpdateLocation = 'UPDATE_LOCATION',
+}
+
 export type Action = UpdateLocationAction;
 export type Action = UpdateLocationAction;
 
 
 export interface UpdateLocationAction {
 export interface UpdateLocationAction {
-  type: 'UPDATE_LOCATION';
+  type: CoreActionTypes.UpdateLocation;
   payload: LocationUpdate;
   payload: LocationUpdate;
 }
 }
 
 
 export const updateLocation = (location: LocationUpdate): UpdateLocationAction => ({
 export const updateLocation = (location: LocationUpdate): UpdateLocationAction => ({
-  type: 'UPDATE_LOCATION',
+  type: CoreActionTypes.UpdateLocation,
   payload: location,
   payload: location,
 });
 });

public/app/core/reducers/location.ts

-import { Action } from 'app/core/actions/location';
+import { Action, CoreActionTypes } from 'app/core/actions/location';
 import { LocationState } from 'app/types';
 import { LocationState } from 'app/types';
 import { renderUrl } from 'app/core/utils/url';
 import { renderUrl } from 'app/core/utils/url';
 import _ from 'lodash';
 import _ from 'lodash';
@@ -12,7 +12,7 @@ export const initialState: LocationState = {
 
 
 export const locationReducer = (state = initialState, action: Action): LocationState => {
 export const locationReducer = (state = initialState, action: Action): LocationState => {
   switch (action.type) {
   switch (action.type) {
-    case 'UPDATE_LOCATION': {
+    case CoreActionTypes.UpdateLocation: {
       const { path, routeParams } = action.payload;
       const { path, routeParams } = action.payload;
       let query = action.payload.query || state.query;
       let query = action.payload.query || state.query;
 
 
@@ -24,9 +24,7 @@ export const locationReducer = (state = initialState, action: Action): LocationS
       return {
       return {
         url: renderUrl(path || state.path, query),
         url: renderUrl(path || state.path, query),
         path: path || state.path,
         path: path || state.path,
-        query: {
-          ...query,
-        },
+        query: { ...query },
         routeParams: routeParams || state.routeParams,
         routeParams: routeParams || state.routeParams,
       };
       };
     }
     }

public/app/features/explore/Wrapper.tsx

@@ -7,7 +7,7 @@ import { StoreState } from 'app/types';
 import { ExploreId, ExploreUrlState } from 'app/types/explore';
 import { ExploreId, ExploreUrlState } from 'app/types/explore';
 import { parseUrlState } from 'app/core/utils/explore';
 import { parseUrlState } from 'app/core/utils/explore';
 
 
-import { initializeExploreSplit } from './state/actions';
+import { initializeExploreSplit, resetExplore } from './state/actions';
 import ErrorBoundary from './ErrorBoundary';
 import ErrorBoundary from './ErrorBoundary';
 import Explore from './Explore';
 import Explore from './Explore';
 import { CustomScrollbar } from '@grafana/ui';
 import { CustomScrollbar } from '@grafana/ui';
@@ -16,6 +16,7 @@ interface WrapperProps {
   initializeExploreSplit: typeof initializeExploreSplit;
   initializeExploreSplit: typeof initializeExploreSplit;
   split: boolean;
   split: boolean;
   updateLocation: typeof updateLocation;
   updateLocation: typeof updateLocation;
+  resetExplore: typeof resetExplore;
   urlStates: { [key: string]: string };
   urlStates: { [key: string]: string };
 }
 }
 
 
@@ -42,6 +43,10 @@ export class Wrapper extends Component<WrapperProps> {
     }
     }
   }
   }
 
 
+  componentWillUnmount() {
+    this.props.resetExplore();
+  }
+
   render() {
   render() {
     const { split } = this.props;
     const { split } = this.props;
     const { leftState, rightState } = this.urlStates;
     const { leftState, rightState } = this.urlStates;
@@ -74,6 +79,7 @@ const mapStateToProps = (state: StoreState) => {
 const mapDispatchToProps = {
 const mapDispatchToProps = {
   initializeExploreSplit,
   initializeExploreSplit,
   updateLocation,
   updateLocation,
+  resetExplore,
 };
 };
 
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Wrapper));
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Wrapper));

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

@@ -41,6 +41,7 @@ export enum ActionTypes {
   ToggleGraph = 'explore/TOGGLE_GRAPH',
   ToggleGraph = 'explore/TOGGLE_GRAPH',
   ToggleLogs = 'explore/TOGGLE_LOGS',
   ToggleLogs = 'explore/TOGGLE_LOGS',
   ToggleTable = 'explore/TOGGLE_TABLE',
   ToggleTable = 'explore/TOGGLE_TABLE',
+  ResetExplore = 'explore/RESET_EXPLORE',
 }
 }
 
 
 export interface AddQueryRowAction {
 export interface AddQueryRowAction {
@@ -270,6 +271,11 @@ export interface ToggleLogsAction {
   };
   };
 }
 }
 
 
+export interface ResetExploreAction {
+  type: ActionTypes.ResetExplore;
+  payload: {};
+}
+
 export type Action =
 export type Action =
   | AddQueryRowAction
   | AddQueryRowAction
   | ChangeQueryAction
   | ChangeQueryAction
@@ -297,4 +303,5 @@ export type Action =
   | SplitOpenAction
   | SplitOpenAction
   | ToggleGraphAction
   | ToggleGraphAction
   | ToggleLogsAction
   | ToggleLogsAction
-  | ToggleTableAction;
+  | ToggleTableAction
+  | ResetExploreAction;

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

@@ -48,7 +48,6 @@ import {
   ScanStopAction,
   ScanStopAction,
 } from './actionTypes';
 } from './actionTypes';
 
 
-
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, ThunkableAction>;
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, ThunkableAction>;
 
 
 /**
 /**
@@ -766,3 +765,12 @@ export function toggleTable(exploreId: ExploreId): ThunkResult<void> {
     }
     }
   };
   };
 }
 }
+
+/**
+ * Resets state for explore.
+ */
+export function resetExplore(): ThunkResult<void> {
+  return dispatch => {
+    dispatch({ type: ActionTypes.ResetExplore, payload: {} });
+  };
+}

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

@@ -428,25 +428,19 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
 export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
 export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => {
   switch (action.type) {
   switch (action.type) {
     case ActionTypes.SplitClose: {
     case ActionTypes.SplitClose: {
-      return {
-        ...state,
-        split: false,
-      };
+      return { ...state, split: false };
     }
     }
 
 
     case ActionTypes.SplitOpen: {
     case ActionTypes.SplitOpen: {
-      return {
-        ...state,
-        split: true,
-        right: action.payload.itemState,
-      };
+      return { ...state, split: true, right: action.payload.itemState };
     }
     }
 
 
     case ActionTypes.InitializeExploreSplit: {
     case ActionTypes.InitializeExploreSplit: {
-      return {
-        ...state,
-        split: true,
-      };
+      return { ...state, split: true };
+    }
+
+    case ActionTypes.ResetExplore: {
+      return initialExploreState;
     }
     }
   }
   }