Explore/Logs: Escaping of incorrectly escaped log lines (#31352)

* POC: Escaping of incorrectly escaped log lines

* Remove unused import

* Fix test, change copy

* Make escapedNewlines optional

* Fix typechecks

* Remove loading state from the escaping button

* Update namings

public/app/features/explore/LiveLogs.test.tsx

@@ -93,6 +93,7 @@ const makeLog = (overrides: Partial<LogRowModel>): LogRowModel => {
     logLevel: LogLevel.debug,
     entry,
     hasAnsi: false,
+    hasUnescapedContent: false,
     labels: {},
     raw: entry,
     timeFromNow: '',

public/app/features/explore/Logs.tsx

@@ -29,6 +29,8 @@ import {
   InlineSwitch,
   withTheme,
   stylesFactory,
+  Icon,
+  Tooltip,
 } from '@grafana/ui';
 import store from 'app/core/store';
 import { ExploreGraphPanel } from './ExploreGraphPanel';
@@ -89,6 +91,8 @@ interface State {
   logsSortOrder: LogsSortOrder | null;
   isFlipping: boolean;
   showDetectedFields: string[];
+  hasUnescapedContent: boolean;
+  forceEscape: boolean;
 }
 
 export class UnthemedLogs extends PureComponent<Props, State> {
@@ -102,6 +106,8 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     logsSortOrder: null,
     isFlipping: false,
     showDetectedFields: [],
+    hasUnescapedContent: this.props.logRows.some((r) => r.hasUnescapedContent),
+    forceEscape: false,
   };
 
   componentWillUnmount() {
@@ -123,6 +129,12 @@ export class UnthemedLogs extends PureComponent<Props, State> {
     this.cancelFlippingTimer = setTimeout(() => this.setState({ isFlipping: false }), 1000);
   };
 
+  onEscapeNewlines = () => {
+    this.setState((prevState) => ({
+      forceEscape: !prevState.forceEscape,
+    }));
+  };
+
   onChangeDedup = (dedup: LogsDedupStrategy) => {
     const { onDedupStrategyChange } = this.props;
     if (this.props.dedupStrategy === dedup) {
@@ -237,7 +249,16 @@ export class UnthemedLogs extends PureComponent<Props, State> {
       theme,
     } = this.props;
 
-    const { showLabels, showTime, wrapLogMessage, logsSortOrder, isFlipping, showDetectedFields } = this.state;
+    const {
+      showLabels,
+      showTime,
+      wrapLogMessage,
+      logsSortOrder,
+      isFlipping,
+      showDetectedFields,
+      hasUnescapedContent,
+      forceEscape,
+    } = this.state;
 
     const hasData = logRows && logRows.length > 0;
     const dedupCount = dedupedRows
@@ -346,6 +367,27 @@ export class UnthemedLogs extends PureComponent<Props, State> {
           />
         )}
 
+        {hasUnescapedContent && (
+          <MetaInfoText
+            metaItems={[
+              {
+                label: 'Your logs might have incorrectly escaped content',
+                value: (
+                  <Tooltip
+                    content="We suggest to try to fix the escaping of your log lines first. This is an experimental feature, your logs might not be correctly escaped."
+                    placement="right"
+                  >
+                    <Button variant="secondary" size="sm" onClick={this.onEscapeNewlines}>
+                      <span>{forceEscape ? 'Remove escaping' : 'Escape newlines'}&nbsp;</span>
+                      <Icon name="exclamation-triangle" className="muted" size="sm" />
+                    </Button>
+                  </Tooltip>
+                ),
+              },
+            ]}
+          />
+        )}
+
         <LogRows
           logRows={logRows}
           deduplicatedRows={dedupedRows}
@@ -357,6 +399,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
           showContextToggle={showContextToggle}
           showLabels={showLabels}
           showTime={showTime}
+          forceEscape={forceEscape}
           wrapLogMessage={wrapLogMessage}
           timeZone={timeZone}
           getFieldLinks={getFieldLinks}

public/app/features/explore/MetaInfoText.tsx

@@ -32,7 +32,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
 
 export interface MetaItemProps {
   label?: string;
-  value: string;
+  value: string | JSX.Element;
 }
 
 export const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) {

public/app/features/explore/utils/decorators.test.ts

@@ -295,6 +295,7 @@ describe('decorateWithLogsResult', () => {
           entry: 'this is a message',
           entryFieldIndex: 3,
           hasAnsi: false,
+          hasUnescapedContent: false,
           labels: {},
           logLevel: 'unknown',
           raw: 'this is a message',
@@ -313,6 +314,7 @@ describe('decorateWithLogsResult', () => {
           entry: 'third',
           entryFieldIndex: 3,
           hasAnsi: false,
+          hasUnescapedContent: false,
           labels: {},
           logLevel: 'unknown',
           raw: 'third',
@@ -331,6 +333,7 @@ describe('decorateWithLogsResult', () => {
           entry: 'second message',
           entryFieldIndex: 3,
           hasAnsi: false,
+          hasUnescapedContent: false,
           labels: {},
           logLevel: 'unknown',
           raw: 'second message',