Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 20:14:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Progress bar (#377)

Browse Source 
* looking for unnecessary watches

* on init data initialization

* prog pipe

* install progress everywhere

* titlecase status

* include updateing state in app show for install progress

Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
This commit is contained in:
Drew Ansbacher
2021-07-22 16:14:57 -06:00
committed by Aiden McClelland
parent dc923ea6fb
commit 4c294566d7
17 changed files with 120 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts
View File

@@ -26,7 +26,7 @@ export class AppInstructionsPage {
async ngOnInit () {
const pkgId = this.route.snapshot.paramMap.get('pkgId')
const url = this.patch.data['package-data'][pkgId]['static-files'].instructions
const url = this.patch.getData()['package-data'][pkgId]['static-files'].instructions
try {
this.instructions = await this.embassyApi.getStatic(url)

3
ui/src/app/pages/apps-routes/app-list/app-list.page.html
View File

@@ -36,7 +36,8 @@
<img *ngIf="!connectionFailure" [class]="pkg.value.bulb.class" [src]="pkg.value.bulb.img" />
<ion-card-header>
<status [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
<status *ngIf="[PackageState.Installed, PackageState.Removing] | includes : pkg.value.entry.state" [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
<p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.value.entry.state" class="installing-status"><ion-text color="primary">{{ pkg.value.entry.state | titlecase }}...{{ (pkg.value.entry['install-progress'] | installState).totalProgress }}%</ion-text></p>
<ion-card-title>{{ pkg.value.entry.manifest.title }}</ion-card-title>
</ion-card-header>
</ion-card>

6
ui/src/app/pages/apps-routes/app-list/app-list.page.scss
View File

@@ -78,3 +78,9 @@
position: absolute;
right: 0px;
}
.installing-status {
font-size: calc(8px + .4vw);
font-weight: bold;
margin: 0;
}

6
ui/src/app/pages/apps-routes/app-list/app-list.page.ts
View File

@@ -2,10 +2,10 @@ import { Component } from '@angular/core'
import { ConfigService } from 'src/app/services/config.service'
import { ConnectionFailure, ConnectionService } from 'src/app/services/connection.service'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
import { Subscription } from 'rxjs'
import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
import { distinctUntilChanged, filter } from 'rxjs/operators'
import { filter } from 'rxjs/operators'
@Component({
selector: 'app-list',
@@ -24,6 +24,7 @@ export class AppListPage {
statusRendering: PkgStatusRendering | null
sub: Subscription | null
}} = { }
PackageState = PackageState
constructor (
private readonly config: ConfigService,
@@ -41,7 +42,6 @@ export class AppListPage {
)
.subscribe(pkgs => {
const ids = Object.keys(pkgs)
console.log('PKGSPKGS', ids)
Object.keys(this.pkgs).forEach(id => {
if (!ids.includes(id)) {

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

@@ -25,7 +25,7 @@
<h5>{{ pkg.manifest.version | displayEmver }}</h5>
</ion-label>
</ion-item>
<div class="status-readout">
<status size="large" weight="500" [rendering]="rendering"></status>
<ion-button *ngIf="rendering.feStatus === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
@@ -41,13 +41,36 @@
Start
</ion-button>
</div>
<ion-button size="small" *ngIf="pkg | hasUi" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
Launch Web Interface
<ion-icon slot="end" name="rocket-outline"></ion-icon>
</ion-button>
<ng-container *ngIf="pkg.state === PackageState.Installed">
<ion-button size="small" *ngIf="(pkg | hasUi)" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
Launch Web Interface
<ion-icon slot="end" name="rocket-outline"></ion-icon>
</ion-button>
</ng-container>
</div>
<div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
<p>Downloading: {{ (pkg['install-progress'] | installState).downloadProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).downloadProgress / 100"
></ion-progress-bar>
<p>Validating: {{ (pkg['install-progress'] | installState).validateProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).validateProgress / 100"
></ion-progress-bar>
<p>Installing: {{ (pkg['install-progress'] | installState).unpackProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).unpackProgress / 100"
></ion-progress-bar>
</div>
<ng-container *ngIf="!([FeStatus.Installing, FeStatus.Updating, FeStatus.Removing] | includes : rendering.feStatus)">
<ion-grid class="ion-text-center" style="margin: 0 6px;">
<ion-row>

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

@@ -28,6 +28,7 @@ export class AppShowPage {
PackageState = PackageState
DependencyErrorType = DependencyErrorType
rendering: PkgStatusRendering
Math = Math
@ViewChild(IonContent) content: IonContent
subs: Subscription[] = []

15
ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
View File

@@ -58,17 +58,12 @@
<ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 0" color="success">Installed</ion-text>
<ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
</p>
<p *ngIf="localPkg.state === PackageState.Installing" style="display: flex; flex-direction: row; align-items: center;">
<ion-text color="primary">Installing</ion-text>
<ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
<p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
<ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).totalProgress }}%</ion-text>
</p>
<p *ngIf="localPkg.state === PackageState.Updating" style="display: flex; flex-direction: row; align-items: center;">
<ion-text color="primary">Updating</ion-text>
<ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
</p>
<p *ngIf="localPkg.state === PackageState.Removing" style="display: flex; flex-direction: row; align-items: center;">
<ion-text color="danger">Removing</ion-text>
<ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="danger"></ion-spinner>
<p *ngIf="localPkg.state === PackageState.Removing">
<ion-text color="warning">{{ localPkg.state | Removing }}</ion-text>
<ion-spinner name="dots" color="warning"></ion-spinner>
</p>
</ng-container>
</ion-label>

42
ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
View File

@@ -25,41 +25,43 @@
<h1 class="header-title">{{ pkg.manifest.title }}</h1>
<p class="header-version">{{ pkg.manifest.version | displayEmver }}</p>
<div class="header-status">
<!-- no installedPkg -->
<p *ngIf="!installedPkg; else local">
<!-- no localPkg -->
<p *ngIf="!localPkg; else local">
<ion-text color="medium">Not Installed</ion-text>
</p>
<!-- installedPkg -->
<!-- localPkg -->
<ng-template #local>
<p *ngIf="installedPkg.state !== PackageState.Installed; else installed">
<!-- installing, updating, removing -->
<ion-text [color]="installedPkg.state === PackageState.Removing ? 'danger' : 'primary'">{{ installedPkg.state }}</ion-text>
<ion-spinner class="dots dots-medium" name="dots" [color]="installedPkg.state === PackageState.Removing ? 'danger' : 'primary'"></ion-spinner>
</p>
<!-- installed -->
<ng-template #installed>
<p>
<ion-text color="medium">Installed at {{ installedPkg.manifest.version | displayEmver }}</ion-text>
</p>
</ng-template>
<p *ngIf="localPkg.state === PackageState.Installed">
<ion-text color="medium">Installed at {{ localPkg.manifest.version | displayEmver }}</ion-text>
</p>
<!-- installing, updating -->
<p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
<ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).totalProgress }}%</ion-text>
</p>
<!-- removing -->
<p *ngIf="localPkg.state === PackageState.Removing">
<ion-text color="warning">{{ localPkg.state | titlecase }}</ion-text>
<ion-spinner name="dots" color="warning"></ion-spinner>
</p>
</ng-template>
</div>
</div>
</div>
</ion-col>
<ion-col sizeXl="3" sizeLg="3" sizeMd="3" sizeSm="12" sizeXs="12" class="ion-align-self-center">
<!-- no installedPkg -->
<ion-button *ngIf="!installedPkg; else installedPkg2" class="main-action-button" expand="block" (click)="install()">
<!-- no localPkg -->
<ion-button *ngIf="!localPkg; else localPkg2" class="main-action-button" expand="block" (click)="install()">
Install
</ion-button>
<!-- installedPkg -->
<ng-template #installedPkg2>
<!-- localPkg -->
<ng-template #localPkg2>
<!-- not installing, updating, or removing -->
<ng-container *ngIf="installedPkg.state === PackageState.Installed">
<ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
<ng-container *ngIf="localPkg.state === PackageState.Installed">
<ion-button *ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
Update
</ion-button>
<ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
<ion-button *ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
Downgrade
</ion-button>
</ng-container>

2
ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss
View File

@@ -21,7 +21,7 @@
.header-status {
p {
margin: 0;
font-size: calc(6px + 1vw)
font-size: calc(16px + 1vw)
}
}
}

4
ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
View File

@@ -22,7 +22,7 @@ export class MarketplaceShowPage {
@ViewChild(IonContent) content: IonContent
loading = true
pkgId: string
installedPkg: PackageDataEntry
localPkg: PackageDataEntry
PackageState = PackageState
rec: Recommendation | null = null
showRec = true
@@ -48,7 +48,7 @@ export class MarketplaceShowPage {
this.subs = [
this.patch.watch$('package-data', this.pkgId)
.subscribe(pkg => {
this.installedPkg = pkg
this.localPkg = pkg
}),
]