From 6943797fbfeca09492b3282c73ff7ea56dab287e Mon Sep 17 00:00:00 2001 From: Carlos Crespo Date: Wed, 22 Feb 2023 15:50:31 +0100 Subject: [PATCH] [Logs UI] Move page template to avoid re-renders (#151311) ## Summary closes [#150624](https://github.com/elastic/kibana/issues/150624) This PR improves how the page template re-renders, preventing it from doing so when context providers in the hierarchy below it change. https://user-images.githubusercontent.com/2767137/219055025-7da3a0ab-446f-4a8e-9a8e-af24a1a254be.mov ### For maintainers At given moments, the Logs UI URL changes, updating the `logPosition` state. This will re-render the template and its children. --- .../public/pages/logs/stream/page_content.tsx | 17 ++++++++++------- .../pages/logs/stream/page_logs_content.tsx | 5 ++--- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx index 6fb2475d3d1e8..b011931adbd85 100644 --- a/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx +++ b/x-pack/plugins/infra/public/pages/logs/stream/page_content.tsx @@ -18,6 +18,7 @@ import { } from '../../../observability_logs/log_stream_page/state'; import { InvalidStateCallout } from '../../../observability_logs/xstate_helpers'; import { ConnectedLogViewErrorPage } from '../shared/page_log_view_error'; +import { LogStreamPageTemplate } from './components/stream_page_template'; import { StreamPageLogsContentForState } from './page_logs_content'; import { StreamPageMissingIndicesContent } from './page_missing_indices_content'; import { LogStreamPageContentProviders } from './page_providers'; @@ -79,15 +80,17 @@ export const StreamPageContentForState: React.FC<{ return ; } else if (logStreamPageState.matches({ hasLogViewIndices: 'initialized' })) { return ( - - + - + > + + + ); } else { return ; diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_logs_content.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_logs_content.tsx index 43f692cf9af8c..4cfd284ec4530 100644 --- a/x-pack/plugins/infra/public/pages/logs/stream/page_logs_content.tsx +++ b/x-pack/plugins/infra/public/pages/logs/stream/page_logs_content.tsx @@ -38,7 +38,6 @@ import { import { type ParsedQuery } from '../../../observability_logs/log_stream_query_state'; import { MatchedStateFromActor } from '../../../observability_logs/xstate_helpers'; import { datemathToEpochMillis, isValidDatemath } from '../../../utils/datemath'; -import { LogStreamPageTemplate } from './components/stream_page_template'; import { LogsToolbar } from './page_toolbar'; import { PageViewLogInContext } from './page_view_log_in_context'; @@ -218,7 +217,7 @@ export const StreamPageLogsContent = React.memo<{ ); return ( - + <> @@ -284,7 +283,7 @@ export const StreamPageLogsContent = React.memo<{ }} - + ); });