influxdb: improvements to influxdb query editor, SLIMIT, LIMIT and ORDER BY now added on demand by plus button

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

@@ -1,7 +1,7 @@
 <query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true">
 
 	<div class="gf-form" ng-if="ctrl.target.rawQuery">
-		<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
+    <textarea rows="3" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" placeholder="InfuxDB Query" ng-model-onblur ng-change="ctrl.refresh()"></textarea>
 	</div>
 
 	<div ng-if="!ctrl.target.rawQuery">
@@ -72,44 +72,51 @@
 			</div>
 		</div>
 
-		<div class="gf-form-inline">
-			<div class="gf-form">
-				<label class="gf-form-label query-keyword width-7">ORDER BY</label>
-				<label class="gf-form-label query-part width-4">time</label>
-				<div class="gf-form-select-wrapper">
-					<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.orderByTime" ng-options="f.value as f.text for f in ctrl.orderByTime" ng-change="ctrl.refresh()"></select>
-				</div>
-			</div>
-
-			<div class="gf-form max-width-14">
-				<label class="gf-form-label query-keyword width-5">LIMIT</label>
-				<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.limit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
+    <div class="gf-form-inline" ng-if="ctrl.target.orderByTime === 'DESC'">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">ORDER BY</label>
+        <label class="gf-form-label">time</label>
+        <label class="gf-form-label query-keyword" ng-click="ctrl.removeOrderBy()">DESC <i class="fa fa-remove"></i></label>
+      </div>
+      <div class="gf-form gf-form--grow">
+				<div class="gf-form-label gf-form-label--grow"></div>
 			</div>
+    </div>
 
-			<div class="gf-form max-width-14">
-				<label class="gf-form-label query-keyword width-5">SLIMIT</label>
-				<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.slimit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
-			</div>
-			<div class="gf-form gf-form--grow">
+    <div class="gf-form-inline" ng-if="ctrl.target.limit">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">LIMIT</label>
+        <input type="text" class="gf-form-input width-9" ng-model="ctrl.target.limit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
+      </div>
+      <div class="gf-form gf-form--grow">
 				<div class="gf-form-label gf-form-label--grow"></div>
 			</div>
-		</div>
-	</div>
+    </div>
 
-	<div class="gf-form-inline">
-		<div class="gf-form max-width-30">
-			<label class="gf-form-label query-keyword width-7">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>
-		<div class="gf-form">
-			<label class="gf-form-label">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>
+    <div class="gf-form-inline" ng-if="ctrl.target.slimit">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">SLIMIT</label>
+        <input type="text" class="gf-form-input width-9" ng-model="ctrl.target.slimit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
+      </div>
+      <div class="gf-form gf-form--grow">
+				<div class="gf-form-label gf-form-label--grow"></div>
 			</div>
-		</div>
-		<div class="gf-form gf-form--grow">
-			<div class="gf-form-label gf-form-label--grow"></div>
-		</div>
-	</div>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-30">
+        <label class="gf-form-label query-keyword width-7">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>
+      <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>
+        </div>
+      </div>
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+    </div>
 
 </query-editor-row>

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

@@ -33,11 +33,6 @@ export class InfluxQueryCtrl extends QueryCtrl {
       {text: 'Time series', value: 'time_series'},
       {text: 'Table', value: 'table'},
     ];
-    this.orderByTime = [
-      {text: 'ASC', value: 'ASC'},
-      {text: 'DESC', value: 'DESC'},
-    ];
-
     this.policySegment = uiSegmentSrv.newSegment(this.target.policy);
 
     if (!this.target.measurement) {
@@ -70,6 +65,10 @@ export class InfluxQueryCtrl extends QueryCtrl {
     this.removeTagFilterSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove tag filter --'});
   }
 
+  removeOrderByTime() {
+    this.target.orderByTime = 'ASC';
+  }
+
   buildSelectMenu() {
     var categories = queryPart.getCategories();
     this.selectMenu = _.reduce(categories, function(memo, cat, key) {
@@ -92,6 +91,15 @@ export class InfluxQueryCtrl extends QueryCtrl {
       if (!this.queryModel.hasFill()) {
         options.push(this.uiSegmentSrv.newSegment({value: 'fill(null)'}));
       }
+      if (!this.target.limit) {
+        options.push(this.uiSegmentSrv.newSegment({value: 'LIMIT'}));
+      }
+      if (!this.target.slimit) {
+        options.push(this.uiSegmentSrv.newSegment({value: 'SLIMIT'}));
+      }
+      if (this.target.orderByTime === 'ASC') {
+        options.push(this.uiSegmentSrv.newSegment({value: 'ORDER BY time DESC'}));
+      }
       if (!this.queryModel.hasGroupByTime()) {
         options.push(this.uiSegmentSrv.newSegment({value: 'time($interval)'}));
       }
@@ -103,7 +111,24 @@ export class InfluxQueryCtrl extends QueryCtrl {
   }
 
   groupByAction() {
-    this.queryModel.addGroupBy(this.groupBySegment.value);
+    switch (this.groupBySegment.value) {
+      case 'LIMIT': {
+        this.target.limit = 10;
+        break;
+      }
+      case 'SLIMIT': {
+        this.target.slimit = 10;
+        break;
+      }
+      case 'ORDER BY time DESC': {
+        this.target.orderByTime = 'DESC';
+        break;
+      }
+      default: {
+        this.queryModel.addGroupBy(this.groupBySegment.value);
+      }
+    }
+
     var plusButton = this.uiSegmentSrv.newPlusButton();
     this.groupBySegment.value  = plusButton.value;
     this.groupBySegment.html  = plusButton.html;