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/pages/apps-routes/app-list/app-list-pkg/app-list-pkg.component.html

@@ -13,7 +13,7 @@
     <status
       [disconnected]="connectionFailure"
       [rendering]="pkg.primaryRendering"
-      [installProgress]="pkg.installProgress?.totalProgress"
+      [installProgress]="pkg.entry['install-progress']"
       weight="bold"
       size="small"
       [sigtermTimeout]="manifest.main['sigterm-timeout']"

frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html

@@ -38,7 +38,7 @@
           <status
             [disconnected]="!!(connectionFailure$ | async)"
             [rendering]="pkg.primaryRendering"
-            [installProgress]="pkg.installProgress?.totalProgress"
+            [installProgress]="pkg.entry['install-progress']"
             weight="bold"
             size="small"
             [sigtermTimeout]="pkg.entry.manifest.main['sigterm-timeout']"

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

@@ -20,7 +20,7 @@ import { ToHealthChecksPipe } from './pipes/to-health-checks.pipe'
 import { ToButtonsPipe } from './pipes/to-buttons.pipe'
 import { ToDependenciesPipe } from './pipes/to-dependencies.pipe'
 import { ToStatusPipe } from './pipes/to-status.pipe'
-import { InstallStatePipe } from './pipes/install-state.pipe'
+import { ProgressDataPipe } from './pipes/progress-data.pipe'
 
 const routes: Routes = [
   {
@@ -33,7 +33,7 @@ const routes: Routes = [
   declarations: [
     AppShowPage,
     HealthColorPipe,
-    InstallStatePipe,
+    ProgressDataPipe,
     ToHealthChecksPipe,
     ToButtonsPipe,
     ToDependenciesPipe,

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

@@ -31,9 +31,9 @@
     <!-- ** installing, updating, restoring ** -->
     <ion-content *ngIf="showProgress(pkg)">
       <app-show-progress
-        *ngIf="pkg | installState as installProgress"
+        *ngIf="pkg | progressData as progressData"
         [pkg]="pkg"
-        [installProgress]="installProgress"
+        [progressData]="progressData"
       ></app-show-progress>
     </ion-content>
   </ion-content>

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

@@ -1,8 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { NavController } from '@ionic/angular'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { PackageState } from 'src/app/types/package-state'
+import {
+  PackageDataEntry,
+  PackageState,
+} from 'src/app/services/patch-db/data-model'
 import {
   PackageStatus,
   PrimaryStatus,

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-progress/app-show-progress.component.html

@@ -1,20 +1,20 @@
-<p>Downloading: {{ installProgress.downloadProgress }}%</p>
+<p>Downloading: {{ progressData.downloadProgress }}%</p>
 <ion-progress-bar
   [color]="getColor('download-complete')"
-  [value]="installProgress.downloadProgress / 100"
-  [buffer]="!installProgress.downloadProgress ? 0 : 1"
+  [value]="progressData.downloadProgress / 100"
+  [buffer]="!progressData.downloadProgress ? 0 : 1"
 ></ion-progress-bar>
 
-<p>Validating: {{ installProgress.validateProgress }}%</p>
+<p>Validating: {{ progressData.validateProgress }}%</p>
 <ion-progress-bar
   [color]="getColor('validation-complete')"
-  [value]="installProgress.validateProgress / 100"
+  [value]="progressData.validateProgress / 100"
   [buffer]="validationBuffer"
 ></ion-progress-bar>
 
-<p>Unpacking: {{ installProgress.unpackProgress }}%</p>
+<p>Unpacking: {{ progressData.unpackProgress }}%</p>
 <ion-progress-bar
   [color]="getColor('unpack-complete')"
-  [value]="installProgress.unpackProgress / 100"
+  [value]="progressData.unpackProgress / 100"
   [buffer]="unpackingBuffer"
 ></ion-progress-bar>

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-progress/app-show-progress.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { InstallProgress } from 'src/app/types/install-progress'
+import {
+  InstallProgress,
+  PackageDataEntry,
+} from 'src/app/services/patch-db/data-model'
 import { ProgressData } from 'src/app/types/progress-data'
 
 @Component({
@@ -14,18 +16,18 @@ export class AppShowProgressComponent {
   pkg: PackageDataEntry
 
   @Input()
-  installProgress: ProgressData
+  progressData: ProgressData
 
   get unpackingBuffer(): number {
-    return this.installProgress.validateProgress === 100 &&
-      !this.installProgress.unpackProgress
+    return this.progressData.validateProgress === 100 &&
+      !this.progressData.unpackProgress
       ? 0
       : 1
   }
 
   get validationBuffer(): number {
-    return this.installProgress.downloadProgress === 100 &&
-      !this.installProgress.validateProgress
+    return this.progressData.downloadProgress === 100 &&
+      !this.progressData.validateProgress
       ? 0
       : 1
   }

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.html

@@ -5,7 +5,7 @@
       size="x-large"
       weight="500"
       [disconnected]="connectionFailure"
-      [installProgress]="(pkg | installState)?.totalProgress"
+      [installProgress]="pkg['install-progress']"
       [rendering]="PR[status.primary]"
       [sigtermTimeout]="pkg.manifest.main['sigterm-timeout']"
     ></status>

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts

@@ -8,10 +8,10 @@ import {
 import {
   InterfaceDef,
   PackageDataEntry,
+  PackageState,
   Status,
 } from 'src/app/services/patch-db/data-model'
 import { ErrorToastService } from '@start9labs/shared'
-import { PackageState } from 'src/app/types/package-state'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import {
   AlertController,

frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/progress-data.pipe.ts

@@ -4,9 +4,9 @@ import { ProgressData } from 'src/app/types/progress-data'
 import { packageLoadingProgress } from 'src/app/util/package-loading-progress'
 
 @Pipe({
-  name: 'installState',
+  name: 'progressData',
 })
-export class InstallStatePipe implements PipeTransform {
+export class ProgressDataPipe implements PipeTransform {
   transform(pkg: PackageDataEntry): ProgressData | null {
     return packageLoadingProgress(pkg['install-progress'])
   }

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.html

@@ -1,33 +1,46 @@
-<ng-container *ngIf="localPkg; else install">
-  <!-- not installing, updating, or removing -->
-  <ng-container *ngIf="localPkg.state === PackageState.Installed">
-    <ion-button
-      *ngIf="(version | compareEmver: pkg.manifest.version) === -1"
-      expand="block"
-      (click)="presentModal('update')"
-    >
-      Update
-    </ion-button>
-    <ion-button
-      *ngIf="(version | compareEmver: pkg.manifest.version) === 1"
-      expand="block"
-      color="warning"
-      (click)="presentModal('downgrade')"
-    >
-      Downgrade
-    </ion-button>
-    <ng-container *ngIf="localStorageService.showDevTools$ | async">
+<div class="action-buttons">
+  <ion-button
+    *ngIf="localPkg"
+    expand="block"
+    color="primary"
+    [routerLink]="['/services', pkg.manifest.id]"
+  >
+    View Installed
+  </ion-button>
+  <ng-container *ngIf="localPkg; else install">
+    <ng-container *ngIf="localPkg.state === PackageState.Installed">
       <ion-button
-        *ngIf="(version | compareEmver: pkg.manifest.version) === 0"
+        *ngIf="(version | compareEmver: pkg.manifest.version) === -1"
         expand="block"
-        (click)="tryInstall()"
+        color="success"
+        (click)="presentModal('update')"
       >
-        Reinstall
+        Update
       </ion-button>
+      <ion-button
+        *ngIf="(version | compareEmver: pkg.manifest.version) === 1"
+        expand="block"
+        color="warning"
+        (click)="presentModal('downgrade')"
+      >
+        Downgrade
+      </ion-button>
+      <ng-container *ngIf="localStorageService.showDevTools$ | async">
+        <ion-button
+          *ngIf="(version | compareEmver: pkg.manifest.version) === 0"
+          expand="block"
+          color="success"
+          (click)="tryInstall()"
+        >
+          Reinstall
+        </ion-button>
+      </ng-container>
     </ng-container>
   </ng-container>
-</ng-container>
 
-<ng-template #install>
-  <ion-button expand="block" (click)="tryInstall()">Install</ion-button>
-</ng-template>
+  <ng-template #install>
+    <ion-button expand="block" color="success" (click)="tryInstall()">
+      Install
+    </ion-button>
+  </ng-template>
+</div>

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.ts

@@ -6,10 +6,10 @@ import {
 } from '@start9labs/marketplace'
 import { pauseFor } from '@start9labs/shared'
 
-import { PackageState } from 'src/app/types/package-state'
 import {
   Manifest,
   PackageDataEntry,
+  PackageState,
 } from 'src/app/services/patch-db/data-model'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
@@ -18,6 +18,7 @@ import { LocalStorageService } from 'src/app/services/local-storage.service'
 @Component({
   selector: 'marketplace-show-controls',
   templateUrl: 'marketplace-show-controls.component.html',
+  styleUrls: ['./marketplace-show-controls.page.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MarketplaceShowControlsComponent {

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.page.scss

@@ -0,0 +1,19 @@
+ion-button::part(native) {
+  font-size: 17px;
+}
+
+ion-button {
+  height: 44px;
+  margin: 16px;
+}
+
+@media (min-width: 1000px) {
+
+  .action-buttons {
+    display: flex;
+  }
+
+  ion-button {
+    width: 240px;
+  }
+}

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html

@@ -3,37 +3,11 @@
 <ion-content class="ion-padding">
   <ng-container *ngIf="pkg$ | async as pkg else loading">
     <ng-container *ngIf="!(pkg | empty)">
-      <marketplace-package [pkg]="pkg">
-        <marketplace-status
-          *ngIf="localPkg$ | async as localPkg"
-          class="status"
-          [localPkg]="localPkg"
-        ></marketplace-status>
-        <marketplace-show-controls
-          position="controls"
-          [pkg]="pkg"
-          [localPkg]="localPkg$ | async"
-        ></marketplace-show-controls>
-        <ion-row *ngIf="localPkg$ | async">
-          <ion-col
-            sizeXl="3"
-            sizeLg="3"
-            sizeMd="3"
-            sizeSm="12"
-            sizeXs="12"
-            class="ion-align-self-center"
-          >
-            <ion-button
-              expand="block"
-              fill="outline"
-              color="primary"
-              [routerLink]="['/services', pkg.manifest.id]"
-            >
-              View Service
-            </ion-button>
-          </ion-col>
-        </ion-row>
-      </marketplace-package>
+      <marketplace-package [pkg]="pkg"></marketplace-package>
+      <marketplace-show-controls
+        [pkg]="pkg"
+        [localPkg]="localPkg$ | async"
+      ></marketplace-show-controls>
 
       <marketplace-show-dependent [pkg]="pkg"></marketplace-show-dependent>
 

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/install-progress.pipe.ts

@@ -1,14 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-import { InstallProgress } from 'src/app/types/install-progress'
-import { packageLoadingProgress } from 'src/app/util/package-loading-progress'
-
-@Pipe({
-  name: 'installProgress',
-})
-export class InstallProgressPipe implements PipeTransform {
-  transform(loadData?: InstallProgress): string {
-    const totalProgress = packageLoadingProgress(loadData)?.totalProgress || 0
-
-    return totalProgress < 99 ? totalProgress + '%' : 'finalizing'
-  }
-}

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.html

@@ -21,7 +21,7 @@
   </div>
   <div *ngSwitchDefault>
     <ion-text
-      *ngIf="localPkg['install-progress'] | installProgress as progress"
+      *ngIf="localPkg['install-progress'] | installProgressDisplay as progress"
       color="primary"
     >
       Installing

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.ts

@@ -1,6 +1,8 @@
 import { Component, Input } from '@angular/core'
-import { PackageState } from 'src/app/types/package-state'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import {
+  PackageDataEntry,
+  PackageState,
+} from 'src/app/services/patch-db/data-model'
 
 @Component({
   selector: 'marketplace-status',

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.module.ts

@@ -3,12 +3,17 @@ import { NgModule } from '@angular/core'
 import { IonicModule } from '@ionic/angular'
 import { EmverPipesModule } from '@start9labs/shared'
 
-import { InstallProgressPipe } from './install-progress.pipe'
+import { InstallProgressPipeModule } from '../../../pipes/install-progress/install-progress.module'
 import { MarketplaceStatusComponent } from './marketplace-status.component'
 
 @NgModule({
-  imports: [CommonModule, IonicModule, EmverPipesModule],
-  declarations: [MarketplaceStatusComponent, InstallProgressPipe],
+  imports: [
+    CommonModule,
+    IonicModule,
+    EmverPipesModule,
+    InstallProgressPipeModule,
+  ],
+  declarations: [MarketplaceStatusComponent],
   exports: [MarketplaceStatusComponent],
 })
 export class MarketplaceStatusModule {}