From 2dac9758053f514a7160fa14d35a04ae18de5b9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 13 May 2015 21:34:50 +0200 Subject: [PATCH 1/2] began work on color by regex / series override for color, #590 --- .../app/panels/graph/seriesOverridesCtrl.js | 28 +++++++++++++++++-- public/app/panels/graph/styleEditor.html | 4 ++- public/app/partials/colorpicker.html | 11 ++++++++ public/app/services/popoverSrv.js | 10 ++++++- public/css/less/graph.less | 1 + 5 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 public/app/partials/colorpicker.html diff --git a/public/app/panels/graph/seriesOverridesCtrl.js b/public/app/panels/graph/seriesOverridesCtrl.js index 80fb2ead6c2..6105402ce05 100644 --- a/public/app/panels/graph/seriesOverridesCtrl.js +++ b/public/app/panels/graph/seriesOverridesCtrl.js @@ -1,14 +1,15 @@ define([ 'angular', + 'jquery', 'app', 'lodash', -], function(angular, app, _) { +], function(angular, jquery, app, _) { 'use strict'; var module = angular.module('grafana.panels.graph', []); app.useModule(module); - module.controller('SeriesOverridesCtrl', function($scope) { + module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv, $timeout) { $scope.overrideMenu = []; $scope.currentOverrides = []; $scope.override = $scope.override || {}; @@ -37,10 +38,32 @@ define([ $scope.addSeriesOverride({ alias: subItem.value, lines: false }); } + if (item.propertyName === 'color') { + $scope.openColorSelector(); + } + $scope.updateCurrentOverrides(); $scope.render(); }; + $scope.colorSelected = function(color) { + $scope.override['color'] = color; + $scope.updateCurrentOverrides(); + $scope.render(); + }; + + $scope.openColorSelector = function() { + var popoverScope = $scope.$new(); + popoverScope.colorSelected = $scope.colorSelected; + + popoverSrv.show({ + element: $element.find(".dropdown"), + placement: 'top', + templateUrl: 'app/partials/colorpicker.html', + scope: popoverScope + }); + }; + $scope.removeOverride = function(option) { delete $scope.override[option.propertyName]; $scope.updateCurrentOverrides(); @@ -75,6 +98,7 @@ define([ $scope.addOverrideOption('Points', 'points', [true, false]); $scope.addOverrideOption('Points Radius', 'pointradius', [1,2,3,4,5]); $scope.addOverrideOption('Stack', 'stack', [true, false, 2, 3, 4, 5]); + $scope.addOverrideOption('Color', 'color', ['change']); $scope.addOverrideOption('Y-axis', 'yaxis', [1, 2]); $scope.addOverrideOption('Z-index', 'zindex', [-1,-2,-3,0,1,2,3]); $scope.updateCurrentOverrides(); diff --git a/public/app/panels/graph/styleEditor.html b/public/app/panels/graph/styleEditor.html index a5d82bba262..d646b766f70 100644 --- a/public/app/panels/graph/styleEditor.html +++ b/public/app/panels/graph/styleEditor.html @@ -94,6 +94,8 @@ - + diff --git a/public/app/partials/colorpicker.html b/public/app/partials/colorpicker.html new file mode 100644 index 00000000000..f687b740bbf --- /dev/null +++ b/public/app/partials/colorpicker.html @@ -0,0 +1,11 @@ +
+ × + +
+   +
+ +
+ diff --git a/public/app/services/popoverSrv.js b/public/app/services/popoverSrv.js index a1e60525e2d..0fb94b06ebe 100644 --- a/public/app/services/popoverSrv.js +++ b/public/app/services/popoverSrv.js @@ -21,12 +21,20 @@ function (angular, _) { return; } + options.scope.dismiss = function() { + popover = options.element.data('popover'); + if (popover) { + popover.destroy(); + } + options.scope.$destroy(); + }; + this.getTemplate(options.templateUrl).then(function(result) { var template = _.isString(result) ? result : result.data; options.element.popover({ content: template, - placement: 'bottom', + placement: options.placement || 'bottom', html: true }); diff --git a/public/css/less/graph.less b/public/css/less/graph.less index a56fe968017..1b29816fa12 100644 --- a/public/css/less/graph.less +++ b/public/css/less/graph.less @@ -164,6 +164,7 @@ .graph-legend-popover { width: 200px; + min-height: 100px; label { display: inline-block; } From 8c0e1060e628696e3eca078cd06f77fb74cac763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 14 May 2015 12:34:30 +0200 Subject: [PATCH 2/2] Graph: Define series color using regex rule, Closes #590 --- CHANGELOG.md | 1 + package.json | 2 +- public/app/components/timeSeries.js | 1 + public/app/panels/graph/legend.js | 2 +- public/app/panels/graph/legend.popover.html | 3 +- .../app/panels/graph/seriesOverridesCtrl.js | 12 +++-- public/app/panels/graph/styleEditor.html | 17 +++---- public/app/services/popoverSrv.js | 47 +++++++++++-------- public/css/less/graph.less | 2 +- .../test/specs/seriesOverridesCtrl-specs.js | 6 ++- 10 files changed, 54 insertions(+), 39 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c5ada93d58..dbf01ab78c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - [Issue #1922](https://github.com/grafana/grafana/issues/1922). Templating: Specify multiple variable values via URL params. - [Issue #1888](https://github.com/grafana/grafana/issues/1144). Templating: Repeat panel or row for each selected template variable value - [Issue #1888](https://github.com/grafana/grafana/issues/1944). Dashboard: Custom Navigation links & dynamic links to related dashboards +- [Issue #590](https://github.com/grafana/grafana/issues/590). Graph: Define series color using regex rule **User or Organization admin** - [Issue #1899](https://github.com/grafana/grafana/issues/1899). Organization: You can now update the organization user role directly (without removing and readding the organization user). diff --git a/package.json b/package.json index 5016a6309eb..71eb75b732b 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "karma-coverage": "0.3.1", "karma-coveralls": "0.1.5", "karma-expect": "~1.1.0", - "karma-mocha": "~0.1.4", + "karma-mocha": "~0.1.10", "karma-phantomjs-launcher": "0.1.4", "karma-requirejs": "0.2.2", "karma-script-launcher": "0.1.0", diff --git a/public/app/components/timeSeries.js b/public/app/components/timeSeries.js index c356ddea63b..679777bfb92 100644 --- a/public/app/components/timeSeries.js +++ b/public/app/components/timeSeries.js @@ -53,6 +53,7 @@ function (_, kbn) { if (override.steppedLine !== void 0) { this.lines.steps = override.steppedLine; } if (override.zindex !== void 0) { this.zindex = override.zindex; } if (override.fillBelowTo !== void 0) { this.fillBelowTo = override.fillBelowTo; } + if (override.color !== void 0) { this.color = override.color; } if (override.yaxis !== void 0) { this.yaxis = override.yaxis; diff --git a/public/app/panels/graph/legend.js b/public/app/panels/graph/legend.js index fb07275310d..1f016f2c3a3 100644 --- a/public/app/panels/graph/legend.js +++ b/public/app/panels/graph/legend.js @@ -41,7 +41,7 @@ function (angular, app, _, kbn, $) { var popoverScope = scope.$new(); popoverScope.series = seriesInfo; popoverSrv.show({ - element: $(':first-child', el), + element: el, templateUrl: 'app/panels/graph/legend.popover.html', scope: popoverScope }); diff --git a/public/app/panels/graph/legend.popover.html b/public/app/panels/graph/legend.popover.html index 4d24136309e..5410af2d1d1 100644 --- a/public/app/panels/graph/legend.popover.html +++ b/public/app/panels/graph/legend.popover.html @@ -16,8 +16,7 @@
-   diff --git a/public/app/panels/graph/seriesOverridesCtrl.js b/public/app/panels/graph/seriesOverridesCtrl.js index 6105402ce05..81cb41a8572 100644 --- a/public/app/panels/graph/seriesOverridesCtrl.js +++ b/public/app/panels/graph/seriesOverridesCtrl.js @@ -9,7 +9,7 @@ define([ var module = angular.module('grafana.panels.graph', []); app.useModule(module); - module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv, $timeout) { + module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv) { $scope.overrideMenu = []; $scope.currentOverrides = []; $scope.override = $scope.override || {}; @@ -29,6 +29,12 @@ define([ }; $scope.setOverride = function(item, subItem) { + // handle color overrides + if (item.propertyName === 'color') { + $scope.openColorSelector(); + return; + } + $scope.override[item.propertyName] = subItem.value; // automatically disable lines for this series and the fill bellow to series @@ -38,10 +44,6 @@ define([ $scope.addSeriesOverride({ alias: subItem.value, lines: false }); } - if (item.propertyName === 'color') { - $scope.openColorSelector(); - } - $scope.updateCurrentOverrides(); $scope.render(); }; diff --git a/public/app/panels/graph/styleEditor.html b/public/app/panels/graph/styleEditor.html index d646b766f70..5d5f2fd7401 100644 --- a/public/app/panels/graph/styleEditor.html +++ b/public/app/panels/graph/styleEditor.html @@ -73,22 +73,23 @@
  • alias or regex
    • +
  • - +
    • +
  • - {{option.name}}: {{option.value}} + + Color: + + + {{option.name}}: {{option.value}} +
    • -
    diff --git a/public/app/services/popoverSrv.js b/public/app/services/popoverSrv.js index 0fb94b06ebe..cec294178c0 100644 --- a/public/app/services/popoverSrv.js +++ b/public/app/services/popoverSrv.js @@ -1,8 +1,9 @@ define([ 'angular', 'lodash', + 'jquery', ], -function (angular, _) { +function (angular, _, $) { 'use strict'; var module = angular.module('grafana.services'); @@ -14,12 +15,16 @@ function (angular, _) { }; this.show = function(options) { - var popover = options.element.data('popover'); - if (popover) { - popover.scope.$destroy(); - popover.destroy(); - return; - } + var popover; + + // hide other popovers + $('.popover').each(function() { + popover = $(this).prev().data('popover'); + if (popover) { + popover.scope.$destroy(); + popover.destroy(); + } + }); options.scope.dismiss = function() { popover = options.element.data('popover'); @@ -30,22 +35,24 @@ function (angular, _) { }; this.getTemplate(options.templateUrl).then(function(result) { - var template = _.isString(result) ? result : result.data; + $timeout(function() { + var template = _.isString(result) ? result : result.data; - options.element.popover({ - content: template, - placement: options.placement || 'bottom', - html: true - }); + options.element.popover({ + content: template, + placement: options.placement || 'bottom', + html: true + }); - popover = options.element.data('popover'); - popover.hasContent = function () { - return template; - }; + popover = options.element.data('popover'); + popover.hasContent = function () { + return template; + }; - popover.toggle(); - popover.scope = options.scope; - $compile(popover.$tip)(popover.scope); + popover.toggle(); + popover.scope = options.scope; + $compile(popover.$tip)(popover.scope); + }, 1); }); }; diff --git a/public/css/less/graph.less b/public/css/less/graph.less index 1b29816fa12..b96e466eea1 100644 --- a/public/css/less/graph.less +++ b/public/css/less/graph.less @@ -114,7 +114,7 @@ th { text-align: right; - padding: 5px 10px; + padding: 0px 10px 1px 0; font-weight: bold; color: @blue; font-size: 85%; diff --git a/public/test/specs/seriesOverridesCtrl-specs.js b/public/test/specs/seriesOverridesCtrl-specs.js index ec7cc70159c..7386083e87b 100644 --- a/public/test/specs/seriesOverridesCtrl-specs.js +++ b/public/test/specs/seriesOverridesCtrl-specs.js @@ -6,11 +6,15 @@ define([ describe('SeriesOverridesCtrl', function() { var ctx = new helpers.ControllerTestContext(); + var popoverSrv = {}; beforeEach(module('grafana.services')); beforeEach(module('grafana.panels.graph')); - beforeEach(ctx.providePhase()); + beforeEach(ctx.providePhase({ + popoverSrv: popoverSrv + })); + beforeEach(ctx.createControllerPhase('SeriesOverridesCtrl')); beforeEach(function() { ctx.scope.render = function() {};