From 8430bedd9923c7b0465686fd0f13c34085650c83 Mon Sep 17 00:00:00 2001 From: davidjumani Date: Wed, 23 Dec 2020 17:55:19 +0530 Subject: [PATCH] ui: Allowing user to use local/browser timezone (#903) Allowing user to use local/browser timezone Signed-off-by: Rohit Yadav --- ui/src/components/header/UserMenu.vue | 17 ++++++++++++++--- ui/src/locales/en.json | 1 + ui/src/store/getters.js | 3 ++- ui/src/store/modules/app.js | 10 +++++++++- ui/src/store/modules/user.js | 14 ++++++++++++-- ui/src/store/mutation-types.js | 1 + ui/src/utils/plugins.js | 6 +++++- 7 files changed, 44 insertions(+), 8 deletions(-) diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue index 0104214fd86..33335c6efd1 100644 --- a/ui/src/components/header/UserMenu.vue +++ b/ui/src/components/header/UserMenu.vue @@ -32,14 +32,22 @@ {{ $t('label.profilename') }} - + + + + {{ $t('label.use.local.timezone') }} + + + + {{ $t('label.help') }} - + {{ $t('label.logout') }} @@ -64,6 +72,9 @@ export default { 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 @@ export default { } &-item { - width: 160px; + width: auto; } &-item-name { diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json index 314d7473e68..cedc4310232 100644 --- a/ui/src/locales/en.json +++ b/ui/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": "kubectl and kubeconfig file to access cluster", "label.use.vm.ip": "Use VM IP:", "label.use.vm.ips": "Use VM IPs", diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js index 189d6e4d8b5..4e2d5eb21a6 100644 --- a/ui/src/store/getters.js +++ b/ui/src/store/getters.js @@ -34,7 +34,8 @@ const getters = { 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/ui/src/store/modules/app.js b/ui/src/store/modules/app.js index e68cf4417d1..a03fc63b2ef 100644 --- a/ui/src/store/modules/app.js +++ b/ui/src/store/modules/app.js @@ -26,7 +26,8 @@ import { 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 @@ const app = { }, 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 @@ const app = { }, SetMetrics ({ commit }, bool) { commit('SET_METRICS', bool) + }, + SetUseBrowserTimezone ({ commit }, bool) { + commit('SET_USE_BROWSER_TIMEZONE', bool) } } } diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js index 7638eb05484..1264623ac50 100644 --- a/ui/src/store/modules/user.js +++ b/ui/src/store/modules/user.js @@ -24,7 +24,7 @@ import router from '@/router' 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 @@ const user = { isLdapEnabled: false, cloudian: {}, zones: {}, - timezoneoffset: '0.0' + timezoneoffset: 0.0, + usebrowsertimezone: false }, mutations: { @@ -50,6 +51,10 @@ const user = { 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 @@ const user = { 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 user = { 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/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js index 53f193a6c58..9d735610e07 100644 --- a/ui/src/store/mutation-types.js +++ b/ui/src/store/mutation-types.js @@ -31,6 +31,7 @@ export const APIS = 'APIS' 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/ui/src/utils/plugins.js b/ui/src/utils/plugins.js index 97bcaf48c91..d00269d3b14 100644 --- a/ui/src/utils/plugins.js +++ b/ui/src/utils/plugins.js @@ -151,8 +151,12 @@ export const notifierPlugin = { 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"