root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 194 Packages Projects Releases Wiki Activity

New Log Panel: Extend clickable area (#110156) 

* LogLine: make the entire line clickable

* New Logs Panel: Extend log line clickable area
This commit is contained in:
Matias Chomicki 2025-08-27 15:37:28 +02:00 committed by GitHub
parent 5cde7a3a16
commit a25116dbd5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -216,6 +216,17 @@ describe.each(fontSizes)('LogLine', (fontSize: LogListFontSize) => {
await userEvent.click(screen.getByLabelText('Log menu'));
expect(screen.getByText('Copy log line')).toBeInTheDocument();
});
test('The menu can be clicked', async () => {
render(
<LogListContextProvider {...contextProps}>
<LogLine {...defaultProps} />
</LogListContextProvider>
);
expect(screen.queryByText('Copy log line')).not.toBeInTheDocument();
await userEvent.click(screen.getByRole('button'));
expect(screen.getByText('Copy log line')).toBeInTheDocument();
});
});
describe('Syntax highlighting', () => {

19
public/app/features/logs/components/panel/LogLine.tsx
View File

@ -149,7 +149,9 @@ const LogLineComponent = memo(
const handleClick = useCallback(
(e: MouseEvent<HTMLElement>) => {
onClick(e, log);
if (isLogLineClick(e.target)) {
onClick(e, log);
}
},
[log, onClick]
);
@ -158,11 +160,14 @@ const LogLineComponent = memo(
return (
<>
{/* A button element could be used but in Safari it prevents text selection. Fallback available for a11y in LogLineMenu */}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
<div
className={`${styles.logLine} ${variant ?? ''} ${pinned ? styles.pinnedLogLine : ''} ${permalinked ? styles.permalinkedLogLine : ''} ${detailsShown ? styles.detailsDisplayed : ''} ${fontSize === 'small' ? styles.fontSizeSmall : ''}`}
className={`${styles.logLine} ${variant ?? ''} ${pinned ? styles.pinnedLogLine : ''} ${permalinked ? styles.permalinkedLogLine : ''} ${detailsShown ? styles.detailsDisplayed : ''} ${fontSize === 'small' ? styles.fontSizeSmall : ''} ${enableLogDetails ? styles.clickable : ''}`}
ref={onOverflow ? logLineRef : undefined}
onMouseEnter={handleMouseOver}
onFocus={handleMouseOver}
onClick={handleClick}
>
<LogLineMenu styles={styles} log={log} />
{dedupStrategy !== LogsDedupStrategy.none && (
@ -204,16 +209,13 @@ const LogLineComponent = memo(
)}
</div>
)}
{/* A button element could be used but in Safari it prevents text selection. Fallback available for a11y in LogLineMenu */}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
<div
className={`${styles.fieldsWrapper} ${detailsShown ? styles.detailsDisplayed : ''} ${wrapLogMessage ? styles.wrappedLogLine : `${styles.unwrappedLogLine} unwrapped-log-line`} ${collapsed === true ? styles.collapsedLogLine : ''} ${enableLogDetails ? styles.clickable : ''}`}
className={`${styles.fieldsWrapper} ${detailsShown ? styles.detailsDisplayed : ''} ${wrapLogMessage ? styles.wrappedLogLine : `${styles.unwrappedLogLine} unwrapped-log-line`} ${collapsed === true ? styles.collapsedLogLine : ''}`}
style={
collapsed && virtualization
? { maxHeight: `${virtualization.getTruncationLineCount() * virtualization.getLineHeight()}px` }
: undefined
}
onClick={handleClick}
>
<Log
collapsed={collapsed}
@ -595,3 +597,8 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
}),
};
};
function isLogLineClick(target: EventTarget) {
const targetIsButton = target instanceof HTMLButtonElement || (target instanceof Element && target.closest('button'));
return !targetIsButton;
}

1
public/app/features/logs/components/panel/LogLineMenu.tsx
View File

@ -160,6 +160,7 @@ export const LogLineMenu = ({ log, styles }: Props) => {
className={styles.menuIcon}
name="ellipsis-v"
aria-label={t('logs.log-line-menu.icon-label', 'Log menu')}
role="button"
/>
</Dropdown>
);