IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Show ANSI colored logs in logs context (#31510)

Browse Source 
* If ANSI in log context, show it

* Update

* Update

* Add test
This commit is contained in:
Ivana Huckova 2021-02-26 16:27:51 +01:00 committed by GitHub
parent 2d9f460e19
commit aeabaee2da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
View File

@ -64,7 +64,7 @@ export class LogMessageAnsi extends PureComponent<Props, State> {
return chunks.map((chunk, index) => return chunks.map((chunk, index) =>
chunk.style ? ( chunk.style ? (
<span key={index} style={chunk.style}> <span key={index} style={chunk.style} data-testid="ansiLogLine">
{chunk.text} {chunk.text}
</span> </span>
) : ( ) : (

23
packages/grafana-ui/src/components/Logs/LogRowContext.test.tsx Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import { LogRowModel } from '@grafana/data';
import { render, screen } from '@testing-library/react';
import { LogRowContextGroup } from './LogRowContext';
describe('LogRowContextGroup component', () => {
it('should correctly render logs with ANSI', () => {
const defaultProps = {
rows: ['Log 1 with \u001B[31mANSI\u001B[0m code', 'Log 2', 'Log 3 with \u001B[31mANSI\u001B[0m code'],
onLoadMoreContext: () => {},
canLoadMoreRows: false,
row: {} as LogRowModel,
className: '',
};
render(
<div>
<LogRowContextGroup {...defaultProps} />
</div>
);
expect(screen.getAllByTestId('ansiLogLine')).toHaveLength(2);
});
});

7
packages/grafana-ui/src/components/Logs/LogRowContext.tsx
View File

@ -1,5 +1,5 @@
import React, { useContext, useRef, useState, useLayoutEffect, useEffect } from 'react'; import React, { useContext, useRef, useState, useLayoutEffect, useEffect } from 'react';
import { GrafanaTheme, DataQueryError, LogRowModel } from '@grafana/data'; import { GrafanaTheme, DataQueryError, LogRowModel, textUtil } from '@grafana/data';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { Alert } from '../Alert/Alert'; import { Alert } from '../Alert/Alert';
@ -8,6 +8,7 @@ import { ThemeContext } from '../../themes/ThemeContext';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
import { List } from '../List/List'; import { List } from '../List/List';
import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper'; import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
import { LogMessageAnsi } from './LogMessageAnsi';
interface LogRowContextProps { interface LogRowContextProps {
row: LogRowModel; row: LogRowModel;
@ -95,7 +96,7 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
); );
}; };
const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({
row, row,
rows, rows,
error, error,
@ -139,7 +140,7 @@ const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({
padding: 5px 0; padding: 5px 0;
`} `}
> >
{item} {typeof item === 'string' && textUtil.hasAnsiCodes(item) ? <LogMessageAnsi value={item} /> : item}
</div> </div>
); );
}} }}