initial discover DataGrid proof of concept

src/core/public/chrome/ui/header/_index.scss

@@ -8,6 +8,10 @@
   z-index: 10;
 }
 
+.euiDataGrid__restrictBody .chrHeaderWrapper {
+  z-index: 0;
+}
+
 .chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
   top: $euiHeaderChildSize;
   left: $euiHeaderChildSize;

src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts

@@ -82,6 +82,7 @@ import { createDocViewerDirective } from './np_ready/angular/doc_viewer';
 import { createFieldSearchDirective } from './np_ready/components/field_chooser/discover_field_search_directive';
 import { createIndexPatternSelectDirective } from './np_ready/components/field_chooser/discover_index_pattern_directive';
 import { createStringFieldProgressBarDirective } from './np_ready/components/field_chooser/string_progress_bar';
+import { createDiscoverGridDirective } from './np_ready/components/discover_grid/create_discover_grid_directive';
 // @ts-ignore
 import { createFieldChooserDirective } from './np_ready/components/field_chooser/field_chooser';
 
@@ -329,5 +330,6 @@ function createDocTableModule() {
     .directive('kbnTableRow', createTableRowDirective)
     .directive('toolBarPagerButtons', createToolBarPagerButtonsDirective)
     .directive('kbnInfiniteScroll', createInfiniteScrollDirective)
-    .directive('docViewer', createDocViewerDirective);
+    .directive('docViewer', createDocViewerDirective)
+    .directive('discoverGrid', createDiscoverGridDirective);
 }

src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss

@@ -28,11 +28,9 @@ discover-app {
   padding-right: $euiSizeS;
 }
 
-// SASSTODO: replace the z-index value with a variable
 .dscWrapper {
   padding-right: $euiSizeS;
   padding-left: 21px;
-  z-index: 1;
 }
 
 @include euiPanel('.dscWrapper__content');
@@ -94,19 +92,6 @@ discover-app {
 
 .dscTable {
   overflow: auto;
-
-  // SASSTODO: add a monospace modifier to the doc-table component
-  .kbnDocTable__row {
-    font-family: $euiCodeFontFamily;
-    font-size: $euiFontSizeXS;
-  }
-}
-
-// SASSTODO: replace the padding value with a variable
-.dscTable__footer {
-  background-color: $euiColorLightShade;
-  padding: 5px 10px;
-  text-align: center;
 }
 
 /**

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/_index.scss

@@ -1,2 +1,2 @@
 @import 'no_results';
-@import 'histogram';
+@import 'histogram';

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html

@@ -161,7 +161,6 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
                     </span>
                   </span>
                 </div>
-
               </header>
 
               <discover-histogram
@@ -174,55 +173,30 @@ <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"
+              <discover-grid
+                ng-if="rows"
+                aria-labelled-by="'documentsAriaLabel'"
+                columns="tableColumns"
                 index-pattern="indexPattern"
-                sorting="state.sort"
-                columns="state.columns"
-                infinite-scroll="true"
-                filter="filterQuery"
-                filters="state.filters"
-                data-shared-item
-                data-title="{{opts.savedSearch.lastSavedTitle}}"
-                data-description="{{opts.savedSearch.description}}"
-                minimum-visible-rows="minimumVisibleRows"
-                render-complete
+                rows="rows"
+                sort="state.sort"
+                sample-size="opts.sampleSize"
+                search-description="opts.savedSearch.description"
+                search-title="opts.savedSearch.lastSavedTitle"
+                use-short-dots="useShortDots"
+                get-context-app-href="getContextAppHref"
                 on-add-column="addColumn"
-                on-change-sort-order="setSortOrder"
-                on-move-column="moveColumn"
+                on-filter="filterQuery"
                 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-grid>
               </div>
             </section>
           </div>

src/legacy/core_plugins/kibana/public/discover/np_ready/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';
@@ -73,7 +74,7 @@ const {
 } = getServices();
 
 import { getRootBreadcrumbs, getSavedSearchBreadcrumbs } from '../helpers/breadcrumbs';
-import { generateFilters } from '../../../../../../../plugins/data/public';
+import { esFilters, generateFilters } from '../../../../../../../plugins/data/public';
 import { getIndexPatternId } from '../helpers/get_index_pattern_id';
 import { FilterStateManager } from '../../../../../data/public';
 
@@ -186,8 +187,8 @@ function discoverController(
   $scope,
   $timeout,
   $window,
+  $httpParamSerializer,
   AppState,
-  Private,
   Promise,
   config,
   kbnUrl,
@@ -220,6 +221,7 @@ function discoverController(
   $scope.fetchStatus = fetchStatuses.UNINITIALIZED;
   $scope.refreshInterval = timefilter.getRefreshInterval();
   $scope.showSaveQuery = uiCapabilities.discover.saveQuery;
+  $scope.useShortDots = config.get('shortDots:enable');
 
   $scope.$watch(
     () => uiCapabilities.discover.saveQuery,
@@ -553,10 +555,33 @@ 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();
   });
 
+  $scope.getContextAppHref = anchorId => {
+    const path = kbnUrl.eval('#/context/{{ indexPattern }}/{{ anchorId }}', {
+      anchorId,
+      indexPattern: $scope.indexPattern.id,
+    });
+
+    const hash = $httpParamSerializer({
+      _a: rison.encode({
+        columns: $state.columns,
+        filters: ($scope.filters || []).map(esFilters.disableFilter),
+      }),
+    });
+    return `${path}?${hash}`;
+  };
+
   $scope.opts = {
     // number of records to fetch, then paginate through
     sampleSize: config.get('discover:sampleSize'),

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc.ts

@@ -17,7 +17,6 @@
  * under the License.
  */
 import { getAngularModule, wrapInI18nContext, getServices } from '../../kibana_services';
-// @ts-ignore
 import { getRootBreadcrumbs } from '../helpers/breadcrumbs';
 import html from './doc.html';
 import { Doc } from '../components/doc/doc';

src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss

@@ -1,3 +1,4 @@
 @import 'fetch_error/index';
 @import 'field_chooser/index';
 @import 'doc_viewer/index';
+@import 'data_grid/index';

src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_index.scss

@@ -0,0 +1 @@
+@import 'table';

src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss

@@ -0,0 +1,10 @@
+.dscTable__footer {
+  background-color: $euiColorLightShade;
+  padding: $euiSize / 2 $euiSize;
+  margin-top: $euiSize / 4;
+  text-align: center;
+}
+
+.dscTable__flyoutHeader {
+  white-space: nowrap;
+}

src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/create_discover_grid_directive.tsx

@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { wrapInI18nContext } from '../../../kibana_services';
+import { DiscoverGrid } from './discover_grid';
+
+export function createDiscoverGridDirective(reactDirective: any) {
+  return reactDirective(wrapInI18nContext(DiscoverGrid));
+}