()
}
diff --git a/web/projects/ui/src/app/routes/portal/routes/metrics/time.component.ts b/web/projects/ui/src/app/routes/portal/routes/metrics/time.component.ts
new file mode 100644
index 000000000..86001470e
--- /dev/null
+++ b/web/projects/ui/src/app/routes/portal/routes/metrics/time.component.ts
@@ -0,0 +1,46 @@
+import { DatePipe } from '@angular/common'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { TuiNotification, TuiTitle } from '@taiga-ui/core'
+import { TimeService } from 'src/app/services/time.service'
+
+@Component({
+ standalone: true,
+ selector: 'metrics-time',
+ template: `
+ @if (now(); as time) {
+ @if (!time.synced) {
+
+ NTP not synced, time could be wrong
+
+ }
+
+
+ {{ time.now | date: 'h:mm a z' : 'UTC' }}
+
+
{{ time.now | date: 'MMMM d, y' : 'UTC' }}
+
+ {{ time.days }}
+ Days
+
+
+ {{ time.hours }}
+ Hours
+
+
+ {{ time.minutes }}
+ Minutes
+
+
+ {{ time.seconds }}
+ Seconds
+
+ } @else {
+ Loading...
+ }
+ `,
+ styles: `
+ :host {
+ height: 100%;
+ display: flex;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+ }
+
+ b {
+ display: block;
+ font: var(--tui-font-heading-5);
+ }
+
+ :host-context(tui-root._mobile) {
+ font: var(--tui-font-text-ui-xs);
+ }
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UptimeComponent {
+ readonly uptime = toSignal(inject(TimeService).uptime$)
+}
diff --git a/web/projects/ui/src/app/routes/portal/routes/metrics/value.pipe.ts b/web/projects/ui/src/app/routes/portal/routes/metrics/value.pipe.ts
new file mode 100644
index 000000000..ada7354b8
--- /dev/null
+++ b/web/projects/ui/src/app/routes/portal/routes/metrics/value.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+ standalone: true,
+ name: 'value',
+})
+export class ValuePipe implements PipeTransform {
+ readonly transform = getValue
+}
+
+export function getValue(value?: string | null): number | string {
+ return value == null ? '-' : Number.parseFloat(value)
+}
diff --git a/web/projects/ui/src/app/services/api/embassy-mock-api.service.ts b/web/projects/ui/src/app/services/api/embassy-mock-api.service.ts
index 74d98417f..603acbe2a 100644
--- a/web/projects/ui/src/app/services/api/embassy-mock-api.service.ts
+++ b/web/projects/ui/src/app/services/api/embassy-mock-api.service.ts
@@ -123,6 +123,10 @@ export class MockApiService extends ApiService {
return from(this.initProgress()).pipe(
startWith(PROGRESS),
) as WebSocketSubject
+ } else if (guid === 'metrics-guid') {
+ return interval(1000).pipe(
+ map(() => Mock.getMetrics()),
+ ) as WebSocketSubject
} else {
throw new Error('invalid guid type')
}
@@ -358,7 +362,7 @@ export class MockApiService extends ApiService {
): Promise {
await pauseFor(2000)
return {
- guid: 'iqudh37um-i38u3-34-a51b-jkhd783ein',
+ guid: 'metrics-guid',
metrics: Mock.getMetrics(),
}
}
diff --git a/web/projects/ui/src/app/services/time.service.ts b/web/projects/ui/src/app/services/time.service.ts
index 2f30ae5f3..bd088242a 100644
--- a/web/projects/ui/src/app/services/time.service.ts
+++ b/web/projects/ui/src/app/services/time.service.ts
@@ -1,14 +1,6 @@
import { inject, Injectable } from '@angular/core'
import { PatchDB } from 'patch-db-client'
-import {
- combineLatest,
- defer,
- map,
- shareReplay,
- startWith,
- switchMap,
- timer,
-} from 'rxjs'
+import { combineLatest, defer, map, shareReplay, switchMap, timer } from 'rxjs'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { DataModel } from 'src/app/services/patch-db/data-model'
@@ -44,9 +36,7 @@ export class TimeService {
const hoursSec = uptime % (60 * 60)
const minutes = Math.floor(hoursSec / 60)
const seconds = uptime % 60
-
- return `${days}:${hours}:${minutes}:${seconds}`
+ return { days, hours, minutes, seconds }
}),
- startWith('-:-:-:-'),
)
}