poc(panel): experimental panel stuff

public/app/features/panel/panel_ctrl.ts

@@ -0,0 +1,21 @@
+///<reference path="../../headers/common.d.ts" />
+
+import PanelMeta from './panel_meta2';
+
+export class PanelCtrl {
+  panelMeta: any;
+  panel: any;
+  row: any;
+  dashboard: any;
+
+  constructor(private $scope) {
+    this.panelMeta = new PanelMeta({
+      panelName: 'Table',
+      editIcon:  "fa fa-table",
+      fullscreen: true,
+      metricsEditor: true,
+    });
+  }
+}
+
+

public/app/features/panel/panel_directive.js

@@ -15,9 +15,10 @@ function (angular, $) {
       scope: { ctrl: "=" },
       link: function(scope, elem) {
         var panelContainer = elem.find('.panel-container');
-        scope.$watchGroup(['fullscreen', 'height', 'panel.height', 'row.height'], function() {
+        var ctrl = scope.ctrl;
-          panelContainer.css({ minHeight: scope.height || scope.panel.height || scope.row.height, display: 'block' });
+        scope.$watchGroup(['ctrl.fullscreen', 'ctrl.height', 'ctrl.panel.height', 'ctrl.row.height'], function() {
-          elem.toggleClass('panel-fullscreen', scope.fullscreen ? true : false);
+          panelContainer.css({ minHeight: ctrl.height || ctrl.panel.height || ctrl.row.height, display: 'block' });
+          elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false);
         });
       }
     };

public/app/features/panel/panel_loader.ts

@@ -8,34 +8,67 @@ import {unknownPanelDirective} from '../../plugins/panel/unknown/module';
 var directiveModule = angular.module('grafana.directives');
 
 /** @ngInject */
-function panelLoader($compile, dynamicDirectiveSrv) {
+function panelLoader($compile, dynamicDirectiveSrv, $http, $q) {
   return {
     restrict: 'E',
+    scope: {
+      dashboard: "=",
+      row: "=",
+      panel: "="
+    },
     link: function(scope, elem, attrs) {
 
-      function addDirective(name, component) {
+      function getTemplate(component) {
-        if (!component.registered) {
+        if (component.template) {
-          directiveModule.component(attrs.$normalize(name), component);
+          return $q.when(component.template);
-          component.registered = true;
         }
+        return $http.get(component.templateUrl).then(res => {
+          return res.data;
+        });
+      }
 
+      function addPanelAndCompile(name) {
         var child = angular.element(document.createElement(name));
         child.attr('dashboard', 'dashboard');
         child.attr('panel', 'panel');
+        child.attr('row', 'row');
         $compile(child)(scope);
 
         elem.empty();
         elem.append(child);
       }
 
+      function addPanel(name, directive) {
+        if (!directive.registered) {
+          getTemplate(directive).then(template => {
+            directive.templateUrl = null;
+            directive.template = `<grafana-panel ctrl="ctrl">${template}</grafana-panel>`;
+            directive.controllerAs =  'ctrl';
+            directive.bindToController =  true;
+            directive.scope = {
+              dashboard: "=",
+              panel: "=",
+              row: "="
+            };
+
+            directiveModule.directive(attrs.$normalize(name), function() {
+              return directive;
+            });
+            directive.registered = true;
+            addPanelAndCompile(name);
+          });
+        }
+        addPanelAndCompile(name);
+      }
+
       var panelElemName = 'panel-directive-' + scope.panel.type;
       let panelInfo = config.panels[scope.panel.type];
       if (!panelInfo) {
-        addDirective(panelElemName, unknownPanelDirective);
+        addPanel(panelElemName, unknownPanelDirective);
       }
 
       System.import(panelInfo.module).then(function(panelModule) {
-        addDirective(panelElemName, panelModule.component);
+        addPanel(panelElemName, panelModule.panel);
       }).catch(err => {
         console.log('Panel err: ', err);
       });

public/app/partials/dashboard.html

@@ -79,9 +79,10 @@
 					<div class="row-text pointer" ng-click="toggleRow(row)" ng-if="row.showTitle" ng-bind="row.title | interpolateTemplateVars:this">
 					</div>
 
-					<div ng-repeat="(name, panel) in row.panels track by panel.id" class="panel" ui-draggable="!dashboardViewState.fullscreen" drag="panel.id"
+					<div ng-repeat="panel in row.panels track by panel.id" class="panel" ui-draggable="!dashboardViewState.fullscreen" drag="panel.id"
-						ui-on-Drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
+						ui-on-drop="onDrop($data, row, panel)" drag-handle-class="drag-handle" panel-width>
-						<panel-loader class="panel-margin"></panel-loader>
+						<panel-loader class="panel-margin" dashboard="dashboard" row="row" panel="panel">
+						</panel-loader>
 					</div>
 
 					<div panel-drop-zone class="panel panel-drop-zone" ui-on-drop="onDrop($data, row)" data-drop="true">

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

@@ -0,0 +1,4 @@
+<h2 class="text-center">
+	Test panel!
+	panel.id: {{ctrl.panel.id}}
+</h2>

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

@@ -1,47 +1,22 @@
 ///<reference path="../../../headers/common.d.ts" />
 
-import PanelMeta from 'app/features/panel/panel_meta2';
+import {PanelCtrl} from '../../../features/panel/panel_ctrl';
-
-class PanelBaseCtrl {
-  panelMeta: any;
-  panel: any;
-  dashboard: any;
-
-  constructor(private $scope) {
-    this.panelMeta = new PanelMeta({
-      panelName: 'Table',
-      editIcon:  "fa fa-table",
-      fullscreen: true,
-      metricsEditor: true,
-    });
-  }
-}
-
-class TestPanelCtrl extends PanelBaseCtrl {
 
+class TestPanelCtrl extends PanelCtrl {
   constructor($scope) {
     super($scope);
   }
 }
 
-var testPanelComponent = {
+var panel = {
-  template: `
+  templateUrl: `app/plugins/panel/test/module.html`,
-    <grafana-panel ctrl="ctrl">
-      <div class="text-center" style="padding-top: 2rem">
-        <h2>Test Panel</h2>
-      </div>
-    </grafana-panel>
-    `,
   controller: TestPanelCtrl,
-  controllerAs: 'ctrl',
+  link: function(scope, elem) {
-  bindings: {
+    console.log('panel link');
-    dashboard: "=",
-    panel: "=",
   }
 };
 
 export {
-  PanelBaseCtrl,
   TestPanelCtrl,
-  testPanelComponent as component,
+  panel,
 }