diff options
Diffstat (limited to 'web/src/containers')
-rw-r--r-- | web/src/containers/build/Summary.jsx | 6 | ||||
-rw-r--r-- | web/src/containers/timezone/SelectTz.jsx | 142 |
2 files changed, 147 insertions, 1 deletions
diff --git a/web/src/containers/build/Summary.jsx b/web/src/containers/build/Summary.jsx index c03f24c3c..dbccdbc59 100644 --- a/web/src/containers/build/Summary.jsx +++ b/web/src/containers/build/Summary.jsx @@ -28,6 +28,7 @@ class Summary extends React.Component { static propTypes = { build: PropTypes.object, tenant: PropTypes.object, + timezone: PropTypes.string, } render () { @@ -75,6 +76,9 @@ class Summary extends React.Component { value = 'false' } } + if (column === 'start_time' || column === 'end_time') { + value = moment.utc(value).tz(this.props.timezone).format('YYYY-MM-DD HH:mm:ss') + } if (column === 'duration') { value = moment.duration(value, 'seconds') .format('h [hr] m [min] s [sec]') @@ -124,4 +128,4 @@ class Summary extends React.Component { } -export default connect(state => ({tenant: state.tenant}))(Summary) +export default connect(state => ({tenant: state.tenant, timezone: state.timezone}))(Summary) diff --git a/web/src/containers/timezone/SelectTz.jsx b/web/src/containers/timezone/SelectTz.jsx new file mode 100644 index 000000000..78092d2ab --- /dev/null +++ b/web/src/containers/timezone/SelectTz.jsx @@ -0,0 +1,142 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may +// not use this file except in compliance with the License. You may obtain +// a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations +// under the License. + +import PropTypes from 'prop-types' +import React from 'react' +import Select from 'react-select' +import moment from 'moment-timezone' +import { Icon } from 'patternfly-react' +import { connect } from 'react-redux' +import { setTimezoneAction } from '../../actions/timezone' + +class SelectTz extends React.Component { + static propTypes = { + dispatch: PropTypes.func + } + + state = { + availableTz: moment.tz.names().map(item => ({value: item, label: item})), + defaultValue: {value: 'UTC', label: 'UTC'} + } + + componentDidMount () { + this.loadState() + } + + handleChange = (selectedTz) => { + const tz = selectedTz.value + + this.setCookie('zuul_tz_string', tz) + this.updateState(tz) + } + + setCookie (name, value) { + document.cookie = name + '=' + value + '; path=/' + } + + loadState = () => { + function readCookie (name, defaultValue) { + let nameEQ = name + '=' + let ca = document.cookie.split(';') + for (let i = 0; i < ca.length; i++) { + let c = ca[i] + while (c.charAt(0) === ' ') { + c = c.substring(1, c.length) + } + if (c.indexOf(nameEQ) === 0) { + return c.substring(nameEQ.length, c.length) + } + } + return defaultValue + } + let tz = readCookie('zuul_tz_string', '') + if (tz) { + this.updateState(tz) + } + } + + updateState = (tz) => { + + this.setState({ + currentValue: {value: tz, label: tz} + }) + + let timezoneAction = setTimezoneAction(tz) + this.props.dispatch(timezoneAction) + } + + render() { + const textColor = '#d1d1d1' + const containerStyles= { + border: 'solid #2b2b2b', + borderWidth: '0 0 0 1px', + cursor: 'pointer', + display: 'initial', + fontSize: '11px', + padding: '6px' + } + const iconStyles = { + padding: '5px' + } + const customStyles = { + container: () => ({ + display: 'inline-block', + }), + control: () => ({ + width: 'auto', + display: 'flex' + }), + singleValue: () => ({ + color: textColor, + }), + input: (provided) => ({ + ...provided, + color: textColor + }), + dropdownIndicator:(provided) => ({ + ...provided, + padding: '3px' + }), + indicatorSeparator: () => {}, + menu: (provided) => ({ + ...provided, + width: 'auto', + right: '0', + top: '22px', + }) + } + return ( + <div style={containerStyles}> + <Icon style={iconStyles} type="fa" name="clock-o" /> + <Select + styles={customStyles} + value={this.state.currentValue} + onChange={this.handleChange} + options={this.state.availableTz} + noOptionsMessage={() => 'No api found'} + placeholder={'Select Tz'} + defaultValue={this.state.defaultValue} + theme={(theme) => ({ + ...theme, + borderRadius: 0, + spacing: { + ...theme.spacing, + baseUnit: 2, + }, + })} + /> + </div> + ) + } +} + +export default connect()(SelectTz) |