react to sequnce changes

ui/src/app/components/status/status.component.scss

@@ -1,5 +1,3 @@
 p {
   margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }

ui/src/app/components/status/status.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { BehaviorSubject } from 'rxjs'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { PackageDataEntry, PackageMainStatus, PackageState } 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.patch.sequence$.subscribe(_ => {
-        this.pkg = this.patch.data['package-data'][this.pkgId]
+        this.render(this.patch.data['package-data'][this.pkgId])
-        this.render(this.pkg)
       }),
     ]
   }

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

@@ -33,10 +33,10 @@
   
             <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" src="assets/img/running-bulb.png"/>
+            <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" src="assets/img/issue-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" src="assets/img/warning-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" src="assets/img/off-bulb.png"/>
+            <img class="bulb-off" *ngIf="(pkg.key | displayBulb : 'off' : connected) | async" src="assets/img/off-bulb.png"/>
 
             <ion-card-header>
               <status *ngIf="connected" [pkgId]="pkg.key" size="calc(8px + .4vw)" weight="bold"></status>

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

@@ -32,16 +32,16 @@
 
       <div class="status-readout">
         <status *ngIf="connected" size="large" weight="500" [pkgId]="pkgId"></status>
-        <ion-button *ngIf="(pkgId | status) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
+        <ion-button *ngIf="(pkgId | status | async) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
           Configure
         </ion-button>
-        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : (pkgId | status)" expand="block" color="danger" (click)="stop()">
+        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : (pkgId | status | async)" expand="block" color="danger" (click)="stop()">
           Stop
         </ion-button>
-        <ion-button *ngIf="(pkgId | status) === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
+        <ion-button *ngIf="(pkgId | status | async) === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
           Fix
         </ion-button>
-        <ion-button *ngIf="(pkgId | status) === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
+        <ion-button *ngIf="(pkgId | status | async) === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
           Start
         </ion-button>
       </div>

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),

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 {
+  transform (pkgId: string, bulb: DisplayBulb, connected: boolean): Observable<boolean> {
-    const pkg = this.patch.data['package-data'][pkgId]
+    return this.patch.sequence$.pipe(
-    if (!connected) return bulb === 'off'
+      map(_ => {
-    const { color } = renderPkgStatus(pkg.state, pkg.installed.status)
+        if (!connected) return bulb === 'off'
-    switch (color) {
+        const pkg = this.patch.data['package-data'][pkgId]
-      case 'danger': return bulb === 'red'
+        const { color } = renderPkgStatus(pkg.state, pkg.installed.status)
-      case 'success': return bulb === 'green'
+        switch (color) {
-      case 'warning': return bulb === 'yellow'
+          case 'danger': return bulb === 'red'
-      default: return bulb === 'off'
+          case 'success': return bulb === 'green'
-    }
+          case 'warning': return bulb === 'yellow'
+          default: return bulb === 'off'
+        }
+      }),
+    )
   }
 }
 

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 {
+  transform (pkgId: string): Observable<FEStatus> {
-    console.log(pkgId)
+    return this.patch.sequence$.pipe(
-    const pkg = this.patch.data['package-data'][pkgId]
+      map(_ => {
-    return renderPkgStatus(pkg.state, pkg.installed.status).feStatus
+        const pkg = this.patch.data['package-data'][pkgId]
+        return renderPkgStatus(pkg.state, pkg.installed.status).feStatus
+      }),
+    )
   }
 }

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<number>
   data: DataModel
   private patchDb: PatchDB<DataModel>
   private patchSub: Subscription
@@ -30,6 +31,8 @@ export class PatchDbModel {
   async init (): Promise<void> {
     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
   }