From 892704242102d30ff5d20e77fbd6a876f1e28b01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 23 Jan 2016 01:44:38 +0100 Subject: [PATCH] more new panel stuff --- public/app/features/dashboard/viewStateSrv.js | 32 ++++++++++++------- public/app/features/panel/panel_ctrl.ts | 14 +++++++- public/app/features/panel/panel_directive.js | 22 +++++++------ public/app/features/panel/panel_menu.js | 31 +++++++++--------- public/app/features/panel/panel_meta2.ts | 10 +++--- public/app/features/panel/partials/panel.html | 4 +-- 6 files changed, 69 insertions(+), 44 deletions(-) diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index 58403766a31..63bb999e3ca 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/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); } diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index db8788ab306..19c1ed2bc8c 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/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 + }); } } diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js index f8b9e724b32..50cc4b57b26 100644 --- a/public/app/features/panel/panel_directive.js +++ b/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; } diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index ec0f2301675..bea8d27d2fa 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -13,25 +13,25 @@ function (angular, $, _) { '' + '{{ctrl.panel.title}}' + '' + - ' {{panelMeta.timeInfo}}' + + ' {{ctrl.panelMeta.timeInfo}}' + ''; - function createExternalLinkMenu($scope) { + function createExternalLinkMenu(ctrl) { var template = '
'; template += '
'; - 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 += '' + info.title + ''; }); } return template; } - function createMenuTemplate($scope) { + function createMenuTemplate(ctrl) { var template = '
'; - if ($scope.ctrl.dashboard.meta.canEdit) { + if (ctrl.dashboard.meta.canEdit) { template += '
'; template += '
'; template += ''; @@ -44,9 +44,9 @@ function (angular, $, _) { template += '
'; template += ''; - _.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); }; diff --git a/public/app/features/panel/panel_meta2.ts b/public/app/features/panel/panel_meta2.ts index ca276f9377b..fe72b9f4fa2 100644 --- a/public/app/features/panel/panel_meta2.ts +++ b/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?) { diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index a7fef0f5d67..f3eb19df424 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -19,12 +19,12 @@
-
+
- {{panelMeta.panelName}} + {{ctrl.panelMeta.panelName}}