chore: fix comments

web/projects/ui/src/app/routes/portal/routes/dashboard/dashboard.component.ts

@@ -3,8 +3,9 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { RouterLink } from '@angular/router'
 import { TuiIconModule } from '@taiga-ui/experimental'
-import { map, timer } from 'rxjs'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { map } from 'rxjs'
+import { MetricsService } from 'src/app/services/metrics.service'
+import { TimeService } from 'src/app/services/time.service'
 import { MetricsComponent } from './metrics.component'
 import { ServicesComponent } from './services.component'
 import { UtilitiesComponent } from './utilities.component'
@@ -131,6 +132,8 @@ import { UtilitiesComponent } from './utilities.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardComponent {
-  readonly date = toSignal(timer(0, 1000).pipe(map(() => new Date())))
-  readonly metrics$ = inject(ApiService).openMetricsWebsocket$({ url: '' })
+  readonly metrics$ = inject(MetricsService)
+  readonly date = toSignal(
+    inject(TimeService).now$.pipe(map(({ now }) => new Date(now))),
+  )
 }

web/projects/ui/src/app/routes/portal/routes/dashboard/metrics.component.ts

@@ -1,9 +1,17 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { AsyncPipe } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+} from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import { TuiProgressModule } from '@taiga-ui/kit'
 import { CpuComponent } from 'src/app/routes/portal/routes/dashboard/cpu.component'
 import { MetricComponent } from 'src/app/routes/portal/routes/dashboard/metric.component'
 import { TemperatureComponent } from 'src/app/routes/portal/routes/dashboard/temperature.component'
 import { Metrics } from 'src/app/services/api/api.types'
+import { TimeService } from 'src/app/services/time.service'
 
 @Component({
   standalone: true,
@@ -60,7 +68,7 @@ import { Metrics } from 'src/app/services/api/api.types'
       <aside>
         <app-metric label="Uptime" [style.flex]="'unset'">
           <label>
-            -:-:-:-
+            {{ uptime() }}
             <div>Days : Hrs : Mins : Secs</div>
           </label>
         </app-metric>
@@ -192,12 +200,15 @@ import { Metrics } from 'src/app/services/api/api.types'
     MetricComponent,
     TemperatureComponent,
     CpuComponent,
+    AsyncPipe,
   ],
 })
 export class MetricsComponent {
   @Input({ required: true })
   metrics: Metrics | null = null
 
+  readonly uptime = toSignal(inject(TimeService).uptime$)
+
   get cpu(): number {
     return Number(this.metrics?.cpu.percentageUsed.value || 0) / 100
   }

web/projects/ui/src/app/services/metrics.service.ts

@@ -0,0 +1,19 @@
+import { inject, Injectable } from '@angular/core'
+import { Observable, retry, shareReplay } from 'rxjs'
+import { Metrics } from 'src/app/services/api/api.types'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MetricsService extends Observable<Metrics> {
+  private readonly metrics$ = inject(ApiService)
+    .openMetricsWebsocket$({
+      url: '',
+    })
+    .pipe(retry(), shareReplay(1))
+
+  constructor() {
+    super(subscriber => this.metrics$.subscribe(subscriber))
+  }
+}

web/projects/ui/src/app/services/time.service.ts

@@ -0,0 +1,52 @@
+import { inject, Injectable } from '@angular/core'
+import { PatchDB } from 'patch-db-client'
+import {
+  combineLatest,
+  defer,
+  map,
+  shareReplay,
+  startWith,
+  switchMap,
+  timer,
+} from 'rxjs'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { DataModel } from 'src/app/services/patch-db/data-model'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TimeService {
+  private readonly patch = inject(PatchDB<DataModel>)
+  private readonly time$ = defer(() =>
+    inject(ApiService).getSystemTime({}),
+  ).pipe(
+    switchMap(({ now, uptime }) =>
+      timer(0, 1000).pipe(
+        map(index => ({
+          now: new Date(now).valueOf() + 1000 * index,
+          uptime: uptime + index,
+        })),
+      ),
+    ),
+    shareReplay(1),
+  )
+
+  readonly now$ = combineLatest([
+    this.time$,
+    this.patch.watch$('serverInfo', 'ntpSynced'),
+  ]).pipe(map(([{ now }, synced]) => ({ now, synced })))
+
+  readonly uptime$ = this.time$.pipe(
+    map(({ uptime }) => {
+      const days = Math.floor(uptime / (24 * 60 * 60))
+      const daysSec = uptime % (24 * 60 * 60)
+      const hours = Math.floor(daysSec / (60 * 60))
+      const hoursSec = uptime % (60 * 60)
+      const minutes = Math.floor(hoursSec / 60)
+      const seconds = uptime % 60
+
+      return `${days}:${hours}:${minutes}:${seconds}`
+    }),
+    startWith('-:-:-:-'),
+  )
+}