Integrating EuiDataGrid into Discover

docs/management/advanced-options.asciidoc

@@ -141,6 +141,7 @@ This setting does not have an effect when loading a saved search.
 `doc_table:highlight`:: Highlights results in Discover and saved searches on dashboards.
 Highlighting slows requests when
 working on big documents.
+`doc_table:legacyTable`:: Control the way the Discover's table looks and works. Set this property to `true` to revert to the legacy implementation.
 
 
 

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/__tests__/directives/field_chooser.js

@@ -138,7 +138,7 @@ describe('discover field chooser directives', function() {
 
   describe('Field listing', function() {
     it('should have Selected Fields, Fields and Popular Fields sections', function() {
-      const headers = $elem.find('.sidebar-list-header');
+      const headers = $elem.find('[data-test-subj="discover-sidebar-list-header"]');
       expect(headers.length).to.be(3);
     });
 
@@ -168,7 +168,9 @@ describe('discover field chooser directives', function() {
     it('should show the popular fields header if there are popular fields', function() {
       const section = getSections($elem);
       expect(section.popular.hasClass('ng-hide')).to.be(false);
-      expect(section.popular.find('li:not(.sidebar-list-header)').length).to.be.above(0);
+      expect(
+        section.popular.find('li:not([data-test-subj="discover-sidebar-list-header"])').length
+      ).to.be.above(0);
     });
 
     it('should not show the popular fields if there are not any', function() {
@@ -190,7 +192,9 @@ describe('discover field chooser directives', function() {
 
       $scope.$digest();
       expect(section.popular.hasClass('ng-hide')).to.be(true);
-      expect(section.popular.find('li:not(.sidebar-list-header)').length).to.be(0);
+      expect(
+        section.popular.find('li:not([data-test-subj="discover-sidebar-list-header"])').length
+      ).to.be(0);
     });
 
     it('should move the field into selected when it is added to the columns array', function() {

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

@@ -44,6 +44,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 { FieldNameDirectiveProvider } from './np_ready/angular/directives/field_name';
 // @ts-ignore
@@ -256,5 +257,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

@@ -1,15 +1,50 @@
-discover-app {
+.dscApp {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.dscApp__header {
+  border-bottom: $euiBorderThin;
+  margin-bottom: $euiSize;
+}
+
+.dscApp__frame {
+  position: relative;
   flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+}
 
-  .sidebar-container {
-    background-color: transparent;
-  }
+.dscApp__sidebar {
+  flex-grow: 0;
+  flex-basis: auto;
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+}
+
+.dscApp__content {
+  flex-grow: 1;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
 }
 
+.dscDiscoverGrid {
+  width: 100%;
+  max-width: 100%;
+}
 .dscHistogram {
   display: flex;
-  height: 200px;
-  padding: $euiSizeS;
+  height: $euiSize * 8;
+  padding: $euiSizeS $euiSizeS 0 $euiSizeS;
 }
 
 // SASSTODO: replace the margin-top value with a variable
@@ -21,34 +56,26 @@ discover-app {
   padding-top: $euiSizeS;
 }
 
-.dscFieldList--selected,
-.dscFieldList--unpopular,
-.dscFieldList--popular {
-  padding-left: $euiSizeS;
-  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');
 
 .dscWrapper__content {
   padding-top: $euiSizeXS;
   background-color: $euiColorEmptyShade;
-
-  .kbn-table {
-    margin-bottom: 0;
-  }
+  flex-grow: 1;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
 }
 
 .dscTimechart {
   display: block;
   position: relative;
+  flex-grow: 0;
 
   // SASSTODO: the visualizing component should have an option or a modifier
   .series > rect {
@@ -58,24 +85,26 @@ discover-app {
 }
 
 .dscResultCount {
-  text-align: center;
-  padding-top: $euiSizeXS;
-  padding-left: $euiSizeM;
-
-  .dscResultHits {
-    padding-left: $euiSizeXS;
-  }
+  display: flex;
+  justify-content: space-between;
+  padding: 0 $euiSizeS;
+  flex-grow: 0;
+}
 
-  > .kuiLink {
-    padding-left: $euiSizeM;
-  }
+.dscResultCount__title {
+  flex-grow: 0;
+  flex-basis: auto;
 }
 
-.dscTimechart__header {
+.dscResultCount__actions {
+  flex-grow: 0;
+  flex-basis: auto;
   display: flex;
-  justify-content: center;
-  min-height: $euiSizeXXL;
-  padding: $euiSizeXS 0;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: $euiSizeS;
+  }
 }
 
 .dscOverlay {
@@ -94,37 +123,45 @@ discover-app {
 
 .dscTable {
   overflow: auto;
+  flex-grow: 1;
+  display: flex;
 
-  // SASSTODO: add a monospace modifier to the doc-table component
+  // TODO: Delete when old Discover table is removed
   .kbnDocTable__row {
     font-family: $euiCodeFontFamily;
     font-size: $euiFontSizeXS;
   }
 }
 
-// SASSTODO: replace the padding value with a variable
+// TODO: Delete when old Discover table is removed
 .dscTable__footer {
   background-color: $euiColorLightShade;
   padding: 5px 10px;
   text-align: center;
 }
 
-/**
- * 1. Override sidebar-item-title styles.
- */
+.dscTable__buttonToggle {
+  padding: 0 !important;
+}
+
 .dscSidebarItem {
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding-top: 0 !important; /* 1 */
-  padding-bottom: 0 !important; /* 1 */
-  height: $euiSizeXL;
+
+  &:hover {
+    .dscSidebarItem__label {
+      text-decoration: underline;
+    }
+  }
 
   &:hover,
   &:focus {
+    background: $euiColorEmptyShade;
+    @include euiBottomShadowSmall;
+
     .dscSidebarItem__action {
-      opacity: 1;
+      visibility: visible;
     }
   }
 }
@@ -141,17 +178,48 @@ discover-app {
 .dscSidebarItem__label {
   overflow: hidden; /* 1 */
   text-overflow: ellipsis; /* 1 */
+  font-size: $euiFontSizeS;
+  color: $euiColorDarkShade;
+  flex-grow: 1;
+  padding: 0 $euiSizeXS;
 }
 
 /**
  * 1. Only visually hide the action, so that it's still accessible to screen readers.
  * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
  */
 .dscSidebarItem__action {
-  opacity: 0; /* 1 */
+  font-size: $euiFontSizeXS;
+  height: $euiSizeXL;
+  padding: 0 $euiSizeXS;
+  visibility: hidden;
+  border-radius: 0 $euiBorderRadius / 2 $euiBorderRadius / 2 0;
+
+  &--add {
+    color: $euiColorPrimary;
+    background: tint($euiColorPrimary, 90%);
+
+    &:focus,
+    &:hover {
+      background: $euiColorPrimary;
+      color: $euiColorGhost;
+    }
+  }
 
-  &:focus {
-    opacity: 1; /* 2 */
+  &--remove {
+    background: tint($euiColorDanger, 90%);
+    color: $euiColorDanger;
+
+    &:focus,
+    &:hover {
+      background: $euiColorDanger;
+      color: $euiColorGhost;
+    }
+  }
+
+  &:focus,
+  &:hover {
+    text-decoration: underline;
   }
 }
 
@@ -211,6 +279,11 @@ discover-app {
 }
 
 .dscResults {
+  flex-grow: 1;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+
   h3 {
     margin: -20px 0 10px 0;
     text-align: center;
@@ -237,3 +310,20 @@ discover-app {
     height: auto;
   }
 }
+
+.dscFormatSource {
+  word-break: break-word;
+}
+
+.dscFormatSource__title {
+  background-color: transparentize(shade($euiColorPrimary, 20%), 0.9);
+  border-radius: $euiBorderRadius / 2;
+  color: $euiTextColor;
+  padding: ($euiSizeXS / 2) $euiSizeXS;
+  margin-right: $euiSizeXS;
+  word-break: normal;
+  display: inline;
+}
+.dscFormatSource__description {
+  display: inline;
+}

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

@@ -6,15 +6,16 @@
 @mixin dscDocSourceStyle {
   dl.source {
     margin-bottom: 0;
-    line-height:2em;
+    line-height: 2em;
     word-break: break-word;
 
-    dt, dd {
+    dt,
+    dd {
       display: inline;
     }
 
     dt {
-      background-color: transparentize(shade($euiColorPrimary, 20%), .9);
+      background-color: transparentize(shade($euiColorPrimary, 20%), 0.9);
       color: $euiTextColor;
       padding: ($euiSizeXS / 2) $euiSizeXS;
       margin-right: $euiSizeXS;
@@ -23,5 +24,3 @@
     }
   }
 }
-
-

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

@@ -1,3 +1,2 @@
 @import 'no_results';
 @import 'histogram';
-@import './collapsible_sidebar/index';