diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-02-24 00:56:16 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-02-28 17:42:51 +0300 |
commit | 97f4187e1bac021ea7b5a0f5a780a3d4004edf64 (patch) | |
tree | d6851088fb7282b32a7dc66d41ea54a363b11b5f /src | |
parent | 5bb956d7596f3a91bed0554bf47552039f2c0713 (diff) | |
download | webui-vue-97f4187e1bac021ea7b5a0f5a780a3d4004edf64.tar.xz |
Format date and time for international locales
Uninstalls vue-date-fns and uses toLocaleDateString() method to
return formatted date and time.
Date language is set by i18n and time/timezone is formatted by
browser locale.
Uses vue filter to format date and time as:
- short month, day, year, time and timezone
- 'en' example: Feb 23, 2020, 3:40:25 PM CST
- 'es' example: 25 feb 2020 14:23:36 GMT-6
- hour12 value is determined by browser default
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I4fe8c51f5437cef263f1e0ea4184c0b552c85f4d
Diffstat (limited to 'src')
-rw-r--r-- | src/main.js | 26 | ||||
-rw-r--r-- | src/store/modules/GlobalStore.js | 9 | ||||
-rw-r--r-- | src/store/modules/Health/EventLogStore.js | 3 | ||||
-rw-r--r-- | src/views/Overview/OverviewEvents.vue | 10 | ||||
-rw-r--r-- | src/views/Overview/OverviewQuickLinks.vue | 2 |
5 files changed, 40 insertions, 10 deletions
diff --git a/src/main.js b/src/main.js index 72167510..84adb408 100644 --- a/src/main.js +++ b/src/main.js @@ -2,7 +2,6 @@ import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; -import { dateFilter } from 'vue-date-fns'; import { AlertPlugin, BadgePlugin, @@ -27,8 +26,31 @@ import { import Vuelidate from 'vuelidate'; import i18n from './i18n'; -Vue.filter('date', dateFilter); +// Filters +Vue.filter('formatDate', function(value) { + const dateOptions = { + year: 'numeric', + month: 'short', + day: 'numeric' + }; + if (value instanceof Date) { + return value.toLocaleDateString(i18n.locale, dateOptions); + } +}); + +Vue.filter('formatTime', function(value) { + const timeOptions = { + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + timeZoneName: 'short' + }; + if (value instanceof Date) { + return value.toLocaleTimeString('default', timeOptions); + } +}); +// Plugins Vue.use(AlertPlugin); Vue.use(BadgePlugin); Vue.use(ButtonPlugin); diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js index 21ea796f..dd12fc23 100644 --- a/src/store/modules/GlobalStore.js +++ b/src/store/modules/GlobalStore.js @@ -25,7 +25,7 @@ const GlobalStore = { namespaced: true, state: { hostName: '--', - bmcTime: null, + bmcTime: '--', hostStatus: 'unreachable' }, getters: { @@ -53,9 +53,10 @@ const GlobalStore = { api .get('/xyz/openbmc_project/time/bmc') .then(response => { - // bmcTime is stored in microseconds, convert to millseconds - const bmcTime = response.data.data.Elapsed / 1000; - commit('setBmcTime', bmcTime); + // bmcTime is stored in microseconds, convert to milliseconds + const bmcEpochTime = response.data.data.Elapsed / 1000; + const date = new Date(bmcEpochTime); + commit('setBmcTime', date); }) .catch(error => console.log(error)); }, diff --git a/src/store/modules/Health/EventLogStore.js b/src/store/modules/Health/EventLogStore.js index 3f32ab16..d2f970ae 100644 --- a/src/store/modules/Health/EventLogStore.js +++ b/src/store/modules/Health/EventLogStore.js @@ -68,6 +68,7 @@ const EventLogStore = { .then(response => { const responseData = response.data.data; const eventLogs = []; + for (const key in responseData) { const event = responseData[key]; const { Id } = event; @@ -76,7 +77,7 @@ const EventLogStore = { eventLogs.push({ logId: Id, priority: priorityMapper(Severity), - timestamp: Timestamp, + timestamp: new Date(Timestamp), eventID: EventID, description: Description, ...event diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue index 2004aa53..af86e797 100644 --- a/src/views/Overview/OverviewEvents.vue +++ b/src/views/Overview/OverviewEvents.vue @@ -18,8 +18,10 @@ :fields="fields" > <template v-slot:cell(timestamp)="data"> - {{ data.value | date('hh:MM:SS A') }} <br /> - {{ data.value | date('dddd, MMM DD, YYYY') }} + <div class="date-column"> + {{ data.value | formatDate }} <br /> + {{ data.value | formatTime }} + </div> </template> </b-table> </div> @@ -71,4 +73,8 @@ export default { .btn { @include float-right; } + +.date-column { + min-width: 200px; +} </style> diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue index 0dc7adff..32d5af46 100644 --- a/src/views/Overview/OverviewQuickLinks.vue +++ b/src/views/Overview/OverviewQuickLinks.vue @@ -3,7 +3,7 @@ <div> <dl> <dt>{{ $t('pageOverview.quicklinks.bmcTime') }}</dt> - <dd>{{ bmcTime | date('MMM, DD YYYY HH:MM:SS A ZZ') }}</dd> + <dd>{{ bmcTime | formatDate }} {{ bmcTime | formatTime }}</dd> </dl> </div> <div> |