frontend: use only date-fns to display time for the user

Author: nicoschmdt

core/frontend/package.json

@@ -33,7 +33,6 @@
     "@types/numeral": "^2.0.5",
     "@types/semver": "^7.3.9",
     "@types/semver-stable": "^3.0.0",
-    "@types/timeago": "^1.6.0",
     "@types/uuid": "^9.0.0",
     "ansi_up": "^5.2.1",
     "apexcharts": "^3.36.3",
@@ -51,7 +50,6 @@
     "http-status-codes": "^2.2.0",
     "image-js": "^0.35.3",
     "is-ip": "^5.0.0",
-    "javascript-time-ago": "^2.3.11",
     "jsoneditor": "^9.10.0",
     "lodash": "^4.17.21",
     "marked": "^4.1.1",

core/frontend/src/components/ethernet/InterfaceCard.vue

@@ -177,8 +177,7 @@
 </template>
 
 <script lang="ts">
-import TimeAgo from 'javascript-time-ago'
-import en from 'javascript-time-ago/locale/en.json'
+import { formatDistanceToNow } from 'date-fns'
 import Vue, { PropType } from 'vue'
 
 import beacon from '@/store/beacon'
@@ -191,9 +190,6 @@ import AddressCreationDialog from './AddressCreationDialog.vue'
 import AddressDeletionDialog from './AddressDeletionDialog.vue'
 import DHCPServerDialog from './DHCPServerDialog.vue'
 
-TimeAgo.addDefaultLocale(en)
-const timeAgo = new TimeAgo('en-US')
-
 export default Vue.extend({
   name: 'InterfaceCard',
   components: {
@@ -375,7 +371,7 @@ export default Vue.extend({
         return 'Expired'
       }
 
-      return timeAgo.format(expiresAt, 'round')
+      return formatDistanceToNow(expiresAt, { addSuffix: true })
     },
     getLeaseExpiryClass(lease: DHCPServerLease): string {
       const now = new Date()

core/frontend/src/components/version-chooser/VersionCard.vue

@@ -132,8 +132,7 @@
 </template>
 
 <script lang="ts">
-import TimeAgo from 'javascript-time-ago'
-import en from 'javascript-time-ago/locale/en.json'
+import { formatDistanceToNow } from 'date-fns'
 import Vue, { PropType } from 'vue'
 
 import WarningDialog from '@/components/common/WarningDialog.vue'
@@ -145,9 +144,6 @@ import { DEFAULT_REMOTE_IMAGE, getFactoryVersion } from '@/utils/version_chooser
 
 import SpinningLogo from '../common/SpinningLogo.vue'
 
-TimeAgo.addDefaultLocale(en)
-const timeAgo = new TimeAgo('en-US')
-
 export default Vue.extend({
   name: 'VersionCard',
   components: {
@@ -253,7 +249,7 @@ export default Vue.extend({
   },
   methods: {
     asTimeAgo(value: string) {
-      return timeAgo.format(new Date(Date.parse(value)), 'round')
+      return formatDistanceToNow(new Date(Date.parse(value)), { addSuffix: true })
     },
     shortSha(value: string) {
       if (value === null) {