From aeabaee2da24506fef3e545b1d88e721334a3a8b Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Fri, 26 Feb 2021 16:27:51 +0100
Subject: [PATCH] Explore: Show ANSI colored logs in logs context (#31510)

* If ANSI in log context, show it

* Update

* Update

* Add test
---
 .../src/components/Logs/LogMessageAnsi.tsx    |  2 +-
 .../components/Logs/LogRowContext.test.tsx    | 23 +++++++++++++++++++
 .../src/components/Logs/LogRowContext.tsx     |  7 +++---
 3 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/Logs/LogRowContext.test.tsx

diff --git a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
index cf44f8e20f7..d8fe1cc5783 100644
--- a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
@@ -64,7 +64,7 @@ export class LogMessageAnsi extends PureComponent<Props, State> {
 
     return chunks.map((chunk, index) =>
       chunk.style ? (
-        <span key={index} style={chunk.style}>
+        <span key={index} style={chunk.style} data-testid="ansiLogLine">
           {chunk.text}
         </span>
       ) : (
diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.test.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.test.tsx
new file mode 100644
index 00000000000..759f34880c9
--- /dev/null
+++ b/packages/grafana-ui/src/components/Logs/LogRowContext.test.tsx
@@ -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);
+  });
+});
diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
index 1216c832844..727d2cc475a 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
@@ -1,5 +1,5 @@
 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 { Alert } from '../Alert/Alert';
@@ -8,6 +8,7 @@ import { ThemeContext } from '../../themes/ThemeContext';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 import { List } from '../List/List';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
+import { LogMessageAnsi } from './LogMessageAnsi';
 
 interface LogRowContextProps {
   row: LogRowModel;
@@ -95,7 +96,7 @@ const LogRowContextGroupHeader: React.FunctionComponent<LogRowContextGroupHeader
   );
 };
 
-const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({
+export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({
   row,
   rows,
   error,
@@ -139,7 +140,7 @@ const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps> = ({
                         padding: 5px 0;
                       `}
                     >
-                      {item}
+                      {typeof item === 'string' && textUtil.hasAnsiCodes(item) ? <LogMessageAnsi value={item} /> : item}
                     </div>
                   );
                 }}