diff --git a/x-pack/plugins/logs_shared/common/dynamic.tsx b/x-pack/plugins/logs_shared/common/dynamic.tsx index a66dbaa10b5aa..85ca9308d838e 100644 --- a/x-pack/plugins/logs_shared/common/dynamic.tsx +++ b/x-pack/plugins/logs_shared/common/dynamic.tsx @@ -7,7 +7,9 @@ import React, { lazy, Suspense } from 'react'; -type LoadableComponent = () => any; +type LoadableComponent = () => Promise<{ + default: React.ComponentType; +}>; interface DynamicOptions { fallback?: React.ReactNode; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/column_headers.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/column_headers.tsx index 9e1d9330f7b87..3fd275ea56dc2 100644 --- a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/column_headers.tsx +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/column_headers.tsx @@ -7,7 +7,6 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { transparentize } from 'polished'; import { euiStyled } from '@kbn/kibana-react-plugin/common'; import { @@ -16,7 +15,6 @@ import { LogEntryColumnWidth, LogEntryColumnWidths, } from './log_entry_column'; -import { ASSUMED_SCROLLBAR_WIDTH } from './vertical_scroll_panel'; import { useLogPositionStateContext } from '../../../containers/logs/log_position'; import { localizedDate } from '../../../../common/formatters/datetime'; import { @@ -25,6 +23,7 @@ import { isMessageColumnRenderConfiguration, isFieldColumnRenderConfiguration, } from '../../../utils/log_column_render_configuration'; +import LogColumnHeadersWrapper from './column_headers_wrapper'; export const LogColumnHeaders: React.FunctionComponent<{ columnConfigurations: LogColumnRenderConfiguration[]; @@ -112,22 +111,6 @@ export const LogColumnHeader: React.FunctionComponent<{ ); -export const LogColumnHeadersWrapper = euiStyled.div.attrs((props) => ({ - role: props.role ?? 'row', -}))` - align-items: stretch; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - overflow: hidden; - padding-right: ${ASSUMED_SCROLLBAR_WIDTH}px; - border-bottom: ${(props) => props.theme.eui.euiBorderThin}; - box-shadow: 0 2px 2px -1px ${(props) => transparentize(0.3, props.theme.eui.euiColorLightShade)}; - position: relative; - z-index: 1; -`; - const LogColumnHeaderWrapper = euiStyled(LogEntryColumn).attrs((props) => ({ role: props.role ?? 'columnheader', }))` @@ -146,3 +129,6 @@ const LogColumnHeaderContent = euiStyled(LogEntryColumnContent)` text-overflow: clip; white-space: pre; `; + +// eslint-disable-next-line import/no-default-export +export default LogColumnHeader; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/column_headers_wrapper.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/column_headers_wrapper.tsx new file mode 100644 index 0000000000000..f3922abff9b5c --- /dev/null +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/column_headers_wrapper.tsx @@ -0,0 +1,30 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import { transparentize } from 'polished'; +import { ASSUMED_SCROLLBAR_WIDTH } from './vertical_scroll_panel'; + +export const LogColumnHeadersWrapper = euiStyled.div.attrs((props) => ({ + role: props.role ?? 'row', +}))` + align-items: stretch; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + overflow: hidden; + padding-right: ${ASSUMED_SCROLLBAR_WIDTH}px; + border-bottom: ${(props) => props.theme.eui.euiBorderThin}; + box-shadow: 0 2px 2px -1px ${(props) => + transparentize(0.3, props.theme.eui.euiColorLightShade)}; + position: relative; + z-index: 1; + `; + +// eslint-disable-next-line import/no-default-export +export default LogColumnHeadersWrapper; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/index.ts b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/index.ts index dfccaae6dd8c9..c4507a2b4ebc5 100644 --- a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/index.ts +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/index.ts @@ -8,11 +8,12 @@ export type { LogEntryStreamItem } from './item'; export type { LogEntryColumnWidths } from './log_entry_column'; -export { LogColumnHeader, LogColumnHeadersWrapper } from './column_headers'; +export { LogColumnHeader } from './column_headers'; +export { LogColumnHeadersWrapper } from './column_headers_wrapper'; export { iconColumnId, LogEntryColumn, useColumnWidths } from './log_entry_column'; export { LogEntryContextMenu } from './log_entry_context_menu'; export { LogEntryFieldColumn } from './log_entry_field_column'; export { LogEntryMessageColumn } from './log_entry_message_column'; -export { LogEntryRowWrapper } from './log_entry_row'; +export { LogEntryRowWrapper } from './log_entry_row_wrapper'; export { LogEntryTimestampColumn } from './log_entry_timestamp_column'; export { ScrollableLogTextStreamView } from './scrollable_log_text_stream_view'; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_column.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_column.tsx index 9f84592d0768a..81d6a43254ecb 100644 --- a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_column.tsx +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_column.tsx @@ -156,3 +156,6 @@ export const useColumnWidths = ({ [columnWidths, CharacterDimensionsProbe] ); }; + +// eslint-disable-next-line import/no-default-export +export default LogEntryColumn; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_context_menu.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_context_menu.tsx index 17c7fb9dd7e9f..6abc90ebf153e 100644 --- a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_context_menu.tsx +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_context_menu.tsx @@ -120,3 +120,6 @@ const AbsoluteWrapper = euiStyled.div` const ButtonWrapper = euiStyled.div` transform: translate(-6px, -6px); `; + +// eslint-disable-next-line import/no-default-export +export default LogEntryContextMenu; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_field_column.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_field_column.tsx index 47b6f1acfe844..863a54471e579 100644 --- a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_field_column.tsx +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_field_column.tsx @@ -64,3 +64,6 @@ const FieldColumnContent = euiStyled(LogEntryColumnContent) { }) .join(' '); }; + +// eslint-disable-next-line import/no-default-export +export default LogEntryMessageColumn; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_row.tsx index 2963a3e1aac14..5b100c4df4beb 100644 --- a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_row.tsx +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_row.tsx @@ -6,7 +6,6 @@ */ import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; import { ObservabilityTriggerId } from '@kbn/observability-shared-plugin/common'; import { useUiTracker, @@ -29,8 +28,8 @@ import { iconColumnId, LogEntryColumn, LogEntryColumnWidths } from './log_entry_ import { LogEntryContextMenu } from './log_entry_context_menu'; import { LogEntryFieldColumn } from './log_entry_field_column'; import { LogEntryMessageColumn } from './log_entry_message_column'; +import { LogEntryRowWrapper } from './log_entry_row_wrapper'; import { LogEntryTimestampColumn } from './log_entry_timestamp_column'; -import { highlightedContentStyle, hoveredContentStyle, monospaceTextStyle } from './text_styles'; const MENU_LABEL = i18n.translate('xpack.logsShared.logEntryItemView.logEntryActionsMenuToolTip', { defaultMessage: 'View actions for line', @@ -85,7 +84,6 @@ export const LogEntryRow = memo( const setItemIsHovered = useCallback(() => setIsHovered(true), []); const setItemIsNotHovered = useCallback(() => setIsHovered(false), []); - const openFlyout = useCallback( () => openFlyoutWithItem?.(logEntry.id), [openFlyoutWithItem, logEntry.id] @@ -263,26 +261,5 @@ export const LogEntryRow = memo( } ); -interface LogEntryRowWrapperProps { - scale: TextScale; - isHighlighted?: boolean; -} - -export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({ - role: 'row', -}))` - align-items: stretch; - color: ${(props) => props.theme.eui.euiTextColor}; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - overflow: hidden; - - ${(props) => monospaceTextStyle(props.scale)}; - ${(props) => (props.isHighlighted ? highlightedContentStyle : '')} - - &:hover { - ${hoveredContentStyle} - } -`; +// eslint-disable-next-line import/no-default-export +export default LogEntryRow; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_row_wrapper.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_row_wrapper.tsx new file mode 100644 index 0000000000000..8b179c6ccbda7 --- /dev/null +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_row_wrapper.tsx @@ -0,0 +1,37 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import { TextScale } from '../../../../common/log_text_scale'; +import { highlightedContentStyle, hoveredContentStyle, monospaceTextStyle } from './text_styles'; + +export const LogEntryRowWrapper = euiStyled.div.attrs(() => ({ + role: 'row', +}))` + align-items: stretch; + color: ${(props) => props.theme.eui.euiTextColor}; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + overflow: hidden; + + ${(props) => monospaceTextStyle(props.scale)}; + ${(props) => (props.isHighlighted ? highlightedContentStyle : '')} + + &:hover { + ${hoveredContentStyle} + } + `; + +interface LogEntryRowWrapperProps { + scale: TextScale; + isHighlighted?: boolean; +} + +// eslint-disable-next-line import/no-default-export +export default LogEntryRowWrapper; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx index d864fa4c35fbf..22a94f05ea265 100644 --- a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx @@ -31,3 +31,6 @@ const TimestampColumnContent = euiStyled(LogEntryColumnContent)` text-overflow: clip; white-space: pre; `; + +// eslint-disable-next-line import/no-default-export +export default LogEntryTimestampColumn; diff --git a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx index 8a0a120a3a7d5..c92347ce8c0bd 100644 --- a/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx +++ b/x-pack/plugins/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx @@ -7,7 +7,7 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import React, { Fragment } from 'react'; +import React, { Fragment, GetDerivedStateFromProps } from 'react'; import moment from 'moment'; import { euiStyled } from '@kbn/kibana-react-plugin/common'; @@ -73,10 +73,10 @@ export class ScrollableLogTextStreamView extends React.PureComponent< ScrollableLogTextStreamViewProps, ScrollableLogTextStreamViewState > { - public static getDerivedStateFromProps( - nextProps: ScrollableLogTextStreamViewProps, - prevState: ScrollableLogTextStreamViewState - ): Partial | null { + public static getDerivedStateFromProps: GetDerivedStateFromProps< + ScrollableLogTextStreamViewProps, + ScrollableLogTextStreamViewState + > = (nextProps, prevState) => { const hasNewTarget = nextProps.target && nextProps.target !== prevState.target; const hasItems = nextProps.items.length > 0; @@ -118,7 +118,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent< return { isScrollLocked: false, }; - } + }; constructor(props: ScrollableLogTextStreamViewProps) { super(props); diff --git a/x-pack/plugins/logs_shared/public/index.ts b/x-pack/plugins/logs_shared/public/index.ts index 63692bbdeae54..708dc52b2c7f0 100644 --- a/x-pack/plugins/logs_shared/public/index.ts +++ b/x-pack/plugins/logs_shared/public/index.ts @@ -53,7 +53,7 @@ export const LogColumnHeader = dynamic( () => import('./components/logging/log_text_stream/column_headers') ); export const LogColumnHeadersWrapper = dynamic( - () => import('./components/logging/log_text_stream/column_headers') + () => import('./components/logging/log_text_stream/column_headers_wrapper') ); export const LogEntryColumn = dynamic( () => import('./components/logging/log_text_stream/log_entry_column') @@ -68,7 +68,7 @@ export const LogEntryMessageColumn = dynamic( () => import('./components/logging/log_text_stream/log_entry_message_column') ); export const LogEntryRowWrapper = dynamic( - () => import('./components/logging/log_text_stream/log_entry_row') + () => import('./components/logging/log_text_stream/log_entry_row_wrapper') ); export const LogEntryTimestampColumn = dynamic( () => import('./components/logging/log_text_stream/log_entry_timestamp_column')