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

 ///<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

-<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

-<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">
+<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>
@@ -93,6 +85,5 @@
 		</div>
 		<div class="gf-form-filler"></div>
 	</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);
+  }
 }