Message column width changes with window size

ui/src/logs/components/LogsTable.tsx

@@ -7,9 +7,7 @@ import {getDeep} from 'src/utils/wrappers'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
 const ROW_HEIGHT = 26
-const ROW_CHAR_LIMIT = 100
-const CHAR_WIDTH = 7
-
+const CHAR_WIDTH = 8
 interface Props {
   data: {
     columns: string[]
@@ -46,11 +44,14 @@ class LogsTable extends Component<Props, State> {
   }
 
   private grid: React.RefObject<Grid>
+  private headerGrid: React.RefObject<Grid>
+  private currentMessageWidth: number | null
 
   constructor(props: Props) {
     super(props)
 
     this.grid = React.createRef()
+    this.headerGrid = React.createRef()
 
     this.state = {
       scrollTop: 0,
@@ -61,6 +62,15 @@ class LogsTable extends Component<Props, State> {
 
   public componentDidUpdate() {
     this.grid.current.recomputeGridSize()
+    this.headerGrid.current.recomputeGridSize()
+  }
+
+  public componentDidMount() {
+    window.addEventListener('resize', this.handleWindowResize)
+  }
+
+  public componentWillUnmount() {
+    window.removeEventListener('resize', this.handleWindowResize)
   }
 
   public render() {
@@ -75,6 +85,7 @@ class LogsTable extends Component<Props, State> {
         <AutoSizer>
           {({width}) => (
             <Grid
+              ref={this.headerGrid}
               height={ROW_HEIGHT}
               rowHeight={ROW_HEIGHT}
               rowCount={1}
@@ -120,6 +131,12 @@ class LogsTable extends Component<Props, State> {
     )
   }
 
+  private handleWindowResize = () => {
+    this.currentMessageWidth = null
+    this.grid.current.recomputeGridSize()
+    this.headerGrid.current.recomputeGridSize()
+  }
+
   private handleHeaderScroll = ({scrollLeft}) => this.setState({scrollLeft})
 
   private handleScrollbarScroll = (e: MouseEvent<JSX.Element>) => {
@@ -127,15 +144,55 @@ class LogsTable extends Component<Props, State> {
     this.handleScroll(target)
   }
 
+  private get widthMapping() {
+    return {
+      timestamp: 160,
+      procid: 80,
+      facility: 120,
+      severity: 22,
+      severity_1: 120,
+    }
+  }
+
+  private get messageWidth() {
+    if (this.currentMessageWidth) {
+      return this.currentMessageWidth
+    }
+
+    const columns = getDeep<string[]>(this.props, 'data.columns', [])
+    const otherWidth = columns.reduce((acc, col) => {
+      if (col === 'message' || col === 'time') {
+        return acc
+      }
+
+      return acc + _.get(this.widthMapping, col, 200)
+    }, 0)
+
+    const calculatedWidth = window.innerWidth - (otherWidth + 180)
+    this.currentMessageWidth = Math.max(100 * CHAR_WIDTH, calculatedWidth)
+
+    return this.currentMessageWidth - CHAR_WIDTH
+  }
+
+  private getColumnWidth = ({index}: {index: number}) => {
+    const column = getDeep<string>(this.props, `data.columns.${index + 1}`, '')
+
+    switch (column) {
+      case 'message':
+        return this.messageWidth
+      default:
+        return _.get(this.widthMapping, column, 200)
+    }
+  }
+
   private calculateMessageHeight = (index: number): number => {
-    const columnIndex = this.props.data.columns.indexOf('message')
-    const height =
-      (Math.floor(
-        this.props.data.values[index][columnIndex].length / ROW_CHAR_LIMIT
-      ) +
-        1) *
-      ROW_HEIGHT
-    return height
+    const columns = getDeep(this.props, 'data.columns', [])
+    const columnIndex = columns.indexOf('message')
+    const value = getDeep(this.props, `data.values.${index}.${columnIndex}`, '')
+    const ROW_CHAR_LIMIT = Math.floor(this.messageWidth / CHAR_WIDTH)
+    const lines = Math.ceil(value.length / ROW_CHAR_LIMIT)
+
+    return Math.max(lines, 1) * (ROW_HEIGHT - 14) + 14
   }
 
   private calculateTotalHeight = (): number => {
@@ -181,27 +238,6 @@ class LogsTable extends Component<Props, State> {
     }
   }
 
-  private getColumnWidth = ({index}: {index: number}) => {
-    const column = getDeep<string>(this.props, `data.columns.${index + 1}`, '')
-
-    switch (column) {
-      case 'message':
-        return ROW_CHAR_LIMIT * CHAR_WIDTH
-      case 'timestamp':
-        return 160
-      case 'procid':
-        return 80
-      case 'facility':
-        return 120
-      case 'severity_1':
-        return 80
-      case 'severity':
-        return 22
-      default:
-        return 200
-    }
-  }
-
   private header(key: string): string {
     return getDeep<string>(
       {