diff --git a/packages/osd-stylelint-config/config/global_selectors.json b/packages/osd-stylelint-config/config/global_selectors.json index ef2ec5f9252b..285f11f40a2b 100644 --- a/packages/osd-stylelint-config/config/global_selectors.json +++ b/packages/osd-stylelint-config/config/global_selectors.json @@ -24,7 +24,8 @@ "src/plugins/vis_builder/public/application/components/side_nav.scss", "packages/osd-ui-framework/src/components/button/button_group/_button_group.scss", "src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss", - "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss" + "src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss", + "src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss" ] } } \ No newline at end of file diff --git a/src/plugins/data_explorer/public/components/app_container.scss b/src/plugins/data_explorer/public/components/app_container.scss index d5b6df038208..7bd5ed6f69f6 100644 --- a/src/plugins/data_explorer/public/components/app_container.scss +++ b/src/plugins/data_explorer/public/components/app_container.scss @@ -1,8 +1,7 @@ $osdHeaderOffset: $euiHeaderHeightCompensation; .deSidebar { - max-width: 462px; - min-width: 400px; + height: 100%; @include ouiBreakpoint("xs", "s", "m") { max-width: initial; diff --git a/src/plugins/data_explorer/public/components/app_container.tsx b/src/plugins/data_explorer/public/components/app_container.tsx index 8f37e9c1230f..6752845649ee 100644 --- a/src/plugins/data_explorer/public/components/app_container.tsx +++ b/src/plugins/data_explorer/public/components/app_container.tsx @@ -3,8 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; -import { EuiPage, EuiPageBody } from '@elastic/eui'; +import React, { memo } from 'react'; +import { EuiPage, EuiPageBody, EuiResizableContainer, useIsWithinBreakpoints } from '@elastic/eui'; import { Suspense } from 'react'; import { AppMountParameters } from '../../../../core/public'; import { Sidebar } from './sidebar'; @@ -13,6 +13,7 @@ import { View } from '../services/view_service/view'; import './app_container.scss'; export const AppContainer = ({ view, params }: { view?: View; params: AppMountParameters }) => { + const isMobile = useIsWithinBreakpoints(['xs', 's', 'm']); // TODO: Make this more robust. if (!view) { return ; @@ -20,18 +21,38 @@ export const AppContainer = ({ view, params }: { view?: View; params: AppMountPa const { Canvas, Panel, Context } = view; + const MemoizedPanel = memo(Panel); + const MemoizedCanvas = memo(Canvas); + // Render the application DOM. return ( {/* TODO: improve fallback state */} Loading...}> - - - - - - + + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + + + + + + + + + + + + + )} + diff --git a/src/plugins/data_explorer/public/components/no_view.tsx b/src/plugins/data_explorer/public/components/no_view.tsx index a341e9d0564e..20bdf83f1de6 100644 --- a/src/plugins/data_explorer/public/components/no_view.tsx +++ b/src/plugins/data_explorer/public/components/no_view.tsx @@ -11,7 +11,7 @@ export const NoView = () => { return ( { const { indexPattern: indexPatternId } = useTypedSelector((state) => state.metadata); @@ -91,8 +92,18 @@ export const Sidebar: FC = ({ children }) => { return ( - - + + { onGetDataSetError={handleGetDataSetError} /> - + {children} diff --git a/src/plugins/data_explorer/public/index.scss b/src/plugins/data_explorer/public/index.scss deleted file mode 100644 index 8389e31b426a..000000000000 --- a/src/plugins/data_explorer/public/index.scss +++ /dev/null @@ -1,9 +0,0 @@ -$osdHeaderOffset: $euiHeaderHeightCompensation; - -.dePageTemplate { - height: calc(100vh - #{$osdHeaderOffset}); -} - -.headerIsExpanded .dePageTemplate { - height: calc(100vh - #{$osdHeaderOffset * 2}); -} diff --git a/src/plugins/data_explorer/public/index.ts b/src/plugins/data_explorer/public/index.ts index cb33d2b7d90c..f8adda434ced 100644 --- a/src/plugins/data_explorer/public/index.ts +++ b/src/plugins/data_explorer/public/index.ts @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './index.scss'; - import { DataExplorerPlugin } from './plugin'; // This exports static code and TypeScript types, diff --git a/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx b/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx index 51d3f1f1b706..87917c113c2f 100644 --- a/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx +++ b/src/plugins/discover/public/application/components/chart/histogram/histogram.tsx @@ -306,6 +306,14 @@ export class DiscoverHistogram extends Component ( - - {getDataGridTableSetting(storage) ? dataGridTable : legacyDiscoverTable} + + {datagridActive ? dataGridTable : legacyDiscoverTable} - {getDataGridTableSetting(storage) && inspectedHit && ( + {datagridActive && inspectedHit && ( key:
value
* Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted * row in the Context Log. */ - - dl.source { - margin-bottom: 0; - line-height: 2em; - word-break: break-word; - - dt, - dd { - display: inline; - } - - dt { - background-color: transparentize(shade($euiColorPrimary, 20%), 0.9); - color: $euiTextColor; - padding: ($euiSizeXS / 2) $euiSizeXS; - margin-right: $euiSizeXS; - word-break: normal; - border-radius: $euiBorderRadius; - } - } - } - - .osdDocTable__row { - td { - position: relative; - - &:hover { - .osdDocTableRowFilterButton { - opacity: 1; - } - } + + dl.source { + margin-bottom: 0; + line-height: 2em; + word-break: break-word; + + dt, + dd { + display: inline; } - } - - .osdDocTable__row--highlight { - td, - .osdDocTableRowFilterButton { - background-color: tintOrShade($euiColorPrimary, 90%, 70%); + + dt { + background-color: transparentize(shade($euiColorPrimary, 20%), 0.9); + color: $euiTextColor; + padding: calc($euiSizeXS / 2) $euiSizeXS; + margin-right: $euiSizeXS; + word-break: normal; + border-radius: $euiBorderRadius; } } - - .osdDocTable__bar { - margin: $euiSizeXS $euiSizeXS 0; - } - - .osdDocTable__bar--footer { +} + +.osdDocTable__row { + td { position: relative; - margin: -($euiSize * 3) $euiSizeXS 0; - } - - .osdDocTable__padBottom { - padding-bottom: $euiSizeXL; - } - - .osdDocTable__error { - display: flex; - flex-direction: column; - justify-content: center; - flex: 1 0 100%; - text-align: center; + + &:hover { + .osdDocTableRowFilterButton { + opacity: 1; + } + } } - - .truncate-by-height { - overflow: hidden; +} + +.osdDocTable__row--highlight { + td, + .osdDocTableRowFilterButton { + background-color: tintOrShade($euiColorPrimary, 90%, 70%); } - +} + +.osdDocTable__bar { + margin: $euiSizeXS $euiSizeXS 0; +} + +.osdDocTable__bar--footer { + position: relative; + margin: -($euiSize * 3) $euiSizeXS 0; +} + +.osdDocTable__padBottom { + padding-bottom: $euiSizeXL; +} + +.osdDocTable__error { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1 0 100%; + text-align: center; +} + +.truncate-by-height { + overflow: hidden; +} + +.table { + // Nesting .table { - // Nesting - .table { - background-color: $euiColorEmptyShade; - } + background-color: $euiColorEmptyShade; } - - .osd-table { - // sub tables should not have a leading border - .table .table { - margin-bottom: 0; - - tr:first-child > td { - border-top: none; - } - - td.field-name { - font-weight: $euiFontWeightBold; - } +} + +.osd-table { + // sub tables should not have a leading border + .table .table { + margin-bottom: 0; + + tr:first-child > td { + border-top: none; + } + + td.field-name { + font-weight: $euiFontWeightBold; } } - - table { - th { - i.fa-sort { - color: $euiColorLightShade; - } - - button.fa-sort-asc, - button.fa-sort-down, - i.fa-sort-asc, - i.fa-sort-down { - color: $euiColorPrimary; - } - - button.fa-sort-desc, - button.fa-sort-up, - i.fa-sort-desc, - i.fa-sort-up { - color: $euiColorPrimary; - } +} + +table { + th { + i.fa-sort { + color: $euiColorLightShade; + } + + button.fa-sort-asc, + button.fa-sort-down, + i.fa-sort-asc, + i.fa-sort-down { + color: $euiColorPrimary; + } + + button.fa-sort-desc, + button.fa-sort-up, + i.fa-sort-desc, + i.fa-sort-up { + color: $euiColorPrimary; } } - \ No newline at end of file +} 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 a120368fc736..18fc536075db 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,34 +1,30 @@ +.osdDocTableCell__toggleDetails { + padding: 4px 0 0 !important; +} - .osdDocTableCell__toggleDetails { - padding: 4px 0 0 !important; - } - - .osdDocTableCell__filter { //TODO: make them appear at top right corner - - } - - /** +.osdDocTableCell__filter { // TODO: make them appear at top right corner +} + +/** * 1. Align icon with text in cell. * 2. Use opacity to make this element accessible to screen readers and keyboard. * 3. Show on focus to enable keyboard accessibility. */ - - .osdDocTableCell { - white-space: pre-wrap; - &__filterButton { - opacity: 0; - transition: opacity $euiAnimSpeedFast; +.osdDocTableCell { + white-space: pre-wrap; - @include ouiBreakpoint("xs", "s", "m") { - opacity: 1; - } - } + &__filterButton { + opacity: 0; + transition: opacity $euiAnimSpeedFast; - &:hover &__filterButton, - &:focus &__filterButton { - opacity: 1; + @include ouiBreakpoint("xs", "s", "m") { + opacity: 1; } } - \ No newline at end of file + &:hover &__filterButton, + &:focus &__filterButton { + opacity: 1; + } +} diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss index 8ed51b5521bf..cd29c1e54ad0 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss +++ b/src/plugins/discover/public/application/components/default_discover_table/_table_header.scss @@ -1,34 +1,36 @@ .osdDocTableHeader { - white-space: nowrap; - text-align: left; + white-space: nowrap; + text-align: left; } - + .osdDocTableHeader button { - margin-left: $euiSizeXS; + margin-left: $euiSizeXS; } - + .osdDocTableHeader__move, .osdDocTableHeader__sortChange { - opacity: 0; - - &:focus, - th:hover & { - opacity: 1; - } + opacity: 0; + + &:focus, + th:hover & { + opacity: 1; + } } .docTableHeaderField { - &__actionButton { - opacity: 0; - transition: opacity $euiAnimSpeedFast; + &__actionButton { + opacity: 0; + height: 10px; + width: 10px; + transition: opacity $euiAnimSpeedFast; - @include ouiBreakpoint("xs", "s", "m") { - opacity: 1; - } + @include ouiBreakpoint("xs", "s", "m") { + opacity: 1; } + } - &:hover &__actionButton, - &:focus &__actionButton { - opacity: 1; - } -} \ No newline at end of file + &:hover &__actionButton, + &:focus &__actionButton { + opacity: 1; + } +} diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx index a9359807da83..0b24657af03a 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx @@ -210,6 +210,7 @@ export function TableHeaderColumn({ className="docTableHeaderField__actionButton" data-test-subj={button.testSubject} onClick={button.onClick} + iconSize="s" /> ))} diff --git a/src/plugins/discover/public/application/components/doc_views/context_app.tsx b/src/plugins/discover/public/application/components/doc_views/context_app.tsx index d5ee8413d4f0..eea981fe88d7 100644 --- a/src/plugins/discover/public/application/components/doc_views/context_app.tsx +++ b/src/plugins/discover/public/application/components/doc_views/context_app.tsx @@ -16,6 +16,7 @@ import { DataGridTable } from '../data_grid/data_grid_table'; import { DocViewFilterFn } from '../../doc_views/doc_views_types'; import { IndexPattern } from '../../../opensearch_dashboards_services'; import { AppState } from './context/utils/context_state'; +import { SortOrder } from '../../../saved_searches/types'; export interface Props { onAddFilter: DocViewFilterFn; @@ -39,7 +40,7 @@ export function ContextApp({ appState, }: Props) { const { services } = useOpenSearchDashboards(); - const { uiSettings } = services; + const { uiSettings, storage } = services; const defaultStepSize = useMemo(() => parseInt(uiSettings.get(CONTEXT_STEP_SETTING), 10), [ uiSettings, ]); @@ -73,7 +74,7 @@ export function ContextApp({ [setAppState] ); - const sort = useMemo(() => { + const sort: SortOrder[] = useMemo(() => { return [[indexPattern.timeFieldName!, SortDirection.desc]]; }, [indexPattern]); @@ -107,9 +108,9 @@ export function ContextApp({ sort={sort} rows={rows} displayTimeColumn={displayTimeColumn} - services={services} isToolbarVisible={false} isContextView={true} + storage={storage} /> (null); const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter()); const services = useMemo(() => getServices(), []); @@ -120,7 +113,7 @@ export function DiscoverSidebar({ ); const popularLimit = services.uiSettings.get(FIELDS_LIMIT_SETTING); - const useShortDots = services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE); + const shortDotsEnabled = services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE); const { selected: selectedFields, @@ -193,6 +186,7 @@ export function DiscoverSidebar({ )} borderRadius="none" color="transparent" + hasBorder={false} > {fields.length > 0 && ( <> - -

- -

- - - {selectedFields.map((field: IndexPatternField, index) => { - return ( - - - {/* The panel cannot exist in the DiscoverField component if the on focus highlight during keyboard navigation is needed */} - - - - ); + - -

- -

- - + {...props} + /> {popularFields.length > 0 && ( - - - - - - {popularFields.map((field: IndexPatternField, index) => { - return ( - - - {/* The panel cannot exist in the DiscoverField component if the on focus highlight during keyboard navigation is needed */} - - - - ); - })} - - + )} - - {unpopularFields.map((field: IndexPatternField, index) => { - return ( - - - {/* The panel cannot exist in the DiscoverField component if the on focus highlight during keyboard navigation is needed */} - - - - ); + + {...props} + /> )} @@ -354,3 +238,86 @@ export function DiscoverSidebar({ ); } + +interface FieldGroupProps extends DiscoverSidebarProps { + category: 'selected' | 'popular' | 'unpopular'; + title: string; + fields: IndexPatternField[]; + getDetailsByField: (field: IndexPatternField) => FieldDetails; + shortDotsEnabled: boolean; +} + +const FieldList = ({ + category, + title, + fields, + columns, + selectedIndexPattern, + onAddField, + onRemoveField, + onAddFilter, + getDetailsByField, + shortDotsEnabled, +}: FieldGroupProps) => { + const [expanded, setExpanded] = useState(true); + + if (!selectedIndexPattern) return null; + + return ( + <> + setExpanded(!expanded)} + size="xs" + className="dscSideBar_fieldGroup" + > + {title} + + {expanded && ( + + {fields.map((field: IndexPatternField, index) => { + return ( + + + {/* The panel cannot exist in the DiscoverField component if the on focus highlight during keyboard navigation is needed */} + + + + ); + })} + + )} + + ); +}; diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx index d5c54158e997..f367735b8667 100644 --- a/src/plugins/discover/public/application/view_components/canvas/index.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/index.tsx @@ -113,10 +113,8 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro {fetchState.status === ResultStatus.LOADING && } {fetchState.status === ResultStatus.READY && ( <> - - - - + + diff --git a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx b/src/plugins/discover/public/embeddable/search_embeddable_component.tsx index 8fb13b3d215c..70da99e667fd 100644 --- a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx +++ b/src/plugins/discover/public/embeddable/search_embeddable_component.tsx @@ -54,6 +54,7 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps direction="column" responsive={false} data-test-subj="embeddedSavedSearchDocTable" + className="eui-xScrollWithShadows eui-yScrollWithShadows" > {discoverEmbeddableProps.totalHitCount !== 0 ? (