feat(query editors): more work on query editors make over

public/app/features/panel/metrics_ds_selector.ts

@@ -79,7 +79,7 @@ export class MetricsDsSelectorCtrl {
   }
 
   addDataQuery(datasource) {
-    var target: any = {};
+    var target: any = {isNew: true};
 
     if (datasource) {
       target.datasource = datasource.name;

public/app/features/panel/partials/query_editor_row.html

@@ -10,14 +10,22 @@
 		</label>
 	</div>
 
-	<div ng-transclude class="gf-form-query-content">
+	<div class="gf-form-query-content" ng-if="ctrl.collapsed">
+		<div class="gf-form">
+			<label class="gf-form-label gf-form-filler pointer" ng-click="ctrl.toggleCollapse()">
+				{{ctrl.collapsedText}}
+			</label>
+		</div>
+	</div>
+
+	<div ng-transclude class="gf-form-query-content" ng-if="!ctrl.collapsed">
 	</div>
 
 	<div class="gf-form">
 		<label class="gf-form-label">
-			<a class="pointer" tabindex="1" ng-click="ctrl.collapsed = !ctrl.collapsed">
-				<i class="fa fa-chevron-down" ng-hide="ctrl.collapsed"></i>
-				<i class="fa fa-chevron-left" ng-show="ctrl.collapsed"></i>
+			<a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()">
+				<i class="fa fa-fw fa-chevron-down" ng-hide="ctrl.collapsed"></i>
+				<i class="fa fa-fw fa-chevron-left" ng-show="ctrl.collapsed"></i>
 			</a>
 		</label>
 		<label class="gf-form-label dropdown">

public/app/features/panel/query_ctrl.ts

@@ -10,50 +10,14 @@ export class QueryCtrl {
   panel: any;
   hasRawMode: boolean;
   error: string;
-  collapsed: boolean;
 
   constructor(public $scope, private $injector) {
     this.panel = this.panelCtrl.panel;
-    this.collapsed = true;
-
-    if (!this.target.refId) {
-      this.target.refId = this.getNextQueryLetter();
-    }
-  }
-
-  getNextQueryLetter() {
-    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
-    return _.find(letters, refId => {
-      return _.every(this.panel.targets, function(other) {
-        return other.refId !== refId;
-      });
-    });
-  }
-
-  removeQuery() {
-    this.panel.targets = _.without(this.panel.targets, this.target);
-    this.panelCtrl.refresh();
-  };
-
-  duplicateQuery() {
-    var clone = angular.copy(this.target);
-    clone.refId = this.getNextQueryLetter();
-    this.panel.targets.push(clone);
-  }
-
-  moveQuery(direction) {
-    var index = _.indexOf(this.panel.targets, this.target);
-    _.move(this.panel.targets, index, index + direction);
   }
 
   refresh() {
     this.panelCtrl.refresh();
   }
 
-  toggleHideQuery() {
-    this.target.hide = !this.target.hide;
-    this.panelCtrl.refresh();
-  }
 }
 

public/app/features/panel/query_editor_row.ts

@@ -1,17 +1,101 @@
 ///<reference path="../../headers/common.d.ts" />
 
 import angular from 'angular';
-import $ from 'jquery';
+import _ from 'lodash';
 
 var module = angular.module('grafana.directives');
 
+export class QueryRowCtrl {
+  collapsedText: string;
+  canCollapse: boolean;
+  getCollapsedText: any;
+  target: any;
+  queryCtrl: any;
+  panelCtrl: any;
+  panel: any;
+  collapsed: any;
+
+  constructor() {
+    this.panelCtrl = this.queryCtrl.panelCtrl;
+    this.target = this.queryCtrl.target;
+    this.panel = this.panelCtrl.panel;
+
+    this.toggleCollapse();
+
+    if (this.target.isNew) {
+      delete this.target.isNew;
+      this.toggleCollapse();
+    }
+
+    if (!this.target.refId) {
+      this.target.refId = this.getNextQueryLetter();
+    }
+  }
+
+  toggleHideQuery() {
+    this.target.hide = !this.target.hide;
+    this.panelCtrl.refresh();
+  }
+
+  getNextQueryLetter() {
+    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+    return _.find(letters, refId => {
+      return _.every(this.panel.targets, function(other) {
+        return other.refId !== refId;
+      });
+    });
+  }
+
+  toggleCollapse() {
+    if (!this.canCollapse) {
+      return;
+    }
+
+    this.collapsed = !this.collapsed;
+
+    try {
+      this.collapsedText = this.queryCtrl.getCollapsedText();
+    } catch (e) {
+      var err = e.message || e.toString();
+      this.collapsedText = 'Error: ' + err;
+    }
+  }
+
+  toggleEditorMode() {
+    this.queryCtrl.toggleEditorMode();
+  }
+
+  removeQuery() {
+    this.panel.targets = _.without(this.panel.targets, this.target);
+    this.panelCtrl.refresh();
+  }
+
+  duplicateQuery() {
+    var clone = angular.copy(this.target);
+    clone.refId = this.getNextQueryLetter();
+    this.panel.targets.push(clone);
+  }
+
+  moveQuery(direction) {
+    var index = _.indexOf(this.panel.targets, this.target);
+    _.move(this.panel.targets, index, index + direction);
+  }
+}
+
 /** @ngInject **/
 function queryEditorRowDirective() {
   return {
     restrict: 'E',
+    controller: QueryRowCtrl,
+    bindToController: true,
+    controllerAs: "ctrl",
     templateUrl: 'public/app/features/panel/partials/query_editor_row.html',
     transclude: true,
-    scope: {ctrl: "="},
+    scope: {
+      queryCtrl: "=",
+      canCollapse: "=",
+    },
   };
 }
 

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

@@ -1,4 +1,4 @@
-<query-editor-row ctrl="ctrl">
+<query-editor-row query-ctrl="ctrl">
 
 	<div class="gf-form" ng-show="ctrl.target.textEditor">
 		<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>

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

@@ -1,98 +1,89 @@
-<query-editor-row ctrl="ctrl">
-
-  <div class="gf-form" ng-if="ctrl.collapsed">
-    <label class="gf-form-label gf-form-filler pointer" ng-click="ctrl.collapsed = !ctrl.collapsed">
-      {{ctrl.target.query}}
-    </label>
-  </div>
-
-  <div ng-if="!ctrl.collapsed">
-
-    <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>
-    </div>
-
-    <div ng-if="!ctrl.target.rawQuery">
-
-      <div class="gf-form-inline">
-        <div class="gf-form">
-          <label class="gf-form-label query-keyword width-7">FROM</label>
-
-          <metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
-          <metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
-        </div>
-
-        <div class="gf-form">
-          <label class="gf-form-label query-keyword">WHERE</label>
-
-          <div ng-repeat="segment in ctrl.tagSegments">
-            <metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
-          </div>
-        </div>
-
-        <div class="gf-form-filler"></div>
-      </div>
-
-      <div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
-        <div class="gf-form">
-          <label class="gf-form-label query-keyword width-7">
-            <span ng-show="$index === 0">SELECT</span>
-          </label>
-        </div>
-
-        <div class="gf-form" ng-repeat="part in selectParts">
-          <influx-query-part-editor
-                             class="gf-form-label query-part"
-                             part="part"
-                             remove-action="ctrl.removeSelectPart(selectParts, part)"
-                             part-updated="ctrl.selectPartUpdated(selectParts, part)"
-                             get-options="ctrl.getPartOptions(part)">
-          </influx-query-part-editor>
-        </div>
-
-        <div class="gf-form">
-          <label class="dropdown"
-                 dropdown-typeahead="ctrl.selectMenu"
-                 dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
-          </label>
-        </div>
-
-        <div class="gf-form-filler"></div>
-      </div>
-
-      <div class="gf-form-inline">
-        <div class="gf-form">
-          <label class="gf-form-label query-keyword width-7">
-            <span>GROUP BY</span>
-          </label>
-
-          <influx-query-part-editor
-                 ng-repeat="part in ctrl.queryModel.groupByParts"
-                 part="part"
-                 class="gf-form-label query-part"
-                 remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)">
-          </influx-query-part-editor>
-
-          <metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
-        </div>
-
-        <div class="gf-form-filler"></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>
-      </div>
-      <div class="gf-form-filler"></div>
-    </div>
-  </div>
+<query-editor-row query-ctrl="ctrl" can-collapse="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>
+	</div>
+
+	<div ng-if="!ctrl.target.rawQuery">
+
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword width-7">FROM</label>
+
+				<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
+				<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
+			</div>
+
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword">WHERE</label>
+
+				<div ng-repeat="segment in ctrl.tagSegments">
+					<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
+				</div>
+			</div>
+
+			<div class="gf-form-filler"></div>
+		</div>
+
+		<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword width-7">
+					<span ng-show="$index === 0">SELECT</span>
+				</label>
+			</div>
+
+			<div class="gf-form" ng-repeat="part in selectParts">
+				<influx-query-part-editor
+														class="gf-form-label query-part"
+														part="part"
+														remove-action="ctrl.removeSelectPart(selectParts, part)"
+														part-updated="ctrl.selectPartUpdated(selectParts, part)"
+														get-options="ctrl.getPartOptions(part)">
+				</influx-query-part-editor>
+			</div>
+
+			<div class="gf-form">
+				<label class="dropdown"
+								dropdown-typeahead="ctrl.selectMenu"
+								dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
+				</label>
+			</div>
+
+			<div class="gf-form-filler"></div>
+		</div>
+
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword width-7">
+					<span>GROUP BY</span>
+				</label>
+
+				<influx-query-part-editor
+								ng-repeat="part in ctrl.queryModel.groupByParts"
+								part="part"
+								class="gf-form-label query-part"
+								remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)">
+				</influx-query-part-editor>
+
+				<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
+			</div>
+
+			<div class="gf-form-filler"></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>
+		</div>
+		<div class="gf-form-filler"></div>
+	</div>
 
 </query-editor-row>

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

@@ -23,6 +23,7 @@ export class InfluxQueryCtrl extends QueryCtrl {
   measurementSegment: any;
   removeTagFilterSegment: any;
 
+
   /** @ngInject **/
   constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) {
     super($scope, $injector);
@@ -316,5 +317,9 @@ export class InfluxQueryCtrl extends QueryCtrl {
       return '=';
     }
   }
+
+  getCollapsedText() {
+    return this.queryModel.render(false);
+  }
 }