Feature/server status restarting (#2503)

* extend `server-info` * add restarting, shutting down to FE status bar * fix build --------- Co-authored-by: Aiden McClelland <[email protected]>
Start9Labs · Nov 8, 2023 · 871f78b · 871f78b
1 parent 753fbc0
commit 871f78b
Show file tree

Hide file tree

Showing 11 changed files with 117 additions and 37 deletions.
diff --git a/backend/src/db/model.rs b/backend/src/db/model.rs
@@ -57,6 +57,8 @@ impl Database {
                     backup_progress: None,
                     updated: false,
                     update_progress: None,
+                    shutting_down: false,
+                    restarting: false,
                 },
                 wifi: WifiInfo {
                     ssids: Vec::new(),
@@ -166,6 +168,10 @@ pub struct ServerStatus {
     pub backup_progress: Option<BTreeMap<PackageId, BackupProgress>>,
     pub updated: bool,
     pub update_progress: Option<UpdateProgress>,
+    #[serde(default)]
+    pub shutting_down: bool,
+    #[serde(default)]
+    pub restarting: bool,
 }
 
 #[derive(Debug, Deserialize, Serialize, HasModel)]

diff --git a/backend/src/init.rs b/backend/src/init.rs
@@ -406,6 +406,8 @@ pub async fn init(cfg: &RpcContextConfig) -> Result<InitResult, Error> {
         updated: false,
         update_progress: None,
         backup_progress: None,
+        shutting_down: false,
+        restarting: false,
     };
 
     server_info.ntp_synced = if time_not_synced {

diff --git a/backend/src/shutdown.rs b/backend/src/shutdown.rs
@@ -6,10 +6,11 @@ use rpc_toolkit::command;
 use crate::context::RpcContext;
 use crate::disk::main::export;
 use crate::init::{STANDBY_MODE_PATH, SYSTEM_REBUILD_PATH};
+use crate::prelude::*;
 use crate::sound::SHUTDOWN;
 use crate::util::docker::CONTAINER_TOOL;
 use crate::util::{display_none, Invoke};
-use crate::{Error, PLATFORM};
+use crate::PLATFORM;
 
 #[derive(Debug, Clone)]
 pub struct Shutdown {
@@ -90,6 +91,14 @@ impl Shutdown {
 
 #[command(display(display_none))]
 pub async fn shutdown(#[context] ctx: RpcContext) -> Result<(), Error> {
+    ctx.db
+        .mutate(|db| {
+            db.as_server_info_mut()
+                .as_status_info_mut()
+                .as_shutting_down_mut()
+                .ser(&true)
+        })
+        .await?;
     ctx.shutdown
         .send(Some(Shutdown {
             export_args: Some((ctx.disk_guid.clone(), ctx.datadir.clone())),
@@ -102,6 +111,14 @@ pub async fn shutdown(#[context] ctx: RpcContext) -> Result<(), Error> {
 
 #[command(display(display_none))]
 pub async fn restart(#[context] ctx: RpcContext) -> Result<(), Error> {
+    ctx.db
+        .mutate(|db| {
+            db.as_server_info_mut()
+                .as_status_info_mut()
+                .as_restarting_mut()
+                .ser(&true)
+        })
+        .await?;
     ctx.shutdown
         .send(Some(Shutdown {
             export_args: Some((ctx.disk_guid.clone(), ctx.datadir.clone())),

diff --git a/frontend/projects/ui/src/app/app.component.html b/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"

diff --git a/frontend/projects/ui/src/app/app.component.ts b/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,

diff --git a/frontend/projects/ui/src/app/components/connection-bar/connection-bar.component.ts b/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>,
+  ) {}
 }
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts b/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: [
       {

diff --git a/frontend/projects/ui/src/app/services/api/api.fixures.ts b/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',

diff --git a/frontend/projects/ui/src/app/services/api/embassy-mock-api.service.ts b/frontend/projects/ui/src/app/services/api/embassy-mock-api.service.ts
@@ -302,21 +302,62 @@ 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
   }
 
   async shutdownServer(
     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> {

diff --git a/frontend/projects/ui/src/app/services/api/mock-patch.ts b/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',

diff --git a/frontend/projects/ui/src/app/services/patch-db/data-model.ts b/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 {