Merge pull request #3570 from influxdata/logs-viewer/polish

Logs Viewer Polish

ui/src/logs/components/LogsTable.tsx

@@ -1,12 +1,12 @@
 import _ from 'lodash'
 import moment from 'moment'
+import classnames from 'classnames'
 import React, {Component, MouseEvent} from 'react'
 import {Grid, AutoSizer} from 'react-virtualized'
 import {getDeep} from 'src/utils/wrappers'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 
-const ROW_HEIGHT = 30
+const ROW_HEIGHT = 26
-const HIGHLIGHT_COLOR = '#555'
 
 interface Props {
   data: {
@@ -57,7 +57,7 @@ class LogsTable extends Component<Props, State> {
     return (
       <div
         className="logs-viewer--table-container"
-        onMouseOut={this.handleMouseOut}
+        onMouseOut={this.handleMouseLeave}
       >
         <AutoSizer>
           {({width}) => (
@@ -149,15 +149,15 @@ class LogsTable extends Component<Props, State> {
       case 'message':
         return 1200
       case 'timestamp':
-        return 200
+        return 160
       case 'procid':
-        return 100
+        return 80
       case 'facility':
-        return 150
+        return 120
       case 'severity_1':
-        return 150
+        return 80
       case 'severity':
-        return 24
+        return 22
       default:
         return 200
     }
@@ -186,7 +186,11 @@ class LogsTable extends Component<Props, State> {
     )
 
     return (
-      <div style={style} key={key}>
+      <div
+        className="logs-viewer--cell logs-viewer--cell-header"
+        style={style}
+        key={key}
+      >
         {this.header(value)}
       </div>
     )
@@ -207,9 +211,6 @@ class LogsTable extends Component<Props, State> {
       case 'timestamp':
         value = moment(+value / 1000000).format('YYYY/MM/DD HH:mm:ss')
         break
-      case 'severity_1':
-        value = this.severityLevel(value)
-        break
       case 'message':
         value = _.replace(value, '\\n', '')
         break
@@ -220,18 +221,13 @@ class LogsTable extends Component<Props, State> {
             title={this.severityLevel(value)}
           />
         )
-    }
+        break
-
+      default:
-    let backgroundColor = ''
+        value = (
-    if (rowIndex === this.state.currentRow && columnIndex > 0) {
-      backgroundColor = HIGHLIGHT_COLOR
-    }
-
-    return (
           <div
-        style={{...style, padding: '5px', backgroundColor}}
+            className="logs-viewer--clickable"
-        key={key}
+            title={`Filter by "${value}"`}
-        onMouseOver={this.handleMouseOver}
+            onMouseOver={this.handleMouseEnter}
             data-index={rowIndex}
           >
             {value}
@@ -239,12 +235,27 @@ class LogsTable extends Component<Props, State> {
         )
     }
 
-  private handleMouseOver = (e: MouseEvent<HTMLElement>) => {
+    const highlightRow = rowIndex === this.state.currentRow && columnIndex >= 0
+
+    return (
+      <div
+        className={classnames('logs-viewer--cell', {highlight: highlightRow})}
+        key={key}
+        style={style}
+        onMouseOver={this.handleMouseEnter}
+        data-index={rowIndex}
+      >
+        {value}
+      </div>
+    )
+  }
+
+  private handleMouseEnter = (e: MouseEvent<HTMLElement>): void => {
     const target = e.target as HTMLElement
     this.setState({currentRow: +target.dataset.index})
   }
 
-  private handleMouseOut = () => {
+  private handleMouseLeave = (): void => {
     this.setState({currentRow: -1})
   }
 }

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

@@ -208,11 +208,13 @@ $logs-viewer-gutter: 60px;
 }
 
 .logs-viewer--dot {
-  width: 14px;
+  width: 12px;
-  height: 14px;
+  height: 12px;
   border-radius: 50%;
   display: inline-block;
   background-color: $g0-obsidian;
+  border: 2px solid $g3-castle;
+  margin-left: 2px;
 
   &.emerg-severity {
     @include gradient-diag-up($c-ruby, $c-fire);
@@ -236,7 +238,7 @@ $logs-viewer-gutter: 60px;
     @include gradient-diag-up($c-star, $c-comet);
   }
   &.debug-severity {
-    @include gradient-diag-up($g5-pepper, $g6-smoke);
+    @include gradient-diag-up($g9-mountain, $g10-wolf);
   }
 }
 
@@ -248,3 +250,43 @@ $logs-viewer-gutter: 60px;
     justify-content: center;
   }
 }
+
+// Table Cell Styles
+.logs-viewer--cell {
+  font-size: 12px;
+  padding: 0 4px;
+  color: $g11-sidewalk;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  font-family: $code-font;
+
+  &.highlight {
+    background-color: $g5-pepper;
+    color: $g20-white;
+  }
+}
+.logs-viewer--cell-header {
+  font-weight: 600;
+  color: $g15-platinum;
+  border-bottom: 2px solid $g5-pepper;
+}
+
+// Clickable Cells
+.logs-viewer--clickable {
+  padding: 1px 3px;
+  border-radius: 3px;
+  @include no-user-select();
+
+  &:hover {
+    background-color: $c-pool;
+    color: $g20-white;
+    cursor: pointer;
+  }
+
+  &:active,
+  &:active:hover {
+    background-color: $c-ocean;
+    color: $c-neutrino;
+  }
+}