diff --git a/public/app/features/logs/components/LogRow.test.tsx b/public/app/features/logs/components/LogRow.test.tsx index fc48b6ef55a..d0a613db42a 100644 --- a/public/app/features/logs/components/LogRow.test.tsx +++ b/public/app/features/logs/components/LogRow.test.tsx @@ -141,4 +141,15 @@ describe('LogRow', () => { expect(screen.getByLabelText('Show context')).toBeInTheDocument(); }); + + it('should highlight the original log row when showing its context', async () => { + const { container } = setup({ showContextToggle: jest.fn().mockReturnValue(true) }); + + await userEvent.hover(screen.getByText('test123')); + await userEvent.click(screen.getByLabelText('Show context')); + await userEvent.unhover(screen.getByText('test123')); + + const row = container.querySelector('tr'); + expect(row).toHaveStyle(`background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()}`); + }); }); diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx index 3a38064dc50..3fd07d18e35 100644 --- a/public/app/features/logs/components/LogRow.tsx +++ b/public/app/features/logs/components/LogRow.tsx @@ -49,7 +49,8 @@ interface Props extends Themeable2 { } interface State { - highlightBackround: boolean; + permalinked: boolean; + showingContext: boolean; showDetails: boolean; mouseIsOver: boolean; } @@ -63,7 +64,8 @@ interface State { */ class UnThemedLogRow extends PureComponent { state: State = { - highlightBackround: false, + permalinked: false, + showingContext: false, showDetails: false, mouseIsOver: false, }; @@ -76,11 +78,11 @@ class UnThemedLogRow extends PureComponent { // we are debouncing the state change by 3 seconds to highlight the logline after the context closed. debouncedContextClose = debounce(() => { - this.setState({ highlightBackround: false }); + this.setState({ showingContext: false }); }, 3000); onOpenContext = (row: LogRowModel) => { - this.setState({ highlightBackround: true }); + this.setState({ showingContext: true }); this.props.onOpenContext(row, this.debouncedContextClose); }; @@ -137,13 +139,13 @@ class UnThemedLogRow extends PureComponent { if (permalinkedRowId !== row.uid) { // only set the new state if the row is not permalinked anymore or if the component was mounted. - if (prevState.highlightBackround || mounted) { - this.setState({ highlightBackround: false }); + if (prevState.permalinked || mounted) { + this.setState({ permalinked: false }); } return; } - if (!this.state.highlightBackround) { + if (!this.state.permalinked) { // at this point this row is the permalinked row, so we need to scroll to it and highlight it if possible. if (this.logLineRef.current && scrollIntoView) { scrollIntoView(this.logLineRef.current); @@ -152,7 +154,7 @@ class UnThemedLogRow extends PureComponent { datasourceType: row.datasourceType ?? 'unknown', logRowUid: row.uid, }); - this.setState({ highlightBackround: true }); + this.setState({ permalinked: true }); } }; @@ -178,16 +180,16 @@ class UnThemedLogRow extends PureComponent { app, styles, } = this.props; - const { showDetails, highlightBackround } = this.state; + const { showDetails, showingContext, permalinked } = this.state; const levelStyles = getLogLevelStyles(theme, row.logLevel); const { errorMessage, hasError } = checkLogsError(row); const logRowBackground = cx(styles.logsRow, { [styles.errorLogRow]: hasError, - [styles.highlightBackground]: highlightBackround, + [styles.highlightBackground]: showingContext || permalinked, }); const logRowDetailsBackground = cx(styles.logsRow, { [styles.errorLogRow]: hasError, - [styles.highlightBackground]: highlightBackround && !this.state.showDetails, + [styles.highlightBackground]: permalinked && !this.state.showDetails, }); const processedRow =