Commit 8e85295b by Torkel Ödegaard

react panels query processing

parent 543c67a2
import angular from 'angular'; import angular from 'angular';
console.log('core module code');
const coreModule = angular.module('grafana.core', ['ngRoute']); const coreModule = angular.module('grafana.core', ['ngRoute']);
// legacy modules // legacy modules
......
...@@ -5,11 +5,11 @@ import React, { Component } from 'react'; ...@@ -5,11 +5,11 @@ import React, { Component } from 'react';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
// Types // Types
import { TimeRange, LoadingState } from 'app/types'; import { TimeRange, LoadingState, DataQueryResponse, TimeSeries } from 'app/types';
interface RenderProps { interface RenderProps {
loading: LoadingState; loading: LoadingState;
data: any; timeSeries: TimeSeries[];
} }
export interface Props { export interface Props {
...@@ -26,7 +26,7 @@ export interface Props { ...@@ -26,7 +26,7 @@ export interface Props {
export interface State { export interface State {
isFirstLoad: boolean; isFirstLoad: boolean;
loading: LoadingState; loading: LoadingState;
data: any; response: DataQueryResponse;
} }
export class DataPanel extends Component<Props, State> { export class DataPanel extends Component<Props, State> {
...@@ -41,7 +41,9 @@ export class DataPanel extends Component<Props, State> { ...@@ -41,7 +41,9 @@ export class DataPanel extends Component<Props, State> {
this.state = { this.state = {
loading: LoadingState.NotStarted, loading: LoadingState.NotStarted,
data: [], response: {
data: [],
},
isFirstLoad: true, isFirstLoad: true,
}; };
} }
...@@ -70,7 +72,7 @@ export class DataPanel extends Component<Props, State> { ...@@ -70,7 +72,7 @@ export class DataPanel extends Component<Props, State> {
} }
if (!queries.length) { if (!queries.length) {
this.setState({ data: [], loading: LoadingState.Done }); this.setState({ loading: LoadingState.Done });
return; return;
} }
...@@ -94,9 +96,14 @@ export class DataPanel extends Component<Props, State> { ...@@ -94,9 +96,14 @@ export class DataPanel extends Component<Props, State> {
cacheTimeout: null, cacheTimeout: null,
}; };
console.log('issueing react query', queryOptions); console.log('Issuing DataPanel query', queryOptions);
const resp = await ds.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) { } catch (err) {
console.log('Loading error', err); console.log('Loading error', err);
this.setState({ loading: LoadingState.Error }); this.setState({ loading: LoadingState.Error });
...@@ -104,8 +111,9 @@ export class DataPanel extends Component<Props, State> { ...@@ -104,8 +111,9 @@ export class DataPanel extends Component<Props, State> {
}; };
render() { render() {
const { data, loading, isFirstLoad } = this.state; const { response, loading, isFirstLoad } = this.state;
console.log('data panel render'); console.log('data panel render');
const timeSeries = response.data;
if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) { if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) {
return ( return (
...@@ -119,7 +127,7 @@ export class DataPanel extends Component<Props, State> { ...@@ -119,7 +127,7 @@ export class DataPanel extends Component<Props, State> {
<> <>
{this.loadingSpinner} {this.loadingSpinner}
{this.props.children({ {this.props.children({
data, timeSeries,
loading, loading,
})} })}
</> </>
......
...@@ -73,8 +73,8 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -73,8 +73,8 @@ export class PanelChrome extends PureComponent<Props, State> {
isVisible={this.isVisible} isVisible={this.isVisible}
refreshCounter={refreshCounter} refreshCounter={refreshCounter}
> >
{({ loading, data }) => { {({ loading, timeSeries }) => {
return <PanelComponent loading={loading} data={data} />; return <PanelComponent loading={loading} timeSeries={timeSeries} />;
}} }}
</DataPanel> </DataPanel>
</div> </div>
......
// Libraries
import _ from 'lodash'; import _ from 'lodash';
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
// Utils
import config from 'app/core/config'; import config from 'app/core/config';
import { importPluginModule } from './plugin_loader'; import { importPluginModule } from './plugin_loader';
// Types
import { DataSourceApi } from 'app/types/series';
export class DatasourceSrv { export class DatasourceSrv {
datasources: any; datasources: any;
...@@ -15,7 +21,7 @@ export class DatasourceSrv { ...@@ -15,7 +21,7 @@ export class DatasourceSrv {
this.datasources = {}; this.datasources = {};
} }
get(name?) { get(name?): Promise<DataSourceApi> {
if (!name) { if (!name) {
return this.get(config.defaultDatasource); return this.get(config.defaultDatasource);
} }
......
...@@ -179,6 +179,7 @@ class GraphCtrl extends MetricsPanelCtrl { ...@@ -179,6 +179,7 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
onDataReceived(dataList) { onDataReceived(dataList) {
console.log(dataList);
this.dataList = dataList; this.dataList = dataList;
this.seriesList = this.processor.getSeriesList({ this.seriesList = this.processor.getSeriesList({
dataList: dataList, dataList: dataList,
......
// Libraries
import _ from 'lodash';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
// Types
import { PanelProps } from 'app/types'; import { PanelProps } from 'app/types';
interface Options { interface Options {
...@@ -15,16 +19,24 @@ export class Graph2 extends PureComponent<Props> { ...@@ -15,16 +19,24 @@ export class Graph2 extends PureComponent<Props> {
} }
render() { 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>
);
} }
} }
......
...@@ -7,14 +7,7 @@ export class Text2 extends PureComponent<PanelProps> { ...@@ -7,14 +7,7 @@ export class Text2 extends PureComponent<PanelProps> {
} }
render() { 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>;
} }
} }
......
...@@ -9,7 +9,7 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys'; ...@@ -9,7 +9,7 @@ import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
import { Invitee, OrgUser, User, UsersState } from './user'; import { Invitee, OrgUser, User, UsersState } from './user';
import { DataSource, DataSourcesState } from './datasources'; import { DataSource, DataSourcesState } from './datasources';
import { PluginMeta, Plugin, PluginsState } from './plugins'; import { PluginMeta, Plugin, PluginsState } from './plugins';
import { TimeRange, LoadingState } from './queries'; import { TimeRange, LoadingState, TimeSeries, DataQuery, DataQueryResponse, DataQueryOptions } from './series';
import { PanelProps } from './panel'; import { PanelProps } from './panel';
export { export {
...@@ -50,6 +50,10 @@ export { ...@@ -50,6 +50,10 @@ export {
TimeRange, TimeRange,
LoadingState, LoadingState,
PanelProps, PanelProps,
TimeSeries,
DataQuery,
DataQueryResponse,
DataQueryOptions,
}; };
export interface StoreState { export interface StoreState {
......
import { LoadingState } from './queries'; import { LoadingState, TimeSeries } from './series';
export interface PanelProps { export interface PanelProps {
data: any; timeSeries: TimeSeries[];
loading: LoadingState; loading: LoadingState;
} }
...@@ -17,3 +17,34 @@ export interface TimeRange { ...@@ -17,3 +17,34 @@ export interface TimeRange {
to: Moment; to: Moment;
raw: RawTimeRange; 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>;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment