stackdriver: pass query definition from react, making it possible to use another definition than the query string only

public/app/features/templating/DefaultTemplateQueryComponent.tsx

@@ -14,7 +14,7 @@ export default class DefaultTemplateQueryComponent extends PureComponent<Templat
   }
 
   handleBlur(event) {
-    this.props.onChange(event.target.value);
+    this.props.onChange(event.target.value, event.target.value);
   }
 
   render() {

public/app/features/templating/editor_ctrl.ts

@@ -107,8 +107,9 @@ export class VariableEditorCtrl {
       });
     };
 
-    $scope.onQueryChange = value => {
+    $scope.onQueryChange = (query, definition) => {
-      $scope.current.query = value;
+      $scope.current.query = query;
+      $scope.current.definition = definition;
       $scope.runQuery();
     };
 

public/app/features/templating/partials/editor.html

@@ -53,7 +53,7 @@
 							</span>
 						</td>
 						<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
-							{{variable.query}}
+							{{variable.definition ? variable.definition : variable.query}}
 						</td>
 						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
 						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>

public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx

@@ -96,7 +96,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
 
   componentDidUpdate() {
     const { metricDescriptors, labels, metricTypes, services, ...queryModel } = this.state;
-    this.props.onChange(queryModel);
+    const queryName = this.queryTypes.find(q => q.value === this.state.selectedQueryType);
+    this.props.onChange(queryModel, `Stackdriver - ${queryName.name}`);
   }
 
   isLabelQuery(queryType) {

public/app/types/plugins.ts

@@ -102,7 +102,7 @@ export interface PluginsState {
 
 export interface TemplateQueryProps {
   query: any;
-  onChange: (c: any) => void;
+  onChange: (c: any, definition: string) => void;
   datasource: any;
-  // datasource: StackdriverDatasource;
+  definition: string;
 }