From ff421ef63b4b76fb8c1f27acdfa6ad6b4d6a7df0 Mon Sep 17 00:00:00 2001
From: Oliver Frye <11541660+oliverfrye@users.noreply.github.com>
Date: Tue, 16 Nov 2021 22:48:42 +1000
Subject: [PATCH] Explore: Logs: Show ANSI colors when highlighting matched
 words (#40971)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../src/components/Logs/LogMessageAnsi.tsx    | 33 ++++++++++++++-----
 .../src/components/Logs/LogRowMessage.tsx     | 10 +++---
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
index 22002e78eab..ccf5267bffa 100644
--- a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
@@ -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
+      );
+    });
   }
 }
diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
index 616860ac258..140bb0a733f 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
@@ -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;
   }