From a710977634a524cc0e24d687477c839b9eb63788 Mon Sep 17 00:00:00 2001 From: Alex Paxton Date: Thu, 9 Aug 2018 12:01:50 -0700 Subject: [PATCH] Refactor AutoRefresh Dropdown (#4152) * Enforce dropdown container heights Had a weird tiny gap * Shrink form element sizing To account for the 2px border now on buttons * Convert component to typescript and refactor * Update import path to new component location * Fine tune dropdown styles * Remove commented out line * Organize styles --- .../dashboards/components/DashboardHeader.tsx | 3 +- .../data_explorer/containers/DataExplorer.tsx | 3 +- ui/src/hosts/containers/HostsPage.js | 3 +- .../components/dropdowns/Dropdown.scss | 16 ++- .../components/dropdowns/DropdownButton.scss | 13 +- .../shared/components/AutoRefreshDropdown.js | 90 ------------- .../AutoRefreshDropdown.scss | 17 +++ .../AutoRefreshDropdown.tsx | 124 ++++++++++++++++++ .../autoRefreshOptions.ts | 58 ++++++++ ui/src/shared/data/autoRefreshes.js | 30 ----- ui/src/style/chronograf.scss | 1 + ui/src/style/modules/_variables.scss | 8 +- ui/src/style/unsorted.scss | 16 --- 13 files changed, 228 insertions(+), 154 deletions(-) delete mode 100644 ui/src/shared/components/AutoRefreshDropdown.js create mode 100644 ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss create mode 100644 ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx create mode 100644 ui/src/shared/components/dropdown_auto_refresh/autoRefreshOptions.ts delete mode 100644 ui/src/shared/data/autoRefreshes.js diff --git a/ui/src/dashboards/components/DashboardHeader.tsx b/ui/src/dashboards/components/DashboardHeader.tsx index 69cf86e33..faaeff84a 100644 --- a/ui/src/dashboards/components/DashboardHeader.tsx +++ b/ui/src/dashboards/components/DashboardHeader.tsx @@ -5,7 +5,7 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized' import PageHeader from 'src/reusable_ui/components/page_layout/PageHeader' import PageHeaderTitle from 'src/reusable_ui/components/page_layout/PageHeaderTitle' -import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown' +import AutoRefreshDropdown from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown' import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown' import GraphTips from 'src/shared/components/GraphTips' import RenameDashboard from 'src/dashboards/components/rename_dashboard/RenameDashboard' @@ -116,7 +116,6 @@ class DashboardHeader extends Component { onChoose={handleChooseAutoRefresh} onManualRefresh={onManualRefresh} selected={autoRefresh} - iconName="refresh" /> { Write Data span.icon.dropdown--icon, -.dropdown--button > span.icon.dropdown--caret { +.dropdown--icon, +.dropdown--caret { position: absolute; top: 50%; transform: translateY(-50%); } -span.icon.dropdown--icon { - top: 49%; +.dropdown--icon { + top: 48%; } .dropdown--selected { @@ -25,12 +25,11 @@ span.icon.dropdown--icon { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - width: calc(100% - 20px); } -.dropdown--button > span.icon.dropdown--caret { +.dropdown--caret { margin: 0; - font-size: 1em; + font-size: 0.9em; } /* Button Size Modifiers */ diff --git a/ui/src/shared/components/AutoRefreshDropdown.js b/ui/src/shared/components/AutoRefreshDropdown.js deleted file mode 100644 index 7a1d06830..000000000 --- a/ui/src/shared/components/AutoRefreshDropdown.js +++ /dev/null @@ -1,90 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import OnClickOutside from 'shared/components/OnClickOutside' - -import autoRefreshItems from 'shared/data/autoRefreshes' -import {ErrorHandling} from 'src/shared/decorators/errors' - -@ErrorHandling -class AutoRefreshDropdown extends Component { - constructor(props) { - super(props) - this.state = { - isOpen: false, - } - } - - findAutoRefreshItem(milliseconds) { - return autoRefreshItems.find(values => values.milliseconds === milliseconds) - } - - handleClickOutside() { - this.setState({isOpen: false}) - } - - handleSelection = milliseconds => () => { - this.props.onChoose(milliseconds) - this.setState({isOpen: false}) - } - - toggleMenu = () => this.setState({isOpen: !this.state.isOpen}) - - render() { - const {selected, onManualRefresh} = this.props - const {isOpen} = this.state - const {milliseconds, inputValue} = this.findAutoRefreshItem(selected) - - return ( -
-
-
- 0 ? 'refresh' : 'pause' - )} - /> - {inputValue} - -
- -
- {+milliseconds === 0 ? ( -
- -
- ) : null} -
- ) - } -} - -const {number, func} = PropTypes - -AutoRefreshDropdown.propTypes = { - selected: number.isRequired, - onChoose: func.isRequired, - onManualRefresh: func, -} - -export default OnClickOutside(AutoRefreshDropdown) diff --git a/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss b/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss new file mode 100644 index 000000000..065114753 --- /dev/null +++ b/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss @@ -0,0 +1,17 @@ +/* + Auto Refresh Dropdown + ------------------------------------------------------------------------------ +*/ + +.autorefresh-dropdown { + display: flex; + flex-wrap: nowrap; + + &.paused .dropdown { + margin-right: $ix-marg-a; + } + + &.paused .dropdown--selected { + opacity: 0; + } +} \ No newline at end of file diff --git a/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx b/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx new file mode 100644 index 000000000..8b14088b0 --- /dev/null +++ b/ui/src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.tsx @@ -0,0 +1,124 @@ +// Libraries +import React, {Component} from 'react' +import classnames from 'classnames' + +// Components +import {Dropdown, Button, ButtonShape, IconFont} from 'src/reusable_ui' + +// Constants +import autoRefreshOptions, { + AutoRefreshOption, + AutoRefreshOptionType, +} from 'src/shared/components/dropdown_auto_refresh/autoRefreshOptions' + +import {ErrorHandling} from 'src/shared/decorators/errors' + +interface Props { + selected: number + onChoose: (milliseconds: number) => void + onManualRefresh: () => void +} + +@ErrorHandling +class AutoRefreshDropdown extends Component { + constructor(props) { + super(props) + this.state = { + isOpen: false, + } + } + + public render() { + return ( +
+ + {autoRefreshOptions.map(option => { + if (option.type === AutoRefreshOptionType.Header) { + return ( + + ) + } + + return ( + + {option.label} + + ) + })} + + {this.manualRefreshButton} +
+ ) + } + + public handleDropdownChange = ( + autoRefreshOption: AutoRefreshOption + ): void => { + const {onChoose} = this.props + const {milliseconds} = autoRefreshOption + + onChoose(milliseconds) + } + + private get isPaused(): boolean { + const {selected} = this.props + + return selected === 0 + } + + private get className(): string { + return classnames('autorefresh-dropdown', {paused: this.isPaused}) + } + + private get dropdownIcon(): IconFont { + if (this.isPaused) { + return IconFont.Pause + } + + return IconFont.Refresh + } + + private get dropdownWidthPixels(): number { + if (this.isPaused) { + return 50 + } + + return 84 + } + + private get selectedID(): string { + const {selected} = this.props + const selectedOption = autoRefreshOptions.find( + option => option.milliseconds === selected + ) + + return selectedOption.id + } + + private get manualRefreshButton(): JSX.Element { + const {onManualRefresh} = this.props + + if (this.isPaused) { + return ( +