feat(plugins): more progress on plugin editors

public/app/core/directives/plugin_component.ts

@@ -5,7 +5,7 @@ import _ from 'lodash';
 
 import coreModule from '../core_module';
 
-function pluginDirectiveLoader($compile, datasourceSrv) {
+function pluginDirectiveLoader($compile, datasourceSrv, $rootScope) {
 
   function getPluginComponentDirective(options) {
     return function() {
@@ -27,30 +27,53 @@ function pluginDirectiveLoader($compile, datasourceSrv) {
 
   function getModule(scope, attrs) {
     switch (attrs.type) {
-      case "metrics-query-editor":
+      // QueryCtrl
+      case "query-ctrl": {
         let datasource = scope.target.datasource || scope.ctrl.panel.datasource;
         return datasourceSrv.get(datasource).then(ds => {
           scope.datasource = ds;
 
           return System.import(ds.meta.module).then(dsModule => {
             return {
-              name: 'metrics-query-editor-' + ds.meta.id,
+              name: 'query-ctrl-' + ds.meta.id,
               bindings: {target: "=", panelCtrl: "=", datasource: "="},
               attrs: {"target": "target", "panel-ctrl": "ctrl", datasource: "datasource"},
               Component: dsModule.QueryCtrl
             };
           });
         });
+      }
+      // QueryOptionsCtrl
+      case "query-options-ctrl": {
+        return datasourceSrv.get(scope.ctrl.panel.datasource).then(ds => {
+          return System.import(ds.meta.module).then((dsModule): any => {
+            if (!dsModule.QueryOptionsCtrl) {
+              return {notFound: true};
+            }
 
-      case 'datasource-config-view':
+            return {
+              name: 'query-options-ctrl-' + ds.meta.id,
+              bindings: {panelCtrl: "="},
+              attrs: {"panel-ctrl": "ctrl"},
+              Component: dsModule.QueryOptionsCtrl
+            };
+          });
+        });
+      }
+      // ConfigCtrl
+      case 'datasource-config-ctrl': {
         return System.import(scope.datasourceMeta.module).then(function(dsModule) {
           return {
             name: 'ds-config-' + scope.datasourceMeta.id,
             bindings: {meta: "=", current: "="},
             attrs: {meta: "datasourceMeta", current: "current"},
-            Component: dsModule.ConfigView,
+            Component: dsModule.ConfigCtrl,
           };
         });
+      }
+      default: {
+        $rootScope.appEvent('alert-error', ['Plugin component error', 'could not find component '+ attrs.type]);
+      }
     }
   }
 
@@ -67,6 +90,11 @@ function pluginDirectiveLoader($compile, datasourceSrv) {
   }
 
   function registerPluginComponent(scope, elem, attrs, componentInfo) {
+    if (componentInfo.notFound) {
+      elem.empty();
+      return;
+    }
+
     if (!componentInfo.Component.registered) {
       var directiveName = attrs.$normalize(componentInfo.name);
       var directiveFn = getPluginComponentDirective(componentInfo);

public/app/core/directives/rebuild_on_change.ts

@@ -23,9 +23,11 @@ function getBlockNodes(nodes) {
   return blockNodes || nodes;
 }
 
-function rebuildOnChange($compile) {
+function rebuildOnChange($animate) {
 
   return {
+    multiElement: true,
+    terminal: true,
     transclude: true,
     priority: 600,
     restrict: 'E',
@@ -33,23 +35,31 @@ function rebuildOnChange($compile) {
       var childScope, previousElements;
       var uncompiledHtml;
 
-      scope.$watch(attrs.property, function rebuildOnChangeAction(value) {
-
+      function cleanUp() {
         if (childScope) {
           childScope.$destroy();
           childScope = null;
           elem.empty();
         }
+      }
 
-        if (value || attrs.ignoreNull) {
-          if (!childScope) {
-            transclude(function(clone, newScope) {
-              childScope = newScope;
-              elem.append($compile(clone)(childScope));
-            });
+      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;
           }
-        }
 
+          cleanUp();
+          transclude(function(clone, newScope) {
+            childScope = newScope;
+            $animate.enter(clone, elem.parent(), elem);
+          });
+
+        } else {
+          cleanUp();
+        }
       });
     }
   };

public/app/features/datasources/partials/edit.html

@@ -42,7 +42,7 @@
 			</div>
 
 			<rebuild-on-change property="datasourceMeta.id">
-				<plugin-component type="datasource-config-view">
+				<plugin-component type="datasource-config-ctrl">
 				</plugin-component>
 			</rebuild-on-change>
 

public/app/partials/metrics.html

@@ -1,10 +1,10 @@
 <div class="editor-row">
 
 	<div class="tight-form-container">
-		<rebuild-on-change property="ctrl.panel.datasource" ignore-null="true">
-			<plugin-component type="metrics-query-editor" ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
-			</plugin-component>
-		</rebuild-on-change>
+		<!-- <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>
 
 	<div style="margin: 20px 0 0 0">
@@ -28,7 +28,11 @@
 
 	</div>
 
-	<metrics-query-options></metrics-query-options>
+	<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
+		<plugin-component type="query-options-ctrl">
+		</plugin-component>
+	</rebuild-on-change>
+
 </div>
 
 <div class="editor-row" style="margin-top: 30px">

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

@@ -1,14 +1,20 @@
 import {GraphiteDatasource} from './datasource';
 import {GraphiteQueryCtrl} from './query_ctrl';
 
-class GraphiteConfigView {
+class GraphiteConfigCtrl {
   static templateUrl = 'public/app/plugins/datasource/graphite/partials/config.html';
 }
 
+class GraphiteQueryOptionsCtrl {
+  static templateUrl = 'public/app/plugins/datasource/graphite/partials/query.options.html';
+}
+
+
 export {
   GraphiteDatasource as Datasource,
   GraphiteQueryCtrl as QueryCtrl,
-  GraphiteConfigView as ConfigView
+  GraphiteConfigCtrl as ConfigCtrl,
+  GraphiteQueryOptionsCtrl as QueryOptionsCtrl,
 };
 
 // define([

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

@@ -1,5 +1,4 @@
 <section class="grafana-metric-options">
-
 	<div class="tight-form">
 		<ul class="tight-form-list">
 			<li class="tight-form-item tight-form-item-icon">
@@ -11,7 +10,7 @@
 			<li>
 				<input type="text"
 					class="input-mini tight-form-input"
-					ng-model="ctrl.panel.cacheTimeout"
+					ng-model="ctrl.panelCtrl.panel.cacheTimeout"
 					bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
 					data-placement="right"
 					spellcheck='false'
@@ -23,10 +22,10 @@
 			<li>
 				<input type="text"
 					class="input-mini tight-form-input"
-					ng-model="ctrl.panel.maxDataPoints"
+					ng-model="ctrl.panelCtrl.panel.maxDataPoints"
 					bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
 					data-placement="right"
-					ng-model-onblur ng-change="ctrl.refresh()"
+					ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
 					spellcheck='false'
 					placeholder="auto"></input>
 			</li>
@@ -39,27 +38,27 @@
 				<i class="fa fa-info-circle"></i>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="ctrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					shorter legend names
 				</a>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="ctrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					series as parameters
 				</a>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="ctrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					stacking
 				</a>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="ctrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					templating
 				</a>
 			</li>
 			<li class="tight-form-item">
-				<a ng-click="ctrl.toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					max data points
 				</a>
 			</li>
@@ -71,7 +70,7 @@
 <div class="editor-row">
 	<div class="pull-left" style="margin-top: 30px;">
 
-		<div class="grafana-info-box span8" ng-if="ctrl.editorHelpIndex === 1">
+		<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
 			<h5>Shorter legend names</h5>
 			<ul>
 				<li>alias() function to specify a custom series name</li>
@@ -81,7 +80,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span8" ng-if="ctrl.editorHelpIndex === 2">
+		<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 2">
 			<h5>Series as parameter</h5>
 			<ul>
 				<li>Some graphite functions allow you to have many series arguments</li>
@@ -99,7 +98,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 3">
+		<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 3">
 			<h5>Stacking</h5>
 			<ul>
 				<li>You find the stacking option under Display Styles tab</li>
@@ -107,7 +106,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 4">
+		<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 4">
 			<h5>Templating</h5>
 			<ul>
 				<li>You can use a template variable in place of metric names</li>
@@ -116,7 +115,7 @@
 			</ul>
 		</div>
 
-		<div class="grafana-info-box span6" ng-if="ctrl.editorHelpIndex === 5">
+		<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 5">
 			<h5>Max data points</h5>
 			<ul>
 				<li>Every graphite request is issued with a maxDataPoints parameter</li>

public/app/plugins/datasource/prometheus/module.ts

@@ -1,12 +1,12 @@
 import {PrometheusDatasource} from './datasource';
 import {PrometheusQueryCtrl} from './query_ctrl';
 
-class PrometheusConfigViewCtrl {
+class PrometheusConfigCtrl {
   static templateUrl = 'public/app/plugins/datasource/prometheus/partials/config.html';
 }
 
 export {
   PrometheusDatasource as Datasource,
   PrometheusQueryCtrl as QueryCtrl,
-  PrometheusConfigViewCtrl as ConfigView
+  PrometheusConfigCtrl as ConfigCtrl
 };