#6537 add color formatting for string fields

src/ui/public/stringify/__tests__/_color.js

@@ -36,4 +36,18 @@ describe('Color Format', function () {
     });
     expect(colorer.convert(99, 'html')).to.eql('99');
   });
+
+  it('should add colors if the regex matches', function () {
+    let colorer = new ColorFormat({
+      colors: [{
+        regex: 'A.*',
+        text: 'blue',
+        background: 'yellow'
+      }]
+    });
+    expect(colorer.convert('B', 'html')).to.eql('B');
+    expect(colorer.convert('AAA', 'html')).to.eql('<span style="color: blue;background-color: yellow;">B</span>');
+    expect(colorer.convert('AB', 'html')).to.eql('<span style="color: blue;background-color: yellow;">AB</span>');
+    expect(colorer.convert('a', 'html')).to.eql('a');
+  });
 });

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

@@ -4,7 +4,7 @@
       <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">
+      <div class="form-group" ng-if="editor.field.type === 'number'">
         <label>Range
           <small>
             (min:max)
@@ -14,6 +14,12 @@
           ng-model="color.range"
           class="form-control">
       </div>
+      <div class="form-group" ng-if="editor.field.type === 'string'">
+        <label>Regex</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

@@ -7,6 +7,7 @@ export default function ColorFormatProvider(Private) {
   const FieldFormat = Private(IndexPatternsFieldFormatProvider);
   const DEFAULT_COLOR = {
     range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`,
+    regex: '#000000',
     text: '#000000',
     background: '#ffffff'
   };
@@ -19,7 +20,7 @@ export default function ColorFormatProvider(Private) {
   _Color.id = 'color';
   _Color.title = 'Color';
   _Color.fieldType = [
-    'number'
+    'number', 'string'
   ];
 
   _Color.editor = {
@@ -41,12 +42,22 @@ export default function ColorFormatProvider(Private) {
   };
 
   _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);
-      });
+    html(val, field) {
+
+      var color;
+      if (field.type === 'string') {
+        color = _.findLast(this.param('colors'), (colorParam) => {
+          return new RegExp(colorParam.regex).test(val);
+        });
+      }
+
+      else {
+        color = _.findLast(this.param('colors'), ({ range }) => {
+          if (!range) return;
+          const [start, end] = range.split(':');
+          return val >= Number(start) && val <= Number(end);
+        });
+      }
 
       if (!color) return _.asPrettyString(val);