Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrating EuiDataGrid into Discover #51531

Closed
wants to merge 32 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
e6671e5
initial discover DataGrid proof of concept
Jan 14, 2020
cd000cf
fixing scss import
Jan 15, 2020
581fe40
Merge remote-tracking branch 'upstream/master' into discover-data-grid
Jan 29, 2020
c13b349
bringing back old table with advanced setting
Jan 29, 2020
5f19bf2
fixing old tests
Jan 29, 2020
6543d26
removing hide fields action and fixing field add/sub bug
Jan 30, 2020
f4fd8c2
fixing old tests
Jan 31, 2020
472e240
adding tests
Feb 1, 2020
6105c05
added new test
Feb 3, 2020
5721112
Merge remote-tracking branch 'upstream/master' into discover-data-grid
Feb 3, 2020
4d4b63f
json field formatter work
Feb 3, 2020
179ee06
fixing old test
Feb 3, 2020
9cf8c75
futzing with tests
Feb 4, 2020
a81dc9a
i18n fix
Feb 4, 2020
977c637
only show _source when no other columns are shown
Feb 4, 2020
887bf3a
more test fixes
Feb 5, 2020
61422fd
Merge remote-tracking branch 'upstream/master' into discover-data-grid
Feb 5, 2020
d6c156c
Merge remote-tracking branch 'upstream/master' into discover-data-grid
Feb 6, 2020
44c4319
Merge remote-tracking branch 'upstream/master' into discover-data-grid
Feb 6, 2020
70c6a33
add docs for new legacyTable advanced setting
Feb 6, 2020
7ac7f9b
basic layout
snide Feb 5, 2020
b50c90b
design changes to dg
snide Feb 18, 2020
9eb57e6
Merge remote-tracking branch 'upstream/master' into discover-data-grid
Feb 25, 2020
156a558
perf improvements
mbondyra Feb 25, 2020
8761909
Merge branch 'discover-data-grid' of github.com:myasonik/kibana into …
snide Feb 26, 2020
f6b2cee
basic layout and scrolling now works
snide Feb 27, 2020
78a7405
attempting to get tests to pass again
Feb 27, 2020
2bc70e9
fixed infinite scroll of legacy table
Feb 28, 2020
1702235
fixing sorting and schema detection and other bugs
Feb 28, 2020
b3b873d
Merge remote-tracking branch 'upstream/master' into discover-data-grid
Mar 10, 2020
c372a0d
updating to use new state stuff
Mar 11, 2020
464eb22
Merge remote-tracking branch 'upstream/master' into discover-data-grid
snide Mar 12, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/management/advanced-options.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -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.



Expand Down
4 changes: 4 additions & 0 deletions src/core/public/chrome/ui/header/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
z-index: 10;
}

.euiDataGrid__restrictBody .chrHeaderWrapper {
z-index: 0;
}

.chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
top: $euiHeaderChildSize;
left: $euiHeaderChildSize;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

Expand Down Expand Up @@ -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() {
Expand All @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -256,5 +257,6 @@ function createDocTableModule() {
.directive('kbnTableRow', createTableRowDirective)
.directive('toolBarPagerButtons', createToolBarPagerButtonsDirective)
.directive('kbnInfiniteScroll', createInfiniteScrollDirective)
.directive('docViewer', createDocViewerDirective);
.directive('docViewer', createDocViewerDirective)
.directive('discoverGrid', createDiscoverGridDirective);
}
182 changes: 136 additions & 46 deletions src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
}
}
}
Expand All @@ -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;
}
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -23,5 +24,3 @@
}
}
}


Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
@import 'no_results';
@import 'histogram';
@import './collapsible_sidebar/index';
Loading