Add large field collapse for doc viewer table rows in Discover (elast…

…ic#21379) * Add large field collapse for doc viewer table rows in Discover * Add tests * Remove unused translations
simianhacker · Aug 19, 2019 · 83e3db0 · 83e3db0
1 parent 795bd5f
commit 83e3db0
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 14 deletions.
diff --git a/src/legacy/core_plugins/kbn_doc_views/public/__tests__/doc_views.js b/src/legacy/core_plugins/kbn_doc_views/public/__tests__/doc_views.js
@@ -32,11 +32,72 @@ const hit = {
   '_id': '61',
   '_score': 1,
   '_source': {
+    '@message': 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. \
+      Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus \
+      et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, \
+      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. \
+      Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, \
+      rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. \
+      Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. \
+      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, \
+      dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. \
+      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. \
+      Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, \
+      sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, \
+      lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. \
+      Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. \
+      Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. \
+      Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. \
+      Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis \
+      in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. \
+      Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. \
+      Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. \
+      Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut',
     'extension': 'html',
     'bytes': 100,
     'area': [{ lat: 7, lon: 7 }],
     'noMapping': 'hasNoMapping',
     'objectArray': [{ foo: true }, { bar: false }],
+    'relatedContent': `{
+      "url": "http://www.laweekly.com/news/jonathan-gold-meets-nwa-2385365",
+      "og:type": "article",
+      "og:title": "Jonathan Gold meets N.W.A.",
+      "og:description": "On May 5, 1989 the L.A. Weekly printed a cover story, \
+      written by Jonathan Gold, about N.W.A., the most notorious band in the U.S., let alone in Los Ange...",
+      "og:url": "http://www.laweekly.com/news/jonathan-gold-meets-nwa-2385365",
+      "article:published_time": "2007-12-05T07:59:41-08:00",
+      "article:modified_time": "2015-01-31T14:57:41-08:00",
+      "article:section": "News",
+      "og:image": "http://IMAGES1.laweekly.com/imager/jonathan-gold-meets-nwa/u/original/2415015/03covergold_1.jpg",
+      "og:image:height": "637",
+      "og:image:width": "480",
+      "og:site_name": "LA Weekly",
+      "twitter:title": "Jonathan Gold meets N.W.A.",
+      "twitter:description": "On May 5, 1989 the L.A. Weekly printed a cover story, \
+      written by Jonathan Gold, about N.W.A., the most notorious band in the U.S., let alone in Los Ange...",
+      "twitter:card": "summary",
+      "twitter:image": "http://IMAGES1.laweekly.com/imager/jonathan-gold-meets-nwa/u/original/2415015/03covergold_1.jpg",
+      "twitter:site": "@laweekly"
+    },
+    {
+      "url": "http://www.laweekly.com/news/once-more-in-the-river-2368108",
+      "og:type": "article",
+      "og:title": "Once more in the River",
+      "og:description": "All photos by Mark Mauer. More after the jump...",
+      "og:url": "http://www.laweekly.com/news/once-more-in-the-river-2368108",
+      "article:published_time": "2007-10-15T10:46:29-07:00",
+      "article:modified_time": "2014-10-28T15:00:05-07:00",
+      "article:section": "News",
+      "og:image": "http://IMAGES1.laweekly.com/imager/once-more-in-the-river/u/original/2430775/img_2536.jpg",
+      "og:image:height": "640",
+      "og:image:width": "480",
+      "og:site_name": "LA Weekly",
+      "twitter:title": "Once more in the River",
+      "twitter:description": "All photos by Mark Mauer. More after the jump...",
+      "twitter:card": "summary",
+      "twitter:image": "http://IMAGES1.laweekly.com/imager/once-more-in-the-river/u/original/2430775/img_2536.jpg",
+      "twitter:site": "@laweekly"
+    }`,
     '_underscore': 1
   }
 };
@@ -141,6 +202,56 @@ describe('docViews', function () {
       });
     });
 
