From 445132a904040cf6b6e56aaf62302ec119c13531 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 8 Mar 2021 12:24:44 +0100
Subject: [PATCH] Fix escaping in ANSI and dynamic button removal (#31731)

---
 packages/grafana-ui/src/components/Logs/LogRow.tsx | 4 +++-
 public/app/features/explore/Logs.tsx               | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogRow.tsx b/packages/grafana-ui/src/components/Logs/LogRow.tsx
index d8fe2dcb220..ff03b13add7 100644
--- a/packages/grafana-ui/src/components/Logs/LogRow.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRow.tsx
@@ -152,7 +152,9 @@ class UnThemedLogRow extends PureComponent<Props, State> {
     });
 
     const processedRow =
-      row.hasUnescapedContent && forceEscape ? { ...row, entry: escapeUnescapedString(row.entry) } : row;
+      row.hasUnescapedContent && forceEscape
+        ? { ...row, entry: escapeUnescapedString(row.entry), raw: escapeUnescapedString(row.raw) }
+        : row;
 
     return (
       <>
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index e8b8d0cf1df..ca43bf02231 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { css } from 'emotion';
 import { capitalize } from 'lodash';
+import memoizeOne from 'memoize-one';
 
 import {
   rangeUtil,
@@ -91,7 +92,6 @@ interface State {
   logsSortOrder: LogsSortOrder | null;
   isFlipping: boolean;
   showDetectedFields: string[];
-  hasUnescapedContent: boolean;
   forceEscape: boolean;
 }
 
@@ -106,7 +106,6 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     logsSortOrder: null,
     isFlipping: false,
     showDetectedFields: [],
-    hasUnescapedContent: this.props.logRows.some((r) => r.hasUnescapedContent),
     forceEscape: false,
   };
 
@@ -226,6 +225,10 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     });
   };
 
+  checkUnescapedContent = memoizeOne((logRows: LogRowModel[]) => {
+    return !!logRows.some((r) => r.hasUnescapedContent);
+  });
+
   render() {
     const {
       logRows,
@@ -256,7 +259,6 @@ export class UnthemedLogs extends PureComponent<Props, State> {
       logsSortOrder,
       isFlipping,
       showDetectedFields,
-      hasUnescapedContent,
       forceEscape,
     } = this.state;
 
@@ -285,6 +287,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
     const series = logsSeries ? logsSeries : [];
     const styles = getStyles(theme);
+    const hasUnescapedContent = this.checkUnescapedContent(logRows);
 
     return (
       <>