fix(frontend): fix alignment of provisioning machines

Slessi · Slessi · commit a6562dc26da7 · 2025-10-03T18:28:52.000+02:00
Fix the alignment of provisioning machines on the clusters page

Signed-off-by: Edward Sammut Alessi &lt;edward.sammutalessi@siderolabs.com&gt;
diff --git a/frontend/src/views/cluster/ClusterMachines/ClusterMachines.vue b/frontend/src/views/cluster/ClusterMachines/ClusterMachines.vue
@@ -5,89 +5,58 @@ Use of this software is governed by the Business Source License
 included in the LICENSE file.
 -->
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import { computed, ref, toRefs } from 'vue'
+import { computed } from 'vue'
 
 import { Runtime } from '@/api/common/omni.pb'
-import type { Resource } from '@/api/grpc'
 import type { ClusterDiagnosticsSpec, MachineSetSpec } from '@/api/omni/specs/omni.pb'
 import {
   ClusterDiagnosticsType,
   DefaultNamespace,
   LabelCluster,
-  LabelControlPlaneRole,
-  MachineSetNodeType,
   MachineSetStatusType,
   MachineSetType,
 } from '@/api/resources'
-import WatchResource, { itemID } from '@/api/watch'
+import { itemID } from '@/api/watch'
+import { useWatch } from '@/components/common/Watch/useWatch'
 import Watch from '@/components/common/Watch/Watch.vue'
 import { sortMachineSetIds } from '@/methods/machineset'
 
 import MachineSet from './MachineSet.vue'
 
