mysqlds: adds support for template variables

Fixes #8855

public/app/features/templating/query_variable.ts

@@ -128,7 +128,7 @@ export class QueryVariable implements Variable {
   }
 
   metricFindQuery(datasource, query) {
-    var options = {range: undefined};
+    var options = {range: undefined, variable: this};
 
     if (this.refresh === 2) {
       options.range = this.timeSrv.timeRange();

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

@@ -14,11 +14,11 @@ export class MysqlDatasource {
 
   interpolateVariable(value) {
     if (typeof value === 'string') {
-      return '\"' + value + '\"';
+      return '\'' + value + '\'';
     }
 
     var quotedValues = _.map(value, function(val) {
-      return '\"' + val + '\"';
+      return '\'' + val + '\'';
     });
     return  quotedValues.join(',');
   }
@@ -114,6 +114,48 @@ export class MysqlDatasource {
     return list;
   }
 
+  metricFindQuery(query, optionalOptions) {
+    let refId = 'tempvar';
+    if (optionalOptions && optionalOptions.variable && optionalOptions.variable.name) {
+      refId = optionalOptions.variable.name;
+    }
+
+    const interpolatedQuery = {
+      refId: refId,
+      datasourceId: this.id,
+      rawSql: this.templateSrv.replace(query, {}, this.interpolateVariable),
+      format: 'table',
+    };
+
+    return this.backendSrv.datasourceRequest({
+      url: '/api/tsdb/query',
+      method: 'POST',
+      data: {
+        queries: [interpolatedQuery],
+      }
+    })
+    .then(this.transformFindQueryResponse.bind(this, refId));
+  }
+
+  transformFindQueryResponse(refId, results) {
+    if (!results || results.data.length === 0 || results.data.results[refId].meta.rowCount === 0) { return []; }
+
+    const rows = results.data.results[refId].tables[0].rows;
+    const res = [];
+    for (let i = 0; i < rows.length; i++) {
+      for (let j = 0; j < rows[i].length; j++) {
+        const value = rows[i][j];
+        if ( res.indexOf( value ) === -1 ) {
+          res.push(value);
+        }
+      }
+    }
+
+    return _.map(res, value => {
+      return { text: value};
+    });
+  }
+
   testDatasource() {
     return this.backendSrv.datasourceRequest({
       url: '/api/tsdb/query',

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

@@ -76,4 +76,42 @@ describe('MySQLDatasource', function() {
     });
   });
 
+  describe('When performing metricFindQuery', function() {
+    let results;
+    const query = 'select * from atable';
+    const response = {
+      results: {
+        tempvar: {
+          meta: {
+            rowCount: 3
+          },
+          refId: 'tempvar',
+          tables: [
+            {
+              columns: [{text: 'time_sec'}, {text: 'title'}, {text: 'text'}],
+              rows: [
+                ['aTitle', 'some text'],
+                ['aTitle2', 'some text2'],
+                ['aTitle3', 'some text3']
+              ]
+            }
+          ]
+        }
+      }
+    };
+
+    beforeEach(function() {
+      ctx.backendSrv.datasourceRequest = function(options) {
+        return ctx.$q.when({data: response, status: 200});
+      };
+      ctx.ds.metricFindQuery(query).then(function(data) { results = data; });
+      ctx.$rootScope.$apply();
+    });
+
+    it('should return list of all column values', function() {
+      expect(results.length).to.be(6);
+      expect(results[0].text).to.be('aTitle');
+      expect(results[5].text).to.be('some text3');
+    });
+  });
 });