Explore/Logs: Correctly display newlines in detected fields (#29541)

* Fix using of newlines in detected fields

* Wrapping depends on main selection

* Update props to be optional

* Add missing wrapLogMessage prop to test

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

@@ -8,6 +8,7 @@ const setup = (propOverrides?: Partial<Props>, rowOverrides?: Partial<LogRowMode
   const props: Props = {
   const props: Props = {
     theme: {} as GrafanaTheme,
     theme: {} as GrafanaTheme,
     showDuplicates: false,
     showDuplicates: false,
+    wrapLogMessage: false,
     row: {
     row: {
       dataFrame: new MutableDataFrame(),
       dataFrame: new MutableDataFrame(),
       entryFieldIndex: 0,
       entryFieldIndex: 0,

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

@@ -29,6 +29,7 @@ export interface Props extends Themeable {
   row: LogRowModel;
   row: LogRowModel;
   showDuplicates: boolean;
   showDuplicates: boolean;
   getRows: () => LogRowModel[];
   getRows: () => LogRowModel[];
+  wrapLogMessage: boolean;
   className?: string;
   className?: string;
   hasError?: boolean;
   hasError?: boolean;
   onMouseEnter?: () => void;
   onMouseEnter?: () => void;
@@ -85,6 +86,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
       onClickHideDetectedField,
       onClickHideDetectedField,
       showDetectedFields,
       showDetectedFields,
       getFieldLinks,
       getFieldLinks,
+      wrapLogMessage,
     } = this.props;
     } = this.props;
     const style = getLogRowStyles(theme, row.logLevel);
     const style = getLogRowStyles(theme, row.logLevel);
     const styles = getStyles(theme);
     const styles = getStyles(theme);
@@ -163,6 +165,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
                           : calculateStats(row.dataFrame.fields[fieldIndex].values.toArray())
                           : calculateStats(row.dataFrame.fields[fieldIndex].values.toArray())
                       }
                       }
                       showDetectedFields={showDetectedFields}
                       showDetectedFields={showDetectedFields}
+                      wrapLogMessage={wrapLogMessage}
                     />
                     />
                   );
                   );
                 })}
                 })}

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

@@ -10,6 +10,7 @@ const setup = (propOverrides?: Partial<Props>) => {
     parsedValue: '',
     parsedValue: '',
     parsedKey: '',
     parsedKey: '',
     isLabel: true,
     isLabel: true,
+    wrapLogMessage: false,
     getStats: () => null,
     getStats: () => null,
     onClickFilterLabel: () => {},
     onClickFilterLabel: () => {},
     onClickFilterOutLabel: () => {},
     onClickFilterOutLabel: () => {},

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

@@ -15,6 +15,7 @@ import { Tag } from '..';
 export interface Props extends Themeable {
 export interface Props extends Themeable {
   parsedValue: string;
   parsedValue: string;
   parsedKey: string;
   parsedKey: string;
+  wrapLogMessage?: boolean;
   isLabel?: boolean;
   isLabel?: boolean;
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
   onClickFilterOutLabel?: (key: string, value: string) => void;
@@ -50,6 +51,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     showingField: css`
     showingField: css`
       color: ${theme.palette.blue95};
       color: ${theme.palette.blue95};
     `,
     `,
+    wrapLine: css`
+      label: wrapLine;
+      white-space: pre-wrap;
+    `,
   };
   };
 });
 });
 
 
@@ -107,7 +112,7 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
   }
   }
 
 
   render() {
   render() {
-    const { theme, parsedKey, parsedValue, isLabel, links, showDetectedFields } = this.props;
+    const { theme, parsedKey, parsedValue, isLabel, links, showDetectedFields, wrapLogMessage } = this.props;
     const { showFieldsStats, fieldStats, fieldCount } = this.state;
     const { showFieldsStats, fieldStats, fieldCount } = this.state;
     const styles = getStyles(theme);
     const styles = getStyles(theme);
     const style = getLogRowStyles(theme);
     const style = getLogRowStyles(theme);
@@ -146,7 +151,7 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
 
 
         {/* Key - value columns */}
         {/* Key - value columns */}
         <td className={style.logDetailsLabel}>{parsedKey}</td>
         <td className={style.logDetailsLabel}>{parsedKey}</td>
-        <td className={styles.wordBreakAll}>
+        <td className={cx(styles.wordBreakAll, wrapLogMessage && styles.wrapLine)}>
           {parsedValue}
           {parsedValue}
           {links &&
           {links &&
             links.map(link => {
             links.map(link => {

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

@@ -203,6 +203,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
               row={row}
               row={row}
               showDetectedFields={showDetectedFields!}
               showDetectedFields={showDetectedFields!}
               getFieldLinks={getFieldLinks}
               getFieldLinks={getFieldLinks}
+              wrapLogMessage={wrapLogMessage}
             />
             />
           ) : (
           ) : (
             <LogRowMessage
             <LogRowMessage
@@ -233,6 +234,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
             onClickHideDetectedField={onClickHideDetectedField}
             onClickHideDetectedField={onClickHideDetectedField}
             getRows={getRows}
             getRows={getRows}
             row={row}
             row={row}
+            wrapLogMessage={wrapLogMessage}
             hasError={hasError}
             hasError={hasError}
             showDetectedFields={showDetectedFields}
             showDetectedFields={showDetectedFields}
           />
           />

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
+import { cx, css } from 'emotion';
 import { LogRowModel, Field, LinkModel } from '@grafana/data';
 import { LogRowModel, Field, LinkModel } from '@grafana/data';
 
 
 import { Themeable } from '../../types/theme';
 import { Themeable } from '../../types/theme';
@@ -9,13 +10,20 @@ import { getAllFields } from './logParser';
 export interface Props extends Themeable {
 export interface Props extends Themeable {
   row: LogRowModel;
   row: LogRowModel;
   showDetectedFields: string[];
   showDetectedFields: string[];
+  wrapLogMessage: boolean;
   getFieldLinks?: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
   getFieldLinks?: (field: Field, rowIndex: number) => Array<LinkModel<Field>>;
 }
 }
 
 
 class UnThemedLogRowMessageDetectedFields extends PureComponent<Props> {
 class UnThemedLogRowMessageDetectedFields extends PureComponent<Props> {
   render() {
   render() {
-    const { row, showDetectedFields, getFieldLinks } = this.props;
+    const { row, showDetectedFields, getFieldLinks, wrapLogMessage } = this.props;
     const fields = getAllFields(row, getFieldLinks);
     const fields = getAllFields(row, getFieldLinks);
+    const wrapClassName = cx(
+      wrapLogMessage &&
+        css`
+          white-space: pre-wrap;
+        `
+    );
 
 
     const line = showDetectedFields
     const line = showDetectedFields
       .map(parsedKey => {
       .map(parsedKey => {
@@ -33,7 +41,7 @@ class UnThemedLogRowMessageDetectedFields extends PureComponent<Props> {
       .filter(s => s !== null)
       .filter(s => s !== null)
       .join(' ');
       .join(' ');
 
 
-    return <td>{line}</td>;
+    return <td className={wrapClassName}>{line}</td>;
   }
   }
 }
 }