Bugfix/metrics leak (#1008)

* metrics leak potential fix:

* typo

* max of that or zero

* page movement

* animation edit

Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>

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

@@ -4,6 +4,7 @@
       <ion-back-button [defaultHref]="'/services/' + pkgId"></ion-back-button>
     </ion-buttons>
     <ion-title>Monitor</ion-title>
+    <ion-title slot="end"><ion-spinner name="dots" class="fader"></ion-spinner></ion-title>
   </ion-toolbar>
 </ion-header>
 

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

@@ -45,8 +45,9 @@ export class AppMetricsPage {
   async startDaemon (): Promise<void> {
     this.going = true
     while (this.going) {
+      const startTime = Date.now()
       await this.getMetrics()
-      await pauseFor(250)
+      await pauseFor(Math.max(4000 - (Date.now() - startTime), 0))
     }
   }
 

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html

@@ -98,7 +98,7 @@
         <ion-col *ngFor="let pkg of pkgs" sizeXs="12" sizeSm="12" sizeMd="6">
           <ion-item [routerLink]="['/marketplace', pkg.manifest.id]">
             <ion-thumbnail slot="start">
-              <img [src]="pkg.icon" />
+              <img [src]="'/marketplace' + pkg.icon" />
             </ion-thumbnail>
             <ion-label>
               <h2 style="font-family: 'Montserrat'; font-weight: bold;">{{ pkg.manifest.title }}</h2>

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

@@ -4,6 +4,7 @@
       <ion-back-button defaultHref="embassy"></ion-back-button>
     </ion-buttons>
     <ion-title>Monitor</ion-title>
+    <ion-title slot="end"><ion-spinner name="dots" class="fader"></ion-spinner></ion-title>
   </ion-toolbar>
 </ion-header>
 

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

@@ -1,3 +1,3 @@
 .metric-note {
   font-size: 16px;
-}
+}

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

@@ -43,8 +43,9 @@ export class ServerMetricsPage {
   private async startDaemon (): Promise<void> {
     this.going = true
     while (this.going) {
+      const startTime = Date.now()
       await this.getMetrics()
-      await pauseFor(250)
+      await pauseFor(4000 - Math.max(Date.now() - startTime, 0))
     }
   }
 

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

@@ -228,7 +228,7 @@ export class WifiPage {
   private async connect (ssid: string): Promise<void> {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
-      message: 'Connecting. This could take while...',
+      message: 'Connecting. This could take a while...',
       cssClass: 'loader',
     })
     await loader.present()
@@ -287,7 +287,7 @@ export class WifiPage {
   private async saveAndConnect (ssid: string, password: string): Promise<void> {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
-      message: 'Connecting. This could take while...',
+      message: 'Connecting. This could take a while...',
       cssClass: 'loader',
     })
     await loader.present()

ui/src/global.scss

@@ -336,3 +336,13 @@ h2 {
     content: "...";
   }
 }
+
+@keyframes flickerAnimation {
+  0%   { opacity:1; }
+  20%  { opacity:0; }
+  60%  { opacity:0; }
+  100% { opacity:1; }
+}
+.fader {
+  animation: flickerAnimation 4s infinite;
+}