From f2e35284981131a3ec3ffd1976d4b27edf8b6bee Mon Sep 17 00:00:00 2001 From: jasper Date: Fri, 28 Oct 2016 11:51:42 -0400 Subject: [PATCH] Backport PR #8597 - Add color formatter for string fields --------- **Commit 1:** #6537 add color formatting for string fields * Original sha: ca87c488a0cb15be13cc814d252a28856815b0ec * Authored by Marcel Hallmann on 2016-09-29T12:53:19Z **Commit 2:** #6537 adjust test * Original sha: 23e2ce19aedd426fe03822f88c6d14a178dfb849 * Authored by marcelhallmann on 2016-10-05T08:21:24Z **Commit 3:** Merge remote-tracking branch 'upstream/master' * Original sha: bdf66fbabcf97a23356c0b19df469f0ea21f464a * Authored by Marcel Hallmann on 2016-10-07T11:19:00Z **Commit 4:** #6537 adjust check * Original sha: a4bf798e29b472bc685d3914bd8215f831ab4bd1 * Authored by Marcel Hallmann on 2016-10-08T17:58:51Z **Commit 5:** #6537 add simple check to enable coloring in viz (data table), too * Original sha: e67f6ebf5cb90b88294feed5147b32d2a7091f64 * Authored by Marcel Hallmann on 2016-10-08T18:01:12Z **Commit 6:** #6537 call the field formatter instead of the toString() function * Original sha: 7dc7fd5b57fff0dcef00b8e8bd3a286a517e4482 * Authored by Marcel Hallmann on 2016-10-08T18:47:39Z **Commit 7:** #6537 add some tests for coloring string fields * Original sha: 9733fe566195b1f5fe23ac0747fc47e93647d905 * Authored by Marcel Hallmann on 2016-10-08T18:48:46Z **Commit 8:** #6537 better default value for regex field * Original sha: fed9df29466c24e8213043d3371f05db96c24332 * Authored by Marcel Hallmann on 2016-10-08T19:13:40Z **Commit 9:** Merge branch 'master' of github.com:elastic/kibana into pr/8597 * Original sha: b583db71f813ceafef32ebfe5fb5184f056653f7 * Authored by spalger on 2016-10-27T19:31:25Z **Commit 10:** [stringify] track field type in params * Original sha: c84a61b503e7637fded65aea3d4553cd612aa933 * Authored by spalger on 2016-10-27T21:04:19Z --- src/ui/public/stringify/__tests__/_color.js | 67 +++++++++++++++------ src/ui/public/stringify/editors/color.html | 14 +++-- src/ui/public/stringify/types/color.js | 36 ++++++++--- 3 files changed, 84 insertions(+), 33 deletions(-) diff --git a/src/ui/public/stringify/__tests__/_color.js b/src/ui/public/stringify/__tests__/_color.js index f48823ea3d5e15..98686bacc3148f 100644 --- a/src/ui/public/stringify/__tests__/_color.js +++ b/src/ui/public/stringify/__tests__/_color.js @@ -9,31 +9,58 @@ describe('Color Format', function () { beforeEach(ngMock.inject(function (Private) { fieldFormats = Private(RegistryFieldFormatsProvider); ColorFormat = fieldFormats.getType('color'); - })); - it('should add colors if the value is in range', function () { - let colorer = new ColorFormat({ - colors: [{ - range: '100:150', - text: 'blue', - background: 'yellow' - }] + context('field is a number', () => { + it('should add colors if the value is in range', function () { + let colorer = new ColorFormat({ + fieldType: 'number', + colors: [{ + range: '100:150', + text: 'blue', + background: 'yellow' + }] + }); + expect(colorer.convert(99, 'html')).to.eql('99'); + expect(colorer.convert(100, 'html')).to.eql('100'); + expect(colorer.convert(150, 'html')).to.eql('150'); + expect(colorer.convert(151, 'html')).to.eql('151'); + }); + + it('should not convert invalid ranges', function () { + let colorer = new ColorFormat({ + fieldType: 'number', + colors: [{ + range: '100150', + text: 'blue', + background: 'yellow' + }] + }); + expect(colorer.convert(99, 'html')).to.eql('99'); }); - expect(colorer.convert(99, 'html')).to.eql('99'); - expect(colorer.convert(100, 'html')).to.eql('100'); - expect(colorer.convert(150, 'html')).to.eql('150'); - expect(colorer.convert(151, 'html')).to.eql('151'); }); - it('should not convert invalid ranges', function () { - let colorer = new ColorFormat({ - colors: [{ - range: '100150', - text: 'blue', - background: 'yellow' - }] + context('field is a string', () => { + it('should add colors if the regex matches', function () { + let colorer = new ColorFormat({ + fieldType: 'string', + colors: [{ + regex: 'A.*', + text: 'blue', + background: 'yellow' + }] + }); + + let converter = colorer.getConverterFor('html'); + expect(converter('B', 'html')).to.eql('B'); + expect(converter('AAA', 'html')).to.eql('AAA'); + expect(converter('AB', 'html')).to.eql('AB'); + expect(converter('a', 'html')).to.eql('a'); + + expect(converter('B', 'html')).to.eql('B'); + expect(converter('AAA', 'html')).to.eql('AAA'); + expect(converter('AB', 'html')).to.eql('AB'); + expect(converter('a', 'html')).to.eql('a'); }); - expect(colorer.convert(99, 'html')).to.eql('99'); }); }); diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html index a01a2ea6653396..23ab3bd92fb021 100644 --- a/src/ui/public/stringify/editors/color.html +++ b/src/ui/public/stringify/editors/color.html @@ -4,16 +4,18 @@ -
- +
+
+
+ + +
<%- val %>'); const DEFAULT_COLOR = { range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`, + regex: '', text: '#000000', background: '#ffffff' }; @@ -20,12 +21,17 @@ export default function ColorFormatProvider(Private) { _Color.id = 'color'; _Color.title = 'Color'; _Color.fieldType = [ - 'number' + 'number', + 'string' ]; _Color.editor = { template: colorTemplate, controller($scope) { + $scope.$watch('editor.field.type', type => { + $scope.editor.formatParams.fieldType = type; + }); + $scope.addColor = function () { $scope.editor.formatParams.colors.push(_.cloneDeep(DEFAULT_COLOR)); }; @@ -38,17 +44,32 @@ export default function ColorFormatProvider(Private) { _Color.paramDefaults = { + fieldType: null, // populated by editor, see controller below colors: [_.cloneDeep(DEFAULT_COLOR)] }; + _Color.prototype.findColorRuleForVal = function (val) { + switch (this.param('fieldType')) { + case 'string': + return _.findLast(this.param('colors'), (colorParam) => { + return new RegExp(colorParam.regex).test(val); + }); + + case 'number': + return _.findLast(this.param('colors'), ({ range }) => { + if (!range) return; + const [start, end] = range.split(':'); + return val >= Number(start) && val <= Number(end); + }); + + default: + return null; + } + }; + _Color.prototype._convert = { html(val) { - const color = _.findLast(this.param('colors'), ({ range }) => { - if (!range) return; - const [start, end] = range.split(':'); - return val >= Number(start) && val <= Number(end); - }); - + const color = this.findColorRuleForVal(val); if (!color) return _.asPrettyString(val); let style = ''; @@ -58,5 +79,6 @@ export default function ColorFormatProvider(Private) { } }; + return _Color; };