fix: handle versioned cloud URLs in reboot flow (#1048)

adamshiervani · web-flow · commit 32dd326df023 · 2025-12-10T10:41:05.000+01:00
diff --git a/ui/src/components/KvmCard.tsx b/ui/src/components/KvmCard.tsx
@@ -2,13 +2,12 @@ import { Link } from "react-router";
 import { MdConnectWithoutContact } from "react-icons/md";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { LuEllipsisVertical } from "react-icons/lu";
-import semver from "semver";
 import { useMemo } from "react";
 
 import Card from "@components/Card";
 import { Button, LinkButton } from "@components/Button";
 import { m } from "@localizations/messages.js";
-import { CLOUD_BACKWARDS_COMPATIBLE_VERSION, CLOUD_ENABLE_VERSIONED_UI } from "@/ui.config";
+import { buildCloudUrl } from "@/utils";
 
 function getRelativeTimeString(date: Date | number, lang = navigator.language): string {
   // Allow dates or times to be passed
@@ -56,28 +55,7 @@ export default function KvmCard({
   lastSeen: Date | null;
   appVersion?: string;
 }) {
-  /**
-   * Constructs the URL for connecting to this KVM device's interface.
-   *
-   * CLOUD_BACKWARDS_COMPATIBLE_VERSION is the last backwards-compatible UI that works with older devices.
-   * Devices on CLOUD_BACKWARDS_COMPATIBLE_VERSION or below are served that version, while newer devices get
-   * their actual version. Unparseable versions fall back to CLOUD_BACKWARDS_COMPATIBLE_VERSION for safety.
-   */
-  const kvmUrl = useMemo(() => {
-    let uri = `/devices/${id}`;
-
-    // Only use versioned path if versioned UI is enabled
-    if (CLOUD_ENABLE_VERSIONED_UI) {
-      // Use device version if valid and >= 0.5.0, otherwise fall back to backwards-compatible version
-      let version = CLOUD_BACKWARDS_COMPATIBLE_VERSION;
-      if (appVersion && semver.valid(appVersion) && semver.gte(appVersion, CLOUD_BACKWARDS_COMPATIBLE_VERSION)) {
-        version = appVersion;
-      }
-      uri = `/v/${version}${uri}`;
-    }
-
-    return new URL(uri, window.location.origin).toString();
-  }, [appVersion, id]);
+  const kvmUrl = useMemo(() => buildCloudUrl(id, appVersion), [id, appVersion]);
 
 
   return (
diff --git a/ui/src/components/VideoOverlay.tsx b/ui/src/components/VideoOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, useCallback } from "react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/16/solid";
 import { motion, AnimatePresence } from "framer-motion";
@@ -13,7 +13,8 @@ import { useRTCStore, PostRebootAction } from "@/hooks/stores";
 import LogoBlue from "@/assets/logo-blue.svg";
 import LogoWhite from "@/assets/logo-white.svg";
 import { isOnDevice } from "@/main";
-import { sleep } from "@/utils";
+import { sleep, buildCloudUrl } from "@/utils";
+import { getLocalVersion } from "@/utils/jsonrpc";
 
 
 interface OverlayContentProps {
@@ -398,124 +399,133 @@ export function PointerLockBar({ show }: PointerLockBarProps) {
 interface RebootingOverlayProps {
   readonly show: boolean;
   readonly postRebootAction: PostRebootAction;
+  readonly deviceId?: string; // Required for cloud mode to build versioned URLs
 }
 
-export function RebootingOverlay({ show, postRebootAction }: RebootingOverlayProps) {
+export function RebootingOverlay({ show, postRebootAction, deviceId }: RebootingOverlayProps) {
   const { peerConnectionState } = useRTCStore();
-
-  // Check if we've already seen the connection drop (confirms reboot actually started)
   const [hasSeenDisconnect, setHasSeenDisconnect] = useState(
-    ['disconnected', 'closed', 'failed'].includes(peerConnectionState ?? '')
+    ["disconnected", "closed", "failed"].includes(peerConnectionState ?? ""),
   );
-
-  // Track if we've timed out
   const [hasTimedOut, setHasTimedOut] = useState(false);
+  const isCheckingRef = useRef(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
-  // Monitor for disconnect after reboot is initiated
+  // Detect connection drop (confirms reboot started)
   useEffect(() => {
-    if (!show) return;
-    if (hasSeenDisconnect) return;
-
-    if (['disconnected', 'closed', 'failed'].includes(peerConnectionState ?? '')) {
-      console.log('hasSeenDisconnect', hasSeenDisconnect);
+    if (!show || hasSeenDisconnect) return;
+    if (["disconnected", "closed", "failed"].includes(peerConnectionState ?? "")) {
       setHasSeenDisconnect(true);
     }
   }, [show, peerConnectionState, hasSeenDisconnect]);
 
-  // Set timeout after 30 seconds
+  // Timeout after 30 seconds
   useEffect(() => {
     if (!show) {
       setHasTimedOut(false);
       return;
     }
-
-    const timeoutId = setTimeout(() => {
-      setHasTimedOut(true);
-    }, 30 * 1000);
-
-    return () => {
-      clearTimeout(timeoutId);
-    };
+    const id = setTimeout(() => setHasTimedOut(true), 30_000);
+    return () => clearTimeout(id);
   }, [show]);
 
+  // Redirect helper - navigates and forces reload
+  const redirectTo = useCallback(async (url: string) => {
+    console.log("Redirecting to", url);
+    window.location.href = url;
+    await sleep(1000);
+    window.location.reload();
+  }, []);
 
-  // Poll suggested IP in device mode to detect when it's available
-  const abortControllerRef = useRef<AbortController | null>(null);
-  const isFetchingRef = useRef(false);
-
+  // Local mode: poll HTTP health endpoint
   useEffect(() => {
-    // Only run in device mode with a postRebootAction
-    if (!isOnDevice || !postRebootAction || !show || !hasSeenDisconnect) {
-      return;
-    }
+    if (!isOnDevice || !postRebootAction || !show || !hasSeenDisconnect) return;
 
-    const checkPostRebootHealth = async () => {
-      // Don't start a new fetch if one is already in progress
-      if (isFetchingRef.current) {
-        return;
-      }
-
-      // Cancel any pending fetch
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
+    const checkHealth = async () => {
+      if (isCheckingRef.current) return;
 
-      // Create new abort controller for this fetch
-      const abortController = new AbortController();
-      abortControllerRef.current = abortController;
-      isFetchingRef.current = true;
+      abortControllerRef.current?.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      isCheckingRef.current = true;
 
-      console.log('Checking post-reboot health endpoint:', postRebootAction.healthCheck);
-      const timeoutId = window.setTimeout(() => abortController.abort(), 2000);
+      const timeout = setTimeout(() => controller.abort(), 2000);
       try {
-        const response = await fetch(
-          postRebootAction.healthCheck,
-          { signal: abortController.signal, }
-        );
-
-        if (response.ok) {
-          // Device is available, redirect to the specified URL
-          console.log('Device is available, redirecting to:', postRebootAction.redirectTo);
-
-          // URL constructor handles all cases elegantly:
-          // - Absolute paths: resolved against current origin
-          // - Protocol-relative URLs: resolved with current protocol
-          // - Fully qualified URLs: used as-is
-          const targetUrl = new URL(postRebootAction.redirectTo, window.location.origin);
-          clearInterval(intervalId); // Stop polling before redirect
-
-          window.location.href = targetUrl.href;
-          // Add 1s delay between setting location.href and calling reload() to prevent reload from interrupting the navigation.
-          await sleep(1000);
-          window.location.reload();
+        // URL constructor handles relative paths, protocol-relative URLs, and absolute URLs
+        // Relative path → resolves against origin
+        // new URL("/device/status", "http://192.168.1.77").href
+        // // → "http://192.168.1.77/device/status"
+
+        // // Protocol-relative URL → uses protocol from base, host from URL
+        // new URL("//192.168.1.100/device/status", "http://192.168.1.77").href
+        // // → "http://192.168.1.100/device/status"
+
+        // // Fully qualified URL → base is ignored entirely
+        // new URL("http://192.168.1.100/device/status", "http://192.168.1.77").href
+        // // → "http://192.168.1.100/device/status"
+        const healthUrl = new URL(postRebootAction.healthCheck, window.location.origin).href;
+        const res = await fetch(healthUrl, { signal: controller.signal });
+        if (res.ok) {
+          clearInterval(intervalId);
+          const targetUrl = new URL(postRebootAction.redirectTo, window.location.origin).href;
+          await redirectTo(targetUrl);
         }
       } catch (err) {
-        // Ignore errors - they're expected while device is rebooting
-        // Only log if it's not an abort error
-        if (err instanceof Error && err.name !== 'AbortError') {
-          console.debug('Error checking post-reboot health:', err);
+        if (err instanceof Error && err.name !== "AbortError") {
+          console.debug("Health check failed:", err.message);
         }
       } finally {
-        clearTimeout(timeoutId);
-        isFetchingRef.current = false;
+        clearTimeout(timeout);
+        isCheckingRef.current = false;
       }
     };
 
-    // Start interval (check every 2 seconds)
-    const intervalId = setInterval(checkPostRebootHealth, 2000);
-
-    // Also check immediately
-    checkPostRebootHealth();
+    const intervalId = setInterval(checkHealth, 2000);
+    checkHealth();
 
-    // Cleanup on unmount or when dependencies change
     return () => {
       clearInterval(intervalId);
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
+      abortControllerRef.current?.abort();
+      isCheckingRef.current = false;
+    };
+  }, [show, postRebootAction, hasSeenDisconnect, redirectTo]);
+
+  // Cloud mode: wait for WebRTC reconnection via RPC, then redirect with versioned URL
+  useEffect(() => {
+    if (isOnDevice) return;
+    if (!postRebootAction || !deviceId || !show || !hasSeenDisconnect) return;
+
+    let cancelled = false;
+
+    const waitForReconnectAndRedirect = async () => {
+      if (isCheckingRef.current) return;
+      isCheckingRef.current = true;
+
+      try {
+        const { appVersion } = await getLocalVersion({
+          attemptTimeoutMs: 2000,
+        });
+
+        if (cancelled) return;
+
+        clearInterval(intervalId);
+        const targetUrl = buildCloudUrl(deviceId, appVersion, postRebootAction.redirectTo);
+        await redirectTo(targetUrl);
+      } catch (err) {
+        console.debug("Cloud reconnect check failed:", err);
+        isCheckingRef.current = false;
       }
-      isFetchingRef.current = false;
     };
-  }, [show, postRebootAction, hasTimedOut, hasSeenDisconnect]);
+
+    const intervalId = setInterval(waitForReconnectAndRedirect, 3000);
+    waitForReconnectAndRedirect();
+
+    return () => {
+      cancelled = true;
+      clearInterval(intervalId);
+      isCheckingRef.current = false;
+    };
+  }, [show, postRebootAction, deviceId, hasSeenDisconnect, redirectTo]);
 
   return (
     <AnimatePresence>
diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
@@ -718,15 +718,13 @@ export default function KvmIdRoute() {
     }
 
     if (resp.method === "willReboot") {
-      const postRebootAction = resp.params as unknown as PostRebootAction;
-      console.debug("Setting reboot state", postRebootAction);
-
+      const action = resp.params as PostRebootAction | undefined;
       setRebootState({
         isRebooting: true,
         postRebootAction: {
-          healthCheck: postRebootAction?.healthCheck || `${window.location.origin}/device/status`,
-          redirectTo: postRebootAction?.redirectTo || window.location.href,
-        }
+          healthCheck: action?.healthCheck || "/device/status",
+          redirectTo: action?.redirectTo || "/",
+        },
       });
       navigateTo("/");
     }
@@ -842,7 +840,7 @@ export default function KvmIdRoute() {
 
     // Rebooting takes priority over connection status
     if (rebootState?.isRebooting) {
-      return <RebootingOverlay show={true} postRebootAction={rebootState.postRebootAction} />;
+      return <RebootingOverlay show={true} postRebootAction={rebootState.postRebootAction} deviceId={params.id} />;
     }
 
     if (isFailsafeMode && failsafeReason) {
@@ -873,7 +871,7 @@ export default function KvmIdRoute() {
     }
 
     return null;
-  }, [location.pathname, rebootState?.isRebooting, rebootState?.postRebootAction, isFailsafeMode, failsafeReason, connectionFailed, peerConnectionState, peerConnection, setupPeerConnection, loadingMessage]);
+  }, [location.pathname, rebootState?.isRebooting, rebootState?.postRebootAction, params.id, isFailsafeMode, failsafeReason, connectionFailed, peerConnectionState, peerConnection, setupPeerConnection, loadingMessage]);
 
   return (
     <FeatureFlagProvider appVersion={appVersion}>
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
@@ -1,6 +1,9 @@
+import semver from "semver";
+
 import { KeySequence } from "@hooks/stores";
 import { getLocale, locales } from "@localizations/runtime.js";
 import { m } from "@localizations/messages.js";
+import { CLOUD_BACKWARDS_COMPATIBLE_VERSION, CLOUD_ENABLE_VERSIONED_UI } from "@/ui.config";
 
 const isInvalidDate = (date: Date) => date instanceof Date && isNaN(date.getTime());
 
@@ -303,3 +306,20 @@ export function deleteCookie(name: string, domain?: string, path = "/") {
 export function sleep(ms: number): Promise<void> {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+/**
+ * Builds a versioned cloud URL for a device.
+ * Uses the device's app version to construct /v/{version}/devices/{id}{path}
+ * Falls back to CLOUD_BACKWARDS_COMPATIBLE_VERSION for older or invalid versions.
+ */
+export function buildCloudUrl(deviceId: string, appVersion: string | undefined, path = ""): string {
+  let uri = `/devices/${deviceId}${path}`;
+  if (CLOUD_ENABLE_VERSIONED_UI) {
+    const version =
+      appVersion && semver.valid(appVersion) && semver.gte(appVersion, CLOUD_BACKWARDS_COMPATIBLE_VERSION)
+        ? appVersion
+        : CLOUD_BACKWARDS_COMPATIBLE_VERSION;
+    uri = `/v/${version}${uri}`;
+  }
+  return new URL(uri, window.location.origin).href;
+}
diff --git a/ui/src/utils/jsonrpc.ts b/ui/src/utils/jsonrpc.ts
@@ -242,8 +242,13 @@ export async function getUpdateStatus() {
   return response.result;
 }
 
-export async function getLocalVersion() {
-  const response = await callJsonRpc<VersionInfo>({ method: "getLocalVersion" });
+export async function getLocalVersion(
+  options?: Partial<JsonRpcCallOptions>,
+): Promise<VersionInfo> {
+  const response = await callJsonRpc<VersionInfo>({
+    method: "getLocalVersion",
+    ...options,
+  });
   if (response.error) throw response.error;
   return response.result;
 }
@@ -255,7 +260,10 @@ export interface updateParams {
   components?: UpdateComponents;
 }
 
-export async function checkUpdateComponents(params: updateParams, includePreRelease: boolean) {
+export async function checkUpdateComponents(
+  params: updateParams,
+  includePreRelease: boolean,
+) {
   const response = await callJsonRpc<SystemVersionInfo>({
     method: "checkUpdateComponents",
     params: {
@@ -270,4 +278,4 @@ export async function checkUpdateComponents(params: updateParams, includePreRele
   });
   if (response.error) throw response.error;
   return response.result;
-}
+}
