Add coloring for string fields, closes elastic#6537 (elastic#8597)

* elastic#6537 add color formatting for string fields

* elastic#6537 adjust test

* elastic#6537 adjust check

* elastic#6537 add simple check to enable coloring in viz (data table), too

* elastic#6537 call the field formatter instead of the toString() function

* elastic#6537 add some tests for coloring string fields

* elastic#6537 better default value for regex field

* [stringify] track field type in params

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('<span style="color: blue;background-color: yellow;">100</span>');
+      expect(colorer.convert(150, 'html')).to.eql('<span style="color: blue;background-color: yellow;">150</span>');
+      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('<span style="color: blue;background-color: yellow;">100</span>');
-    expect(colorer.convert(150, 'html')).to.eql('<span style="color: blue;background-color: yellow;">150</span>');
-    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('<span style="color: blue;background-color: yellow;">AAA</span>');
+      expect(converter('AB', 'html')).to.eql('<span style="color: blue;background-color: yellow;">AB</span>');
+      expect(converter('a', 'html')).to.eql('a');
+
+      expect(converter('B', 'html')).to.eql('B');
+      expect(converter('AAA', 'html')).to.eql('<span style="color: blue;background-color: yellow;">AAA</span>');
+      expect(converter('AB', 'html')).to.eql('<span style="color: blue;background-color: yellow;">AB</span>');
+      expect(converter('a', 'html')).to.eql('a');
     });
-    expect(colorer.convert(99, 'html')).to.eql('99');
   });
 });

src/ui/public/stringify/editors/color.html

@@ -4,16 +4,18 @@
       <button ng-if="editor.formatParams.colors.length > 1" aria-label="Remove Color" ng-click="removeColor($index)" tooltip="Remove Color" tooltip-append-to-body="true" type="button" class="btn btn-xs btn-danger editor-color-remove">
         <i aria-hidden="true" class="fa fa-times"></i>
       </button>
-      <div class="form-group">
-        <label>Range
-          <small>
-            (min:max)
-          </small>
-      </label>
+      <div class="form-group" ng-if="editor.formatParams.fieldType === 'number'">
+        <label>Range <small>(min:max)</small></label>
         <input
           ng-model="color.range"
           class="form-control">
       </div>
+      <div class="form-group" ng-if="editor.formatParams.fieldType === 'string'">
+        <label>Pattern <small>(regular expression)</small></label>
+        <input
+            ng-model="color.regex"
+            class="form-control">
+      </div>
       <div class="form-group">
         <label>Font Color</label>
         <input

src/ui/public/stringify/types/color.js

@@ -8,6 +8,7 @@ export default function ColorFormatProvider(Private) {
   const convertTemplate = _.template('<span style="<%- style %>"><%- val %></span>');
   const DEFAULT_COLOR = {
     range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`,
+    regex: '<insert 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;
 };