Refactor: React Panels to only use SeriesData[] (#16306)

* only use SeriesData[] in react panels
* update target
* Refactor: Added refId filtering for queryResponse and queryError

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

@@ -13,6 +13,17 @@ export enum FieldType {
   other = 'other', // Object, Array, etc
 }
 
+export interface QueryResultBase {
+  /**
+   * Matches the query target refId
+   */
+  refId?: string;
+  /**
+   * Used by some backend datasources to communicate back info about the execution (generated sql, timing)
+   */
+  meta?: any;
+}
+
 export interface Field {
   name: string; // The column name
   type?: FieldType;
@@ -25,7 +36,7 @@ export interface Labels {
   [key: string]: string;
 }
 
-export interface SeriesData {
+export interface SeriesData extends QueryResultBase {
   name?: string;
   fields: Field[];
   rows: any[][];
@@ -38,7 +49,7 @@ export interface Column {
   unit?: string;
 }
 
-export interface TableData {
+export interface TableData extends QueryResultBase {
   columns: Column[];
   rows: any[][];
 }
@@ -47,7 +58,7 @@ export type TimeSeriesValue = number | null;
 
 export type TimeSeriesPoints = TimeSeriesValue[][];
 
-export interface TimeSeries {
+export interface TimeSeries extends QueryResultBase {
   target: string;
   datapoints: TimeSeriesPoints;
   unit?: string;

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

@@ -44,6 +44,7 @@ export interface DataQueryError {
   message?: string;
   status?: string;
   statusText?: string;
+  refId?: string;
 }
 
 export interface ScopedVar {

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

@@ -1,6 +1,14 @@
 import { ComponentClass } from 'react';
 import { ReactPanelPlugin } from './panel';
-import { DataQueryOptions, DataQuery, DataQueryResponse, QueryHint, QueryFixAction } from './datasource';
+import {
+  DataQueryOptions,
+  DataQuery,
+  DataQueryResponse,
+  QueryHint,
+  QueryFixAction,
+  DataQueryError,
+} from './datasource';
+import { SeriesData } from './data';
 
 export interface DataSourceApi<TQuery extends DataQuery = DataQuery> {
   /**
@@ -52,6 +60,8 @@ export interface QueryEditorProps<DSType extends DataSourceApi, TQuery extends D
   query: TQuery;
   onRunQuery: () => void;
   onChange: (value: TQuery) => void;
+  queryResponse?: SeriesData[];
+  queryError?: DataQueryError;
 }
 
 export enum DatasourceStatus {

packages/grafana-ui/src/utils/processSeriesData.ts

@@ -17,6 +17,8 @@ function convertTableToSeriesData(table: TableData): SeriesData {
       return f;
     }),
     rows: table.rows,
+    refId: table.refId,
+    meta: table.meta,
   };
 }
 
@@ -36,6 +38,8 @@ function convertTimeSeriesToSeriesData(timeSeries: TimeSeries): SeriesData {
     ],
     rows: timeSeries.datapoints,
     labels: timeSeries.tags,
+    refId: timeSeries.refId,
+    meta: timeSeries.meta,
   };
 }
 
@@ -168,6 +172,8 @@ export const toLegacyResponseData = (series: SeriesData): TimeSeries | TableData
         target: fields[0].name || series.name,
         datapoints: rows,
         unit: fields[0].unit,
+        refId: series.refId,
+        meta: series.meta,
       } as TimeSeries;
     }
   }
@@ -178,6 +184,8 @@ export const toLegacyResponseData = (series: SeriesData): TimeSeries | TableData
         text: f.name,
         filterable: f.filterable,
         unit: f.unit,
+        refId: series.refId,
+        meta: series.meta,
       };
     }),
     rows,