Update LogsTable to toggle row truncation

ui/src/logs/components/LogsTable.tsx

@@ -13,6 +13,7 @@ import {colorForSeverity} from 'src/logs/utils/colors'
 import {
   ROW_HEIGHT,
   calculateRowCharWidth,
+  calculateMessageHeight,
   getColumnFromData,
   getValueFromData,
   getValuesFromData,
@@ -42,6 +43,7 @@ import {INITIAL_LIMIT} from 'src/logs/actions'
 interface Props {
   data: TableData
   isScrolledToTop: boolean
+  isTruncated: boolean
   onScrollVertical: () => void
   onScrolledToTop: () => void
   onTagSelection: (selection: {tag: string; key: string}) => void
@@ -236,7 +238,6 @@ class LogsTable extends Component<Props, State> {
                   autoHide={false}
                 >
                   <Grid
-                    rowHeight={ROW_HEIGHT}
                     {...this.gridProperties(
                       width,
                       height,
@@ -270,6 +271,7 @@ class LogsTable extends Component<Props, State> {
     const result: any = {
       width,
       height,
+      rowHeight: this.calculateRowHeight,
       rowCount: this.rowCount(),
       scrollLeft,
       scrollTop,
@@ -449,6 +451,9 @@ class LogsTable extends Component<Props, State> {
     return data.length * ROW_HEIGHT
   }
 
+  private calculateRowHeight = ({index}: {index: number}): number =>
+    calculateMessageHeight(index, this.props.data, this.rowCharLimit)
+
   private headerRenderer = ({key, style, columnIndex}) => {
     const column = getColumnFromData(this.props.data, columnIndex)
     const classes = 'logs-viewer--cell logs-viewer--cell-header'
@@ -514,7 +519,7 @@ class LogsTable extends Component<Props, State> {
       title = formattedValue
     }
 
-    if (column === 'message') {
+    if (column === 'message' && this.props.isTruncated) {
       formattedValue = (
         <ExpandableMessage
           formattedValue={formattedValue}

ui/src/logs/components/OptionsOverlay.tsx

@@ -34,7 +34,7 @@ interface State {
   workingLevelColumns: SeverityLevelColor[]
   workingColumns: LogsTableColumn[]
   workingFormat: SeverityFormat
-  isTruncated: boolean
+  isWorkingTruncated: boolean
 }
 
 @ErrorHandling
@@ -46,14 +46,14 @@ class OptionsOverlay extends Component<Props, State> {
       workingLevelColumns: this.props.severityLevelColors,
       workingColumns: this.props.columns,
       workingFormat: this.props.severityFormat,
-      isTruncated: this.props.isTruncated,
+      isWorkingTruncated: this.props.isTruncated,
     }
   }
 
   public shouldComponentUpdate(__, nextState: State) {
     const isTruncatedDifferent = !_.isEqual(
-      nextState.isTruncated,
-      this.state.isTruncated
+      nextState.isWorkingTruncated,
+      this.state.isWorkingTruncated
     )
 
     const isColorsDifferent = !_.isEqual(
@@ -135,34 +135,50 @@ class OptionsOverlay extends Component<Props, State> {
   }
 
   private get renderTruncateOption() {
-    const {isTruncated} = this.state
+    const {isWorkingTruncated} = this.state
 
     return (
       <>
         <label className="form-label">Truncate Log Lines</label>
         <SlideToggle
           onChange={this.handleTruncationToggle}
-          active={isTruncated}
+          active={isWorkingTruncated}
         />
       </>
     )
   }
 
   private handleTruncationToggle = (): void => {
-    const {isTruncated} = this.state
+    const {isWorkingTruncated} = this.state
 
-    this.setState({isTruncated: !isTruncated})
+    this.setState({isWorkingTruncated: !isWorkingTruncated})
   }
 
   private get isSaveDisabled(): boolean {
-    const {workingLevelColumns, workingColumns, workingFormat} = this.state
-    const {severityLevelColors, columns, severityFormat} = this.props
+    const {
+      workingLevelColumns,
+      workingColumns,
+      workingFormat,
+      isWorkingTruncated,
+    } = this.state
+    const {
+      severityLevelColors,
+      columns,
+      severityFormat,
+      isTruncated,
+    } = this.props
 
     const severityChanged = !_.isEqual(workingLevelColumns, severityLevelColors)
     const columnsChanged = !_.isEqual(workingColumns, columns)
     const formatChanged = !_.isEqual(workingFormat, severityFormat)
+    const isTruncatedChagned = !_.isEqual(isWorkingTruncated, isTruncated)
 
-    if (severityChanged || columnsChanged || formatChanged) {
+    if (
+      severityChanged ||
+      columnsChanged ||
+      formatChanged ||
+      isTruncatedChagned
+    ) {
       return false
     }
 
@@ -181,13 +197,13 @@ class OptionsOverlay extends Component<Props, State> {
       workingLevelColumns,
       workingFormat,
       workingColumns,
-      isTruncated,
+      isWorkingTruncated,
     } = this.state
 
     await onUpdateSeverityFormat(workingFormat)
     await onUpdateSeverityLevels(workingLevelColumns)
     await onUpdateColumns(workingColumns)
-    await onUpdateTruncation(isTruncated)
+    await onUpdateTruncation(isWorkingTruncated)
     onDismissOverlay()
   }
 

ui/src/logs/containers/LogsPage.tsx

@@ -204,6 +204,7 @@ class LogsPage extends Component<Props, State> {
               onScrollVertical={this.handleVerticalScroll}
               onScrolledToTop={this.handleScrollToTop}
               isScrolledToTop={false}
+              isTruncated={this.isTruncated}
               onTagSelection={this.handleTagSelection}
               fetchMore={this.props.fetchOlderLogsAsync}
               fetchNewer={this.fetchNewer}