Relative date

src-ui/src/app/components/audit-log/audit-log.component.html

@@ -15,8 +15,12 @@
                 <li class="list-group-item">
                     <div class="d-flex justify-content-between align-items-center">
                         <div>
-                            {{ entry.timestamp | customDate:'longDate' }}
+                            <ng-template #timestamp>
-                            {{ entry.timestamp | date:'shortTime' }}
+                                <div class="text-light">
+                                    {{ entry.timestamp | customDate:'longDate' }} {{ entry.timestamp | date:'shortTime' }}
+                                </div>
+                            </ng-template>
+                            <span [ngbTooltip]="timestamp">{{ entry.timestamp | customDate:'relative' }}</span>
                             @if (entry.actor) {
                                 <span class="ms-3 fst-italic">{{ entry.actor.username }}</span>
                             } @else {

src-ui/src/app/pipes/custom-date.pipe.spec.ts

@@ -30,4 +30,14 @@ describe('CustomDatePipe', () => {
       )
     ).toEqual('2023-05-04')
   })
+
+  it('should support relative date formatting', () => {
+    const now = new Date()
+    const notNow = new Date(now)
+    notNow.setDate(now.getDate() - 1)
+    expect(datePipe.transform(notNow, 'relative')).toEqual('1 day ago')
+    notNow.setDate(now.getDate() - 2)
+    expect(datePipe.transform(notNow, 'relative')).toEqual('2 days ago')
+    expect(datePipe.transform(now, 'relative')).toEqual('Just now')
+  })
 })

src-ui/src/app/pipes/custom-date.pipe.ts

@@ -34,6 +34,51 @@ export class CustomDatePipe implements PipeTransform {
       this.settings.get(SETTINGS_KEYS.DATE_LOCALE) ||
       this.defaultLocale
     let f = format || this.settings.get(SETTINGS_KEYS.DATE_FORMAT)
+    if (format === 'relative') {
+      const seconds = Math.floor((+new Date() - +new Date(value)) / 1000)
+      if (seconds < 60) return $localize`Just now`
+      const intervals = {
+        year: {
+          label: $localize`year ago`,
+          labelPlural: $localize`years ago`,
+          interval: 31536000,
+        },
+        month: {
+          label: $localize`month ago`,
+          labelPlural: $localize`months ago`,
+          interval: 2592000,
+        },
+        week: {
+          label: $localize`week ago`,
+          labelPlural: $localize`weeks ago`,
+          interval: 604800,
+        },
+        day: {
+          label: $localize`day ago`,
+          labelPlural: $localize`days ago`,
+          interval: 86400,
+        },
+        hour: {
+          label: $localize`hour ago`,
+          labelPlural: $localize`hours ago`,
+          interval: 3600,
+        },
+        minute: {
+          label: $localize`minute ago`,
+          labelPlural: $localize`minutes ago`,
+          interval: 60,
+        },
+      }
+      let counter
+      for (const i in intervals) {
+        counter = Math.floor(seconds / intervals[i].interval)
+        if (counter > 0) {
+          const label =
+            counter > 1 ? intervals[i].labelPlural : intervals[i].label
+          return `${counter} ${label}`
+        }
+      }
+    }
     if (l == 'iso-8601') {
       return this.datePipe.transform(value, FORMAT_TO_ISO_FORMAT[f], timezone)
     } else {