more new panel stuff

public/app/features/dashboard/viewStateSrv.js

@@ -31,6 +31,14 @@ function (angular, _, $) {
         }
       });
 
+      $scope.onAppEvent('panel-change-view', function(evt, payload) {
+        self.update(payload);
+      });
+
+      $scope.onAppEvent('panel-instantiated', function(evt, payload) {
+        self.registerPanel(payload.scope);
+      });
+
       this.update(this.getQueryStringState(), true);
       this.expandRowForPanel();
     }
@@ -105,23 +113,24 @@ function (angular, _, $) {
 
     DashboardViewState.prototype.getPanelScope = function(id) {
       return _.find(this.panelScopes, function(panelScope) {
-        return panelScope.panel.id === id;
+        return panelScope.ctrl.panel.id === id;
       });
     };
 
     DashboardViewState.prototype.leaveFullscreen = function(render) {
       var self = this;
+      var ctrl = self.fullscreenPanel.ctrl;
 
-      self.fullscreenPanel.editMode = false;
-      self.fullscreenPanel.fullscreen = false;
-      delete self.fullscreenPanel.height;
+      ctrl.editMode = false;
+      ctrl.fullscreen = false;
+      delete ctrl.height;
 
-      this.$scope.appEvent('panel-fullscreen-exit', {panelId: this.fullscreenPanel.panel.id});
+      this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id});
 
       if (!render) { return false;}
 
       $timeout(function() {
-        if (self.oldTimeRange !== self.fullscreenPanel.range) {
+        if (self.oldTimeRange !== ctrl.range) {
           self.$scope.broadcastRefresh();
         }
         else {
@@ -135,17 +144,18 @@ function (angular, _, $) {
       var docHeight = $(window).height();
       var editHeight = Math.floor(docHeight * 0.3);
       var fullscreenHeight = Math.floor(docHeight * 0.7);
+      var ctrl = panelScope.ctrl;
 
-      panelScope.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit;
-      panelScope.height = panelScope.editMode ? editHeight : fullscreenHeight;
+      ctrl.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit;
+      ctrl.height = ctrl.editMode ? editHeight : fullscreenHeight;
 
-      this.oldTimeRange = panelScope.range;
+      this.oldTimeRange = ctrl.range;
       this.fullscreenPanel = panelScope;
 
       $(window).scrollTop(0);
 
       panelScope.fullscreen = true;
-      this.$scope.appEvent('panel-fullscreen-enter', {panelId: panelScope.panel.id});
+      this.$scope.appEvent('panel-fullscreen-enter', {panelId: ctrl.panel.id});
 
       $timeout(function() {
         panelScope.$broadcast('render');
@@ -156,7 +166,7 @@ function (angular, _, $) {
       var self = this;
       self.panelScopes.push(panelScope);
 
-      if (self.state.panelId === panelScope.panel.id) {
+      if (self.state.panelId === panelScope.ctrl.panel.id) {
         self.enterFullscreen(panelScope);
       }
 

public/app/features/panel/panel_ctrl.ts

@@ -8,13 +8,25 @@ export class PanelCtrl {
   row: any;
   dashboard: any;
 
-  constructor(private $scope) {
+  constructor(private scope) {
     this.panelMeta = new PanelMeta({
       panelName: 'Table',
       editIcon:  "fa fa-table",
       fullscreen: true,
       metricsEditor: true,
     });
+
+    this.publishAppEvent('panel-instantiated', {scope: scope});
+  }
+
+  publishAppEvent(evtName, evt) {
+    this.scope.$root.appEvent(evtName, evt);
+  }
+
+  editPanel() {
+    this.publishAppEvent('panel-change-view', {
+      fullscreen: true, edit: true, panelId: this.panel.id
+    });
   }
 }
 

public/app/features/panel/panel_directive.js

@@ -17,6 +17,7 @@ function (angular, $) {
         var panelContainer = elem.find('.panel-container');
         var ctrl = scope.ctrl;
         scope.$watchGroup(['ctrl.fullscreen', 'ctrl.height', 'ctrl.panel.height', 'ctrl.row.height'], function() {
+          console.log('height: ', ctrl.height);
           panelContainer.css({ minHeight: ctrl.height || ctrl.panel.height || ctrl.row.height, display: 'block' });
           elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false);
         });
@@ -31,6 +32,7 @@ function (angular, $) {
       link: function(scope, elem) {
         var resizing = false;
         var lastPanel = false;
+        var ctrl = scope.ctrl;
         var handleOffset;
         var originalHeight;
         var originalWidth;
@@ -41,31 +43,31 @@ function (angular, $) {
           resizing = true;
 
           handleOffset = $(e.target).offset();
-          originalHeight = parseInt(scope.row.height);
-          originalWidth = scope.panel.span;
+          originalHeight = parseInt(ctrl.row.height);
+          originalWidth = ctrl.panel.span;
           maxWidth = $(document).width();
 
-          lastPanel = scope.row.panels[scope.row.panels.length - 1];
+          lastPanel = ctrl.row.panels[ctrl.row.panels.length - 1];
 
           $('body').on('mousemove', moveHandler);
           $('body').on('mouseup', dragEndHandler);
         }
 
         function moveHandler(e) {
-          scope.row.height = originalHeight + (e.pageY - handleOffset.top);
-          scope.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12);
-          scope.panel.span = Math.min(Math.max(scope.panel.span, 1), 12);
+          ctrl.row.height = originalHeight + (e.pageY - handleOffset.top);
+          ctrl.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12);
+          ctrl.panel.span = Math.min(Math.max(ctrl.panel.span, 1), 12);
 
-          var rowSpan = scope.dashboard.rowSpan(scope.row);
+          var rowSpan = ctrl.dashboard.rowSpan(ctrl.row);
 
           // auto adjust other panels
           if (Math.floor(rowSpan) < 14) {
             // last panel should not push row down
-            if (lastPanel === scope.panel && rowSpan > 12) {
+            if (lastPanel === ctrl.panel && rowSpan > 12) {
               lastPanel.span -= rowSpan - 12;
             }
             // reduce width of last panel so total in row is 12
-            else if (lastPanel !== scope.panel) {
+            else if (lastPanel !== ctrl.panel) {
               lastPanel.span = lastPanel.span - (rowSpan - 12);
               lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12);
             }
@@ -78,7 +80,7 @@ function (angular, $) {
 
         function dragEndHandler() {
           // if close to 12
-          var rowSpan = scope.dashboard.rowSpan(scope.row);
+          var rowSpan = ctrl.dashboard.rowSpan(scope.row);
           if (rowSpan < 12 && rowSpan > 11) {
             lastPanel.span +=  12 - rowSpan;
           }

public/app/features/panel/panel_menu.js

@@ -13,25 +13,25 @@ function (angular, $, _) {
           '<span class="panel-title drag-handle pointer">' +
             '<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="ctrl.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> {{ctrl.panelMeta.timeInfo}}</span>' +
           '</span>';
 
-      function createExternalLinkMenu($scope) {
+      function createExternalLinkMenu(ctrl) {
         var template = '<div class="panel-menu small">';
         template += '<div class="panel-menu-row">';
 
-        if ($scope.ctrl.panel.links) {
-          _.each($scope.panel.links, function(link) {
-            var info = linkSrv.getPanelLinkAnchorInfo(link, $scope.panel.scopedVars);
+        if (ctrl.panel.links) {
+          _.each(ctrl.panel.links, function(link) {
+            var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars);
             template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>';
           });
         }
         return template;
       }
-      function createMenuTemplate($scope) {
+      function createMenuTemplate(ctrl) {
         var template = '<div class="panel-menu small">';
 
-        if ($scope.ctrl.dashboard.meta.canEdit) {
+        if (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.ctrl.panelMeta.menu, function(item) {
+        _.each(ctrl.panelMeta.menu, function(item) {
           // skip edit actions if not editor
-          if (item.role === 'Editor' && !$scope.ctrl.dashboard.meta.canEdit) {
+          if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) {
             return;
           }
 
@@ -63,8 +63,8 @@ function (angular, $, _) {
         return template;
       }
 
-      function getExtendedMenu($scope) {
-        return angular.copy($scope.ctrl.panelMeta.extendedMenu);
+      function getExtendedMenu(ctrl) {
+        return angular.copy(ctrl.panelMeta.extendedMenu);
       }
 
       return {
@@ -74,13 +74,14 @@ function (angular, $, _) {
           var $panelLinksBtn = $link.find(".panel-links-btn");
           var $panelContainer = elem.parents(".panel-container");
           var menuScope = null;
+          var ctrl = $scope.ctrl;
           var timeout = null;
           var $menu = null;
 
           elem.append($link);
 
           $scope.$watchCollection('panel.links', function(newValue) {
-            var showIcon = (newValue ? newValue.length > 0 : false) && $scope.panel.title !== '';
+            var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== '';
             $panelLinksBtn.toggle(showIcon);
           });
 
@@ -124,9 +125,9 @@ function (angular, $, _) {
 
             var menuTemplate;
             if ($(e.target).hasClass('fa-external-link')) {
-              menuTemplate = createExternalLinkMenu($scope);
+              menuTemplate = createExternalLinkMenu(ctrl);
             } else {
-              menuTemplate = createMenuTemplate($scope);
+              menuTemplate = createMenuTemplate(ctrl);
             }
 
             $menu = $(menuTemplate);
@@ -135,7 +136,7 @@ function (angular, $, _) {
             });
 
             menuScope = $scope.$new();
-            menuScope.extendedMenu = getExtendedMenu($scope);
+            menuScope.extendedMenu = getExtendedMenu(ctrl);
             menuScope.dismiss = function() {
               dismiss(null, true);
             };

public/app/features/panel/panel_meta2.ts

@@ -17,12 +17,12 @@ export default class PanelMeta {
     this.extendedMenu = [];
 
     if (options.fullscreen) {
-      this.addMenuItem('View', 'icon-eye-open', 'toggleFullscreen(false); dismiss();');
+      this.addMenuItem('View', 'icon-eye-open', 'ctrl.viewPanel(); dismiss();');
     }
 
-    this.addMenuItem('Edit', 'icon-cog', 'editPanel(); dismiss();', 'Editor');
-    this.addMenuItem('Duplicate', 'icon-copy', 'duplicatePanel()', 'Editor');
-    this.addMenuItem('Share', 'icon-share', 'sharePanel(); dismiss();');
+    this.addMenuItem('Edit', 'icon-cog', 'ctrl.editPanel(); dismiss();', 'Editor');
+    this.addMenuItem('Duplicate', 'icon-copy', 'ctrl.duplicate()', 'Editor');
+    this.addMenuItem('Share', 'icon-share', 'ctrl.share(); dismiss();');
 
     this.addEditorTab('General', 'app/partials/panelgeneral.html');
 
@@ -30,7 +30,7 @@ export default class PanelMeta {
       this.addEditorTab('Metrics', 'app/partials/metrics.html');
     }
 
-    this.addExtendedMenuItem('Panel JSON', '', 'editPanelJson(); dismiss();');
+    this.addExtendedMenuItem('Panel JSON', '', 'ctrl.editPanelJson(); dismiss();');
   }
 
   addMenuItem (text, icon, click, role?) {

public/app/features/panel/partials/panel.html

@@ -19,12 +19,12 @@
 	<panel-resizer></panel-resizer>
 </div>
 
-<div class="panel-full-edit" ng-if="editMode">
+<div class="panel-full-edit" ng-if="ctrl.editMode">
 	<div class="gf-box">
 		<div class="gf-box-header">
 			<div class="gf-box-title">
 				<i ng-class="panelMeta.editIcon"></i>
-				{{panelMeta.panelName}}
+				{{ctrl.panelMeta.panelName}}
 			</div>
 
 			<div ng-model="editor.index" bs-tabs>