feat(plugins): extracted first plugin row to its own component

public/app/core/directives/rebuild_on_change.ts

@@ -32,31 +32,38 @@ function rebuildOnChange($animate) {
     priority: 600,
     restrict: 'E',
     link: function(scope, elem, attrs, ctrl, transclude) {
-      var childScope, previousElements;
-      var uncompiledHtml;
+      var block, childScope, previousElements;
 
       function cleanUp() {
+        if (previousElements) {
+          previousElements.remove();
+          previousElements = null;
+        }
         if (childScope) {
           childScope.$destroy();
           childScope = null;
-          elem.empty();
+        }
+        if (block) {
+          previousElements = getBlockNodes(block.clone);
+          $animate.leave(previousElements).then(function() {
+            previousElements = null;
+          });
+          block = null;
         }
       }
 
       scope.$watch(attrs.property, function rebuildOnChangeAction(value, oldValue) {
-        if (value || attrs.showNull) {
-          // if same value and we have childscope
-          // ignore this double event
-          if (value === oldValue && childScope) {
-            return;
-          }
-
+        if (childScope && value !== oldValue) {
           cleanUp();
+        }
+
+        if (!childScope && (value || attrs.showNull)) {
           transclude(function(clone, newScope) {
             childScope = newScope;
+            clone[clone.length++] = document.createComment(' end rebuild on change ');
+            block = {clone: clone};
             $animate.enter(clone, elem.parent(), elem);
           });
-
         } else {
           cleanUp();
         }

public/app/features/panel/all.js

@@ -5,4 +5,5 @@ define([
   './panel_loader',
   './query_ctrl',
   './panel_editor_tab',
+  './query_editor_row',
 ], function () {});

public/app/features/panel/metrics_panel_ctrl.ts

@@ -164,12 +164,12 @@ class MetricsPanelCtrl extends PanelCtrl {
     };
 
   issueQueries(datasource) {
+    this.updateTimeRange();
+
     if (!this.panel.targets || this.panel.targets.length === 0) {
       return this.$q.when([]);
     }
 
-    this.updateTimeRange();
-
     var metricsQuery = {
       range: this.range,
       rangeRaw: this.rangeRaw,

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

@@ -0,0 +1,56 @@
+<div class="tight-form">
+	<ul class="tight-form-list pull-right">
+		<li ng-show="ctrl.parserError" class="tight-form-item">
+			<a bs-tooltip="ctrl.parserError" style="color: rgb(229, 189, 28)" role="menuitem">
+				<i class="fa fa-warning"></i>
+			</a>
+		</li>
+		<li class="tight-form-item small" ng-show="ctrl.target.datasource">
+			<em>{{ctrl.target.datasource}}</em>
+		</li>
+		<li class="tight-form-item" ng-if="ctrl.toggleEditorMode">
+			<a class="pointer" tabindex="1" ng-click="ctrl.toggleEditorMode()">
+				<i class="fa fa-pencil"></i>
+			</a>
+		</li>
+		<li class="tight-form-item">
+			<div class="dropdown">
+				<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
+					<i class="fa fa-bars"></i>
+				</a>
+				<ul class="dropdown-menu pull-right" role="menu">
+					<li role="menuitem">
+						<a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
+					</li>
+					<li role="menuitem">
+						<a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
+					</li>
+					<li role="menuitem">
+						<a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
+					</li>
+				</ul>
+			</div>
+		</li>
+		<li class="tight-form-item last">
+			<a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(target)">
+				<i class="fa fa-remove"></i>
+			</a>
+		</li>
+	</ul>
+
+	<ul class="tight-form-list">
+		<li class="tight-form-item" style="min-width: 15px; text-align: center">
+			{{ctrl.target.refId}}
+		</li>
+		<li>
+			<a class="tight-form-item" ng-click="ctrl.toggleHideQuery()" role="menuitem">
+				<i class="fa fa-eye"></i>
+			</a>
+		</li>
+	</ul>
+
+	<ul class="tight-form-list" ng-transclude>
+	</ul>
+
+	<div class="clearfix"></div>
+</div>

public/app/features/panel/query_ctrl.ts

@@ -8,6 +8,7 @@ export class QueryCtrl {
   datasource: any;
   panelCtrl: any;
   panel: any;
+  hasRawMode: boolean;
 
   constructor(public $scope, private $injector) {
     this.panel = this.panelCtrl.panel;

public/app/features/panel/query_editor_row.ts

@@ -0,0 +1,18 @@
+///<reference path="../../headers/common.d.ts" />
+
+import angular from 'angular';
+import $ from 'jquery';
+
+var module = angular.module('grafana.directives');
+
+/** @ngInject **/
+function queryEditorRowDirective() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/panel/partials/query_editor_row.html',
+    transclude: true,
+    scope: { ctrl: "=" },
+  };
+}
+
+module.directive('queryEditorRow', queryEditorRowDirective);

public/app/partials/metrics.html

@@ -1,10 +1,12 @@
 <div class="editor-row">
 
 	<div class="tight-form-container">
-		<!-- <rebuild&#45;on&#45;change property="ctrl.panel.datasource" show&#45;null="true"> -->
-		<!-- 	<plugin&#45;component type="query&#45;ctrl" ng&#45;repeat="target in ctrl.panel.targets" ng&#45;class="{'tight&#45;form&#45;disabled': target.hide}"> -->
-		<!-- 	</plugin&#45;component> -->
-		<!-- </rebuild&#45;on&#45;change> -->
+		<div ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
+			<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
+				<plugin-component type="query-ctrl">
+				</plugin-component>
+			</rebuild-on-change>
+		</div>
 	</div>
 
 	<div style="margin: 20px 0 0 0">

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

@@ -1,61 +1,7 @@
-<div class="tight-form">
-	<ul class="tight-form-list pull-right">
-		<li ng-show="ctrl.parserError" class="tight-form-item">
-			<a bs-tooltip="ctrl.parserError" style="color: rgb(229, 189, 28)" role="menuitem">
-				<i class="fa fa-warning"></i>
-			</a>
-		</li>
-		<li class="tight-form-item small" ng-show="ctrl.target.datasource">
-			<em>{{ctrl.target.datasource}}</em>
-		</li>
-		<li class="tight-form-item">
-			<a class="pointer" tabindex="1" ng-click="ctrl.toggleEditorMode()">
-				<i class="fa fa-pencil"></i>
-			</a>
-		</li>
-		<li class="tight-form-item">
-			<div class="dropdown">
-				<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
-					<i class="fa fa-bars"></i>
-				</a>
-				<ul class="dropdown-menu pull-right" role="menu">
-					<li role="menuitem">
-						<a tabindex="1" ng-click="ctrl.toggleEditorMode()">
-							Switch editor mode
-						</a>
-					</li>
-					<li role="menuitem">
-						<a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
-					</li>
-					<li role="menuitem">
-						<a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
-					</li>
-					<li role="menuitem">
-						<a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
-					</li>
-				</ul>
-			</div>
-		</li>
-		<li class="tight-form-item last">
-			<a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(target)">
-				<i class="fa fa-remove"></i>
-			</a>
-		</li>
-	</ul>
-
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="min-width: 15px; text-align: center">
-			{{ctrl.target.refId}}
-		</li>
-		<li>
-			<a class="tight-form-item" ng-click="ctrl.toggleHideQuery()" role="menuitem">
-				<i class="fa fa-eye"></i>
-			</a>
-		</li>
-	</ul>
+<query-editor-row ctrl="ctrl" controls="true">
 
 	<span style="display: block; overflow: hidden;">
-		<input type="text" class="tight-form-clear-input" style="width: 100%;" ng-model="ctrl.target.target" give-focus="ctrl.target.textEditor" spellcheck='false' ng-model-onblur ng-change="ctrl.refresh()" ng-show="ctrl.target.textEditor"></input>
+		<input type="text" class="tight-form-clear-input" style="width: 100%;" ng-model="ctrl.target.target" give-focus="ctrl.target.textEditor" spellcheck='false' ng-model-onblur ng-change="ctrl.targetTextChanged()" ng-show="ctrl.target.textEditor"></input>
 	</span>
 
 	<ul class="tight-form-list" role="menu" ng-hide="ctrl.target.textEditor">
@@ -69,5 +15,5 @@
 		<li class="dropdown" graphite-add-func>
 		</li>
 	</ul>
-	<div class="clearfix"></div>
-</div>
+
+</query-editor-row>

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

@@ -17,6 +17,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   segments: any[];
   parserError: string;
 
+  /** @ngInject **/
   constructor($scope, $injector, private uiSegmentSrv, private templateSrv) {
     super($scope, $injector);
 

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

@@ -1,118 +1,82 @@
-<div class="tight-form">
-  <ul class="tight-form-list pull-right">
-    <li class="tight-form-item small" ng-show="ctrl.target.datasource">
-      <em>{{ctrl.target.datasource}}</em>
-    </li>
-    <li class="tight-form-item">
-      <div class="dropdown">
-        <a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
-          <i class="fa fa-bars"></i>
-        </a>
-        <ul class="dropdown-menu pull-right" role="menu">
-          <li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a></li>
-          <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a></li>
-          <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a></li>
-        </ul>
-      </div>
-    </li>
-    <li class="tight-form-item last">
-      <a class="pointer" tabindex="1" ng-click="ctrl.removeQuery()">
-        <i class="fa fa-remove"></i>
-      </a>
-    </li>
-  </ul>
-
-  <ul class="tight-form-list">
-    <li class="tight-form-item" style="min-width: 15px; text-align: center">
-      {{ctrl.target.refId}}
-    </li>
-    <li>
-      <a class="tight-form-item" ng-click="ctrl.toggleHideQuery();" role="menuitem">
-        <i class="fa fa-eye"></i>
-      </a>
-    </li>
-  </ul>
+<query-editor-row ctrl="ctrl" controls="true">
 
-  <ul class="tight-form-list" role="menu">
-    <li class="tight-form-item" style="width: 94px">
-      Query
-    </li>
-    <li>
-      <input type="text"
-             class="input-xxlarge tight-form-input"
-             ng-model="ctrl.target.expr"
-             spellcheck='false'
-             placeholder="query expression"
-             data-min-length=0 data-items=100
-             ng-model-onblur
-             ng-change="ctrl.refreshMetricData()">
-    </li>
-    <li class="tight-form-item">
-      Metric
-    </li>
-    <li>
-      <input type="text"
-             class="input-medium tight-form-input"
-             ng-model="ctrl.target.metric"
-             spellcheck='false'
-             bs-typeahead="ctrl.suggestMetrics"
-             placeholder="metric name"
-             data-min-length=0 data-items=100>
-    </li>
-  </ul>
+	<li class="tight-form-item" style="width: 94px">
+		Query
+	</li>
+	<li>
+		<input type="text"
+		class="input-xxlarge tight-form-input"
+		ng-model="ctrl.target.expr"
+		spellcheck='false'
+		placeholder="query expression"
+		data-min-length=0 data-items=100
+		ng-model-onblur
+		ng-change="ctrl.refreshMetricData()">
+	</li>
+	<li class="tight-form-item">
+		Metric
+	</li>
+	<li>
+		<input type="text"
+		class="input-medium tight-form-input"
+		ng-model="ctrl.target.metric"
+		spellcheck='false'
+		bs-typeahead="ctrl.suggestMetrics"
+		placeholder="metric name"
+		data-min-length=0 data-items=100>
+	</li>
 
-  <div class="clearfix"></div>
-</div>
+</query-editor-row>
 
 <div class="tight-form">
-  <ul class="tight-form-list" role="menu">
-    <li class="tight-form-item tight-form-align" style="width: 94px">
-      Legend format
-    </li>
-    <li>
-      <input type="text" class="tight-form-input input-xxlarge" ng-model="ctrl.target.legendFormat"
-             spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
-             ng-model-onblur ng-change="ctrl.refreshMetricData()">
-      </input>
-    </li>
-  </ul>
+	<ul class="tight-form-list" role="menu">
+		<li class="tight-form-item tight-form-align" style="width: 94px">
+			Legend format
+		</li>
+		<li>
+			<input type="text" class="tight-form-input input-xxlarge" ng-model="ctrl.target.legendFormat"
+			spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
+			ng-model-onblur ng-change="ctrl.refreshMetricData()">
+			</input>
+		</li>
+	</ul>
 
-  <div class="clearfix"></div>
+	<div class="clearfix"></div>
 </div>
 
 <div class="tight-form">
-  <ul class="tight-form-list" role="menu">
-    <li class="tight-form-item tight-form-align" style="width: 94px">
-      Step
-    </li>
-    <li>
-      <input type="text" class="input-mini tight-form-input" ng-model="ctrl.target.interval"
-             bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-             data-placement="right"
-             spellcheck='false'
-             placeholder="{{ctrl.panelCtrl.interval}}"
-             data-min-length=0 data-items=100
-             ng-model-onblur
-             ng-change="ctrl.refreshMetricData()"
-             />
-      </input>
-    </li>
+	<ul class="tight-form-list" role="menu">
+		<li class="tight-form-item tight-form-align" style="width: 94px">
+			Step
+		</li>
+		<li>
+			<input type="text" class="input-mini tight-form-input" ng-model="ctrl.target.interval"
+			bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+			data-placement="right"
+			spellcheck='false'
+			placeholder="{{ctrl.panelCtrl.interval}}"
+			data-min-length=0 data-items=100
+			ng-model-onblur
+			ng-change="ctrl.refreshMetricData()"
+			/>
+			</input>
+		</li>
 
-    <li class="tight-form-item">
-      Resolution
-    </li>
-    <li>
-      <select ng-model="ctrl.target.intervalFactor" class="tight-form-input input-mini"
-             ng-options="r.factor as r.label for r in ctrl.resolutions"
-             ng-change="ctrl.refreshMetricData()">
-      </select>
-    </li>
-    <li class="tight-form-item">
-      <a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
-        <i class="fa fa-share-square-o"></i>
-      </a>
-    </li>
-  </ul>
+		<li class="tight-form-item">
+			Resolution
+		</li>
+		<li>
+			<select ng-model="ctrl.target.intervalFactor" class="tight-form-input input-mini"
+				ng-options="r.factor as r.label for r in ctrl.resolutions"
+				ng-change="ctrl.refreshMetricData()">
+			</select>
+		</li>
+		<li class="tight-form-item">
+			<a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
+				<i class="fa fa-share-square-o"></i>
+			</a>
+		</li>
+	</ul>
 
-  <div class="clearfix"></div>
+	<div class="clearfix"></div>
 </div>