[discover] truncate using height, not character length. fixes #376

src/kibana/apps/discover/controllers/discover.js

@@ -119,8 +119,6 @@ define(function (require) {
     $scope.opts = {
       // number of records to fetch, then paginate through
       sampleSize: config.get('discover:sampleSize'),
-      // max length for summaries in the table
-      maxSummaryLength: 100,
       // Index to match
       index: $state.index,
       savedSearch: savedSearch,

src/kibana/apps/discover/directives/table.js

@@ -86,7 +86,6 @@ define(function (require) {
         sorting: '=',
         filtering: '=',
         refresh: '=',
-        maxLength: '=',
         mapping: '=',
         timefield: '=?'
       },
@@ -120,7 +119,6 @@ define(function (require) {
         columns: '=',
         filtering: '=',
         mapping: '=',
-        maxLength: '=',
         timefield: '=?',
         row: '=kbnTableRow'
       },
@@ -138,11 +136,6 @@ define(function (require) {
         // whenever we compile, we should create a child scope that we can then detroy
         var $child;
 
-        // set the maxLength for summaries
-        if ($scope.maxLength === void 0) {
-          $scope.maxLength = 250;
-        }
-
         // toggle display of the rows details, a full list of the fields from each row
         $scope.toggleRow = function () {
           var row = $scope.row;
@@ -235,10 +228,11 @@ define(function (require) {
         /**
          * Fill an element with the value of a field
          */
-        function _displayField(el, row, field, truncate) {
-          var val = _getValForField(row, field, truncate);
-          el.text(val);
-          return el;
+        function _displayField(el, row, field) {
+          return el.html(
+            $('<div>').addClass('truncate-by-height')
+            .text(_getValForField(row, field))
+          );
         }
 
         /**
@@ -247,10 +241,9 @@ define(function (require) {
          *
          * @param  {object} row - the row to pull the value from
          * @param  {string} field - the name of the field (dot-seperated paths are accepted)
-         * @param  {boolean} untruncate - Should truncated values have a "more" link to expand the text?
          * @return {[type]} a string, which should be inserted as text, or an element
          */
-        function _getValForField(row, field, untruncate) {
+        function _getValForField(row, field) {
           var val;
 
           // discover formats all of the values and puts them in _formatted for display
@@ -259,11 +252,6 @@ define(function (require) {
           // undefined and null should just be an empty string
           val = (val == null) ? '' : val;
 
-          // truncate the column text, not the details
-          if (typeof val === 'string' && val.length > $scope.maxLength) {
-            val = val.substring(0, $scope.maxLength) + '...';
-          }
-
           return val;
         }
 

src/kibana/apps/discover/index.html

@@ -104,7 +104,6 @@
             sorting="state.sort"
             filtering="filterQuery"
             refresh="fetch"
-            max-length="opts.maxSummaryLength"
             timefield="opts.timefield"
             mapping="fieldsByName">
           </kbn-table>

src/kibana/apps/discover/partials/row_details.html

@@ -28,9 +28,7 @@
             tooltip-placement="top"
             tooltip="No cached mapping for this field. Refresh your mapping from the Settings > Indices page"
             class="fa fa-warning text-color-warning ng-scope"></i>
-          <kbn-truncated class="discover-table-details-value"
-            orig="{{row._formatted[field] || row[field]}}"
-            length=100></kbn-truncated>
+          <span class="discover-table-details-value">{{row._formatted[field] || row[field]}}</span>
         </td>
       </tr>
     </tbody>

src/kibana/apps/discover/partials/table.html

@@ -13,7 +13,6 @@
       mapping="mapping"
       sorting="sorting"
       timefield="timefield"
-      max-length="maxLength"
       filtering="filtering"
       class="discover-table-row"></tr>
   </tbody>

src/kibana/components/config/defaults.js

@@ -10,6 +10,8 @@ define(function (require) {
     'discover:sampleSize': 500,
     'fields:popularLimit': 10,
 
+    'truncate:maxHeight': 100,
+
     'histogram:barTarget': 50,
     'histogram:maxBars': 100,
 

src/kibana/components/courier/saved_object/saved_object.js

@@ -168,7 +168,8 @@ define(function (require) {
       };
 
       obj.saveSource = function (source) {
-        return docSource.doIndex(source).then(function (id) {
+        return docSource.doIndex(source)
+        .then(function (id) {
           obj.id = id;
         })
         .then(function () {

src/kibana/controllers/kibana.js

@@ -19,6 +19,7 @@ define(function (require) {
   require('directives/spinner');
   require('directives/paginate');
   require('directives/pretty_duration');
+  require('directives/style_compile');
   require('directives/rows');
 
 

src/kibana/directives/style_compile.js

@@ -0,0 +1,36 @@
+define(function (require) {
+  var _ = require('lodash');
+  var $ = require('jquery');
+
+  require('modules')
+  .get('kibana')
+  .directive('styleCompile', function ($compile, config) {
+    return {
+      restrict: 'E',
+      link: function ($scope, $el) {
+
+        var truncateGradientHeight = 15;
+
+        // watch the value of the truncate:maxHeight config param
+        $scope.$watch(function () {
+          return config.get('truncate:maxHeight');
+        }, function (maxHeight) {
+          if (maxHeight > 0) {
+            $scope.truncateMaxHeight = maxHeight + 'px !important';
+            $scope.truncateGradientTop = maxHeight - truncateGradientHeight + 'px';
+          } else {
+            $scope.truncateMaxHeight = 'none';
+            $scope.truncateGradientTop = '-' + truncateGradientHeight + 'px';
+          }
+        });
+
+        var $style = $('<style>');
+        $el.after($style);
+
+        $scope.$watch(function () { return $el.html(); }, function (stagedCss) {
+          $style.html(stagedCss);
+        });
+      }
+    };
+  });
+});

src/kibana/index.html

@@ -67,5 +67,13 @@
 
       <div class="application" ng-view></div>
     </div>
+    <style-compile>
+      .truncate-by-height {
+        max-height: {{ truncateMaxHeight }};
+      }
+      .truncate-by-height::before {
+        top: {{ truncateGradientTop }};
+      }
+    </style-compile>
   </body>
 </html>

src/kibana/styles/_truncate.less

@@ -0,0 +1,19 @@
+.truncate-by-height {
+  position: relative;
+  overflow: hidden;
+
+  &:before {
+    content: " ";
+    width: 100%;
+    height: 15px; // copied into index.html!
+    position: absolute;
+    left: 0;
+
+    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,1) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.01)), color-stop(99%,rgba(255,255,255,0.99)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* W3C */
+  }
+}

src/kibana/styles/main.less

@@ -30,8 +30,8 @@
 
 // custom navbar style
 @import "./_navbar.less";
-
 @import "./_sidebar.less";
+@import "./_truncate.less";
 
 html,
 body {
@@ -392,5 +392,4 @@ input[type="checkbox"],
   margin-left: 10px !important;
 }
 
-
 @import '../components/filter_bar/filter_bar.less';

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

@@ -270,7 +270,6 @@ define(function (require) {
         'columns="columns" ' +
         'sorting="sorting"' +
         'filtering="filtering"' +
-        'max-length=maxLength ' +
         'mapping="mapping"' +
         'timefield="timefield" ' +
         '></tr>'