add distanceToNow and readableDate filter from date-fns

app/src/filters/date.js

@@ -0,0 +1,12 @@
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+import format from 'date-fns/format'
+
+import { dateFnsLocale as locale } from '@/i18n/helpers'
+
+export function distanceToNow (dateStr, addSuffix = true) {
+  return formatDistanceToNow(new Date(dateStr), { addSuffix, locale })
+}
+
+export function readableDate (dateStr) {
+  return format(new Date(dateStr), 'PPPpp', { locale })
+}

app/src/views/service/ServiceList.vue

@@ -21,10 +21,10 @@
           <p class="mb-0">
             <span :class="status === 'running' ? 'text-success' : 'text-danger'">
               <icon :iname="status === 'running' ? 'check-circle' : 'times'" />
-              {{ status }}
+              {{ $t(status) }}
             </span>
             <!-- FIXME format date to: (now - date) as words -->
-            {{ $t('since') }} {{ last_state_change }}
+            {{ $t('since') }} {{ last_state_change | distanceToNow }}
           </p>
         </div>
         <icon iname="chevron-right" class="lg fs-sm ml-auto" />
@@ -35,6 +35,7 @@
 
 <script>
 import api from '@/helpers/api'
+import { distanceToNow } from '@/filters/date'
 
 export default {
   name: 'ServiceList',
@@ -56,6 +57,10 @@ export default {
     }
   },
 
+  filters: {
+    distanceToNow
+  },
+
   methods: {
     fetchData () {
       // simply use the api helper since we will not store the request's result.

app/src/views/tool/ToolLogs.vue

@@ -14,13 +14,12 @@
         <h2><icon iname="wrench" /> {{ $t('logs_operation') }}</h2>
       </template>
       <b-list-group flush>
-        <!-- FIXME format title and span date as text and text'ago -->
         <b-list-group-item
           v-for="log in filteredOperations" :key="log.name"
           :to="{ name: 'tool-log', params: { name: log.name } }"
-          :title="log.started_at"
+          :title="log.started_at | readableDate"
         >
-          <small class="mr-3">{{ log.started_at }} </small>
+          <small class="mr-3">{{ log.started_at | distanceToNow }} </small>
           <icon :iname="log.icon" :class="'text-' + log.class" />
           {{ log.description }}
         </b-list-group-item>
@@ -31,6 +30,7 @@
 
 <script>
 import api from '@/helpers/api'
+import { distanceToNow, readableDate } from '@/filters/date'
 
 export default {
   name: 'ServiceList',
@@ -52,6 +52,11 @@ export default {
     }
   },
 
+  filters: {
+    distanceToNow,
+    readableDate
+  },
+
   methods: {
     fetchData () {
       // simply use the api helper since we will not store the request's result.