Improve Loki logs render with ANSI colors (#15558)

* Improve Loki logs render with ANSI colors

* fixup! Improve Loki logs render with ANSI colors

* fixup! Improve Loki logs render with ANSI colors

* fixup! Improve Loki logs render with ANSI colors
This commit is contained in:
Valentin Agachi
2019-02-22 20:13:10 +08:00
committed by David
parent c4c150bd15
commit 425636ff70
5 changed files with 66 additions and 17 deletions

View File

@@ -5,7 +5,7 @@ import classnames from 'classnames';
import { LogRowModel, LogLabelStatsModel, LogsParser, calculateFieldStats, getParser } from 'app/core/logs_model';
import { LogLabels } from './LogLabels';
import { findHighlightChunksInText, hasAnsiCodes } from 'app/core/utils/text';
import { findHighlightChunksInText } from 'app/core/utils/text';
import { LogLabelStats } from './LogLabelStats';
import { LogMessageAnsi } from './LogMessageAnsi';
@@ -130,13 +130,13 @@ export class LogRow extends PureComponent<Props, State> {
parsedFieldHighlights,
showFieldStats,
} = this.state;
const { entry, hasAnsi, raw } = row;
const previewHighlights = highlighterExpressions && !_.isEqual(highlighterExpressions, row.searchWords);
const highlights = previewHighlights ? highlighterExpressions : row.searchWords;
const needsHighlighter = highlights && highlights.length > 0;
const needsHighlighter = highlights && highlights.length > 0 && highlights[0].length > 0;
const highlightClassName = classnames('logs-row__match-highlight', {
'logs-row__match-highlight--preview': previewHighlights,
});
const containsAnsiCodes = hasAnsiCodes(row.entry);
return (
<div className="logs-row">
@@ -160,25 +160,25 @@ export class LogRow extends PureComponent<Props, State> {
</div>
)}
<div className="logs-row__message" onMouseEnter={this.onMouseOverMessage} onMouseLeave={this.onMouseOutMessage}>
{containsAnsiCodes && <LogMessageAnsi value={row.entry} />}
{!containsAnsiCodes && parsed && (
{parsed && (
<Highlighter
autoEscape
highlightTag={FieldHighlight(this.onClickHighlight)}
textToHighlight={row.entry}
textToHighlight={entry}
searchWords={parsedFieldHighlights}
highlightClassName="logs-row__field-highlight"
/>
)}
{!containsAnsiCodes && !parsed && needsHighlighter && (
{!parsed && needsHighlighter && (
<Highlighter
textToHighlight={row.entry}
textToHighlight={entry}
searchWords={highlights}
findChunks={findHighlightChunksInText}
highlightClassName={highlightClassName}
/>
)}
{!containsAnsiCodes && !parsed && !needsHighlighter && row.entry}
{hasAnsi && !parsed && !needsHighlighter && <LogMessageAnsi value={raw} />}
{!hasAnsi && !parsed && !needsHighlighter && entry}
{showFieldStats && (
<div className="logs-row__stats">
<LogLabelStats