Merge pull request #2031 from DSD-DBS/relative-time-fixes

feat: Don't show seconds on last seen and make creation time relative

frontend/src/app/general/relative-time/relative-time.component.ts

@@ -16,6 +16,7 @@ import { DateArg } from 'date-fns/types';
 export class RelativeTimeComponent {
   @Input() date?: DateArg<Date>;
   @Input() suffix = true;
+  @Input() showSeconds = true;
 
   get relativeTime(): string {
     if (!this.date) return '';
@@ -24,6 +25,7 @@ export class RelativeTimeComponent {
 
   get absoluteTime(): string {
     if (!this.date) return '';
-    return format(this.date, 'PPpp');
+    if (this.showSeconds) return format(this.date, 'PPpp');
+    return format(this.date, 'PPp');
   }
 }

frontend/src/app/sessions/session-overview/session-overview.component.html

@@ -35,7 +35,7 @@
     <ng-container matColumnDef="created_at">
       <th mat-header-cell *matHeaderCellDef>Creation date</th>
       <td mat-cell *matCellDef="let element">
-        {{ element.created_at | date: "EE, dd MMM y HH:mm:ss" }}
+        <app-relative-time [date]="element.created_at" />
       </td>
     </ng-container>
 
@@ -62,6 +62,7 @@
               [date]="
                 subMinutes(Date.now(), element.idle_state.idle_for_minutes!)
               "
+              [showSeconds]="false"
             />
           }
         } @else {

frontend/src/app/sessions/session-overview/session-overview.stories.ts

@@ -4,6 +4,7 @@
  */
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { userEvent, within } from '@storybook/test';
+import MockDate from 'mockdate';
 import { of } from 'rxjs';
 import {
   Session,
@@ -22,6 +23,9 @@ import { SessionOverviewComponent } from './session-overview.component';
 const meta: Meta<SessionOverviewComponent> = {
   title: 'Session Components/Session Overview',
   component: SessionOverviewComponent,
+  beforeEach: () => {
+    MockDate.set(new Date('2024-05-01'));
+  },
 };
 
 export default meta;