Rework install progress types and pipes for clarity (#1513)

* rework install progress types and pipes for clarity

* rework marketplace show display

Co-authored-by: Matt Hill <matthill@Matt-M1.local>

frontend/projects/ui/src/app/components/status/status.component.html

@@ -18,13 +18,12 @@
     >
   </span>
   <span *ngIf="installProgress">
-    <span *ngIf="installProgress < 99">
+    <ion-text
+      *ngIf="installProgress | installProgressDisplay as progress"
+      color="primary"
+    >
       Installing
-      <span class="loading-dots"></span>{{ installProgress }}%
-    </span>
-    <span *ngIf="installProgress >= 99">
-      Finalizing install. This could take a minute
-      <span class="loading-dots"></span>
-    </span>
+      <span class="loading-dots"></span>{{ progress }}
+    </ion-text>
   </span>
 </p>

frontend/projects/ui/src/app/components/status/status.component.module.ts

@@ -3,10 +3,16 @@ import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { UnitConversionPipesModule } from '@start9labs/shared'
 import { StatusComponent } from './status.component'
+import { InstallProgressPipeModule } from 'src/app/pipes/install-progress/install-progress.module'
 
 @NgModule({
   declarations: [StatusComponent],
-  imports: [CommonModule, IonicModule, UnitConversionPipesModule],
+  imports: [
+    CommonModule,
+    IonicModule,
+    UnitConversionPipesModule,
+    InstallProgressPipeModule,
+  ],
   exports: [StatusComponent],
 })
 export class StatusComponentModule {}

frontend/projects/ui/src/app/components/status/status.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { InstallProgress } from 'src/app/services/patch-db/data-model'
 import {
   PrimaryRendering,
   PrimaryStatus,
@@ -19,6 +20,6 @@ export class StatusComponent {
   @Input() style?: string = 'regular'
   @Input() weight?: string = 'normal'
   @Input() disconnected?: boolean = false
-  @Input() installProgress?: number
+  @Input() installProgress?: InstallProgress
   @Input() sigtermTimeout?: string | null = null
 }