Implement RadioButtons in Logs viewer header

ui/src/logs/components/LogViewerHeader.tsx

@@ -1,14 +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 TimeRangeDropdown from 'src/logs/components/TimeRangeDropdown'
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 import {TimeRange} from 'src/types'
+import {LiveUpdating} from 'src/types/logs'
 
 interface SourceItem {
   id: string
@@ -21,7 +23,7 @@ interface Props {
   currentSource: Source | null
   currentNamespaces: Namespace[]
   timeRange: TimeRange
-  liveUpdating: boolean
+  liveUpdating: LiveUpdating
   onChooseSource: (sourceID: string) => void
   onChooseNamespace: (namespace: Namespace) => void
   onChooseTimerange: (timeRange: TimeRange) => void
@@ -85,22 +87,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

@@ -44,6 +44,7 @@ import {
   LogsTableColumn,
   LogConfig,
   TableData,
+  LiveUpdating,
 } from 'src/types/logs'
 import {applyChangesToTableData} from 'src/logs/utils/table'
 
@@ -89,7 +90,7 @@ interface Props {
 
 interface State {
   searchString: string
-  liveUpdating: boolean
+  liveUpdating: LiveUpdating
   isOverlayVisible: boolean
   histogramColors: HistogramColor[]
   hasScrolled: boolean
@@ -117,7 +118,7 @@ class LogsPage extends Component<Props, State> {
 
     this.state = {
       searchString: '',
-      liveUpdating: false,
+      liveUpdating: LiveUpdating.Pause,
       isOverlayVisible: false,
       histogramColors: [],
       hasScrolled: false,
@@ -267,7 +268,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})
     }
   }
 
@@ -281,7 +282,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}) => {
@@ -333,11 +334,9 @@ class LogsPage extends Component<Props, State> {
       timeRange,
     } = this.props
 
-    const {liveUpdating} = this.state
-
     return (
       <LogViewerHeader
-        liveUpdating={liveUpdating && !this.isSpecificTimeRange}
+        liveUpdating={this.liveUpdatingStatus}
         availableSources={sources}
         timeRange={timeRange}
         onChooseSource={this.handleChooseSource}
@@ -352,6 +351,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', [])
   }
@@ -359,8 +368,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()
@@ -369,7 +378,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 => {
@@ -408,11 +417,11 @@ class LogsPage extends Component<Props, State> {
     }
 
     this.props.changeZoomAsync(timeRange)
-    this.setState({liveUpdating: true})
+    this.setState({liveUpdating: LiveUpdating.Play})
   }
 
   private fetchNewDataset() {
-    this.setState({liveUpdating: true})
+    this.setState({liveUpdating: LiveUpdating.Play})
     this.props.executeQueriesAsync()
   }
 

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/types/logs.ts

@@ -78,3 +78,8 @@ export interface ServerEncoding {
   value: string
   name?: string
 }
+
+export enum LiveUpdating {
+  Play = 'icon play',
+  Pause = 'icon pause',
+}