Prometheus: Adds hint support to dashboard and fixes prometheus link in query editor (#20275)

* Prometheus: moved hints into query editor, and fixed missing refIds in responses

* Minor fix

* Removed unused type import

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

@@ -284,7 +284,6 @@ export interface ExploreQueryFieldProps<
 > extends QueryEditorProps<DSType, TQuery, TOptions> {
 > extends QueryEditorProps<DSType, TQuery, TOptions> {
   history: any[];
   history: any[];
   onBlur?: () => void;
   onBlur?: () => void;
-  onHint?: (action: QueryFixAction) => void;
 }
 }
 
 
 export interface ExploreStartPageProps {
 export interface ExploreStartPageProps {

public/app/core/table_model.ts

@@ -17,6 +17,7 @@ export default class TableModel implements TableData {
   rows: any[];
   rows: any[];
   type: string;
   type: string;
   columnMap: any;
   columnMap: any;
+  refId: string;
 
 
   constructor(table?: any) {
   constructor(table?: any) {
     this.columns = [];
     this.columns = [];

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -14,7 +14,6 @@ import {
   DataQuery,
   DataQuery,
   DataSourceApi,
   DataSourceApi,
   PanelData,
   PanelData,
-  DataQueryRequest,
   PanelEvents,
   PanelEvents,
   TimeRange,
   TimeRange,
   LoadingState,
   LoadingState,
@@ -316,10 +315,6 @@ export function filterPanelDataToQuery(data: PanelData, refId: string): PanelDat
     return undefined;
     return undefined;
   }
   }
 
 
-  // Don't pass the request if all requests are the same
-  const request: DataQueryRequest = undefined;
-  // TODO: look in sub-requets to match the info
-
   // Only say this is an error if the error links to the query
   // Only say this is an error if the error links to the query
   let state = LoadingState.Done;
   let state = LoadingState.Done;
   const error = data.error && data.error.refId === refId ? data.error : undefined;
   const error = data.error && data.error.refId === refId ? data.error : undefined;
@@ -330,9 +325,9 @@ export function filterPanelDataToQuery(data: PanelData, refId: string): PanelDat
   const timeRange = data.timeRange;
   const timeRange = data.timeRange;
 
 
   return {
   return {
+    ...data,
     state,
     state,
     series,
     series,
-    request,
     error,
     error,
     timeRange,
     timeRange,
   };
   };

public/app/features/explore/QueryRow.tsx

@@ -15,7 +15,6 @@ import { StoreState } from 'app/types';
 import {
 import {
   DataQuery,
   DataQuery,
   DataSourceApi,
   DataSourceApi,
-  QueryFixAction,
   PanelData,
   PanelData,
   HistoryItem,
   HistoryItem,
   TimeRange,
   TimeRange,
@@ -97,14 +96,6 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
     this.props.changeQuery(exploreId, newQuery, index, true);
     this.props.changeQuery(exploreId, newQuery, index, true);
   };
   };
 
 
-  onClickHintFix = (action: QueryFixAction) => {
-    const { datasourceInstance, exploreId, index } = this.props;
-    if (datasourceInstance && datasourceInstance.modifyQuery) {
-      const modifier = (queries: DataQuery, action: QueryFixAction) => datasourceInstance.modifyQuery(queries, action);
-      this.props.modifyQueries(exploreId, action, index, modifier);
-    }
-  };
-
   onClickRemoveButton = () => {
   onClickRemoveButton = () => {
     const { exploreId, index } = this.props;
     const { exploreId, index } = this.props;
     this.props.removeQueryRowAction({ exploreId, index });
     this.props.removeQueryRowAction({ exploreId, index });
@@ -161,7 +152,6 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
               query={query}
               query={query}
               history={history}
               history={history}
               onRunQuery={this.onRunQuery}
               onRunQuery={this.onRunQuery}
-              onHint={this.onClickHintFix}
               onBlur={noopOnBlur}
               onBlur={noopOnBlur}
               onChange={this.onChange}
               onChange={this.onChange}
               data={queryResponse}
               data={queryResponse}

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -221,11 +221,11 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   };
   };
 
 
   onClickHintFix = () => {
   onClickHintFix = () => {
+    const { datasource, query, onChange, onRunQuery } = this.props;
     const { hint } = this.state;
     const { hint } = this.state;
-    const { onHint } = this.props;
-    if (onHint && hint && hint.fix) {
-      onHint(hint.fix.action);
-    }
+
+    onChange(datasource.modifyQuery(query, hint.fix.action));
+    onRunQuery();
   };
   };
 
 
   onUpdateLanguage = () => {
   onUpdateLanguage = () => {

public/app/plugins/datasource/prometheus/result_transformer.ts

@@ -75,6 +75,7 @@ export class ResultTransformer {
     return {
     return {
       datapoints: dps,
       datapoints: dps,
       query: options.query,
       query: options.query,
+      refId: options.refId,
       target: metricLabel,
       target: metricLabel,
       tags: metricData.metric,
       tags: metricData.metric,
     };
     };
@@ -82,6 +83,8 @@ export class ResultTransformer {
 
 
   transformMetricDataToTable(md: any, resultCount: number, refId: string, valueWithRefId?: boolean): TableModel {
   transformMetricDataToTable(md: any, resultCount: number, refId: string, valueWithRefId?: boolean): TableModel {
     const table = new TableModel();
     const table = new TableModel();
+    table.refId = refId;
+
     let i: number, j: number;
     let i: number, j: number;
     const metricLabels: { [key: string]: number } = {};
     const metricLabels: { [key: string]: number } = {};
 
 
@@ -141,7 +144,7 @@ export class ResultTransformer {
     let metricLabel = null;
     let metricLabel = null;
     metricLabel = this.createMetricLabel(md.metric, options);
     metricLabel = this.createMetricLabel(md.metric, options);
     dps.push([parseFloat(md.value[1]), md.value[0] * 1000]);
     dps.push([parseFloat(md.value[1]), md.value[0] * 1000]);
-    return { target: metricLabel, datapoints: dps, tags: md.metric };
+    return { target: metricLabel, datapoints: dps, tags: md.metric, refId: options.refId };
   }
   }
 
 
   createMetricLabel(labelData: { [key: string]: string }, options: any) {
   createMetricLabel(labelData: { [key: string]: string }, options: any) {

public/app/plugins/datasource/prometheus/specs/result_transformer.test.ts

@@ -59,7 +59,7 @@ describe('Prometheus Result Transformer', () => {
     };
     };
 
 
     it('should return table model', () => {
     it('should return table model', () => {
-      const table = ctx.resultTransformer.transformMetricDataToTable(response.data.result);
+      const table = ctx.resultTransformer.transformMetricDataToTable(response.data.result, 0, 'A');
       expect(table.type).toBe('table');
       expect(table.type).toBe('table');
       expect(table.rows).toEqual([
       expect(table.rows).toEqual([
         [1443454528000, 'test', '', 'testjob', 3846],
         [1443454528000, 'test', '', 'testjob', 3846],
@@ -73,6 +73,7 @@ describe('Prometheus Result Transformer', () => {
         { text: 'Value' },
         { text: 'Value' },
       ]);
       ]);
       expect(table.columns[4].filterable).toBeUndefined();
       expect(table.columns[4].filterable).toBeUndefined();
+      expect(table.refId).toBe('A');
     });
     });
 
 
     it('should column title include refId if response count is more than 2', () => {
     it('should column title include refId if response count is more than 2', () => {
@@ -217,6 +218,7 @@ describe('Prometheus Result Transformer', () => {
         format: 'timeseries',
         format: 'timeseries',
         start: 0,
         start: 0,
         end: 2,
         end: 2,
+        refId: 'B',
       };
       };
 
 
       const result = ctx.resultTransformer.transform({ data: response }, options);
       const result = ctx.resultTransformer.transform({ data: response }, options);
@@ -226,6 +228,7 @@ describe('Prometheus Result Transformer', () => {
           query: undefined,
           query: undefined,
           datapoints: [[10, 0], [10, 1000], [0, 2000]],
           datapoints: [[10, 0], [10, 1000], [0, 2000]],
           tags: { job: 'testjob' },
           tags: { job: 'testjob' },
+          refId: 'B',
         },
         },
       ]);
       ]);
     });
     });