1 files changed, 142 insertions, 0 deletions
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)