Merge pull request #3855 from influxdata/logs-page-polish

Logs page polish

ui/src/logs/components/LogsFilter.tsx

@@ -32,13 +32,13 @@ class LogsFilter extends PureComponent<Props, State> {
 
     return (
       <ClickOutside onClickOutside={this.handleClickOutside}>
-        <li className={this.className} onClick={this.handleStartEdit}>
+        <div className={this.className} onClick={this.handleStartEdit}>
           {editing ? this.renderEditor : this.label}
           <div
             className="logs-viewer--filter-remove"
             onClick={this.handleDelete}
           />
-        </li>
+        </div>
       </ClickOutside>
     )
   }
@@ -123,10 +123,14 @@ class LogsFilter extends PureComponent<Props, State> {
     const {operator, value, editing} = this.state
     const {filter} = this.props
 
-    if (!editing || (filter.operator === operator && filter.value === value)) {
+    if (!editing) {
       return
     }
 
+    if (filter.operator === operator && filter.value === value) {
+      return this.setState({editing: false})
+    }
+
     let state = {}
     if (['!=', '==', '=~'].includes(operator) && value !== '') {
       this.props.onChangeFilter(id, operator, value)

ui/src/logs/components/LogsFilterBar.tsx

@@ -18,7 +18,7 @@ class LogsFilters extends PureComponent<Props> {
     return (
       <div className="logs-viewer--filter-bar">
         <QueryResults count={numResults} queryCount={queryCount} />
-        <ul className="logs-viewer--filters">{this.renderFilters}</ul>
+        <div className="logs-viewer--filters">{this.renderFilters}</div>
       </div>
     )
   }

ui/src/logs/components/LogsTable.tsx

@@ -398,7 +398,7 @@ class LogsTable extends Component<Props, State> {
   private getSeverityDotText(text: string): JSX.Element {
     const {severityFormat} = this.props
     if (severityFormat === SeverityFormatOptions.dotText) {
-      return <span style={{padding: '5px'}}>{text}</span>
+      return <span className="logs-viewer--severity-text">{text}</span>
     }
   }
 
@@ -422,7 +422,7 @@ class LogsTable extends Component<Props, State> {
           <div
             className={`logs-viewer--dot ${value}-severity`}
             title={value}
-            onMouseOver={this.handleMouseEnter}
+            onMouseOver={this.handleMouseOver}
             data-index={rowIndex}
             style={this.severityDotStyle(value)}
           />
@@ -443,17 +443,17 @@ class LogsTable extends Component<Props, State> {
             highlight: highlightRow,
           })}
           title={`Filter by '${title}'`}
-          style={{...style, padding: '5px'}}
           key={key}
+          style={style}
           data-index={rowIndex}
-          onMouseOver={this.handleMouseEnter}
+          onMouseOver={this.handleMouseOver}
         >
           <div
             data-tag-key={column}
             data-tag-value={value}
             onClick={this.handleTagClick}
             data-index={rowIndex}
-            onMouseOver={this.handleMouseEnter}
+            onMouseOver={this.handleMouseOver}
             className="logs-viewer--clickable"
           >
             {formattedValue}
@@ -469,7 +469,7 @@ class LogsTable extends Component<Props, State> {
         })}
         key={key}
         style={style}
-        onMouseOver={this.handleMouseEnter}
+        onMouseOver={this.handleMouseOver}
         data-index={rowIndex}
       >
         {formattedValue}
@@ -488,7 +488,7 @@ class LogsTable extends Component<Props, State> {
     }
   }
 
-  private handleMouseEnter = (e: MouseEvent<HTMLElement>): void => {
+  private handleMouseOver = (e: MouseEvent<HTMLElement>): void => {
     const target = e.target as HTMLElement
     this.setState({currentRow: +target.dataset.index})
   }

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

@@ -85,6 +85,7 @@ $logs-viewer-gutter: 60px;
   font-weight: 600;
   color: $g9-mountain;
   transition: color 0.25s ease;
+  min-width: 180px;
 
   strong {
     color: $g15-platinum;
@@ -119,8 +120,6 @@ $logs-viewer-gutter: 60px;
 
 .logs-viewer--filters {
   flex: 1 0 0;
-  margin: 0;
-  padding: 0;
   display: flex;
   align-items: center;
 }
@@ -130,7 +129,6 @@ $logs-viewer-gutter: 60px;
   font-size: 12px;
   display: flex;
   align-items: center;
-  list-style: none;
   padding: 0 2px 0 8px;
   height: 26px;
   border-radius: 4px;
@@ -138,7 +136,7 @@ $logs-viewer-gutter: 60px;
   color: $g13-mist;
   font-weight: 500;
   font-family: $code-font;
-  margin: 2px;
+  margin: 1px;
 
   &.active,
   &:hover {
@@ -224,6 +222,10 @@ $logs-viewer-gutter: 60px;
   border: 2px solid $g3-castle;
   margin-left: 2px;
 }
+.logs-viewer--severity-text {
+  padding: 2px;
+  padding-left: 5px;
+}
 
 // Play & Pause Toggle in Header
 .nav.nav-tablist.nav-tablist-sm.logs-viewer--mode-toggle {
@@ -263,6 +265,8 @@ $logs-viewer-gutter: 60px;
 
 // Clickable Cells
 .logs-viewer--clickable {
+  display: inline-flex;
+  align-items: center;
   padding: 1px 3px;
   border-radius: 3px;
   @include no-user-select();