IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Logs Panel: Performance issue while scrolling within panel in safari (#74694)

Browse Source 
* adding contain:strict to let browsers know the layout of logs panel can be rendered independently

* add new prop to allow LogRow component to contain content
This commit is contained in:
Galen Kistler 2023-09-12 09:57:14 -05:00 committed by GitHub
parent 5c31c7096c
commit 4f5728233c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/features/logs/components/LogRows.tsx
View File

@ -1,3 +1,4 @@
import { cx } from '@emotion/css';
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
@ -53,6 +54,11 @@ export interface Props extends Themeable2 {
isFilterLabelActive?: (key: string, value: string, refId?: string) => Promise<boolean>; isFilterLabelActive?: (key: string, value: string, refId?: string) => Promise<boolean>;
pinnedRowId?: string; pinnedRowId?: string;
containerRendered?: boolean; containerRendered?: boolean;
/**
* If false or undefined, the `contain:strict` css property will be added to the wrapping `<table>` for performance reasons.
* Any overflowing content will be clipped at the table boundary.
*/
overflowingContent?: boolean;
} }
interface State { interface State {
@ -128,7 +134,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
const keyMaker = new UniqueKeyMaker(); const keyMaker = new UniqueKeyMaker();
return ( return (
<table className={styles.logsRowsTable}> <table className={cx(styles.logsRowsTable, this.props.overflowingContent ? '' : styles.logsRowsTableContain)}>
<tbody> <tbody>
{hasData && {hasData &&
firstRows.map((row) => ( firstRows.map((row) => (

3
public/app/features/logs/components/getLogRowStyles.ts
View File

@ -74,6 +74,9 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
width: 100%; width: 100%;
${!scrollableLogsContainer && `margin-bottom: ${theme.spacing(2.25)};`} ${!scrollableLogsContainer && `margin-bottom: ${theme.spacing(2.25)};`}
`, `,
logsRowsTableContain: css`
contain: strict;
`,
highlightBackground: css` highlightBackground: css`
background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()}; background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
`, `,

1
public/app/features/logs/components/log-context/LogRowContextModal.tsx
View File

@ -552,6 +552,7 @@ export const LogRowContextModal: React.FunctionComponent<LogRowContextModalProps
onUnpinLine={() => setSticky(false)} onUnpinLine={() => setSticky(false)}
onPinLine={() => setSticky(true)} onPinLine={() => setSticky(true)}
pinnedRowId={sticky ? row.uid : undefined} pinnedRowId={sticky ? row.uid : undefined}
overflowingContent={true}
/> />
</td> </td>
</tr> </tr>