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 @@
     <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/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 {}

frontend/projects/ui/src/app/pipes/install-progress/install-progress.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core'
+import { InstallProgressPipe } from './install-progress.pipe'
+
+@NgModule({
+  declarations: [InstallProgressPipe],
+  exports: [InstallProgressPipe],
+})
+export class InstallProgressPipeModule {}

frontend/projects/ui/src/app/pipes/install-progress/install-progress.pipe.ts

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

frontend/projects/ui/src/app/pipes/launchable/launchable.pipe.ts

@@ -1,8 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { PackageState } from 'src/app/types/package-state'
 import {
   InterfaceDef,
   PackageMainStatus,
+  PackageState,
 } from 'src/app/services/patch-db/data-model'
 import { ConfigService } from '../../services/config.service'
 

frontend/projects/ui/src/app/services/api/api.fixures.ts

@@ -1,10 +1,10 @@
-import { PackageState } from 'src/app/types/package-state'
 import {
   DependencyErrorType,
   DockerIoFormat,
   Manifest,
   PackageDataEntry,
   PackageMainStatus,
+  PackageState,
 } from 'src/app/services/patch-db/data-model'
 import {
   Log,

frontend/projects/ui/src/app/services/api/embassy-mock-api.service.ts

@@ -2,13 +2,13 @@ import { Injectable } from '@angular/core'
 import { pauseFor } from '@start9labs/shared'
 import { ApiService } from './embassy-api.service'
 import { PatchOp, Update, Operation, RemoveOperation } from 'patch-db-client'
-import { PackageState } from 'src/app/types/package-state'
-import { InstallProgress } from 'src/app/types/install-progress'
 import {
   DataModel,
   DependencyErrorType,
+  InstallProgress,
   PackageDataEntry,
   PackageMainStatus,
+  PackageState,
   ServerStatus,
 } from 'src/app/services/patch-db/data-model'
 import { CifsBackupTarget, Log, RR, WithRevision } from './api.types'
@@ -690,7 +690,14 @@ export class MockApiService extends ApiService {
     params: RR.DryUninstallPackageReq,
   ): Promise<RR.DryUninstallPackageRes> {
     await pauseFor(2000)
-    return {}
+    return {
+      lnd: {
+        dependency: 'bitcoind',
+        error: {
+          type: DependencyErrorType.NotRunning,
+        },
+      },
+    }
   }
 
   async uninstallPackageRaw(

frontend/projects/ui/src/app/services/api/mock-patch.ts

@@ -1,4 +1,3 @@
-import { PackageState } from 'src/app/types/package-state'
 import {
   DataModel,
   DependencyErrorType,
@@ -6,6 +5,7 @@ import {
   HealthResult,
   Manifest,
   PackageMainStatus,
+  PackageState,
 } from 'src/app/services/patch-db/data-model'
 
 export const mockPatchData: DataModel = {
@@ -445,7 +445,7 @@ export const mockPatchData: DataModel = {
         'donation-url': null,
         alerts: {
           install: null,
-          uninstall: null,
+          uninstall: undefined,
           restore:
             'If this is a duplicate instance of the same LND node, you may loose your funds.',
           start: 'Starting LND is good for your health.',

frontend/projects/ui/src/app/services/config.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core'
 import { WorkspaceConfig } from '@start9labs/shared'
-import { PackageState } from 'src/app/types/package-state'
 import {
   InterfaceDef,
   PackageDataEntry,
   PackageMainStatus,
+  PackageState,
 } from 'src/app/services/patch-db/data-model'
 
 const {

frontend/projects/ui/src/app/services/patch-db/data-model.ts

@@ -2,8 +2,6 @@ import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { Url } from '@start9labs/shared'
 import { MarketplaceManifest } from '@start9labs/marketplace'
 import { BasicInfo } from 'src/app/pages/developer-routes/developer-menu/form-info'
-import { PackageState } from 'src/app/types/package-state'
-import { InstallProgress } from 'src/app/types/install-progress'
 
 export interface DataModel {
   'server-info': ServerInfo
@@ -86,6 +84,14 @@ export interface PackageDataEntry {
   'install-progress'?: InstallProgress // exists when: installing, updating
 }
 
+export enum PackageState {
+  Installing = 'installing',
+  Installed = 'installed',
+  Updating = 'updating',
+  Removing = 'removing',
+  Restoring = 'restoring',
+}
+
 export interface InstalledPackageDataEntry {
   status: Status
   manifest: Manifest
@@ -356,3 +362,13 @@ export interface DependencyErrorHealthChecksFailed {
 export interface DependencyErrorTransitive {
   type: DependencyErrorType.Transitive
 }
+
+export interface InstallProgress {
+  readonly size: number | null
+  readonly downloaded: number
+  readonly 'download-complete': boolean
+  readonly validated: number
+  readonly 'validation-complete': boolean
+  readonly unpacked: number
+  readonly 'unpack-complete': boolean
+}

frontend/projects/ui/src/app/services/pkg-status-rendering.service.ts

@@ -1,8 +1,8 @@
 import { isEmptyObject } from '@start9labs/shared'
-import { PackageState } from 'src/app/types/package-state'
 import {
   PackageDataEntry,
   PackageMainStatus,
+  PackageState,
   Status,
 } from 'src/app/services/patch-db/data-model'
 

frontend/projects/ui/src/app/types/install-progress.ts

@@ -1,9 +0,0 @@
-export interface InstallProgress {
-  readonly size: number | null
-  readonly downloaded: number
-  readonly 'download-complete': boolean
-  readonly validated: number
-  readonly 'validation-complete': boolean
-  readonly unpacked: number
-  readonly 'unpack-complete': boolean
-}

frontend/projects/ui/src/app/types/package-state.ts

@@ -1,7 +0,0 @@
-export enum PackageState {
-  Installing = 'installing',
-  Installed = 'installed',
-  Updating = 'updating',
-  Removing = 'removing',
-  Restoring = 'restoring',
-}

frontend/projects/ui/src/app/util/package-loading-progress.ts

@@ -1,6 +1,6 @@
 import { isEmptyObject } from '@start9labs/shared'
-import { InstallProgress } from 'src/app/types/install-progress'
 import { ProgressData } from 'src/app/types/progress-data'
+import { InstallProgress } from '../services/patch-db/data-model'
 
 export function packageLoadingProgress(
   loadData?: InstallProgress,

frontend/proxy.conf-sample.json

@@ -0,0 +1,16 @@
+{
+  "/rpc/v1": {
+    "target": "http://<CHANGE_ME>/rpc/v1"
+  },
+  "/ws/*": {
+    "target": "http://<CHANGE_ME>",
+    "secure": false,
+    "ws": true
+  },
+  "/public/*": {
+    "target": "http://<CHANGE_ME>/public",
+    "pathRewrite": {
+      "^/public": ""
+    }
+  }
+}

frontend/proxy.conf.json.sample

@@ -1,14 +0,0 @@
-{
-    "/rpc/v1": {
-        "target": "http://localhost:8100/rpc/v1"
-    },
-    "/ws": {
-        "target": "http://localhost:8100/ws"
-    },
-    "/public/*": {
-        "target": "http://localhost:8100/public",
-        "pathRewrite": {
-            "^/public": ""
-        }
-    }
-}