feat(plugins): more progress on plugin editors

10 years ago · 21f6c07686
parent 356f7b9db6
commit 21f6c07686
7 changed files with 86 additions and 39 deletions
--- a/public/app/core/directives/plugin_component.ts
+++ b/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);
--- a/public/app/core/directives/rebuild_on_change.ts
+++ b/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();
+        }
      });
    }
  };
--- a/public/app/features/datasources/partials/edit.html
+++ b/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>

--- a/public/app/partials/metrics.html
+++ b/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">
--- a/public/app/plugins/datasource/graphite/module.ts
+++ b/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([
--- a/public/app/plugins/datasource/graphite/partials/query.options.html
+++ b/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>
--- a/public/app/plugins/datasource/prometheus/module.ts
+++ b/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
 };