+    describe('collapse row', function () {
+      it('should not collapse or expand other fields', function () {
+        const collapseBtns = $elem.find('.discover-table-open-button');
+        const first = collapseBtns.first()[0];
+        const last = collapseBtns.last()[0];
+
+        first.click();
+        expect(first.parentElement.lastElementChild.classList.contains('truncate-by-height'))
+          .to.equal(false);
+        expect(last.parentElement.lastElementChild.classList.contains('truncate-by-height'))
+          .to.equal(true);
+
+        first.click();
+        expect(first.parentElement.lastElementChild.classList.contains('truncate-by-height'))
+          .to.equal(true);
+        expect(last.parentElement.lastElementChild.classList.contains('truncate-by-height'))
+          .to.equal(true);
+      });
+
+      it('should collapse an overflowed field details by default', function () {
+        const collapseBtn = $elem.find('.discover-table-open-button').first()[0];
+        expect(collapseBtn.parentElement.lastElementChild
+          .classList.contains('truncate-by-height')).to.equal(true);
+      });
+
+      it('should expand and collapse an overflowed field details', function () {
+        const collapseBtn = $elem.find('.discover-table-open-button').first()[0];
+        const spy = sinon.spy($scope, 'toggleViewer');
+
+        collapseBtn.click();
+        expect(spy.calledOnce).to.equal(true);
+        collapseBtn.click();
+        expect(spy.calledTwice).to.equal(true);
+        spy.restore();
+
+        collapseBtn.click();
+        expect(collapseBtn.parentElement.lastElementChild.classList.contains('truncate-by-height'))
+          .to.equal(false);
+        collapseBtn.click();
+        expect(collapseBtn.parentElement.lastElementChild.classList.contains('truncate-by-height'))
+          .to.equal(true);
+      });
+
+      it('should have collapse button available in View single document mode', function () {
+        $scope.filter = null;
+        const collapseBtn = $elem.find('.discover-table-open-button').first()[0];
+        expect(collapseBtn).not.to.equal(null);
+      });
+    });
+
     describe('warnings', function () {
       it('displays a warning about field name starting with underscore', function () {
         const row = $elem.find('[data-test-subj="tableDocViewRow-_underscore"]');
@@ -156,12 +267,6 @@ describe('docViews', function () {
         expect(row.find('.kbnDocViewer__objectArray').length).to.be(0);
       });
 
-      it('displays a warning about objects in arrays', function () {
-        const row = $elem.find('[data-test-subj="tableDocViewRow-objectArray"]');
-        expect(row.find('.kbnDocViewer__underscore').length).to.be(0);
-        expect(row.find('.kbnDocViewer__noMapping').length).to.be(0);
-        expect(row.find('.kbnDocViewer__objectArray').length).to.be(1);
-      });
     });
   });
 });
diff --git a/src/legacy/core_plugins/kbn_doc_views/public/views/table.html b/src/legacy/core_plugins/kbn_doc_views/public/views/table.html
@@ -81,6 +81,9 @@
           class="kbnDocViewer__field">
       </td>
       <td>
+        <button ng-if="enableDocValueCollapse(field)" aria-expanded="{{!!fieldRowOpen[field]}}" class="discover-table-open-button" ng-click="toggleViewer(field)" aria-label="Toggle field details" tooltip="Toggle field details">
+            <span class="kuiIcon" ng-class="{ 'fa-caret-down': fieldRowOpen[field], 'fa-caret-right': !fieldRowOpen[field] }"></span>
+        </button>
         <i ng-if="!mapping[field] && field[0] === '_'"
           tooltip-placement="top"
           tooltip="{{ ::'kbnDocViews.table.fieldNamesBeginningWithUnderscoreUnsupportedTooltip' | i18n: {
@@ -91,12 +94,8 @@
         <i ng-if="!mapping[field] && field[0] !== '_' && !showArrayInObjectsWarning(doc, field)"
           tooltip-placement="top"
           tooltip="{{ ::'kbnDocViews.table.noCachedMappingForThisFieldTooltip' | i18n: { defaultMessage: 'No cached mapping for this field. Refresh field list from the Management > Index Patterns page' } }}"
