PoC of integrating EuiDataGrid into Discover

elastic · Nov 22, 2019 · 420b50c · 420b50c
1 parent 9747a0f
commit 420b50c
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 55 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/discover/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/_discover.scss
@@ -104,13 +104,6 @@ discover-app {
   }
 }
 
-// SASSTODO: replace the padding value with a variable
-.dscTable__footer {
-  background-color: $euiColorLightShade;
-  padding: 5px 10px;
-  text-align: center;
-}
-
 /**
  * 1. Override sidebar-item-title styles.
  */
@@ -213,7 +206,6 @@ discover-app {
 }
 
 .dscResults {
-
   h3 {
     margin: -20px 0 10px 0;
     text-align: center;

diff --git a/src/legacy/core_plugins/kibana/public/discover/angular/directives/_index.scss b/src/legacy/core_plugins/kibana/public/discover/angular/directives/_index.scss
@@ -1,2 +1,3 @@
 @import 'no_results';
-@import 'histogram';
+@import 'histogram';
+@import 'table';
diff --git a/src/legacy/core_plugins/kibana/public/discover/angular/directives/index.js b/src/legacy/core_plugins/kibana/public/discover/angular/directives/index.js
@@ -17,13 +17,13 @@
  * under the License.
  */
 
-
 import '../../../../../../ui/public/render_complete/directive';
 import { DiscoverNoResults } from './no_results';
 import { DiscoverUninitialized } from './uninitialized';
 import { DiscoverUnsupportedIndexPattern } from './unsupported_index_pattern';
 import { DiscoverHistogram } from './histogram';
 import { getServices } from '../../kibana_services';
+import { DiscoverTable } from './table';
 
 const { wrapInI18nContext, uiModules } = getServices();
 const app = uiModules.get('apps/discover', ['react']);
@@ -41,3 +41,5 @@ app.directive('discoverUnsupportedIndexPattern', reactDirective =>
 );
 
 app.directive('discoverHistogram', reactDirective => reactDirective(DiscoverHistogram));
+
+app.directive('discoverTable', reactDirective => reactDirective(DiscoverTable));
diff --git a/src/legacy/core_plugins/kibana/public/discover/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/angular/discover.html
@@ -161,7 +161,6 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
                     </span>
                   </span>
                 </div>
-
               </header>
 
               <discover-histogram
@@ -174,55 +173,29 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
               ></discover-histogram>
             </section>
 
-            <section
-              class="dscTable"
-              fixed-scroll
-              aria-labelledby="documentsAriaLabel"
-            >
-              <h2 class="euiScreenReaderOnly"
+            <section class="dscTable" fixed-scroll aria-labelledby="documentsAriaLabel">
+              <h2
+                class="euiScreenReaderOnly"
                 id="documentsAriaLabel"
                 i18n-id="kbn.discover.documentsAriaLabel"
                 i18n-default-message="Documents"
               ></h2>
-              <doc-table
-                hits="rows"
-                index-pattern="indexPattern"
-                sorting="state.sort"
-                columns="state.columns"
-                infinite-scroll="true"
+              <discover-table
+                ng-if="rows"
+                aria-labelledby="'documentsAriaLabel'"
+                columns="tableColumns"
                 filter="filterQuery"
-                filters="state.filters"
-                data-shared-item
-                data-title="{{opts.savedSearch.lastSavedTitle}}"
-                data-description="{{opts.savedSearch.description}}"
-                minimum-visible-rows="minimumVisibleRows"
-                render-complete
+                index-pattern="indexPattern"
+                rows="rows"
+                sort="state.sort"
+                sample-size="opts.sampleSize"
+                search-description="opts.savedSearch.description"
+                search-title="opts.savedSearch.lastSavedTitle"
+                get-context-app-href="getContextAppHref"
                 on-add-column="addColumn"
-                on-change-sort-order="setSortOrder"
-                on-move-column="moveColumn"
                 on-remove-column="removeColumn"
-              ></doc-table>
-
-              <a tabindex="0" id="discoverBottomMarker"></a>
-
-              <div
-                ng-if="rows.length == opts.sampleSize"
-                class="dscTable__footer"
-              >
-                <span
-                  i18n-id="kbn.discover.howToSeeOtherMatchingDocumentsDescription"
-                  i18n-default-message="These are the first {sampleSize} documents matching
-                  your search, refine your search to see others. "
-                  i18n-values="{
-                    sampleSize: opts.sampleSize,
-                  }"
-                ></span>
-                <a
-                  kbn-accessible-click
-                  ng-click="scrollToTop()"
-                  i18n-id="kbn.discover.backToTopLinkText"
-                  i18n-default-message="Back to top."
-                ></a>
+                on-sort="setSortOrder"
+              ></discover-table>
               </div>
             </section>
           </div>

diff --git a/src/legacy/core_plugins/kibana/public/discover/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/angular/discover.js
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import rison from 'rison-node';
 import _ from 'lodash';
 import React from 'react';
 import { Subscription } from 'rxjs';
@@ -75,7 +76,7 @@ const {
 
 import { getRootBreadcrumbs, getSavedSearchBreadcrumbs } from '../breadcrumbs';
 import { start as data } from '../../../../data/public/legacy';
-import { generateFilters } from '../../../../../../plugins/data/public';
+import { esFilters, generateFilters } from '../../../../../../plugins/data/public';
 
 const { savedQueryService } = data.search.services;
 
@@ -519,7 +520,15 @@ function discoverController(
     });
   };
 
-  $scope.$watchCollection('state.columns', function () {
+  $scope.$watchCollection('state.columns', function (columns) {
+    const tableColumns = [...columns];
+    const { timeFieldName } = $scope.indexPattern;
+
+    if (!config.get('doc_table:hideTimeColumn') && timeFieldName) {
+      tableColumns.unshift(timeFieldName);
+    }
+
+    $scope.tableColumns = tableColumns;
     $state.save();
   });
 
@@ -1089,6 +1098,23 @@ function discoverController(
     return loadedIndexPattern;
   }
 
+  $scope.getContextAppHref = anchorId => {
+    const path = kbnUrl.eval('#/context/{{ indexPattern }}/{{ anchorId }}', {
+      anchorId,
+      indexPattern: $scope.indexPattern.id,
+    });
+
+    // TODO should be $httpParaSerializer like in table_row.js
+    // const hash = $httpParamSerializer({
+    const hash = JSON.stringify({
+      _a: rison.encode({
+        columns: $state.columns,
+        filters: ($scope.filters || []).map(esFilters.disableFilter),
+      }),
+    });
+    return `${path}?${hash}`;
+  };
+
   // Block the UI from loading if the user has loaded a rollup index pattern but it isn't
   // supported.
   $scope.isUnsupportedIndexPattern = (