opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-18 10:12:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Explore: support ANSI colors in live logs (#28895)

Browse Source 
Closes #28893

Co-authored-by: Ivana <ivana.huckova@gmail.com>
This commit is contained in:
Valentin Agachi
2020-11-11 14:58:45 +01:00
committed by GitHub
parent e834ad0093
commit 2c724e0aa2
3 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/index.ts
View File

@ -96,6 +96,7 @@ export { GraphSeriesToggler, GraphSeriesTogglerAPI } from './Graph/GraphSeriesTo
export { Collapse, ControlledCollapse } from './Collapse/Collapse';
export { CollapsableSection } from './Collapse/CollapsableSection';
export { LogLabels } from './Logs/LogLabels';
export { LogMessageAnsi } from './Logs/LogMessageAnsi';
export { LogRows } from './Logs/LogRows';
export { getLogRowStyles } from './Logs/getLogRowStyles';
export { ToggleButtonGroup, ToggleButton } from './ToggleButtonGroup/ToggleButtonGroup';

41
public/app/features/explore/LiveLogs.test.tsx
View File

@ -55,10 +55,45 @@ describe('LiveLogs', () => {
expect(wrapper.contains('log message 5')).toBeTruthy();
expect(wrapper.contains('log message 6')).toBeTruthy();
});
it('renders ansi logs', () => {
const rows: LogRowModel[] = [
makeLog({ uid: '1' }),
makeLog({ hasAnsi: true, raw: 'log message \u001B[31m2\u001B[0m', uid: '2' }),
makeLog({ hasAnsi: true, raw: 'log message \u001B[31m3\u001B[0m', uid: '3' }),
];
const wrapper = mount(
<LiveLogsWithTheme
logRows={rows}
timeZone={'utc'}
stopLive={() => {}}
onPause={() => {}}
onResume={() => {}}
isPaused={true}
/>
);
expect(wrapper.contains('log message 1')).toBeTruthy();
expect(wrapper.contains('log message 2')).not.toBeTruthy();
expect(wrapper.contains('log message 3')).not.toBeTruthy();
expect(wrapper.find('LogMessageAnsi')).toHaveLength(2);
expect(
wrapper
.find('LogMessageAnsi')
.first()
.prop('value')
).toBe('log message \u001B[31m2\u001B[0m');
expect(
wrapper
.find('LogMessageAnsi')
.last()
.prop('value')
).toBe('log message \u001B[31m3\u001B[0m');
});
});
const makeLog = (overides: Partial<LogRowModel>): LogRowModel => {
const uid = overides.uid || '1';
const makeLog = (overrides: Partial<LogRowModel>): LogRowModel => {
const uid = overrides.uid || '1';
const entry = `log message ${uid}`;
return {
uid,
@ -75,6 +110,6 @@ const makeLog = (overides: Partial<LogRowModel>): LogRowModel => {
timeEpochNs: '1000000',
timeLocal: '',
timeUtc: '',
...overides,
...overrides,
};
};

4
public/app/features/explore/LiveLogs.tsx
View File

@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import { css, cx } from 'emotion';
import tinycolor from 'tinycolor2';
import { Themeable, withTheme, getLogRowStyles, Icon } from '@grafana/ui';
import { LogMessageAnsi, Themeable, withTheme, getLogRowStyles, Icon } from '@grafana/ui';
import { GrafanaTheme, LogRowModel, TimeZone, dateTimeFormat } from '@grafana/data';
import { ElapsedTime } from './ElapsedTime';
@ -151,7 +151,7 @@ class LiveLogs extends PureComponent<Props, State> {
return (
<tr className={cx(logsRow, styles.logsRowFade)} key={row.uid}>
<td className={cx(logsRowLocalTime)}>{dateTimeFormat(row.timeEpochMs, { timeZone })}</td>
<td className={cx(logsRowMessage)}>{row.entry}</td>
<td className={cx(logsRowMessage)}>{row.hasAnsi ? <LogMessageAnsi value={row.raw} /> : row.entry}</td>
</tr>
);
})}