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 () {

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

@@ -19,10 +19,8 @@ export class ServerMetricsPage {
   ) { }
 
   ngOnInit () {
-    this.getMetrics().then(() => {
-      this.loading = false
-      this.startDaemon()
-    })
+    this.loading = false
+    this.startDaemon()
   }
 
   ngOnDestroy () {
@@ -32,8 +30,8 @@ export class ServerMetricsPage {
   async startDaemon (): Promise<void> {
     this.going = true
     while (this.going) {
-      await pauseFor(250)
       await this.getMetrics()
+      await pauseFor(250)
     }
   }
 
@@ -44,18 +42,6 @@ export class ServerMetricsPage {
   async getMetrics (): Promise<void> {
     try {
       this.metrics = await this.apiService.getServerMetrics({ })
-
-      // @TODO keeping code in case naive approach (above) has issues
-      // Object.keys(metrics).forEach(outerKey => {
-      //   if (!this.metrics[outerKey]) {
-      //     console.log('outer keys')
-      //     this.metrics[outerKey] = metrics[outerKey]
-      //   } else {
-      //     Object.entries(metrics[outerKey]).forEach(([key, value]) => {
-      //       this.metrics[outerKey][key] = value
-      //     })
-      //   }
-      // })
     } catch (e) {
       console.error(e)
       this.error = e.message