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/README.md

@@ -63,7 +63,7 @@ This section enables you to run a local frontend with a remote backend (eg. host
 2. Create a proxy configuration file from the sample:
 
 ```sh
-cp proxy.conf.json.sample proxy.conf.json
+cp proxy.conf-sample.json proxy.conf.json
 ```
 
 3. Change the target address to desired IP address in `proxy.conf.json`

frontend/projects/marketplace/src/pages/show/package/package.component.html

@@ -1,22 +1,12 @@
-<ion-grid>
-  <ion-row>
-    <ion-col sizeXs="12" sizeSm="12" sizeMd="9" sizeLg="9" sizeXl="9">
-      <div class="header montserrat">
-        <img
-          class="logo"
-          alt=""
-          [src]="'data:image/png;base64,' + pkg.icon | trustUrl"
-        />
-        <div class="text">
-          <h1 class="title">{{ pkg.manifest.title }}</h1>
-          <p class="version">{{ pkg.manifest.version | displayEmver }}</p>
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </ion-col>
-    <ion-col sizeMd="3" sizeXs="12" class="ion-align-self-center">
-      <ng-content select="[position=controls]"></ng-content>
-    </ion-col>
-  </ion-row>
-  <ng-content select="ion-row"></ng-content>
-</ion-grid>
+<div class="header montserrat">
+  <img
+    class="logo"
+    alt=""
+    [src]="'data:image/png;base64,' + pkg.icon | trustUrl"
+  />
+  <div class="text">
+    <h1 class="title">{{ pkg.manifest.title }}</h1>
+    <p class="version">{{ pkg.manifest.version | displayEmver }}</p>
+    <ng-content></ng-content>
+  </div>
+</div>

frontend/projects/marketplace/src/pages/show/package/package.component.scss

@@ -1,25 +1,38 @@
 .header {
-  padding: 2%;
-}
-
-.logo {
-  min-width: 15%;
-  max-width: 18%;
+  padding: 16px;
 }
 
 .text {
-  margin-left: 5%;
   display: inline-block;
   vertical-align: top;
 }
 
+.logo {
+  width: 80px;
+  margin-right: 16px;
+}
+
 .title {
   margin: 0 0 0 -2px;
-  font-size: calc(20px + 3vw);
+  font-size: 36px;
 }
 
 .version {
   padding: 4px 0 12px 0;
   margin: 0;
-  font-size: calc(10px + 1vw);
+  font-size: 18px;
+}
+
+@media (min-width: 1000px) {
+  .logo {
+    width: 140px;
+  }
+
+  .title {
+    font-size: 64px;
+  }
+
+  .version {
+    font-size: 32px;
+  }
 }

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
 }

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

@@ -13,7 +13,7 @@ <h2>{{ manifest.title }}</h2>
     <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 @@ <h2>{{ pkg.entry.manifest.title }}</h2>
           <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/install-state.pipe.ts → 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 {