re-introduce watch

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

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+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'
 
@@ -24,8 +24,15 @@ export class StatusComponent {
 
   ngOnInit () {
     this.subs = [
-      this.patch.sequence$.subscribe(_ => {
+      combineLatest([
-        this.render(this.patch.data['package-data'][this.pkgId])
+        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
       }),
     ]
   }
@@ -33,12 +40,5 @@ export class StatusComponent {
   ngOnDestroy () {
     this.subs.forEach(sub => sub.unsubscribe())
   }
-
-  private render (pkg: PackageDataEntry) {
-    const { display, color, showDots } = renderPkgStatus(pkg.state, pkg.installed.status)
-    this.display = display
-    this.color = color
-    this.showDots = showDots
-  }
 }
 

ui/src/app/guards/unmaintenance.guard.ts

@@ -14,10 +14,9 @@ export class UnmaintenanceGuard implements CanActivate {
     private readonly router: Router,
     private readonly patch: PatchDbModel,
   ) {
-    this.patch.watch$('server-info', 'status')
+    this.patch.sequence$.subscribe(_ => {
-    .pipe(
+      this.serverStatus = this.patch.data['server-info'].status
-      tap(status => this.serverStatus = status),
+    })
-    ).subscribe()
   }
 
   canActivate (): boolean {

ui/src/app/pipes/display-bulb.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { Observable } from 'rxjs'
+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'
@@ -14,11 +14,14 @@ export class DisplayBulbPipe implements PipeTransform {
   ) { }
 
   transform (pkgId: string, bulb: DisplayBulb, connected: boolean): Observable<boolean> {
-    return this.patch.sequence$.pipe(
+    return combineLatest([
-      map(_ => {
+      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 pkg = this.patch.data['package-data'][pkgId]
+        const { color } = renderPkgStatus(state, status)
-        const { color } = renderPkgStatus(pkg.state, pkg.installed.status)
         switch (color) {
           case 'danger': return bulb === 'red'
           case 'success': return bulb === 'green'

ui/src/app/pipes/status.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { Observable } from 'rxjs'
+import { combineLatest, 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'
@@ -14,10 +14,13 @@ export class StatusPipe implements PipeTransform {
   ) { }
 
   transform (pkgId: string): Observable<FEStatus> {
-    return this.patch.sequence$.pipe(
+    return combineLatest([
-      map(_ => {
+      this.patch.watch$('package-data', pkgId, 'state'),
-        const pkg = this.patch.data['package-data'][pkgId]
+      this.patch.watch$('package-data', pkgId, 'installed', 'status'),
-        return renderPkgStatus(pkg.state, pkg.installed.status).feStatus
+    ])
+    .pipe(
+      map(([state, status]) => {
+        return renderPkgStatus(state, status).feStatus
       }),
     )
   }