feat(frontend): truncate items inside ongoing tasks list

Slessi · Slessi · commit 297415dec748 · 2025-11-24T15:56:56.000+01:00
Restrict the size of the ongoing items menu to 320px, and truncate text inside of it to fit. Also refactor to Popover and constrain everything to the viewport accordingly.

Signed-off-by: Edward Sammut Alessi &lt;edward.sammutalessi@siderolabs.com&gt;
diff --git a/frontend/src/components/common/ActionsBox/TActionsBox.vue b/frontend/src/components/common/ActionsBox/TActionsBox.vue
@@ -26,7 +26,7 @@ const toggleState = ref(false)
 
     <DropdownMenuPortal>
       <DropdownMenuContent
-        class="bg-popover text-popover-foreground z-50 max-h-(--reka-dropdown-menu-content-available-height) origin-(--reka-dropdown-menu-content-transform-origin) rounded border border-naturals-n4 bg-naturals-n3 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+        class="z-50 max-h-(--reka-dropdown-menu-content-available-height) origin-(--reka-dropdown-menu-content-transform-origin) rounded border border-naturals-n4 bg-naturals-n3 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
         align="end"
         side="bottom"
       >
diff --git a/frontend/src/components/common/OngoingTasks/OngoingTasks.stories.ts b/frontend/src/components/common/OngoingTasks/OngoingTasks.stories.ts
@@ -7,7 +7,11 @@ import { createWatchStreamHandler } from '@msw/helpers'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { formatRFC3339 } from 'date-fns'
 
-import type { OngoingTaskSpec } from '@/api/omni/specs/omni.pb'
+import {
+  KubernetesUpgradeStatusSpecPhase,
+  type OngoingTaskSpec,
+  TalosUpgradeStatusSpecPhase,
+} from '@/api/omni/specs/omni.pb'
 import { EphemeralNamespace, OngoingTaskType } from '@/api/resources'
 
 import OngoingTasks from './OngoingTasks.vue'
@@ -35,29 +39,45 @@ export const Default: Story = {
                 created: formatRFC3339(faker.date.recent()),
               },
               spec: {
-                title: faker.animal.cat(),
+                title: faker.string.uuid(),
                 ...faker.helpers.arrayElement([
                   {
                     kubernetes_upgrade: {
                       last_upgrade_version: faker.system.semver(),
                       current_upgrade_version: faker.system.semver(),
+                      phase: KubernetesUpgradeStatusSpecPhase.Upgrading,
                     },
                   },
                   {
                     talos_upgrade: {
                       last_upgrade_version: faker.system.semver(),
                       current_upgrade_version: faker.system.semver(),
+                      phase: TalosUpgradeStatusSpecPhase.Upgrading,
+                    },
+                  },
+                  {
+                    talos_upgrade: {
+                      last_upgrade_version: faker.system.semver(),
+                      phase: TalosUpgradeStatusSpecPhase.Reverting,
                     },
                   },
                   {
                     machine_upgrade: {
-                      schematic_id: faker.system.semver(),
-                      current_schematic_id: faker.system.semver(),
+                      schematic_id: faker.string.hexadecimal({
+                        prefix: '',
+                        casing: 'lower',
+                        length: 64,
+                      }),
+                      current_schematic_id: faker.string.hexadecimal({
+                        prefix: '',
+                        casing: 'lower',
+                        length: 64,
+                      }),
                     },
                   },
                   {
                     destroy: {
-                      phase: 'Destroying',
+                      phase: 'Destroying: 2 machine sets, 3 machines',
                     },
                   },
                 ]),
diff --git a/frontend/src/components/common/OngoingTasks/OngoingTasks.vue b/frontend/src/components/common/OngoingTasks/OngoingTasks.vue
@@ -5,15 +5,14 @@ Use of this software is governed by the Business Source License
 included in the LICENSE file.
 -->
 <script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components'
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
 import { ref } from 'vue'
 
 import { Runtime } from '@/api/common/omni.pb'
 import { type Resource } from '@/api/grpc'
 import { KubernetesUpgradeStatusSpecPhase, type OngoingTaskSpec } from '@/api/omni/specs/omni.pb'
 import { EphemeralNamespace, OngoingTaskType } from '@/api/resources'
 import { itemID } from '@/api/watch'
-import TAnimation from '@/components/common/Animation/TAnimation.vue'
 import TIcon from '@/components/common/Icon/TIcon.vue'
 import { useWatch } from '@/components/common/Watch/useWatch'
 import IconHeaderDropdownLoading from '@/components/icons/IconHeaderDropdownLoading.vue'
@@ -52,21 +51,12 @@ const getCurrentVersion = (item: Resource<OngoingTaskSpec>) => {
 
   return item.spec.machine_upgrade?.schematic_id
 }
-
-const toggleDropdown = () => {
-  dropdownOpen.value = !dropdownOpen.value
-}
-
-const onClickOutside = () => {
-  dropdownOpen.value = false
-}
 </script>
 
 <template>
-  <div v-on-click-outside="onClickOutside" class="relative flex items-center">
-    <div
-      class="flex cursor-pointer items-center gap-1 text-naturals-n11 transition-colors hover:text-naturals-n14"
-      @click="() => toggleDropdown()"
+  <PopoverRoot v-model:open="dropdownOpen">
+    <PopoverTrigger
+      class="flex items-center gap-1 text-naturals-n11 transition-colors hover:text-naturals-n14"
     >
       <IconHeaderDropdownLoading :active="data.length > 0" />
       <span class="text-xs font-normal whitespace-nowrap select-none">
@@ -78,44 +68,57 @@ const onClickOutside = () => {
         :class="{ '-rotate-180': dropdownOpen }"
         icon="arrow-down"
       />
-    </div>
-
-    <TAnimation>
-      <div
-        v-show="dropdownOpen"
-        class="absolute top-7 -right-2 z-30 rounded border border-naturals-n4 bg-naturals-n2"
+    </PopoverTrigger>
+
+    <PopoverPortal>
+      <PopoverContent
+        class="z-30 max-h-(--reka-popover-content-available-height) max-w-[min(--spacing(80),var(--reka-popover-content-available-width))] min-w-(--reka-popover-trigger-width) origin-(--reka-popover-content-transform-origin) overflow-auto rounded border border-naturals-n4 bg-naturals-n2 slide-in-from-top-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+        :side-offset="10"
+        align="end"
+        side="bottom"
       >
         <div
           v-for="item in data"
           :key="itemID(item)"
-          class="flex flex-col gap-2 p-6 not-last:border-b not-last:border-naturals-n4"
+          class="flex flex-col gap-2 border-naturals-n4 p-6 not-last:border-b"
         >
           <div class="flex items-center justify-between gap-4">
-            <h3 class="w-9/12 text-xs whitespace-nowrap text-naturals-n13">
+            <h3 class="truncate text-xs text-naturals-n13">
               {{ item.spec.title }}
             </h3>
 
-            <span v-if="item.metadata.created" class="w-3/12 text-right text-xs text-naturals-n9">
+            <span
+              v-if="item.metadata.created"
+              class="shrink-0 text-right text-xs whitespace-nowrap text-naturals-n9"
+            >
               {{ formatISO(item.metadata.created, 'HH:mm:ss') }}
             </span>
           </div>
 
-          <div class="truncate text-xs text-naturals-n9">
-            <template v-if="item.spec.destroy">
+          <div class="text-xs text-naturals-n9">
+            <span v-if="item.spec.destroy" class="truncate">
               {{ item.spec.destroy.phase }}
-            </template>
+            </span>
 
             <div v-else class="flex items-center gap-2 text-xs">
               <template v-if="getCurrentVersion(item)">
-                <span v-if="item.spec.kubernetes_upgrade">Upgrade Kubernetes</span>
-                <span v-else-if="item.spec.machine_upgrade">Upgrade Machine</span>
-                <span v-else>Upgrade Talos</span>
+                <span v-if="item.spec.kubernetes_upgrade" class="whitespace-nowrap">
+                  Upgrade Kubernetes
+                </span>
+                <span v-else-if="item.spec.machine_upgrade" class="whitespace-nowrap">
+                  Upgrade Machine
+                </span>
+                <span v-else class="whitespace-nowrap">Upgrade Talos</span>
                 <div class="flex-1" />
-                <span class="rounded bg-naturals-n4 px-2 text-xs font-bold text-naturals-n13">
+                <span
+                  class="truncate rounded bg-naturals-n4 px-2 text-xs font-bold text-naturals-n13"
+                >
                   {{ getPreviousVersion(item) }}
                 </span>
                 <span>⇾</span>
-                <span class="rounded bg-naturals-n4 px-2 text-xs font-bold text-naturals-n13">
+                <span
+                  class="truncate rounded bg-naturals-n4 px-2 text-xs font-bold text-naturals-n13"
+                >
                   {{ getCurrentVersion(item) }}
                 </span>
               </template>
@@ -126,16 +129,18 @@ const onClickOutside = () => {
                   KubernetesUpgradeStatusSpecPhase.Reverting
                 "
               >
-                <span>Reverting back to</span>
+                <span class="whitespace-nowrap">Reverting back to</span>
                 <div class="flex-1" />
-                <span class="rounded bg-naturals-n4 px-2 text-xs font-bold text-naturals-n13">
+                <span
+                  class="rounded bg-naturals-n4 px-2 text-xs font-bold whitespace-nowrap text-naturals-n13"
+                >
                   {{
                     (item.spec.kubernetes_upgrade ?? item.spec.talos_upgrade)?.last_upgrade_version
                   }}
                 </span>
               </template>
 
-              <span v-else>Updating machine schematics</span>
+              <span v-else class="whitespace-nowrap">Updating machine schematics</span>
             </div>
           </div>
         </div>
@@ -144,7 +149,7 @@ const onClickOutside = () => {
           <TIcon icon="check" class="h-4 w-4" />
           No tasks
         </div>
-      </div>
-    </TAnimation>
-  </div>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
 </template>

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const toggleState = ref(false)`
`26`	`26`
`27`	`27`	`<DropdownMenuPortal>`
`28`	`28`	`<DropdownMenuContent`
`29`		- class="bg-popover text-popover-foreground z-50 max-h-(--reka-dropdown-menu-content-available-height) origin-(--reka-dropdown-menu-content-transform-origin) rounded border border-naturals-n4 bg-naturals-n3 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
	`29`	+ class="z-50 max-h-(--reka-dropdown-menu-content-available-height) origin-(--reka-dropdown-menu-content-transform-origin) rounded border border-naturals-n4 bg-naturals-n3 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
`30`	`30`	`align="end"`
`31`	`31`	`side="bottom"`
`32`	`32`	`>`