-          class="fa fa-warning text-color-warning kbnDocViewer__noMapping"></i>
-        <i ng-if="showArrayInObjectsWarning(doc, field)"
-          tooltip-placement="top"
-          tooltip="{{ ::'kbnDocViews.table.objectsInArraysAreNotWellSupportedTooltip' | i18n: { defaultMessage: 'Objects in arrays are not well supported.' } }}"
-          class="fa fa-warning text-color-warning kbnDocViewer__objectArray"></i>
-        <div class="kbnDocViewer__value" ng-bind-html="typeof(formatted[field]) === 'undefined' ? hit[field] : formatted[field] | trustAsHtml"></div>
+          class="fa fa-warning text-color-warning kbnDocViewer__noMapping"></i>         
+        <div class="kbnDocViewer__value" style="vertical-align: top" ng-class="{ 'truncate-by-height': enableDocValueCollapse(field) && !fieldRowOpen[field] }" ng-bind-html="typeof(formatted[field]) === 'undefined' ? hit[field] : formatted[field] | trustAsHtml"></div>
       </td>
     </tr>
   </tbody>

diff --git a/src/legacy/core_plugins/kbn_doc_views/public/views/table.js b/src/legacy/core_plugins/kbn_doc_views/public/views/table.js
@@ -25,6 +25,8 @@ import tableHtml from './table.html';
 import { i18n } from '@kbn/i18n';
 
 DocViewsRegistryProvider.register(function () {
+  const MIN_LINE_LENGTH = 350;
+
   return {
     title: i18n.translate('kbnDocViews.table.tableTitle', {
       defaultMessage: 'Table'
@@ -45,6 +47,8 @@ DocViewsRegistryProvider.register(function () {
         $scope.flattened = $scope.indexPattern.flattenHit($scope.hit);
         $scope.formatted = $scope.indexPattern.formatHit($scope.hit);
         $scope.fields = _.keys($scope.flattened).sort();
+        $scope.fieldRowOpen = {};
+        $scope.fields.forEach(field => $scope.fieldRowOpen[field] = false);
 
         $scope.canToggleColumns = function canToggleColumn() {
           return (
@@ -69,6 +73,16 @@ DocViewsRegistryProvider.register(function () {
           const value = $scope.flattened[field];
           return Array.isArray(value) && typeof value[0] === 'object';
         };
+
+        $scope.enableDocValueCollapse = function (docValueField) {
+          const html = (typeof $scope.formatted[docValueField] === 'undefined') ?
+            $scope.hit[docValueField] : $scope.formatted[docValueField];
+          return html.length > MIN_LINE_LENGTH;
+        };
+
+        $scope.toggleViewer = function (field) {
+          $scope.fieldRowOpen[field] = !$scope.fieldRowOpen[field];
+        };
       }
     }
   };

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -2442,7 +2442,6 @@
     "kbnDocViews.table.filterOutValueButtonAriaLabel": "値を除外",
     "kbnDocViews.table.filterOutValueButtonTooltip": "値を除外します",
     "kbnDocViews.table.noCachedMappingForThisFieldTooltip": "このフィールドのキャッシュされたマッピングがありません。管理 > インデックスパターンページからフィールドリストを更新してください",
-    "kbnDocViews.table.objectsInArraysAreNotWellSupportedTooltip": "配列のオブジェクトが正常にサポートされていません。",
     "kbnDocViews.table.tableTitle": "表",
     "kbnDocViews.table.toggleColumnInTableButtonAriaLabel": "表の列を切り替える",
     "kbnDocViews.table.toggleColumnInTableButtonTooltip": "表の列を切り替える",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -2442,7 +2442,6 @@
     "kbnDocViews.table.filterOutValueButtonAriaLabel": "筛除值",
     "kbnDocViews.table.filterOutValueButtonTooltip": "筛除值",
     "kbnDocViews.table.noCachedMappingForThisFieldTooltip": "此字段没有任何已缓存映射。从“管理”>“索引模式”页面刷新字段列表",
-    "kbnDocViews.table.objectsInArraysAreNotWellSupportedTooltip": "对数组中的对象的支持不是很好。",
     "kbnDocViews.table.tableTitle": "表",
     "kbnDocViews.table.toggleColumnInTableButtonAriaLabel": "在表中切换列",
     "kbnDocViews.table.toggleColumnInTableButtonTooltip": "在表中切换列",