Explore: Introduces PanelData to ExploreItemState (grafana#18804)

* WIP: inital POC

* Wip: Moving forward

* Wip

* Refactor: Makes loading indicator work for Prometheus

* Refactor: Reverts prom observable queries because they did not work for multiple targets

* Refactor: Transforms all epics into thunks

* Fix: Fixes scanning

* Fix: Fixes so that Instant and TimeSeries Prom query loads in parallel

* Fix: Fixes negation logic error

* Wip: Introduces PanelData as a carries for query responses

* Refactor: Makes errors work again

* Refactor: Simplifies code somewhat and removes comments

* Tests: Fixes broken tests

* Fix query latency

* Remove unused code

Author: hugohaggmark

emails/package.json

@@ -12,7 +12,6 @@
     "build": "grunt",
     "start": "grunt watch"
   },
-
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-premailer": "^1.1.10",

public/app/core/utils/explore.ts

@@ -1,6 +1,5 @@
 // Libraries
 import _ from 'lodash';
-import { from } from 'rxjs';
 import { isLive } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker';
 // Services & Utils
 import {
@@ -9,25 +8,16 @@ import {
   TimeRange,
   RawTimeRange,
   TimeZone,
-  IntervalValues,
   TimeFragment,
   LogRowModel,
   LogsModel,
   LogsDedupStrategy,
 } from '@grafana/data';
 import { renderUrl } from 'app/core/utils/url';
-import kbn from 'app/core/utils/kbn';
 import store from 'app/core/store';
 import { getNextRefIdChar } from './query';
 // Types
-import {
-  DataQuery,
-  DataSourceApi,
-  DataQueryError,
-  DataSourceJsonData,
-  DataQueryRequest,
-  DataStreamObserver,
-} from '@grafana/ui';
+import { DataQuery, DataSourceApi, DataQueryError } from '@grafana/ui';
 import {
   ExploreUrlState,
   HistoryItem,
@@ -321,14 +311,6 @@ export function hasNonEmptyQuery<TQuery extends DataQuery = any>(queries: TQuery
   );
 }
 
-export function getIntervals(range: TimeRange, lowLimit: string, resolution: number): IntervalValues {
-  if (!resolution) {
-    return { interval: '1s', intervalMs: 1000 };
-  }
-
-  return kbn.calculateInterval(range, resolution, lowLimit);
-}
-
 /**
  * Update the query history. Side-effect: store history in local storage
  */
@@ -448,7 +430,7 @@ export const getFirstQueryErrorWithoutRefId = (errors: DataQueryError[]) => {
     return null;
   }
 
-  return errors.filter(error => (error.refId ? false : true))[0];
+  return errors.filter(error => (error && error.refId ? false : true))[0];
 };
 
 export const getRefIds = (value: any): string[] => {
@@ -523,14 +505,6 @@ export const convertToWebSocketUrl = (url: string) => {
   return `${backend}${url}`;
 };
 
-export const getQueryResponse = (
-  datasourceInstance: DataSourceApi<DataQuery, DataSourceJsonData>,
-  options: DataQueryRequest<DataQuery>,
-  observer?: DataStreamObserver
-) => {
-  return from(datasourceInstance.query(options, observer));
-};
-
 export const stopQueryState = (queryState: PanelQueryState, reason: string) => {
   if (queryState && queryState.isStarted()) {
     queryState.cancel(reason);

public/app/features/dashboard/state/PanelQueryState.ts

@@ -95,7 +95,10 @@ export class PanelQueryState {
   }
 
   execute(ds: DataSourceApi, req: DataQueryRequest): Promise<PanelData> {
-    this.request = req;
+    this.request = {
+      ...req,
+      startTime: Date.now(),
+    };
     this.datasource = ds;
 
     // Return early if there are no queries to run
@@ -112,7 +115,7 @@ export class PanelQueryState {
       );
     }
 
-    // Set the loading state immediatly
+    // Set the loading state immediately
     this.response.state = LoadingState.Loading;
     this.executor = new Promise<PanelData>((resolve, reject) => {
       this.rejector = reject;

public/app/features/explore/Explore.tsx

@@ -3,20 +3,17 @@ import React, { ComponentClass } from 'react';
 import { hot } from 'react-hot-loader';
 // @ts-ignore
 import { connect } from 'react-redux';
-import _ from 'lodash';
 import { AutoSizer } from 'react-virtualized';
 import memoizeOne from 'memoize-one';
 
 // Services & Utils
 import store from 'app/core/store';
-
 // Components
-import { Alert } from '@grafana/ui';
+import { Alert, DataQuery, ExploreStartPageProps, DataSourceApi, PanelData } from '@grafana/ui';
 import { ErrorBoundary } from './ErrorBoundary';
 import LogsContainer from './LogsContainer';
 import QueryRows from './QueryRows';
 import TableContainer from './TableContainer';
-
 // Actions
 import {
   changeSize,
@@ -29,11 +26,8 @@ import {
   updateTimeRange,
   toggleGraph,
 } from './state/actions';
-
 // Types
-import { RawTimeRange, GraphSeriesXY, LoadingState, TimeZone, AbsoluteTimeRange } from '@grafana/data';
-
-import { DataQuery, ExploreStartPageProps, DataSourceApi, DataQueryError } from '@grafana/ui';
+import { RawTimeRange, GraphSeriesXY, TimeZone, AbsoluteTimeRange } from '@grafana/data';
 import {
   ExploreItemState,
   ExploreUrlState,
@@ -86,7 +80,6 @@ interface ExploreProps {
   initialRange: RawTimeRange;
   mode: ExploreMode;
   initialUI: ExploreUIState;
-  queryErrors: DataQueryError[];
   isLive: boolean;
   updateTimeRange: typeof updateTimeRange;
   graphResult?: GraphSeriesXY[];
@@ -97,6 +90,7 @@ interface ExploreProps {
   timeZone?: TimeZone;
   onHiddenSeriesChanged?: (hiddenSeries: string[]) => void;
   toggleGraph: typeof toggleGraph;
+  queryResponse: PanelData;
 }
 
 /**
@@ -243,14 +237,14 @@ export class Explore extends React.PureComponent<ExploreProps> {
       showingStartPage,
       split,
       queryKeys,
-      queryErrors,
       mode,
       graphResult,
       loading,
       absoluteRange,
       showingGraph,
       showingTable,
       timeZone,
+      queryResponse,
     } = this.props;
     const exploreClass = split ? 'explore explore-split' : 'explore';
 
@@ -272,7 +266,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
         {datasourceInstance && (
           <div className="explore-container">
             <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
-            <ErrorContainer queryErrors={queryErrors} />
+            <ErrorContainer queryErrors={[queryResponse.error]} />
             <AutoSizer onResize={this.onResize} disableHeight>
               {({ width }) => {
                 if (width === 0) {
@@ -347,15 +341,15 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
     queryKeys,
     urlState,
     update,
-    queryErrors,
     isLive,
     supportedModes,
     mode,
     graphResult,
-    loadingState,
+    loading,
     showingGraph,
     showingTable,
     absoluteRange,
+    queryResponse,
   } = item;
 
   const { datasource, queries, range: urlRange, mode: urlMode, ui } = (urlState || {}) as ExploreUrlState;
@@ -380,7 +374,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
   }
 
   const initialUI = ui || DEFAULT_UI_STATE;
-  const loading = loadingState === LoadingState.Loading || loadingState === LoadingState.Streaming;
 
   return {
     StartPage,
@@ -398,13 +391,13 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
     initialRange,
     mode: newMode,
     initialUI,
-    queryErrors,
     isLive,
     graphResult,
     loading,
     showingGraph,
     showingTable,
     absoluteRange,
+    queryResponse,
   };
 }
 

public/app/features/explore/ExploreToolbar.tsx

@@ -5,7 +5,7 @@ import memoizeOne from 'memoize-one';
 
 import { ExploreId, ExploreMode } from 'app/types/explore';
 import { DataSourceSelectItem, ToggleButtonGroup, ToggleButton } from '@grafana/ui';
-import { RawTimeRange, TimeZone, TimeRange, LoadingState, SelectableValue } from '@grafana/data';
+import { RawTimeRange, TimeZone, TimeRange, SelectableValue } from '@grafana/data';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import { StoreState } from 'app/types/store';
 import {
@@ -281,15 +281,14 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
     exploreDatasources,
     range,
     refreshInterval,
-    loadingState,
+    loading,
     supportedModes,
     mode,
     isLive,
   } = exploreItem;
   const selectedDatasource = datasourceInstance
     ? exploreDatasources.find(datasource => datasource.name === datasourceInstance.name)
     : undefined;
-  const loading = loadingState === LoadingState.Loading || loadingState === LoadingState.Streaming;
   const hasLiveOption =
     datasourceInstance && datasourceInstance.meta && datasourceInstance.meta.streaming ? true : false;
 

public/app/features/explore/LogsContainer.tsx

@@ -11,7 +11,6 @@ import {
   LogsModel,
   LogRowModel,
   LogsDedupStrategy,
-  LoadingState,
   TimeRange,
 } from '@grafana/data';
 
@@ -143,14 +142,13 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
   const {
     logsHighlighterExpressions,
     logsResult,
-    loadingState,
+    loading,
     scanning,
     datasourceInstance,
     isLive,
     range,
     absoluteRange,
   } = item;
-  const loading = loadingState === LoadingState.Loading || loadingState === LoadingState.Streaming;
   const { dedupStrategy } = exploreItemUIStateSelector(item);
   const dedupedResult = deduplicatedLogsSelector(item);
   const timeZone = getTimeZone(state.user);

public/app/features/explore/QueryRow.tsx

@@ -2,20 +2,16 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
 import { hot } from 'react-hot-loader';
-import memoizeOne from 'memoize-one';
 // @ts-ignore
 import { connect } from 'react-redux';
-
 // Components
 import QueryEditor from './QueryEditor';
-
 // Actions
 import { changeQuery, modifyQueries, runQueries, addQueryRow } from './state/actions';
-
 // Types
 import { StoreState } from 'app/types';
-import { TimeRange, AbsoluteTimeRange, toDataFrame, guessFieldTypes, GraphSeriesXY, LoadingState } from '@grafana/data';
-import { DataQuery, DataSourceApi, QueryFixAction, DataSourceStatus, PanelData, DataQueryError } from '@grafana/ui';
+import { TimeRange, AbsoluteTimeRange } from '@grafana/data';
+import { DataQuery, DataSourceApi, QueryFixAction, DataSourceStatus, PanelData } from '@grafana/ui';
 import { HistoryItem, ExploreItemState, ExploreId, ExploreMode } from 'app/types/explore';
 import { Emitter } from 'app/core/utils/emitter';
 import { highlightLogsExpressionAction, removeQueryRowAction } from './state/actionTypes';
@@ -44,7 +40,6 @@ interface QueryRowProps extends PropsFromParent {
   runQueries: typeof runQueries;
   queryResponse: PanelData;
   latency: number;
-  queryErrors: DataQueryError[];
   mode: ExploreMode;
 }
 
@@ -122,11 +117,11 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
       datasourceStatus,
       queryResponse,
       latency,
-      queryErrors,
       mode,
     } = this.props;
     const canToggleEditorModes =
       mode === ExploreMode.Metrics && _.has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode');
+    const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : [];
     let QueryField;
 
     if (mode === ExploreMode.Metrics && datasourceInstance.components.ExploreMetricsQueryField) {
@@ -199,17 +194,6 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
   }
 }
 
-const makeQueryResponseMemoized = memoizeOne(
-  (graphResult: GraphSeriesXY[], error: DataQueryError, loadingState: LoadingState): PanelData => {
-    const series = graphResult ? graphResult.map(serie => guessFieldTypes(toDataFrame(serie))) : []; // TODO: use DataFrame
-    return {
-      series,
-      state: loadingState,
-      error,
-    };
-  }
-);
-
 function mapStateToProps(state: StoreState, { exploreId, index }: QueryRowProps) {
   const explore = state.explore;
   const item: ExploreItemState = explore[exploreId];
@@ -220,16 +204,12 @@ function mapStateToProps(state: StoreState, { exploreId, index }: QueryRowProps)
     range,
     absoluteRange,
     datasourceError,
-    graphResult,
-    loadingState,
     latency,
-    queryErrors,
     mode,
+    queryResponse,
   } = item;
   const query = queries[index];
   const datasourceStatus = datasourceError ? DataSourceStatus.Disconnected : DataSourceStatus.Connected;
-  const error = queryErrors.filter(queryError => queryError.refId === query.refId)[0];
-  const queryResponse = makeQueryResponseMemoized(graphResult, error, loadingState);
 
   return {
     datasourceInstance,
@@ -240,7 +220,6 @@ function mapStateToProps(state: StoreState, { exploreId, index }: QueryRowProps)
     datasourceStatus,
     queryResponse,
     latency,
-    queryErrors,
     mode,
   };
 }

public/app/features/explore/TableContainer.tsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { LoadingState } from '@grafana/data';
 import { Collapse } from '@grafana/ui';
 
 import { ExploreId, ExploreItemState } from 'app/types/explore';
@@ -40,11 +39,8 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }
   const explore = state.explore;
   // @ts-ignore
   const item: ExploreItemState = explore[exploreId];
-  const { loadingState, showingTable, tableResult } = item;
-  const loading =
-    tableResult && tableResult.rows.length > 0
-      ? false
-      : loadingState === LoadingState.Loading || loadingState === LoadingState.Streaming;
+  const { loading: loadingInState, showingTable, tableResult } = item;
+  const loading = tableResult && tableResult.rows.length > 0 ? false : loadingInState;
   return { loading, showingTable, tableResult };
 }