react panels query processing

public/app/core/core_module.ts

@@ -1,6 +1,5 @@
 import angular from 'angular';
 
-console.log('core module code');
 const coreModule = angular.module('grafana.core', ['ngRoute']);
 
 // legacy modules

public/app/features/dashboard/dashgrid/DataPanel.tsx

@@ -5,11 +5,11 @@ import React, { Component } from 'react';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 // Types
-import { TimeRange, LoadingState } from 'app/types';
+import { TimeRange, LoadingState, DataQueryResponse, TimeSeries } from 'app/types';
 
 interface RenderProps {
   loading: LoadingState;
-  data: any;
+  timeSeries: TimeSeries[];
 }
 
 export interface Props {
@@ -26,7 +26,7 @@ export interface Props {
 export interface State {
   isFirstLoad: boolean;
   loading: LoadingState;
-  data: any;
+  response: DataQueryResponse;
 }
 
 export class DataPanel extends Component<Props, State> {
@@ -41,7 +41,9 @@ export class DataPanel extends Component<Props, State> {
 
     this.state = {
       loading: LoadingState.NotStarted,
-      data: [],
+      response: {
+        data: [],
+      },
       isFirstLoad: true,
     };
   }
@@ -70,7 +72,7 @@ export class DataPanel extends Component<Props, State> {
     }
 
     if (!queries.length) {
-      this.setState({ data: [], loading: LoadingState.Done });
+      this.setState({ loading: LoadingState.Done });
       return;
     }
 
@@ -94,9 +96,14 @@ export class DataPanel extends Component<Props, State> {
         cacheTimeout: null,
       };
 
-      console.log('issueing react query', queryOptions);
+      console.log('Issuing DataPanel query', queryOptions);
       const resp = await ds.query(queryOptions);
-      console.log(resp);
+      console.log('Issuing DataPanel query Resp', resp);
+
+      this.setState({
+        loading: LoadingState.Done,
+        response: resp,
+      });
     } catch (err) {
       console.log('Loading error', err);
       this.setState({ loading: LoadingState.Error });
@@ -104,8 +111,9 @@ export class DataPanel extends Component<Props, State> {
   };
 
   render() {
-    const { data, loading, isFirstLoad } = this.state;
+    const { response, loading, isFirstLoad } = this.state;
     console.log('data panel render');
+    const timeSeries = response.data;
 
     if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) {
       return (
@@ -119,7 +127,7 @@ export class DataPanel extends Component<Props, State> {
       <>
         {this.loadingSpinner}
         {this.props.children({
-          data,
+          timeSeries,
           loading,
         })}
       </>

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -73,8 +73,8 @@ export class PanelChrome extends PureComponent<Props, State> {
             isVisible={this.isVisible}
             refreshCounter={refreshCounter}
           >
-            {({ loading, data }) => {
+            {({ loading, timeSeries }) => {
-              return <PanelComponent loading={loading} data={data} />;
+              return <PanelComponent loading={loading} timeSeries={timeSeries} />;
             }}
           </DataPanel>
         </div>

public/app/features/plugins/datasource_srv.ts

@@ -1,8 +1,14 @@
+// Libraries
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
+
+// Utils
 import config from 'app/core/config';
 import { importPluginModule } from './plugin_loader';
 
+// Types
+import { DataSourceApi } from 'app/types/series';
+
 export class DatasourceSrv {
   datasources: any;
 
@@ -15,7 +21,7 @@ export class DatasourceSrv {
     this.datasources = {};
   }
 
-  get(name?) {
+  get(name?): Promise<DataSourceApi> {
     if (!name) {
       return this.get(config.defaultDatasource);
     }

public/app/plugins/panel/graph/module.ts

@@ -179,6 +179,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onDataReceived(dataList) {
+    console.log(dataList);
     this.dataList = dataList;
     this.seriesList = this.processor.getSeriesList({
       dataList: dataList,

public/app/plugins/panel/graph2/module.tsx

@@ -1,4 +1,8 @@
+// Libraries
+import _ from 'lodash';
 import React, { PureComponent } from 'react';
+
+// Types
 import { PanelProps } from 'app/types';
 
 interface Options {
@@ -15,16 +19,24 @@ export class Graph2 extends PureComponent<Props> {
   }
 
   render() {
-    const { data } = this.props;
+    const { timeSeries } = this.props;
-    let value = 0;
+    let index = 0;
 
-    if (data.length) {
+    return (
-      value = data[0].value;
+      <table className="filter-table">
-    }
+        <tbody>
-
+          {timeSeries.map(series => {
-    console.log('graph2 render');
+            return (
-
+              <tr key={index++}>
-    return <h2>Text Panel {value}</h2>;
+                <td>{series.target}</td>
+                <td>{series.datapoints[0][0]}</td>
+                <td>{series.datapoints[0][1]}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    );
   }
 }
 

public/app/plugins/panel/text2/module.tsx

@@ -7,14 +7,7 @@ export class Text2 extends PureComponent<PanelProps> {
   }
 
   render() {
-    const { data } = this.props;
+    return <h2>Text Panel!</h2>;
-    let value = 0;
-
-    if (data.length) {
-      value = data[0].value;
-    }
-
-    return <h2>Text Panel! {value}</h2>;
   }
 }
 

public/app/types/index.ts

@@ -9,7 +9,7 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState } from './user';
 import { DataSource, DataSourcesState } from './datasources';
 import { PluginMeta, Plugin, PluginsState } from './plugins';
-import { TimeRange, LoadingState } from './queries';
+import { TimeRange, LoadingState, TimeSeries, DataQuery, DataQueryResponse, DataQueryOptions } from './series';
 import { PanelProps } from './panel';
 
 export {
@@ -50,6 +50,10 @@ export {
   TimeRange,
   LoadingState,
   PanelProps,
+  TimeSeries,
+  DataQuery,
+  DataQueryResponse,
+  DataQueryOptions,
 };
 
 export interface StoreState {

public/app/types/panel.ts

@@ -1,6 +1,6 @@
-import { LoadingState } from './queries';
+import { LoadingState, TimeSeries } from './series';
 
 export interface PanelProps {
-  data: any;
+  timeSeries: TimeSeries[];
   loading: LoadingState;
 }

public/app/types/queries.ts

@@ -1,19 +0,0 @@
-import { Moment } from 'moment';
-
-export enum LoadingState {
-  NotStarted = 'NotStarted',
-  Loading = 'Loading',
-  Done = 'Done',
-  Error = 'Error',
-}
-
-export interface RawTimeRange {
-  from: Moment | string;
-  to: Moment | string;
-}
-
-export interface TimeRange {
-  from: Moment;
-  to: Moment;
-  raw: RawTimeRange;
-}

public/app/types/series.ts

@@ -0,0 +1,50 @@
+import { Moment } from 'moment';
+
+export enum LoadingState {
+  NotStarted = 'NotStarted',
+  Loading = 'Loading',
+  Done = 'Done',
+  Error = 'Error',
+}
+
+export interface RawTimeRange {
+  from: Moment | string;
+  to: Moment | string;
+}
+
+export interface TimeRange {
+  from: Moment;
+  to: Moment;
+  raw: RawTimeRange;
+}
+
+export type TimeSeriesValue = string | number | null;
+
+export type TimeSeriesPoints = TimeSeriesValue[][];
+
+export interface TimeSeries {
+  target: string;
+  datapoints: TimeSeriesPoints;
+}
+
+export interface DataQueryResponse {
+  data: TimeSeries[];
+}
+
+export interface DataQuery {
+  refId: string;
+}
+
+export interface DataQueryOptions {
+  timezone: string;
+  range: TimeRange;
+  rangeRaw: RawTimeRange;
+  targets: DataQuery[];
+  panelId: number;
+  dashboardId: number;
+  cacheTimeout?: string;
+}
+
+export interface DataSourceApi {
+  query(options: DataQueryOptions): Promise<DataQueryResponse>;
+}