feat(influxdb): began work on some influxdb enhancements, #2311

docs/sources/guides/gettingstarted.md

@@ -48,7 +48,6 @@ in the main Time Picker in the upper right, but they can also have relative time
 2. To edit the graph you click on the graph title to open the panel menu, then `Edit`.
 2. To edit the graph you click on the graph title to open the panel menu, then `Edit`.
 3. This should take you to the `Metrics` tab. In this tab you should see the editor for your default data source.
 3. This should take you to the `Metrics` tab. In this tab you should see the editor for your default data source.
 
 
-
 ## Drag-and-Drop panels
 ## Drag-and-Drop panels
 
 
 You can Drag-and-Drop Panels within and between Rows. Click and hold the Panel title, and drag it to its new location.
 You can Drag-and-Drop Panels within and between Rows. Click and hold the Panel title, and drag it to its new location.

public/app/plugins/datasource/influxdb/funcEditor.js

@@ -11,30 +11,26 @@ function (angular, _, $) {
     .directive('influxdbFuncEditor', function($compile) {
     .directive('influxdbFuncEditor', function($compile) {
 
 
       var funcSpanTemplate = '<a gf-dropdown="functionMenu" class="dropdown-toggle" ' +
       var funcSpanTemplate = '<a gf-dropdown="functionMenu" class="dropdown-toggle" ' +
-                             'data-toggle="dropdown">{{target.function}}</a><span>(</span>';
+                             'data-toggle="dropdown">{{field.func}}</a><span>(</span>';
 
 
       var paramTemplate = '<input type="text" style="display:none"' +
       var paramTemplate = '<input type="text" style="display:none"' +
                           ' class="input-mini tight-form-func-param"></input>';
                           ' class="input-mini tight-form-func-param"></input>';
 
 
       return {
       return {
         restrict: 'A',
         restrict: 'A',
+        scope: {
+          field: "=",
+        },
         link: function postLink($scope, elem) {
         link: function postLink($scope, elem) {
           var $funcLink = $(funcSpanTemplate);
           var $funcLink = $(funcSpanTemplate);
 
 
-          $scope.functionMenu = _.map($scope.functions, function(func) {
-            return {
-              text: func,
-              click: "changeFunction('" + func + "');"
-            };
-          });
-
           function clickFuncParam() {
           function clickFuncParam() {
             /*jshint validthis:true */
             /*jshint validthis:true */
 
 
             var $link = $(this);
             var $link = $(this);
             var $input = $link.next();
             var $input = $link.next();
 
 
-            $input.val($scope.target.column);
+            $input.val($scope.field.name);
             $input.css('width', ($link.width() + 16) + 'px');
             $input.css('width', ($link.width() + 16) + 'px');
 
 
             $link.hide();
             $link.hide();
@@ -58,7 +54,7 @@ function (angular, _, $) {
             if ($input.val() !== '') {
             if ($input.val() !== '') {
               $link.text($input.val());
               $link.text($input.val());
 
 
-              $scope.target.column = $input.val();
+              $scope.field.name = $input.val();
               $scope.$apply($scope.get_data);
               $scope.$apply($scope.get_data);
             }
             }
 
 
@@ -84,7 +80,7 @@ function (angular, _, $) {
 
 
             $input.typeahead({
             $input.typeahead({
               source: function () {
               source: function () {
-                return $scope.listColumns.apply(null, arguments);
+                return $scope.getFields.apply(null, arguments);
               },
               },
               minLength: 0,
               minLength: 0,
               items: 20,
               items: 20,

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

@@ -65,10 +65,9 @@
 				<li class="tight-form-item query-keyword" style="width: 75px;">
 				<li class="tight-form-item query-keyword" style="width: 75px;">
 					SELECT
 					SELECT
 				</li>
 				</li>
-				<li class="dropdown tight-form-item">
-					<a gf-dropdown="functionMenu" class="dropdown-toggle" data-toggle="dropdown">
-						{{target.function}}<span>(value)</span>
-					</a>
+				<li class="dropdown" ng-repeat="field in target.fields">
+					<span influxdb-func-editor field="field" class="tight-form-item tight-form-func">
+					</span>
 				</li>
 				</li>
 			</ul>
 			</ul>
 
 
@@ -114,8 +113,8 @@
 					<i class="fa fa-eye invisible"></i>
 					<i class="fa fa-eye invisible"></i>
 				</li>
 				</li>
 
 
-				<li class="tight-form-item" >
-					<span class="query-keyword">GROUP BY</span>
+				<li class="tight-form-item query-keyword">
+					GROUP BY
 				</li>
 				</li>
 
 
 				<li class="tight-form-item">
 				<li class="tight-form-item">

public/app/plugins/datasource/influxdb/queryBuilder.js

@@ -32,12 +32,15 @@ function (_) {
 
 
     if (type === 'TAG_KEYS') {
     if (type === 'TAG_KEYS') {
       query = 'SHOW TAG KEYS';
       query = 'SHOW TAG KEYS';
-      measurement= this.target.measurement;
+      measurement = this.target.measurement;
     } else if (type === 'TAG_VALUES') {
     } else if (type === 'TAG_VALUES') {
       query = 'SHOW TAG VALUES';
       query = 'SHOW TAG VALUES';
-      measurement= this.target.measurement;
+      measurement = this.target.measurement;
     } else if (type === 'MEASUREMENTS') {
     } else if (type === 'MEASUREMENTS') {
       query = 'SHOW MEASUREMENTS';
       query = 'SHOW MEASUREMENTS';
+    } else if (type === 'FIELDS') {
+      query = 'SHOW FIELD KEYS FROM "' + this.target.measurement + '"';
+      return query;
     }
     }
 
 
     if (measurement) {
     if (measurement) {

public/app/plugins/datasource/influxdb/queryCtrl.js

@@ -21,9 +21,12 @@ function (angular, _, InfluxQueryBuilder) {
 
 
     $scope.init = function() {
     $scope.init = function() {
       var target = $scope.target;
       var target = $scope.target;
-      target.function = target.function || 'mean';
       target.tags = target.tags || [];
       target.tags = target.tags || [];
       target.groupByTags = target.groupByTags || [];
       target.groupByTags = target.groupByTags || [];
+      target.fields = target.fields || [{
+        name: 'value',
+        func: target.function || 'mean'
+      }];
 
 
       $scope.queryBuilder = new InfluxQueryBuilder(target);
       $scope.queryBuilder = new InfluxQueryBuilder(target);
 
 
@@ -94,6 +97,15 @@ function (angular, _, InfluxQueryBuilder) {
       $scope.$parent.get_data();
       $scope.$parent.get_data();
     };
     };
 
 
+    $scope.getFields = function(query, callback) {
+      var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS');
+      return $scope.datasource.metricFindQuery(fieldsQuery)
+      .then(function(results) {
+        var fields = _.pluck(results, 'text');
+        callback(fields);
+      });
+    };
+
     $scope.toggleQueryMode = function () {
     $scope.toggleQueryMode = function () {
       $scope.target.rawQuery = !$scope.target.rawQuery;
       $scope.target.rawQuery = !$scope.target.rawQuery;
     };
     };

public/test/specs/influx09-querybuilder-specs.js

@@ -130,6 +130,12 @@ define([
         expect(query).to.be('SHOW TAG VALUES FROM "cpu" WITH KEY = "app" WHERE "host" =~ /server.*/');
         expect(query).to.be('SHOW TAG VALUES FROM "cpu" WITH KEY = "app" WHERE "host" =~ /server.*/');
       });
       });
 
 
+      it('should build show field query', function() {
+        var builder = new InfluxQueryBuilder({measurement: 'cpu', tags: [{key: 'app', value: 'email'}]});
+        var query = builder.buildExploreQuery('FIELDS');
+        expect(query).to.be('SHOW FIELD KEYS FROM "cpu"');
+      });
+
     });
     });
 
 
   });
   });