Merge pull request #15163 from grafana/table-data-support

Table data support

packages/grafana-ui/src/components/Gauge/Gauge.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { Gauge, Props } from './Gauge';
-import { TimeSeriesVMs } from '../../types/series';
+import { TimeSeriesVMs } from '../../types/data';
 import { ValueMapping, MappingType } from '../../types';
 
 jest.mock('jquery', () => ({

packages/grafana-ui/src/types/series.ts → packages/grafana-ui/src/types/data.ts

@@ -52,3 +52,20 @@ export interface TimeSeriesVMs {
   [index: number]: TimeSeriesVM;
   length: number;
 }
+
+interface Column {
+  text: string;
+  title?: string;
+  type?: string;
+  sort?: boolean;
+  desc?: boolean;
+  filterable?: boolean;
+  unit?: string;
+}
+
+export interface TableData {
+  columns: Column[];
+  rows: any[];
+  type: string;
+  columnMap: any;
+}

packages/grafana-ui/src/types/datasource.ts

@@ -1,9 +1,9 @@
 import { TimeRange, RawTimeRange } from './time';
-import { TimeSeries } from './series';
 import { PluginMeta } from './plugin';
+import { TableData, TimeSeries } from './data';
 
 export interface DataQueryResponse {
-  data: TimeSeries[];
+  data: TimeSeries[] | [TableData];
 }
 
 export interface DataQuery {

packages/grafana-ui/src/types/index.ts

@@ -1,4 +1,4 @@
-export * from './series';
+export * from './data';
 export * from './time';
 export * from './panel';
 export * from './plugin';

packages/grafana-ui/src/types/panel.ts

@@ -1,4 +1,4 @@
-import { TimeSeries, LoadingState } from './series';
+import { TimeSeries, LoadingState, TableData } from './data';
 import { TimeRange } from './time';
 
 export type InterpolateFunction = (value: string, format?: string | Function) => string;
@@ -14,6 +14,11 @@ export interface PanelProps<T = any> {
   onInterpolate: InterpolateFunction;
 }
 
+export interface PanelData {
+  timeSeries?: TimeSeries[];
+  tableData?: TableData;
+}
+
 export interface PanelOptionsProps<T = any> {
   options: T;
   onChange: (options: T) => void;

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

@@ -8,13 +8,21 @@ import { DatasourceSrv, getDatasourceSrv } from 'app/features/plugins/datasource
 // Utils
 import kbn from 'app/core/utils/kbn';
 // Types
-import { DataQueryOptions, DataQueryResponse, LoadingState, TimeRange, TimeSeries } from '@grafana/ui/src/types';
+import {
+  DataQueryOptions,
+  DataQueryResponse,
+  LoadingState,
+  PanelData,
+  TableData,
+  TimeRange,
+  TimeSeries,
+} from '@grafana/ui';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
 
 interface RenderProps {
   loading: LoadingState;
-  timeSeries: TimeSeries[];
+  panelData: PanelData;
 }
 
 export interface Props {
@@ -129,6 +137,7 @@ export class DataPanel extends Component<Props, State> {
 
       console.log('Issuing DataPanel query', queryOptions);
       const resp = await ds.query(queryOptions);
+
       console.log('Issuing DataPanel query Resp', resp);
 
       if (this.isUnmounted) {
@@ -160,11 +169,27 @@ export class DataPanel extends Component<Props, State> {
     }
   };
 
+  getPanelData = () => {
+    const { response } = this.state;
+
+    if (response.data.length > 0 && (response.data[0] as TableData).type === 'table') {
+      return {
+        tableData: response.data[0] as TableData,
+        timeSeries: null,
+      };
+    }
+
+    return {
+      timeSeries: response.data as TimeSeries[],
+      tableData: null,
+    };
+  };
+
   render() {
     const { queries } = this.props;
-    const { response, loading, isFirstLoad } = this.state;
+    const { loading, isFirstLoad } = this.state;
 
-    const timeSeries = response.data;
+    const panelData = this.getPanelData();
 
     if (isFirstLoad && loading === LoadingState.Loading) {
       return this.renderLoadingStates();
@@ -190,8 +215,8 @@ export class DataPanel extends Component<Props, State> {
             return (
               <>
                 {this.props.children({
-                  timeSeries,
                   loading,
+                  panelData,
                 })}
               </>
             );

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

@@ -14,8 +14,7 @@ import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
 import { PANEL_HEADER_HEIGHT } from 'app/core/constants';
 
 // Types
-import { PanelModel } from '../state/PanelModel';
-import { DashboardModel } from '../state/DashboardModel';
+import { DashboardModel, PanelModel } from '../state';
 import { PanelPlugin } from 'app/types';
 import { TimeRange } from '@grafana/ui';
 
@@ -139,7 +138,6 @@ export class PanelChrome extends PureComponent<Props, State> {
                 scopedVars={panel.scopedVars}
                 links={panel.links}
               />
-
               {panel.snapshotData ? (
                 this.renderPanel(false, panel.snapshotData, width, height)
               ) : (
@@ -152,8 +150,8 @@ export class PanelChrome extends PureComponent<Props, State> {
                   refreshCounter={refreshCounter}
                   onDataResponse={this.onDataResponse}
                 >
-                  {({ loading, timeSeries }) => {
-                    return this.renderPanel(loading, timeSeries, width, height);
+                  {({ loading, panelData }) => {
+                    return this.renderPanel(loading, panelData.timeSeries, width, height);
                   }}
                 </DataPanel>
               )}

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

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import { Emitter } from 'app/core/utils/emitter';
 import { PANEL_OPTIONS_KEY_PREFIX } from 'app/core/constants';
 import { DataQuery, TimeSeries } from '@grafana/ui';
+import { TableData } from '@grafana/ui/src';
 
 export interface GridPos {
   x: number;
@@ -87,7 +88,7 @@ export class PanelModel {
   datasource: string;
   thresholds?: any;
 
-  snapshotData?: TimeSeries[];
+  snapshotData?: TimeSeries[] | [TableData];
   timeFrom?: any;
   timeShift?: any;
   hideTimeOverride?: any;