ui: Allowing user to use local/browser timezone (#903)

Allowing user to use local/browser timezone

Author: davidjumani

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 @@ 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 {

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",

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

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)
     }
   }
 }

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 => {

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',

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"