Merge pull request #391 from pollen-robotics/fix-and-improve-update-settings

Fix and improve update settings

Author: pierre-rouanet

src/reachy_mini/daemon/app/dashboard/static/js/update.js

@@ -2,14 +2,16 @@ const updateManager = {
     busy: false,
     preRelease: false,
 
-    isUpdateAvailable: async () => {
+    checkForUpdate: async () => {
+        await updateManager.updateUI();  // Clear previous state
+
         await fetch('/update/available?pre_release=' + updateManager.preRelease)
             .then(async response => {
                 if (!response.ok) {
                     return false;
                 }
                 const data = await response.json();
-                return data.update.reachy_mini;
+                await updateManager.updateUI(data);
             }).catch(error => {
                 console.error('Error checking for updates:', error);
             });
@@ -44,66 +46,87 @@ const updateManager = {
 
     connectLogsWebSocket: (jobId) => {
         const updateModal = document.getElementById('update-modal');
-        const updateModalTitle = updateModal.queryElementById('update-modal-title');
+        const updateModalTitle = document.getElementById('update-modal-title');
         const logsDiv = document.getElementById('update-logs');
         const closeButton = document.getElementById('update-modal-close-button');
 
         updateModalTitle.textContent = 'Updating...';
 
         closeButton.onclick = () => {
-            installModal.classList.add('hidden');
+            updateModal.classList.add('hidden');
         };
-        closeButton.classList = "hidden";
-        closeButton.textContent = '';
 
-        updateModal.classList.removeAttribute('hidden');
+        updateModal.classList.remove('hidden');
 
-        const ws = new WebSocket(`ws://${location.host}/api/update/ws/logs?job_id=${jobId}`);
+        const ws = new WebSocket(`ws://${location.host}/update/ws/logs?job_id=${jobId}`);
 
         ws.onmessage = (event) => {
+            // console.log('Update log:', event);
+            logsDiv.innerHTML += event.data + '<br>';
+            logsDiv.scrollTop = logsDiv.scrollHeight;
         };
         ws.onclose = async () => {
+            console.log('Update logs WebSocket closed');
+            closeButton.classList.remove('hidden');
+            closeButton.textContent = 'Close';
+            updateModalTitle.textContent = 'Update Completed ✅';
+
             updateManager.busy = false;
-            updateManager.updateUI();
+            await updateManager.checkForUpdate();
         };
     },
 
-    updateUI: async () => {
-        const isUpdateAvailable = await updateManager.isUpdateAvailable();
-
-        updateManager.updateMainPage(isUpdateAvailable);
-        updateManager.updateUpdatePage(isUpdateAvailable);
+    updateUI: async (update) => {
+        // updateManager.updateMainPage(isUpdateAvailable);
+        updateManager.updateUpdatePage(update);
     },
 
-    updateMainPage: async (isUpdateAvailable) => {
-        const daemonUpdateBtn = document.getElementById('daemon-update-btn');
-        if (!daemonUpdateBtn) return;
-
-        if (isUpdateAvailable) {
-            daemonUpdateBtn.innerHTML = 'Update <span class="rounded-full bg-blue-700 text-white text-xs font-semibold px-2 py-1 ml-2">1</span>';
-        } else {
-            daemonUpdateBtn.innerHTML = 'Update';
-        }
-    },
-    updateUpdatePage: async (isUpdateAvailable) => {
+    // updateMainPage: async (update) => {
+    //     const daemonUpdateBtn = document.getElementById('daemon-update-btn');
+    //     if (!daemonUpdateBtn) return;
+
+    //     if (isUpdateAvailable) {
+    //         daemonUpdateBtn.innerHTML = 'Update <span class="rounded-full bg-blue-700 text-white text-xs font-semibold px-2 py-1 ml-2">1</span>';
+    //     } else {
+    //         daemonUpdateBtn.innerHTML = 'Update';
+    //     }
+    // },
+    updateUpdatePage: async (data) => {
         const statusElem = document.getElementById('update-status');
         if (!statusElem) return;
 
-        const checkAgainBtn = document.getElementById('check-again-btn');
+        const currentVersionElem = document.getElementById('current-version');
+        const availableVersionElem = document.getElementById('available-version');
+        const availableVersionContainer = document.getElementById('available-version-container');
         const startUpdateBtn = document.getElementById('start-update-btn');
 
+        if (!data || !data.update || !data.update.reachy_mini) {
+            statusElem.innerHTML = 'Checking for updates...';
+            if (currentVersionElem) currentVersionElem.textContent = '';
+            if (availableVersionElem) availableVersionElem.textContent = '';
+            return;
+        }
+
+        const updateInfo = data.update.reachy_mini;
+        const isUpdateAvailable = updateInfo.is_available;
+        const currentVersion = updateInfo.current_version || '-';
+        const availableVersion = updateInfo.available_version || '-';
+
+        if (currentVersionElem) currentVersionElem.textContent = `Current version: ${currentVersion}`;
+        if (availableVersionElem) availableVersionElem.textContent = `Available version: ${availableVersion}`;
+
         if (isUpdateAvailable) {
             statusElem.innerHTML = 'An update is available!';
-            checkAgainBtn.classList.add('hidden');
+            if (availableVersionContainer) availableVersionContainer.classList.remove('hidden');
             startUpdateBtn.classList.remove('hidden');
         } else {
             statusElem.innerHTML = 'Your system is up to date.';
-            checkAgainBtn.classList.remove('hidden');
+            if (availableVersionContainer) availableVersionContainer.classList.add('hidden');
             startUpdateBtn.classList.add('hidden');
         }
     }
 };
 
 window.addEventListener('load', async () => {
-    updateManager.updateUI();
+    await updateManager.checkForUpdate();
 });

src/reachy_mini/daemon/app/dashboard/templates/sections/update.html

@@ -1,34 +1,54 @@
 <div class="app-section">
     <div class="app-section-title">Reachy Mini Update</div>
 
-    <div id="update-status" class="pt-4"></div>
+    <div class="mt-2">
+        <button id="check-again-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg shadow"
+            onclick="updateManager.checkForUpdate()">Check for Updates</button>
+        <label style="margin-left:1em;">
+            <input type="checkbox" id="pre-release-checkbox"
+                onchange="updateManager.preRelease = this.checked; updateManager.checkForUpdate();">
+            pre-release
+        </label>
+    </div>
 
-    <button id="check-again-btn" class="mt-4 px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg shadow hidden"
-        onclick="updateManager.updateUI()">Check
-        Again</button>
+    <div class="flex flex-col gap-2 pt-4">
+        <div id="update-status"></div>
+        <div class="flex flex-row gap-4">
+            <div class="flex flex-col gap-2 w-full px-4">
+                <div><span id="current-version" class="font-mono text-blue-700"></span></div>
+                <div><span id="available-version" class="font-mono text-green-700"></span></div>
+            </div>
+        </div>
+
+        <div class="mt-4">
+            <button id="start-update-btn"
+                class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg shadow hidden bg-green-400 hover:bg-green-500 text-white"
+                onclick="updateManager.startUpdate()">Start Update</button>
+        </div>
+    </div>
+</div>
 
-    <button id="start-update-btn"
-        class="mt-4 px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg shadow hidden bg-green-400 hover:bg-green-500 text-white"
-        onclick="updateManager.startUpdate()">Start Update</button>
 
-    <div id="update-modal" tabindex="-1" aria-hidden="true"
-        class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full">
-        <div class="relative p-4 w-full max-w-2xl max-h-full">
-            <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
-                <div
-                    class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
-                    <h3 id="update-modal-title" class="text-xl font-semibold text-gray-900 dark:text-white"></h3>
-                </div>
-                <div class="p-4 md:p-5 space-y-4">
-                    <div id="update-logs" class="overflow-y-auto max-h-48 text-gray-500 dark:text-gray-400">
-                    </div>
-                </div>
-                <div
-                    class="flex items-center justify-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
-                    <button id="update-modal-close-button" data-modal-hide="default-modal" type="button"
-                        class="hidden"></button>
+<div id="update-modal" tabindex="-1" aria-hidden="true"
+    class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full">
+    <div class="relative p-4 w-full max-w-2xl max-h-full">
+        <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
+            <div
+                class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
+                <h3 id="update-modal-title" class="text-xl font-semibold text-gray-900 dark:text-white"></h3>
+            </div>
+            <div class="p-4 md:p-5 space-y-4">
+                <div id="update-logs" class="overflow-y-auto max-h-48 text-gray-500 dark:text-gray-400">
                 </div>
             </div>
+            <div
+                class="flex items-center justify-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
+                <button id="update-modal-close-button" data-modal-hide="default-modal" type="button"
+                    class="px-4 py-2 bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow hidden">
+                    Close
+                </button>
+            </div>
         </div>
     </div>
+</div>
 </div>

src/reachy_mini/daemon/app/dashboard/update.html

@@ -12,26 +12,40 @@
 from reachy_mini.daemon.app import bg_job_register
 from reachy_mini.daemon.app.bg_job_register import JobInfo
 from reachy_mini.utils.wireless_version.update import update_reachy_mini
-from reachy_mini.utils.wireless_version.update_available import is_update_available
+from reachy_mini.utils.wireless_version.update_available import (
+    get_local_version,
+    get_pypi_version,
+    is_update_available,
+)
 
 router = APIRouter(prefix="/update")
 busy_lock = threading.Lock()
 
 
 @router.get("/available")
-def available(pre_release: bool = False) -> dict[str, dict[str, bool]]:
+def available(pre_release: bool = False) -> dict[str, dict[str, dict[str, bool | str]]]:
     """Check if an update is available for Reachy Mini Wireless."""
     if busy_lock.locked():
         raise HTTPException(status_code=400, detail="Update is in progress")
 
+    current_version = str(get_local_version("reachy_mini"))
+
     try:
-        return {
-            "update": {
-                "reachy_mini": is_update_available("reachy_mini", pre_release),
+        is_available = is_update_available("reachy_mini", pre_release)
+        available = str(get_pypi_version("reachy_mini", pre_release))
+    except (ConnectionError, requests.exceptions.ConnectionError):
+        is_available = False
+        available = "unknown"
+
+    return {
+        "update": {
+            "reachy_mini": {
+                "is_available": is_available,
+                "current_version": current_version,
+                "available_version": available,
             }
         }
-    except (ConnectionError, requests.exceptions.ConnectionError):
-        raise HTTPException(status_code=503, detail="Unable to check for updates")
+    }
 
 
 @router.post("/start")

src/reachy_mini/daemon/app/routers/update.py

@@ -33,7 +33,7 @@ def get_pypi_version(package_name: str, pre_release: bool) -> semver.Version:
         releases = list(data["releases"].keys())
         pre_version = _semver_version(releases[-1])
         if pre_version > version:
-            version = pre_version
+            return pre_version
 
     return _semver_version(version)