public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Logs Panel: fix unwrapped logs display (#107391)

Browse Source 
* LogLine: remove new lines in unwrapped mode

* Displayed fields: fix displayed fields when the body is included

* LogLine: prevent overflows from extremely long lines with incorrect width measurement

* Update tests

* virtualization: test calculateFieldDimensions

* getGridTemplateColumns: consider displayed fields to set the grid sizes

* LogList: hide overflowing fields in unwrapped mode

* processing: extract regex

* LogLine: improve hover and selected state

* virtualization: strip ansi color codes for measurement

* Update tests

* LogLine: improve log line pre-resize state

* Revert "LogLine: improve log line pre-resize state"

This reverts commit a6b4ddded5.

* LogLine: improve hover/active color
This commit is contained in:
Matias Chomicki
2025-07-01 09:55:26 +00:00
committed by GitHub
parent 974a2c47f9
commit 855f133d1e
8 changed files with 239 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/logs/components/__mocks__/logRow.ts
+1
View File
@@ -46,6 +46,7 @@ export const createLogLine = (
order: LogsSortOrder.Descending,
timeZone: 'browser',
virtualization: undefined,
wrapLogMessage: true,
}
): LogListModel => {
const logs = preProcessLogs([createLogRow(overrides)], processOptions);
public/app/features/logs/components/panel/LogLine.test.tsx
+89 -3
View File
@@ -6,7 +6,7 @@ import { CoreApp, createTheme, LogsDedupStrategy, LogsSortOrder } from '@grafana
import { LOG_LINE_BODY_FIELD_NAME } from '../LogDetailsBody';
import { createLogLine } from '../__mocks__/logRow';
import { getStyles, LogLine, Props } from './LogLine';
import { getGridTemplateColumns, getStyles, LogLine, Props } from './LogLine';
import { LogListFontSize } from './LogList';
import { LogListContextProvider } from './LogListContext';
import { LogListSearchContext } from './LogListSearchContext';
@@ -36,7 +36,7 @@ describe.each(fontSizes)('LogLine', (fontSize: LogListFontSize) => {
beforeEach(() => {
log = createLogLine(
{ labels: { place: 'luna' }, entry: `log message 1` },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization, wrapLogMessage: true }
);
contextProps.logs = [log];
contextProps.fontSize = fontSize;
@@ -226,7 +226,7 @@ describe.each(fontSizes)('LogLine', (fontSize: LogListFontSize) => {
jest.spyOn(virtualization, 'getTruncationLength').mockReturnValue(5);
log = createLogLine(
{ labels: { place: 'luna' }, entry: `log message 1` },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization, wrapLogMessage: true }
);
});
@@ -425,3 +425,89 @@ describe.each(fontSizes)('LogLine', (fontSize: LogListFontSize) => {
});
});
});
describe('getGridTemplateColumns', () => {
test('Gets the template columns for the default visualization mode', () => {
expect(
getGridTemplateColumns(
[
{
field: 'timestamp',
width: 23,
},
{
field: 'level',
width: 4,
},
],
[]
)
).toBe('23px 4px 1fr');
});
test('Gets the template columns when displayed fields are used', () => {
expect(
getGridTemplateColumns(
[
{
field: 'timestamp',
width: 23,
},
{
field: 'level',
width: 4,
},
],
['field']
)
).toBe('23px 4px');
});
test('Gets the template columns when displayed fields are used', () => {
expect(
getGridTemplateColumns(
[
{
field: 'timestamp',
width: 23,
},
{
field: 'level',
width: 4,
},
{
field: 'field',
width: 4,
},
],
['field']
)
).toBe('23px 4px 4px');
});
test('Gets the template columns when displayed fields are used', () => {
expect(
getGridTemplateColumns(
[
{
field: 'timestamp',
width: 23,
},
{
field: 'level',
width: 4,
},
{
field: 'field',
width: 4,
},
{
field: LOG_LINE_BODY_FIELD_NAME,
width: 20,
},
],
['field']
)
).toBe('23px 4px 4px 20px');
});
});
public/app/features/logs/components/panel/LogLine.tsx
+16 -5
View File
@@ -192,7 +192,7 @@ const LogLineComponent = memo(
{/* 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={`${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 : ''} ${enableLogDetails ? styles.clickable : ''}`}
style={
collapsed && virtualization
? { maxHeight: `${virtualization.getTruncationLineCount() * virtualization.getLineHeight()}px` }
@@ -350,9 +350,10 @@ const LogLineBody = ({ log, styles }: { log: LogListModel; styles: LogLineStyles
return <span className="field log-syntax-highlight" dangerouslySetInnerHTML={{ __html: log.highlightedBody }} />;
};
export function getGridTemplateColumns(dimensions: LogFieldDimension[]) {
export function getGridTemplateColumns(dimensions: LogFieldDimension[], displayedFields: string[]) {
const columns = dimensions.map((dimension) => dimension.width).join('px ');
return `${columns}px 1fr`;
const logLineWidth = displayedFields.length > 0 ? '' : ' 1fr';
return `${columns}px${logLineWidth}`;
}
export type LogLineStyles = ReturnType<typeof getStyles>;
@@ -368,6 +369,8 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
parsedField: theme.colors.text.primary,
};
const hoverColor = tinycolor(theme.colors.background.canvas).darken(4).toRgbString();
return {
logLine: css({
color: tinycolor(theme.colors.text.secondary).setAlpha(0.75).toRgbString(),
@@ -379,7 +382,7 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
lineHeight: theme.typography.body.lineHeight,
wordBreak: 'break-all',
'&:hover': {
background: theme.isDark ? `hsla(0, 0%, 0%, 0.3)` : `hsla(0, 0%, 0%, 0.1)`,
background: hoverColor,
},
'&.infinite-scroll': {
'&::before': {
@@ -440,7 +443,7 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
lineHeight: theme.typography.bodySmall.lineHeight,
}),
detailsDisplayed: css({
background: theme.isDark ? `hsla(0, 0%, 0%, 0.5)` : `hsla(0, 0%, 0%, 0.1)`,
background: hoverColor,
}),
pinnedLogLine: css({
backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
@@ -525,6 +528,9 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
gridColumnGap: theme.spacing(FIELD_GAP_MULTIPLIER),
whiteSpace: 'pre',
paddingBottom: theme.spacing(0.75),
'& .field': {
overflow: 'hidden',
},
}),
wrappedLogLine: css({
alignSelf: 'flex-start',
@@ -537,6 +543,11 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
marginRight: 0,
},
}),
fieldsWrapper: css({
'&:hover': {
background: hoverColor,
},
}),
collapsedLogLine: css({
overflow: 'hidden',
}),
public/app/features/logs/components/panel/LogList.tsx
+10 -5
View File
@@ -248,7 +248,7 @@ const LogListComponent = ({
() => (wrapLogMessage ? [] : virtualization.calculateFieldDimensions(processedLogs, displayedFields)),
[displayedFields, processedLogs, virtualization, wrapLogMessage]
);
const styles = useStyles2(getStyles, dimensions, { showTime });
const styles = useStyles2(getStyles, dimensions, displayedFields, { showTime });
const widthContainer = wrapperRef.current ?? containerElement;
const {
closePopoverMenu,
@@ -283,13 +283,13 @@ const LogListComponent = ({
setProcessedLogs(
preProcessLogs(
logs,
{ getFieldLinks, escape: forceEscape ?? false, order: sortOrder, timeZone, virtualization },
{ getFieldLinks, escape: forceEscape ?? false, order: sortOrder, timeZone, virtualization, wrapLogMessage },
grammar
)
);
virtualization.resetLogLineSizes();
listRef.current?.resetAfterIndex(0);
}, [forceEscape, getFieldLinks, grammar, loading, logs, sortOrder, timeZone, virtualization]);
}, [forceEscape, getFieldLinks, grammar, loading, logs, sortOrder, timeZone, virtualization, wrapLogMessage]);
useEffect(() => {
listRef.current?.resetAfterIndex(0);
@@ -469,13 +469,18 @@ const LogListComponent = ({
);
};
function getStyles(theme: GrafanaTheme2, dimensions: LogFieldDimension[], { showTime }: { showTime: boolean }) {
function getStyles(
theme: GrafanaTheme2,
dimensions: LogFieldDimension[],
displayedFields: string[],
{ showTime }: { showTime: boolean }
) {
const columns = showTime ? dimensions : dimensions.filter((_, index) => index > 0);
return {
logList: css({
'& .unwrapped-log-line': {
display: 'grid',
gridTemplateColumns: getGridTemplateColumns(columns),
gridTemplateColumns: getGridTemplateColumns(columns, displayedFields),
},
}),
logListContainer: css({
public/app/features/logs/components/panel/processing.test.ts
+47 -2
View File
@@ -79,6 +79,7 @@ describe('preProcessLogs', () => {
getFieldLinks,
order: LogsSortOrder.Descending,
timeZone: 'browser',
wrapLogMessage: true,
});
});
@@ -92,9 +93,53 @@ describe('preProcessLogs', () => {
entry: `35.191.12.195 - accounts.google.com:test@grafana.com [18/Mar/2025:08:58:38 +0000] 200 "POST /grafana/api/ds/query?ds_type=prometheus&requestId=SQR461 HTTP/1.1" 59460 "https://test.example.com/?orgId=1" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36" "95.91.240.90, 34.107.247.24"`,
logLevel: LogLevel.critical,
});
const logListModel = new LogListModel(logRowModel, { escape: false, timeZone: 'browser ' });
const logListModel = new LogListModel(logRowModel, { escape: false, timeZone: 'browser ', wrapLogMessage: true });
expect(logListModel).toMatchObject(logRowModel);
});
test('Unwrapped log lines strip new lines', () => {
const logListModel = createLogLine(
{ labels: { place: `lu\nna` }, entry: `log\n message\n 1` },
{
escape: false,
order: LogsSortOrder.Descending,
timeZone: 'browser',
wrapLogMessage: false, // unwrapped
}
);
expect(logListModel.getDisplayedFieldValue('place')).toBe('luna');
expect(logListModel.body).toBe('log message 1');
});
test('Wrapped log lines do not modify new lines', () => {
const logListModel = createLogLine(
{ labels: { place: `lu\nna` }, entry: `log\n message\n 1` },
{
escape: false,
order: LogsSortOrder.Descending,
timeZone: 'browser',
wrapLogMessage: true, // wrapped
}
);
expect(logListModel.getDisplayedFieldValue('place')).toBe(logListModel.labels['place']);
expect(logListModel.body).toBe(logListModel.raw);
});
test('Strips ansi colors for measurement', () => {
const logListModel = createLogLine(
{ entry: `log \u001B[31mmessage\u001B[0m 1` },
{
escape: false,
order: LogsSortOrder.Descending,
timeZone: 'browser',
wrapLogMessage: true,
}
);
expect(logListModel.getDisplayedFieldValue(LOG_LINE_BODY_FIELD_NAME, false)).toBe(
`log \u001B[31mmessage\u001B[0m 1`
);
expect(logListModel.getDisplayedFieldValue(LOG_LINE_BODY_FIELD_NAME, true)).toBe('log message 1');
});
});
test('Orders logs', () => {
@@ -176,7 +221,7 @@ describe('preProcessLogs', () => {
entry = new Array(2 * virtualization.getTruncationLength(null)).fill('e').join('');
longLog = createLogLine(
{ entry, labels: { field: 'value' } },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization, wrapLogMessage: true }
);
});
public/app/features/logs/components/panel/processing.ts
+33 -13
View File
@@ -1,3 +1,4 @@
import ansicolor from 'ansicolor';
import Prism, { Grammar } from 'prismjs';
import { DataFrame, dateTimeFormat, Labels, LogLevel, LogRowModel, LogsSortOrder } from '@grafana/data';
@@ -11,6 +12,7 @@ import { generateLogGrammar, generateTextMatchGrammar } from './grammar';
import { LogLineVirtualization } from './virtualization';
const TRUNCATION_DEFAULT_LENGTH = 50000;
const NEWLINES_REGEX = /(\r\n|\n|\r)/g;
export class LogListModel implements LogRowModel {
collapsed: boolean | undefined = undefined;
@@ -47,8 +49,12 @@ export class LogListModel implements LogRowModel {
private _fields: FieldDef[] | undefined = undefined;
private _getFieldLinks: GetFieldLinksFn | undefined = undefined;
private _virtualization?: LogLineVirtualization;
private _wrapLogMessage: boolean;
constructor(log: LogRowModel, { escape, getFieldLinks, grammar, timeZone, virtualization }: PreProcessLogOptions) {
constructor(
log: LogRowModel,
{ escape, getFieldLinks, grammar, timeZone, virtualization, wrapLogMessage }: PreProcessLogOptions
) {
// LogRowModel
this.datasourceType = log.datasourceType;
this.dataFrame = log.dataFrame;
@@ -82,6 +88,7 @@ export class LogListModel implements LogRowModel {
defaultWithMS: true,
});
this._virtualization = virtualization;
this._wrapLogMessage = wrapLogMessage;
let raw = log.raw;
if (escape && log.hasUnescapedContent) {
@@ -95,6 +102,9 @@ export class LogListModel implements LogRowModel {
this._body = this.collapsed
? this.raw.substring(0, this._virtualization?.getTruncationLength(null) ?? TRUNCATION_DEFAULT_LENGTH)
: this.raw;
if (!this._wrapLogMessage) {
this._body = this._body.replace(NEWLINES_REGEX, '');
}
}
return this._body;
}
@@ -123,25 +133,31 @@ export class LogListModel implements LogRowModel {
return checkLogsSampled(this);
}
getDisplayedFieldValue(fieldName: string): string {
getDisplayedFieldValue(fieldName: string, stripAnsi = false): string {
if (fieldName === LOG_LINE_BODY_FIELD_NAME) {
return this.body;
return stripAnsi ? ansicolor.strip(this.body) : this.body;
}
let fieldValue = '';
if (this.labels[fieldName] != null) {
return this.labels[fieldName];
}
const field = this.fields.find((field) => {
return field.keys[0] === fieldName;
});
fieldValue = this.labels[fieldName];
} else {
const field = this.fields.find((field) => {
return field.keys[0] === fieldName;
});
return field ? field.values.toString() : '';
fieldValue = field ? field.values.toString() : '';
}
if (!this._wrapLogMessage) {
return fieldValue.replace(NEWLINES_REGEX, '');
}
return fieldValue;
}
updateCollapsedState(displayedFields: string[], container: HTMLDivElement | null) {
const lineLength =
displayedFields.length > 0
? displayedFields.map((field) => this.getDisplayedFieldValue(field)).join('').length
: this.raw.length;
? displayedFields.map((field) => this.getDisplayedFieldValue(field, true)).join('').length
: this.entry.length;
const collapsed =
lineLength >= (this._virtualization?.getTruncationLength(container) ?? TRUNCATION_DEFAULT_LENGTH)
? true
@@ -172,15 +188,18 @@ export interface PreProcessOptions {
order: LogsSortOrder;
timeZone: string;
virtualization?: LogLineVirtualization;
wrapLogMessage: boolean;
}
export const preProcessLogs = (
logs: LogRowModel[],
{ escape, getFieldLinks, order, timeZone, virtualization }: PreProcessOptions,
{ escape, getFieldLinks, order, timeZone, virtualization, wrapLogMessage }: PreProcessOptions,
grammar?: Grammar
): LogListModel[] => {
const orderedLogs = sortLogRows(logs, order);
return orderedLogs.map((log) => preProcessLog(log, { escape, getFieldLinks, grammar, timeZone, virtualization }));
return orderedLogs.map((log) =>
preProcessLog(log, { escape, getFieldLinks, grammar, timeZone, virtualization, wrapLogMessage })
);
};
interface PreProcessLogOptions {
@@ -189,6 +208,7 @@ interface PreProcessLogOptions {
grammar?: Grammar;
timeZone: string;
virtualization?: LogLineVirtualization;
wrapLogMessage: boolean;
}
const preProcessLog = (log: LogRowModel, options: PreProcessLogOptions): LogListModel => {
return new LogListModel(log, options);
public/app/features/logs/components/panel/virtualization.test.ts
+41 -14
View File
@@ -3,7 +3,7 @@ import { createTheme, LogsSortOrder } from '@grafana/data';
import { LOG_LINE_BODY_FIELD_NAME } from '../LogDetailsBody';
import { createLogLine } from '../__mocks__/logRow';
import { LogListModel } from './processing';
import { LogListModel, PreProcessOptions } from './processing';
import { LogLineVirtualization, getLogLineSize, DisplayOptions } from './virtualization';
describe('Virtualization', () => {
@@ -28,12 +28,16 @@ describe('Virtualization', () => {
hasSampledLogs: false,
};
const preProcessOptions: PreProcessOptions = {
escape: false,
order: LogsSortOrder.Descending,
timeZone: 'browser',
virtualization,
wrapLogMessage: true,
};
beforeEach(() => {
log = createLogLine(
{ labels: { place: 'luna' }, entry: `log message 1` },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
);
//virtualization = new LogLineVirtualization(createTheme(), 'default');
log = createLogLine({ labels: { place: 'luna' }, entry: `log message 1` }, preProcessOptions);
container = document.createElement('div');
jest.spyOn(container, 'clientWidth', 'get').mockReturnValue(CONTAINER_SIZE);
LETTER_WIDTH = virtualization.measureTextWidth('e');
@@ -86,7 +90,7 @@ describe('Virtualization', () => {
entry: new Array(TWO_LINES_OF_CHARACTERS).fill('e').join(''),
logLevel: undefined,
},
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
preProcessOptions
);
const size = getLogLineSize(virtualization, [log], container, [], { ...defaultOptions, wrap: true }, 0);
@@ -96,7 +100,7 @@ describe('Virtualization', () => {
test('Measures a multi-line log line with level, controls, and displayed time', () => {
log = createLogLine(
{ labels: { place: 'luna' }, entry: new Array(TWO_LINES_OF_CHARACTERS).fill('e').join('') },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
preProcessOptions
);
const size = getLogLineSize(
@@ -118,7 +122,7 @@ describe('Virtualization', () => {
entry: new Array(TWO_LINES_OF_CHARACTERS).fill('e').join(''),
logLevel: undefined,
},
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
preProcessOptions
);
const size = getLogLineSize(
@@ -136,7 +140,7 @@ describe('Virtualization', () => {
test('Measures displayed fields in a log line with level, controls, and displayed time', () => {
log = createLogLine(
{ labels: { place: 'luna' }, entry: new Array(TWO_LINES_OF_CHARACTERS).fill('e').join('') },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
preProcessOptions
);
const size = getLogLineSize(
@@ -154,7 +158,7 @@ describe('Virtualization', () => {
test('Measures a multi-line log line with duplicates', () => {
log = createLogLine(
{ labels: { place: 'luna' }, entry: new Array(TWO_LINES_OF_CHARACTERS).fill('e').join('') },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
preProcessOptions
);
log.duplicates = 1;
@@ -173,7 +177,7 @@ describe('Virtualization', () => {
test('Measures a multi-line log line with errors', () => {
log = createLogLine(
{ labels: { place: 'luna' }, entry: new Array(TWO_LINES_OF_CHARACTERS).fill('e').join('') },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
preProcessOptions
);
const size = getLogLineSize(
@@ -191,7 +195,7 @@ describe('Virtualization', () => {
test('Measures a multi-line sampled log line', () => {
log = createLogLine(
{ labels: { place: 'luna' }, entry: new Array(TWO_LINES_OF_CHARACTERS).fill('e').join('') },
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
preProcessOptions
);
const size = getLogLineSize(
@@ -214,6 +218,29 @@ describe('Virtualization', () => {
});
});
describe('calculateFieldDimensions', () => {
test('Measures displayed fields including the log line body', () => {
expect(virtualization.calculateFieldDimensions([log], ['place', LOG_LINE_BODY_FIELD_NAME])).toEqual([
{
field: 'timestamp',
width: 23,
},
{
field: 'level',
width: 4,
},
{
field: 'place',
width: 4,
},
{
field: '___LOG_LINE_BODY___',
width: 13,
},
]);
});
});
describe('With small font size', () => {
const virtualization = new LogLineVirtualization(createTheme(), 'small');
@@ -232,7 +259,7 @@ describe('Virtualization', () => {
entry: new Array(TWO_LINES_OF_CHARACTERS).fill('e').join(''),
logLevel: undefined,
},
{ escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
preProcessOptions
);
const size = getLogLineSize(
public/app/features/logs/components/panel/virtualization.ts
+2 -8
View File
@@ -2,8 +2,6 @@ import ansicolor from 'ansicolor';
import { BusEventWithPayload, GrafanaTheme2 } from '@grafana/data';
import { LOG_LINE_BODY_FIELD_NAME } from '../LogDetailsBody';
import { LogListFontSize } from './LogList';
import { LogListModel } from './processing';
@@ -195,7 +193,7 @@ export class LogLineVirtualization {
levelWidth = Math.round(width);
}
for (const field of displayedFields) {
width = this.measureTextWidth(logs[i].getDisplayedFieldValue(field));
width = this.measureTextWidth(logs[i].getDisplayedFieldValue(field, true));
fieldWidths[field] = !fieldWidths[field] || width > fieldWidths[field] ? Math.round(width) : fieldWidths[field];
}
}
@@ -210,10 +208,6 @@ export class LogLineVirtualization {
},
];
for (const field in fieldWidths) {
// Skip the log line when it's a displayed field
if (field === LOG_LINE_BODY_FIELD_NAME) {
continue;
}
dimensions.push({
field,
width: fieldWidths[field],
@@ -294,7 +288,7 @@ export function getLogLineSize(
textToMeasure += logs[index].displayLevel ?? '';
}
for (const field of displayedFields) {
textToMeasure = logs[index].getDisplayedFieldValue(field) + textToMeasure;
textToMeasure = logs[index].getDisplayedFieldValue(field, true) + textToMeasure;
}
if (!displayedFields.length) {
textToMeasure += ansicolor.strip(logs[index].body);