feat(controller): added updating image badge during image upgrade (#398)

NethServer · Oct 10, 2024 · 05bb433 · 05bb433
1 parent 6401c2c
commit 05bb433
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
@@ -2208,7 +2208,9 @@
       "batch_update_system": "You are about to update the system for multiple units. The units that are available for an update are shown inside the combobox below.",
       "batch_updated_systems": "System update sent to the unit | System update sent to {n} units",
       "error_batch_updating_systems": "Some systems failed to update.",
-      "error_batch_updating_systems_description": "Some units failed to get the update from the controller. Please check below the ones that failed and try again."
+      "error_batch_updating_systems_description": "Some units failed to get the update from the controller. Please check below the ones that failed and try again.",
+      "updating_image": "Update in progress",
+      "updating_image_description": "The unit is updating the image. The unit may be not available for a few minutes while the update is being installed."
     },
     "unit_terminal": {
       "name_unit_terminal": "{name} unit terminal",

diff --git a/src/components/controller/units/BatchUnitImageUpdate.vue b/src/components/controller/units/BatchUnitImageUpdate.vue
@@ -60,7 +60,9 @@ function updateUnits() {
   Promise.allSettled(
     selectedUnits.value.map((unit) => {
       if (updateMode.value === 'now') {
-        return upgradeUnitImage(unit)
+        return upgradeUnitImage(unit).then(() => {
+          unitsStore.addUnitUpgradingImage(unit.id)
+        })
       } else {
         return scheduleUpgradeUnitImage(scheduledUpdate.value, unit)
       }

diff --git a/src/components/controller/units/ScheduleUpdateDrawer.vue b/src/components/controller/units/ScheduleUpdateDrawer.vue
@@ -92,6 +92,7 @@ async function updateUnit() {
     sendingError.value = undefined
     if (updateMode.value == 'now') {
       await upgradeUnitImage(_unit.value)
+      unitsStore.addUnitUpgradingImage(_unit.value!.id)
     } else {
       await scheduleUpgradeUnitImage(scheduledUpdate.value, _unit.value)
     }

diff --git a/src/components/controller/units/UnitsTable.vue b/src/components/controller/units/UnitsTable.vue
@@ -40,6 +40,7 @@ import {
   faCalendarXmark,
   faClock,
   faCloudArrowUp,
+  faSync,
   faWarning
 } from '@fortawesome/free-solid-svg-icons'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -169,7 +170,7 @@ function getKebabMenuItems(unit: Unit) {
       icon: unit.info.scheduled_update > 0 ? 'pen-to-square' : 'circle-arrow-up',
       iconStyle: 'fas',
       action: () => emit('scheduleUpdate', unit),
-      disabled: !unit.connected
+      disabled: !unit.connected || unitsStore.unitUpgradingImage.find((id) => id == unit.id)
     })
   }
   if (unit.info.scheduled_update > 0) {
@@ -453,7 +454,24 @@ function showRemoveUnitModal(unit: Unit) {
             <span v-if="item.info.version" class="flex flex-wrap items-center gap-2">
               <span>{{ item.info.version }}</span>
               <template v-if="item.connected">
-                <template v-if="item.info.scheduled_update > 0">
+                <template v-if="unitsStore.unitUpgradingImage.find((id) => id == item.id)">
+                  <NeTooltip>
+                    <template #trigger>
+                      <NeBadge
+                        :icon="faSync"
+                        :text="t('controller.units.updating_image')"
+                        clickable
+                        kind="info"
+                      />
+                    </template>
+                    <template #content>
+                      <div>
+                        {{ t('controller.units.updating_image_description') }}
+                      </div>
+                    </template>
+                  </NeTooltip>
+                </template>
+                <template v-else-if="item.info.scheduled_update > 0">
                   <NeTooltip>
                     <template #trigger>
                       <NeBadge

diff --git a/src/stores/controller/units.ts b/src/stores/controller/units.ts
@@ -60,6 +60,7 @@ export const useUnitsStore = defineStore('units', () => {
   const errorListUnits = ref('')
   const errorListUnitsDetails = ref('')
   const unitUpdatingPackages = ref<string[]>([])
+  const unitUpgradingImage = ref<string[]>([])
 
   const getUnits = async () => {
     loadingListUnits.value = true
@@ -78,6 +79,11 @@ export const useUnitsStore = defineStore('units', () => {
         unit.connected = !isEmpty(unit.vpn)
       }
 
+      // if version_update is empty, remove the unit from the unitUpgradingImage list
+      unitUpgradingImage.value = unitUpgradingImage.value.filter((unit) => {
+        return unitsList.find((u) => u.id === unit)?.info.version_update !== ''
+      })
+
       units.value = unitsList.sort(sortUnits)
     } catch (err: any) {
       console.error(err)
@@ -220,6 +226,13 @@ export const useUnitsStore = defineStore('units', () => {
     }, 10000)
   }
 
+  function addUnitUpgradingImage(unitId: string) {
+    unitUpgradingImage.value.push(unitId)
+    setTimeout(() => {
+      unitUpgradingImage.value = unitUpgradingImage.value.filter((unit) => unit !== unitId)
+    }, 60000)
+  }
+
   return {
     units,
     getUnits,
@@ -234,6 +247,8 @@ export const useUnitsStore = defineStore('units', () => {
     errorListUnitsDetails,
     getUnitInfo,
     unitUpdatingPackages,
-    addUnitUpdating
+    addUnitUpdating,
+    unitUpgradingImage,
+    addUnitUpgradingImage
   }
 })