System Updates

src/api/system/updates.js

@@ -13,8 +13,11 @@ export async function checkForUpdates() {
   return res;
 }
 
-export async function commenceUpdate() {
-  const res = await client.post(`/system/updates/commence`, {}, {
+export async function commenceUpdate(pkg, version) {
+  const res = await client.post(`/system/update`, {
+    package: pkg,
+    version
+  }, {
     noLogoutRedirect: true,
     mock: postResponse,
   });

src/api/system/updates.mocks.js

@@ -3,25 +3,26 @@ export const getResponse = {
   method: "get",
   group: "updates",
   res: {
-    success: true,
-    updates: [{
-      name: 'Dogebox',
-      version: '0.3.2',
-      short: 'Bundles Dogeboxd, DKM, dPanel',
-      link: 'https://github.com/dogeorg/dogeboxd/release/foo',
-      long: 'This update deserunt amet ex in labore dolore et veniam dolor culpa enim dolor in deserunt do aliquip mollit dolor elit dolore dolore aute proident consectetur consequat in nostrud sit occaecat est in cupidatat laboris nulla.'
+    packages: {
+      "dogebox": {
+        name: "Dogebox",
+        currentVersion: "v0.3.2-beta.3",
+        latestUpdate: "v0.3.2-beta.4",
+        updates: [
+          {
+            version: "v0.3.2-beta.4",
+            summary: "Update for Dogeboxd / DKM / DPanel",
+            releaseURL: "https://github.com/dogeorg/dogebox/releases/tag/v0.3.2-beta.4",
+            long: "",
+          },
+        ],
+      }
     },
-    {
-      name: 'NixOS',
-      short: 'Security patches',
-      link: 'https://github.com/dogeorg/dogebox/release/bar',
-      long: 'This update deserunt amet ex in labore dolore et veniam dolor culpa enim dolor in deserunt do aliquip mollit dolor elit dolore dolore aute proident consectetur consequat in nostrud sit occaecat est in cupidatat laboris nulla.'
-    }]
   }
 };
 
 export const postResponse = {
-  name: "/system/updates/commence",
+  name: "/system/update",
   method: "post",
   group: "updates",
   res: {

src/components/views/action-check-updates/index.js

@@ -70,12 +70,21 @@ export class CheckUpdatesView extends LitElement {
     this._inflight_checking = true;
 
     // Fetch
-    const { updates } = await checkForUpdates();
-    this._updates = updates || [];
+    const updateResponse = await checkForUpdates();
+
+    // Find any packages that have updates
+    const updatablePackages = Object.keys(updateResponse.packages).filter(pkg => {
+      return updateResponse.packages[pkg].latestUpdate !== updateResponse.packages[pkg].currentVersion
+    }).map(pkg => ({
+      ...updateResponse.packages[pkg],
+      latestUpdate: updateResponse.packages[pkg].updates.find((update) => update.version === updateResponse.packages[pkg].latestUpdate)
+    }))
+
+    this._updatablePackages = updatablePackages || [];
     await asyncTimeout(1000);
 
     // Toggle UI according to whether there are updates or not.
-    this._has_updates = !!this._updates.length;
+    this._has_updates = this._updatablePackages.length > 0;
     this._inflight_checking = false;
   }
 
@@ -219,18 +228,19 @@ export class CheckUpdatesView extends LitElement {
         <h1>System Updates</h1>
 
         <div class="updates-list">
-          ${this._updates.length ? this._updates.map((item) => html`
+          ${this._updatablePackages.length ? this._updatablePackages.map((item) => html`
             <x-version-card
               name=${item.name}
-              version=${item.version}
-              short=${item.short}
-              link=${item.link}
+              currentVersion=${item.currentVersion}
+              newVersion=${item.latestUpdate.version}
+              short=${item.latestUpdate.summary}
+              link=${item.latestUpdate.releaseURL}
               link_label="Release notes"
-              long=${item.long}
+              long=${item.latestUpdate.long ?? item.latestUpdate.summary}
             ></x-version-card>
           `): nothing }
 
-          ${!this._updates.length ? html`
+          ${!this._updatablePackages.length ? html`
             <sl-spinner></sl-spinner>`
           : nothing }
         </div>
@@ -269,14 +279,14 @@ export class CheckUpdatesView extends LitElement {
         ${!this._inflight_update && this._update_outcome === "error" ? html`
           <sl-alert open variant="danger" style="text-align: left">
           <small style="display:inline-block; margin-bottom: 4px;">Update failed</small>
-          <sl-progress-bar value=1 style="--indicator-color: var(--sl-color-danger-600)"></sl-progress-bar>
+          <sl-progress-bar value=100 style="--indicator-color: var(--sl-color-danger-600)"></sl-progress-bar>
         </sl-alert>
         `: nothing }
 
         ${!this._inflight_update && this._update_outcome === "timeout" ? html`
           <sl-alert open variant="warning" style="text-align: left">
           <small style="display:inline-block; margin-bottom: 4px;">Update timeout</small>
-          <sl-progress-bar value=80 style="--indicator-color: var(--sl-color-warning-600)"></sl-progress-bar>
+          <sl-progress-bar value=100 style="--indicator-color: var(--sl-color-danger-600)"></sl-progress-bar>
         </sl-alert>
         `: nothing }
 
@@ -331,7 +341,10 @@ export class CheckUpdatesView extends LitElement {
 
     try {
       await asyncTimeout(1000);
-      const res = await commenceUpdate();
+
+      // We only support "dogebox" for now, when we want to support multiple packages,
+      // this, and the UI around all our upgrades will have to be updated slightly.
+      const res = await commenceUpdate("dogebox", this._updatablePackages[0].latestUpdate.version);
 
       // TODO.  Obtain "acitivityId" from response
       // Use this ID to display acitivty logs filtered
@@ -355,7 +368,8 @@ export class CheckUpdatesView extends LitElement {
 
   async pollForUpdateChange() {
     let attempts = 0;
-    const maxAttempts = 12 // 24*5000ms = 120 seconds;
+    const pollEveryMs = 5000
+    const maxAttempts = 120 // 120*0500ms/1000ms/60 = 10 minutes of waiting;
 
     const intervalId = setInterval(async () => {
       try {
@@ -390,7 +404,7 @@ export class CheckUpdatesView extends LitElement {
       } finally {
         attempts++;
       }
-    }, 5000);
+    }, pollEveryMs);
 
     return () => clearInterval(intervalId);
   }

src/components/views/x-version-card.js

@@ -4,7 +4,8 @@ import "/components/common/action-row/action-row.js";
 class VersionCard extends LitElement {
   static properties = {
     name: { type: String },
-    version: { type: String },
+    currentVersion: { type: String },
+    newVersion: { type: String },
     short: { type: String },
     long: { type: String },
     link: { type: String },
@@ -47,11 +48,11 @@ class VersionCard extends LitElement {
     .fold { padding-left: 48px; }
   `
   render() {
-    const { name, version, short, long, link, link_label } = this;
+    const { name, currentVersion, newVersion, short, long, link, link_label } = this;
     return html`
       <action-row prefix="box" expandable>
         <span class="label" slot="label">
-          ${name} ${version}
+          ${name} (${currentVersion} -> ${newVersion})
         </span>
         <sl-tooltip content=${short} hoist>
           <span class="short">${short}</span>

src/controllers/sockets/main-channel.js

@@ -129,8 +129,8 @@ class SocketChannel {
           pkgController.ingestProgressUpdate(data);
           break;
 
-        case "system-state":
-          sysController.ingestSystemStateUpdate(data)
+        case "system-update-available":
+          sysController.ingestSystemUpdateAvailableEvent(data)
           break;
       }
       this.notify();

src/controllers/system/index.js

@@ -27,17 +27,13 @@ class SysController {
     }
   }
 
-  ingestSystemStateUpdate(data) {
+  ingestSystemUpdateAvailableEvent() {
+    // When an update is available, Dogeboxd emits a 'system-update-available' event
+    // We pay no regard to the payload. The fact the message is received
+    // is sufficient enough to toggle the client state to show update indicators.
     let err;
-
     try {
-      // validate
-      if (!data.update) {
-        console.warn('SystemStateUpdate failed validation', { data });
-        err = true;
-      }
-      // do stuff
-      store.updateState({ sysContext: { ...data.update }});
+      store.updateState({ sysContext: { updateAvailable: true }});
     } catch (err) {
       console.error('Failed to process system state update', err);
     } finally {

src/pages/page-settings/index.js

@@ -65,7 +65,7 @@ class SettingsPage extends LitElement {
             <action-row prefix="info-circle" label="Version" href="/settings/versions" @click=${notYet}>
               View version details
             </action-row>
-            <action-row prefix="arrow-repeat" ?dot=${updateAvailable} label="Updates" href="/settings/updates" @click=${notYet}>
+            <action-row prefix="arrow-repeat" ?dot=${updateAvailable} label="Updates" href="/settings/updates">
               Check for updates
             </action-row>
             <action-row prefix="wifi" label="Wifi" @click=${notYet}>

src/utils/devtools/functions/update-available.js

@@ -3,13 +3,9 @@ import { store } from "/state/store.js";
 
 export function emitSyntheticUpdateAvailable() {
   const hasUpdateEvent = {
-    type: 'system-state',
-    data: {
-      update: {
-        updateAvailable: !store.getContext("sys").updateAvailable
-      }
-    }
+    type: 'system-update-available',
+    update: true
   }
 
-  sysController.ingestSystemStateUpdate(hasUpdateEvent.data)
+  sysController.ingestSystemUpdateAvailableEvent(hasUpdateEvent)
 }