-const props = defineProps<{
+const { clusterID } = defineProps<{
   clusterID: string
   isSubgrid?: boolean
 }>()
 
-const { clusterID } = toRefs(props)
-
-const machineSets: Ref<Resource<MachineSetSpec>[]> = ref([])
-const clusterDiagnostics: Ref<Resource<ClusterDiagnosticsSpec> | undefined> = ref()
-
-const machineSetsWatch = new WatchResource(machineSets)
-const clusterDiagnosticsWatch = new WatchResource(clusterDiagnostics)
-
-machineSetsWatch.setup(
-  computed(() => {
-    return {
-      resource: {
-        type: MachineSetType,
-        namespace: DefaultNamespace,
-      },
-      runtime: Runtime.Omni,
-      selectors: [`${LabelCluster}=${clusterID.value}`],
-    }
-  }),
-)
+const { data: machineSets } = useWatch<MachineSetSpec>(() => ({
+  resource: {
+    type: MachineSetType,
+    namespace: DefaultNamespace,
+  },
+  runtime: Runtime.Omni,
+  selectors: [`${LabelCluster}=${clusterID}`],
+}))
 
-clusterDiagnosticsWatch.setup({
+const { data: clusterDiagnostics } = useWatch<ClusterDiagnosticsSpec>(() => ({
   runtime: Runtime.Omni,
   resource: {
     namespace: DefaultNamespace,
     type: ClusterDiagnosticsType,
-    id: clusterID.value,
+    id: clusterID,
   },
-})
+}))
 
 const nodesWithDiagnostics = computed(() => {
-  const nodes = clusterDiagnostics.value?.spec?.nodes?.map((node) => node.id ?? '') ?? []
+  const nodes = clusterDiagnostics.value?.spec.nodes?.map((node) => node.id ?? '') ?? []
   return new Set(nodes)
 })
 
 const watches = computed(() =>
   sortMachineSetIds(
-    clusterID.value,
-    machineSets.value.map((machineSet) => machineSet?.metadata?.id ?? ''),
+    clusterID,
+    machineSets.value.map((machineSet) => machineSet.metadata.id ?? ''),
   ),
 )
-
-const controlPlaneNodes = ref<Resource[]>([])
-
-const machineNodesWatch = new WatchResource(controlPlaneNodes)
-machineNodesWatch.setup(
-  computed(() => {
-    return {
-      resource: {
-        type: MachineSetNodeType,
-        namespace: DefaultNamespace,
-      },
-      runtime: Runtime.Omni,
-      selectors: [`${LabelControlPlaneRole}`],
-    }
-  }),
-)
 </script>
 
 <template>
diff --git a/frontend/src/views/cluster/ClusterMachines/MachineRequest.vue b/frontend/src/views/cluster/ClusterMachines/MachineRequest.vue
@@ -40,16 +40,14 @@ const stage = computed(() => {
 </script>
 
 <template>
-  <div
-    class="col-span-full grid grid-cols-subgrid items-center gap-1 py-6 pr-11 pl-3 text-xs text-naturals-n14"
-  >
-    <div class="col-span-2 ml-5 flex items-center gap-2">
+  <div class="col-span-full grid grid-cols-subgrid items-center p-2 pr-4 text-xs text-naturals-n14">
+    <div class="col-span-2 ml-6 flex items-center gap-2">
       <IconHeaderDropdownLoading
         v-if="stage !== TCommonStatuses.PROVISIONED"
         active
-        class="ml-2 h-4 w-4"
+        class="size-4"
       />
-      <TIcon v-else icon="cloud-connection" class="ml-2 h-4 w-4" />
+      <TIcon v-else icon="cloud-connection" class="size-4" />
       {{ requestStatus.metadata.id }}
     </div>
 
diff --git a/frontend/src/views/cluster/ClusterMachines/MachineSet.vue b/frontend/src/views/cluster/ClusterMachines/MachineSet.vue
@@ -29,14 +29,15 @@ import {
   LabelMachineSet,
   MachineClassType,
 } from '@/api/resources'
-import Watch, { itemID } from '@/api/watch'
+import { itemID } from '@/api/watch'
 import TActionsBox from '@/components/common/ActionsBox/TActionsBox.vue'
 import TActionsBoxItem from '@/components/common/ActionsBox/TActionsBoxItem.vue'
 import IconButton from '@/components/common/Button/IconButton.vue'
 import TButton from '@/components/common/Button/TButton.vue'
 import TIcon from '@/components/common/Icon/TIcon.vue'
 import TSpinner from '@/components/common/Spinner/TSpinner.vue'
 import TInput from '@/components/common/TInput/TInput.vue'
+import { useWatch } from '@/components/common/Watch/useWatch'
 import { setupClusterPermissions } from '@/methods/auth'
 import {
   controlPlaneMachineSetId,
@@ -60,12 +61,6 @@ const props = defineProps<{
 
 const { machineSet } = toRefs(props)
 
-const machines = ref<Resource<ClusterMachineStatusSpec>[]>([])
-const machinesWatch = new Watch(machines)
-
-const requests = ref<Resource<ClusterMachineRequestStatusSpec>[]>([])
-const requestsWatch = new Watch(requests)
-
 const clusterID = computed(() => machineSet.value.metadata.labels?.[LabelCluster] ?? '')
 const editingMachinesCount = ref(false)
 const machineCount = ref(machineSet.value.spec.machine_allocation?.machine_count ?? 1)
@@ -99,43 +94,32 @@ const hiddenMachinesCount = computed(() => {
   return Math.max(0, (machineSet.value.spec.machines?.total || 0) - showMachinesCount.value)
 })
 
-machinesWatch.setup(
-  computed(() => {
-    return {
-      resource: {
-        namespace: DefaultNamespace,
-        type: ClusterMachineStatusType,
-      },
-      runtime: Runtime.Omni,
-      selectors: [
-        `${LabelCluster}=${clusterID.value}`,
-        `${LabelMachineSet}=${machineSet.value.metadata.id!}`,
-      ],
-      limit: showMachinesCount.value,
-    }
-  }),
-)
-
-requestsWatch.setup(
-  computed(() => {
-    if (!machineSet.value.spec.machine_allocation) {
-      return
-    }
-
-    return {
-      resource: {
-        namespace: DefaultNamespace,
-        type: ClusterMachineRequestStatusType,
-      },
-      selectors: [
-        `${LabelCluster}=${clusterID.value}`,
-        `${LabelMachineSet}=${machineSet.value.metadata.id!}`,
-      ],
-      runtime: Runtime.Omni,
-      limit: showMachinesCount.value,
-    }
-  }),
-)
+const { data: machines } = useWatch<ClusterMachineStatusSpec>(() => ({
+  resource: {
+    namespace: DefaultNamespace,
+    type: ClusterMachineStatusType,
+  },
+  runtime: Runtime.Omni,
+  selectors: [
+    `${LabelCluster}=${clusterID.value}`,
+    `${LabelMachineSet}=${machineSet.value.metadata.id}`,
+  ],
+  limit: showMachinesCount.value,
+}))
+
+const { data: requests } = useWatch<ClusterMachineRequestStatusSpec>(() => ({
+  skip: !machineSet.value.spec.machine_allocation,
+  resource: {
+    namespace: DefaultNamespace,
+    type: ClusterMachineRequestStatusType,
+  },
+  selectors: [
+    `${LabelCluster}=${clusterID.value}`,
+    `${LabelMachineSet}=${machineSet.value.metadata.id}`,
+  ],
+  runtime: Runtime.Omni,
+  limit: showMachinesCount.value,
+}))
 
 const pendingRequests = computed(() => {
   return requests.value.filter(
diff --git a/frontend/src/views/omni/Clusters/ClusterItem.vue b/frontend/src/views/omni/Clusters/ClusterItem.vue
@@ -6,23 +6,12 @@ included in the LICENSE file.
 -->
 <script setup lang="ts">
 import { useElementSize, useSessionStorage } from '@vueuse/core'
-import type { Ref } from 'vue'
-import { computed, ref, toRefs, useId, useTemplateRef } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, useId, useTemplateRef } from 'vue'
 import WordHighlighter from 'vue-word-highlighter'
 
-import { Runtime } from '@/api/common/omni.pb'
 import type { Resource } from '@/api/grpc'
-import type { ClusterStatusSpec, MachineSetSpec } from '@/api/omni/specs/omni.pb'
-import {
-  ClusterLocked,
-  DefaultNamespace,
-  LabelCluster,
-  LabelMachineSet,
-  MachineSetNodeType,
-  MachineSetType,
-} from '@/api/resources'
-import WatchResource from '@/api/watch'
+import type { ClusterStatusSpec } from '@/api/omni/specs/omni.pb'
+import { ClusterLocked } from '@/api/resources'
 import TActionsBox from '@/components/common/ActionsBox/TActionsBox.vue'
 import TActionsBoxItem from '@/components/common/ActionsBox/TActionsBoxItem.vue'
 import IconButton from '@/components/common/Button/IconButton.vue'
@@ -32,12 +21,15 @@ import { downloadKubeconfig, downloadTalosconfig } from '@/methods'
 import { setupClusterPermissions } from '@/methods/auth'
 import { addClusterLabels, removeClusterLabels } from '@/methods/cluster'
 import type { Label } from '@/methods/labels'
-import { controlPlaneMachineSetId } from '@/methods/machineset'
 import ClusterMachines from '@/views/cluster/ClusterMachines/ClusterMachines.vue'
 import ClusterStatus from '@/views/omni/Clusters/ClusterStatus.vue'
 import ItemLabels from '@/views/omni/ItemLabels/ItemLabels.vue'
 
-const props = defineProps<{
+const {
+  item,
+  defaultOpen,
+  searchQuery = '',
+} = defineProps<{
   item: Resource<ClusterStatusSpec>
   defaultOpen?: boolean
   searchQuery?: string
@@ -47,60 +39,16 @@ defineEmits<{
   filterLabels: [Label]
 }>()
 
-const { item } = toRefs(props)
-const expanded = useSessionStorage(`cluster-expanded-${item.value.metadata.id}`, props.defaultOpen)
-
-const router = useRouter()
-
-const openClusterDestroy = () => {
-  router.push({
-    query: { modal: 'clusterDestroy', cluster: item.value.metadata.id },
-  })
-}
-
-const machineSets: Ref<Resource<MachineSetSpec>[]> = ref([])
-const machineSetsWatch = new WatchResource(machineSets)
-machineSetsWatch.setup(
-  computed(() => {
-    if (!expanded) return
-
-    return {
-      resource: {
-        type: MachineSetType,
-        namespace: DefaultNamespace,
-      },
-      runtime: Runtime.Omni,
-      selectors: [`${LabelCluster}=${item.value.metadata.id!}`],
-    }
-  }),
-)
+const expanded = useSessionStorage(() => `cluster-expanded-${item.metadata.id}`, defaultOpen)
 
 const {
   canDownloadKubeconfig,
   canDownloadTalosconfig,
   canAddClusterMachines,
   canRemoveClusterMachines,
-} = setupClusterPermissions(computed(() => item.value.metadata.id!))
-
-const controlPlaneNodes = ref<Resource[]>([])
-
-const machineNodesWatch = new WatchResource(controlPlaneNodes)
-machineNodesWatch.setup(
-  computed(() => {
-    if (!expanded) return
-
-    return {
-      resource: {
-        type: MachineSetNodeType,
-        namespace: DefaultNamespace,
-      },
-      runtime: Runtime.Omni,
-      selectors: [`${LabelMachineSet}=${controlPlaneMachineSetId(item.value.metadata.id!)}`],
-    }
-  }),
-)
+} = setupClusterPermissions(computed(() => item.metadata.id!))
 
-const locked = computed(() => item.value.metadata.annotations?.[ClusterLocked] !== undefined)
+const locked = computed(() => item.metadata.annotations?.[ClusterLocked] !== undefined)
 
 const regionId = useId()
 const labelId = useId()
@@ -136,7 +84,7 @@ const { height } = useElementSize(slider)
           class="list-item-link grow truncate"
         >
           <WordHighlighter
-            :query="searchQuery ?? ''"
+            :query="searchQuery"
             :text-to-highlight="item.metadata.id"
             split-by-space
             highlight-class="bg-naturals-n14"
@@ -216,7 +164,7 @@ const { height } = useElementSize(slider)
             v-if="canRemoveClusterMachines"
             icon="delete"
             danger
-            @click="openClusterDestroy"
+            @click="$router.push({ query: { modal: 'clusterDestroy', cluster: item.metadata.id } })"
           >
             Destroy Cluster
           </TActionsBoxItem>
diff --git a/frontend/src/views/omni/Clusters/Clusters.stories.ts b/frontend/src/views/omni/Clusters/Clusters.stories.ts
diff --git a/frontend/src/views/omni/Clusters/Clusters.vue b/frontend/src/views/omni/Clusters/Clusters.vue
