[discover/tableRow] iterate on the style of the source field a bit

src/kibana/components/config/defaults.js

@@ -47,7 +47,7 @@ define(function (require) {
       description: 'Shorten long fields, for example, instead of foo.bar.baz, show f.b.baz',
     },
     'truncate:maxHeight': {
-      value: 100,
+      value: 115,
       description: 'The maximum height that a cell in a table should occupy. Set to 0 to disable truncation.'
     }
   };

src/kibana/plugins/discover/directives/table_row.js

@@ -1,9 +1,13 @@
 define(function (require) {
   var _ = require('lodash');
   var $ = require('jquery');
-  var htmlEscape = require('utils/html_escape');
+  var addWordBreaks = require('utils/add_word_breaks');
+  var noWhiteSpace = require('utils/no_white_space');
   var module = require('modules').get('app/discover');
 
+  // guestimate at the minimum number of chars wide cells in the table should be
+  var MIN_LINE_LENGTH = 20;
+
   /**
    * kbnTableRow directive
    *
@@ -17,7 +21,7 @@ define(function (require) {
     var detailsHtml = require('text!plugins/discover/partials/table_row/details.html');
     var cellTemplate = _.template(require('text!plugins/discover/partials/table_row/cell.html'));
     var truncateByHeightTemplate = _.template(require('text!partials/truncate_by_height.html'));
-    var sourceTemplate = _.template(require('text!plugins/discover/partials/table_row/_source.html'));
+    var sourceTemplate = _.template(noWhiteSpace(require('text!plugins/discover/partials/table_row/_source.html')));
 
     return {
       restrict: 'A',
@@ -124,7 +128,9 @@ define(function (require) {
             var formatted;
             if (column === '_source') {
               formatted = sourceTemplate({
-                source: row._formatted
+                source: _.mapValues(row._formatted, function (val) {
+                  return addWordBreaks(val, MIN_LINE_LENGTH);
+                })
               });
             } else {
               formatted = _displayField(row, column, true);
@@ -171,46 +177,15 @@ define(function (require) {
          */
         function _displayField(row, field, breakWords) {
           var text = _getValForField(row, field);
-          var minLineLength = 20;
-
 
           if (breakWords) {
-            text = htmlEscape(text);
-            var lineSize = 0;
-            var newText = '';
-            for (var i = 0, len = text.length; i < len; i++) {
-              var chr = text.charAt(i);
-              newText += chr;
-
-              switch (chr) {
-              case ' ':
-              case '&':
-              case ';':
-              case ':':
-              case ',':
-                // natural line break, reset line size
-                lineSize = 0;
-                break;
-              default:
-                lineSize++;
-                break;
-              }
-
-              if (lineSize > minLineLength) {
-                // continuous text is longer then we want,
-                // so break it up with a <wbr>
-                lineSize = 0;
-                newText += '<wbr>';
-              }
-            }
+            text = addWordBreaks(text, MIN_LINE_LENGTH);
 
-            if (text.length > minLineLength) {
+            if (text.length > MIN_LINE_LENGTH) {
               return truncateByHeightTemplate({
-                body: newText
+                body: text
               });
             }
-
-            text = newText;
           }
 
           return text;

src/kibana/plugins/discover/partials/table_row/_source.html

@@ -1,6 +1,7 @@
-<div class="source truncate-by-height">
-    <% _.each(source, function (value, field) { %>
-        <span class="source-field"><%- field %>:</span>
-        <span class="source-value"><%- value %></span>
-    <% }); %>
-</div>
+<dl class="source truncate-by-height">
+  <% _.each(source, function (value, field) { %>
+    <dt><%= field %>:</dt>
+    <dd><%= value %></dd>
+    <%= ' ' %>
+  <% }); %>
+</dl>

src/kibana/styles/_table.less

@@ -21,20 +21,23 @@ kbn-table,tbody[kbn-rows] {
     padding-right: 15px;
   }
 
-  .source {
-    line-height: 1.8em;
+  dl.source {
+    line-height: 2em;
+    margin-bottom: 0;
 
-    .source-field {
-      background: lightgray;
+    dt {
+      display: inline;
+      background: #ECECEC;
       padding: 0.15em 0.2em 0.15em 0.7em;
+      margin-right: 0.3em;
       font-weight: bold;
-      margin: 0 0 0 5px;
-      color: dimgray;
-      font-size: 0.85em;
+      color: #5F5F5F;
+      font-family: monospace;
     }
 
-    .source-value {
-      padding: 0 5px;
+    dd {
+      display: inline;
+      margin-right: 0.75em;
     }
   }
 }

src/kibana/utils/add_word_breaks.js

@@ -0,0 +1,37 @@
+define(function (require) {
+  var _ = require('lodash');
+
+  return function addWordBreaks(text, minLineLength) {
+    text = _.escape(text);
+    var lineSize = 0;
+    var newText = '';
+
+    for (var i = 0, len = text.length; i < len; i++) {
+      var chr = text.charAt(i);
+      newText += chr;
+
+      switch (chr) {
+      case ' ':
+      case '&':
+      case ';':
+      case ':':
+      case ',':
+        // natural line break, reset line size
+        lineSize = 0;
+        break;
+      default:
+        lineSize++;
+        break;
+      }
+
+      if (lineSize > minLineLength) {
+        // continuous text is longer then we want,
+        // so break it up with a <wbr>
+        lineSize = 0;
+        newText += '<wbr>';
+      }
+    }
+
+    return newText;
+  };
+});

src/kibana/utils/no_white_space.js

@@ -0,0 +1,20 @@
+define(function (require) {
+  var TAGS_WITH_WS = />\s+</g;
+
+  /**
+   * Remove all of the whitespace between html tags
+   * so that inline elements don't have extra spaces.
+   *
+   * If you have inline elements (span, a, em, etc.) and any
+   * amount of whitespace around them in your markup, then the
+   * browser will push them appart. This is ugly in certain
+   * senarios and is only fixed by removing the whitespace
+   * from the html in the first place (or ugly css hacks).
+   *
+   * @param  {string} html - the html to modify
+   * @return {string} - modified html
+   */
+  return function noWhiteSpace(html) {
+    return html.replace(TAGS_WITH_WS, '><');
+  };
+});

test/unit/specs/apps/discover/directives/table.js

@@ -439,7 +439,7 @@ define(function (require) {
         expect($before).to.have.length(3);
         expect($before.eq(0).text().trim()).to.be('');
         expect($before.eq(1).text().trim()).to.match(/^timestamp_formatted/);
-        expect($before.eq(2).find('.source-field').length).to.be(4);
+        expect($before.eq(2).find('dl dt').length).to.be(4);
       }));
 
       afterEach(function () {