Merge pull request #3555 from influxdata/log-viewer/auto-refresh

Adds autorefresh with play/pause

ui/src/logs/components/LogViewerHeader.tsx

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import React, {PureComponent} from 'react'
 import {Source, Namespace} from 'src/types'
+import classnames from 'classnames'
 import Dropdown from 'src/shared/components/Dropdown'
 import TimeRangeDropdown from 'src/logs/components/TimeRangeDropdown'
 
@@ -17,9 +18,11 @@ interface Props {
   currentSource: Source | null
   currentNamespaces: Namespace[]
   timeRange: TimeRange
+  liveUpdating: boolean
   onChooseSource: (sourceID: string) => void
   onChooseNamespace: (namespace: Namespace) => void
   onChooseTimerange: (timeRange: TimeRange) => void
+  onChangeLiveUpdatingStatus: () => void
 }
 
 class LogViewerHeader extends PureComponent<Props> {
@@ -29,7 +32,10 @@ class LogViewerHeader extends PureComponent<Props> {
       <div className="page-header full-width">
         <div className="page-header__container">
           <div className="page-header__left">
-            <h1 className="page-header__title">Log Viewer</h1>
+            {this.status}
+            <h1 className="page-header__title logs-viewer-header-title">
+              Log Viewer
+            </h1>
           </div>
           <div className="page-header__right">
             <Dropdown
@@ -55,6 +61,27 @@ class LogViewerHeader extends PureComponent<Props> {
     )
   }
 
+  private get status(): JSX.Element {
+    const {liveUpdating, onChangeLiveUpdatingStatus} = this.props
+
+    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>
+    )
+  }
+
   private handleChooseTimeRange = (timerange: TimeRange) => {
     this.props.onChooseTimerange(timerange)
   }

ui/src/logs/components/LogsTable.tsx

@@ -1,39 +1,64 @@
 import _ from 'lodash'
 import moment from 'moment'
-import React, {PureComponent, MouseEvent} from 'react'
+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 = 40
+const ROW_HEIGHT = 30
+const HIGHLIGHT_COLOR = '#555'
 
 interface Props {
   data: {
     columns: string[]
     values: string[]
   }
+  isScrolledToTop: boolean
+  onScrollVertical: () => void
+  onScrolledToTop: () => void
 }
 
 interface State {
   scrollLeft: number
   scrollTop: number
+  currentRow: number
 }
 
