Removed modifiedQueries from state

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<QueryEditorProps, any> {
         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() {

public/app/features/explore/QueryRows.tsx

@@ -21,10 +21,11 @@ export default class QueryRows extends PureComponent<QueryRowsProps> {
     const { className = '', exploreEvents, exploreId, initialQueries } = this.props;
     return (
       <div className={className}>
-        {initialQueries.map((query, index) => (
-          // TODO instead of relying on initialQueries, move to react key list in redux
-          <QueryRow key={query.key} exploreEvents={exploreEvents} exploreId={exploreId} index={index} />
-        ))}
+        {initialQueries.map((query, index) => {
+          // using query.key will introduce infinite loop because QueryEditor#53
+          const key = query.datasource ? `${query.datasource}-${index}` : query.key;
+          return <QueryRow key={key} exploreEvents={exploreEvents} exploreId={exploreId} index={index} />;
+        })}
       </div>
     );
   }

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<void> {
     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);

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<ExploreItemState>({} 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<ExploreItemState>({} as ExploreItemSta
         ...state,
         initialQueries: nextQueries,
         logsHighlighterExpressions: undefined,
-        modifiedQueries: nextModifiedQueries,
         queryTransactions: nextQueryTransactions,
       };
     },
@@ -125,20 +116,12 @@ export const itemReducer = reducerFactory<ExploreItemState>({} 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<ExploreItemState>({} as ExploreItemSta
       return {
         ...state,
         initialQueries: nextQueries,
-        modifiedQueries: nextQueries.slice(),
         queryTransactions: nextQueryTransactions,
       };
     },
@@ -177,7 +159,6 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
       return {
         ...state,
         initialQueries: queries.slice(),
-        modifiedQueries: queries.slice(),
         queryTransactions: [],
         showingStartPage: Boolean(state.StartPage),
       };
@@ -202,7 +183,6 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
         range,
         initialQueries: queries,
         initialized: true,
-        modifiedQueries: queries.slice(),
       };
     },
   })
@@ -268,14 +248,14 @@ export const itemReducer = reducerFactory<ExploreItemState>({} 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<ExploreItemState>({} 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<ExploreItemState>({} as ExploreItemSta
       return {
         ...state,
         initialQueries: nextQueries,
-        modifiedQueries: nextQueries.slice(),
         queryTransactions: nextQueryTransactions,
       };
     },
@@ -347,11 +326,8 @@ export const itemReducer = reducerFactory<ExploreItemState>({} 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<ExploreItemState>({} as ExploreItemSta
         ...results,
         initialQueries: nextQueries,
         logsHighlighterExpressions: undefined,
-        modifiedQueries: nextQueries.slice(),
         queryTransactions: nextQueryTransactions,
       };
     },
@@ -412,7 +387,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} 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<ExploreItemState>({} 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();

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.