Explore: Queries the datasource once per run query and uses DataStreamObserver (#17263)

* Refactor: Removes replaceUrl from actions

* Refactor: Moves saveState thunk to epic

* Refactor: Moves thunks to epics

* Wip: removes resulttype and queries once

* Refactor: LiveTailing uses observer in query

* Refactor: Creates epics folder for epics and move back actioncreators

* Tests: Adds tests for epics and reducer

* Fix: Checks for undefined as well

* Refactor: Cleans up previous live tailing implementation

* Chore: merge with master

* Fix: Fixes url issuses and prom graph in Panels

* Refactor: Removes supportsStreaming and adds sockets to DataSourcePluginMeta instead

* Refactor: Changes the way we create TimeSeries

* Refactor: Renames sockets to streaming

* Refactor: Changes the way Explore does incremental updates

* Refactor: Removes unused method

* Refactor: Adds back Loading indication

public/test/core/redux/epicTester.ts

@@ -1,6 +1,14 @@
 import { Epic, ActionsObservable, StateObservable } from 'redux-observable';
 import { Subject } from 'rxjs';
-import { WebSocketSubject } from 'rxjs/webSocket';
+import {
+  DataSourceApi,
+  DataQuery,
+  DataSourceJsonData,
+  DataQueryRequest,
+  DataStreamObserver,
+  DataQueryResponse,
+  DataStreamState,
+} from '@grafana/ui';
 
 import { ActionOf } from 'app/core/redux/actionCreatorFactory';
 import { StoreState } from 'app/types/store';
@@ -8,21 +16,30 @@ import { EpicDependencies } from 'app/store/configureStore';
 
 export const epicTester = (
   epic: Epic<ActionOf<any>, ActionOf<any>, StoreState, EpicDependencies>,
-  state?: StoreState
+  state?: Partial<StoreState>
 ) => {
   const resultingActions: Array<ActionOf<any>> = [];
   const action$ = new Subject<ActionOf<any>>();
   const state$ = new Subject<StoreState>();
   const actionObservable$ = new ActionsObservable(action$);
-  const stateObservable$ = new StateObservable(state$, state || ({} as StoreState));
-  const websockets$: Array<Subject<any>> = [];
-  const dependencies: EpicDependencies = {
-    getWebSocket: () => {
-      const webSocket$ = new Subject<any>();
-      websockets$.push(webSocket$);
-      return webSocket$ as WebSocketSubject<any>;
-    },
+  const stateObservable$ = new StateObservable(state$, (state as StoreState) || ({} as StoreState));
+  const queryResponse$ = new Subject<DataQueryResponse>();
+  const observer$ = new Subject<DataStreamState>();
+  const getQueryResponse = (
+    datasourceInstance: DataSourceApi<DataQuery, DataSourceJsonData>,
+    options: DataQueryRequest<DataQuery>,
+    observer?: DataStreamObserver
+  ) => {
+    if (observer) {
+      observer$.subscribe({ next: event => observer(event) });
+    }
+    return queryResponse$;
   };
+
+  const dependencies: EpicDependencies = {
+    getQueryResponse,
+  };
+
   epic(actionObservable$, stateObservable$, dependencies).subscribe({ next: action => resultingActions.push(action) });
 
   const whenActionIsDispatched = (action: ActionOf<any>) => {
@@ -31,14 +48,26 @@ export const epicTester = (
     return instance;
   };
 
-  const whenWebSocketReceivesData = (data: any) => {
-    websockets$.forEach(websocket$ => websocket$.next(data));
+  const whenQueryReceivesResponse = (response: DataQueryResponse) => {
+    queryResponse$.next(response);
+
+    return instance;
+  };
+
+  const whenQueryThrowsError = (error: any) => {
+    queryResponse$.error(error);
+
+    return instance;
+  };
+
+  const whenQueryObserverReceivesEvent = (event: DataStreamState) => {
+    observer$.next(event);
 
     return instance;
   };
 
   const thenResultingActionsEqual = (...actions: Array<ActionOf<any>>) => {
-    expect(resultingActions).toEqual(actions);
+    expect(actions).toEqual(resultingActions);
 
     return instance;
   };
@@ -51,7 +80,9 @@ export const epicTester = (
 
   const instance = {
     whenActionIsDispatched,
-    whenWebSocketReceivesData,
+    whenQueryReceivesResponse,
+    whenQueryThrowsError,
+    whenQueryObserverReceivesEvent,
     thenResultingActionsEqual,
     thenNoActionsWhereDispatched,
   };