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
diff --git a/src/main.js b/src/main.js
index 7216751..84adb40 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,6 @@
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 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 21ea796..dd12fc2 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -25,7 +25,7 @@
namespaced: true,
state: {
hostName: '--',
- bmcTime: null,
+ bmcTime: '--',
hostStatus: 'unreachable'
},
getters: {
@@ -53,9 +53,10 @@
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 3f32ab1..d2f970a 100644
--- a/src/store/modules/Health/EventLogStore.js
+++ b/src/store/modules/Health/EventLogStore.js
@@ -68,6 +68,7 @@
.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 @@
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 2004aa5..af86e79 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 @@
.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 0dc7adf..32d5af4 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>