creating table data type

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

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

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

-export * from './series';
+export * from './data';
 export * from './time';
 export * from './panel';
 export * from './plugin';

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

-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

@@ -11,13 +11,21 @@ import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource
 import kbn from 'app/core/utils/kbn';
 
 // Types
-import { TimeRange, TimeSeries, LoadingState, DataQueryResponse, DataQueryOptions } from '@grafana/ui/src/types';
+import {
+  TimeRange,
+  TimeSeries,
+  LoadingState,
+  DataQueryResponse,
+  DataQueryOptions,
+  PanelData,
+  TableData,
+} from '@grafana/ui/src/types';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
 
 interface RenderProps {
   loading: LoadingState;
-  timeSeries: TimeSeries[];
+  panelData: PanelData;
 }
 
 export interface Props {
@@ -121,6 +129,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) {
@@ -148,11 +157,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,
+        timeSeries: [] as TimeSeries[],
+      };
+    }
+
+    return {
+      timeSeries: response.data,
+      tableData: {} as TableData,
+    };
+  };
+
   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();
@@ -178,8 +203,8 @@ export class DataPanel extends Component<Props, State> {
             return (
               <>
                 {this.props.children({
-                  timeSeries,
                   loading,
+                  panelData,
                 })}
               </>
             );

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

@@ -121,12 +121,12 @@ export class PanelChrome extends PureComponent<Props, State> {
                 widthPixels={width}
                 refreshCounter={refreshCounter}
               >
-                {({ loading, timeSeries }) => {
+                {({ loading, panelData }) => {
                   return (
                     <div className="panel-content">
                       <PanelComponent
                         loading={loading}
-                        timeSeries={timeSeries}
+                        timeSeries={panelData.timeSeries}
                         timeRange={timeRange}
                         options={panel.getOptions(plugin.exports.PanelDefaults)}
                         width={width - 2 * variables.panelHorizontalPadding}