From 9faf5b97b0bb1234f7e3e8dd53c58982c8239aa0 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 3 Jul 2018 14:14:01 -0700
Subject: [PATCH] Modify column widths when message is not visible

---
 ui/src/logs/components/LogsTable.tsx | 35 ++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx
index c76c85d6a7..ca7450b391 100644
--- a/ui/src/logs/components/LogsTable.tsx
+++ b/ui/src/logs/components/LogsTable.tsx
@@ -47,7 +47,9 @@ interface State {
   scrollTop: number
   currentRow: number
   currentMessageWidth: number
+  isMessageVisible: boolean
   lastQueryTime: number
+  visibleColumnsCount: number
 }
 
 class LogsTable extends Component<Props, State> {
@@ -63,6 +65,14 @@ class LogsTable extends Component<Props, State> {
 
     const scrollLeft = _.get(state, 'scrollLeft', 0)
 
+    let isMessageVisible: boolean = false
+    const visibleColumnsCount = props.tableColumns.filter(c => {
+      if (c.internalName === 'message') {
+        isMessageVisible = c.visible
+      }
+      return c.visible
+    }).length
+
     return {
       ...state,
       isQuerying: false,
@@ -75,6 +85,8 @@ class LogsTable extends Component<Props, State> {
         props.tableColumns,
         props.severityFormat
       ),
+      isMessageVisible,
+      visibleColumnsCount,
     }
   }
 
@@ -87,12 +99,22 @@ class LogsTable extends Component<Props, State> {
     this.grid = null
     this.headerGrid = React.createRef()
 
+    let isMessageVisible: boolean = false
+    const visibleColumnsCount = props.tableColumns.filter(c => {
+      if (c.internalName === 'message') {
+        isMessageVisible = c.visible
+      }
+      return c.visible
+    }).length
+
     this.state = {
       scrollTop: 0,
       scrollLeft: 0,
       currentRow: -1,
       currentMessageWidth: 0,
       lastQueryTime: null,
+      isMessageVisible,
+      visibleColumnsCount,
     }
   }
 
@@ -290,7 +312,11 @@ class LogsTable extends Component<Props, State> {
   private getColumnWidth = ({index}: {index: number}): number => {
     const {severityFormat} = this.props
     const column = getColumnFromData(this.props.data, index)
-    const {currentMessageWidth} = this.state
+    const {
+      currentMessageWidth,
+      isMessageVisible,
+      visibleColumnsCount,
+    } = this.state
 
     switch (column) {
       case 'message':
@@ -300,7 +326,12 @@ class LogsTable extends Component<Props, State> {
         if (column === 'severity') {
           columnKey = `${column}_${severityFormat}`
         }
-        return getColumnWidth(columnKey)
+        const width = getColumnWidth(columnKey)
+        if (!isMessageVisible) {
+          const inc = currentMessageWidth / visibleColumnsCount
+          return width + inc
+        }
+        return width
     }
   }