From 6b98b05976fb837433370ff45d214b6889e1bc14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Mon, 4 Feb 2019 11:07:32 +0100 Subject: [PATCH] Removed modifiedQueries from state --- public/app/features/explore/QueryEditor.tsx | 11 ++---- public/app/features/explore/QueryRows.tsx | 9 +++-- public/app/features/explore/state/actions.ts | 18 ++++----- public/app/features/explore/state/reducers.ts | 39 ++++--------------- public/app/types/explore.ts | 8 +--- 5 files changed, 26 insertions(+), 59 deletions(-) diff --git a/public/app/features/explore/QueryEditor.tsx b/public/app/features/explore/QueryEditor.tsx index 083cd8a2e17..1d329f1c56e 100644 --- a/public/app/features/explore/QueryEditor.tsx +++ b/public/app/features/explore/QueryEditor.tsx @@ -14,7 +14,7 @@ interface QueryEditorProps { datasource: any; error?: string | JSX.Element; onExecuteQuery?: () => void; - onQueryChange?: (value: DataQuery, override?: boolean) => void; + onQueryChange?: (value: DataQuery) => void; initialQuery: DataQuery; exploreEvents: Emitter; range: RawTimeRange; @@ -40,20 +40,17 @@ export default class QueryEditor extends PureComponent { datasource, target, refresh: () => { - this.props.onQueryChange(target, false); + this.props.onQueryChange(target); this.props.onExecuteQuery(); }, events: exploreEvents, - panel: { - datasource, - targets: [target], - }, + panel: { datasource, targets: [target] }, dashboard: {}, }, }; this.component = loader.load(this.element, scopeProps, template); - this.props.onQueryChange(target, false); + this.props.onQueryChange(target); } componentWillUnmount() { diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx index f8bb6e5ce6b..d65c1283bd6 100644 --- a/public/app/features/explore/QueryRows.tsx +++ b/public/app/features/explore/QueryRows.tsx @@ -21,10 +21,11 @@ export default class QueryRows extends PureComponent { const { className = '', exploreEvents, exploreId, initialQueries } = this.props; return (
- {initialQueries.map((query, index) => ( - // TODO instead of relying on initialQueries, move to react key list in redux - - ))} + {initialQueries.map((query, index) => { + // using query.key will introduce infinite loop because QueryEditor#53 + const key = query.datasource ? `${query.datasource}-${index}` : query.key; + return ; + })}
); } diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index f32575edda5..8530e7678ad 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -84,9 +84,9 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun return async (dispatch, getState) => { const newDataSourceInstance = await getDatasourceSrv().get(datasource); const currentDataSourceInstance = getState().explore[exploreId].datasourceInstance; - const modifiedQueries = getState().explore[exploreId].modifiedQueries; + const queries = getState().explore[exploreId].initialQueries; - await dispatch(importQueries(exploreId, modifiedQueries, currentDataSourceInstance, newDataSourceInstance)); + await dispatch(importQueries(exploreId, queries, currentDataSourceInstance, newDataSourceInstance)); dispatch(updateDatasourceInstanceAction({ exploreId, datasourceInstance: newDataSourceInstance })); dispatch(loadDatasource(exploreId, newDataSourceInstance)); @@ -254,7 +254,7 @@ export function importQueries( } const nextQueries = importedQueries.map((q, i) => ({ - ...importedQueries[i], + ...q, ...generateEmptyQuery(i), })); @@ -474,7 +474,7 @@ export function runQueries(exploreId: ExploreId) { return (dispatch, getState) => { const { datasourceInstance, - modifiedQueries, + initialQueries, showingLogs, showingGraph, showingTable, @@ -483,7 +483,7 @@ export function runQueries(exploreId: ExploreId) { supportsTable, } = getState().explore[exploreId]; - if (!hasNonEmptyQuery(modifiedQueries)) { + if (!hasNonEmptyQuery(initialQueries)) { dispatch(runQueriesEmptyAction({ exploreId })); dispatch(stateSave()); // Remember to saves to state and update location return; @@ -547,7 +547,7 @@ function runQueriesForType( const { datasourceInstance, eventBridge, - modifiedQueries: queries, + initialQueries: queries, queryIntervals, range, scanning, @@ -632,7 +632,7 @@ export function splitOpen(): ThunkResult { const itemState = { ...leftState, queryTransactions: [], - initialQueries: leftState.modifiedQueries.slice(), + initialQueries: leftState.initialQueries.slice(), }; dispatch(splitOpenAction({ itemState })); dispatch(stateSave()); @@ -649,14 +649,14 @@ export function stateSave() { const urlStates: { [index: string]: string } = {}; const leftUrlState: ExploreUrlState = { datasource: left.datasourceInstance.name, - queries: left.modifiedQueries.map(clearQueryKeys), + queries: left.initialQueries.map(clearQueryKeys), range: left.range, }; urlStates.left = serializeStateToUrlParam(leftUrlState, true); if (split) { const rightUrlState: ExploreUrlState = { datasource: right.datasourceInstance.name, - queries: right.modifiedQueries.map(clearQueryKeys), + queries: right.initialQueries.map(clearQueryKeys), range: right.range, }; urlStates.right = serializeStateToUrlParam(rightUrlState, true); diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts index fc9be0c28b8..9343cf0ec57 100644 --- a/public/app/features/explore/state/reducers.ts +++ b/public/app/features/explore/state/reducers.ts @@ -61,7 +61,6 @@ export const makeExploreItemState = (): ExploreItemState => ({ history: [], initialQueries: [], initialized: false, - modifiedQueries: [], queryTransactions: [], queryIntervals: { interval: '15s', intervalMs: DEFAULT_GRAPH_INTERVAL }, range: DEFAULT_RANGE, @@ -91,16 +90,9 @@ export const itemReducer = reducerFactory({} as ExploreItemSta .addMapper({ filter: addQueryRowAction, mapper: (state, action): ExploreItemState => { - const { initialQueries, modifiedQueries, queryTransactions } = state; + const { initialQueries, queryTransactions } = state; const { index, query } = action.payload; - // Add new query row after given index, keep modifications of existing rows - const nextModifiedQueries = [ - ...modifiedQueries.slice(0, index + 1), - { ...query }, - ...initialQueries.slice(index + 1), - ]; - // Add to initialQueries, which will cause a new row to be rendered const nextQueries = [...initialQueries.slice(0, index + 1), { ...query }, ...initialQueries.slice(index + 1)]; @@ -116,7 +108,6 @@ export const itemReducer = reducerFactory({} as ExploreItemSta ...state, initialQueries: nextQueries, logsHighlighterExpressions: undefined, - modifiedQueries: nextModifiedQueries, queryTransactions: nextQueryTransactions, }; }, @@ -125,20 +116,12 @@ export const itemReducer = reducerFactory({} as ExploreItemSta filter: changeQueryAction, mapper: (state, action): ExploreItemState => { const { initialQueries, queryTransactions } = state; - let { modifiedQueries } = state; - const { query, index, override } = action.payload; - - // Fast path: only change modifiedQueries to not trigger an update - modifiedQueries[index] = query; - if (!override) { - return { ...state, modifiedQueries }; - } + const { query, index } = action.payload; // Override path: queries are completely reset const nextQuery: DataQuery = { ...query, ...generateEmptyQuery(index) }; const nextQueries = [...initialQueries]; nextQueries[index] = nextQuery; - modifiedQueries = [...nextQueries]; // Discard ongoing transaction related to row query const nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index); @@ -146,7 +129,6 @@ export const itemReducer = reducerFactory({} as ExploreItemSta return { ...state, initialQueries: nextQueries, - modifiedQueries: nextQueries.slice(), queryTransactions: nextQueryTransactions, }; }, @@ -177,7 +159,6 @@ export const itemReducer = reducerFactory({} as ExploreItemSta return { ...state, initialQueries: queries.slice(), - modifiedQueries: queries.slice(), queryTransactions: [], showingStartPage: Boolean(state.StartPage), }; @@ -202,7 +183,6 @@ export const itemReducer = reducerFactory({} as ExploreItemSta range, initialQueries: queries, initialized: true, - modifiedQueries: queries.slice(), }; }, }) @@ -268,14 +248,14 @@ export const itemReducer = reducerFactory({} as ExploreItemSta .addMapper({ filter: modifyQueriesAction, mapper: (state, action): ExploreItemState => { - const { initialQueries, modifiedQueries, queryTransactions } = state; + const { initialQueries, queryTransactions } = state; const { modification, index, modifier } = action.payload; let nextQueries: DataQuery[]; let nextQueryTransactions; if (index === undefined) { // Modify all queries nextQueries = initialQueries.map((query, i) => ({ - ...modifier(modifiedQueries[i], modification), + ...modifier({ ...query }, modification), ...generateEmptyQuery(i), })); // Discard all ongoing transactions @@ -285,7 +265,7 @@ export const itemReducer = reducerFactory({} as ExploreItemSta nextQueries = initialQueries.map((query, i) => { // Synchronize all queries with local query cache to ensure consistency // TODO still needed? - return i === index ? { ...modifier(modifiedQueries[i], modification), ...generateEmptyQuery(i) } : query; + return i === index ? { ...modifier({ ...query }, modification), ...generateEmptyQuery(i) } : query; }); nextQueryTransactions = queryTransactions // Consume the hint corresponding to the action @@ -301,7 +281,6 @@ export const itemReducer = reducerFactory({} as ExploreItemSta return { ...state, initialQueries: nextQueries, - modifiedQueries: nextQueries.slice(), queryTransactions: nextQueryTransactions, }; }, @@ -347,11 +326,8 @@ export const itemReducer = reducerFactory({} as ExploreItemSta filter: removeQueryRowAction, mapper: (state, action): ExploreItemState => { const { datasourceInstance, initialQueries, queryIntervals, queryTransactions } = state; - let { modifiedQueries } = state; const { index } = action.payload; - modifiedQueries = [...modifiedQueries.slice(0, index), ...modifiedQueries.slice(index + 1)]; - if (initialQueries.length <= 1) { return state; } @@ -371,7 +347,6 @@ export const itemReducer = reducerFactory({} as ExploreItemSta ...results, initialQueries: nextQueries, logsHighlighterExpressions: undefined, - modifiedQueries: nextQueries.slice(), queryTransactions: nextQueryTransactions, }; }, @@ -412,7 +387,7 @@ export const itemReducer = reducerFactory({} as ExploreItemSta filter: setQueriesAction, mapper: (state, action): ExploreItemState => { const { queries } = action.payload; - return { ...state, initialQueries: queries.slice(), modifiedQueries: queries.slice() }; + return { ...state, initialQueries: queries.slice() }; }, }) .addMapper({ @@ -461,7 +436,7 @@ export const itemReducer = reducerFactory({} as ExploreItemSta .addMapper({ filter: queriesImportedAction, mapper: (state, action): ExploreItemState => { - return { ...state, initialQueries: action.payload.queries, modifiedQueries: action.payload.queries.slice() }; + return { ...state, initialQueries: action.payload.queries }; }, }) .create(); diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index 34b7ff08c99..92145dc2324 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -145,7 +145,7 @@ export interface ExploreItemState { history: HistoryItem[]; /** * Initial queries for this Explore, e.g., set via URL. Each query will be - * converted to a query row. Query edits should be tracked in `modifiedQueries` though. + * converted to a query row. */ initialQueries: DataQuery[]; /** @@ -162,12 +162,6 @@ export interface ExploreItemState { * Log query result to be displayed in the logs result viewer. */ logsResult?: LogsModel; - /** - * Copy of `initialQueries` that tracks user edits. - * Don't connect this property to a react component as it is updated on every query change. - * Used when running queries. Needs to be reset to `initialQueries` when those are reset as well. - */ - modifiedQueries: DataQuery[]; /** * Query intervals for graph queries to determine how many datapoints to return. * Needs to be updated when `datasourceInstance` or `containerWidth` is changed.