Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-26 10:21:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

better subscriptions

Browse Source
This commit is contained in:
Matt Hill
2021-07-12 16:43:50 -06:00
committed by Aiden McClelland
parent aa976e362d
commit 15eb13e156
33 changed files with 203 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/package.json
View File

@@ -24,7 +24,6 @@
"@ionic/angular": "^5.6.0",
"@ionic/storage": "^3.0.0",
"@ionic/storage-angular": "^3.0.0",
"@ngrx/component": "^11.1.1",
"@start9labs/emver": "^0.1.4",
"ajv": "^6.12.6",
"angularx-qrcode": "^11.0.0",

2
ui/src/app/components/install-wizard/alert/alert.component.html
View File

@@ -5,6 +5,6 @@
{{ params.title }}
</ion-label>
</div>
<div class="long-message" [innerHTML]="params.notes | markdown"></div>
<div class="long-message" [innerHTML]="params.message | markdown"></div>
</div>
</div>

2
ui/src/app/components/install-wizard/alert/alert.component.ts
View File

@@ -9,8 +9,8 @@ import { Loadable } from '../loadable'
})
export class AlertComponent implements OnInit, Loadable {
@Input() params: {
alert: string
title: string
message: string
titleColor: string
}

10
ui/src/app/components/install-wizard/complete/complete.component.html
View File

@@ -1,17 +1,17 @@
<div *ngIf="!(loading$ | ngrxPush) && !params.skipCompletionDialogue" class="slide-content">
<div *ngIf="!(loading$ | async) && !params.skipCompletionDialogue" class="slide-content">
<div style="margin-top: 25px;">
<div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
<ion-label [color]="$color$ | ngrxPush" style="font-size: xx-large; font-weight: bold;">
{{successText}}
<ion-label [color]="color$ | async" style="font-size: xx-large; font-weight: bold;">
{{ successText }}
</ion-label>
</div>
<div class="long-message">
{{summary}}
{{ summary }}
</div>
</div>
</div>
<div *ngIf="loading$ | ngrxPush" class="center-spinner">
<div *ngIf="loading$ | async" class="center-spinner">
<ion-spinner color="warning" name="lines"></ion-spinner>
<ion-label class="long-message">{{label}}</ion-label>
</div>

73
ui/src/app/components/install-wizard/dependents/dependents.component.html
View File

@@ -1,42 +1,41 @@
<div>
<div *ngIf="!(loading$ | ngrxPush)" class="slide-content">
<div style="margin-top: 25px;">
<div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
<ion-label color="warning" style="font-size: xx-large; font-weight: bold;"
*ngIf="hasDependentViolation">
WARNING
</ion-label>
<ion-label color="success" style="font-size: x-large; font-weight: bold; text-transform: capitalize;"
*ngIf="!hasDependentViolation">
READY
</ion-label>
</div>
<div *ngIf="loading$ | async" class="center-spinner">
<ion-spinner color="warning" name="lines"></ion-spinner>
<ion-label class="long-message">Checking for installed services which depend on {{ params.title }}...</ion-label>
</div>
<div *ngIf="longMessage" class="long-message" >
{{longMessage}}
</div>
<div style="margin: 25px 0px;">
<div style="border-width: 0px 0px 1px 0px; font-size: unset; text-align: left; font-weight: bold; margin-left: 13px; border-style: solid; border-color: var(--ion-color-light-tint);"
*ngIf="hasDependentViolation"
>
<ion-text color="warning">Will Stop</ion-text>
</div>
<ion-item
style="--ion-item-background: rgb(0,0,0,0); margin-top: 5px"
*ngFor="let dep of dependentBreakages"
>
<ion-avatar style="position: relative; height: 4vh; width: 4vh" slot="start">
<img [src]="dep.iconURL" />
</ion-avatar>
<ion-label>
<h5>{{dep.title}}</h5>
</ion-label>
</ion-item>
<div *ngIf="!(loading$ | async)" class="slide-content">
<div style="margin-top: 25px;">
<div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
<ion-label color="warning" style="font-size: xx-large; font-weight: bold;"
*ngIf="hasDependentViolation">
WARNING
</ion-label>
<ion-label color="success" style="font-size: x-large; font-weight: bold; text-transform: capitalize;"
*ngIf="!hasDependentViolation">
READY
</ion-label>
</div>
<div *ngIf="longMessage" class="long-message" >
{{ longMessage }}
</div>
<div style="margin: 25px 0px;">
<div style="border-width: 0px 0px 1px 0px; font-size: unset; text-align: left; font-weight: bold; margin-left: 13px; border-style: solid; border-color: var(--ion-color-light-tint);"
*ngIf="hasDependentViolation"
>
<ion-text color="warning">Will Stop</ion-text>
</div>
<ion-item
style="--ion-item-background: rgb(0,0,0,0); margin-top: 5px"
*ngFor="let dep of dependentBreakages | keyvalue"
>
<ion-avatar style="position: relative; height: 4vh; width: 4vh" slot="start">
<img [src]="dep.value.iconURL" />
</ion-avatar>
<ion-label>
<h5>{{ dep.value.title }}</h5>
</ion-label>
</ion-item>
</div>
</div>
<div *ngIf="loading$ | ngrxPush" class="center-spinner">
<ion-spinner color="warning" name="lines"></ion-spinner>
<ion-label class="long-message">Checking for installed services which depend on {{params.title}}...</ion-label>
</div>
</div>

34
ui/src/app/components/install-wizard/install-wizard.component.html
View File

@@ -2,7 +2,7 @@
<ion-toolbar>
<ion-label class="toolbar-label text-ellipses">
<h1 class="toolbar-title">{{ params.toolbar.title }}</h1>
<h3 style="font-size: large; font-style: italic">{{params.toolbar.action}} <ion-text style="font-size: medium;" color="medium">{{ params.toolbar.version | displayEmver }}</ion-text></h3>
<h3 style="font-size: large; font-style: italic">{{ params.toolbar.action }} <ion-text style="font-size: medium;" color="medium">{{ params.toolbar.version | displayEmver }}</ion-text></h3>
</ion-label>
</ion-toolbar>
</ion-header>
@@ -11,14 +11,13 @@
<ion-slides *ngIf="!error" id="slide-show" style="--bullet-background: white" pager="false">
<ion-slide *ngFor="let def of params.slideDefinitions">
<!-- We can pass [transitions]="transitions" into the component if logic within the component needs to trigger a transition (not just bottom bar) -->
<dependencies #components *ngIf="def.slide.selector === 'dependencies'" [params]="def.slide.params"></dependencies>
<alert #components *ngIf="def.slide.selector === 'alert'" [params]="def.slide.params" style="width: 100%;"></alert>
<notes #components *ngIf="def.slide.selector === 'notes'" [params]="def.slide.params" style="width: 100%;"></notes>
<dependents #components *ngIf="def.slide.selector === 'dependents'" [params]="def.slide.params" [transitions]="transitions"></dependents>
<complete #components *ngIf="def.slide.selector === 'complete'" [params]="def.slide.params" [transitions]="transitions"></complete>
</ion-slide>
</ion-slides>
<div *ngIf="error" class="slide-content">
<div style="margin-top: 25px;">
<div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
@@ -27,7 +26,7 @@
</ion-label>
</div>
<div class="long-message">
{{error}}
{{ error }}
</div>
</div>
</div>
@@ -38,24 +37,27 @@
<ng-container *ngIf="!initializing && !error">
<!-- cancel button if loading/not loading -->
<ion-button slot="start" *ngIf="v.loading && v.bar.cancel.whileLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
<ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{cancel.text}}</ion-text>
<ion-button slot="start" *ngIf="(currentSlide.loading$ | async) && currentBottomBar.cancel.whileLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
<ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{ cancel.text }}</ion-text>
<ion-icon *ngIf="!cancel.text" name="close-outline"></ion-icon>
</ion-button>
<ion-button slot="start" *ngIf="!v.loading && v.bar.cancel.afterLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
<ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{cancel.text}}</ion-text>
<ion-button slot="start" *ngIf="!(currentSlide.loading$ | async) && currentBottomBar.cancel.afterLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
<ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{ cancel.text }}</ion-text>
<ion-icon *ngIf="!cancel.text" name="close-outline"></ion-icon>
</ion-button>
<!-- next button -->
<ion-button slot="end" *ngIf="!v.loading && v.bar.next as next" (click)="transitions.next()" fill="outline" class="toolbar-button" color="primary">
<ion-text [class.smaller-text]="next.length > 16">{{next}}</ion-text>
</ion-button>
<!-- next/finish buttons -->
<ng-container *ngIf="!(currentSlide.loading$ | async)">
<!-- next -->
<ion-button slot="end" *ngIf="currentBottomBar.next as next" (click)="transitions.next()" fill="outline" class="toolbar-button" color="primary">
<ion-text [class.smaller-text]="next.length > 16">{{ next }}</ion-text>
</ion-button>
<!-- finish button -->
<ion-button slot="end" *ngIf="!v.loading && v.bar.finish as finish" (click)="transitions.final()" fill="outline" class="toolbar-button" color="primary">
<ion-text [class.smaller-text]="finish.length > 16">{{finish}}</ion-text>
</ion-button>
<!-- finish -->
<ion-button slot="end" *ngIf="currentBottomBar.finish as finish" (click)="transitions.final()" fill="outline" class="toolbar-button" color="primary">
<ion-text [class.smaller-text]="finish.length > 16">{{ finish }}</ion-text>
</ion-button>
</ng-container>
</ng-container>
<ng-container *ngIf="error">

