Skip to content

N
nexpie-grafana-theme
Commit 4132cf12 by Torkel Ödegaard
Options

feat(panels): more panel refactoring

parent 4f7fb40d
Showing with 48 additions and 82 deletions
public/app/features/dashboard/viewStateSrv.js
...@@ -167,7 +167,11 @@ function (angular, _, $) { ...@@ -167,7 +167,11 @@ function (angular, _, $) {
self.panelScopes.push(panelScope); self.panelScopes.push(panelScope);
if (self.state.panelId === panelScope.ctrl.panel.id) { if (self.state.panelId === panelScope.ctrl.panel.id) {
self.enterFullscreen(panelScope); if (self.state.edit) {
panelScope.ctrl.editPanel();
} else {
panelScope.ctrl.viewPanel();
}
} }
panelScope.$on('$destroy', function() { panelScope.$on('$destroy', function() {
......
public/app/features/panel/panel.ts
///<reference path="../../headers/common.d.ts" /> ///<reference path="../../headers/common.d.ts" />
import PanelMeta from './panel_meta3'; import config from 'app/core/config';
function generalOptionsTabEditorTab() {
return {templateUrl: 'public/app/partials/panelgeneral.html'};
}
export class PanelCtrl { export class PanelCtrl {
meta: any;
panel: any; panel: any;
row: any; row: any;
dashboard: any; dashboard: any;
tabIndex: number; editorTabIndex: number;
name: string;
icon: string;
editorTabs: any;
constructor(private scope) { constructor(private scope) {
this.meta = new PanelMeta(this.panel); var plugin = config.panels[this.panel.type];
this.tabIndex = 0;
this.name = plugin.name;
this.icon = plugin.info.icon;
this.editorTabIndex = 0;
this.publishAppEvent('panel-instantiated', {scope: scope}); this.publishAppEvent('panel-instantiated', {scope: scope});
} }
...@@ -30,12 +39,30 @@ export class PanelCtrl { ...@@ -30,12 +39,30 @@ export class PanelCtrl {
} }
editPanel() { editPanel() {
if (!this.editorTabs) {
this.initEditorTabs();
}
this.changeView(true, true); this.changeView(true, true);
} }
exitFullscreen() { exitFullscreen() {
this.changeView(false, false); this.changeView(false, false);
} }
initEditorTabs() {
this.editorTabs = [];
this.editorTabs.push({title: 'General', directiveFn: generalOptionsTabEditorTab});
}
getMenu() {
let menu = [];
menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'});
menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'});
menu.push({text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' });
menu.push({text: 'Share', click: 'ctrl.share(); dismiss();'});
return menu;
}
} }
export class PanelDirective { export class PanelDirective {
......
public/app/features/panel/panel_menu.js
...@@ -13,7 +13,7 @@ function (angular, $, _) { ...@@ -13,7 +13,7 @@ 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 | interpolateTemplateVars:this}}</span>' + '<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</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.meta.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.panelMeta.timeInfo}}</span>' + '<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
'</span>'; '</span>';
function createExternalLinkMenu(ctrl) { function createExternalLinkMenu(ctrl) {
...@@ -44,7 +44,7 @@ function (angular, $, _) { ...@@ -44,7 +44,7 @@ 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(ctrl.meta.menu, function(item) { _.each(ctrl.getMenu(), function(item) {
// skip edit actions if not editor // skip edit actions if not editor
if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) { if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) {
return; return;
...@@ -64,7 +64,7 @@ function (angular, $, _) { ...@@ -64,7 +64,7 @@ function (angular, $, _) {
} }
function getExtendedMenu(ctrl) { function getExtendedMenu(ctrl) {
return angular.copy(ctrl.meta.extendedMenu); return angular.copy(ctrl.extendedMenu);
} }
return { return {
......
public/app/features/panel/panel_meta3.ts deleted 100644 → 0
///<reference path="../../headers/common.d.ts" />
import config from 'app/core/config';
function panelOptionsTab() {
return {templateUrl: 'app/partials/panelgeneral.html'};
}
export default class PanelMeta {
description: any;
icon: any;
name: any;
menu: any;
editorTabs: any;
extendedMenu: any;
constructor(panel) {
let panelInfo = config.panels[panel.type];
console.log(panelInfo);
this.icon = panelInfo.icon;
this.name = panelInfo.name;
this.menu = [];
this.editorTabs = [];
this.extendedMenu = [];
if (panelInfo.fullscreen) {
this.addMenuItem('View', 'icon-eye-open', 'ctrl.viewPanel(); 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', panelOptionsTab);
if (panelInfo.metricsEditor) {
this.addEditorTab('Metrics', 'app/partials/metrics.html');
}
this.addExtendedMenuItem('Panel JSON', '', 'ctrl.editPanelJson(); dismiss();');
}
addMenuItem (text, icon, click, role?) {
this.menu.push({text: text, icon: icon, click: click, role: role});
}
addExtendedMenuItem (text, icon, click, role?) {
this.extendedMenu.push({text: text, icon: icon, click: click, role: role});
}
addEditorTab(title, directiveFn) {
this.editorTabs.push({title: title, directiveFn: directiveFn});
}
}
public/app/features/panel/partials/panel.html
<div class="panel-container" ng-class="{'panel-transparent': panel.transparent}"> <div class="panel-container" ng-class="{'panel-transparent': panel.transparent}">
<div class="panel-header"> <div class="panel-header">
<span class="alert-error panel-error small pointer" config-modal="app/partials/inspector.html" ng-if="panelMeta.error"> <span class="alert-error panel-error small pointer" config-modal="app/partials/inspector.html" ng-if="ctrl.error">
<span data-placement="top" bs-tooltip="panelMeta.error"> <span data-placement="top" bs-tooltip="ctrl.error">
<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span> <i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
</span> </span>
</span> </span>
<span class="panel-loading" ng-show="panelMeta.loading"> <span class="panel-loading" ng-show="ctrl.loading">
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-spin"></i>
</span> </span>
...@@ -23,12 +23,12 @@ ...@@ -23,12 +23,12 @@
<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="ctrl.meta.icon"></i> <i ng-class="ctrl.icon"></i>
{{ctrl.meta.name}} {{ctrl.name}}
</div> </div>
<div ng-model="ctrl.tabIndex" bs-tabs> <div ng-model="ctrl.editorTabIndex" bs-tabs>
<div ng-repeat="tab in ctrl.meta.editorTabs" data-title="{{tab.title}}"> <div ng-repeat="tab in ctrl.editorTabs" data-title="{{tab.title}}">
</div> </div>
</div> </div>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
</div> </div>
<div class="gf-box-body"> <div class="gf-box-body">
<div ng-repeat="tab in ctrl.meta.editorTabs" ng-if="ctrl.tabIndex === $index"> <div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index">
<panel-editor-tab editor-tab="tab" panel-ctrl="ctrl"></panel-editor-tab> <panel-editor-tab editor-tab="tab" panel-ctrl="ctrl"></panel-editor-tab>
</div> </div>
</div> </div>
......
public/app/plugins/panel/test/module.ts
...@@ -12,15 +12,6 @@ class TestPanelCtrl extends PanelCtrl { ...@@ -12,15 +12,6 @@ class TestPanelCtrl extends PanelCtrl {
class TestPanel extends PanelDirective { class TestPanel extends PanelDirective {
templateUrl = `app/plugins/panel/test/module.html`; templateUrl = `app/plugins/panel/test/module.html`;
controller = TestPanelCtrl; controller = TestPanelCtrl;
constructor($http) {
super();
console.log('panel ctor: ', $http);
}
link(scope) {
console.log('panel link: ', scope.ctrl.panel.id);
}
} }
export { export {
......
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