Merge pull request #3908 from influxdata/logs-table-formatting

Truncate log messages & display overlay when clicked

ui/src/logs/components/LogsTable.tsx

@@ -6,13 +6,13 @@ import {Grid, AutoSizer, InfiniteLoader} from 'react-virtualized'
 import {color} from 'd3-color'
 
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+import ExpandableMessage from 'src/logs/components/expandable_message/ExpandableMessage'
 import {getDeep} from 'src/utils/wrappers'
 
 import {colorForSeverity} from 'src/logs/utils/colors'
 import {
   ROW_HEIGHT,
   calculateRowCharWidth,
-  calculateMessageHeight,
   getColumnFromData,
   getValueFromData,
   getValuesFromData,
@@ -73,13 +73,11 @@ interface State {
   visibleColumnsCount: number
 }
 
-const calculateScrollTop = (currentMessageWidth, data, scrollToRow) => {
-  const rowCharLimit = calculateRowCharWidth(currentMessageWidth)
-
+const calculateScrollTop = scrollToRow => {
   return _.reduce(
     _.range(0, scrollToRow),
-    (acc, index) => {
-      return acc + calculateMessageHeight(index, data, rowCharLimit)
+    acc => {
+      return acc + ROW_HEIGHT
     },
     0
   )
@@ -110,7 +108,7 @@ class LogsTable extends Component<Props, State> {
     }
 
     if (scrollToRow) {
-      scrollTop = calculateScrollTop(currentMessageWidth, data, scrollToRow)
+      scrollTop = calculateScrollTop(scrollToRow)
     }
 
     const scrollLeft = _.get(state, 'scrollLeft', 0)
@@ -245,6 +243,7 @@ class LogsTable extends Component<Props, State> {
                   autoHide={false}
                 >
                   <Grid
+                    rowHeight={ROW_HEIGHT}
                     {...this.gridProperties(
                       width,
                       height,
@@ -278,7 +277,6 @@ class LogsTable extends Component<Props, State> {
     const result: any = {
       width,
       height,
-      rowHeight: this.calculateRowHeight,
       rowCount: this.rowCount(),
       scrollLeft,
       scrollTop,
@@ -449,19 +447,13 @@ class LogsTable extends Component<Props, State> {
 
     return _.reduce(
       data,
-      (acc, __, index) => {
-        return (
-          acc +
-          calculateMessageHeight(index, this.props.data, this.rowCharLimit)
-        )
+      (acc, __) => {
+        return acc + ROW_HEIGHT
       },
       0
     )
   }
 
-  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'
@@ -527,6 +519,10 @@ class LogsTable extends Component<Props, State> {
       title = formattedValue
     }
 
+    if (column === 'message') {
+      formattedValue = <ExpandableMessage formattedValue={formattedValue} />
+    }
+
     const highlightRow = rowIndex === this.state.currentRow
 
     if (column === 'timestamp') {

ui/src/logs/components/expandable_message/ExpandableMessage.scss

@@ -0,0 +1,46 @@
+/*
+   ExpandableMessage
+   -----------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules/influx-colors';
+@import 'src/style/modules/mixins';
+@import 'src/style/modules/variables';
+
+.expandable--message {
+  display: flex;
+  min-height: 100%;
+  min-width: 100%;
+  align-items: center;
+  cursor: pointer;
+  
+  .expandable--text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    pointer-events: none;
+  }
+}
+
+.collapsed--message {
+  display: none;
+}
+
+.expanded--message { 
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  white-space: pre-wrap;
+  padding: $ix-marg-c;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: $g5-pepper;
+  z-index: 100;
+  @extend %drop-shadow;
+  color: $g19-ghost;
+  border-radius: $radius;
+  cursor: text;
+}

ui/src/logs/components/expandable_message/ExpandableMessage.tsx

@@ -0,0 +1,59 @@
+import React, {Component} from 'react'
+
+import './ExpandableMessage.scss'
+import {ClickOutside} from 'src/shared/components/ClickOutside'
+
+interface State {
+  expanded: boolean
+}
+
+interface Props {
+  formattedValue: string | JSX.Element
+}
+
+export class ExpandableMessage extends Component<Props, State> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      expanded: false,
+    }
+  }
+
+  public render() {
+    const {formattedValue} = this.props
+
+    return (
+      <ClickOutside onClickOutside={this.collapse}>
+        <>
+          <div onClick={this.expand} className="expandable--message">
+            <div className="expandable--text">{formattedValue}</div>
+            <div className={this.isExpanded}>{formattedValue}</div>
+          </div>
+        </>
+      </ClickOutside>
+    )
+  }
+
+  private get isExpanded() {
+    const {expanded} = this.state
+    if (expanded) {
+      return 'expanded--message'
+    } else {
+      return 'collapsed--message'
+    }
+  }
+
+  private expand = () => {
+    this.setState({
+      expanded: true,
+    })
+  }
+
+  private collapse = () => {
+    this.setState({
+      expanded: false,
+    })
+  }
+}
+
+export default ExpandableMessage

ui/src/style/pages/logs-viewer.scss

@@ -232,10 +232,6 @@ $logs-viewer-gutter: 60px;
   margin-right: 10px;
 }
 
-.message--cell {
-  word-break: break-all;
-}
-
 // Table Cell Styles
 .logs-viewer--cell {
   font-size: 12px;