From be8a91942b5719087947699a5d79bedb128301a9 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 8 Apr 2024 22:39:13 -0700
Subject: [PATCH] Relative date

---
 .../audit-log/audit-log.component.html        |  8 +++-
 src-ui/src/app/pipes/custom-date.pipe.spec.ts | 10 +++++
 src-ui/src/app/pipes/custom-date.pipe.ts      | 45 +++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/audit-log/audit-log.component.html b/src-ui/src/app/components/audit-log/audit-log.component.html
index c1e50d136..e6789efc5 100644
--- a/src-ui/src/app/components/audit-log/audit-log.component.html
+++ b/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' }}
-                            {{ entry.timestamp | date:'shortTime' }}
+                            <ng-template #timestamp>
+                                <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 {
diff --git a/src-ui/src/app/pipes/custom-date.pipe.spec.ts b/src-ui/src/app/pipes/custom-date.pipe.spec.ts
index 5b9d0b176..87e99212b 100644
--- a/src-ui/src/app/pipes/custom-date.pipe.spec.ts
+++ b/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')
+  })
 })
diff --git a/src-ui/src/app/pipes/custom-date.pipe.ts b/src-ui/src/app/pipes/custom-date.pipe.ts
index 079091fa9..e6034c59b 100644
--- a/src-ui/src/app/pipes/custom-date.pipe.ts
+++ b/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 {