47
ui/src/app/components/install-wizard/prebaked-wizards.ts
View File

@@ -1,10 +1,9 @@
import { Injectable } from '@angular/core'
import { InstalledPackageDataEntry } from 'src/app/services/patch-db/data-model'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { Breakages } from 'src/app/services/api/api-types'
import { exists } from 'src/app/util/misc.util'
import { ApiService } from '../../services/api/api.service'
import { InstallWizardComponent, SlideDefinition, TopbarParams } from './install-wizard.component'
import { WizardAction } from './wizard-types'
@Injectable({ providedIn: 'root' })
export class WizardBaker {
@@ -17,10 +16,6 @@ export class WizardBaker {
}): InstallWizardComponent['params'] {
const { id, title, version, installAlert } = values
validate(id, exists, 'missing id')
validate(title, exists, 'missing title')
validate(version, exists, 'missing version')
const action = 'install'
const toolbar: TopbarParams = { action, title, version }
@@ -29,8 +24,8 @@ export class WizardBaker {
slide: {
selector: 'alert',
params: {
alert: installAlert,
title: 'Warning',
message: installAlert,
titleColor: 'warning',
},
},
@@ -62,10 +57,6 @@ export class WizardBaker {
}): InstallWizardComponent['params'] {
const { id, title, version, installAlert } = values
validate(id, exists, 'missing id')
validate(title, exists, 'missing title')
validate(version, exists, 'missing version')
const action = 'update'
const toolbar: TopbarParams = { action, title, version }
@@ -74,8 +65,8 @@ export class WizardBaker {
slide: {
selector: 'alert',
params: {
alert: installAlert,
title: 'Warning',
message: installAlert,
titleColor: 'warning',
},
},
@@ -166,10 +157,6 @@ export class WizardBaker {
}): InstallWizardComponent['params'] {
const { id, title, version, installAlert } = values
validate(id, exists, 'missing id')
validate(title, exists, 'missing title')
validate(version, exists, 'missing version')
const action = 'downgrade'
const toolbar: TopbarParams = { action, title, version }
@@ -178,8 +165,8 @@ export class WizardBaker {
slide: {
selector: 'alert',
params: {
alert: installAlert,
title: 'Warning',
message: installAlert,
titleColor: 'warning',
},
},
@@ -222,11 +209,7 @@ export class WizardBaker {
}): InstallWizardComponent['params'] {
const { id, title, version, uninstallAlert } = values
validate(id, exists, 'missing id')
validate(title, exists, 'missing title')
validate(version, exists, 'missing version')
const action = 'uninstall' as WizardAction
const action = 'uninstall'
const toolbar: TopbarParams = { action, title, version }
const slideDefinitions: SlideDefinition[] = [
@@ -234,8 +217,8 @@ export class WizardBaker {
slide: {
selector: 'alert',
params: {
alert: uninstallAlert || defaultUninstallationWarning(title),
title: 'Warning',
message: uninstallAlert || defaultUninstallWarning(title),
titleColor: 'warning',
},
},
@@ -248,7 +231,7 @@ export class WizardBaker {
action,
verb: 'uninstalling',
title,
fetchBreakages: () => this.apiService.dryRemovePackage({ id }).then(breakages => breakages ),
fetchBreakages: () => this.apiService.dryRemovePackage({ id }).then(breakages => breakages),
},
},
bottomBar: { cancel: { whileLoading: { }, afterLoading: { text: 'Cancel' } }, next: 'Uninstall' },
@@ -274,10 +257,6 @@ export class WizardBaker {
}): InstallWizardComponent['params'] {
const { breakages, title, version } = values
validate(breakages, t => !!t && Array.isArray(t), 'missing breakages')
validate(title, exists, 'missing title')
validate(version, exists, 'missing version')
const action = 'stop'
const toolbar: TopbarParams = { action, title, version }
@@ -298,7 +277,7 @@ export class WizardBaker {
return { toolbar, slideDefinitions }
}
configure (values: { breakages: Breakages, pkg: InstalledPackageDataEntry }): InstallWizardComponent['params'] {
configure (values: { breakages: Breakages, pkg: PackageDataEntry }): InstallWizardComponent['params'] {
const { breakages, pkg } = values
const { title, version } = pkg.manifest
const action = 'configure'
@@ -321,12 +300,4 @@ export class WizardBaker {
}
}
function validate<T> (t: T, test: (t: T) => Boolean, desc: string) {
if (!test(t)) {
console.error('failed validation', desc, t)
throw new Error(desc)
}
}
const defaultUninstallationWarning = serviceName => `Uninstalling ${ serviceName } will result in the deletion of its data.`
const defaultUninstallWarning = serviceName => `Uninstalling ${ serviceName } will result in the deletion of its data.`

6
ui/src/app/components/status/status.component.html
View File

@@ -1,9 +1,9 @@
<p
[style.color]="'var(--ion-color-' + color + ')'"
[style.color]="'var(--ion-color-' + rendering.color + ')'"
[style.font-size]="size"
[style.font-style]="style"
[style.font-weight]="weight"
>
{{ display }}
<ion-spinner *ngIf="showDots" class="dots dots-small" name="dots" [color]="color"></ion-spinner>
{{ rendering.display }}
<ion-spinner *ngIf="rendering.showDots" class="dots dots-small" name="dots" [color]="color"></ion-spinner>
</p>

33
ui/src/app/components/status/status.component.ts
View File

@@ -1,7 +1,5 @@
import { Component, Input } from '@angular/core'
import { combineLatest } from 'rxjs'
import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
import { PkgStatusRendering } from 'src/app/services/pkg-status-rendering.service'
@Component({
selector: 'status',
@@ -9,36 +7,9 @@ import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
styleUrls: ['./status.component.scss'],
})
export class StatusComponent {
@Input() pkgId: string
@Input() rendering: PkgStatusRendering
@Input() size?: 'small' | 'medium' | 'large' = 'large'
@Input() style?: string = 'regular'
@Input() weight?: string = 'normal'
display = ''
color = ''
showDots = false
subs = []
constructor (
private readonly patch: PatchDbModel,
) { }
ngOnInit () {
this.subs = [
combineLatest([
this.patch.watch$('package-data', this.pkgId, 'state'),
this.patch.watch$('package-data', this.pkgId, 'installed', 'status'),
])
.subscribe(([state, status]) => {
const { display, color, showDots } = renderPkgStatus(state, status)
this.display = display
this.color = color
this.showDots = showDots
}),
]
}
ngOnDestroy () {
this.subs.forEach(sub => sub.unsubscribe())
}
}

13
ui/src/app/modules/sharing.module.ts
View File

@@ -6,12 +6,10 @@ import { MarkdownPipe } from '../pipes/markdown.pipe'
import { AnnotationStatusPipe } from '../pipes/annotation-status.pipe'
import { TruncateCenterPipe, TruncateEndPipe } from '../pipes/truncate.pipe'
import { MaskPipe } from '../pipes/mask.pipe'
import { DisplayBulbPipe } from '../pipes/display-bulb.pipe'
import { HasUiPipe, LaunchablePipe, ManifestPipe } from '../pipes/ui.pipe'
import { HasUiPipe, LaunchablePipe } from '../pipes/ui.pipe'
import { EmptyPipe } from '../pipes/empty.pipe'
import { StatusPipe } from '../pipes/status.pipe'
import { NotificationColorPipe } from '../pipes/notification-color.pipe'
import { ReactiveComponentModule } from '@ngrx/component'
@NgModule({
declarations: [
@@ -24,18 +22,14 @@ import { ReactiveComponentModule } from '@ngrx/component'
TruncateCenterPipe,
TruncateEndPipe,
MaskPipe,
DisplayBulbPipe,
EmverDisplayPipe,
HasUiPipe,
LaunchablePipe,
ManifestPipe,
EmptyPipe,
StatusPipe,
NotificationColorPipe,
],
imports: [
ReactiveComponentModule,
],
imports: [],
exports: [
EmverComparesPipe,
EmverSatisfiesPipe,
@@ -46,15 +40,12 @@ import { ReactiveComponentModule } from '@ngrx/component'
TruncateEndPipe,
TruncateCenterPipe,
MaskPipe,
DisplayBulbPipe,
EmverDisplayPipe,
HasUiPipe,
LaunchablePipe,
ManifestPipe,
EmptyPipe,
StatusPipe,
NotificationColorPipe,
ReactiveComponentModule,
],
})
export class SharingModule { }

8
ui/src/app/pages/apps-routes/app-actions/app-actions.page.html
View File

@@ -8,15 +8,15 @@
</ion-header>
<ion-content class="ion-padding-top">
<ng-container *ngIf="patch.data['server-info'][pkgId]?.installed as installed">
<ng-container *ngIf="patch.data['package-data'][pkgId] as pkg">
<ion-item-group>
<ion-item button *ngFor="let action of installed.manifest.actions | keyvalue: asIsOrder" (click)="handleAction(installed, action)" >
<ion-item button *ngFor="let action of pkg.manifest.actions | keyvalue: asIsOrder" (click)="handleAction(pkg, action)" >
<ion-label class="ion-text-wrap">
<h2><ion-text color="primary">{{ action.value.name }}</ion-text><ion-icon *ngIf="!(action.value['allowed-statuses'] | includes: installed.status.main.status)" color="danger" name="close-outline"></ion-icon></h2>
<h2><ion-text color="primary">{{ action.value.name }}</ion-text><ion-icon *ngIf="!(action.value['allowed-statuses'] | includes: pkg.installed.status.main.status)" color="danger" name="close-outline"></ion-icon></h2>
<p><ion-text color="dark">{{ action.value.description }}</ion-text></p>
</ion-label>
</ion-item>
<ion-item button (click)="uninstall(installed.manifest)" >
<ion-item button (click)="uninstall(pkg.manifest)" >
<ion-label class="ion-text-wrap">
<h2><ion-text color="primary">Uninstall</ion-text></h2>
<p><ion-text color="dark">This will uninstall the service from your Embassy and delete all data permanently.</ion-text></p>

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

@@ -5,7 +5,7 @@ import { AlertController, IonContent, ModalController, NavController } from '@io
import { LoaderService } from 'src/app/services/loader.service'
import { HttpErrorResponse } from '@angular/common/http'
import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
import { Action, InstalledPackageDataEntry, Manifest, PackageMainStatus } from 'src/app/services/patch-db/data-model'
import { Action, Manifest, PackageDataEntry, PackageMainStatus } 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'
import { Subscription } from 'rxjs'
@@ -44,8 +44,8 @@ export class AppActionsPage {
this.subs.forEach(sub => sub.unsubscribe())
}
async handleAction (pkg: InstalledPackageDataEntry, action: { key: string, value: Action }) {
if ((action.value['allowed-statuses'] as PackageMainStatus[]).includes(pkg.status.main.status)) {
async handleAction (pkg: PackageDataEntry, action: { key: string, value: Action }) {
if ((action.value['allowed-statuses'] as PackageMainStatus[]).includes(pkg.installed.status.main.status)) {
const alert = await this.alertCtrl.create({
header: 'Confirm',
message: `Are you sure you want to execute action "${action.value.name}"? ${action.value.warning || ''}`,

4
ui/src/app/pages/apps-routes/app-config/app-config.page.html
View File

@@ -35,7 +35,7 @@
<ng-container *ngIf="pkg">
<!-- @TODO make sure this is how to determine if pkg is in needs_config -->
<ng-container *ngIf="pkg.manifest.config && !pkg.status.configured && !edited">
<ng-container *ngIf="pkg.manifest.config && !pkg.installed.status.configured && !edited">
<ion-item class="notifier-item">
<ion-label class="ion-text-wrap">
<h2 style="display: flex; align-items: center; margin-bottom: 3px;">
@@ -91,7 +91,7 @@
<!-- save button, always show -->
<ion-button
[disabled]="invalid || (!edited && !added && !pkg.status.configured )"
[disabled]="invalid || (!edited && !added && !pkg.installed.status.configured )"
fill="outline"
expand="block"
style="margin: 10px"

8
ui/src/app/pages/apps-routes/app-config/app-config.page.ts
View File

@@ -11,7 +11,7 @@ import { wizardModal } from 'src/app/components/install-wizard/install-wizard.co
import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
import { ConfigSpec } from 'src/app/pkg-config/config-types'
import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
import { InstalledPackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
@Component({
@@ -26,7 +26,7 @@ export class AppConfigPage {
loadingText: string | undefined
pkg: InstalledPackageDataEntry
pkg: PackageDataEntry
hasConfig = false
mocalShowing = false
@@ -82,7 +82,7 @@ export class AppConfigPage {
this.navCtrl.back()
}
}),
this.patch.watch$('package-data', pkgId, 'installed')
this.patch.watch$('package-data', pkgId)
.pipe(
tap(pkg => this.pkg = pkg),
tap(() => this.loadingText = 'Fetching config spec...'),
@@ -156,7 +156,7 @@ export class AppConfigPage {
}
}
async save (pkg: InstalledPackageDataEntry) {
async save (pkg: PackageDataEntry) {
return this.loader.of({
message: `Saving config...`,
spinner: 'lines',

4
ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
View File

@@ -10,12 +10,12 @@
<ion-content>
<ion-grid *ngIf="patch.data['package-data'][pkgId] as pkg">
<ion-row>
<ion-col *ngFor="let interface of pkg.installed.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
<ion-col *ngFor="let interface of pkg.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
<ion-card>
<ion-card-header>
<ion-card-title>{{ interface.value.name }}</ion-card-title>
<ion-card-subtitle>{{ interface.value.description }}</ion-card-subtitle>
<ion-button style="margin-top: 12px;" *ngIf="interface.value.ui" [disabled]="!(pkg | isLaunchable)" fill="outline" color="dark" expand="block" (click)="launch(pkg.installed)">
<ion-button style="margin-top: 12px;" *ngIf="interface.value.ui" [disabled]="!(pkg | isLaunchable)" fill="outline" color="dark" expand="block" (click)="launch(pkg)">
Launch
<ion-icon slot="end" name="rocket-outline"></ion-icon>
</ion-button>

4
ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
View File

@@ -46,8 +46,8 @@ export class AppInterfacesPage {
await toast.present()
}
launch (installed: InstalledPackageDataEntry): void {
window.open(this.config.launchableURL(installed), '_blank')
launch (pkg: PackageDataEntry): void {
window.open(this.config.launchableURL(pkg), '_blank')
}
asIsOrder () {

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

@@ -24,7 +24,7 @@
<ion-grid>
<ion-row>
<ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="4" sizeSm="3" sizeLg="3" sizeXl="2">
<ion-card class="installed-card" [routerLink]="['/services', (pkg.value | manifest).id]">
<ion-card class="installed-card" [routerLink]="['/services', pkg.value.manifest.id]">
<div class="launch-container" *ngIf="pkg.value | hasUi">
<div class="launch-button-triangle" (click)="launchUi(pkg.value, $event)" [class.launch-disabled]="!(pkg.value | isLaunchable)">
<ion-icon name="rocket-outline"></ion-icon>
@@ -33,14 +33,11 @@
<img style="position: absolute" class="main-img" [src]="pkg.value['static-files'].icon" alt="icon" />
<img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
<img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'green' : connected) | async" src="assets/img/running-bulb.png"/>
<img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'red' : connected) | async" src="assets/img/issue-bulb.png"/>
<img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'yellow' : connected) | async" src="assets/img/warning-bulb.png"/>
<img class="bulb-off" *ngIf="(pkg.key | displayBulb : 'off' : connected) | async" src="assets/img/off-bulb.png"/>
<img [class]="serviceInfo[pkg.key].bulbInfo.class" [src]="serviceInfo[pkg.key].bulbInfo.img"/>
<ion-card-header>
<status *ngIf="connected" [pkgId]="pkg.key" size="calc(8px + .4vw)" weight="bold"></status>
<ion-card-title>{{ (pkg.value | manifest).title }}</ion-card-title>
<status *ngIf="connected" [rendering]="serviceInfo[pkg.key].rendering" size="calc(8px + .4vw)" weight="bold"></status>
<ion-card-title>{{ pkg.value.manifest.title }}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>

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

@@ -3,7 +3,8 @@ import { ConfigService } from 'src/app/services/config.service'
import { ConnectionService } from 'src/app/services/connection.service'
import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { Subscription } from 'rxjs'
import { combineLatest, Subscription } from 'rxjs'
import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
@Component({
selector: 'app-list',
@@ -13,6 +14,13 @@ import { Subscription } from 'rxjs'
export class AppListPage {
connected: boolean
subs: Subscription[] = []
serviceInfo: { [id: string]: {
bulbInfo: {
class: string
img: string
}
rendering: PkgStatusRendering
}} = { }
constructor (
private readonly config: ConfigService,
@@ -22,7 +30,48 @@ export class AppListPage {
ngOnInit () {
this.subs = [
this.patch.connected$().subscribe(c => this.connected = c),
combineLatest([
this.patch.connected$(),
this.patch.watch$('package-data'),
])
.subscribe(([connected, pkgs]) => {
this.connected = connected
Object.keys(pkgs).forEach(pkgId => {
let bulbClass = 'bulb-on'
let img = ''
if (!this.connected) {
bulbClass = 'bulb-off',
img = 'assets/img/off-bulb.png'
}
const rendering = renderPkgStatus(pkgs[pkgId].state, pkgs[pkgId].installed.status)
switch (rendering.color) {
case 'danger':
img = 'assets/img/danger-bulb.png'
break
case 'success':
img = 'assets/img/success-bulb.png'
break
case 'warning':
img = 'assets/img/warning-bulb.png'
break
default:
bulbClass = 'bulb-off',
img = 'assets/img/off-bulb.png'
break
}
this.serviceInfo[pkgId] = {
bulbInfo: {
class: bulbClass,
img,
},
rendering,
}
})
}),
]
}
@@ -33,7 +82,7 @@ export class AppListPage {
launchUi (pkg: PackageDataEntry, event: Event): void {
event.preventDefault()
event.stopPropagation()
window.open(this.config.launchableURL(pkg.installed), '_blank')
window.open(this.config.launchableURL(pkg), '_blank')
}
asIsOrder () {

2
ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.html
View File

@@ -61,7 +61,7 @@
</div>
<div *ngIf="segmentValue === 'raw'" class="raw">
<pre [innerHTML]="pkg | manifest | json"></pre>
<pre [innerHTML]="pkg.manifest | json"></pre>
</div>
</ion-content>

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

@@ -33,7 +33,7 @@ export class AppRestorePage {
ngOnInit () {
this.pkgId = this.route.snapshot.paramMap.get('pkgId')
this.title = this.patch.data['package-data'][this.pkgId].installed.manifest.title
this.title = this.patch.data['package-data'][this.pkgId].manifest.title
this.getExternalDisks()
}

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

@@ -23,15 +23,15 @@
<img [src]="pkg['static-files'].icon" />
</ion-thumbnail>
<ion-label class="ion-text-wrap">
<h1 style="font-family: 'Montserrat';" [class.less-large]="manifest.title.length > 20">
{{ manifest.title }}
<h1 style="font-family: 'Montserrat';" [class.less-large]="pkg.manifest.title.length > 20">
{{ pkg.manifest.title }}
</h1>
<h5>{{ manifest.version | displayEmver }}</h5>
<h5>{{ pkg.manifest.version | displayEmver }}</h5>
</ion-label>
</ion-item>
<div class="status-readout">
<status *ngIf="connected" size="large" weight="500" [pkgId]="pkgId"></status>
<status *ngIf="connected" size="large" weight="500" [rendering]="rendering"></status>
<ion-button *ngIf="(pkgId | status | async) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
Configure
</ion-button>
@@ -71,7 +71,7 @@
<!-- dependencies -->
<ng-container *ngIf="!(pkg.installed['current-dependencies'] | empty)">
<ion-item-divider id="dependencies">Dependencies</ion-item-divider>
<!-- A current-dependency is a subset of the manifest.dependencies that is currently required as determined by the service config. -->
<!-- A current-dependency is a subset of the pkg.manifest.dependencies that is currently required as determined by the service config. -->
<ion-grid>
<ion-row>
<ion-col *ngFor="let dep of pkg.installed['current-dependencies'] | keyvalue" sizeXs="12" sizeMd="6">
@@ -80,8 +80,8 @@
<img [src]="patch.data['package-data'][dep.key] ? patch.data['package-data'][dep.key]['static-files'].icon : pkg.installed.status['dependency-errors'][dep.key]?.icon" />
</ion-thumbnail>
<ion-label class="ion-text-wrap">
<h2 style="font-family: 'Montserrat'">{{ patch.data['package-data'][dep.key] ? (patch.data['package-data'][dep.key] | manifest).title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h2>
<p>{{ manifest.dependencies[dep.key].version | displayEmver }}</p>
<h2 style="font-family: 'Montserrat'">{{ patch.data['package-data'][dep.key] ? patch.data['package-data'][dep.key].manifest.title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h2>
<p>{{ pkg.manifest.dependencies[dep.key].version | displayEmver }}</p>
<p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
</ion-label>

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

@@ -4,13 +4,13 @@ import { ApiService } from 'src/app/services/api/api.service'
import { ActivatedRoute, NavigationExtras } from '@angular/router'
import { chill, isEmptyObject, Recommendation } from 'src/app/util/misc.util'
import { LoaderService } from 'src/app/services/loader.service'
import { Observable, of, Subscription } from 'rxjs'
import { combineLatest, Observable, of, Subscription } from 'rxjs'
import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
import { ConfigService, getManifest } from 'src/app/services/config.service'
import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
import { FEStatus } from 'src/app/services/pkg-status-rendering.service'
import { FEStatus, PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
import { ConnectionService } from 'src/app/services/connection.service'
@Component({
@@ -24,11 +24,11 @@ export class AppShowPage {
pkg: PackageDataEntry
hideLAN: boolean
buttons: Button[] = []
manifest: Manifest = { } as Manifest
connected: boolean
FeStatus = FEStatus
PackageState = PackageState
DependencyErrorType = DependencyErrorType
rendering: PkgStatusRendering
@ViewChild(IonContent) content: IonContent
subs: Subscription[] = []
@@ -49,10 +49,15 @@ export class AppShowPage {
async ngOnInit () {
this.pkgId = this.route.snapshot.paramMap.get('pkgId')
this.pkg = this.patch.data['package-data'][this.pkgId]
// @TODO maybe re-fetch manifest if package state changes.
this.manifest = getManifest(this.pkg)
this.subs = [
this.patch.connected$().subscribe(c => this.connected = c),
combineLatest([
this.patch.connected$(),
this.patch.watch$('package-data', this.pkgId),
])
.subscribe(([connected, pkg]) => {
this.connected = connected
this.rendering = renderPkgStatus(pkg.state, pkg.installed.status)
}),
]
this.setButtons()
}
@@ -66,11 +71,11 @@ export class AppShowPage {
}
launchUiTab (): void {
window.open(this.config.launchableURL(this.pkg.installed), '_blank')
window.open(this.config.launchableURL(this.pkg), '_blank')
}
async stop (): Promise<void> {
const { id, title, version } = this.pkg.installed.manifest
const { id, title, version } = this.pkg.manifest
await this.loader.of({
message: `Stopping...`,
spinner: 'lines',
@@ -99,7 +104,7 @@ export class AppShowPage {
}
async tryStart (): Promise<void> {
const message = this.pkg.installed.manifest.alerts.start
const message = this.pkg.manifest.alerts.start
if (message) {
this.presentAlertStart(message)
} else {
@@ -108,13 +113,13 @@ export class AppShowPage {
}
async donate (): Promise<void> {
const url = this.manifest['donation-url']
const url = this.pkg.manifest['donation-url']
if (url) {
window.open(url, '_blank')
} else {
const alert = await this.alertCtrl.create({
header: 'Not Accepting Donations',
message: `The developers of ${this.manifest.title} have not provided a donation URL. Please contact them directly if you insist on giving them money.`,
message: `The developers of ${this.pkg.manifest.title} have not provided a donation URL. Please contact them directly if you insist on giving them money.`,
buttons: ['OK'],
})
await alert.present()
@@ -143,8 +148,8 @@ export class AppShowPage {
}
private async installDep (depId: string): Promise<void> {
const version = this.pkg.installed.manifest.dependencies[depId].version
const dependentTitle = this.pkg.installed.manifest.title
const version = this.pkg.manifest.dependencies[depId].version
const dependentTitle = this.pkg.manifest.title
const installRec: Recommendation = {
dependentId: this.pkgId,
@@ -164,7 +169,7 @@ export class AppShowPage {
const configErrors = (this.pkg.installed.status['dependency-errors'][depId] as DependencyErrorConfigUnsatisfied).errors
const description = `<ul>${configErrors.map(d => `<li>${d}</li>`).join('\n')}</ul>`
const dependentTitle = this.pkg.installed.manifest.title
const dependentTitle = this.pkg.manifest.title
const configRecommendation: Recommendation = {
dependentId: this.pkgId,

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

@@ -58,20 +58,20 @@
<ion-label>
<h2 style="font-family: 'Montserrat';">{{ pkg.title }}</h2>
<p>{{ pkg.descriptionShort }}</p>
<ng-container *ngIf="patch.data['package-data'] as pkgI">
<p *ngIf="pkgI.state === PackageState.Installed">
<ion-text *ngIf="(pkg.version | compareEmver : pkgI.installed.manifest.version) === 0" color="success">Installed</ion-text>
<ion-text *ngIf="(pkg.version | compareEmver : pkgI.installed.manifest.version) === 1" color="warning">Update Available</ion-text>
<ng-container *ngIf="patch.data['package-data'][pkg.id] as localPkg">
<p *ngIf="localPkg.state === PackageState.Installed">
<ion-text *ngIf="(pkg.version | compareEmver : localPkg.manifest.version) === 0" color="success">Installed</ion-text>
<ion-text *ngIf="(pkg.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
</p>
<p *ngIf="pkgI.state === PackageState.Installing" style="display: flex; flex-direction: row; align-items: center;">
<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>
<p *ngIf="pkgI.state === PackageState.Updating" style="display: flex; flex-direction: row; align-items: center;">
<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="pkgI.state === PackageState.Removing" style="display: flex; flex-direction: row; align-items: center;">
<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>

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

@@ -42,7 +42,7 @@
<!-- installed -->
<ng-template #installed>
<p>
<ion-text color="medium">Installed at {{ installedPkg.installed.manifest.version | displayEmver }}</ion-text>
<ion-text color="medium">Installed at {{ installedPkg.manifest.version | displayEmver }}</ion-text>
</p>
</ng-template>
</ng-template>
@@ -59,10 +59,10 @@
<ng-template #installedPkg2>
<!-- not installing, updating, or removing -->
<ng-container *ngIf="installedPkg.state === PackageState.Installed">
<ion-button *ngIf="(installedPkg.installed.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
<ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
Update
</ion-button>
<ion-button *ngIf="(installedPkg.installed.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
<ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
Downgrade
</ion-button>
</ng-container>

36
ui/src/app/pipes/display-bulb.pipe.ts
View File

@@ -1,36 +0,0 @@
import { Pipe, PipeTransform } from '@angular/core'
import { combineLatest, Observable } from 'rxjs'
import { map } from 'rxjs/operators'
import { PatchDbModel } from '../services/patch-db/patch-db.service'
import { renderPkgStatus } from '../services/pkg-status-rendering.service'
@Pipe({
name: 'displayBulb',
})
export class DisplayBulbPipe implements PipeTransform {
constructor (
private readonly patch: PatchDbModel,
) { }
transform (pkgId: string, bulb: DisplayBulb, connected: boolean): Observable<boolean> {
return combineLatest([
this.patch.watch$('package-data', pkgId, 'state'),
this.patch.watch$('package-data', pkgId, 'installed', 'status'),
])
.pipe(
map(([state, status]) => {
if (!connected) return bulb === 'off'
const { color } = renderPkgStatus(state, status)
switch (color) {
case 'danger': return bulb === 'red'
case 'success': return bulb === 'green'
case 'warning': return bulb === 'yellow'
default: return bulb === 'off'
}
}),
)
}
}
type DisplayBulb = 'off' | 'red' | 'green' | 'yellow'

10
ui/src/app/pipes/ui.pipe.ts
View File

@@ -24,13 +24,3 @@ export class LaunchablePipe implements PipeTransform {
return this.configService.isLaunchable(pkg)
}
}
@Pipe({
name: 'manifest',
})
export class ManifestPipe implements PipeTransform {
transform (pkg: PackageDataEntry): Manifest {
return getManifest(pkg)
}
}

1
ui/src/app/services/api/mock-api.service.ts
View File

@@ -307,7 +307,6 @@ export class MockApiService extends ApiService {
const pkg: PackageDataEntry = {
...Mock.bitcoinproxy,
state: PackageState.Installing,
'temp-manifest': Mock.MockManifestBitcoinProxy,
// installed: undefined,
'install-progress': {
size: 100,

15
ui/src/app/services/api/mock-app-fixures.ts
View File

@@ -578,12 +578,11 @@ export module Mock {
icon: 'assets/img/service-icons/bitcoind.png',
instructions: 'instructionsUrl', // /public/package-data/bitcoind/0.21.1/INSTRUCTIONS.md
},
'temp-manifest': undefined,
manifest: {
...MockManifestBitcoind,
version: '0.20.0',
},
installed: {
manifest: {
...MockManifestBitcoind,
version: '0.20.0',
},
status: {
configured: true,
main: {
@@ -629,9 +628,8 @@ export module Mock {
icon: 'assets/img/service-icons/lnd.png',
instructions: 'instructionsUrl', // /public/package-data/lnd/0.21.1/INSTRUCTIONS.md
},
'temp-manifest': undefined,
manifest: MockManifestLnd,
installed: {
manifest: MockManifestLnd,
status: {
configured: true,
main: {
@@ -681,9 +679,8 @@ export module Mock {
icon: 'assets/img/service-icons/bitcoin-proxy.png',
instructions: 'instructionsUrl', // /public/package-data/bitcoinproxy/0.2.2/INSTRUCTIONS.md
},
'temp-manifest': undefined,
manifest: MockManifestBitcoinProxy,
installed: {
manifest: MockManifestBitcoinProxy,
status: {
configured: true,
main: {

16
ui/src/app/services/config.service.ts
View File

@@ -53,16 +53,14 @@ export class ConfigService {
return false
}
const installed = pkg.installed
return installed.status.main.status === PackageMainStatus.Running &&
return pkg.installed.status.main.status === PackageMainStatus.Running &&
(
(hasTorUi(installed.manifest.interfaces) && this.isTor()) ||
(hasLanUi(installed.manifest.interfaces) && !this.isTor())
(hasTorUi(pkg.manifest.interfaces) && this.isTor()) ||
(hasLanUi(pkg.manifest.interfaces) && !this.isTor())
)
}
launchableURL (pkg: InstalledPackageDataEntry): string {
launchableURL (pkg: PackageDataEntry): string {
return this.isTor() ? `http://${torUiAddress(pkg)}` : `https://${lanUiAddress(pkg)}`
}
}
@@ -75,7 +73,7 @@ export function hasLanUi (interfaces: { [id: string]: InterfaceDef }): boolean {
return !!Object.values(interfaces).find(i => i.ui && i['lan-config'])
}
export function torUiAddress (pkg: InstalledPackageDataEntry): string {
export function torUiAddress (pkg: PackageDataEntry): string {
const interfaces = pkg.manifest.interfaces
const id = Object.keys(interfaces).find(key => {
const val = interfaces[key]
@@ -84,7 +82,7 @@ export function torUiAddress (pkg: InstalledPackageDataEntry): string {
return pkg['interface-info'].addresses[id]['tor-address']
}
export function lanUiAddress (pkg: InstalledPackageDataEntry): string {
export function lanUiAddress (pkg: PackageDataEntry): string {
const interfaces = pkg.manifest.interfaces
const id = Object.keys(interfaces).find(key => {
const val = interfaces[key]
@@ -99,7 +97,7 @@ export function hasUi (interfaces: { [id: string]: InterfaceDef }): boolean {
export function getManifest (pkg: PackageDataEntry): Manifest {
if (pkg.state === PackageState.Installed) {
return pkg.installed.manifest
return pkg.manifest
}
return pkg['temp-manifest']
}

2
ui/src/app/services/connection.service.ts
View File

@@ -39,7 +39,7 @@ export class ConnectionService {
this.connectionFailure$.next(ConnectionFailure.Network)
} else if (!this.configService.isTor()) {
this.connectionFailure$.next(ConnectionFailure.Lan)
} {
} else {
// diagnosing
this.connectionFailure$.next(ConnectionFailure.Diagnosing)
const torSuccess = await this.testAddrs(addrs?.tor || [])

3
ui/src/app/services/patch-db/data-model.ts
View File

@@ -46,7 +46,7 @@ export interface PackageDataEntry {
instructions: URL
icon: URL
}
'temp-manifest'?: Manifest // exists when: installing, updating, removing
manifest: Manifest
installed?: InstalledPackageDataEntry, // exists when: installed, updating
'install-progress'?: InstallProgress, // exists when: installing, updating
}
@@ -62,7 +62,6 @@ export interface InstallProgress {
}
export interface InstalledPackageDataEntry {
manifest: Manifest
status: Status
'interface-info': InterfaceInfo
'system-pointers': any[]

0
ui/src/assets/img/issue-bulb.png → ui/src/assets/img/danger-bulb.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 946 B

After

Width:  |  Height:  |  Size: 946 B

0
ui/src/assets/img/running-bulb.png → ui/src/assets/img/success-bulb.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1016 B

After

Width:  |  Height:  |  Size: 1016 B