poc(plugin editors): experimential test for plugin editors

public/app/features/panel/panel.ts

@@ -4,44 +4,7 @@ import config from 'app/core/config';
 
 import {PanelCtrl} from './panel_ctrl';
 import {MetricsPanelCtrl} from './metrics_panel_ctrl';
-
-export class DefaultPanelCtrl extends PanelCtrl {
-  constructor($scope, $injector) {
-    super($scope, $injector);
-  }
-}
-
-class PanelDirective {
-  template: string;
-  templateUrl: string;
-  bindToController: boolean;
-  scope: any;
-  controller: any;
-  controllerAs: string;
-
-  getDirective() {
-    if (!this.controller) {
-      this.controller = DefaultPanelCtrl;
-    }
-
-    return {
-      template: this.template,
-      templateUrl: this.templateUrl,
-      controller: this.controller,
-      controllerAs: 'ctrl',
-      bindToController: true,
-      scope: {dashboard: "=", panel: "=", row: "="},
-      link: (scope, elem, attrs, ctrl) => {
-        ctrl.init();
-        this.link(scope, elem, attrs, ctrl);
-      }
-    };
-  }
-
-  link(scope, elem, attrs, ctrl) {
-    return null;
-  }
-}
+import {PanelDirective} from './panel_directive';
 
 export {
   PanelCtrl,

public/app/features/panel/panel_directive.js → public/app/features/panel/panel_directive.ts

-define([
-  'angular',
-  'jquery',
-],
-function (angular, $) {
-  'use strict';
+///<reference path="../../headers/common.d.ts" />
 
-  var module = angular.module('grafana.directives');
+import angular from 'angular';
+import $ from 'jquery';
 
-  module.directive('grafanaPanel', function() {
+import {PanelCtrl} from './panel_ctrl';
+
+export class DefaultPanelCtrl extends PanelCtrl {
+  constructor($scope, $injector) {
+    super($scope, $injector);
+  }
+}
+
+export class PanelDirective {
+  template: string;
+  templateUrl: string;
+  bindToController: boolean;
+  scope: any;
+  controller: any;
+  controllerAs: string;
+
+  getDirective() {
+    if (!this.controller) {
+      this.controller = DefaultPanelCtrl;
+    }
+
+    return {
+      template: this.template,
+      templateUrl: this.templateUrl,
+      controller: this.controller,
+      controllerAs: 'ctrl',
+      bindToController: true,
+      scope: {dashboard: "=", panel: "=", row: "="},
+      link: (scope, elem, attrs, ctrl) => {
+        ctrl.init();
+        this.link(scope, elem, attrs, ctrl);
+      }
+    };
+  }
+
+  link(scope, elem, attrs, ctrl) {
+    return null;
+  }
+}
+
+
+var module = angular.module('grafana.directives');
+
+module.directive('grafanaPanel', function() {
   return {
     restrict: 'E',
     templateUrl: 'app/features/panel/partials/panel.html',
@@ -22,15 +61,15 @@ function (angular, $) {
       });
     }
   };
-  });
+});
 
-  module.directive('panelResizer', function($rootScope) {
+module.directive('panelResizer', function($rootScope) {
   return {
     restrict: 'E',
     template: '<span class="resize-panel-handle"></span>',
     link: function(scope, elem) {
       var resizing = false;
-        var lastPanel = false;
+      var lastPanel;
       var ctrl = scope.ctrl;
       var handleOffset;
       var originalHeight;
@@ -64,9 +103,8 @@ function (angular, $) {
           // last panel should not push row down
           if (lastPanel === ctrl.panel && rowSpan > 12) {
             lastPanel.span -= rowSpan - 12;
-            }
+          } else if (lastPanel !== ctrl.panel) {
             // reduce width of last panel so total in row is 12
-            else if (lastPanel !== ctrl.panel) {
             lastPanel.span = lastPanel.span - (rowSpan - 12);
             lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12);
           }
@@ -99,6 +137,6 @@ function (angular, $) {
       });
     }
   };
-  });
-
 });
+
+

public/app/features/panel/query_editor.ts

 ///<reference path="../../headers/common.d.ts" />
 
 import angular from 'angular';
