pkg metrics

ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html

@@ -37,4 +37,23 @@
       </ng-template>
     </ion-card-content>
   </ion-card>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        <ion-icon style="vertical-align: middle; padding-right: 12px;" name="analytics-outline"></ion-icon>
+        <span style="vertical-align: middle;">Service Metrics</span>
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-item *ngFor="let metric of metrics | keyvalue : asIsOrder">
+        <ion-label>
+          <ion-text color="medium">{{ metric.key }}</ion-text>
+        </ion-label>
+        <ion-note *ngIf="metric.value" slot="end" class="metric-note">
+          <ion-text style="color: white;">{{ metric.value.value }} {{ metric.value.unit }}</ion-text>
+        </ion-note>
+      </ion-item>
+    </ion-card-content>
+  </ion-card>
+
 </ion-content>

ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts

@@ -1,8 +1,11 @@
 import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { IonContent } from '@ionic/angular'
+import { Metric } from 'src/app/services/api/api-types'
+import { ApiService } from 'src/app/services/api/api.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { pauseFor } from 'src/app/util/misc.util'
 
 @Component({
   selector: 'app-metrics',
@@ -10,18 +13,50 @@ import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
   styleUrls: ['./app-metrics.page.scss'],
 })
 export class AppMetricsPage {
+  pkgId: string
   pkg: PackageDataEntry
+  going = false
+  metrics: Metric
 
   @ViewChild(IonContent) content: IonContent
 
   constructor (
     private readonly route: ActivatedRoute,
     private readonly patch: PatchDbModel,
+    private readonly apiService: ApiService,
   ) { }
 
   ngOnInit () {
-    const pkgId = this.route.snapshot.paramMap.get('pkgId')
-    this.pkg = this.patch.data['package-data'][pkgId]
+    this.pkgId = this.route.snapshot.paramMap.get('pkgId')
+    this.pkg = this.patch.data['package-data'][this.pkgId]
+
+    this.startDaemon()
+  }
+
+  ngOnDestroy () {
+    this.stopDaemon()
+  }
+
+  async startDaemon (): Promise<void> {
+    this.going = true
+    while (this.going) {
+      await this.getMetrics()
+      await pauseFor(250)
+    }
+  }
+
+  stopDaemon () {
+    this.going = false
+  }
+
+  async getMetrics (): Promise<void> {
+    try {
+      this.metrics = await this.apiService.getPkgMetrics({ id: this.pkgId})
+    } catch (e) {
+      this.stopDaemon()
+      await pauseFor(1000)
+      this.startDaemon()
+    }
   }
 
   ngAfterViewInit () {