DataSourceApi: add getCollapsedText(query) to DataSourceApi (#16482)

Add getQueryDisplayText() to DataSourceApi

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

@@ -107,6 +107,11 @@ export interface DataSourceApi<TQuery extends DataQuery = DataQuery> {
   getQueryHints?(query: TQuery, results: any[], ...rest: any): QueryHint[];
 
   /**
+   * Convert a query to a simple text string
+   */
+  getQueryDisplayText?(query: TQuery): string;
+
+  /**
    *  Set after constructor is called by Grafana
    */
   name?: string;

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

@@ -225,10 +225,14 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   };
 
   renderCollapsedText(): string | null {
+    const { datasource } = this.state;
+    if (datasource.getQueryDisplayText) {
+      return datasource.getQueryDisplayText(this.props.query);
+    }
+
     if (this.angularScope && this.angularScope.getCollapsedText) {
       return this.angularScope.getCollapsedText();
     }
-
     return null;
   }
 

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

@@ -55,6 +55,10 @@ export class PrometheusDatasource implements DataSourceApi<PromQuery> {
     this.loadRules();
   }
 
+  getQueryDisplayText(query: PromQuery) {
+    return query.expr;
+  }
+
   _request(url, data?, options?: any) {
     options = _.defaults(options || {}, {
       url: this.url + url,

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

@@ -89,10 +89,6 @@ class PrometheusQueryCtrl extends QueryCtrl {
     }).join('&');
     this.linkToPrometheus = this.datasource.directUrl + '/graph?' + args;
   }
-
-  getCollapsedText() {
-    return this.target.expr;
-  }
 }
 
 export { PrometheusQueryCtrl };

public/app/plugins/datasource/testdata/datasource.ts

@@ -90,6 +90,13 @@ export class TestDataDatasource implements DataSourceApi<TestDataQuery> {
     return this.$q.when(events);
   }
 
+  getQueryDisplayText(query: TestDataQuery) {
+    if (query.alias) {
+      return query.scenarioId + ' as ' + query.alias;
+    }
+    return query.scenarioId;
+  }
+
   testDatasource() {
     return Promise.resolve({
       status: 'success',

public/app/plugins/datasource/testdata/types.ts

 import { DataQuery } from '@grafana/ui/src/types';
 
 export interface TestDataQuery extends DataQuery {
+  alias?: string;
   scenarioId: string;
 }