+import _ from 'lodash';
+
+var directivesModule = angular.module('grafana.directives');
+
+function pluginDirectiveLoader($compile, datasourceSrv) {
+
+  function getPluginComponentDirective(options) {
+    return function() {
+      return {
+        templateUrl: options.Component.templateUrl,
+        restrict: 'E',
+        controller: options.Component,
+        controllerAs: 'ctrl',
+        bindToController: true,
+        scope: options.bindings,
+        link: (scope, elem, attrs, ctrl) => {
+          if (ctrl.link) {
+            ctrl.link(scope, elem, attrs, ctrl);
+          }
+        }
+      };
+    };
+  }
+
+  function getModule(scope, attrs) {
+    switch (attrs.type) {
+      case "metrics-query-editor": {
+        let datasource = scope.target.datasource || scope.ctrl.panel.datasource;
+        return datasourceSrv.get(datasource).then(ds => {
+          return System.import(ds.meta.module).then(dsModule => {
+            return {
+              name: 'metrics-query-editor-' + ds.meta.id,
+              bindings: {target: "=", panelCtrl: "="},
+              attrs: {"target": "target", "panel-ctrl": "ctrl"},
+              Component: dsModule.MetricsQueryEditor
+            };
+          });
+        });
+      }
+    }
+  }
+
+  function appendAndCompile(scope, elem, componentInfo) {
+    var child = angular.element(document.createElement(componentInfo.name));
+    _.each(componentInfo.attrs, (value, key) => {
+      child.attr(key, value);
+    });
+
+    $compile(child)(scope);
+
+    elem.empty();
+    elem.append(child);
+  }
+
+  function registerPluginComponent(scope, elem, attrs, componentInfo) {
+    if (!componentInfo.Component.registered) {
+      var directiveName = attrs.$normalize(componentInfo.name);
+      var directiveFn = getPluginComponentDirective(componentInfo);
+      directivesModule.directive(directiveName, directiveFn);
+      componentInfo.Component.registered = true;
+    }
+
+    appendAndCompile(scope, elem, componentInfo);
+  }
+
+  return {
+    restrict: 'E',
+    link: function(scope, elem, attrs) {
+      getModule(scope, attrs).then(function (componentInfo) {
+        registerPluginComponent(scope, elem, attrs, componentInfo);
+      });
+    }
+  };
+}
 
 /** @ngInject */
 function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) {
@@ -43,6 +117,6 @@ function metricsQueryOptions(dynamicDirectiveSrv, datasourceSrv) {
   });
 }
 
-angular.module('grafana.directives')
-  .directive('metricsQueryEditor', metricsQueryEditor)
-  .directive('metricsQueryOptions', metricsQueryOptions);
+directivesModule.directive('pluginDirectiveLoader', pluginDirectiveLoader);
+directivesModule.directive('metricsQueryEditor', metricsQueryEditor);
+directivesModule.directive('metricsQueryOptions', metricsQueryOptions);

public/app/partials/metrics.html

 <div class="editor-row">
 
 	<div class="tight-form-container">
-		<metrics-query-editor ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}" >
-		</metrics-query-editor>
+		<plugin-directive-loader type="metrics-query-editor" ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
+		</plugin-directive-loader>
 	</div>
 
 	<div style="margin: 20px 0 0 0">

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

@@ -9,10 +9,23 @@ function grafanaMetricsQueryEditor() {
   return {templateUrl: 'app/plugins/datasource/grafana/partials/query.editor.html'};
 }
 
+export class MetricsQueryEditor {
+  panelCtrl: any;
+  target: any;
+}
+
+class GrafanaMetricsQueryEditor extends MetricsQueryEditor {
+  static templateUrl = 'app/plugins/datasource/grafana/partials/query.editor.html';
+
+  constructor() {
+    super();
+    console.log('this is a metrics editor', this.panelCtrl, this.target);
+  }
+}
 
 export {
   GrafanaDatasource,
   GrafanaDatasource as Datasource,
-  grafanaMetricsQueryEditor as metricsQueryEditor
+  GrafanaMetricsQueryEditor as MetricsQueryEditor,
 };