diff --git a/ui/src/app/components/status/status.component.scss b/ui/src/app/components/status/status.component.scss index 18f7ad769..44a919ec1 100644 --- a/ui/src/app/components/status/status.component.scss +++ b/ui/src/app/components/status/status.component.scss @@ -1,5 +1,3 @@ p { margin: 0; - overflow: hidden; - text-overflow: ellipsis; } diff --git a/ui/src/app/components/status/status.component.ts b/ui/src/app/components/status/status.component.ts index 6e2a2d7a1..5c2396dc7 100644 --- a/ui/src/app/components/status/status.component.ts +++ b/ui/src/app/components/status/status.component.ts @@ -1,6 +1,5 @@ import { Component, Input } from '@angular/core' -import { BehaviorSubject } from 'rxjs' -import { PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model' +import { PackageDataEntry } from 'src/app/services/patch-db/data-model' import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service' import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service' @@ -18,7 +17,6 @@ export class StatusComponent { color = '' showDots = false subs = [] - pkg: PackageDataEntry constructor ( private readonly patch: PatchDbModel, @@ -26,9 +24,8 @@ export class StatusComponent { ngOnInit () { this.subs = [ - this.patch.watch$('package-data', this.pkgId, 'installed', 'status', 'main', 'status').subscribe(_ => { - this.pkg = this.patch.data['package-data'][this.pkgId] - this.render(this.pkg) + this.patch.sequence$.subscribe(_ => { + this.render(this.patch.data['package-data'][this.pkgId]) }), ] } diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.html b/ui/src/app/pages/apps-routes/app-list/app-list.page.html index e2b6fa975..4ca0edc51 100644 --- a/ui/src/app/pages/apps-routes/app-list/app-list.page.html +++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.html @@ -33,10 +33,10 @@ icon - - - - + + + + diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/ui/src/app/pages/apps-routes/app-show/app-show.page.html index 3d00a6d18..20f60aac1 100644 --- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html +++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html @@ -32,16 +32,16 @@
- + Configure - + Stop - + Fix - + Start
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts index b899ba5b7..083425c47 100644 --- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts +++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts @@ -49,7 +49,7 @@ export class AppShowPage { async ngOnInit () { this.pkgId = this.route.snapshot.paramMap.get('pkgId') this.pkg = this.patch.data['package-data'][this.pkgId] - // @TODO re-fetch manifest if package state changes. + // @TODO maybe re-fetch manifest if package state changes. this.manifest = getManifest(this.pkg) this.subs = [ this.patch.connected$().subscribe(c => this.connected = c), diff --git a/ui/src/app/pipes/display-bulb.pipe.ts b/ui/src/app/pipes/display-bulb.pipe.ts index 3d99d99ac..0a511c171 100644 --- a/ui/src/app/pipes/display-bulb.pipe.ts +++ b/ui/src/app/pipes/display-bulb.pipe.ts @@ -1,5 +1,6 @@ import { Pipe, PipeTransform } from '@angular/core' -import { PackageState, Status } from '../services/patch-db/data-model' +import { 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' @@ -12,16 +13,20 @@ export class DisplayBulbPipe implements PipeTransform { private readonly patch: PatchDbModel, ) { } - transform (pkgId: string, bulb: DisplayBulb, connected: boolean): boolean { - const pkg = this.patch.data['package-data'][pkgId] - if (!connected) return bulb === 'off' - const { color } = renderPkgStatus(pkg.state, pkg.installed.status) - switch (color) { - case 'danger': return bulb === 'red' - case 'success': return bulb === 'green' - case 'warning': return bulb === 'yellow' - default: return bulb === 'off' - } + transform (pkgId: string, bulb: DisplayBulb, connected: boolean): Observable { + return this.patch.sequence$.pipe( + map(_ => { + if (!connected) return bulb === 'off' + const pkg = this.patch.data['package-data'][pkgId] + const { color } = renderPkgStatus(pkg.state, pkg.installed.status) + switch (color) { + case 'danger': return bulb === 'red' + case 'success': return bulb === 'green' + case 'warning': return bulb === 'yellow' + default: return bulb === 'off' + } + }), + ) } } diff --git a/ui/src/app/pipes/status.pipe.ts b/ui/src/app/pipes/status.pipe.ts index 0a7826dbf..9586de65d 100644 --- a/ui/src/app/pipes/status.pipe.ts +++ b/ui/src/app/pipes/status.pipe.ts @@ -1,4 +1,6 @@ import { Pipe, PipeTransform } from '@angular/core' +import { Observable } from 'rxjs' +import { map } from 'rxjs/operators' import { PatchDbModel } from '../services/patch-db/patch-db.service' import { FEStatus, renderPkgStatus } from '../services/pkg-status-rendering.service' @@ -11,9 +13,12 @@ export class StatusPipe implements PipeTransform { private readonly patch: PatchDbModel, ) { } - transform (pkgId: string): FEStatus { - console.log(pkgId) - const pkg = this.patch.data['package-data'][pkgId] - return renderPkgStatus(pkg.state, pkg.installed.status).feStatus + transform (pkgId: string): Observable { + return this.patch.sequence$.pipe( + map(_ => { + const pkg = this.patch.data['package-data'][pkgId] + return renderPkgStatus(pkg.state, pkg.installed.status).feStatus + }), + ) } } \ No newline at end of file diff --git a/ui/src/app/services/patch-db/patch-db.service.ts b/ui/src/app/services/patch-db/patch-db.service.ts index d6f8e4426..cf0913341 100644 --- a/ui/src/app/services/patch-db/patch-db.service.ts +++ b/ui/src/app/services/patch-db/patch-db.service.ts @@ -18,6 +18,7 @@ export enum ConnectionStatus { }) export class PatchDbModel { connectionStatus$ = new BehaviorSubject(ConnectionStatus.Initializing) + sequence$: Observable data: DataModel private patchDb: PatchDB private patchSub: Subscription @@ -30,6 +31,8 @@ export class PatchDbModel { async init (): Promise { const cache = await this.bootstrapper.init() this.patchDb = new PatchDB(this.sources, cache) + + this.sequence$ = this.patchDb.store.sequence$.asObservable() this.data = this.patchDb.store.cache.data }