diff --git a/public/app/features/logs/components/LogRows.tsx b/public/app/features/logs/components/LogRows.tsx index cc1b0ccd5c3..7476e73f290 100644 --- a/public/app/features/logs/components/LogRows.tsx +++ b/public/app/features/logs/components/LogRows.tsx @@ -1,3 +1,4 @@ +import { cx } from '@emotion/css'; import memoizeOne from 'memoize-one'; import React, { PureComponent } from 'react'; @@ -53,6 +54,11 @@ export interface Props extends Themeable2 { isFilterLabelActive?: (key: string, value: string, refId?: string) => Promise; pinnedRowId?: string; containerRendered?: boolean; + /** + * If false or undefined, the `contain:strict` css property will be added to the wrapping `` for performance reasons. + * Any overflowing content will be clipped at the table boundary. + */ + overflowingContent?: boolean; } interface State { @@ -128,7 +134,7 @@ class UnThemedLogRows extends PureComponent { const keyMaker = new UniqueKeyMaker(); return ( -
+
{hasData && firstRows.map((row) => ( diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts index ff1d29d4f13..d059f418350 100644 --- a/public/app/features/logs/components/getLogRowStyles.ts +++ b/public/app/features/logs/components/getLogRowStyles.ts @@ -74,6 +74,9 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => { width: 100%; ${!scrollableLogsContainer && `margin-bottom: ${theme.spacing(2.25)};`} `, + logsRowsTableContain: css` + contain: strict; + `, highlightBackground: css` background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()}; `, diff --git a/public/app/features/logs/components/log-context/LogRowContextModal.tsx b/public/app/features/logs/components/log-context/LogRowContextModal.tsx index 2fa8fa50291..144e3e3ae77 100644 --- a/public/app/features/logs/components/log-context/LogRowContextModal.tsx +++ b/public/app/features/logs/components/log-context/LogRowContextModal.tsx @@ -552,6 +552,7 @@ export const LogRowContextModal: React.FunctionComponent setSticky(false)} onPinLine={() => setSticky(true)} pinnedRowId={sticky ? row.uid : undefined} + overflowingContent={true} />