IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

added colspan submenu to panel dropdown menu for quick span changes

Browse Source
This commit is contained in:
Torkel Odegaard 2014-01-06 18:17:35 +01:00
parent bb1e73dc61
commit d8cd5c15ad
3 changed files with 79 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/directives/kibanaPanel.js
View File

@ -48,12 +48,9 @@ function (angular) {
'</span>' +
'<span ng-if="panelMeta.menuItems" class="dropdown" ng-show="panel.title">' +
'<span class="dropdown-toggle panel-text panel-title pointer" data-toggle="dropdown" tabindex="1">' +
'<span class="panel-text panel-title pointer" bs-dropdown="panelMeta.menuItems" tabindex="1">' +
'{{panel.title}}' +
'</span>' +
'<ul class="dropdown-menu" role="menu">' +
'<li ng-repeat="item in panelMeta.menuItems"><a ng-click="item.action();">{{item.text}}</a></li>' +
'</ul>' +
'</span>'+
'<span ng-if="!panelMeta.menuItems" class="panel-text panel-title" ng-show="panel.title">' +

47
src/app/directives/panelMenu.js Normal file
View File

@ -0,0 +1,47 @@
define([
'angular'
],
function (angular) {
'use strict';
angular.module('kibana.directives').directive('panelMenu', [
'$parse',
'$compile',
'$timeout',
function ($parse, $compile, $timeout) {
var buildTemplate = function (items, ul) {
if (!ul)
ul = [
'<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">',
'</ul>'
];
angular.forEach(items, function (item, index) {
if (item.divider)
return ul.splice(index + 1, 0, '<li class="divider"></li>');
var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' + '<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? '" ng-click="' + item.click + '"' : '') + (item.target ? '" target="' + item.target + '"' : '') + (item.method ? '" data-method="' + item.method + '"' : '') + '>' + (item.text || '') + '</a>';
if (item.submenu && item.submenu.length)
li += buildTemplate(item.submenu).join('\n');
li += '</li>';
ul.splice(index + 1, 0, li);
});
return ul;
};
return {
restrict: 'EA',
scope: true,
link: function postLink(scope, iElement, iAttrs) {
var getter = $parse(iAttrs.bsDropdown), items = getter(scope);
$timeout(function () {
if (!angular.isArray(items)) {
}
var dropdown = angular.element(buildTemplate(items).join(''));
dropdown.insertAfter(iElement);
$compile(iElement.next('ul.dropdown-menu'))(scope);
});
iElement.addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
}
};
}
]);
});

47
src/app/panels/graphite/module.js
View File

@ -56,10 +56,24 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
],
menuItems: [
{ text: 'View fullscreen', action: function() { $scope.toggleFullscreen(); }},
{ text: 'Edit', action: function() { $scope.openConfigureModal(); }},
{ text: 'Duplicate', action: function() { $scope.duplicate(); }},
{ text: 'Remove', action: function() { $scope.remove_panel_from_row($scope.row, $scope.panel); }}
{ text: 'View fullscreen', click: 'toggleFullscreen()' },
{ text: 'Edit', click: 'openConfigureModal()' },
{ text: 'Duplicate', click: 'duplicate()' },
{ text: 'Span', submenu: [
{ text: '1', click: 'updateColumnSpan(1)' },
{ text: '2', click: 'updateColumnSpan(2)' },
{ text: '3', click: 'updateColumnSpan(3)' },
{ text: '4', click: 'updateColumnSpan(4)' },
{ text: '5', click: 'updateColumnSpan(5)' },
{ text: '6', click: 'updateColumnSpan(6)' },
{ text: '7', click: 'updateColumnSpan(7)' },
{ text: '8', click: 'updateColumnSpan(8)' },
{ text: '9', click: 'updateColumnSpan(9)' },
{ text: '10', click: 'updateColumnSpan(10)' },
{ text: '11', click: 'updateColumnSpan(11)' },
{ text: '12', click: 'updateColumnSpan(12)' },
]},
{ text: 'Remove', click: 'remove_panel_from_row(row, panel)' }
],
status : "Unstable",
@ -308,17 +322,15 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
};
return graphiteSrv.query(graphiteQuery)
.then(function(results) {
$scope.panelMeta.loading = false;
var data = $scope.receiveGraphiteData(results);
$scope.$emit('render', data);
})
.then($scope.receiveGraphiteData)
.then(null, function(err) {
$scope.panel.error = err.message || "Graphite HTTP Request Error";
});
};
$scope.receiveGraphiteData = function(results) {
$scope.panelMeta.loading = false;
results = results.data;
$scope.legend = [];
var data = [];
@ -363,7 +375,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
});
return data;
$scope.render(data);
};
$scope.add_target = function() {
@ -402,9 +414,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.fullscreen = true;
$rootScope.$emit('panel-fullscreen-enter');
$timeout(function() {
$scope.$emit('render');
});
$timeout($scope.render);
};
$scope.openConfigureModal = function() {
@ -416,8 +426,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.enterFullscreenMode({edit: true});
};
$scope.render = function() {
$scope.$emit('render');
$scope.render = function(data) {
$scope.$emit('render', data);
};
$scope.changeSeriesColor = function(series, color) {
@ -470,7 +480,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.toggleYAxis = function(info) {
info.yaxis = info.yaxis === 2 ? 1 : 2;
$scope.panel.aliasYAxis[info.alias] = info.yaxis;
$scope.$emit('render');
$scope.render();
};
$scope.updateColumnSpan = function(span) {
$scope.panel.span = span;
$timeout($scope.render);
};
});