Merge pull request #3901 from influxdata/improve-clarity-play-button

Improve Clarity of Log Viewer Play/Pause Toggle

ui/src/logs/components/LogViewerHeader.tsx

@@ -1,15 +1,16 @@
 import _ from 'lodash'
 import React, {PureComponent} from 'react'
 import {Source, Namespace} from 'src/types'
-import classnames from 'classnames'
 
+import RadioButtons from 'src/reusable_ui/components/radio_buttons/RadioButtons'
+import {ButtonShape, ComponentColor} from 'src/reusable_ui/types'
 import Dropdown from 'src/shared/components/Dropdown'
 import PageHeader from 'src/reusable_ui/components/page_layout/PageHeader'
 import PageHeaderTitle from 'src/reusable_ui/components/page_layout/PageHeaderTitle'
 import TimeMarkerDropdown from 'src/logs/components/TimeMarkerDropdown'
 import TimeWindowDropdown from 'src/logs/components/TimeWindowDropdown'
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
-import {TimeRange, TimeWindow, TimeMarker} from 'src/types/logs'
+import {TimeRange, TimeWindow, TimeMarker, LiveUpdating} from 'src/types/logs'
 
 interface SourceItem {
   id: string
@@ -21,7 +22,7 @@ interface Props {
   availableSources: Source[]
   currentSource: Source | null
   currentNamespaces: Namespace[]
-  liveUpdating: boolean
+  liveUpdating: LiveUpdating
   onChooseSource: (sourceID: string) => void
   onChooseNamespace: (namespace: Namespace) => void
   onChangeLiveUpdatingStatus: () => void
@@ -100,22 +101,17 @@ class LogViewerHeader extends PureComponent<Props> {
 
   private get status(): JSX.Element {
     const {liveUpdating, onChangeLiveUpdatingStatus} = this.props
+    const buttons = ['icon play', 'icon pause']
 
     return (
-      <ul className="nav nav-tablist nav-tablist-sm logs-viewer--mode-toggle">
-        <li
-          className={classnames({active: liveUpdating})}
-          onClick={onChangeLiveUpdatingStatus}
-        >
-          <span className="icon play" />
-        </li>
-        <li
-          className={classnames({active: !liveUpdating})}
-          onClick={onChangeLiveUpdatingStatus}
-        >
-          <span className="icon pause" />
-        </li>
-      </ul>
+      <RadioButtons
+        customClass="logs-viewer--mode-toggle"
+        shape={ButtonShape.Square}
+        color={ComponentColor.Primary}
+        buttons={buttons}
+        onChange={onChangeLiveUpdatingStatus}
+        activeButton={liveUpdating}
+      />
     )
   }
 

ui/src/logs/containers/LogsPage.tsx

@@ -47,6 +47,7 @@ import {
   LogsTableColumn,
   LogConfig,
   TableData,
+  LiveUpdating,
   TimeRange,
   TimeWindow,
   TimeMarker,
@@ -98,7 +99,7 @@ interface Props {
 
 interface State {
   searchString: string
-  liveUpdating: boolean
+  liveUpdating: LiveUpdating
   isOverlayVisible: boolean
   histogramColors: HistogramColor[]
   hasScrolled: boolean
@@ -126,7 +127,7 @@ class LogsPage extends Component<Props, State> {
 
     this.state = {
       searchString: '',
-      liveUpdating: false,
+      liveUpdating: LiveUpdating.Pause,
       isOverlayVisible: false,
       histogramColors: [],
       hasScrolled: false,
@@ -276,7 +277,7 @@ class LogsPage extends Component<Props, State> {
 
     if (!this.isSpecificTimeRange) {
       this.interval = setInterval(this.handleInterval, 10000)
-      this.setState({liveUpdating: true})
+      this.setState({liveUpdating: LiveUpdating.Play})
     }
   }
 
@@ -290,7 +291,7 @@ class LogsPage extends Component<Props, State> {
     if (this.state.liveUpdating) {
       clearInterval(this.interval)
     }
-    this.setState({liveUpdating: false, hasScrolled: true})
+    this.setState({liveUpdating: LiveUpdating.Pause, hasScrolled: true})
   }
 
   private handleTagSelection = (selection: {tag: string; key: string}) => {
@@ -342,14 +343,12 @@ class LogsPage extends Component<Props, State> {
       timeRange,
     } = this.props
 
-    const {liveUpdating} = this.state
-
     return (
       <LogViewerHeader
         timeRange={timeRange}
         onSetTimeMarker={this.handleSetTimeMarker}
         onSetTimeWindow={this.handleSetTimeWindow}
-        liveUpdating={liveUpdating && !this.isSpecificTimeRange}
+        liveUpdating={this.liveUpdatingStatus}
         availableSources={sources}
         onChooseSource={this.handleChooseSource}
         onChooseNamespace={this.handleChooseNamespace}
@@ -362,6 +361,16 @@ class LogsPage extends Component<Props, State> {
     )
   }
 
+  private get liveUpdatingStatus(): LiveUpdating {
+    const {liveUpdating} = this.state
+
+    if (liveUpdating === LiveUpdating.Play && !this.isSpecificTimeRange) {
+      return LiveUpdating.Play
+    }
+
+    return LiveUpdating.Pause
+  }
+
   private get severityLevelColors(): SeverityLevelColor[] {
     return _.get(this.props.logConfig, 'severityLevelColors', [])
   }
@@ -369,8 +378,8 @@ class LogsPage extends Component<Props, State> {
   private handleChangeLiveUpdatingStatus = (): void => {
     const {liveUpdating} = this.state
 
-    if (liveUpdating) {
-      this.setState({liveUpdating: false})
+    if (liveUpdating === LiveUpdating.Play) {
+      this.setState({liveUpdating: LiveUpdating.Pause})
       clearInterval(this.interval)
     } else {
       this.startUpdating()
@@ -379,7 +388,7 @@ class LogsPage extends Component<Props, State> {
 
   private handleSubmitSearch = (value: string): void => {
     this.props.setSearchTermAsync(value)
-    this.setState({liveUpdating: true})
+    this.setState({liveUpdating: LiveUpdating.Play})
   }
 
   private handleFilterDelete = (id: string): void => {
@@ -445,7 +454,7 @@ class LogsPage extends Component<Props, State> {
   }
 
   private fetchNewDataset() {
-    this.setState({liveUpdating: true})
+    this.setState({liveUpdating: LiveUpdating.Play})
     this.props.executeQueriesAsync()
   }
 

ui/src/reusable_ui/components/radio_buttons/RadioButtons.tsx

@@ -5,6 +5,7 @@ import _ from 'lodash'
 import {ComponentColor, ComponentSize, ButtonShape} from 'src/reusable_ui/types'
 
 interface Props {
+  customClass?: string
   color?: ComponentColor
   size?: ComponentSize
   shape?: ButtonShape
@@ -35,19 +36,28 @@ class RadioButtons extends Component<Props> {
         className={this.buttonClassName(button)}
         onClick={this.handleButtonClick(button)}
       >
-        {button}
+        {this.buttonText(button)}
       </div>
     ))
   }
 
+  private buttonText = (button): JSX.Element => {
+    if (_.startsWith(button, 'icon')) {
+      return <span className={button} />
+    }
+
+    return <>{button}</>
+  }
+
   private get containerClassName(): string {
-    const {color, size, shape} = this.props
+    const {color, size, shape, customClass} = this.props
 
     return classnames(
       `radio-buttons radio-buttons-${color} radio-buttons-${size}`,
       {
         'radio-buttons-square': shape === ButtonShape.Square,
         'radio-buttons-stretch': shape === ButtonShape.StretchToFit,
+        [customClass]: customClass,
       }
     )
   }

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

@@ -228,13 +228,7 @@ $logs-viewer-gutter: 60px;
 }
 
 // Play & Pause Toggle in Header
-.nav.nav-tablist.nav-tablist-sm.logs-viewer--mode-toggle {
-  > li {
-    padding: 0;
-    width: 26px;
-    justify-content: center;
-  }
-  
+.radio-buttons.logs-viewer--mode-toggle {
   margin-right: 10px;
 }
 

ui/src/style/theme/_radio-buttons.scss

@@ -130,6 +130,11 @@
   &.radio-buttons-lg .radio-button {
     width: $form-lg-height - 4px;
   }
+
+  .radio-button {
+    padding: 0;
+    text-align: center;
+  }
 }
 
 .radio-buttons.radio-buttons-stretch {

ui/src/types/logs.ts

@@ -80,6 +80,10 @@ export interface ServerEncoding {
   name?: string
 }
 
+export enum LiveUpdating {
+  Play = 'icon play',
+  Pause = 'icon pause',
+}
 export interface TimeRange {
   upper?: string
   lower: string