ui: Allowing user to use local/browser timezone (#903)
Allowing user to use local/browser timezone
diff --git a/src/components/header/UserMenu.vue b/src/components/header/UserMenu.vue
index 0104214..33335c6 100644
--- a/src/components/header/UserMenu.vue
+++ b/src/components/header/UserMenu.vue
@@ -32,14 +32,22 @@
<span class="user-menu-item-name">{{ $t('label.profilename') }}</span>
</router-link>
</a-menu-item>
- <a-menu-item class="user-menu-item" key="1" disabled>
+ <a-menu-item class="user-menu-item" key="1">
+ <a @click="toggleUseBrowserTimezone">
+ <a-icon class="user-menu-item-icon" type="clock-circle"/>
+ <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.use.local.timezone') }}</span>
+ <a-switch
+ :checked="$store.getters.usebrowsertimezone" />
+ </a>
+ </a-menu-item>
+ <a-menu-item class="user-menu-item" key="2" disabled>
<a :href="$config.docBase" target="_blank">
<a-icon class="user-menu-item-icon" type="question-circle-o"></a-icon>
<span class="user-menu-item-name">{{ $t('label.help') }}</span>
</a>
</a-menu-item>
<a-menu-divider/>
- <a-menu-item class="user-menu-item" key="2">
+ <a-menu-item class="user-menu-item" key="3">
<a href="javascript:;" @click="handleLogout">
<a-icon class="user-menu-item-icon" type="logout"/>
<span class="user-menu-item-name">{{ $t('label.logout') }}</span>
@@ -64,6 +72,9 @@
methods: {
...mapActions(['Logout']),
...mapGetters(['nickname', 'avatar']),
+ toggleUseBrowserTimezone () {
+ this.$store.dispatch('SetUseBrowserTimezone', !this.$store.getters.usebrowsertimezone)
+ },
handleLogout () {
return this.Logout({}).then(() => {
this.$router.push('/user/login')
@@ -85,7 +96,7 @@
}
&-item {
- width: 160px;
+ width: auto;
}
&-item-name {
diff --git a/src/locales/en.json b/src/locales/en.json
index 314d747..cedc431 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2157,6 +2157,7 @@
"label.usageinterface": "Usage Interface",
"label.usagename": "Usage Type",
"label.usageunit": "Unit",
+"label.use.local.timezone": "Use Local Timezone",
"label.use.kubectl.access.cluster": "<code><b>kubectl</b></code> and <code><b>kubeconfig</b></code> file to access cluster",
"label.use.vm.ip": "Use VM IP:",
"label.use.vm.ips": "Use VM IPs",
diff --git a/src/store/getters.js b/src/store/getters.js
index 189d6e4..4e2d5eb 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -34,7 +34,8 @@
isLdapEnabled: state => state.user.isLdapEnabled,
cloudian: state => state.user.cloudian,
zones: state => state.user.zones,
- timezoneoffset: state => state.user.timezoneoffset
+ timezoneoffset: state => state.user.timezoneoffset,
+ usebrowsertimezone: state => state.user.usebrowsertimezone
}
export default getters
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index e68cf44..a03fc63 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -26,7 +26,8 @@
DEFAULT_FIXED_SIDEMENU,
DEFAULT_FIXED_HEADER_HIDDEN,
DEFAULT_CONTENT_WIDTH_TYPE,
- DEFAULT_MULTI_TAB
+ DEFAULT_MULTI_TAB,
+ USE_BROWSER_TIMEZONE
} from '@/store/mutation-types'
const app = {
@@ -95,6 +96,10 @@
},
SET_METRICS: (state, bool) => {
state.metrics = bool
+ },
+ SET_USE_BROWSER_TIMEZONE: (state, bool) => {
+ Vue.ls.set(USE_BROWSER_TIMEZONE, bool)
+ state.usebrowsertimezone = bool
}
},
actions: {
@@ -139,6 +144,9 @@
},
SetMetrics ({ commit }, bool) {
commit('SET_METRICS', bool)
+ },
+ SetUseBrowserTimezone ({ commit }, bool) {
+ commit('SET_USE_BROWSER_TIMEZONE', bool)
}
}
}
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 7638eb0..1264623 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -24,7 +24,7 @@
import store from '@/store'
import { login, logout, api } from '@/api'
import i18n from '@/locales'
-import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES, TIMEZONE_OFFSET } from '@/store/mutation-types'
+import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES, TIMEZONE_OFFSET, USE_BROWSER_TIMEZONE } from '@/store/mutation-types'
const user = {
state: {
@@ -39,7 +39,8 @@
isLdapEnabled: false,
cloudian: {},
zones: {},
- timezoneoffset: '0.0'
+ timezoneoffset: 0.0,
+ usebrowsertimezone: false
},
mutations: {
@@ -50,6 +51,10 @@
Vue.ls.set(TIMEZONE_OFFSET, timezoneoffset)
state.timezoneoffset = timezoneoffset
},
+ SET_USE_BROWSER_TIMEZONE: (state, bool) => {
+ Vue.ls.set(USE_BROWSER_TIMEZONE, bool)
+ state.usebrowsertimezone = bool
+ },
SET_PROJECT: (state, project = {}) => {
Vue.ls.set(CURRENT_PROJECT, project)
state.project = project
@@ -109,6 +114,9 @@
commit('SET_TOKEN', result.sessionkey)
commit('SET_TIMEZONE_OFFSET', result.timezoneoffset)
+ const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
+ commit('SET_USE_BROWSER_TIMEZONE', cachedUseBrowserTimezone)
+
commit('SET_APIS', {})
commit('SET_NAME', '')
commit('SET_AVATAR', '')
@@ -133,12 +141,14 @@
const cachedApis = Vue.ls.get(APIS, {})
const cachedZones = Vue.ls.get(ZONES, [])
const cachedTimezoneOffset = Vue.ls.get(TIMEZONE_OFFSET, 0.0)
+ const cachedUseBrowserTimezone = Vue.ls.get(USE_BROWSER_TIMEZONE, false)
const hasAuth = Object.keys(cachedApis).length > 0
if (hasAuth) {
console.log('Login detected, using cached APIs')
commit('SET_ZONES', cachedZones)
commit('SET_APIS', cachedApis)
commit('SET_TIMEZONE_OFFSET', cachedTimezoneOffset)
+ commit('SET_USE_BROWSER_TIMEZONE', cachedUseBrowserTimezone)
// Ensuring we get the user info so that store.getters.user is never empty when the page is freshly loaded
api('listUsers', { username: Cookies.get('username'), listall: true }).then(response => {
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 53f193a..9d73561 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -31,6 +31,7 @@
export const ZONES = 'ZONES'
export const ASYNC_JOB_IDS = 'ASYNC_JOB_IDS'
export const TIMEZONE_OFFSET = 'TIMEZONE_OFFSET'
+export const USE_BROWSER_TIMEZONE = 'USE_BROWSER_TIMEZONE'
export const CONTENT_WIDTH_TYPE = {
Fluid: 'Fluid',
diff --git a/src/utils/plugins.js b/src/utils/plugins.js
index 97bcaf4..d00269d 100644
--- a/src/utils/plugins.js
+++ b/src/utils/plugins.js
@@ -151,8 +151,12 @@
export const toLocaleDatePlugin = {
install (Vue) {
Vue.prototype.$toLocaleDate = function (date) {
- var milliseconds = Date.parse(date)
var timezoneOffset = this.$store.getters.timezoneoffset
+ if (this.$store.getters.usebrowsertimezone) {
+ // Since GMT+530 is returned as -330 (mins to GMT)
+ timezoneOffset = new Date().getTimezoneOffset() / -60
+ }
+ var milliseconds = Date.parse(date)
// e.g. "Tue, 08 Jun 2010 19:13:49 GMT", "Tue, 25 May 2010 12:07:01 UTC"
var dateWithOffset = new Date(milliseconds + (timezoneOffset * 60 * 60 * 1000)).toUTCString()
// e.g. "08 Jun 2010 19:13:49 GMT", "25 May 2010 12:07:01 UTC"
