Update datasource before the loading has started

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

 // Types
 import { Emitter } from 'app/core/core';
-import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem  } from '@grafana/ui/src/types';
+import { RawTimeRange, TimeRange, DataQuery, DataSourceSelectItem, DataSourceApi  } from '@grafana/ui/src/types';
 import {
   ExploreId,
   ExploreItemState,
@@ -41,6 +41,7 @@ export enum ActionTypes {
   ToggleGraph = 'explore/TOGGLE_GRAPH',
   ToggleLogs = 'explore/TOGGLE_LOGS',
   ToggleTable = 'explore/TOGGLE_TABLE',
+  UpdateDatasourceInstance = 'explore/UPDATE_DATASOURCE_INSTANCE',
 }
 
 export interface AddQueryRowAction {
@@ -270,6 +271,14 @@ export interface ToggleLogsAction {
   };
 }
 
+export interface UpdateDatasourceInstanceAction {
+  type: ActionTypes.UpdateDatasourceInstance;
+  payload: {
+    exploreId: ExploreId;
+    datasourceInstance: DataSourceApi;
+  };
+}
+
 export type Action =
   | AddQueryRowAction
   | ChangeQueryAction
@@ -297,4 +306,5 @@ export type Action =
   | SplitOpenAction
   | ToggleGraphAction
   | ToggleLogsAction
-  | ToggleTableAction;
+  | ToggleTableAction
+  | UpdateDatasourceInstanceAction;

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,
@@ -46,9 +46,9 @@ import {
   LoadDatasourceSuccessAction,
   QueryTransactionStartAction,
   ScanStopAction,
+  UpdateDatasourceInstanceAction,
 } from './actionTypes';
 
-
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, ThunkableAction>;
 
 /**
@@ -65,6 +65,7 @@ export function addQueryRow(exploreId: ExploreId, index: number): AddQueryRowAct
 export function changeDatasource(exploreId: ExploreId, datasource: string): ThunkResult<void> {
   return async dispatch => {
     const instance = await getDatasourceSrv().get(datasource);
+    dispatch(updateDatasourceInstance(exploreId, instance));
     dispatch(loadDatasource(exploreId, instance));
   };
 }
@@ -264,6 +265,22 @@ export const loadDatasourceSuccess = (
 };
 
 /**
+ * Updates datasource instance before datasouce loading has started
+ */
+export function updateDatasourceInstance(
+  exploreId: ExploreId,
+  instance: DataSourceApi
+): UpdateDatasourceInstanceAction {
+  return {
+    type: ActionTypes.UpdateDatasourceInstance,
+    payload: {
+      exploreId,
+      datasourceInstance: instance,
+    },
+  };
+}
+
+/**
  * Main action to asynchronously load a datasource. Dispatches lots of smaller actions for feedback.
  */
 export function loadDatasource(exploreId: ExploreId, instance: DataSourceApi): ThunkResult<void> {

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

@@ -176,6 +176,14 @@ export const itemReducer = (state, action: Action): ExploreItemState => {
       };
     }
 
+    case ActionTypes.UpdateDatasourceInstance: {
+      const { datasourceInstance } = action.payload;
+      return {
+        ...state,
+        datasourceInstance,
+      };
+    }
+
     case ActionTypes.LoadDatasourceFailure: {
       return { ...state, datasourceError: action.payload.error, datasourceLoading: false };
     }