Skip to content

N
nexpie-grafana-theme
Commit 89270424 by Torkel Ödegaard
Options

more new panel stuff

parent 94a7e9b1
Showing with 69 additions and 44 deletions
public/app/features/dashboard/viewStateSrv.js
...@@ -31,6 +31,14 @@ function (angular, _, $) { ...@@ -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.update(this.getQueryStringState(), true);
this.expandRowForPanel(); this.expandRowForPanel();
} }
...@@ -105,23 +113,24 @@ function (angular, _, $) { ...@@ -105,23 +113,24 @@ function (angular, _, $) {
DashboardViewState.prototype.getPanelScope = function(id) { DashboardViewState.prototype.getPanelScope = function(id) {
return _.find(this.panelScopes, function(panelScope) { return _.find(this.panelScopes, function(panelScope) {
return panelScope.panel.id === id; return panelScope.ctrl.panel.id === id;
}); });
}; };
DashboardViewState.prototype.leaveFullscreen = function(render) { DashboardViewState.prototype.leaveFullscreen = function(render) {
var self = this; var self = this;
var ctrl = self.fullscreenPanel.ctrl;
self.fullscreenPanel.editMode = false; ctrl.editMode = false;
self.fullscreenPanel.fullscreen = false; ctrl.fullscreen = false;
delete self.fullscreenPanel.height; 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;} if (!render) { return false;}
$timeout(function() { $timeout(function() {
if (self.oldTimeRange !== self.fullscreenPanel.range) { if (self.oldTimeRange !== ctrl.range) {
self.$scope.broadcastRefresh(); self.$scope.broadcastRefresh();
} }
else { else {
...@@ -135,17 +144,18 @@ function (angular, _, $) { ...@@ -135,17 +144,18 @@ function (angular, _, $) {
var docHeight = $(window).height(); var docHeight = $(window).height();
var editHeight = Math.floor(docHeight * 0.3); var editHeight = Math.floor(docHeight * 0.3);
var fullscreenHeight = Math.floor(docHeight * 0.7); var fullscreenHeight = Math.floor(docHeight * 0.7);
var ctrl = panelScope.ctrl;
panelScope.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit; ctrl.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit;
panelScope.height = panelScope.editMode ? editHeight : fullscreenHeight; ctrl.height = ctrl.editMode ? editHeight : fullscreenHeight;
this.oldTimeRange = panelScope.range; this.oldTimeRange = ctrl.range;
this.fullscreenPanel = panelScope; this.fullscreenPanel = panelScope;
$(window).scrollTop(0); $(window).scrollTop(0);
panelScope.fullscreen = true; 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() { $timeout(function() {
panelScope.$broadcast('render'); panelScope.$broadcast('render');
...@@ -156,7 +166,7 @@ function (angular, _, $) { ...@@ -156,7 +166,7 @@ function (angular, _, $) {
var self = this; var self = this;
self.panelScopes.push(panelScope); self.panelScopes.push(panelScope);
if (self.state.panelId === panelScope.panel.id) { if (self.state.panelId === panelScope.ctrl.panel.id) {
self.enterFullscreen(panelScope); self.enterFullscreen(panelScope);
} }
......
public/app/features/panel/panel_ctrl.ts
...@@ -8,13 +8,25 @@ export class PanelCtrl { ...@@ -8,13 +8,25 @@ export class PanelCtrl {
row: any; row: any;
dashboard: any; dashboard: any;
constructor(private $scope) { constructor(private scope) {
this.panelMeta = new PanelMeta({ this.panelMeta = new PanelMeta({
panelName: 'Table', panelName: 'Table',
editIcon: "fa fa-table", editIcon: "fa fa-table",
fullscreen: true, fullscreen: true,
metricsEditor: 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, $) { ...@@ -17,6 +17,7 @@ function (angular, $) {
var panelContainer = elem.find('.panel-container'); var panelContainer = elem.find('.panel-container');
var ctrl = scope.ctrl; var ctrl = scope.ctrl;
scope.$watchGroup(['ctrl.fullscreen', 'ctrl.height', 'ctrl.panel.height', 'ctrl.row.height'], function() { 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' }); panelContainer.css({ minHeight: ctrl.height || ctrl.panel.height || ctrl.row.height, display: 'block' });
elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false); elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false);
}); });
...@@ -31,6 +32,7 @@ function (angular, $) { ...@@ -31,6 +32,7 @@ function (angular, $) {
link: function(scope, elem) { link: function(scope, elem) {
var resizing = false; var resizing = false;
var lastPanel = false; var lastPanel = false;
var ctrl = scope.ctrl;
var handleOffset; var handleOffset;
var originalHeight; var originalHeight;
var originalWidth; var originalWidth;
...@@ -41,31 +43,31 @@ function (angular, $) { ...@@ -41,31 +43,31 @@ function (angular, $) {
resizing = true; resizing = true;
handleOffset = $(e.target).offset(); handleOffset = $(e.target).offset();
originalHeight = parseInt(scope.row.height); originalHeight = parseInt(ctrl.row.height);
originalWidth = scope.panel.span; originalWidth = ctrl.panel.span;
maxWidth = $(document).width(); 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('mousemove', moveHandler);
$('body').on('mouseup', dragEndHandler); $('body').on('mouseup', dragEndHandler);
} }
function moveHandler(e) { function moveHandler(e) {
scope.row.height = originalHeight + (e.pageY - handleOffset.top); ctrl.row.height = originalHeight + (e.pageY - handleOffset.top);
scope.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12); ctrl.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12);
scope.panel.span = Math.min(Math.max(scope.panel.span, 1), 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 // auto adjust other panels
if (Math.floor(rowSpan) < 14) { if (Math.floor(rowSpan) < 14) {
// last panel should not push row down // last panel should not push row down
if (lastPanel === scope.panel && rowSpan > 12) { if (lastPanel === ctrl.panel && rowSpan > 12) {
lastPanel.span -= rowSpan - 12; lastPanel.span -= rowSpan - 12;
} }
// reduce width of last panel so total in row is 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 = lastPanel.span - (rowSpan - 12);
lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12); lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12);
} }
...@@ -78,7 +80,7 @@ function (angular, $) { ...@@ -78,7 +80,7 @@ function (angular, $) {
function dragEndHandler() { function dragEndHandler() {
// if close to 12 // if close to 12
var rowSpan = scope.dashboard.rowSpan(scope.row); var rowSpan = ctrl.dashboard.rowSpan(scope.row);
if (rowSpan < 12 && rowSpan > 11) { if (rowSpan < 12 && rowSpan > 11) {
lastPanel.span += 12 - rowSpan; lastPanel.span += 12 - rowSpan;
} }
......
public/app/features/panel/panel_menu.js
...@@ -13,25 +13,25 @@ function (angular, $, _) { ...@@ -13,25 +13,25 @@ function (angular, $, _) {
'<span class="panel-title drag-handle pointer">' + '<span class="panel-title drag-handle pointer">' +
'<span class="panel-title-text drag-handle">{{ctrl.panel.title}}</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-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>'; '</span>';
function createExternalLinkMenu($scope) { function createExternalLinkMenu(ctrl) {
var template = '<div class="panel-menu small">'; var template = '<div class="panel-menu small">';
template += '<div class="panel-menu-row">'; template += '<div class="panel-menu-row">';
if ($scope.ctrl.panel.links) { if (ctrl.panel.links) {
_.each($scope.panel.links, function(link) { _.each(ctrl.panel.links, function(link) {
var info = linkSrv.getPanelLinkAnchorInfo(link, $scope.panel.scopedVars); var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars);
template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>'; template += '<a class="panel-menu-link" href="' + info.href + '" target="' + info.target + '">' + info.title + '</a>';
}); });
} }
return template; return template;
} }
function createMenuTemplate($scope) { function createMenuTemplate(ctrl) {
var template = '<div class="panel-menu small">'; 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-inner">';
template += '<div class="panel-menu-row">'; 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>'; 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, $, _) { ...@@ -44,9 +44,9 @@ function (angular, $, _) {
template += '<div class="panel-menu-row">'; template += '<div class="panel-menu-row">';
template += '<a class="panel-menu-link" gf-dropdown="extendedMenu"><i class="fa fa-bars"></i></a>'; 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 // skip edit actions if not editor
if (item.role === 'Editor' && !$scope.ctrl.dashboard.meta.canEdit) { if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) {
return; return;
} }
...@@ -63,8 +63,8 @@ function (angular, $, _) { ...@@ -63,8 +63,8 @@ function (angular, $, _) {
return template; return template;
} }
function getExtendedMenu($scope) { function getExtendedMenu(ctrl) {
return angular.copy($scope.ctrl.panelMeta.extendedMenu); return angular.copy(ctrl.panelMeta.extendedMenu);
} }
return { return {
...@@ -74,13 +74,14 @@ function (angular, $, _) { ...@@ -74,13 +74,14 @@ function (angular, $, _) {
var $panelLinksBtn = $link.find(".panel-links-btn"); var $panelLinksBtn = $link.find(".panel-links-btn");
var $panelContainer = elem.parents(".panel-container"); var $panelContainer = elem.parents(".panel-container");
var menuScope = null; var menuScope = null;
var ctrl = $scope.ctrl;
var timeout = null; var timeout = null;
var $menu = null; var $menu = null;
elem.append($link); elem.append($link);
$scope.$watchCollection('panel.links', function(newValue) { $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); $panelLinksBtn.toggle(showIcon);
}); });
...@@ -124,9 +125,9 @@ function (angular, $, _) { ...@@ -124,9 +125,9 @@ function (angular, $, _) {
var menuTemplate; var menuTemplate;
if ($(e.target).hasClass('fa-external-link')) { if ($(e.target).hasClass('fa-external-link')) {
menuTemplate = createExternalLinkMenu($scope); menuTemplate = createExternalLinkMenu(ctrl);
} else { } else {
menuTemplate = createMenuTemplate($scope); menuTemplate = createMenuTemplate(ctrl);
} }
$menu = $(menuTemplate); $menu = $(menuTemplate);
...@@ -135,7 +136,7 @@ function (angular, $, _) { ...@@ -135,7 +136,7 @@ function (angular, $, _) {
}); });
menuScope = $scope.$new(); menuScope = $scope.$new();
menuScope.extendedMenu = getExtendedMenu($scope); menuScope.extendedMenu = getExtendedMenu(ctrl);
menuScope.dismiss = function() { menuScope.dismiss = function() {
dismiss(null, true); dismiss(null, true);
}; };
......
public/app/features/panel/panel_meta2.ts
...@@ -17,12 +17,12 @@ export default class PanelMeta { ...@@ -17,12 +17,12 @@ export default class PanelMeta {
this.extendedMenu = []; this.extendedMenu = [];
if (options.fullscreen) { 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('Edit', 'icon-cog', 'ctrl.editPanel(); dismiss();', 'Editor');
this.addMenuItem('Duplicate', 'icon-copy', 'duplicatePanel()', 'Editor'); this.addMenuItem('Duplicate', 'icon-copy', 'ctrl.duplicate()', 'Editor');
this.addMenuItem('Share', 'icon-share', 'sharePanel(); dismiss();'); this.addMenuItem('Share', 'icon-share', 'ctrl.share(); dismiss();');
this.addEditorTab('General', 'app/partials/panelgeneral.html'); this.addEditorTab('General', 'app/partials/panelgeneral.html');
...@@ -30,7 +30,7 @@ export default class PanelMeta { ...@@ -30,7 +30,7 @@ export default class PanelMeta {
this.addEditorTab('Metrics', 'app/partials/metrics.html'); 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?) { addMenuItem (text, icon, click, role?) {
......
public/app/features/panel/partials/panel.html
...@@ -19,12 +19,12 @@ ...@@ -19,12 +19,12 @@
<panel-resizer></panel-resizer> <panel-resizer></panel-resizer>
</div> </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">
<div class="gf-box-header"> <div class="gf-box-header">
<div class="gf-box-title"> <div class="gf-box-title">
<i ng-class="panelMeta.editIcon"></i> <i ng-class="panelMeta.editIcon"></i>
{{panelMeta.panelName}} {{ctrl.panelMeta.panelName}}
</div> </div>
<div ng-model="editor.index" bs-tabs> <div ng-model="editor.index" bs-tabs>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment