Query helpers for IFQL datasource

* raw CSV preview next to query field (query inspector is not that
 useful here)
* added result table and record counts

public/app/plugins/datasource/influxdb-ifql/README.md

@@ -16,11 +16,9 @@ Read more about InfluxDB here:
 
 ## Roadmap
 
-- Sync Grafana time ranges with `range()`
-- Template variable expansion
+- metricFindQuery
 - Syntax highlighting
 - Tab completion (functions, values)
-- Result helpers (result counts, table previews)
 - Annotations support
 - Alerting integration
 - Explore UI integration

public/app/plugins/datasource/influxdb-ifql/datasource.ts

@@ -81,13 +81,9 @@ export default class InfluxDatasource {
       const { query, resultFormat } = target;
 
       if (resultFormat === 'table') {
-        return (
-          this._seriesQuery(query, options)
+        return this._seriesQuery(query, options)
           .then(response => parseResults(response.data))
-            // Keep only first result from each request
-            .then(results => results[0])
-            .then(getTableModelFromResult)
-        );
+          .then(results => results.map(getTableModelFromResult));
       } else {
         return this._seriesQuery(query, options)
           .then(response => parseResults(response.data))

public/app/plugins/datasource/influxdb-ifql/partials/query.editor.html

 <query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true">
 
   <div class="gf-form">
-    <textarea rows="3" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" placeholder="IFQL Query" ng-model-onblur
+    <textarea rows="10" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" placeholder="IFQL Query" ng-model-onblur
       ng-change="ctrl.refresh()"></textarea>
+    <!-- Result preview -->
+    <textarea rows="10" class="gf-form-input" ng-model="ctrl.dataPreview" readonly></textarea>
   </div>
   <div class="gf-form-inline">
     <div class="gf-form">
@@ -12,9 +14,15 @@
           ng-change="ctrl.refresh()"></select>
       </div>
     </div>
-    <div class="gf-form max-width-25" ng-hide="ctrl.target.resultFormat === 'table'">
-      <label class="gf-form-label query-keyword">ALIAS BY</label>
-      <input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
+    <div class="gf-form" ng-if="ctrl.panelCtrl.loading">
+      <label class="gf-form-label">
+        <i class="fa fa-spinner fa-spin"></i> Loading</label>
+    </div>
+    <div class="gf-form" ng-if="!ctrl.panelCtrl.loading">
+      <label class="gf-form-label">Result tables</label>
+      <input type="text" class="gf-form-input" ng-model="ctrl.resultTableCount" disabled="disabled">
+      <label class="gf-form-label">Result records</label>
+      <input type="text" class="gf-form-input" ng-model="ctrl.resultRecordCount" disabled="disabled">
     </div>
     <div class="gf-form gf-form--grow">
       <div class="gf-form-label gf-form-label--grow"></div>

public/app/plugins/datasource/influxdb-ifql/query_ctrl.ts

+import appEvents from 'app/core/app_events';
 import { QueryCtrl } from 'app/plugins/sdk';
 
 function makeDefaultQuery(database) {
@@ -9,18 +10,46 @@ function makeDefaultQuery(database) {
 export class InfluxIfqlQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
 
+  dataPreview: string;
+  resultRecordCount: string;
+  resultTableCount: string;
   resultFormats: any[];
 
   /** @ngInject **/
   constructor($scope, $injector) {
     super($scope, $injector);
 
+    this.resultRecordCount = '';
+    this.resultTableCount = '';
+
     if (this.target.query === undefined) {
       this.target.query = makeDefaultQuery(this.datasource.database);
     }
     this.resultFormats = [{ text: 'Time series', value: 'time_series' }, { text: 'Table', value: 'table' }];
+
+    appEvents.on('ds-request-response', this.onResponseReceived, $scope);
+    this.panelCtrl.events.on('refresh', this.onRefresh, $scope);
+    this.panelCtrl.events.on('data-received', this.onDataReceived, $scope);
   }
 
+  onDataReceived = dataList => {
+    this.resultRecordCount = dataList.reduce((count, model) => {
+      const records = model.type === 'table' ? model.rows.length : model.datapoints.length;
+      return count + records;
+    }, 0);
+    this.resultTableCount = dataList.length;
+  };
+
+  onResponseReceived = response => {
+    this.dataPreview = response.data;
+  };
+
+  onRefresh = () => {
+    this.dataPreview = '';
+    this.resultRecordCount = '';
+    this.resultTableCount = '';
+  };
+
   getCollapsedText() {
     return this.target.query;
   }