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: Logs: Show ANSI colors when highlighting matched words (#40971)

Browse Source 
* Explore: Show ANSI colors when highlighting matched words

* only highlight ANSI text if needsHighlighter is true

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>

* fix lint error

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>
This commit is contained in:
Oliver Frye
2021-11-16 22:48:42 +10:00
committed by GitHub
parent 0dcea161fa
commit ff421ef63b
2 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,8 @@
import React, { PureComponent } from 'react';
import { findHighlightChunksInText } from '@grafana/data';
import ansicolor from 'ansicolor';
import React, { PureComponent } from 'react';
// @ts-ignore
import Highlighter from 'react-highlight-words';
interface Style {
[key: string]: string;
@@ -26,6 +29,10 @@ function convertCSSToStyle(css: string): Style {
interface Props {
value: string;
highlight?: {
searchWords: string[];
highlightClassName: string;
};
}
interface State {
@@ -62,14 +69,24 @@ export class LogMessageAnsi extends PureComponent<Props, State> {
render() {
const { chunks } = this.state;
return chunks.map((chunk, index) =>
chunk.style ? (
<span key={index} style={chunk.style} data-testid="ansiLogLine">
{chunk.text}
</span>
return chunks.map((chunk, index) => {
const chunkText = this.props.highlight?.searchWords ? (
<Highlighter
textToHighlight={chunk.text}
searchWords={this.props.highlight.searchWords}
findChunks={findHighlightChunksInText}
highlightClassName={this.props.highlight.highlightClassName}
/>
) : (
chunk.text
)
);
);
return chunk.style ? (
<span key={index} style={chunk.style} data-testid="ansiLogLine">
{chunkText}
</span>
) : (
chunkText
);
});
}
}

10
packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
View File

@@ -63,17 +63,19 @@ function renderLogMessage(
) {
const needsHighlighter =
highlights && highlights.length > 0 && highlights[0] && highlights[0].length > 0 && entry.length < MAX_CHARACTERS;
if (needsHighlighter) {
const searchWords = highlights ?? [];
if (hasAnsi) {
const highlight = needsHighlighter ? { searchWords, highlightClassName } : undefined;
return <LogMessageAnsi value={entry} highlight={highlight} />;
} else if (needsHighlighter) {
return (
<Highlighter
textToHighlight={entry}
searchWords={highlights ?? []}
searchWords={searchWords}
findChunks={findHighlightChunksInText}
highlightClassName={highlightClassName}
/>
);
} else if (hasAnsi) {
return <LogMessageAnsi value={entry} />;
} else {
return entry;
}