From 2f9d15bad05fe354d344033cafee69d92ddda9c1 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Thu, 12 Jul 2018 15:07:41 -0700 Subject: [PATCH 1/6] truncate log message text --- ui/src/logs/components/LogsTable.tsx | 2 +- ui/src/style/pages/logs-viewer.scss | 11 +++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx index 3cd96dd02a..5b68c4d070 100644 --- a/ui/src/logs/components/LogsTable.tsx +++ b/ui/src/logs/components/LogsTable.tsx @@ -244,6 +244,7 @@ class LogsTable extends Component { autoHide={false} > { const result: any = { width, height, - rowHeight: this.calculateRowHeight, rowCount: this.rowCount(), scrollLeft, scrollTop, diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss index 2f9992f10b..ca679e026a 100644 --- a/ui/src/style/pages/logs-viewer.scss +++ b/ui/src/style/pages/logs-viewer.scss @@ -238,10 +238,6 @@ $logs-viewer-gutter: 60px; margin-right: 10px; } -.message--cell { - word-break: break-all; -} - // Table Cell Styles .logs-viewer--cell { font-size: 12px; @@ -263,6 +259,13 @@ $logs-viewer-gutter: 60px; border-bottom: 2px solid $g5-pepper; } +.message--cell { + overflow: hidden; + white-space: nowrap; + display: block; + text-overflow: ellipsis; +} + // Clickable Cells .logs-viewer--clickable { display: inline-flex; From d93455ef2e798dfdb501a95792f2f33e1f7c1d1a Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Thu, 12 Jul 2018 15:20:13 -0700 Subject: [PATCH 2/6] cleanup unused functions --- ui/src/logs/components/LogsTable.tsx | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx index 5b68c4d070..2c8d82e5b6 100644 --- a/ui/src/logs/components/LogsTable.tsx +++ b/ui/src/logs/components/LogsTable.tsx @@ -12,7 +12,6 @@ import {colorForSeverity} from 'src/logs/utils/colors' import { ROW_HEIGHT, calculateRowCharWidth, - calculateMessageHeight, getColumnFromData, getValueFromData, getValuesFromData, @@ -72,13 +71,13 @@ interface State { visibleColumnsCount: number } -const calculateScrollTop = (currentMessageWidth, data, scrollToRow) => { - const rowCharLimit = calculateRowCharWidth(currentMessageWidth) +const calculateScrollTop = scrollToRow => { + // const rowCharLimit = calculateRowCharWidth(currentMessageWidth) return _.reduce( _.range(0, scrollToRow), - (acc, index) => { - return acc + calculateMessageHeight(index, data, rowCharLimit) + acc => { + return acc + ROW_HEIGHT }, 0 ) @@ -109,7 +108,7 @@ class LogsTable extends Component { } if (scrollToRow) { - scrollTop = calculateScrollTop(currentMessageWidth, data, scrollToRow) + scrollTop = calculateScrollTop(scrollToRow) } const scrollLeft = _.get(state, 'scrollLeft', 0) @@ -448,19 +447,13 @@ class LogsTable extends Component { 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' From 9f479afa67e8d37f7268befc4c715d6ee637bdbe Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Thu, 12 Jul 2018 18:05:04 -0700 Subject: [PATCH 3/6] add ability to view truncated log message --- ui/src/logs/components/LogsTable.tsx | 5 ++ .../expandable_message/ExpandableMessage.scss | 42 +++++++++++++ .../expandable_message/ExpandableMessage.tsx | 59 +++++++++++++++++++ ui/src/style/pages/logs-viewer.scss | 7 --- 4 files changed, 106 insertions(+), 7 deletions(-) create mode 100644 ui/src/logs/components/expandable_message/ExpandableMessage.scss create mode 100644 ui/src/logs/components/expandable_message/ExpandableMessage.tsx diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx index 2c8d82e5b6..8c5748563c 100644 --- a/ui/src/logs/components/LogsTable.tsx +++ b/ui/src/logs/components/LogsTable.tsx @@ -6,6 +6,7 @@ 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' @@ -519,6 +520,10 @@ class LogsTable extends Component { title = formattedValue } + if (column === 'message') { + formattedValue = + } + const highlightRow = rowIndex === this.state.currentRow if (isClickable(column)) { diff --git a/ui/src/logs/components/expandable_message/ExpandableMessage.scss b/ui/src/logs/components/expandable_message/ExpandableMessage.scss new file mode 100644 index 0000000000..a7ca7f7682 --- /dev/null +++ b/ui/src/logs/components/expandable_message/ExpandableMessage.scss @@ -0,0 +1,42 @@ +/* + 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; + } +} + +.collapsed--message { + display: none; +} + +.expanded--message { + display: block; + box-sizing: border-box; + position: absolute; + white-space: pre-wrap; + padding: $ix-marg-c; + width: 100%; + background-color: $g5-pepper; + z-index: 100; + @extend %drop-shadow; + color: $g19-ghost; + border-radius: $radius; + cursor: text; +} \ No newline at end of file diff --git a/ui/src/logs/components/expandable_message/ExpandableMessage.tsx b/ui/src/logs/components/expandable_message/ExpandableMessage.tsx new file mode 100644 index 0000000000..1abced48ee --- /dev/null +++ b/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 { + constructor(props) { + super(props) + this.state = { + expanded: false, + } + } + + public render() { + const {formattedValue} = this.props + + return ( + + <> +
+
{formattedValue}
+
{formattedValue}
+
+ + + ) + } + + 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 diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss index ca679e026a..786c262bf1 100644 --- a/ui/src/style/pages/logs-viewer.scss +++ b/ui/src/style/pages/logs-viewer.scss @@ -259,13 +259,6 @@ $logs-viewer-gutter: 60px; border-bottom: 2px solid $g5-pepper; } -.message--cell { - overflow: hidden; - white-space: nowrap; - display: block; - text-overflow: ellipsis; -} - // Clickable Cells .logs-viewer--clickable { display: inline-flex; From 62b83aa40be0e30a0fbfd7f682dc31967659b3e5 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Thu, 12 Jul 2018 18:20:11 -0700 Subject: [PATCH 4/6] fix issue with flickering row highlighting --- ui/src/logs/components/expandable_message/ExpandableMessage.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/logs/components/expandable_message/ExpandableMessage.scss b/ui/src/logs/components/expandable_message/ExpandableMessage.scss index a7ca7f7682..a47321d7c6 100644 --- a/ui/src/logs/components/expandable_message/ExpandableMessage.scss +++ b/ui/src/logs/components/expandable_message/ExpandableMessage.scss @@ -19,6 +19,7 @@ overflow: hidden; text-overflow: ellipsis; display: block; + pointer-events: none; } } From e6764c6b68e1d4ab21c441b62d37a0637b00a607 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Thu, 12 Jul 2018 18:56:45 -0700 Subject: [PATCH 5/6] set max height for overlay and reposition to align with top of row --- .../logs/components/expandable_message/ExpandableMessage.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/src/logs/components/expandable_message/ExpandableMessage.scss b/ui/src/logs/components/expandable_message/ExpandableMessage.scss index a47321d7c6..a2430912fb 100644 --- a/ui/src/logs/components/expandable_message/ExpandableMessage.scss +++ b/ui/src/logs/components/expandable_message/ExpandableMessage.scss @@ -31,9 +31,12 @@ 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; From b1b13716efefb2e6a552e23a8ae388ca26d254b4 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Fri, 13 Jul 2018 11:50:03 -0700 Subject: [PATCH 6/6] remove commented code --- ui/src/logs/components/LogsTable.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx index 8c5748563c..9d93be67cc 100644 --- a/ui/src/logs/components/LogsTable.tsx +++ b/ui/src/logs/components/LogsTable.tsx @@ -73,8 +73,6 @@ interface State { } const calculateScrollTop = scrollToRow => { - // const rowCharLimit = calculateRowCharWidth(currentMessageWidth) - return _.reduce( _.range(0, scrollToRow), acc => {