IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 09:33:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Log row: split row-highlighting booleans in two (#73330)

Browse Source
This commit is contained in:
Matias Chomicki 2023-08-16 17:51:18 +02:00 committed by GitHub
parent 8e7fa50775
commit 0fe53fbd1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/features/logs/components/LogRow.test.tsx
View File

@ -141,4 +141,15 @@ describe('LogRow', () => {
expect(screen.getByLabelText('Show context')).toBeInTheDocument(); 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()}`);
});
}); });

24
public/app/features/logs/components/LogRow.tsx
View File

@ -49,7 +49,8 @@ interface Props extends Themeable2 {
} }
interface State { interface State {
highlightBackround: boolean; permalinked: boolean;
showingContext: boolean;
showDetails: boolean; showDetails: boolean;
mouseIsOver: boolean; mouseIsOver: boolean;
} }
@ -63,7 +64,8 @@ interface State {
*/ */
class UnThemedLogRow extends PureComponent<Props, State> { class UnThemedLogRow extends PureComponent<Props, State> {
state: State = { state: State = {
highlightBackround: false, permalinked: false,
showingContext: false,
showDetails: false, showDetails: false,
mouseIsOver: false, mouseIsOver: false,
}; };
@ -76,11 +78,11 @@ class UnThemedLogRow extends PureComponent<Props, State> {
// we are debouncing the state change by 3 seconds to highlight the logline after the context closed. // we are debouncing the state change by 3 seconds to highlight the logline after the context closed.
debouncedContextClose = debounce(() => { debouncedContextClose = debounce(() => {
this.setState({ highlightBackround: false }); this.setState({ showingContext: false });
}, 3000); }, 3000);
onOpenContext = (row: LogRowModel) => { onOpenContext = (row: LogRowModel) => {
this.setState({ highlightBackround: true }); this.setState({ showingContext: true });
this.props.onOpenContext(row, this.debouncedContextClose); this.props.onOpenContext(row, this.debouncedContextClose);
}; };
@ -137,13 +139,13 @@ class UnThemedLogRow extends PureComponent<Props, State> {
if (permalinkedRowId !== row.uid) { if (permalinkedRowId !== row.uid) {
// only set the new state if the row is not permalinked anymore or if the component was mounted. // only set the new state if the row is not permalinked anymore or if the component was mounted.
if (prevState.highlightBackround || mounted) { if (prevState.permalinked || mounted) {
this.setState({ highlightBackround: false }); this.setState({ permalinked: false });
} }
return; 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. // 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) { if (this.logLineRef.current && scrollIntoView) {
scrollIntoView(this.logLineRef.current); scrollIntoView(this.logLineRef.current);
@ -152,7 +154,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
datasourceType: row.datasourceType ?? 'unknown', datasourceType: row.datasourceType ?? 'unknown',
logRowUid: row.uid, logRowUid: row.uid,
}); });
this.setState({ highlightBackround: true }); this.setState({ permalinked: true });
} }
}; };
@ -178,16 +180,16 @@ class UnThemedLogRow extends PureComponent<Props, State> {
app, app,
styles, styles,
} = this.props; } = this.props;
const { showDetails, highlightBackround } = this.state; const { showDetails, showingContext, permalinked } = this.state;
const levelStyles = getLogLevelStyles(theme, row.logLevel); const levelStyles = getLogLevelStyles(theme, row.logLevel);
const { errorMessage, hasError } = checkLogsError(row); const { errorMessage, hasError } = checkLogsError(row);
const logRowBackground = cx(styles.logsRow, { const logRowBackground = cx(styles.logsRow, {
[styles.errorLogRow]: hasError, [styles.errorLogRow]: hasError,
[styles.highlightBackground]: highlightBackround, [styles.highlightBackground]: showingContext || permalinked,
}); });
const logRowDetailsBackground = cx(styles.logsRow, { const logRowDetailsBackground = cx(styles.logsRow, {
[styles.errorLogRow]: hasError, [styles.errorLogRow]: hasError,
[styles.highlightBackground]: highlightBackround && !this.state.showDetails, [styles.highlightBackground]: permalinked && !this.state.showDetails,
}); });
const processedRow = const processedRow =