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

7 files changed, 42 insertions, 21 deletions

diff --git a/package-lock.json b/package-lock.json
index 941df029..5222244d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16116,14 +16116,6 @@
         }
       }
     },
-    "vue-date-fns": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/vue-date-fns/-/vue-date-fns-1.1.0.tgz",
-      "integrity": "sha512-9xgVtDtK97C5ztLAelecfd+lfUpYn6nGRVxuD6SCk/FiN9pr7C81qP83STcsFw4hz0MfcOinfqd8ctBarMsmpA==",
-      "requires": {
-        "date-fns": "^1.29.0"
-      }
-    },
     "vue-eslint-parser": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-4.0.3.tgz",
diff --git a/package.json b/package.json
index b0519f42..2d5f4d5e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "core-js": "3.3.2",
     "js-cookie": "^2.2.1",
     "vue": "2.6.11",
-    "vue-date-fns": "1.1.0",
     "vue-i18n": "8.15.3",
     "vue-router": "3.1.3",
     "vuelidate": "^0.7.4",
@@ -45,9 +44,9 @@
     "node-sass": "4.13.1",
     "prettier": "1.18.2",
     "sass-loader": "8.0.0",
+    "vue-cli-plugin-i18n": "0.6.1",
     "vue-template-compiler": "2.6.11",
-    "vuepress": "^1.2.0",
-    "vue-cli-plugin-i18n": "0.6.1"
+    "vuepress": "^1.2.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
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>