mysql: worked on mysql data soruce

public/app/plugins/datasource/mysql/datasource.ts

@@ -22,6 +22,7 @@ export class MysqlDatasource {
         maxDataPoints: options.maxDataPoints,
         datasourceId: this.id,
         rawSql: item.rawSql,
+        format: item.format,
       };
     });
 
@@ -29,29 +30,31 @@ export class MysqlDatasource {
       return this.$q.when({data: []});
     }
 
-    return this.backendSrv.post('/api/tsdb/query', {
-      from: options.range.from.valueOf().toString(),
-      to: options.range.to.valueOf().toString(),
-      queries: queries,
-    }).then(res => {
-      console.log('mysql response', res);
-
-      var data = [];
-      if (res.results) {
-        _.forEach(res.results, queryRes => {
-
-          if (queryRes.error) {
-            throw {error: queryRes.error, message: queryRes.error};
-          }
-
-          for (let series of queryRes.series) {
-            data.push({
-              target: series.name,
-              datapoints: series.points
-            });
-          }
-        });
+    return this.backendSrv.datasourceRequest({
+      url: '/api/tsdb/query',
+      method: 'POST',
+      data: {
+        from: options.range.from.valueOf().toString(),
+        to: options.range.to.valueOf().toString(),
+        queries: queries,
       }
+    }).then(res => {
+      var data = [];
+
+      if (!res.data.results) {
+        return {data: data};
+      }
+
+      _.forEach(res.data.results, queryRes => {
+        for (let series of queryRes.series) {
+          data.push({
+            target: series.name,
+            datapoints: series.points,
+            refId: queryRes.refId,
+            meta: queryRes.meta,
+          });
+        }
+      });
 
       return {data: data};
     });

public/app/plugins/datasource/mysql/module.ts

@@ -1,25 +1,61 @@
 ///<reference path="../../../headers/common.d.ts" />
 
 import angular from 'angular';
+import _ from 'lodash';
 import {MysqlDatasource} from './datasource';
 import {QueryCtrl} from 'app/plugins/sdk';
 
+export interface MysqlQuery {
+  refId: string;
+  format: string;
+  alias: string;
+}
+
+export interface QueryMeta {
+  sql: string;
+}
+
 class MysqlQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
 
-  resultFormats: any;
-  target: any;
+  showLastQuerySQL: boolean;
+  formats: any[];
+  target: MysqlQuery;
+  lastQueryMeta: QueryMeta;
+  lastQueryError: string;
 
   constructor($scope, $injector) {
     super($scope, $injector);
 
-    this.target.resultFormat = 'time_series';
+    this.target.format = 'time_series';
     this.target.alias = "";
-    this.resultFormats = [
+    this.formats = [
       {text: 'Time series', value: 'time_series'},
       {text: 'Table', value: 'table'},
     ];
 
+    this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
+    this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
+  }
+
+  onDataReceived(dataList) {
+    this.lastQueryMeta = null;
+    this.lastQueryError = null;
+
+    let anySeriesFromQuery = _.find(dataList, {refId: this.target.refId});
+    if (anySeriesFromQuery) {
+      this.lastQueryMeta = anySeriesFromQuery.meta;
+    }
+  }
+
+  onDataError(err) {
+    if (err.data && err.data.results) {
+      let queryRes = err.data.results[this.target.refId];
+      if (queryRes) {
+        this.lastQueryMeta = queryRes.meta;
+        this.lastQueryError = queryRes.error;
+      }
+    }
   }
 }
 

public/app/plugins/datasource/mysql/partials/query.editor.html

@@ -9,7 +9,7 @@
     <div class="gf-form">
 			<label class="gf-form-label query-keyword">Format as</label>
 			<div class="gf-form-select-wrapper">
-				<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
+				<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
 			</div>
 		</div>
     <div class="gf-form max-width-30">
@@ -22,4 +22,20 @@
 		</div>
 	</div>
 
+  <div class="gf-form-inline" ng-show="ctrl.lastQueryMeta">
+    <div class="gf-form">
+      <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
+        Generated SQL
+        <i class="fa fa-caret-down" ng-show="ctrl.showLastQuerySQL"></i>
+        <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuerySQL"></i>
+      </label>
+		</div>
+    <div class="gf-form gf-form--grow">
+			<div class="gf-form-label gf-form-label--grow"></div>
+		</div>
+  </div>
+
+  <pre class="small" ng-show="ctrl.showLastQuerySQL">{{ctrl.lastQueryMeta.sql}}</pre>
+  <pre class="small alert alert-error" ng-show="ctrl.lastQueryError">{{ctrl.lastQueryError}}</pre>
+
 </query-editor-row>