mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
# Backport This will backport the following commits from `main` to `8.10`: - [[Logs] Amend lazy imports in logs_shared plugin (#164102)](https://github.com/elastic/kibana/pull/164102) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Kerry Gallagher","email":"kerry.gallagher@elastic.co"},"sourceCommit":{"committedDate":"2023-08-17T13:44:57Z","message":"[Logs] Amend lazy imports in logs_shared plugin (#164102)\n\n## Summary\r\n\r\nAs part of https://github.com/elastic/kibana/pull/161151 a [selection of\r\ncomponent imports were made\r\nlazy](https://github.com/elastic/kibana/blob/main/x-pack/plugins/logs_shared/public/index.ts#L52)\r\nand wrapped with a [`dynamic` wrapper\r\ncomponent](https://github.com/elastic/kibana/blob/main/x-pack/plugins/logs_shared/common/dynamic.tsx#L22).\r\nUnfortunately some of these imports did not adhere to the rules of\r\nReact's `lazy` imports (needing a `default` export, no named imports\r\netc), and the `dynamic` wrapper seems to have suppressed error\r\ninformation that would have been available via using `lazy` directly.\r\n\r\nOnly the anomaly and categories log entry examples (in the expanded\r\nrows) were affected by this, as the stream and embeddable import from\r\nlocations that were backed by a `default` export (and those top level\r\ncomponents don't import from that particular index file lower in the\r\nhierarchy). For imports that weren't backed by a `default` I've added\r\nthem, and where necessary moved components to new files if needed (since\r\nit's one `default` per file).\r\n\r\nAlso open to suggestions of ways we can alter the `<dynamic />`\r\ncomponent and maintain the error safety 🤔\r\n\r\n## Examples\r\n\r\nWithout these changes:\r\n\r\n\r\n\r\nWarning using `lazy` directly without the `dynamic` wrapper:\r\n\r\n\r\n\r\n## Testing\r\n\r\n- Check all instances render correctly (stream, embeddable uses, and ML\r\npage log entry examples).","sha":"a96785cd2cf6dc28b6d786423e4604a7aee10c97","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Feature:Logs UI","Team:Infra Monitoring UI","v8.10.0","v8.11.0"],"number":164102,"url":"https://github.com/elastic/kibana/pull/164102","mergeCommit":{"message":"[Logs] Amend lazy imports in logs_shared plugin (#164102)\n\n## Summary\r\n\r\nAs part of https://github.com/elastic/kibana/pull/161151 a [selection of\r\ncomponent imports were made\r\nlazy](https://github.com/elastic/kibana/blob/main/x-pack/plugins/logs_shared/public/index.ts#L52)\r\nand wrapped with a [`dynamic` wrapper\r\ncomponent](https://github.com/elastic/kibana/blob/main/x-pack/plugins/logs_shared/common/dynamic.tsx#L22).\r\nUnfortunately some of these imports did not adhere to the rules of\r\nReact's `lazy` imports (needing a `default` export, no named imports\r\netc), and the `dynamic` wrapper seems to have suppressed error\r\ninformation that would have been available via using `lazy` directly.\r\n\r\nOnly the anomaly and categories log entry examples (in the expanded\r\nrows) were affected by this, as the stream and embeddable import from\r\nlocations that were backed by a `default` export (and those top level\r\ncomponents don't import from that particular index file lower in the\r\nhierarchy). For imports that weren't backed by a `default` I've added\r\nthem, and where necessary moved components to new files if needed (since\r\nit's one `default` per file).\r\n\r\nAlso open to suggestions of ways we can alter the `<dynamic />`\r\ncomponent and maintain the error safety 🤔\r\n\r\n## Examples\r\n\r\nWithout these changes:\r\n\r\n\r\n\r\nWarning using `lazy` directly without the `dynamic` wrapper:\r\n\r\n\r\n\r\n## Testing\r\n\r\n- Check all instances render correctly (stream, embeddable uses, and ML\r\npage log entry examples).","sha":"a96785cd2cf6dc28b6d786423e4604a7aee10c97"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164102","number":164102,"mergeCommit":{"message":"[Logs] Amend lazy imports in logs_shared plugin (#164102)\n\n## Summary\r\n\r\nAs part of https://github.com/elastic/kibana/pull/161151 a [selection of\r\ncomponent imports were made\r\nlazy](https://github.com/elastic/kibana/blob/main/x-pack/plugins/logs_shared/public/index.ts#L52)\r\nand wrapped with a [`dynamic` wrapper\r\ncomponent](https://github.com/elastic/kibana/blob/main/x-pack/plugins/logs_shared/common/dynamic.tsx#L22).\r\nUnfortunately some of these imports did not adhere to the rules of\r\nReact's `lazy` imports (needing a `default` export, no named imports\r\netc), and the `dynamic` wrapper seems to have suppressed error\r\ninformation that would have been available via using `lazy` directly.\r\n\r\nOnly the anomaly and categories log entry examples (in the expanded\r\nrows) were affected by this, as the stream and embeddable import from\r\nlocations that were backed by a `default` export (and those top level\r\ncomponents don't import from that particular index file lower in the\r\nhierarchy). For imports that weren't backed by a `default` I've added\r\nthem, and where necessary moved components to new files if needed (since\r\nit's one `default` per file).\r\n\r\nAlso open to suggestions of ways we can alter the `<dynamic />`\r\ncomponent and maintain the error safety 🤔\r\n\r\n## Examples\r\n\r\nWithout these changes:\r\n\r\n\r\n\r\nWarning using `lazy` directly without the `dynamic` wrapper:\r\n\r\n\r\n\r\n## Testing\r\n\r\n- Check all instances render correctly (stream, embeddable uses, and ML\r\npage log entry examples).","sha":"a96785cd2cf6dc28b6d786423e4604a7aee10c97"}},{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Kerry Gallagher <kerry.gallagher@elastic.co>
This commit is contained in:
Kibana Machine
GitHub
parent
8aa6249550
commit
8b8a028a80
13 changed files with 103 additions and 55 deletions
|
|
@ -7,7 +7,9 @@
|
|||
|
||||
import React, { lazy, Suspense } from 'react';
|
||||
|
||||
type LoadableComponent = () => any;
|
||||
type LoadableComponent = () => Promise<{
|
||||
default: React.ComponentType<any>;
|
||||
}>;
|
||||
|
||||
interface DynamicOptions {
|
||||
fallback?: React.ReactNode;
|
||||
|
|
|
|||
|
|
@ -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<{
|
|||
</LogColumnHeaderWrapper>
|
||||
);
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -156,3 +156,6 @@ export const useColumnWidths = ({
|
|||
[columnWidths, CharacterDimensionsProbe]
|
||||
);
|
||||
};
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default LogEntryColumn;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -64,3 +64,6 @@ const FieldColumnContent = euiStyled(LogEntryColumnContent)<LogEntryColumnConten
|
|||
? preWrappedContentStyle
|
||||
: unwrappedContentStyle};
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default LogEntryFieldColumn;
|
||||
|
|
|
|||
|
|
@ -114,3 +114,6 @@ const renderMessageSegments = (messageSegments: LogMessagePart[]): string => {
|
|||
})
|
||||
.join(' ');
|
||||
};
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default LogEntryMessageColumn;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
}))<LogEntryRowWrapperProps>`
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
}))<LogEntryRowWrapperProps>`
|
||||
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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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<ScrollableLogTextStreamViewState> | 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);
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue