Feature/server status restarting (#2503)

* extend `server-info`

* add restarting, shutting down to FE status bar

* fix build

---------

Co-authored-by: Aiden McClelland <me@drbonez.dev>

frontend/projects/ui/src/app/app.component.html

@@ -26,10 +26,7 @@
           type="overlay"
           side="end"
           class="right-menu container"
-          [class.container_offline]="
-            (authService.isVerified$ | async) &&
-            !(connection.connected$ | async)
-          "
+          [class.container_offline]="offline$ | async"
           [class.right-menu_hidden]="!drawer.open"
           [style.--side-width.px]="drawer.width"
         >
@@ -47,10 +44,7 @@
           [responsiveColViewport]="viewport"
           id="main-content"
           class="container"
-          [class.container_offline]="
-            (authService.isVerified$ | async) &&
-            !(connection.connected$ | async)
-          "
+          [class.container_offline]="offline$ | async"
         >
           <ion-content
             #viewport="viewport"

frontend/projects/ui/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, OnDestroy } from '@angular/core'
-import { merge } from 'rxjs'
+import { combineLatest, map, merge, startWith } from 'rxjs'
 import { AuthService } from './services/auth.service'
 import { SplitPaneTracker } from './services/split-pane.service'
 import { PatchDataService } from './services/patch-data.service'
