mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Panels: refactoring panel meta model & menu, will open up panel specific menu actions
This commit is contained in:
Torkel Ödegaard
parent
81b1939f92
commit
d12f4a4aee
45
src/app/components/panelmeta.js
Normal file
45
src/app/components/panelmeta.js
Normal file
@ -0,0 +1,45 @@
|
||||
define([
|
||||
],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
function PanelMeta(options) {
|
||||
this.description = options.description;
|
||||
this.titlePos = options.titlePos;
|
||||
this.fullscreen = options.fullscreen;
|
||||
this.menu = [];
|
||||
this.editorTabs = [];
|
||||
this.extendedMenu = [];
|
||||
|
||||
if (options.fullscreen) {
|
||||
this.addMenuItem('view', 'icon-eye-open', 'toggleFullscreen(false)');
|
||||
}
|
||||
|
||||
this.addMenuItem('edit', 'icon-cog', 'editPanel()');
|
||||
this.addMenuItem('duplicate', 'icon-copy', 'duplicatePanel()');
|
||||
this.addMenuItem('share', 'icon-share', 'sharePanel()');
|
||||
|
||||
this.addEditorTab('General', 'app/partials/panelgeneral.html');
|
||||
|
||||
if (options.metricsEditor) {
|
||||
this.addEditorTab('General', 'app/partials/metrics.html');
|
||||
}
|
||||
|
||||
this.addExtendedMenuItem('Panel JSON', '', 'editPanelJson()');
|
||||
}
|
||||
|
||||
PanelMeta.prototype.addMenuItem = function(text, icon, click) {
|
||||
this.menu.push({text: text, icon: icon, click: click});
|
||||
};
|
||||
|
||||
PanelMeta.prototype.addExtendedMenuItem = function(text, icon, click) {
|
||||
this.extendedMenu.push({text: text, icon: icon, click: click});
|
||||
};
|
||||
|
||||
PanelMeta.prototype.addEditorTab = function(title, src) {
|
||||
this.editorTabs.push({title: title, src: src});
|
||||
};
|
||||
|
||||
return PanelMeta;
|
||||
|
||||
});
|
||||
@ -109,14 +109,6 @@ function (angular, $, config, _) {
|
||||
$scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable;
|
||||
};
|
||||
|
||||
$scope.setEditorTabs = function(panelMeta) {
|
||||
$scope.editorTabs = ['General','Panel'];
|
||||
if(!_.isUndefined(panelMeta.editorTabs)) {
|
||||
$scope.editorTabs = _.union($scope.editorTabs,_.pluck(panelMeta.editorTabs,'title'));
|
||||
}
|
||||
return $scope.editorTabs;
|
||||
};
|
||||
|
||||
$scope.onDrop = function(panelId, row, dropTarget) {
|
||||
var info = $scope.dashboard.getPanelInfoById(panelId);
|
||||
if (dropTarget) {
|
||||
|
||||
@ -22,7 +22,7 @@ function (angular, $, _) {
|
||||
template += '</div>';
|
||||
|
||||
template += '<div class="panel-menu-row">';
|
||||
template += '<a class="panel-menu-link" bs-dropdown="[{text: \'hej\'}]"><i class="icon-th-list"></i></a>';
|
||||
template += '<a class="panel-menu-link" bs-dropdown="panelMeta.extendedMenu"><i class="icon-th-list"></i></a>';
|
||||
|
||||
_.each($scope.panelMeta.menu, function(item) {
|
||||
template += '<a class="panel-menu-link" ';
|
||||
@ -97,7 +97,7 @@ function (angular, $, _) {
|
||||
$menu = $(menuTemplate);
|
||||
$menu.css('left', menuLeftPos);
|
||||
$menu.mouseleave(function() {
|
||||
dismiss(1000);
|
||||
//dismiss(1000);
|
||||
});
|
||||
|
||||
menuScope = $scope.$new();
|
||||
@ -111,7 +111,7 @@ function (angular, $, _) {
|
||||
$(".panel-container").removeClass('panel-highlight');
|
||||
$panelContainer.toggleClass('panel-highlight');
|
||||
|
||||
dismiss(2500);
|
||||
//dismiss(2500);
|
||||
};
|
||||
|
||||
if ($scope.panelMeta.titlePos && $scope.panel.title) {
|
||||
|
||||
@ -26,13 +26,13 @@
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs>
|
||||
<div ng-repeat="tab in editorTabs" data-title="{{tab}}">
|
||||
<div ng-repeat="tab in panelMeta.editorTabs" data-title="{{tab.title}}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-editor-body">
|
||||
<div ng-repeat="tab in panelMeta.fullEditorTabs" ng-if="editorTabs[editor.index] == tab.title">
|
||||
<div ng-repeat="tab in panelMeta.editorTabs" ng-if="editor.index === $index">
|
||||
<div ng-include src="tab.src"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,7 @@ define([
|
||||
'kbn',
|
||||
'moment',
|
||||
'components/timeSeries',
|
||||
'components/panelmeta',
|
||||
'./seriesOverridesCtrl',
|
||||
'./legend',
|
||||
'services/panelSrv',
|
||||
@ -20,68 +21,35 @@ define([
|
||||
'jquery.flot.fillbelow',
|
||||
'jquery.flot.crosshair'
|
||||
],
|
||||
function (angular, app, $, _, kbn, moment, TimeSeries) {
|
||||
function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.panels.graph');
|
||||
|
||||
module.controller('GraphCtrl', function($scope, $rootScope, panelSrv, annotationsSrv, timeSrv) {
|
||||
|
||||
$scope.panelMeta = {
|
||||
editorTabs: [],
|
||||
fullEditorTabs : [
|
||||
{
|
||||
title: 'General',
|
||||
src:'app/partials/panelgeneral.html'
|
||||
},
|
||||
{
|
||||
title: 'Metrics',
|
||||
src:'app/partials/metrics.html'
|
||||
},
|
||||
{
|
||||
title:'Axes & Grid',
|
||||
src:'app/panels/graph/axisEditor.html'
|
||||
},
|
||||
{
|
||||
title:'Display Styles',
|
||||
src:'app/panels/graph/styleEditor.html'
|
||||
}
|
||||
],
|
||||
fullscreenEdit: true,
|
||||
fullscreenView: true,
|
||||
description : "Graphing"
|
||||
};
|
||||
$scope.panelMeta = new PanelMeta({
|
||||
description: 'Graph panel',
|
||||
fullscreen: true,
|
||||
metricsEditor: true
|
||||
});
|
||||
|
||||
$scope.panelMeta.addEditorTab('Axes & Grid', 'app/panels/graph/axisEditor.html');
|
||||
$scope.panelMeta.addEditorTab('Display Styles', 'app/panels/graph/styleEditor.html');
|
||||
|
||||
// Set and populate defaults
|
||||
var _d = {
|
||||
|
||||
// datasource name, null = default datasource
|
||||
datasource: null,
|
||||
|
||||
/** @scratch /panels/histogram/3
|
||||
* renderer:: sets client side (flot) or native graphite png renderer (png)
|
||||
*/
|
||||
// sets client side (flot) or native graphite png renderer (png)
|
||||
renderer: 'flot',
|
||||
/** @scratch /panels/histogram/3
|
||||
* x-axis:: Show the x-axis
|
||||
*/
|
||||
// Show/hide the x-axis
|
||||
'x-axis' : true,
|
||||
/** @scratch /panels/histogram/3
|
||||
* y-axis:: Show the y-axis
|
||||
*/
|
||||
// Show/hide y-axis
|
||||
'y-axis' : true,
|
||||
/** @scratch /panels/histogram/3
|
||||
* scale:: Scale the y-axis by this factor
|
||||
*/
|
||||
scale : 1,
|
||||
/** @scratch /panels/histogram/3
|
||||
* y_formats :: 'none','bytes','bits','bps','short', 's', 'ms'
|
||||
*/
|
||||
// y axis formats, [left axis,right axis]
|
||||
y_formats : ['short', 'short'],
|
||||
/** @scratch /panels/histogram/5
|
||||
* grid object:: Min and max y-axis values
|
||||
* grid.min::: Minimum y-axis value
|
||||
* grid.ma1::: Maximum y-axis value
|
||||
*/
|
||||
// grid options
|
||||
grid : {
|
||||
leftMax: null,
|
||||
rightMax: null,
|
||||
@ -92,48 +60,23 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
|
||||
threshold1Color: 'rgba(216, 200, 27, 0.27)',
|
||||
threshold2Color: 'rgba(234, 112, 112, 0.22)'
|
||||
},
|
||||
|
||||
annotate : {
|
||||
enable : false,
|
||||
},
|
||||
|
||||
/** @scratch /panels/histogram/3
|
||||
* resolution:: If auto_int is true, shoot for this many bars.
|
||||
*/
|
||||
resolution : 100,
|
||||
|
||||
/** @scratch /panels/histogram/3
|
||||
* ==== Drawing options
|
||||
* lines:: Show line chart
|
||||
*/
|
||||
// show/hide lines
|
||||
lines : true,
|
||||
/** @scratch /panels/histogram/3
|
||||
* fill:: Area fill factor for line charts, 1-10
|
||||
*/
|
||||
// fill factor
|
||||
fill : 0,
|
||||
/** @scratch /panels/histogram/3
|
||||
* linewidth:: Weight of lines in pixels
|
||||
*/
|
||||
// line width in pixels
|
||||
linewidth : 1,
|
||||
/** @scratch /panels/histogram/3
|
||||
* points:: Show points on chart
|
||||
*/
|
||||
// show hide points
|
||||
points : false,
|
||||
/** @scratch /panels/histogram/3
|
||||
* pointradius:: Size of points in pixels
|
||||
*/
|
||||
// point radius in pixels
|
||||
pointradius : 5,
|
||||
/** @scratch /panels/histogram/3
|
||||
* bars:: Show bars on chart
|
||||
*/
|
||||
// show hide bars
|
||||
bars : false,
|
||||
/** @scratch /panels/histogram/3
|
||||
* stack:: Stack multiple series
|
||||
*/
|
||||
// enable/disable stacking
|
||||
stack : false,
|
||||
/** @scratch /panels/histogram/3
|
||||
* legend:: Display the legend
|
||||
*/
|
||||
// stack percentage mode
|
||||
percentage : false,
|
||||
// legend options
|
||||
legend: {
|
||||
show: true, // disable/enable legend
|
||||
values: false, // disable/enable legend values
|
||||
@ -143,27 +86,20 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
|
||||
total: false,
|
||||
avg: false
|
||||
},
|
||||
/** @scratch /panels/histogram/3
|
||||
* ==== Transformations
|
||||
/** @scratch /panels/histogram/3
|
||||
* percentage:: Show the y-axis as a percentage of the axis total. Only makes sense for multiple
|
||||
* queries
|
||||
*/
|
||||
percentage : false,
|
||||
|
||||
// how null points should be handled
|
||||
nullPointMode : 'connected',
|
||||
|
||||
// staircase line mode
|
||||
steppedLine: false,
|
||||
|
||||
// tooltip options
|
||||
tooltip : {
|
||||
value_type: 'cumulative',
|
||||
shared: false,
|
||||
},
|
||||
|
||||
// metric queries
|
||||
targets: [{}],
|
||||
|
||||
// series color overrides
|
||||
aliasColors: {},
|
||||
|
||||
// other style overrides
|
||||
seriesOverrides: [],
|
||||
};
|
||||
|
||||
|
||||
@ -12,13 +12,13 @@
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs>
|
||||
<div ng-repeat="tab in editorTabs" data-title="{{tab}}">
|
||||
<div ng-repeat="tab in panelMeta.editorTabs" data-title="{{tab.title}}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-editor-body">
|
||||
<div ng-repeat="tab in panelMeta.fullEditorTabs" ng-if="editorTabs[editor.index] == tab.title">
|
||||
<div ng-repeat="tab in panelMeta.editorTabs" ng-if="editor.index === $index">
|
||||
<div ng-include src="tab.src"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,10 +4,11 @@ define([
|
||||
'lodash',
|
||||
'components/timeSeries',
|
||||
'kbn',
|
||||
'components/panelmeta',
|
||||
'services/panelSrv',
|
||||
'./singleStatPanel',
|
||||
],
|
||||
function (angular, app, _, TimeSeries, kbn) {
|
||||
function (angular, app, _, TimeSeries, kbn, PanelMeta) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.panels.singlestat');
|
||||
@ -15,25 +16,14 @@ function (angular, app, _, TimeSeries, kbn) {
|
||||
|
||||
module.controller('SingleStatCtrl', function($scope, panelSrv, timeSrv) {
|
||||
|
||||
$scope.panelMeta = {
|
||||
$scope.panelMeta = new PanelMeta({
|
||||
description: 'Singlestat panel',
|
||||
titlePos: 'left',
|
||||
description : "A stats values panel",
|
||||
fullEditorTabs : [
|
||||
{
|
||||
title: 'General',
|
||||
src:'app/partials/panelgeneral.html'
|
||||
},
|
||||
{
|
||||
title: 'Metrics',
|
||||
src:'app/partials/metrics.html'
|
||||
},
|
||||
{
|
||||
title: 'Options',
|
||||
src:'app/panels/singlestat/editor.html'
|
||||
}
|
||||
],
|
||||
fullscreenEdit: true,
|
||||
};
|
||||
fullscreen: true,
|
||||
metricsEditor: true
|
||||
});
|
||||
|
||||
$scope.panelMeta.addEditorTab('Options', 'app/panels/singlestat/editor.html');
|
||||
|
||||
// Set and populate defaults
|
||||
var _d = {
|
||||
|
||||
@ -2,12 +2,10 @@ define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash',
|
||||
'kbn',
|
||||
'jquery',
|
||||
'jquery.flot',
|
||||
'jquery.flot.time',
|
||||
],
|
||||
function (angular, app, _, kbn, $) {
|
||||
function (angular, app, _, $) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.panels.singlestat', []);
|
||||
|
||||
@ -3,8 +3,9 @@ define([
|
||||
'app',
|
||||
'lodash',
|
||||
'require',
|
||||
'components/panelmeta',
|
||||
],
|
||||
function (angular, app, _, require) {
|
||||
function (angular, app, _, require, PanelMeta) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.panels.text', []);
|
||||
@ -14,9 +15,11 @@ function (angular, app, _, require) {
|
||||
|
||||
module.controller('text', function($scope, templateSrv, $sce, panelSrv) {
|
||||
|
||||
$scope.panelMeta = {
|
||||
$scope.panelMeta = new PanelMeta({
|
||||
description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
|
||||
};
|
||||
});
|
||||
|
||||
$scope.panelMeta.addEditorTab('Edit text', 'app/panels/text/editor.html');
|
||||
|
||||
// Set and populate defaults
|
||||
var _d = {
|
||||
|
||||
@ -5,22 +5,14 @@
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
|
||||
<div ng-repeat="tab in panelMeta.editorTabs" data-title="{{tab.title}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="dashboard-editor-body">
|
||||
<div ng-show="editorTabs[editor.index] == 'General'">
|
||||
<div ng-include src="'app/partials/panelgeneral.html'"></div>
|
||||
</div>
|
||||
|
||||
<div ng-show="editorTabs[editor.index] == 'Panel'">
|
||||
<div ng-include src="panelEditorPath(panel.type)"></div>
|
||||
</div>
|
||||
|
||||
<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
|
||||
<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editor.index == $index">
|
||||
<div ng-include src="tab.src"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,44 +11,10 @@ function (angular, _) {
|
||||
this.init = function($scope) {
|
||||
if (!$scope.panel.span) { $scope.panel.span = 12; }
|
||||
|
||||
var menu = [
|
||||
{
|
||||
text: "view",
|
||||
icon: "icon-eye-open",
|
||||
click: 'toggleFullscreen(false)',
|
||||
condition: $scope.panelMeta.fullscreenView
|
||||
},
|
||||
{
|
||||
text: 'edit',
|
||||
icon: 'icon-cogs',
|
||||
click: 'editPanel()',
|
||||
condition: true,
|
||||
},
|
||||
{
|
||||
text: 'duplicate',
|
||||
icon: 'icon-copy',
|
||||
click: 'duplicatePanel(panel)',
|
||||
condition: true
|
||||
},
|
||||
{
|
||||
text: 'json',
|
||||
icon: 'icon-code',
|
||||
click: 'editPanelJson()',
|
||||
condition: true
|
||||
},
|
||||
{
|
||||
text: 'share',
|
||||
icon: 'icon-share',
|
||||
click: 'sharePanel()',
|
||||
condition: true
|
||||
},
|
||||
];
|
||||
|
||||
$scope.inspector = {};
|
||||
$scope.panelMeta.menu = _.where(menu, { condition: true });
|
||||
|
||||
$scope.editPanel = function() {
|
||||
if ($scope.panelMeta.fullscreenEdit) {
|
||||
if ($scope.panelMeta.fullscreen) {
|
||||
$scope.toggleFullscreen(true);
|
||||
}
|
||||
else {
|
||||
@ -118,9 +84,6 @@ function (angular, _) {
|
||||
// Post init phase
|
||||
$scope.fullscreen = false;
|
||||
$scope.editor = { index: 1 };
|
||||
if ($scope.panelMeta.fullEditorTabs) {
|
||||
$scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs, 'title');
|
||||
}
|
||||
|
||||
$scope.datasources = datasourceSrv.getMetricSources();
|
||||
$scope.setDatasource($scope.panel.datasource);
|
||||
|
||||
@ -93,6 +93,10 @@
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-highlight {
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
@dropdownBackground: @grafanaTargetFuncBackground;
|
||||
@dropdownBackground: @heroUnitBackground;
|
||||
@dropdownBorder: rgba(0,0,0,.2);
|
||||
@dropdownDividerTop: transparent;
|
||||
@dropdownDividerBottom: #222;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user