-class LogsTable extends PureComponent<Props, State> {
+class LogsTable extends Component<Props, State> {
+  public static getDerivedStateFromProps(props, state) {
+    const {scrolledToTop} = props
+
+    let scrollTop = _.get(state, 'scrollTop', 0)
+    if (scrolledToTop) {
+      scrollTop = 0
+    }
+
+    return {
+      scrollTop,
+      scrollLeft: 0,
+      currentRow: -1,
+    }
+  }
+
   constructor(props: Props) {
     super(props)
 
     this.state = {
-      scrollLeft: 0,
       scrollTop: 0,
+      scrollLeft: 0,
+      currentRow: -1,
     }
   }
+
   public render() {
     const rowCount = getDeep(this.props, 'data.values.length', 0)
     const columnCount = getDeep(this.props, 'data.columns.length', 1) - 1
 
     return (
-      <div className="logs-viewer--table-container">
+      <div
+        className="logs-viewer--table-container"
+        onMouseOut={this.handleMouseOut}
+      >
         <AutoSizer>
           {({width}) => (
             <Grid
@@ -72,7 +97,7 @@ class LogsTable extends PureComponent<Props, State> {
                 cellRenderer={this.cellRenderer}
                 columnCount={columnCount}
                 columnWidth={this.getColumnWidth}
-                style={{height: 40 * rowCount}}
+                style={{height: ROW_HEIGHT * rowCount}}
               />
             </FancyScrollbar>
           )}
@@ -91,6 +116,12 @@ class LogsTable extends PureComponent<Props, State> {
   private handleScroll = scrollInfo => {
     const {scrollLeft, scrollTop} = scrollInfo
 
+    if (scrollTop === 0) {
+      this.props.onScrolledToTop()
+    } else if (scrollTop !== this.state.scrollTop) {
+      this.props.onScrollVertical()
+    }
+
     this.setState({scrollLeft, scrollTop})
   }
 
@@ -116,7 +147,7 @@ class LogsTable extends PureComponent<Props, State> {
 
     switch (column) {
       case 'message':
-        return 900
+        return 1200
       case 'timestamp':
         return 200
       case 'procid':
@@ -168,7 +199,9 @@ class LogsTable extends PureComponent<Props, State> {
       ''
     )
 
-    let value = this.props.data.values[rowIndex][columnIndex + 1]
+    let value: string | JSX.Element = this.props.data.values[rowIndex][
+      columnIndex + 1
+    ]
 
     switch (column) {
       case 'timestamp':
@@ -181,22 +214,39 @@ class LogsTable extends PureComponent<Props, State> {
         value = _.replace(value, '\\n', '')
         break
       case 'severity':
-        return (
-          <div style={style} key={key}>
-            <div
-              className={`logs-viewer--dot ${value}-severity`}
-              title={this.severityLevel(value)}
-            />
-          </div>
+        value = (
+          <div
+            className={`logs-viewer--dot ${value}-severity`}
+            title={this.severityLevel(value)}
+          />
         )
     }
 
+    let backgroundColor = ''
+    if (rowIndex === this.state.currentRow && columnIndex > 0) {
+      backgroundColor = HIGHLIGHT_COLOR
+    }
+
     return (
-      <div style={style} key={key}>
+      <div
+        style={{...style, padding: '5px', backgroundColor}}
+        key={key}
+        onMouseOver={this.handleMouseOver}
+        data-index={rowIndex}
+      >
         {value}
       </div>
     )
   }
+
+  private handleMouseOver = (e: MouseEvent<HTMLElement>) => {
+    const target = e.target as HTMLElement
+    this.setState({currentRow: +target.dataset.index})
+  }
+
+  private handleMouseOut = () => {
+    this.setState({currentRow: -1})
+  }
 }
 
 export default LogsTable

ui/src/logs/containers/LogsPage.tsx

@@ -51,6 +51,7 @@ interface Props {
 interface State {
   searchString: string
   filters: Filter[]
+  liveUpdating: boolean
 }
 
 const DUMMY_FILTERS = [
@@ -64,12 +65,15 @@ const DUMMY_FILTERS = [
 ]
 
 class LogsPage extends PureComponent<Props, State> {
+  private interval: NodeJS.Timer
+
   constructor(props: Props) {
     super(props)
 
     this.state = {
       searchString: '',
       filters: DUMMY_FILTERS,
+      liveUpdating: false,
     }
   }
 
@@ -85,10 +89,16 @@ class LogsPage extends PureComponent<Props, State> {
     if (this.props.currentNamespace) {
       this.props.executeQueriesAsync()
     }
+
+    this.startUpdating()
+  }
+
+  public componentWillUnmount() {
+    clearInterval(this.interval)
   }
 
   public render() {
-    const {filters} = this.state
+    const {filters, liveUpdating} = this.state
     const {searchTerm} = this.props
 
     const count = getDeep(this.props, 'tableData.values.length', 0)
@@ -107,12 +117,43 @@ class LogsPage extends PureComponent<Props, State> {
             filters={filters}
             onUpdateFilters={this.handleUpdateFilters}
           />
-          <LogsTable data={this.props.tableData} />
+          <LogsTable
+            data={this.props.tableData}
+            onScrollVertical={this.handleVerticalScroll}
+            onScrolledToTop={this.handleScrollToTop}
+            isScrolledToTop={liveUpdating}
+          />
         </div>
       </div>
     )
   }
 
+  private startUpdating = () => {
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+
+    this.interval = setInterval(this.handleInterval, 10000)
+    this.setState({liveUpdating: true})
+  }
+
+  private handleScrollToTop = () => {
+    if (!this.state.liveUpdating) {
+      this.startUpdating()
+    }
+  }
+
+  private handleVerticalScroll = () => {
+    if (this.state.liveUpdating) {
+      clearInterval(this.interval)
+      this.setState({liveUpdating: false})
+    }
+  }
+
+  private handleInterval = () => {
+    this.props.executeQueriesAsync()
+  }
+
   private get chart(): JSX.Element {
     const {histogramData, timeRange} = this.props
     return (
@@ -133,8 +174,11 @@ class LogsPage extends PureComponent<Props, State> {
       timeRange,
     } = this.props
 
+    const {liveUpdating} = this.state
+
     return (
       <LogViewerHeader
+        liveUpdating={liveUpdating}
         availableSources={sources}
         timeRange={timeRange}
         onChooseSource={this.handleChooseSource}
@@ -143,10 +187,22 @@ class LogsPage extends PureComponent<Props, State> {
         currentSource={currentSource}
         currentNamespaces={currentNamespaces}
         currentNamespace={currentNamespace}
+        onChangeLiveUpdatingStatus={this.handleChangeLiveUpdatingStatus}
       />
     )
   }
 
+  private handleChangeLiveUpdatingStatus = (): void => {
+    const {liveUpdating} = this.state
+
+    if (liveUpdating) {
+      clearInterval(this.interval)
+      this.setState({liveUpdating: false})
+    } else {
+      this.startUpdating()
+    }
+  }
+
   private handleSubmitSearch = (value: string): void => {
     this.props.setSearchTermAsync(value)
   }

ui/src/style/fonts/icomoon.svg

@@ -28,6 +28,7 @@
 <glyph unicode="&#xe911;" glyph-name="text-block" d="M1024 614.4c0-15.36-12.8-25.6-25.6-25.6h-537.6c-12.8 0-25.6 10.24-25.6 25.6v128c0 15.36 12.8 25.6 25.6 25.6h537.6c12.8 0 25.6-10.24 25.6-25.6v-128zM1024 332.8c0-12.8-12.8-25.6-25.6-25.6h-972.8c-15.36 0-25.6 12.8-25.6 25.6v128c0 15.36 10.24 25.6 25.6 25.6h972.8c12.8 0 25.6-10.24 25.6-25.6v-128zM1024 51.2c0-12.8-12.8-25.6-25.6-25.6h-972.8c-15.36 0-25.6 12.8-25.6 25.6v128c0 12.8 10.24 25.6 25.6 25.6h972.8c12.8 0 25.6-12.8 25.6-25.6v-128zM588.8-230.4c0-12.8-12.8-25.6-25.6-25.6h-537.6c-15.36 0-25.6 12.8-25.6 25.6v128c0 12.8 10.24 25.6 25.6 25.6h537.6c12.8 0 25.6-12.8 25.6-25.6v-128z" />
 <glyph unicode="&#xe912;" glyph-name="okta" d="M816.64 642.56v-286.72c69.12 10.24 125.44 71.68 125.44 143.36s-56.32 135.68-125.44 143.36zM650.24 499.2c0-71.68 53.76-133.12 125.44-143.36v286.72c-71.68-7.68-125.44-69.12-125.44-143.36zM1024 499.2c0 125.44-102.4 227.84-227.84 227.84-48.64 0-94.72-15.36-130.56-40.96-58.88 25.6-125.44 40.96-194.56 40.96-258.56 0-471.040-209.92-471.040-471.040s212.48-471.040 471.040-471.040c261.12 0 471.040 212.48 471.040 471.040 0 23.040-2.56 46.080-5.12 66.56 53.76 43.52 87.040 107.52 87.040 176.64zM471.040-133.12c-215.040 0-389.12 174.080-389.12 389.12s176.64 389.12 389.12 389.12c46.080 0 89.6-7.68 130.56-23.040-15.36-23.040-25.6-48.64-30.72-76.8-30.72 10.24-64 17.92-99.84 17.92-168.96 0-307.2-138.24-307.2-307.2s138.24-307.2 307.2-307.2c168.96 0 307.2 138.24 307.2 307.2 0 5.12 0 12.8 0 17.92 5.12 0 12.8 0 17.92 0 23.040 0 43.52 2.56 64 10.24 0-7.68 2.56-17.92 2.56-25.6 0-217.6-176.64-391.68-391.68-391.68zM796.16 314.88c-102.4 0-186.88 84.48-186.88 186.88s84.48 186.88 186.88 186.88 186.88-84.48 186.88-186.88-84.48-186.88-186.88-186.88z" />
 <glyph unicode="&#xe913;" glyph-name="bar-chart" d="M179.2 179.2c0 12.8-10.24 25.6-25.6 25.6h-128c-15.36 0-25.6-12.8-25.6-25.6v-409.6c0-12.8 10.24-25.6 25.6-25.6h128c15.36 0 25.6 12.8 25.6 25.6v409.6zM460.8 742.4c0 15.36-12.8 25.6-25.6 25.6h-128c-15.36 0-25.6-10.24-25.6-25.6v-972.8c0-12.8 10.24-25.6 25.6-25.6h128c12.8 0 25.6 12.8 25.6 25.6v972.8zM742.4 460.8c0 15.36-12.8 25.6-25.6 25.6h-128c-12.8 0-25.6-10.24-25.6-25.6v-691.2c0-12.8 12.8-25.6 25.6-25.6h128c12.8 0 25.6 12.8 25.6 25.6v691.2zM1024-51.2c0 12.8-12.8 25.6-25.6 25.6h-128c-12.8 0-25.6-12.8-25.6-25.6v-179.2c0-12.8 12.8-25.6 25.6-25.6h128c12.8 0 25.6 12.8 25.6 25.6v179.2z" />
+<glyph unicode="&#xe914;" glyph-name="play" d="M783.36 284.16l-458.24 399.36c-17.92 15.36-43.52 2.56-43.52-17.92v-819.2c0-23.040 25.6-33.28 43.52-20.48l458.24 399.36c15.36 17.92 15.36 43.52 0 58.88z" />
 <glyph unicode="&#xe916;" glyph-name="search" d="M993.28-99.84l-202.24 202.24c40.96 64 64 135.68 64 217.6 0 225.28-181.76 407.040-407.040 407.040s-404.48-184.32-404.48-407.040 181.76-407.040 407.040-407.040c79.36 0 153.6 23.040 217.6 64l202.24-202.24c17.92-17.92 40.96-25.6 64-25.6s46.080 7.68 64 25.6c30.72 33.28 30.72 92.16-5.12 125.44zM145.92 320c0 166.4 135.68 302.080 302.080 302.080s304.64-135.68 304.64-304.64c0-79.36-30.72-151.040-79.36-204.8-2.56-2.56-7.68-5.12-10.24-7.68s-5.12-7.68-7.68-10.24c-53.76-48.64-125.44-79.36-204.8-79.36-168.96 0-304.64 135.68-304.64 304.64z" />
 <glyph unicode="&#xe917;" glyph-name="duplicate" d="M921.6 768h-563.2c-56.32 0-102.4-46.080-102.4-102.4v-153.6h-153.6c-56.32 0-102.4-46.080-102.4-102.4v-563.2c0-56.32 46.080-102.4 102.4-102.4h563.2c56.32 0 102.4 46.080 102.4 102.4v153.6h153.6c56.32 0 102.4 46.080 102.4 102.4v563.2c0 56.32-46.080 102.4-102.4 102.4zM691.2-153.6c0-12.8-12.8-25.6-25.6-25.6h-563.2c-12.8 0-25.6 12.8-25.6 25.6v563.2c0 12.8 12.8 25.6 25.6 25.6h153.6v-332.8c0-56.32 46.080-102.4 102.4-102.4h332.8v-153.6z" />
 <glyph unicode="&#xe918;" glyph-name="checkmark" d="M345.6-87.040l-271.36 271.36c-33.28 33.28-38.4 89.6-7.68 128 35.84 38.4 94.72 38.4 130.56 2.56l168.96-168.96c5.12-5.12 12.8-5.12 15.36 0l442.88 442.88c35.84 35.84 94.72 35.84 130.56-2.56 33.28-35.84 28.16-92.16-7.68-128l-542.72-542.72c-15.36-20.48-43.52-20.48-58.88-2.56z" />
@@ -40,7 +41,6 @@
 <glyph unicode="&#xe92c;" glyph-name="triangle" d="M832-153.6h-640c-53.76 0-97.28 20.48-120.32 58.88-20.48 35.84-17.92 84.48 10.24 133.12l320 552.96c28.16 46.080 66.56 74.24 110.080 74.24s81.92-28.16 110.080-74.24l320-552.96c28.16-46.080 30.72-94.72 10.24-133.12-23.040-35.84-66.56-58.88-120.32-58.88zM512 588.8c-15.36 0-30.72-12.8-43.52-35.84l-320-552.96c-12.8-23.040-15.36-43.52-10.24-56.32 7.68-12.8 25.6-20.48 53.76-20.48h640c25.6 0 46.080 7.68 53.76 20.48s5.12 33.28-10.24 56.32l-320 552.96c-12.8 23.040-28.16 35.84-43.52 35.84z" />
 <glyph unicode="&#xe92d;" glyph-name="octagon" d="M686.080-204.8h-350.72c-10.24 0-20.48 5.12-28.16 10.24l-248.32 248.32c-7.68 7.68-10.24 17.92-10.24 28.16v350.72c0 10.24 5.12 20.48 10.24 28.16l248.32 248.32c7.68 7.68 17.92 10.24 28.16 10.24h350.72c10.24 0 20.48-5.12 28.16-10.24l248.32-248.32c7.68-7.68 10.24-17.92 10.24-28.16v-350.72c0-10.24-5.12-20.48-10.24-28.16l-248.32-248.32c-7.68-5.12-17.92-10.24-28.16-10.24zM353.28-128h317.44l225.28 225.28v317.44l-225.28 225.28h-317.44l-225.28-225.28v-317.44l225.28-225.28z" />
 <glyph unicode="&#xe936;" glyph-name="pulse-c" d="M399.36 202.24v104.96c0 7.68 5.12 15.36 10.24 20.48l92.16 53.76c7.68 5.12 15.36 5.12 23.040 0l92.16-53.76c7.68-5.12 10.24-12.8 10.24-20.48v-104.96c0-7.68-5.12-15.36-10.24-20.48l-92.16-53.76c-7.68-5.12-15.36-5.12-23.040 0l-92.16 53.76c-7.68 5.12-10.24 12.8-10.24 20.48zM732.16 186.88v69.12c0 15.36-12.8 28.16-28.16 25.6v0c-12.8-2.56-23.040-12.8-23.040-25.6v-69.12c0-17.92-10.24-33.28-23.040-40.96l-58.88-33.28c-10.24-5.12-15.36-20.48-10.24-30.72v0c5.12-15.36 23.040-20.48 35.84-12.8l58.88 33.28c30.72 15.36 48.64 48.64 48.64 84.48zM460.8 614.4l-128-74.24c-12.8-7.68-17.92-25.6-7.68-38.4v0c7.68-10.24 23.040-12.8 33.28-7.68l128 74.24c7.68 5.12 17.92 7.68 25.6 7.68 10.24 0 17.92-2.56 25.6-7.68l128-74.24c10.24-5.12 25.6-2.56 33.28 7.68v0c10.24 12.8 5.12 30.72-7.68 38.4l-128 74.24c-30.72 17.92-71.68 17.92-102.4 0zM340.48 99.84l58.88-33.28c12.8-7.68 30.72-2.56 35.84 12.8v0c5.12 12.8 0 25.6-10.24 30.72l-58.88 33.28c-15.36 7.68-23.040 25.6-23.040 40.96v69.12c0 12.8-10.24 23.040-23.040 25.6v0c-15.36 2.56-28.16-10.24-28.16-25.6v-69.12c0-33.28 17.92-66.56 48.64-84.48zM463.36 481.28l-58.88-33.28c-12.8-7.68-17.92-25.6-7.68-38.4v0c7.68-10.24 23.040-12.8 33.28-7.68l71.68 40.96c2.56 2.56 7.68 2.56 12.8 2.56s7.68 0 12.8-2.56l71.68-40.96c10.24-5.12 25.6-2.56 33.28 7.68v0c10.24 12.8 5.12 30.72-7.68 38.4l-58.88 33.28c-35.84 17.92-71.68 17.92-102.4 0zM286.72 588.8l163.84 94.72c38.4 23.040 87.040 23.040 125.44 0l163.84-94.72c10.24-5.12 25.6-2.56 33.28 7.68v0c10.24 12.8 5.12 30.72-7.68 38.4l-176.64 102.4c-46.080 28.16-104.96 28.16-151.040 0l-176.64-102.4c-12.8-7.68-17.92-25.6-7.68-38.4v0c7.68-10.24 23.040-12.8 33.28-7.68zM913.92 284.16v-186.88c0-43.52-23.040-87.040-61.44-107.52l-163.84-94.72c-10.24-5.12-15.36-20.48-10.24-30.72v0c5.12-15.36 23.040-20.48 35.84-12.8l163.84 94.72c53.76 30.72 87.040 89.6 87.040 153.6v186.88c0 15.36-12.8 28.16-28.16 25.6v0c-12.8-5.12-23.040-15.36-23.040-28.16zM240.64 25.6l115.2-66.56c12.8-7.68 30.72-2.56 35.84 12.8v0c5.12 12.8 0 25.6-10.24 30.72l-115.2 66.56c-23.040 12.8-38.4 38.4-38.4 66.56v133.12c0 12.8-10.24 23.040-23.040 25.6v0c-15.36 2.56-28.16-10.24-28.16-25.6v-133.12c0-46.080 25.6-87.040 64-110.080zM335.36-104.96l-163.84 94.72c-38.4 23.040-61.44 64-61.44 107.52v186.88c0 12.8-10.24 23.040-23.040 25.6v0c-15.36 2.56-28.16-10.24-28.16-25.6v-186.88c0-64 33.28-120.32 87.040-153.6l163.84-94.72c12.8-7.68 30.72-2.56 35.84 12.8v0c5.12 12.8 2.56 25.6-10.24 33.28zM847.36 135.68v133.12c0 15.36-12.8 28.16-28.16 25.6v0c-12.8-2.56-23.040-12.8-23.040-25.6v-133.12c0-28.16-15.36-53.76-38.4-66.56l-115.2-66.56c-10.24-5.12-15.36-20.48-10.24-30.72v0c5.12-15.36 23.040-20.48 35.84-12.8l115.2 66.56c38.4 23.040 64 64 64 110.080z" />
-<glyph unicode="&#xe939;" glyph-name="brush" d="M819.2 332.8v99.84c0 15.36-12.8 28.16-28.16 28.16h-133.12c-23.040 0-43.52 20.48-43.52 43.52v161.28c0 56.32-46.080 102.4-102.4 102.4s-102.4-46.080-102.4-102.4v-161.28c0-23.040-20.48-43.52-43.52-43.52h-133.12c-15.36 0-28.16-12.8-28.16-28.16v-99.84h614.4zM512 716.8c28.16 0 51.2-23.040 51.2-51.2s-23.040-51.2-51.2-51.2-51.2 23.040-51.2 51.2 23.040 51.2 51.2 51.2zM204.8 281.6v-537.6l76.8 76.8 76.8-76.8 76.8 76.8 76.8-76.8 76.8 76.8 76.8-76.8 76.8 76.8 76.8-76.8v537.6z" />
 <glyph unicode="&#xe93e;" glyph-name="square" d="M819.2-166.4h-614.4c-64 0-115.2 51.2-115.2 115.2v614.4c0 64 51.2 115.2 115.2 115.2h614.4c64 0 115.2-51.2 115.2-115.2v-614.4c0-64-51.2-115.2-115.2-115.2zM204.8 601.6c-20.48 0-38.4-17.92-38.4-38.4v-614.4c0-20.48 17.92-38.4 38.4-38.4h614.4c20.48 0 38.4 17.92 38.4 38.4v614.4c0 20.48-17.92 38.4-38.4 38.4h-614.4z" />
 <glyph unicode="&#xe940;" glyph-name="circle" d="M512-140.8c-217.6 0-396.8 179.2-396.8 396.8s179.2 396.8 396.8 396.8 396.8-179.2 396.8-396.8-179.2-396.8-396.8-396.8zM512 576c-176.64 0-320-143.36-320-320s143.36-320 320-320 320 143.36 320 320-143.36 320-320 320z" />
 <glyph unicode="&#xe942;" glyph-name="expand-b" d="M947.2 665.6h-870.4c-43.52 0-76.8-33.28-76.8-76.8v-665.6c0-43.52 33.28-76.8 76.8-76.8h870.4c43.52 0 76.8 33.28 76.8 76.8v665.6c0 43.52-33.28 76.8-76.8 76.8zM307.2-64c0-7.68-5.12-12.8-12.8-12.8h-192c-15.36 0-25.6 10.24-25.6 25.6v192c0 7.68 5.12 12.8 12.8 12.8h51.2c7.68 0 12.8-5.12 12.8-12.8v-140.8h140.8c7.68 0 12.8-5.12 12.8-12.8v-51.2zM307.2 524.8c0-7.68-5.12-12.8-12.8-12.8h-140.8v-140.8c0-7.68-5.12-12.8-12.8-12.8h-51.2c-7.68 0-12.8 5.12-12.8 12.8v192c0 15.36 10.24 25.6 25.6 25.6h192c7.68 0 12.8-5.12 12.8-12.8v-51.2zM947.2-51.2c0-15.36-10.24-25.6-25.6-25.6h-192c-7.68 0-12.8 5.12-12.8 12.8v51.2c0 7.68 5.12 12.8 12.8 12.8h140.8v140.8c0 7.68 5.12 12.8 12.8 12.8h51.2c7.68 0 12.8-5.12 12.8-12.8v-192zM947.2 371.2c0-7.68-5.12-12.8-12.8-12.8h-51.2c-7.68 0-12.8 5.12-12.8 12.8v140.8h-140.8c-7.68 0-12.8 5.12-12.8 12.8v51.2c0 7.68 5.12 12.8 12.8 12.8h192c15.36 0 25.6-10.24 25.6-25.6v-192z" />

ui/src/style/fonts/icon-font.scss

@@ -32,7 +32,6 @@
 
   &.authzero:before {content: "\e951";}
   &.bar-chart:before {content: "\e913";}
-  &.brush:before {content: "\e939";}
   &.caret-down:before {content: "\e902";}
   &.caret-left:before {content: "\e900";}
   &.caret-right:before {content: "\e903";}
@@ -65,6 +64,7 @@
   &.octagon:before {content: "\e92d";}
   &.okta:before {content: "\e912";}
   &.pause:before {content: "\e94a";}
+  &.play:before {content: "\e914";}
   &.plus:before {content: "\e90a";}
   &.pulse-c:before {content: "\e936";}
   &.refresh:before {content: "\e949";}

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

@@ -15,6 +15,10 @@ $logs-viewer-gutter: 60px;
   flex-wrap: nowrap;
 }
 
+.logs-viewer-header-title {
+  margin-left: 10px;
+}
+
 .logs-viewer--graph-container {
   padding: 22px ($logs-viewer-gutter - 16px) 10px ($logs-viewer-gutter - 16px);
   height: $logs-viewer-graph-height;
@@ -234,4 +238,13 @@ $logs-viewer-gutter: 60px;
   &.debug-severity {
     @include gradient-diag-up($g5-pepper, $g6-smoke);
   }
+}
+
+// Play & Pause Toggle in Header
+.nav.nav-tablist.nav-tablist-sm.logs-viewer--mode-toggle {
+  > li {
+    padding: 0;
+    width: 26px;
+    justify-content: center;
+  }
 }