From 40f410562a4d445b69564eb47f701b5c85520299 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Mon, 28 Jan 2019 11:45:15 +0100 Subject: [PATCH 1/2] Fixed reinitialise of Explore --- public/app/core/actions/location.ts | 8 ++++-- public/app/core/reducers/location.ts | 8 +++--- .../app/features/explore/state/actionTypes.ts | 6 +++-- public/app/features/explore/state/reducers.ts | 25 +++++++++---------- 4 files changed, 25 insertions(+), 22 deletions(-) diff --git a/public/app/core/actions/location.ts b/public/app/core/actions/location.ts index 6f7ac67363e..8669788fa16 100644 --- a/public/app/core/actions/location.ts +++ b/public/app/core/actions/location.ts @@ -1,13 +1,17 @@ import { LocationUpdate } from 'app/types'; +export enum CoreActionTypes { + UpdateLocation = 'UPDATE_LOCATION', +} + export type Action = UpdateLocationAction; export interface UpdateLocationAction { - type: 'UPDATE_LOCATION'; + type: CoreActionTypes.UpdateLocation; payload: LocationUpdate; } export const updateLocation = (location: LocationUpdate): UpdateLocationAction => ({ - type: 'UPDATE_LOCATION', + type: CoreActionTypes.UpdateLocation, payload: location, }); diff --git a/public/app/core/reducers/location.ts b/public/app/core/reducers/location.ts index a42bd813782..6b39710dcca 100644 --- a/public/app/core/reducers/location.ts +++ b/public/app/core/reducers/location.ts @@ -1,4 +1,4 @@ -import { Action } from 'app/core/actions/location'; +import { Action, CoreActionTypes } from 'app/core/actions/location'; import { LocationState } from 'app/types'; import { renderUrl } from 'app/core/utils/url'; import _ from 'lodash'; @@ -12,7 +12,7 @@ export const initialState: LocationState = { export const locationReducer = (state = initialState, action: Action): LocationState => { switch (action.type) { - case 'UPDATE_LOCATION': { + case CoreActionTypes.UpdateLocation: { const { path, routeParams } = action.payload; let query = action.payload.query || state.query; @@ -24,9 +24,7 @@ export const locationReducer = (state = initialState, action: Action): LocationS return { url: renderUrl(path || state.path, query), path: path || state.path, - query: { - ...query, - }, + query: { ...query }, routeParams: routeParams || state.routeParams, }; } diff --git a/public/app/features/explore/state/actionTypes.ts b/public/app/features/explore/state/actionTypes.ts index 4e1d658f072..219e3fb6fc9 100644 --- a/public/app/features/explore/state/actionTypes.ts +++ b/public/app/features/explore/state/actionTypes.ts @@ -1,6 +1,6 @@ // Types import { Emitter } from 'app/core/core'; -import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem } from '@grafana/ui/src/types'; +import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem } from '@grafana/ui/src/types'; import { ExploreId, ExploreItemState, @@ -9,6 +9,7 @@ import { ResultType, QueryTransaction, } from 'app/types/explore'; +import { UpdateLocationAction } from 'app/core/actions/location'; export enum ActionTypes { AddQueryRow = 'explore/ADD_QUERY_ROW', @@ -297,4 +298,5 @@ export type Action = | SplitOpenAction | ToggleGraphAction | ToggleLogsAction - | ToggleTableAction; + | ToggleTableAction + | UpdateLocationAction; diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts index 8885f972d06..ccad9392c06 100644 --- a/public/app/features/explore/state/reducers.ts +++ b/public/app/features/explore/state/reducers.ts @@ -8,6 +8,7 @@ import { ExploreItemState, ExploreState, QueryTransaction } from 'app/types/expl import { DataQuery } from '@grafana/ui/src/types'; import { Action, ActionTypes } from './actionTypes'; +import { CoreActionTypes } from 'app/core/actions/location'; export const DEFAULT_RANGE = { from: 'now-6h', @@ -428,25 +429,23 @@ export const itemReducer = (state, action: Action): ExploreItemState => { export const exploreReducer = (state = initialExploreState, action: Action): ExploreState => { switch (action.type) { case ActionTypes.SplitClose: { - return { - ...state, - split: false, - }; + return { ...state, split: false }; } case ActionTypes.SplitOpen: { - return { - ...state, - split: true, - right: action.payload.itemState, - }; + return { ...state, split: true, right: action.payload.itemState }; } case ActionTypes.InitializeExploreSplit: { - return { - ...state, - split: true, - }; + return { ...state, split: true }; + } + + case CoreActionTypes.UpdateLocation: { + if (action.payload.path && action.payload.path !== '/explore') { + return initialExploreState; + } + + return state; } } From 6b0400eed2af71b708fa992b455c5a164036fefc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Mon, 28 Jan 2019 13:27:56 +0100 Subject: [PATCH 2/2] Firing off an action instead of listening to location changes --- public/app/features/explore/Wrapper.tsx | 8 +++++++- public/app/features/explore/state/actionTypes.ts | 9 +++++++-- public/app/features/explore/state/actions.ts | 12 ++++++++++-- public/app/features/explore/state/reducers.ts | 9 ++------- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx index 770b6bd6588..aca2e6d8cbd 100644 --- a/public/app/features/explore/Wrapper.tsx +++ b/public/app/features/explore/Wrapper.tsx @@ -7,7 +7,7 @@ import { StoreState } from 'app/types'; import { ExploreId, ExploreUrlState } from 'app/types/explore'; import { parseUrlState } from 'app/core/utils/explore'; -import { initializeExploreSplit } from './state/actions'; +import { initializeExploreSplit, resetExplore } from './state/actions'; import ErrorBoundary from './ErrorBoundary'; import Explore from './Explore'; import { CustomScrollbar } from '@grafana/ui'; @@ -16,6 +16,7 @@ interface WrapperProps { initializeExploreSplit: typeof initializeExploreSplit; split: boolean; updateLocation: typeof updateLocation; + resetExplore: typeof resetExplore; urlStates: { [key: string]: string }; } @@ -42,6 +43,10 @@ export class Wrapper extends Component { } } + componentWillUnmount() { + this.props.resetExplore(); + } + render() { const { split } = this.props; const { leftState, rightState } = this.urlStates; @@ -74,6 +79,7 @@ const mapStateToProps = (state: StoreState) => { const mapDispatchToProps = { initializeExploreSplit, updateLocation, + resetExplore, }; export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Wrapper)); diff --git a/public/app/features/explore/state/actionTypes.ts b/public/app/features/explore/state/actionTypes.ts index 219e3fb6fc9..21918e1c013 100644 --- a/public/app/features/explore/state/actionTypes.ts +++ b/public/app/features/explore/state/actionTypes.ts @@ -9,7 +9,6 @@ import { ResultType, QueryTransaction, } from 'app/types/explore'; -import { UpdateLocationAction } from 'app/core/actions/location'; export enum ActionTypes { AddQueryRow = 'explore/ADD_QUERY_ROW', @@ -42,6 +41,7 @@ export enum ActionTypes { ToggleGraph = 'explore/TOGGLE_GRAPH', ToggleLogs = 'explore/TOGGLE_LOGS', ToggleTable = 'explore/TOGGLE_TABLE', + ResetExplore = 'explore/RESET_EXPLORE', } export interface AddQueryRowAction { @@ -271,6 +271,11 @@ export interface ToggleLogsAction { }; } +export interface ResetExploreAction { + type: ActionTypes.ResetExplore; + payload: {}; +} + export type Action = | AddQueryRowAction | ChangeQueryAction @@ -299,4 +304,4 @@ export type Action = | ToggleGraphAction | ToggleLogsAction | ToggleTableAction - | UpdateLocationAction; + | ResetExploreAction; diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index d4c42ffa9c7..f09612322ae 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -21,7 +21,7 @@ import { updateLocation } from 'app/core/actions'; // Types import { StoreState } from 'app/types'; -import { DataQuery, DataSourceSelectItem, QueryHint } from '@grafana/ui/src/types'; +import { DataQuery, DataSourceSelectItem, QueryHint } from '@grafana/ui/src/types'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { ExploreId, @@ -48,7 +48,6 @@ import { ScanStopAction, } from './actionTypes'; - type ThunkResult = ThunkAction; /** @@ -766,3 +765,12 @@ export function toggleTable(exploreId: ExploreId): ThunkResult { } }; } + +/** + * Resets state for explore. + */ +export function resetExplore(): ThunkResult { + return dispatch => { + dispatch({ type: ActionTypes.ResetExplore, payload: {} }); + }; +} diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts index ccad9392c06..7a240350cb6 100644 --- a/public/app/features/explore/state/reducers.ts +++ b/public/app/features/explore/state/reducers.ts @@ -8,7 +8,6 @@ import { ExploreItemState, ExploreState, QueryTransaction } from 'app/types/expl import { DataQuery } from '@grafana/ui/src/types'; import { Action, ActionTypes } from './actionTypes'; -import { CoreActionTypes } from 'app/core/actions/location'; export const DEFAULT_RANGE = { from: 'now-6h', @@ -440,12 +439,8 @@ export const exploreReducer = (state = initialExploreState, action: Action): Exp return { ...state, split: true }; } - case CoreActionTypes.UpdateLocation: { - if (action.payload.path && action.payload.path !== '/explore') { - return initialExploreState; - } - - return state; + case ActionTypes.ResetExplore: { + return initialExploreState; } }