slightly improve health cehck display

ui/src/app/pages/apps-routes/app-show/app-show.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
-import { AppShowPage } from './app-show.page'
+import { AppShowPage, HealthColorPipe } from './app-show.page'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 import { InstallWizardComponentModule } from 'src/app/components/install-wizard/install-wizard.component.module'
@@ -17,6 +17,10 @@ const routes: Routes = [
 ]
 
 @NgModule({
+  declarations: [
+    AppShowPage,
+    HealthColorPipe,
+  ],
   imports: [
     CommonModule,
     StatusComponentModule,
@@ -27,7 +31,6 @@ const routes: Routes = [
     SharingModule,
     MarkdownPageModule,
   ],
-  declarations: [AppShowPage],
 })
 export class AppShowPageModule { }
 

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

@@ -66,7 +66,7 @@
             </ion-item>
           </ng-container>
           <ng-container *ngIf="!connectionFailure">
-            <ion-item button (click)="presentModalDescription(pkg.manifest['health-checks'][health.key].name, pkg.manifest['health-checks'][health.key].description)" *ngFor="let health of healthChecks | keyvalue : asIsOrder">
+            <ion-item button *ngFor="let health of healthChecks | keyvalue : asIsOrder" (click)="presentAlertDescription(health.key)">
               <ng-container *ngIf="health.value?.result as result; else noResult">
                 <ion-spinner class="icon-spinner" color="primary" slot="start" *ngIf="[HealthResult.Starting, HealthResult.Loading] | includes : result"></ion-spinner>
                 <ion-icon slot="start" *ngIf="result === HealthResult.Success" name="checkmark" color="success"></ion-icon>
@@ -74,9 +74,14 @@
                 <ion-icon slot="start" *ngIf="result === HealthResult.Disabled" name="remove" color="dark"></ion-icon>
                 <ion-label>
                   <h2 style="font-weight: bold;">{{ pkg.manifest['health-checks'][health.key].name }}</h2>
-                  <h2>Result: {{ result | titlecase }}</h2>
-                  <p *ngIf="result === HealthResult.Loading"><ion-text color="primary">{{ $any(health.value).message }}</ion-text></p>
-                  <p *ngIf="result === HealthResult.Failure"><ion-text color="warning">{{ $any(health.value).error }}</ion-text></p>
+                  <ion-text [color]="result | healthColor">
+                    <p>
+                      <span *ngIf="!([HealthResult.Failure, HealthResult.Loading] | includes : result)">{{ result | titlecase }}</span>
+                      <span *ngIf="result === HealthResult.Starting">...</span>
+                      <span *ngIf="result === HealthResult.Failure">{{ $any(health.value).error }}</span>
+                      <span *ngIf="result === HealthResult.Loading">{{ $any(health.value).message }}</span>
+                    </p>
+                  </ion-text>
                 </ion-label>
               </ng-container>
               <ng-template #noResult>

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

@@ -16,6 +16,7 @@ import { AppConfigPage } from 'src/app/modals/app-config/app-config.page'
 import { PackageLoadingService, ProgressData } from 'src/app/services/package-loading.service'
 import { filter } from 'rxjs/operators'
 import { MarkdownPage } from 'src/app/modals/markdown/markdown.page'
+import { Pipe, PipeTransform } from '@angular/core'
 
 @Component({
   selector: 'app-show',
@@ -231,15 +232,18 @@ export class AppShowPage {
     await modal.present()
   }
 
-  async presentModalDescription (name: string, description: string) {
+  async presentAlertDescription (id: string) {
+    const health = this.pkg.manifest['health-checks'][id]
+
     const alert = await this.alertCtrl.create({
-      header: name,
-      message: description,
+      header: 'Health Check',
+      subHeader: health.name,
+      message: health.description,
       buttons: [
         {
           text: `OK`,
           handler: () => {
-            this.modalCtrl.dismiss()
+            alert.dismiss()
           },
           cssClass: 'enter-click',
         },
@@ -466,3 +470,19 @@ interface Button {
   color: string
   action: Function
 }
+
+
+@Pipe({
+  name: 'healthColor',
+})
+export class HealthColorPipe implements PipeTransform {
+  transform (val: HealthResult): string {
+    switch (val) {
+      case HealthResult.Success: return 'success'
+      case HealthResult.Failure: return 'warning'
+      case HealthResult.Disabled: return 'dark'
+      case HealthResult.Starting:
+      case HealthResult.Loading: return 'primary'
+    }
+  }
+}