diff --git a/public/app/features/logs/components/LogLabels.test.tsx b/public/app/features/logs/components/LogLabels.test.tsx index cb3c0e90dfb..af5217d110f 100644 --- a/public/app/features/logs/components/LogLabels.test.tsx +++ b/public/app/features/logs/components/LogLabels.test.tsx @@ -1,4 +1,5 @@ import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { LogLabels, LogLabelsList } from './LogLabels'; @@ -23,6 +24,16 @@ describe('', () => { expect(screen.queryByText('foo=bar')).toBeInTheDocument(); expect(screen.queryByText(/baz/)).not.toBeInTheDocument(); }); + it('shows a tooltip', async () => { + render(); + await userEvent.hover(screen.getByText('foo=bar')); + expect(screen.getAllByText('foo=bar')).toHaveLength(2); + }); + it('disables the tooltip', async () => { + render(); + await userEvent.hover(screen.getByText('foo=bar')); + expect(screen.getAllByText('foo=bar')).toHaveLength(1); + }); }); describe('', () => { diff --git a/public/app/features/logs/components/LogLabels.tsx b/public/app/features/logs/components/LogLabels.tsx index c3d7b9117ad..951597c887f 100644 --- a/public/app/features/logs/components/LogLabels.tsx +++ b/public/app/features/logs/components/LogLabels.tsx @@ -10,15 +10,16 @@ const HIDDEN_LABELS = ['detected_level', 'level', 'lvl', 'filename']; interface Props { labels: Labels; emptyMessage?: string; + addTooltip?: boolean; } -export const LogLabels = memo(({ labels, emptyMessage }: Props) => { +export const LogLabels = memo(({ labels, emptyMessage, addTooltip = true }: Props) => { const styles = useStyles2(getStyles); const displayLabels = useMemo( () => Object.keys(labels) - .filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label)) - .sort(), + .filter((label) => !label.startsWith('_') && !HIDDEN_LABELS.includes(label) && labels[label]) + .map((label) => `${label}=${labels[label]}`), [labels] ); @@ -32,16 +33,15 @@ export const LogLabels = memo(({ labels, emptyMessage }: Props) => { return ( - {displayLabels.map((label) => { - const value = labels[label]; - if (!value) { - return; - } - const labelValue = `${label}=${value}`; - return ( - + {displayLabels.map((labelValue) => { + return addTooltip ? ( + {labelValue} + ) : ( + + {labelValue} + ); })} diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx index 6a59f32dbfc..4cb008a314b 100644 --- a/public/app/features/logs/components/LogRow.tsx +++ b/public/app/features/logs/components/LogRow.tsx @@ -281,7 +281,7 @@ class UnThemedLogRow extends PureComponent { {showTime && {this.renderTimeStamp(row.timeEpochMs)}} {showLabels && processedRow.uniqueLabels && ( - + )} {displayedFields && displayedFields.length > 0 ? (