From 862cc45adec5a37d4f4af75ad378ef5ca4470ad4 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 12 Jul 2018 13:40:21 -0700 Subject: [PATCH 1/2] Allow icons to be used in radio buttons --- .../components/radio_buttons/RadioButtons.tsx | 14 ++++++++++++-- ui/src/style/theme/_radio-buttons.scss | 5 +++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/ui/src/reusable_ui/components/radio_buttons/RadioButtons.tsx b/ui/src/reusable_ui/components/radio_buttons/RadioButtons.tsx index 2a0b43e9e5..d178f70e43 100644 --- a/ui/src/reusable_ui/components/radio_buttons/RadioButtons.tsx +++ b/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 { className={this.buttonClassName(button)} onClick={this.handleButtonClick(button)} > - {button} + {this.buttonText(button)} )) } + private buttonText = (button): JSX.Element => { + if (_.startsWith(button, 'icon')) { + return + } + + 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, } ) } diff --git a/ui/src/style/theme/_radio-buttons.scss b/ui/src/style/theme/_radio-buttons.scss index 310d9d3ba2..7d1276fc6f 100644 --- a/ui/src/style/theme/_radio-buttons.scss +++ b/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 { From e853caf3f937c3586d9e6d0e122a403be6de7fdc Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 12 Jul 2018 14:08:54 -0700 Subject: [PATCH 2/2] Implement RadioButtons in Logs viewer header --- ui/src/logs/components/LogViewerHeader.tsx | 29 +++++++++---------- ui/src/logs/containers/LogsPage.tsx | 33 ++++++++++++++-------- ui/src/style/pages/logs-viewer.scss | 8 +----- ui/src/types/logs.ts | 5 ++++ 4 files changed, 40 insertions(+), 35 deletions(-) diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx index 18d3d5fd8e..9a2f8cb313 100644 --- a/ui/src/logs/components/LogViewerHeader.tsx +++ b/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 { private get status(): JSX.Element { const {liveUpdating, onChangeLiveUpdatingStatus} = this.props + const buttons = ['icon play', 'icon pause'] return ( -
    -
  • - -
    • -
  • - -
    • -
+ ) } diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx index 09b72d7ccd..cb3e8c0277 100644 --- a/ui/src/logs/containers/LogsPage.tsx +++ b/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 { this.state = { searchString: '', - liveUpdating: false, + liveUpdating: LiveUpdating.Pause, isOverlayVisible: false, histogramColors: [], hasScrolled: false, @@ -267,7 +268,7 @@ class LogsPage extends Component { 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 { 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 { timeRange, } = this.props - const {liveUpdating} = this.state - return ( { ) } + 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 { 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 { 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 { } 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() } diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss index 2f9992f10b..58adea4ea7 100644 --- a/ui/src/style/pages/logs-viewer.scss +++ b/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; } diff --git a/ui/src/types/logs.ts b/ui/src/types/logs.ts index f9ba17a0a3..5b2126b652 100644 --- a/ui/src/types/logs.ts +++ b/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', +}