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, _, $) {
}
});
$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>
......
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