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

packages/grafana-data/src/types/logs.ts

@@ -62,6 +62,7 @@ export interface LogRowModel {
   // Actual log line
   entry: string;
   hasAnsi: boolean;
+  hasUnescapedContent: boolean;
   labels: Labels;
   logLevel: LogLevel;
   raw: string;

packages/grafana-data/src/utils/logs.test.ts

@@ -295,6 +295,7 @@ describe('sortLogsResult', () => {
     dataFrame: new MutableDataFrame(),
     entry: '',
     hasAnsi: false,
+    hasUnescapedContent: false,
     labels: {},
     logLevel: LogLevel.info,
     raw: '',
@@ -312,6 +313,7 @@ describe('sortLogsResult', () => {
     dataFrame: new MutableDataFrame(),
     entry: '',
     hasAnsi: false,
+    hasUnescapedContent: false,
     labels: {},
     logLevel: LogLevel.info,
     raw: '',

packages/grafana-data/src/utils/logs.ts

@@ -223,3 +223,6 @@ export const checkLogsError = (logRow: LogRowModel): { hasError: boolean; errorM
     hasError: false,
   };
 };
+
+export const escapeUnescapedString = (string: string) =>
+  string.replace(/\\n|\\t|\\r/g, (match: string) => (match.slice(1) === 't' ? '\t' : '\n'));

packages/grafana-ui/src/components/Logs/LogDetails.test.tsx

@@ -20,6 +20,7 @@ const setup = (propOverrides?: Partial<Props>, rowOverrides?: Partial<LogRowMode
       timeLocal: '',
       timeUtc: '',
       hasAnsi: false,
+      hasUnescapedContent: false,
       entry: '',
       raw: '',
       uid: '0',

packages/grafana-ui/src/components/Logs/LogRow.tsx

@@ -9,6 +9,7 @@ import {
   GrafanaTheme,
   dateTimeFormat,
   checkLogsError,
+  escapeUnescapedString,
 } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -42,6 +43,8 @@ interface Props extends Themeable {
   timeZone: TimeZone;
   allowDetails?: boolean;
   logsSortOrder?: LogsSortOrder | null;
+  forceEscape?: boolean;
+  showDetectedFields?: string[];
   getRows: () => LogRowModel[];
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
@@ -49,7 +52,6 @@ interface Props extends Themeable {
   getRowContext: (row: LogRowModel, options?: RowContextOptions) => Promise<DataQueryResponse>;
   getFieldLinks?: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
   showContextToggle?: (row?: LogRowModel) => boolean;
-  showDetectedFields?: string[];
   onClickShowDetectedField?: (key: string) => void;
   onClickHideDetectedField?: (key: string) => void;
 }
@@ -139,6 +141,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
       wrapLogMessage,
       theme,
       getFieldLinks,
+      forceEscape,
     } = this.props;
     const { showDetails, showContext } = this.state;
     const style = getLogRowStyles(theme, row.logLevel);
@@ -148,12 +151,15 @@ class UnThemedLogRow extends PureComponent<Props, State> {
       [styles.errorLogRow]: hasError,
     });
 
+    const processedRow =
+      row.hasUnescapedContent && forceEscape ? { ...row, entry: escapeUnescapedString(row.entry) } : row;
+
     return (
       <>
         <tr className={logRowBackground} onClick={this.toggleDetails}>
           {showDuplicates && (
             <td className={style.logsRowDuplicates}>
-              {row.duplicates && row.duplicates > 0 ? `${row.duplicates + 1}x` : null}
+              {processedRow.duplicates && processedRow.duplicates > 0 ? `${processedRow.duplicates + 1}x` : null}
             </td>
           )}
           <td className={cx({ [style.logsRowLevel]: !hasError })}>
@@ -169,14 +175,14 @@ class UnThemedLogRow extends PureComponent<Props, State> {
             </td>
           )}
           {showTime && <td className={style.logsRowLocalTime}>{this.renderTimeStamp(row.timeEpochMs)}</td>}
-          {showLabels && row.uniqueLabels && (
+          {showLabels && processedRow.uniqueLabels && (
             <td className={style.logsRowLabels}>
-              <LogLabels labels={row.uniqueLabels} />
+              <LogLabels labels={processedRow.uniqueLabels} />
             </td>
           )}
           {showDetectedFields && showDetectedFields.length > 0 ? (
             <LogRowMessageDetectedFields
-              row={row}
+              row={processedRow}
               showDetectedFields={showDetectedFields!}
               getFieldLinks={getFieldLinks}
               wrapLogMessage={wrapLogMessage}
@@ -184,7 +190,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
           ) : (
             <LogRowMessage
               highlighterExpressions={highlighterExpressions}
-              row={row}
+              row={processedRow}
               getRows={getRows}
               errors={errors}
               hasMoreContextRows={hasMoreContextRows}
@@ -207,7 +213,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
             onClickShowDetectedField={onClickShowDetectedField}
             onClickHideDetectedField={onClickHideDetectedField}
             getRows={getRows}
-            row={row}
+            row={processedRow}
             wrapLogMessage={wrapLogMessage}
             hasError={hasError}
             showDetectedFields={showDetectedFields}
@@ -219,16 +225,12 @@ class UnThemedLogRow extends PureComponent<Props, State> {
 
   render() {
     const { showContext } = this.state;
-    const { logsSortOrder } = this.props;
+    const { logsSortOrder, row, getRowContext } = this.props;
 
     if (showContext) {
       return (
         <>
-          <LogRowContextProvider
+          <LogRowContextProvider row={row} getRowContext={getRowContext} logsSortOrder={logsSortOrder}>
-            row={this.props.row}
-            getRowContext={this.props.getRowContext}
-            logsSortOrder={logsSortOrder}
-          >
             {({ result, errors, hasMoreContextRows, updateLimit }) => {
               return <>{this.renderLogRow(result, errors, hasMoreContextRows, updateLimit)}</>;
             }}

packages/grafana-ui/src/components/Logs/LogRowContextProvider.test.tsx

@@ -181,6 +181,7 @@ const row: LogRowModel = {
   entry: '4',
   labels: (null as any) as Labels,
   hasAnsi: false,
+  hasUnescapedContent: false,
   raw: '4',
   logLevel: LogLevel.info,
   timeEpochMs: 4,

packages/grafana-ui/src/components/Logs/LogRows.test.tsx

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

packages/grafana-ui/src/components/Logs/LogRows.tsx

@@ -17,7 +17,6 @@ export interface Props extends Themeable {
   deduplicatedRows?: LogRowModel[];
   dedupStrategy: LogsDedupStrategy;
   highlighterExpressions?: string[];
-  showContextToggle?: (row?: LogRowModel) => boolean;
   showLabels: boolean;
   showTime: boolean;
   wrapLogMessage: boolean;
@@ -28,11 +27,13 @@ export interface Props extends Themeable {
   // Passed to fix problems with inactive scrolling in Logs Panel
   // Can be removed when we unify scrolling for Panel and Explore
   disableCustomHorizontalScroll?: boolean;
+  forceEscape?: boolean;
+  showDetectedFields?: string[];
+  showContextToggle?: (row?: LogRowModel) => boolean;
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
   getRowContext?: (row: LogRowModel, options?: RowContextOptions) => Promise<any>;
   getFieldLinks?: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
-  showDetectedFields?: string[];
   onClickShowDetectedField?: (key: string) => void;
   onClickHideDetectedField?: (key: string) => void;
 }
@@ -101,6 +102,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
       showDetectedFields,
       onClickShowDetectedField,
       onClickHideDetectedField,
+      forceEscape,
     } = this.props;
     const { renderAll } = this.state;
     const { logsRowsTable, logsRowsHorizontalScroll } = getLogRowStyles(theme);
@@ -151,6 +153,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
                   onClickHideDetectedField={onClickHideDetectedField}
                   getFieldLinks={getFieldLinks}
                   logsSortOrder={logsSortOrder}
+                  forceEscape={forceEscape}
                 />
               ))}
             {hasData &&
@@ -175,6 +178,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
                   onClickHideDetectedField={onClickHideDetectedField}
                   getFieldLinks={getFieldLinks}
                   logsSortOrder={logsSortOrder}
+                  forceEscape={forceEscape}
                 />
               ))}
             {hasData && !renderAll && (

public/app/core/logs_model.ts

@@ -361,6 +361,9 @@ export function logSeriesToLogsModel(logSeries: DataFrame[]): LogsModel | undefi
       const message: string = typeof messageValue === 'string' ? messageValue : JSON.stringify(messageValue);
 
       const hasAnsi = textUtil.hasAnsiCodes(message);
+
+      const hasUnescapedContent = !!message.match(/\\n|\\t|\\r/);
+
       const searchWords = series.meta && series.meta.searchWords ? series.meta.searchWords : [];
 
       let logLevel = LogLevel.unknown;
@@ -383,6 +386,7 @@ export function logSeriesToLogsModel(logSeries: DataFrame[]): LogsModel | undefi
         timeUtc: dateTimeFormat(ts, { timeZone: 'utc' }),
         uniqueLabels,
         hasAnsi,
+        hasUnescapedContent,
         searchWords,
         entry: hasAnsi ? ansicolor.strip(message) : message,
         raw: message,

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',