@@ -25,6 +25,19 @@ export class AppComponent implements OnDestroy {
   readonly sidebarOpen$ = this.splitPane.sidebarOpen$
   readonly widgetDrawer$ = this.clientStorageService.widgetDrawer$
   readonly theme$ = inject(THEME)
+  readonly offline$ = combineLatest([
+    this.authService.isVerified$,
+    this.connection.connected$,
+    this.patch
+      .watch$('server-info', 'status-info')
+      .pipe(startWith({ restarting: false, 'shutting-down': false })),
+  ]).pipe(
+    map(
+      ([verified, connected, status]) =>
+        verified &&
+        (!connected || status.restarting || status['shutting-down']),
+    ),
+  )
 
   constructor(
     private readonly titleService: Title,

frontend/projects/ui/src/app/components/connection-bar/connection-bar.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { PatchDB } from 'patch-db-client'
 import { combineLatest, map, Observable, startWith } from 'rxjs'
 import { ConnectionService } from 'src/app/services/connection.service'
+import { DataModel } from 'src/app/services/patch-db/data-model'
 
 @Component({
   selector: 'connection-bar',
@@ -19,8 +21,11 @@ export class ConnectionBarComponent {
   }> = combineLatest([
     this.connectionService.networkConnected$,
     this.websocket$.pipe(startWith(false)),
+    this.patch
+      .watch$('server-info', 'status-info')
+      .pipe(startWith({ restarting: false, 'shutting-down': false })),
   ]).pipe(
-    map(([network, websocket]) => {
+    map(([network, websocket, status]) => {
       if (!network)
         return {
           message: 'No Internet',
@@ -35,6 +40,20 @@ export class ConnectionBarComponent {
           icon: 'cloud-offline-outline',
           dots: true,
         }
+      if (status['shutting-down'])
+        return {
+          message: 'Shutting Down',
+          color: 'dark',
+          icon: 'power',
+          dots: true,
+        }
+      if (status.restarting)
+        return {
+          message: 'Restarting',
+          color: 'dark',
+          icon: 'power',
+          dots: true,
+        }
 
       return {
         message: 'Connected',
@@ -45,5 +64,8 @@ export class ConnectionBarComponent {
     }),
   )
 
-  constructor(private readonly connectionService: ConnectionService) {}
+  constructor(
+    private readonly connectionService: ConnectionService,
+    private readonly patch: PatchDB<DataModel>,
+  ) {}
 }

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -352,7 +352,6 @@ export class ServerShowPage {
 
     try {
       await this.embassyApi.restartServer({})
-      this.presentAlertInProgress(action, ` until ${action} completes.`)
     } catch (e: any) {
       this.errToast.present(e)
     } finally {
@@ -370,10 +369,6 @@ export class ServerShowPage {
 
     try {
       await this.embassyApi.shutdownServer({})
-      this.presentAlertInProgress(
-        action,
-        '.<br /><br /><b>You will need to physically power cycle the device to regain connectivity.</b>',
-      )
     } catch (e: any) {
       this.errToast.present(e)
     } finally {
@@ -391,7 +386,6 @@ export class ServerShowPage {
 
     try {
       await this.embassyApi.systemRebuild({})
-      this.presentAlertInProgress(action, ` until ${action} completes.`)
     } catch (e: any) {
       this.errToast.present(e)
     } finally {
@@ -437,21 +431,6 @@ export class ServerShowPage {
     alert.present()
   }
 
-  private async presentAlertInProgress(verb: string, message: string) {
-    const alert = await this.alertCtrl.create({
-      header: `${verb} In Progress...`,
-      message: `Stopping all services gracefully. This can take a while.<br /><br />If you have a speaker, your server will <b>♫ play a melody ♫</b> before shutting down. Your server will then become unreachable${message}`,
-      buttons: [
-        {
-          text: 'OK',
-          role: 'cancel',
-          cssClass: 'enter-click',
-        },
-      ],
-    })
-    alert.present()
-  }
-
   settings: ServerSettings = {
     Backups: [
       {

frontend/projects/ui/src/app/services/api/api.fixures.ts

@@ -17,6 +17,8 @@ export module Mock {
     'backup-progress': null,
     'update-progress': null,
     updated: true,
+    restarting: false,
+    'shutting-down': false,
   }
   export const MarketplaceEos: RR.GetMarketplaceEosRes = {
     version: '0.3.5',

frontend/projects/ui/src/app/services/api/embassy-mock-api.service.ts

@@ -302,6 +302,27 @@ export class MockApiService extends ApiService {
     params: RR.RestartServerReq,
   ): Promise<RR.RestartServerRes> {
     await pauseFor(2000)
+
+    const patch = [
+      {
+        op: PatchOp.REPLACE,
+        path: '/server-info/status-info/restarting',
+        value: true,
+      },
+    ]
+    this.mockRevision(patch)
+
+    setTimeout(() => {
+      const patch2 = [
+        {
+          op: PatchOp.REPLACE,
+          path: '/server-info/status-info/restarting',
+          value: false,
+        },
+      ]
+      this.mockRevision(patch2)
+    }, 2000)
+
     return null
   }
 
@@ -309,14 +330,34 @@ export class MockApiService extends ApiService {
     params: RR.ShutdownServerReq,
   ): Promise<RR.ShutdownServerRes> {
     await pauseFor(2000)
+
+    const patch = [
+      {
+        op: PatchOp.REPLACE,
+        path: '/server-info/status-info/shutting-down',
+        value: true,
+      },
+    ]
+    this.mockRevision(patch)
+
+    setTimeout(() => {
+      const patch2 = [
+        {
+          op: PatchOp.REPLACE,
+          path: '/server-info/status-info/shutting-down',
+          value: false,
+        },
+      ]
+      this.mockRevision(patch2)
+    }, 2000)
+
     return null
   }
 
   async systemRebuild(
-    params: RR.RestartServerReq,
-  ): Promise<RR.RestartServerRes> {
-    await pauseFor(2000)
-    return null
+    params: RR.SystemRebuildReq,
+  ): Promise<RR.SystemRebuildRes> {
+    return this.restartServer(params)
   }
 
   async repairDisk(params: RR.RestartServerReq): Promise<RR.RestartServerRes> {

frontend/projects/ui/src/app/services/api/mock-patch.ts

@@ -66,6 +66,8 @@ export const mockPatchData: DataModel = {
       'backup-progress': null,
       updated: false,
       'update-progress': null,
+      restarting: false,
+      'shutting-down': false,
     },
     hostname: 'random-words',
     pubkey: 'npub1sg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q0uf63m',

frontend/projects/ui/src/app/services/patch-db/data-model.ts

@@ -96,6 +96,8 @@ export interface ServerStatusInfo {
   }
   updated: boolean
   'update-progress': { size: number | null; downloaded: number } | null
+  restarting: boolean
+  'shutting-down': boolean
 }
 
 export enum ServerStatus {