From 588f5023a3fee70488b7ac62c0d7beb3c3310063 Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 31 Jan 2024 02:55:52 -0800 Subject: [PATCH 1/8] Vertically align the text in osdQueryBar with other elements on the page Signed-off-by: Miki --- src/plugins/data/public/ui/query_string_input/_query_bar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss index 096c7c0ad8bc..587e878cc7e1 100644 --- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss +++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss @@ -34,8 +34,8 @@ // Unlike most inputs within layout control groups, the text area still needs a border. // These adjusts help it sit above the control groups shadow to line up correctly. padding: $euiSizeS; - padding-top: $euiSizeS + 3px; - transform: translateY(-1px) translateX(-1px); + padding-top: $euiSizeS + 2px; + transform: translateY(-2px) translateX(-1px); &:not(:focus):not(:invalid) { @include euiYScrollWithShadows; From 9cdb5fc6fef16ef3677ea179fd60ba9984770113 Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 31 Jan 2024 02:57:58 -0800 Subject: [PATCH 2/8] Revert the breadcrumb of Discover to be a link rather than a button Signed-off-by: Miki --- .../discover/public/application/helpers/breadcrumbs.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/plugins/discover/public/application/helpers/breadcrumbs.ts b/src/plugins/discover/public/application/helpers/breadcrumbs.ts index 382deec77eee..43adf623adc8 100644 --- a/src/plugins/discover/public/application/helpers/breadcrumbs.ts +++ b/src/plugins/discover/public/application/helpers/breadcrumbs.ts @@ -30,16 +30,14 @@ import { i18n } from '@osd/i18n'; import { EuiBreadcrumb } from '@elastic/eui'; -import { getServices } from '../../opensearch_dashboards_services'; export function getRootBreadcrumbs(): EuiBreadcrumb[] { - const { core } = getServices(); return [ { text: i18n.translate('discover.rootBreadcrumb', { defaultMessage: 'Discover', }), - onClick: () => core.application.navigateToApp('discover'), + href: '#/', }, ]; } From 0ae6b58ef9c63dd4924f7afcdca1e989de6fd86f Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 31 Jan 2024 11:07:09 -0800 Subject: [PATCH 3/8] [Discover] Vertically align source cells with others Signed-off-by: Miki --- .../default_discover_table/_doc_table.scss | 17 ++++++++++++++ .../default_discover_table/_table_cell.scss | 11 +++++---- .../default_discover_table/table_rows.tsx | 23 ++++++++++++++----- 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss b/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss index 86519fb5a46c..95dec9da2036 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss +++ b/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss @@ -69,6 +69,23 @@ doc-table { } } +.osdDiscoverTable { + @include ouiCodeFont; + + & > tbody > tr:not(.osdDiscoverInViewRow):not(.osdDiscoverExpandedRow) { + visibility: hidden; + } + + .osdDiscoverExpandedRow { + background: $euiColorEmptyShade; + border-top: none !important; + + & > td { + padding: 2em; + } + } +} + .osdDocTable__row { td { position: relative; diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss index 65dbcd73fba9..b49064717b75 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss +++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss @@ -1,7 +1,3 @@ -.osdDocTable_expandedRow { - border-top: none !important; -} - .osdDocTableCell__toggleDetails { padding: 4px 0 0 !important; } @@ -32,3 +28,10 @@ opacity: 1; } } + +.osdDocTableCell__source { + .osdDocTable__limitedHeight { + transform: translateY(-3px); + max-height: calc(10em - 3px); + } +} diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx index af6d52d830b0..ffdd16db4666 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx @@ -43,7 +43,7 @@ export const TableRow = ({ const flattened = indexPattern.flattenHit(row); const [isExpanded, setIsExpanded] = useState(false); const tableRow = ( - + @@ -71,8 +72,14 @@ export const TableRow = ({ if (fieldInfo?.type === '_source') { return ( - - {fetchSourceTypeDataCell(indexPattern, row, columnId, false)} + +
+ {fetchSourceTypeDataCell(indexPattern, row, columnId, false)} +
); } @@ -82,6 +89,7 @@ export const TableRow = ({ if (typeof formattedValue === 'undefined') { return ( @@ -95,6 +103,7 @@ export const TableRow = ({ if (!fieldInfo?.filterable) { return ( @@ -106,7 +115,9 @@ export const TableRow = ({ return ( - - + + + From 56639a84952cffdbc604be06862f937d99150de4 Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 31 Jan 2024 06:48:32 -0800 Subject: [PATCH 4/8] Use `ouiCodeFont` in Discover and reduce text size Signed-off-by: Miki --- src/core/server/core_app/assets/legacy_dark_theme.css | 2 +- src/core/server/core_app/assets/legacy_light_theme.css | 2 +- .../components/data_grid/data_grid_table_cell_value.tsx | 2 +- .../components/default_discover_table/_table_cell.scss | 6 ++++++ 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/core/server/core_app/assets/legacy_dark_theme.css b/src/core/server/core_app/assets/legacy_dark_theme.css index 4ef4c726e414..b56eeed717a1 100644 --- a/src/core/server/core_app/assets/legacy_dark_theme.css +++ b/src/core/server/core_app/assets/legacy_dark_theme.css @@ -802,7 +802,7 @@ width: 100%; max-width: 100%; margin-bottom: 20px; - font-size: 14px; + font-size: 12px; } .table thead { font-size: 12px; diff --git a/src/core/server/core_app/assets/legacy_light_theme.css b/src/core/server/core_app/assets/legacy_light_theme.css index 9f9a0dc118d1..d4f6d10e7022 100644 --- a/src/core/server/core_app/assets/legacy_light_theme.css +++ b/src/core/server/core_app/assets/legacy_light_theme.css @@ -802,7 +802,7 @@ width: 100%; max-width: 100%; margin-bottom: 20px; - font-size: 14px; + font-size: 12px; } .table thead { font-size: 12px; diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx index 10911ab96a7e..7c4201f93127 100644 --- a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx +++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx @@ -30,7 +30,7 @@ export function fetchSourceTypeDataCell( const keys = Object.keys(formattedRow); return ( - + {keys.map((key, index) => ( diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss index b49064717b75..9b3016dc66a0 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss +++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss @@ -34,4 +34,10 @@ transform: translateY(-3px); max-height: calc(10em - 3px); } + + dd, + dl, + dt { + font-size: inherit !important; + } } From b008ad23907e073ee877fc4ca8f7427c4dd9d601 Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 31 Jan 2024 07:25:59 -0800 Subject: [PATCH 5/8] [Discover] Prevent wrapping of date fields Signed-off-by: Miki --- .../default_discover_table/table_cell.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx index 16e6a0e13716..19351d0504be 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx @@ -18,6 +18,7 @@ import { DocViewFilterFn } from '../../doc_views/doc_views_types'; export interface TableCellProps { columnId: string; + columnType?: string; onFilter: DocViewFilterFn; filterable?: boolean; fieldMapping?: any; @@ -26,16 +27,18 @@ export interface TableCellProps { export const TableCell = ({ columnId, + columnType, onFilter, fieldMapping, sanitizedCellValue, }: TableCellProps) => { + const tdClassNames = + columnType === 'date' + ? 'osdDocTableCell eui-textNoWrap' + : 'osdDocTableCell eui-textBreakAll eui-textBreakWord'; return ( - // eslint-disable-next-line react/no-danger - + + {/* eslint-disable-next-line react/no-danger */} Date: Wed, 31 Jan 2024 07:26:45 -0800 Subject: [PATCH 6/8] [Discover] Display filter buttons at top right of the cell Signed-off-by: Miki --- .../default_discover_table/_table_cell.scss | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss index 9b3016dc66a0..03062b448711 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss +++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss @@ -2,7 +2,11 @@ padding: 4px 0 0 !important; } -.osdDocTableCell__filter { // TODO: make them appear at top right corner +.osdDocTableCell__filter { + position: absolute; + white-space: nowrap; + right: 0; + background: $ouiPageBackgroundColor; } /** @@ -13,8 +17,10 @@ .osdDocTableCell { white-space: pre-wrap; + position: relative; - &__filterButton { + &__filterButton, + &__filter { opacity: 0; transition: opacity $euiAnimSpeedFast; @@ -24,7 +30,9 @@ } &:hover &__filterButton, - &:focus &__filterButton { + &:focus &__filterButton, + &:hover &__filter, + &:focus &__filter { opacity: 1; } } From 9043f9c8ea604d17b84323ce59232fb4a41f3cbc Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 31 Jan 2024 08:18:35 -0800 Subject: [PATCH 7/8] [Discover] Clamp the amount of data shown in a row Also: * adjust the width of non-wrapped cells Signed-off-by: Miki --- .../default_discover_table/_table_cell.scss | 34 ++++++++++++++----- .../default_discover_table/table_cell.tsx | 21 ++++++++---- 2 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss index 03062b448711..bf96f777ccec 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss +++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss @@ -2,13 +2,6 @@ padding: 4px 0 0 !important; } -.osdDocTableCell__filter { - position: absolute; - white-space: nowrap; - right: 0; - background: $ouiPageBackgroundColor; -} - /** * 1. Align icon with text in cell. * 2. Use opacity to make this element accessible to screen readers and keyboard. @@ -16,9 +9,16 @@ */ .osdDocTableCell { - white-space: pre-wrap; position: relative; + &__filter { + position: absolute; + white-space: nowrap; + right: 0; + top: 0.5em; + background: $ouiPageBackgroundColor; + } + &__filterButton, &__filter { opacity: 0; @@ -35,6 +35,24 @@ &:focus &__filter { opacity: 1; } + + .osdDescriptionListFieldTitle { + margin: 0 4px 0 0 !important; + } + + /* stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors */ + &.eui-textNoWrap { + width: 1%; + } +} + +.osdDocTable__limitedHeight { + /* stylelint-disable-next-line value-no-vendor-prefix */ + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; + max-height: 10em; + overflow: hidden; } .osdDocTableCell__source { diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx index 19351d0504be..4a90f4d1511e 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx @@ -32,12 +32,8 @@ export const TableCell = ({ fieldMapping, sanitizedCellValue, }: TableCellProps) => { - const tdClassNames = - columnType === 'date' - ? 'osdDocTableCell eui-textNoWrap' - : 'osdDocTableCell eui-textBreakAll eui-textBreakWord'; - return ( - + const content = ( + <> {/* eslint-disable-next-line react/no-danger */} @@ -72,6 +68,19 @@ export const TableCell = ({ /> + + ); + + return columnType === 'date' ? ( + + {content} + + ) : ( + +
{content}
); }; From 95bcdd4e27da2115292cfddfaa46c9feb10456a9 Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 31 Jan 2024 10:45:50 -0800 Subject: [PATCH 8/8] [Discover] Vertically align expansion arrows Signed-off-by: Miki --- .../components/default_discover_table/_table_cell.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss index bf96f777ccec..35c2e4907b08 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss +++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss @@ -1,5 +1,5 @@ .osdDocTableCell__toggleDetails { - padding: 4px 0 0 !important; + padding: 3px 0 0 !important; } /**