Replaced intialQueris with queryKeys

public/app/core/utils/explore.ts

@@ -11,7 +11,7 @@ import { colors } from '@grafana/ui';
 import TableModel, { mergeTablesIntoModel } from 'app/core/table_model';
 
 // Types
-import { RawTimeRange, IntervalValues, DataQuery } from '@grafana/ui/src/types';
+import { RawTimeRange, IntervalValues, DataQuery, DataSourceApi } from '@grafana/ui/src/types';
 import TimeSeries from 'app/core/time_series2';
 import {
   ExploreUrlState,
@@ -304,3 +304,12 @@ export function clearHistory(datasourceId: string) {
   const historyKey = `grafana.explore.history.${datasourceId}`;
   store.delete(historyKey);
 }
+
+export const getQueryKeys = (queries: DataQuery[], datasourceInstance: DataSourceApi): string[] => {
+  const queryKeys = queries.reduce((newQueryKeys, query, index) => {
+    const primaryKey = datasourceInstance && datasourceInstance.name ? datasourceInstance.name : query.key;
+    return newQueryKeys.concat(`${primaryKey}-${index}`);
+  }, []);
+
+  return queryKeys;
+};

public/app/features/explore/Explore.tsx

@@ -38,7 +38,6 @@ interface ExploreProps {
   datasourceLoading: boolean | null;
   datasourceMissing: boolean;
   exploreId: ExploreId;
-  initialQueries: DataQuery[];
   initializeExplore: typeof initializeExplore;
   initialized: boolean;
   modifyQueries: typeof modifyQueries;
@@ -55,6 +54,7 @@ interface ExploreProps {
   supportsLogs: boolean | null;
   supportsTable: boolean | null;
   urlState: ExploreUrlState;
+  queryKeys: string[];
 }
 
 /**
@@ -175,12 +175,12 @@ export class Explore extends React.PureComponent<ExploreProps> {
       datasourceLoading,
       datasourceMissing,
       exploreId,
-      initialQueries,
       showingStartPage,
       split,
       supportsGraph,
       supportsLogs,
       supportsTable,
+      queryKeys,
     } = this.props;
     const exploreClass = split ? 'explore explore-split' : 'explore';
 
@@ -201,7 +201,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
         {datasourceInstance &&
           !datasourceError && (
             <div className="explore-container">
-              <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} initialQueries={initialQueries} />
+              <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
               <AutoSizer onResize={this.onResize} disableHeight>
                 {({ width }) => (
                   <main className="m-t-2" style={{ width }}>
@@ -243,13 +243,13 @@ function mapStateToProps(state: StoreState, { exploreId }) {
     datasourceInstance,
     datasourceLoading,
     datasourceMissing,
-    initialQueries,
     initialized,
     range,
     showingStartPage,
     supportsGraph,
     supportsLogs,
     supportsTable,
+    queryKeys,
   } = item;
   return {
     StartPage,
@@ -257,7 +257,6 @@ function mapStateToProps(state: StoreState, { exploreId }) {
     datasourceInstance,
     datasourceLoading,
     datasourceMissing,
-    initialQueries,
     initialized,
     range,
     showingStartPage,
@@ -265,6 +264,7 @@ function mapStateToProps(state: StoreState, { exploreId }) {
     supportsGraph,
     supportsLogs,
     supportsTable,
+    queryKeys,
   };
 }
 

public/app/features/explore/QueryRows.tsx

@@ -6,24 +6,21 @@ import QueryRow from './QueryRow';
 
 // Types
 import { Emitter } from 'app/core/utils/emitter';
-import { DataQuery } from '@grafana/ui/src/types';
 import { ExploreId } from 'app/types/explore';
 
 interface QueryRowsProps {
   className?: string;
   exploreEvents: Emitter;
   exploreId: ExploreId;
-  initialQueries: DataQuery[];
+  queryKeys: string[];
 }
 
 export default class QueryRows extends PureComponent<QueryRowsProps> {
   render() {
-    const { className = '', exploreEvents, exploreId, initialQueries } = this.props;
+    const { className = '', exploreEvents, exploreId, queryKeys } = this.props;
     return (
       <div className={className}>
-        {initialQueries.map((query, index) => {
+        {queryKeys.map((key, 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/reducers.ts

@@ -3,6 +3,7 @@ import {
   generateEmptyQuery,
   getIntervals,
   ensureQueries,
+  getQueryKeys,
 } from 'app/core/utils/explore';
 import { ExploreItemState, ExploreState, QueryTransaction } from 'app/types/explore';
 import { DataQuery } from '@grafana/ui/src/types';
@@ -72,6 +73,7 @@ export const makeExploreItemState = (): ExploreItemState => ({
   supportsGraph: null,
   supportsLogs: null,
   supportsTable: null,
+  queryKeys: [],
 });
 
 /**
@@ -109,6 +111,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
         initialQueries: nextQueries,
         logsHighlighterExpressions: undefined,
         queryTransactions: nextQueryTransactions,
+        queryKeys: getQueryKeys(nextQueries, state.datasourceInstance),
       };
     },
   })
@@ -130,6 +133,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
         ...state,
         initialQueries: nextQueries,
         queryTransactions: nextQueryTransactions,
+        queryKeys: getQueryKeys(nextQueries, state.datasourceInstance),
       };
     },
   })
@@ -161,6 +165,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
         initialQueries: queries.slice(),
         queryTransactions: [],
         showingStartPage: Boolean(state.StartPage),
+        queryKeys: getQueryKeys(queries, state.datasourceInstance),
       };
     },
   })
@@ -183,6 +188,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
         range,
         initialQueries: queries,
         initialized: true,
+        queryKeys: getQueryKeys(queries, state.datasourceInstance),
       };
     },
   })
@@ -190,8 +196,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
     filter: updateDatasourceInstanceAction,
     mapper: (state, action): ExploreItemState => {
       const { datasourceInstance } = action.payload;
-      return { ...state, datasourceInstance };
+      return { ...state, datasourceInstance, queryKeys: getQueryKeys(state.initialQueries, datasourceInstance) };
-      /*datasourceName: datasourceInstance.name removed after refactor, datasourceName does not exists on ExploreItemState */
     },
   })
   .addMapper({
@@ -281,6 +286,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
       return {
         ...state,
         initialQueries: nextQueries,
+        queryKeys: getQueryKeys(nextQueries, state.datasourceInstance),
         queryTransactions: nextQueryTransactions,
       };
     },
@@ -348,6 +354,7 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
         initialQueries: nextQueries,
         logsHighlighterExpressions: undefined,
         queryTransactions: nextQueryTransactions,
+        queryKeys: getQueryKeys(nextQueries, state.datasourceInstance),
       };
     },
   })
@@ -387,7 +394,11 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
     filter: setQueriesAction,
     mapper: (state, action): ExploreItemState => {
       const { queries } = action.payload;
-      return { ...state, initialQueries: queries.slice() };
+      return {
+        ...state,
+        initialQueries: queries.slice(),
+        queryKeys: getQueryKeys(queries, state.datasourceInstance),
+      };
     },
   })
   .addMapper({
@@ -436,7 +447,12 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
   .addMapper({
     filter: queriesImportedAction,
     mapper: (state, action): ExploreItemState => {
-      return { ...state, initialQueries: action.payload.queries };
+      const { queries } = action.payload;
+      return {
+        ...state,
+        initialQueries: queries,
+        queryKeys: getQueryKeys(queries, state.datasourceInstance),
+      };
     },
   })
   .create();

public/app/types/explore.ts

@@ -232,6 +232,11 @@ export interface ExploreItemState {
    * Table model that combines all query table results into a single table.
    */
   tableResult?: TableModel;
+
+  /**
+   * React keys for rendering of QueryRows
+   */
+  queryKeys: string[];
 }
 
 export interface ExploreUrlState {