feat(client): Implement the mechanism for updating the guest server

Author: TibixDev

build-guest-server.sh

@@ -15,6 +15,10 @@ export LDFLAGS=(
   "-X 'main.BuildTimestamp=${BUILD_TIMESTAMP}'"
 )
 
+echo "Version: ${VERSION}"
+echo "Commit Hash: ${COMMIT_HASH}"
+echo "Build Timestamp: ${BUILD_TIMESTAMP}"
+
 cd guest_server
 go build -ldflags="${LDFLAGS[*]}" -o winboat_guest_server.exe main.go
 rm -f winboat_guest_server.zip

bun.lock

@@ -1,6 +1,6 @@
 {
     "name": "winboat",
-    "version": "0.6.0",
+    "version": "0.6.1",
     "description": "Windows for Penguins",
     "main": "main/main.js",
     "scripts": {
@@ -36,6 +36,7 @@
         "@vueuse/core": "^13.1.0",
         "@vueuse/motion": "^2.2.6",
         "apexcharts": "^4.5.0",
+        "form-data": "^4.0.4",
         "json-to-pretty-yaml": "^1.2.2",
         "marked": "^15.0.6",
         "nanoevents": "^9.1.0",

package.json

@@ -1,18 +1,36 @@
 <template>
-    <main class="h-screen w-screen overflow-hidden relative">
+    <main class="overflow-hidden relative w-screen h-screen">
         <!-- Decoration -->
         <div class="gradient-ball absolute -z-10 left-0 bottom-0 translate-x-[-50%] translate-y-[50%] w-[90vw] aspect-square opacity-15 blob-anim"></div>
         <div class="gradient-ball absolute -z-10 right-0 top-0 translate-x-[50%] translate-y-[-50%] w-[90vw] aspect-square opacity-15 blob-anim"></div>
 
         <!-- Titlebar -->
-        <x-titlebar @minimize="handleMinimize()" @buttonclick="handleTitleBarEvent" class="bg-neutral-900/50 backdrop-blur-xl">
+        <x-titlebar @minimize="handleMinimize()" @buttonclick="handleTitleBarEvent" class="backdrop-blur-xl bg-neutral-900/50">
             <x-label>WinBoat</x-label>
         </x-titlebar>
 
+        <!-- Updater -->
+        <dialog ref="updateDialog">
+            <Icon class="text-indigo-400 size-12" icon="mdi:cloud-upload"></Icon>
+            <h3 class="mt-2" v-if="winboat?.isUpdatingGuestServer.value">Updating Guest Server</h3>
+            <h3 class="mt-2" v-else>Guest Server update successful!</h3>
+            <p v-if="winboat?.isUpdatingGuestServer.value" class="max-w-[40vw]">
+                The guest is currently running an outdated version of the WinBoat Guest Server. Please wait while we update it to the current version.
+            </p>
+            <p v-else class="max-w-[40vw]">
+                The WinBoat Guest Server has been updated successfully! You can now close this dialog and continue using the application.
+            </p>
+            <footer>
+                <x-progressbar v-if="winboat?.isUpdatingGuestServer.value" class="my-4"></x-progressbar>
+                <x-button v-else id="close-button" @click="updateDialog!.close()" toggled>
+                    <x-label>Close</x-label>
+                </x-button>
+            </footer>
+        </dialog>
 
         <!-- UI / SetupUI -->
         <div v-if="useRoute().name !== 'SetupUI'" class="flex flex-row h-[calc(100vh-2rem)]">
-            <x-nav class="w-72 flex flex-none flex-col gap-0.5 bg-gray-500/10 backdrop-contrast-90 backdrop-blur-xl">
+            <x-nav class="flex flex-col flex-none gap-0.5 w-72 backdrop-blur-xl bg-gray-500/10 backdrop-contrast-90">
                 <div
                     v-if="winboat?.rdpConnected.value"
                     class="w-full bg-gradient-to-r from-indigo-500 via-indigo-400 to-blue-500 text-white
@@ -23,8 +41,8 @@
                         RDP Session Active
                     </span>
                 </div>
-                <div class="p-4 flex flex-row items-center gap-4">
-                    <img class="rounded-full w-16"
+                <div class="flex flex-row gap-4 items-center p-4">
+                    <img class="w-16 rounded-full"
                         src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Windows_10_Default_Profile_Picture.svg/2048px-Windows_10_Default_Profile_Picture.svg.png"
                         alt="Profile Picture">
                     <div>
@@ -34,23 +52,23 @@
                 </div>
                 <RouterLink v-for="route of routes.filter(r => !['SetupUI', 'Loading'].includes(r.name))" :to="route.path" :key="route.path">
                     <x-navitem value="first">
-                        <Icon class="w-5 h-5 mr-4" :icon="(route.meta!.icon as string)"></Icon>
+                        <Icon class="mr-4 w-5 h-5" :icon="(route.meta!.icon as string)"></Icon>
                         <x-label>{{ route.name }}</x-label>
                     </x-navitem>
                 </RouterLink>
-                <div class="flex flex-col items-center justify-end h-full p-4">
+                <div class="flex flex-col justify-end items-center p-4 h-full">
                     <p class="text-xs text-neutral-500">WinBoat Pre-Release Alpha {{ appVer }}</p>
                 </div>
             </x-nav>
             <div class="px-5 flex-grow max-h-[calc(100vh-2rem)] overflow-y-auto py-4">
-                <div class="flex flex-row items-center gap-2 my-6">
+                <div class="flex flex-row gap-2 items-center my-6">
                     <Icon class="w-6 h-6 opacity-60" icon="icon-park-solid:toolkit"></Icon>
-                    <h1 class="text-2xl font-semibold opacity-60 my-0">
+                    <h1 class="my-0 text-2xl font-semibold opacity-60">
                         WinBoat
                     </h1>
                     <Icon class="w-6 h-6" icon="bitcoin-icons:caret-right-filled"></Icon>
                     <Icon class="w-6 h-6" :icon="(useRoute().meta.icon as string)"></Icon>
-                    <h1 class="text-2xl font-semibold my-0">
+                    <h1 class="my-0 text-2xl font-semibold">
                         {{ useRoute().name }}
                     </h1>
                 </div>
@@ -72,7 +90,7 @@
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { routes } from './router';
 import { Icon } from '@iconify/vue';
-import { onMounted } from 'vue';
+import { onMounted, useTemplateRef, watch } from 'vue';
 import { isInstalled } from './lib/install';
 import { Winboat } from './lib/winboat';
 const { BrowserWindow }: typeof import('@electron/remote') = require('@electron/remote')
@@ -81,6 +99,7 @@ const path: typeof import('path') = require('path')
 const remote: typeof import('@electron/remote') = require('@electron/remote');
 
 const $router = useRouter();
+const updateDialog = useTemplateRef('updateDialog');
 const appVer = import.meta.env.VITE_APP_VERSION;
 let winboat: Winboat | null = null;
 
@@ -94,6 +113,13 @@ onMounted(async () => {
         winboat = new Winboat();
         $router.push('/home');
     }
+
+    // Watch for guest server updates and show dialog
+    watch(() => winboat?.isUpdatingGuestServer.value, (newVal) => {
+        if (newVal) {
+            updateDialog.value!.showModal();
+        } 
+    })
 })
 
 function handleMinimize() {
@@ -122,6 +148,11 @@ function handleTitleBarEvent(e: CustomEvent) {
 </script>
 
 <style>
+dialog::backdrop {
+    pointer-events: none;
+    backdrop-filter: blur(8px);
+}
+
 .gradient-ball {
     border-radius: 99999px;
     background: linear-gradient(197.37deg, #7450DB -0.38%, rgba(138, 234, 240, 0) 101.89%), linear-gradient(115.93deg, #3E88F6 4.86%, rgba(62, 180, 246, 0.33) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.7) 0%, rgba(62, 158, 246, 0.182) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, #2EE4E3 19.83%, rgba(46, 228, 227, 0) 97.33%);

src/renderer/App.vue

@@ -1,6 +1,6 @@
 import { ref, type Ref } from "vue";
 import { WINBOAT_DIR, WINBOAT_GUEST_API } from "./constants";
-import type { ComposeConfig, Metrics, WinApp } from "../../types";
+import type { ComposeConfig, GuestServerUpdateResponse, GuestServerVersion, Metrics, WinApp } from "../../types";
 import { createLogger } from "../utils/log";
 import { AppIcons } from "../data/appicons";
 import YAML from 'yaml';
@@ -13,6 +13,8 @@ const path: typeof import('path') = require('path');
 const fs: typeof import('fs') = require('fs');
 const { promisify }: typeof import('util') = require('util');
 const { exec }: typeof import('child_process') = require('child_process');
+const remote: typeof import('@electron/remote') = require('@electron/remote');
+const FormData: typeof import('form-data') = require('form-data');
 
 const execAsync = promisify(exec);
 
@@ -117,6 +119,7 @@ class AppManager {
 export class Winboat {
     #healthInterval: NodeJS.Timeout | null = null;
     isOnline: Ref<boolean> = ref(false);
+    isUpdatingGuestServer: Ref<boolean> = ref(false);
     #containerInterval: NodeJS.Timeout | null = null;
     containerStatus: Ref<ContainerStatusValue> = ref(ContainerStatus.Exited)
     containerActionLoading: Ref<boolean> = ref(false)
@@ -189,6 +192,10 @@ export class Winboat {
             if (_isOnline !== this.isOnline.value) {
                 this.isOnline.value = _isOnline;
                 logger.info(`Winboat Guest API went ${this.isOnline ? 'online' : 'offline'}`);
+
+                if (this.isOnline.value) {
+                    await this.checkVersionAndUpdateGuestServer();
+                }
             }
         }, HEALTH_WAIT_MS);
 
@@ -464,4 +471,64 @@ export class Winboat {
 
         await execAsync(cmd);
     }
+
+    async checkVersionAndUpdateGuestServer() {
+        // 1. Get the version of the guest server and compare it to the current version
+        const versionRes = await nodeFetch(`${WINBOAT_GUEST_API}/version`);
+        const version = await versionRes.json() as GuestServerVersion;
+
+        const appVersion = import.meta.env.VITE_APP_VERSION;
+
+        if (version.version !== appVersion) {
+            logger.info(`New local version of WinBoat Guest Server found: ${appVersion}`);
+            logger.info(`Current version of WinBoat Guest Server: ${version.version}`);
+        }
+
+        // 2. Return early if the version is the same
+        if (version.version === appVersion) {
+            return;
+        }
+
+        // 3. Set update flag & grab winboat_guest_server.zip from Electron assets
+        this.isUpdatingGuestServer.value = true;
+        const zipPath = remote.app.isPackaged
+            ? path.join(remote.app.getAppPath(), 'guest_server', 'winboat_guest_server.zip')
+            : path.join(remote.app.getAppPath(), '..', '..', 'guest_server', 'winboat_guest_server.zip');
+
+        // 4. Send the payload to the guest server, as a multipart/form-data with updateFile
+        const formData = new FormData();
+        formData.append('updateFile', fs.createReadStream(zipPath));
+
+        try {
+            const res = await nodeFetch(`${WINBOAT_GUEST_API}/update`, {
+                method: 'POST',
+                body: formData as any
+            });
+            if (res.status !== 200) {
+                const resBody = await res.text();
+                throw new Error(resBody);
+            }
+            const resJson = await res.json() as GuestServerUpdateResponse;
+            logger.info(`Update params: ${JSON.stringify(resJson, null, 4)}`);
+            logger.info("Successfully sent update payload to guest server");
+            
+        } catch(e) {
+            logger.error("Failed to send update payload to guest server");
+            logger.error(e);
+            this.isUpdatingGuestServer.value = false;
+            throw e;
+        }
+
+        // 5. Wait about ~3 seconds, then start scanning for health
+        await new Promise(resolve => setTimeout(resolve, 3000));
+        let _isOnline = await this.getHealth();
+        while (!_isOnline) {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            _isOnline = await this.getHealth();
+        }
+        logger.info("Update completed, Winboat Guest Server is online");
+
+        // Done!
+        this.isUpdatingGuestServer.value = false;
+    }
 }

src/renderer/lib/winboat.ts

@@ -77,4 +77,16 @@ export type Metrics = {
         total: number, // Disk Total in MB (e.g. 102400)
         percentage: number // Disk Usage in percentage (e.g. 70%)
     }
+}
+
+export type GuestServerVersion = {
+    version: string;
+    commit_hash: string;
+    build_time: string;
+}
+
+export type GuestServerUpdateResponse = {
+    filename: string;
+    status: string;
+    temp_path: string;
 }