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

dont watch patch.data directly in TS (#371)

Browse Source 
* dont watch patch.data directly in TS

* installs and uninstalls working

* minor repairs
This commit is contained in:
Matt Hill
2021-07-20 10:20:39 -06:00
committed by Aiden McClelland
parent 65c4db09f3
commit d1b8f51b78
50 changed files with 444 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,7 @@ export class AppActionsPage {
constructor (
private readonly route: ActivatedRoute,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly modalCtrl: ModalController,
private readonly alertCtrl: AlertController,
private readonly loaderService: LoaderService,
@@ -123,7 +123,7 @@ export class AppActionsPage {
private async executeAction (pkgId: string, actionId: string) {
try {
const res = await this.loaderService.displayDuringP(
this.apiService.executePackageAction({ id: pkgId, 'action-id': actionId }),
this.embassyApi.executePackageAction({ id: pkgId, 'action-id': actionId }),
)
const successAlert = await this.alertCtrl.create({

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

@@ -50,7 +50,7 @@ export class AppConfigPage {
private readonly navCtrl: NavController,
private readonly route: ActivatedRoute,
private readonly wizardBaker: WizardBaker,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly loader: LoaderService,
private readonly alertCtrl: AlertController,
private readonly modalController: ModalController,
@@ -86,12 +86,12 @@ export class AppConfigPage {
.pipe(
tap(pkg => this.pkg = pkg),
tap(() => this.loadingText = 'Fetching config spec...'),
concatMap(() => this.apiService.getPackageConfig({ id: pkgId })),
concatMap(() => this.embassyApi.getPackageConfig({ id: pkgId })),
concatMap(({ spec, config }) => {
const rec = history.state && history.state.configRecommendation as Recommendation
if (rec) {
this.loadingText = `Setting properties to accommodate ${rec.dependentTitle}...`
return from(this.apiService.dryConfigureDependency({ 'dependency-id': pkgId, 'dependent-id': rec.dependentId }))
return from(this.embassyApi.dryConfigureDependency({ 'dependency-id': pkgId, 'dependent-id': rec.dependentId }))
.pipe(
map(res => ({
spec,
@@ -162,7 +162,7 @@ export class AppConfigPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringAsync(async () => {
const breakages = await this.apiService.drySetPackageConfig({ id: pkg.manifest.id, config: this.config })
const breakages = await this.embassyApi.drySetPackageConfig({ id: pkg.manifest.id, config: this.config })
if (!isEmptyObject(breakages.length)) {
const { cancelled } = await wizardModal(
@@ -175,7 +175,7 @@ export class AppConfigPage {
if (cancelled) return { skip: true }
}
return this.apiService.setPackageConfig({ id: pkg.manifest.id, config: this.config })
return this.embassyApi.setPackageConfig({ id: pkg.manifest.id, config: this.config })
.then(() => ({ skip: false }))
})
.then(({ skip }) => {

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

@@ -19,15 +19,17 @@ export class AppInstructionsPage {
constructor (
private readonly route: ActivatedRoute,
private readonly errToast: ErrorToastService,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly patch: PatchDbService,
) { }
async ngOnInit () {
const pkgId = this.route.snapshot.paramMap.get('pkgId')
const url = this.patch.data['package-data'][pkgId]['static-files'].instructions
try {
this.instructions = await this.apiService.getStatic(url)
this.instructions = await this.embassyApi.getStatic(url)
} catch (e) {
console.error(e)
this.errToast.present(e.message)
@@ -35,8 +37,4 @@ export class AppInstructionsPage {
this.loading = false
}
}
ngAfterViewInit () {
this.content.scrollToPoint(undefined, 1)
}
}

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

@@ -10,7 +10,7 @@
<ion-content>
<ion-grid *ngIf="patch.data['package-data'][pkgId] as pkg">
<ion-row>
<ion-col *ngFor="let interface of pkg.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
<ion-col *ngFor="let interface of pkg.manifest.interfaces | keyvalue: asIsOrder" sizeXs="12" sizeSm="12" sizeMd="6">
<ion-card>
<ion-card-header>
<ion-card-title>{{ interface.value.name }}</ion-card-title>

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

@@ -8,41 +8,40 @@
</ion-header>
<ion-content style="position: relative">
<div *ngIf="patch.data['package-data'] as pkgs">
<div *ngIf="pkgs | empty; else list" class="ion-text-center ion-padding">
<div style="display: flex; flex-direction: column; justify-content: center; height: 40vh">
<h2>Welcome to your <span style="font-style: italic; color: var(--ion-color-danger)">Embassy</span></h2>
<p class="ion-text-wrap">Get started by installing your first service.</p>
</div>
<ion-button [routerLink]="['/marketplace']" style="width: 50%;" fill="outline">
<ion-icon slot="start" name="storefront-outline"></ion-icon>
Marketplace
</ion-button>
<div *ngIf="pkgs | empty; else list" class="ion-text-center ion-padding">
<div style="display: flex; flex-direction: column; justify-content: center; height: 40vh">
<h2>Welcome to your <span style="font-style: italic; color: var(--ion-color-danger)">Embassy</span></h2>
<p class="ion-text-wrap">Get started by installing your first service.</p>
</div>
<ng-template #list>
<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]">
<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>
</div>
</div>
<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]="serviceInfo[pkg.key].bulbInfo.class" [src]="serviceInfo[pkg.key].bulbInfo.img"/>
<ion-card-header>
<status [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>
</ion-row>
</ion-grid>
</ng-template>
<ion-button [routerLink]="['/marketplace']" style="width: 50%;" fill="outline">
<ion-icon slot="start" name="storefront-outline"></ion-icon>
Marketplace
</ion-button>
</div>
<ng-template #list>
<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.entry.manifest.id]">
<div class="launch-container" *ngIf="pkg.value.entry | hasUi">
<div class="launch-button-triangle" (click)="launchUi(pkg.value.entry, $event)" [class.launch-disabled]="!(pkg.value.entry | isLaunchable)">
<ion-icon name="rocket-outline"></ion-icon>
</div>
</div>
<img style="position: absolute" class="main-img" [src]="pkg.value.entry['static-files'].icon" alt="icon" />
<img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
<img *ngIf="connectionFailure" class="bulb-off" src="assets/img/off-bulb.png" />
<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>
<ion-card-title>{{ pkg.value.entry.manifest.title }}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-template>
</ion-content>

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

@@ -1,10 +1,11 @@
import { Component } from '@angular/core'
import { ConfigService } from 'src/app/services/config.service'
import { ConnectionService } from 'src/app/services/connection.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 { combineLatest, Subscription } from 'rxjs'
import { Subscription } from 'rxjs'
import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
import { distinctUntilChanged, filter } from 'rxjs/operators'
@Component({
selector: 'app-list',
@@ -12,70 +13,94 @@ import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status
styleUrls: ['./app-list.page.scss'],
})
export class AppListPage {
connected: boolean
subs: Subscription[] = []
serviceInfo: { [id: string]: {
bulbInfo: {
connectionFailure: boolean
pkgs: { [id: string]: {
entry: PackageDataEntry
bulb: {
class: string
img: string
}
rendering: PkgStatusRendering
statusRendering: PkgStatusRendering | null
sub: Subscription | null
}} = { }
constructor (
private readonly config: ConfigService,
public readonly connectionService: ConnectionService,
private readonly connectionService: ConnectionService,
public readonly patch: PatchDbService,
) { }
ngOnInit () {
this.subs = [
combineLatest([
this.patch.connected$(),
this.patch.watch$('package-data'),
])
.subscribe(([connected, pkgs]) => {
this.connected = connected
this.patch.watch$('package-data')
.pipe(
filter(obj => {
return Object.keys(obj).length !== Object.keys(this.pkgs).length
}),
)
.subscribe(pkgs => {
const ids = Object.keys(pkgs)
console.log('PKGSPKGS', ids)
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,
Object.keys(this.pkgs).forEach(id => {
if (!ids.includes(id)) {
this.pkgs[id].sub.unsubscribe()
delete this.pkgs[id]
}
})
ids.forEach(id => {
// if already subscribed, return
if (this.pkgs[id]) return
this.pkgs[id] = {
entry: pkgs[id],
bulb: {
class: 'bulb-off',
img: 'assets/img/off-bulb.png',
},
statusRendering: renderPkgStatus(pkgs[id].state, pkgs[id].installed?.status),
sub: null,
}
// subscribe to pkg
this.pkgs[id].sub = this.patch.watch$('package-data', id).subscribe(pkg => {
let bulbClass = 'bulb-on'
let img = ''
const statusRendering = renderPkgStatus(pkgs[id].state, pkgs[id].installed?.status)
switch (statusRendering.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.pkgs[id].entry = pkg
this.pkgs[id].bulb = {
class: bulbClass,
img,
}
this.pkgs[id].statusRendering = statusRendering
})
})
}),
this.connectionService.watchFailure$()
.subscribe(connectionFailure => {
this.connectionFailure = connectionFailure !== ConnectionFailure.None
}),
]
}
ngOnDestroy () {
Object.values(this.pkgs).forEach(pkg => pkg.sub.unsubscribe())
this.subs.forEach(sub => sub.unsubscribe())
}

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

@@ -17,7 +17,7 @@ export class AppLogsPage {
constructor (
private readonly route: ActivatedRoute,
private readonly errToast: ErrorToastService,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
) { }
ngOnInit () {
@@ -29,7 +29,7 @@ export class AppLogsPage {
this.logs = ''
try {
const logs = await this.apiService.getPackageLogs({ id: this.pkgId })
const logs = await this.embassyApi.getPackageLogs({ id: this.pkgId })
this.logs = logs.map(l => `${l.timestamp} ${l.log}`).join('\n\n')
setTimeout(async () => await this.content.scrollToBottom(100), 200)
} catch (e) {

3
ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.ts
View File

@@ -3,7 +3,6 @@ import { ActivatedRoute } from '@angular/router'
import { Subscription } from 'rxjs'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { getManifest } from 'src/app/services/config.service'
import * as JsonPointer from 'json-pointer'
import { IonContent } from '@ionic/angular'
@@ -56,7 +55,7 @@ export class AppManifestPage {
}
private setNode () {
this.node = JsonPointer.get(getManifest(this.pkg), this.pointer || '')
this.node = JsonPointer.get(this.pkg.manifest, this.pointer || '')
}
async goToNested (key: string): Promise<any> {

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

@@ -9,7 +9,7 @@
<ion-content>
<ion-card>
<ion-card *ngIf="mainStatus">
<ion-card-header>
<ion-card-title>
<ion-icon style="vertical-align: middle; padding-right: 12px;" name="medkit-outline"></ion-icon>
@@ -17,15 +17,15 @@
</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item *ngIf="pkg.installed?.status.main.health | empty; else health">
<ion-item *ngIf="mainStatus.health | empty; else health">
<ion-label>
No health checks
</ion-label>
</ion-item>
<ng-template #health>
<ion-item *ngIf="!(pkg.installed?.status.main.health | empty); else noHealth" color="light" style="margin: 10px;">
<ion-item *ngIf="!(mainStatus.health | empty); else noHealth" color="light" style="margin: 10px;">
<ion-label>
<div *ngFor="let health of pkg.installed.status.main.health | keyvalue : asIsOrder" class="align" style="margin-left: 12px;">
<div *ngFor="let health of mainStatus.health | keyvalue : asIsOrder" class="align" style="margin-left: 12px;">
<ion-icon *ngIf="health.value.result === 'success'" name="checkmark-outline" color="success"></ion-icon>
<ion-icon *ngIf="health.value.result === 'starting'" name="timer-outline" color="warning"></ion-icon>
<ion-icon *ngIf="health.value.result === 'loading'" name="sync-circle-outline" color="warning"></ion-icon>

18
ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts
View File

@@ -1,10 +1,11 @@
import { Component, ViewChild } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { IonContent } from '@ionic/angular'
import { Subscription } from 'rxjs'
import { Metric } from 'src/app/services/api/api.types'
import { ApiService } from 'src/app/services/api/embassy/embassy-api.service'
import { ErrorToastService } from 'src/app/services/error-toast.service'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { MainStatus } from 'src/app/services/patch-db/data-model'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { pauseFor } from 'src/app/util/misc.util'
@@ -16,9 +17,10 @@ import { pauseFor } from 'src/app/util/misc.util'
export class AppMetricsPage {
loading = true
pkgId: string
pkg: PackageDataEntry
mainStatus: MainStatus
going = false
metrics: Metric
subs: Subscription[] = []
@ViewChild(IonContent) content: IonContent
@@ -26,12 +28,17 @@ export class AppMetricsPage {
private readonly route: ActivatedRoute,
private readonly errToast: ErrorToastService,
private readonly patch: PatchDbService,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
) { }
ngOnInit () {
this.pkgId = this.route.snapshot.paramMap.get('pkgId')
this.pkg = this.patch.data['package-data'][this.pkgId]
this.subs = [
this.patch.watch$('package-data', this.pkgId, 'installed', 'status', 'main')
.subscribe(main => {
this.mainStatus = main
}),
]
this.startDaemon()
}
@@ -42,6 +49,7 @@ export class AppMetricsPage {
ngOnDestroy () {
this.stopDaemon()
this.subs.forEach(sub => sub.unsubscribe())
}
async startDaemon (): Promise<void> {
@@ -58,7 +66,7 @@ export class AppMetricsPage {
async getMetrics (): Promise<void> {
try {
this.metrics = await this.apiService.getPkgMetrics({ id: this.pkgId})
this.metrics = await this.embassyApi.getPkgMetrics({ id: this.pkgId})
} catch (e) {
console.error(e)
this.errToast.present(e.message)

12
ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
View File

@@ -30,7 +30,7 @@ export class AppPropertiesPage {
constructor (
private readonly route: ActivatedRoute,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly errToast: ErrorToastService,
private readonly alertCtrl: AlertController,
private readonly toastCtrl: ToastController,
@@ -41,16 +41,20 @@ export class AppPropertiesPage {
async ngOnInit () {
this.pkgId = this.route.snapshot.paramMap.get('pkgId')
this.running = this.patch.data['package-data'][this.pkgId].installed?.status.main.status === PackageMainStatus.Running
await this.getProperties()
this.subs = [
this.route.queryParams.subscribe(queryParams => {
this.route.queryParams
.subscribe(queryParams => {
if (queryParams['pointer'] === this.pointer) return
this.pointer = queryParams['pointer']
this.node = JsonPointer.get(this.properties, this.pointer || '')
}),
this.patch.watch$('package-data', this.pkgId, 'installed', 'status', 'main', 'status')
.subscribe(status => {
this.running = status === PackageMainStatus.Running
}),
]
}
@@ -115,7 +119,7 @@ export class AppPropertiesPage {
private async getProperties (): Promise<void> {
this.loading = true
try {
this.properties = await this.apiService.getPackageProperties({ id: this.pkgId })
this.properties = await this.embassyApi.getPackageProperties({ id: this.pkgId })
this.node = JsonPointer.get(this.properties, this.pointer || '')
} catch (e) {
console.error(e)

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

@@ -21,7 +21,7 @@
<ion-label class="ion-text-wrap">
<p class="ion-padding-bottom"><ion-text color="warning">Warning</ion-text></p>
<h2>
Restoring from backup will overwrite all current data for {{ title }} .
Restoring from backup will overwrite all current data for {{ patch.data['package-data'][pkgId].manifest.title }} .
</h2>
</ion-label>
</ion-item>

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

@@ -6,6 +6,7 @@ import { DiskInfo } from 'src/app/services/api/api.types'
import { ActivatedRoute } from '@angular/router'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { Subscription } from 'rxjs'
import { take } from 'rxjs/operators'
@Component({
selector: 'app-restore',
@@ -26,15 +27,13 @@ export class AppRestorePage {
constructor (
private readonly route: ActivatedRoute,
private readonly modalCtrl: ModalController,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly loadingCtrl: LoadingController,
private readonly patch: PatchDbService,
public readonly patch: PatchDbService,
) { }
ngOnInit () {
this.pkgId = this.route.snapshot.paramMap.get('pkgId')
this.title = this.patch.data['package-data'][this.pkgId].manifest.title
this.getExternalDisks()
}
@@ -49,7 +48,7 @@ export class AppRestorePage {
async getExternalDisks (): Promise<void> {
try {
this.disks = await this.apiService.getDisks({ })
this.disks = await this.embassyApi.getDisks({ })
this.allPartitionsMounted = Object.values(this.disks).every(d => Object.values(d.partitions).every(p => p['is-mounted']))
} catch (e) {
console.error(e)
@@ -87,7 +86,7 @@ export class AppRestorePage {
await loader.present()
try {
await this.apiService.restorePackage({
await this.embassyApi.restorePackage({
id: this.pkgId,
logicalname,
password,

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

@@ -40,7 +40,7 @@ export class AppShowPage {
private readonly errToast: ErrorToastService,
private readonly loader: LoaderService,
private readonly modalCtrl: ModalController,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly wizardBaker: WizardBaker,
private readonly config: ConfigService,
public readonly patch: PatchDbService,
@@ -49,13 +49,13 @@ export class AppShowPage {
async ngOnInit () {
this.pkgId = this.route.snapshot.paramMap.get('pkgId')
this.pkg = this.patch.data['package-data'][this.pkgId]
this.subs = [
combineLatest([
this.patch.connected$(),
this.patch.watch$('package-data', this.pkgId),
])
.subscribe(([connected, pkg]) => {
this.pkg = pkg
this.connected = connected
this.rendering = renderPkgStatus(pkg.state, pkg.installed.status)
}),
@@ -82,7 +82,7 @@ export class AppShowPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringAsync(async () => {
const breakages = await this.apiService.dryStopPackage({ id })
const breakages = await this.embassyApi.dryStopPackage({ id })
console.log('BREAKAGES', breakages)
@@ -100,7 +100,7 @@ export class AppShowPage {
if (cancelled) return { }
}
return this.apiService.stopPackage({ id }).then(chill)
return this.embassyApi.stopPackage({ id }).then(chill)
}).catch(e => this.setError(e))
}
@@ -211,7 +211,7 @@ export class AppShowPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringP(
this.apiService.startPackage({ id: this.pkgId }),
this.embassyApi.startPackage({ id: this.pkgId }),
).catch(e => this.setError(e))
}
@@ -235,7 +235,8 @@ export class AppShowPage {
title: 'Monitor',
icon: 'medkit-outline',
color: 'danger',
disabled: [],
// @TODO make the disabled check better. Don't want to list every status here. Monitor should be disabled except is pkg is running.
disabled: [FEStatus.Installing, FEStatus.Updating, FEStatus.Removing, FEStatus.BackingUp, FEStatus.Restoring],
},
{
action: () => this.navCtrl.navigateForward(['config'], { relativeTo: this.route }),

2
ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.module.ts
View File

@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
import { AppReleaseNotes } from './app-release-notes.page'
import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
import { SharingModule } from 'src/app/modules/sharing.module'
import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
const routes: Routes = [
{
@@ -20,6 +21,7 @@ const routes: Routes = [
RouterModule.forChild(routes),
PwaBackComponentModule,
SharingModule,
TextSpinnerComponentModule,
],
declarations: [AppReleaseNotes],
})

2
ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html
View File

@@ -8,7 +8,7 @@
</ion-header>
<ion-content>
<ion-spinner *ngIf="!marketplaceService.releaseNotes[pkgId]; else loaded" class="center" name="lines" color="warning"></ion-spinner>
<text-spinner *ngIf="!marketplaceService.releaseNotes[pkgId]; else loaded" text="Loading Release Notes"></text-spinner>
<ng-template #loaded>
<div *ngFor="let note of marketplaceService.releaseNotes[pkgId] | keyvalue : asIsOrder">

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

@@ -53,7 +53,7 @@
<ion-label>
<h2 style="font-family: 'Montserrat';">{{ pkg.manifest.title }}</h2>
<p>{{ pkg.manifest.description.short }}</p>
<ng-container *ngIf="patch.data['package-data'][pkg.id] as localPkg">
<ng-container *ngIf="localPkgs[pkg.id] as localPkg">
<p *ngIf="localPkg.state === PackageState.Installed">
<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>

19
ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
View File

@@ -3,12 +3,12 @@ import { MarketplaceData, MarketplaceEOS, MarketplacePkg } from 'src/app/service
import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
import { IonContent, ModalController } from '@ionic/angular'
import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { PackageState } from 'src/app/services/patch-db/data-model'
import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
import { Subscription } from 'rxjs'
import { ErrorToastService } from 'src/app/services/error-toast.service'
import { MarketplaceService } from '../marketplace.service'
import { MarketplaceApiService } from 'src/app/services/api/marketplace/marketplace-api.service'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
@Component({
selector: 'marketplace-list',
@@ -17,6 +17,8 @@ import { MarketplaceApiService } from 'src/app/services/api/marketplace/marketpl
})
export class MarketplaceListPage {
@ViewChild(IonContent) content: IonContent
localPkgs: { [id: string]: PackageDataEntry }
pageLoading = true
pkgsLoading = true
@@ -37,7 +39,7 @@ export class MarketplaceListPage {
constructor (
private readonly marketplaceService: MarketplaceService,
private readonly marketplaceApiService: MarketplaceApiService,
private readonly marketplaceApi: MarketplaceApiService,
private readonly modalCtrl: ModalController,
private readonly errToast: ErrorToastService,
private readonly wizardBaker: WizardBaker,
@@ -45,11 +47,16 @@ export class MarketplaceListPage {
) { }
async ngOnInit () {
this.subs = [
this.patch.watch$('package-data').subscribe(pkgs => {
this.localPkgs = pkgs
}),
]
try {
const [data, eos] = await Promise.all([
this.marketplaceApiService.getMarketplaceData({ }),
this.marketplaceApiService.getEos({ }),
this.marketplaceApi.getMarketplaceData({ }),
this.marketplaceApi.getEos({ }),
this.getPkgs(),
])
this.eos = eos
@@ -107,7 +114,7 @@ export class MarketplaceListPage {
if (this.pkgs.length) {
this.pkgsLoading = false
}
await this.marketplaceService.getUpdates(this.patch.data['package-data'])
await this.marketplaceService.getUpdates(this.localPkgs)
this.pkgs = this.marketplaceService.updates
} else {
const pkgs = await this.marketplaceService.getPkgs(

23
ui/src/app/pages/marketplace-routes/marketplace.service.ts
View File

@@ -12,32 +12,30 @@ export class MarketplaceService {
updates: MarketplacePkg[] = null
releaseNotes: { [id: string]: {
[version: string]: string
} }
} } = { }
constructor (
private readonly marketplaceApiService: MarketplaceApiService,
private readonly marketplaceApi: MarketplaceApiService,
private readonly emver: Emver,
) { }
async getUpdates (pkgData: { [id: string]: PackageDataEntry}) : Promise<MarketplacePkg[]> {
const idAndCurrentVersions = Object.keys(pkgData).map(key => ({ id: key, version: pkgData[key].manifest.version }))
console.log(JSON.stringify(idAndCurrentVersions))
const latestPkgs = (await this.marketplaceApiService.getMarketplacePkgs({
async getUpdates (localPkgs: { [id: string]: PackageDataEntry }) : Promise<void> {
const idAndCurrentVersions = Object.keys(localPkgs).map(key => ({ id: key, version: localPkgs[key].manifest.version }))
const latestPkgs = (await this.marketplaceApi.getMarketplacePkgs({
ids: idAndCurrentVersions,
}))
const updates = latestPkgs.filter(latestPkg => {
const latestVersion = latestPkg.manifest.version
const curVersion = pkgData[latestPkg.manifest.id]?.manifest.version
const curVersion = localPkgs[latestPkg.manifest.id]?.manifest.version
return !!curVersion && this.emver.compare(latestVersion, curVersion) === 1
})
this.updates = updates
return updates
}
async getPkgs (category: string, query: string, page: number, perPage: number) : Promise<MarketplacePkg[]> {
const pkgs = await this.marketplaceApiService.getMarketplacePkgs({
const pkgs = await this.marketplaceApi.getMarketplacePkgs({
category: category !== 'all' ? category : undefined,
query,
page: String(page),
@@ -51,7 +49,10 @@ export class MarketplaceService {
}
async getPkg (id: string, version?: string): Promise<void> {
const pkg = (await this.marketplaceApiService.getMarketplacePkgs({ ids: [{ id, version }]}))[0]
const pkgs = await this.marketplaceApi.getMarketplacePkgs({
ids: [{ id, version: version || '*' }],
})
const pkg = pkgs[0]
if (pkg) {
this.pkgs[id] = pkg
} else {
@@ -60,7 +61,7 @@ export class MarketplaceService {
}
async getReleaseNotes (id: string): Promise<void> {
this.releaseNotes[id] = await this.marketplaceApiService.getReleaseNotes({ id })
this.releaseNotes[id] = await this.marketplaceApi.getReleaseNotes({ id })
}
}

6
ui/src/app/pages/notifications/notifications.page.ts
View File

@@ -20,7 +20,7 @@ export class NotificationsPage {
readonly perPage = 20
constructor (
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly loader: LoaderService,
private readonly errToast: ErrorToastService,
private readonly alertCtrl: AlertController,
@@ -48,7 +48,7 @@ export class NotificationsPage {
async getNotifications (): Promise<ServerNotifications> {
let notifications: ServerNotifications = []
try {
notifications = await this.apiService.getNotifications({ page: this.page, 'per-page': this.perPage })
notifications = await this.embassyApi.getNotifications({ page: this.page, 'per-page': this.perPage })
this.needInfinite = notifications.length >= this.perPage
this.page++
} catch (e) {
@@ -65,7 +65,7 @@ export class NotificationsPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringP(
this.apiService.deleteNotification({ id }).then(() => {
this.embassyApi.deleteNotification({ id }).then(() => {
this.notifications.splice(index, 1)
}),
).catch(e => {

2
ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.html
View File

@@ -7,7 +7,7 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding-top" *ngIf="patch.data['server-info] as server">
<ion-content class="ion-padding-top" *ngIf="patch.data['server-info'] as server">
<ion-item-group>
<ion-item detail="true" button [routerLink]="['ssh-keys']">

8
ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/ssh.service.ts
View File

@@ -10,7 +10,7 @@ export class SSHService {
private readonly keys$ = new BehaviorSubject<SSHKeys>({ })
constructor (
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
) { }
watch$ () {
@@ -18,18 +18,18 @@ export class SSHService {
}
async getKeys (): Promise<void> {
const keys = await this.apiService.getSshKeys({ })
const keys = await this.embassyApi.getSshKeys({ })
this.keys$.next(keys)
}
async add (pubkey: string): Promise<void> {
const key = await this.apiService.addSshKey({ pubkey })
const key = await this.embassyApi.addSshKey({ pubkey })
const keys = this.keys$.getValue()
this.keys$.next({ ...keys, ...key })
}
async delete (hash: string): Promise<void> {
await this.apiService.deleteSshKey({ hash })
await this.embassyApi.deleteSshKey({ hash })
const keys = this.keys$.getValue()
const filtered = Object.keys(keys)

4
ui/src/app/pages/server-routes/lan/lan.page.ts
View File

@@ -26,7 +26,7 @@ export class LANPage {
private readonly toastCtrl: ToastController,
private readonly config: ConfigService,
private readonly loader: LoaderService,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly patch: PatchDbService,
) { }
@@ -54,7 +54,7 @@ export class LANPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringAsync( async () => {
await this.apiService.refreshLan({ })
await this.embassyApi.refreshLan({ })
}).catch(e => {
console.error(e)
})

6
ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
View File

@@ -17,7 +17,7 @@ export class ServerBackupPage {
constructor (
private readonly modalCtrl: ModalController,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly loadingCtrl: LoadingController,
) { }
@@ -32,7 +32,7 @@ export class ServerBackupPage {
async getExternalDisks (): Promise<void> {
try {
this.disks = await this.apiService.getDisks({ })
this.disks = await this.embassyApi.getDisks({ })
this.allPartitionsMounted = Object.values(this.disks).every(d => Object.values(d.partitions).every(p => p['is-mounted']))
} catch (e) {
console.error(e)
@@ -70,7 +70,7 @@ export class ServerBackupPage {
await loader.present()
try {
await this.apiService.createBackup({ logicalname, password })
await this.embassyApi.createBackup({ logicalname, password })
} catch (e) {
console.error(e)
this.error = e.message

4
ui/src/app/pages/server-routes/server-logs/server-logs.page.ts
View File

@@ -15,7 +15,7 @@ export class ServerLogsPage {
constructor (
private readonly errToast: ErrorToastService,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
) { }
ngOnInit () {
@@ -26,7 +26,7 @@ export class ServerLogsPage {
this.logs = ''
this.loading = true
try {
const logs = await this.apiService.getServerLogs({ })
const logs = await this.embassyApi.getServerLogs({ })
this.logs = logs.map(l => `${l.timestamp} ${l.log}`).join('\n\n')
setTimeout(async () => await this.content.scrollToBottom(100), 200)
} catch (e) {

4
ui/src/app/pages/server-routes/server-metrics/server-metrics.page.ts
View File

@@ -16,7 +16,7 @@ export class ServerMetricsPage {
constructor (
private readonly errToast: ErrorToastService,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
) { }
ngOnInit () {
@@ -41,7 +41,7 @@ export class ServerMetricsPage {
async getMetrics (): Promise<void> {
try {
this.metrics = await this.apiService.getServerMetrics({ })
this.metrics = await this.embassyApi.getServerMetrics({ })
} catch (e) {
console.error(e)
this.errToast.present(e.message)

12
ui/src/app/pages/server-routes/server-show/server-show.page.ts
View File

@@ -16,7 +16,7 @@ export class ServerShowPage {
constructor (
private readonly alertCtrl: AlertController,
private readonly loader: LoaderService,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly navCtrl: NavController,
private readonly route: ActivatedRoute,
) { }
@@ -73,7 +73,7 @@ export class ServerShowPage {
this.loader
.of(LoadingSpinner(`Restarting...`))
.displayDuringAsync( async () => {
await this.apiService.restartServer({ })
await this.embassyApi.restartServer({ })
})
.catch(console.error)
}
@@ -82,7 +82,7 @@ export class ServerShowPage {
this.loader
.of(LoadingSpinner(`Shutting down...`))
.displayDuringAsync( async () => {
await this.apiService.shutdownServer({ })
await this.embassyApi.shutdownServer({ })
})
.catch(console.error)
}
@@ -91,9 +91,9 @@ export class ServerShowPage {
this.settings = {
'Settings': [
{
title: 'Preferences',
icon: 'cog-outline',
action: () => this.navCtrl.navigateForward(['preferences'], { relativeTo: this.route }),
title: 'Privacy and Security',
icon: 'shield-checkmark-outline',
action: () => this.navCtrl.navigateForward(['privacy'], { relativeTo: this.route }),
},
{
title: 'LAN',

6
ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.page.ts
View File

@@ -19,7 +19,7 @@ export class WifiAddPage {
constructor (
private readonly navCtrl: NavController,
private readonly errToast: ErrorToastService,
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly loader: LoaderService,
private readonly wifiService: WifiService,
) { }
@@ -30,7 +30,7 @@ export class WifiAddPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringAsync(async () => {
await this.apiService.addWifi({
await this.embassyApi.addWifi({
ssid: this.ssid,
password: this.password,
country: this.countryCode,
@@ -50,7 +50,7 @@ export class WifiAddPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringAsync(async () => {
await this.apiService.addWifi({
await this.embassyApi.addWifi({
ssid: this.ssid,
password: this.password,
country: this.countryCode,

6
ui/src/app/pages/server-routes/wifi/wifi.page.ts
View File

@@ -18,7 +18,7 @@ export class WifiListPage {
subs: Subscription[] = []
constructor (
private readonly apiService: ApiService,
private readonly embassyApi: ApiService,
private readonly loader: LoaderService,
private readonly errToast: ErrorToastService,
private readonly actionCtrl: ActionSheetController,
@@ -62,7 +62,7 @@ export class WifiListPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringAsync(async () => {
await this.apiService.connectWifi({ ssid })
await this.embassyApi.connectWifi({ ssid })
this.wifiService.confirmWifi(ssid)
}).catch(e => {
console.error(e)
@@ -76,7 +76,7 @@ export class WifiListPage {
spinner: 'lines',
cssClass: 'loader',
}).displayDuringAsync(async () => {
await this.apiService.deleteWifi({ ssid })
await this.embassyApi.deleteWifi({ ssid })
}).catch(e => {
console.error(e)
this.errToast.present(e.message)