poc(panel as isolated compoennts): experimental panel stuff

public/app/features/panel/panel_directive.js

@@ -12,9 +12,9 @@ function (angular, $) {
       restrict: 'E',
       templateUrl: 'app/features/panel/partials/panel.html',
       transclude: true,
+      scope: { ctrl: "=" },
       link: function(scope, elem) {
         var panelContainer = elem.find('.panel-container');
-
         scope.$watchGroup(['fullscreen', 'height', 'panel.height', 'row.height'], function() {
           panelContainer.css({ minHeight: scope.height || scope.panel.height || scope.row.height, display: 'block' });
           elem.toggleClass('panel-fullscreen', scope.fullscreen ? true : false);

public/app/features/panel/panel_loader.ts

@@ -5,26 +5,42 @@ import config from 'app/core/config';
 
 import {unknownPanelDirective} from '../../plugins/panel/unknown/module';
 
+var directiveModule = angular.module('grafana.directives');
+
 /** @ngInject */
-function panelLoader($parse, dynamicDirectiveSrv) {
+function panelLoader($compile, dynamicDirectiveSrv) {
-  return dynamicDirectiveSrv.create({
+  return {
-    directive: scope => {
+    restrict: 'E',
-      let panelInfo = config.panels[scope.panel.type];
+    link: function(scope, elem, attrs) {
-      if (!panelInfo) {
+
-        return Promise.resolve({
+      function addDirective(name, component) {
-          name: 'panel-directive-' + scope.panel.type,
+        if (!component.registered) {
-          fn: unknownPanelDirective
+          directiveModule.component(attrs.$normalize(name), component);
-        });
+          component.registered = true;
         }
 
-      return System.import(panelInfo.module).then(function(panelModule) {
+        var child = angular.element(document.createElement(name));
-        return {
+        child.attr('dashboard', 'dashboard');
-          name: 'panel-directive-' + scope.panel.type,
+        child.attr('panel', 'panel');
-          fn: panelModule.panel,
+        $compile(child)(scope);
+
+        elem.empty();
+        elem.append(child);
+      }
+
+      var panelElemName = 'panel-directive-' + scope.panel.type;
+      let panelInfo = config.panels[scope.panel.type];
+      if (!panelInfo) {
+        addDirective(panelElemName, unknownPanelDirective);
+      }
+
+      System.import(panelInfo.module).then(function(panelModule) {
+        addDirective(panelElemName, panelModule.component);
+      }).catch(err => {
+        console.log('Panel err: ', err);
+      });
+    }
   };
-      });
-    },
-  });
 }
 
 angular.module('grafana.directives').directive('panelLoader', panelLoader);

public/app/features/panel/panel_menu.js

@@ -11,16 +11,16 @@ function (angular, $, _) {
     .directive('panelMenu', function($compile, linkSrv) {
       var linkTemplate =
           '<span class="panel-title drag-handle pointer">' +
-            '<span class="panel-title-text drag-handle">{{panel.title | interpolateTemplateVars:this}}</span>' +
+            '<span class="panel-title-text drag-handle">{{ctrl.panel.title}}</span>' +
             '<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
-            '<span class="panel-time-info" ng-show="panelMeta.timeInfo"><i class="fa fa-clock-o"></i> {{panelMeta.timeInfo}}</span>' +
+            '<span class="panel-time-info" ng-show="ctrl.panelMeta.timeInfo"><i class="fa fa-clock-o"></i> {{panelMeta.timeInfo}}</span>' +
           '</span>';
 
       function createExternalLinkMenu($scope) {
         var template = '<div class="panel-menu small">';
         template += '<div class="panel-menu-row">';
 
-        if ($scope.panel.links) {
+        if ($scope.ctrl.panel.links) {
           _.each($scope.panel.links, function(link) {
             var info = linkSrv.getPanelLinkAnchorInfo(link, $scope.panel.scopedVars);
             template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>';
@@ -31,7 +31,7 @@ function (angular, $, _) {
       function createMenuTemplate($scope) {
         var template = '<div class="panel-menu small">';
 
-        if ($scope.dashboardMeta.canEdit) {
+        if ($scope.ctrl.dashboard.meta.canEdit) {
           template += '<div class="panel-menu-inner">';
           template += '<div class="panel-menu-row">';
           template += '<a class="panel-menu-icon pull-left" ng-click="updateColumnSpan(-1)"><i class="fa fa-minus"></i></a>';
@@ -44,9 +44,9 @@ function (angular, $, _) {
         template += '<div class="panel-menu-row">';
         template += '<a class="panel-menu-link" gf-dropdown="extendedMenu"><i class="fa fa-bars"></i></a>';
 
-        _.each($scope.panelMeta.menu, function(item) {
+        _.each($scope.ctrl.panelMeta.menu, function(item) {
           // skip edit actions if not editor
-          if (item.role === 'Editor' && !$scope.dashboardMeta.canEdit) {
+          if (item.role === 'Editor' && !$scope.ctrl.dashboard.meta.canEdit) {
             return;
           }
 
@@ -64,7 +64,7 @@ function (angular, $, _) {
       }
 
       function getExtendedMenu($scope) {
-        return angular.copy($scope.panelMeta.extendedMenu);
+        return angular.copy($scope.ctrl.panelMeta.extendedMenu);
       }
 
       return {

public/app/plugins/panel/test/module.ts

@@ -3,14 +3,17 @@
 import PanelMeta from 'app/features/panel/panel_meta2';
 
 class PanelBaseCtrl {
+  panelMeta: any;
+  panel: any;
+  dashboard: any;
+
   constructor(private $scope) {
-    $scope.panelMeta = new PanelMeta({
+    this.panelMeta = new PanelMeta({
       panelName: 'Table',
       editIcon:  "fa fa-table",
       fullscreen: true,
       metricsEditor: true,
     });
-    $scope.testProp = "hello";
   }
 }
 
@@ -18,26 +21,27 @@ class TestPanelCtrl extends PanelBaseCtrl {
 
   constructor($scope) {
     super($scope);
-    $scope.panelMeta.panelName = "Test";
   }
 }
 
-function testPanelDirective() {
+var testPanelComponent = {
-  return {
-    restrict: 'E',
   template: `
-    <grafana-panel>
+    <grafana-panel ctrl="ctrl">
       <div class="text-center" style="padding-top: 2rem">
-        <h2>Test Panel, {{testProp}}</h2>
+        <h2>Test Panel</h2>
       </div>
     </grafana-panel>
     `,
-    controller: TestPanelCtrl
+  controller: TestPanelCtrl,
-  };
+  controllerAs: 'ctrl',
+  bindings: {
+    dashboard: "=",
+    panel: "=",
   }
+};
 
 export {
   PanelBaseCtrl,
   TestPanelCtrl,
-  testPanelDirective as panel
+  testPanelComponent as component,
 }