From 8e85295b2b981442dc0a18bfec8128389eba258d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Oct 2018 18:19:49 +0200 Subject: [PATCH] react panels query processing --- public/app/core/core_module.ts | 1 - .../features/dashboard/dashgrid/DataPanel.tsx | 26 ++++++---- .../dashboard/dashgrid/PanelChrome.tsx | 4 +- public/app/features/plugins/datasource_srv.ts | 8 ++- public/app/plugins/panel/graph/module.ts | 1 + public/app/plugins/panel/graph2/module.tsx | 30 +++++++---- public/app/plugins/panel/text2/module.tsx | 9 +--- public/app/types/index.ts | 6 ++- public/app/types/panel.ts | 4 +- public/app/types/queries.ts | 19 ------- public/app/types/series.ts | 50 +++++++++++++++++++ 11 files changed, 106 insertions(+), 52 deletions(-) delete mode 100644 public/app/types/queries.ts create mode 100644 public/app/types/series.ts diff --git a/public/app/core/core_module.ts b/public/app/core/core_module.ts index 94b0aeaff7f..c8401975c18 100644 --- a/public/app/core/core_module.ts +++ b/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 diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx index a786e9de6d1..8014e06f43f 100644 --- a/public/app/features/dashboard/dashgrid/DataPanel.tsx +++ b/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 { @@ -41,7 +41,9 @@ export class DataPanel extends Component { this.state = { loading: LoadingState.NotStarted, - data: [], + response: { + data: [], + }, isFirstLoad: true, }; } @@ -70,7 +72,7 @@ export class DataPanel extends Component { } if (!queries.length) { - this.setState({ data: [], loading: LoadingState.Done }); + this.setState({ loading: LoadingState.Done }); return; } @@ -94,9 +96,14 @@ export class DataPanel extends Component { 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 { }; 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 { <> {this.loadingSpinner} {this.props.children({ - data, + timeSeries, loading, })} diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 9a4318e602f..d3e63d93e43 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -73,8 +73,8 @@ export class PanelChrome extends PureComponent { isVisible={this.isVisible} refreshCounter={refreshCounter} > - {({ loading, data }) => { - return ; + {({ loading, timeSeries }) => { + return ; }} diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts index 22861eaeef8..71a417a882f 100644 --- a/public/app/features/plugins/datasource_srv.ts +++ b/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 { if (!name) { return this.get(config.defaultDatasource); } diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 584b58ae3ce..1ebda67d41a 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/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, diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx index c5245137211..7132efc9ac0 100644 --- a/public/app/plugins/panel/graph2/module.tsx +++ b/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 { } render() { - const { data } = this.props; - let value = 0; + const { timeSeries } = this.props; + let index = 0; - if (data.length) { - value = data[0].value; - } - - console.log('graph2 render'); - - return

Text Panel {value}

; + return ( + + + {timeSeries.map(series => { + return ( + + + + + + ); + })} + +
{series.target}{series.datapoints[0][0]}{series.datapoints[0][1]}
+ ); } } diff --git a/public/app/plugins/panel/text2/module.tsx b/public/app/plugins/panel/text2/module.tsx index 9fcd89b612c..b10dc8b545e 100644 --- a/public/app/plugins/panel/text2/module.tsx +++ b/public/app/plugins/panel/text2/module.tsx @@ -7,14 +7,7 @@ export class Text2 extends PureComponent { } render() { - const { data } = this.props; - let value = 0; - - if (data.length) { - value = data[0].value; - } - - return

Text Panel! {value}

; + return

Text Panel!

; } } diff --git a/public/app/types/index.ts b/public/app/types/index.ts index 9a1045f8c7c..f13a55b5361 100644 --- a/public/app/types/index.ts +++ b/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 { diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts index 4cb93e5728d..8d12cb6ef21 100644 --- a/public/app/types/panel.ts +++ b/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; } diff --git a/public/app/types/queries.ts b/public/app/types/queries.ts deleted file mode 100644 index 5c350efbb08..00000000000 --- a/public/app/types/queries.ts +++ /dev/null @@ -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; -} diff --git a/public/app/types/series.ts b/public/app/types/series.ts new file mode 100644 index 00000000000..006410a5757 --- /dev/null +++ b/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; +}