handle removing and backing up state, fix ackInstructions too (#2935)

web/projects/ui/src/app/routes/portal/routes/services/routes/service.component.ts

@@ -31,6 +31,9 @@ import { ServiceStatusComponent } from '../components/status.component'
 @Component({
   template: `
     @if (pkg(); as pkg) {
+      @if (pkg.status.main === 'error') {
+        <service-error [pkg]="pkg" />
+      }
       @if (installing()) {
         <service-install-progress [pkg]="pkg" />
       } @else if (installed()) {
@@ -48,22 +51,25 @@ import { ServiceStatusComponent } from '../components/status.component'
           }
         </service-status>
 
-        @if (pkg.status.main === 'error') {
+        @if (status() !== 'backingUp') {
-          <service-error [pkg]="pkg" />
+          <service-interfaces [pkg]="pkg" [disabled]="status() !== 'running'" />
+
+          @if (errors() | async; as errors) {
+            <service-dependencies
+              [pkg]="pkg"
+              [services]="services()"
+              [errors]="errors"
+            />
+          }
+
+          <service-health-checks [checks]="health()" />
+          <service-action-requests [pkg]="pkg" [services]="services() || {}" />
         }
-
+      } @else if (removing()) {
-        <service-interfaces [pkg]="pkg" [disabled]="status() !== 'running'" />
+        <service-status
-
+          [connected]="!!connected()"
-        @if (errors() | async; as errors) {
+          [status]="status()"
-          <service-dependencies
+        ></service-status>
-            [pkg]="pkg"
-            [services]="services()"
-            [errors]="errors"
-          />
-        }
-
-        <service-health-checks [checks]="health()" />
-        <service-action-requests [pkg]="pkg" [services]="services() || {}" />
       }
     }
   `,
@@ -134,15 +140,17 @@ export class ServiceRoute {
   )
 
   protected readonly installed = computed(
-    () =>
+    () => this.pkg()?.stateInfo.state === 'installed',
-      this.pkg()?.stateInfo.state === 'installed' &&
-      this.status() !== 'backingUp',
   )
 
   protected readonly installing = computed(
     (state = this.status()) =>
       state === 'installing' || state === 'updating' || state === 'restoring',
   )
+
+  protected readonly removing = computed(
+    () => this.pkg()?.stateInfo.state === 'removing',
+  )
 }
 
 function toHealthCheck(status: T.MainStatus): T.NamedHealthCheckResult[] {

web/projects/ui/src/app/routes/portal/routes/services/services.routes.ts

@@ -30,7 +30,7 @@ export const ROUTES: Routes = [
         canActivate: [
           ({ paramMap }: ActivatedRouteSnapshot) => {
             inject(ApiService)
-              .setDbValue(['ack-instructions', paramMap.get('pkgId')!], true)
+              .setDbValue(['ackInstructions', paramMap.get('pkgId')!], true)
               .catch(e => console.error('Failed to mark as seen', e))
 
             return true