From e8aee8ed86c0eaf3f8a3a79a6d02bc531ce22589 Mon Sep 17 00:00:00 2001
From: Artem Chernyshev <artem.chernyshev@talos-systems.com>
Date: Fri, 13 Dec 2024 19:13:00 +0300
Subject: [PATCH] feat: implement the machine categories UI

It is now possible to filter the machine by the following categories in
the UI:
- Manually joined machines.
- Machines provisioned by the infra providers.
- Machines PXE booted through the metal provider.
- Machines discovered by the metal provider, but not yet accepted by the
  system.

Machine acceptance UI also has two new modal windows for accepting and
rejecting the machines.
Also update controllers to add labels to the not accepted infra
machines.

Fixes: https://github.com/siderolabs/omni/issues/773
Fixes: https://github.com/siderolabs/omni/issues/766

Signed-off-by: Artem Chernyshev <artem.chernyshev@talos-systems.com>
---
 client/pkg/omni/resources/omni/labels.go      |  6 ++
 frontend/src/api/resources.ts                 |  3 +
 .../src/components/SideBar/TSideBarList.vue   |  5 +-
 frontend/src/components/common/Icon/TIcon.vue |  3 +
 .../components/common/MenuItem/TMenuItem.vue  | 49 +++++++---
 .../components/icons/IconServerNetwork.vue    | 34 +++++++
 frontend/src/methods/machine.ts               | 50 +++++++++-
 frontend/src/router/index.ts                  | 42 ++++++++-
 .../ClusterMachines/ClusterMachine.vue        | 12 ++-
 .../src/views/omni/ItemLabels/ItemLabels.vue  |  1 +
 .../src/views/omni/Machines/MachineTabs.vue   | 51 ++++++++++
 frontend/src/views/omni/Machines/Machines.vue | 35 ++++++-
 .../views/omni/Machines/MachinesPending.vue   | 92 +++++++++++++++++++
 .../src/views/omni/Modals/MachineAccept.vue   | 68 ++++++++++++++
 .../src/views/omni/Modals/MachineReject.vue   | 69 ++++++++++++++
 .../omni/cluster_machine_status.go            | 13 ++-
 .../omni/controllers/omni/infra_machine.go    | 22 ++++-
 internal/version/data/tag                     |  2 +-
 18 files changed, 522 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/components/icons/IconServerNetwork.vue
 create mode 100644 frontend/src/views/omni/Machines/MachineTabs.vue
 create mode 100644 frontend/src/views/omni/Machines/MachinesPending.vue
 create mode 100644 frontend/src/views/omni/Modals/MachineAccept.vue
 create mode 100644 frontend/src/views/omni/Modals/MachineReject.vue

diff --git a/client/pkg/omni/resources/omni/labels.go b/client/pkg/omni/resources/omni/labels.go
index e7393076..39de47d3 100644
--- a/client/pkg/omni/resources/omni/labels.go
+++ b/client/pkg/omni/resources/omni/labels.go
@@ -55,6 +55,7 @@ const (
 	LabelExposedServiceAlias = SystemLabelPrefix + "exposed-service-alias"
 
 	// LabelInfraProviderID is the infra provider ID for the resources managed by infra providers, e.g., infra.MachineRequest, infra.MachineRequestStatus.
+	// tsgen:LabelInfraProviderID
 	LabelInfraProviderID = SystemLabelPrefix + "infra-provider-id"
 
 	// LabelIsStaticInfraProvider is set on the infra.ProviderStatus resources to mark them as static providers - they do not work with MachineRequests to
@@ -82,7 +83,12 @@ const (
 	LabelNoManualAllocation = SystemLabelPrefix + "no-manual-allocation"
 
 	// LabelIsManagedByStaticInfraProvider is set on the machines managed by static infra providers.
+	// tsgen:LabelIsManagedByStaticInfraProvider
 	LabelIsManagedByStaticInfraProvider = SystemLabelPrefix + "is-managed-by-static-infra-provider"
+
+	// LabelMachinePendingAccept is added to the InfraMachine and is used to filter out the machines which are pending acceptance.
+	// tsgen:LabelMachinePendingAccept
+	LabelMachinePendingAccept = SystemLabelPrefix + "accept-pending"
 )
 
 const (
diff --git a/frontend/src/api/resources.ts b/frontend/src/api/resources.ts
index 8df3a8d3..994a4bf2 100644
--- a/frontend/src/api/resources.ts
+++ b/frontend/src/api/resources.ts
@@ -125,9 +125,12 @@ export const LabelClusterMachine = "omni.sidero.dev/cluster-machine";
 export const LabelMachine = "omni.sidero.dev/machine";
 export const LabelSystemPatch = "omni.sidero.dev/system-patch";
 export const LabelExposedServiceAlias = "omni.sidero.dev/exposed-service-alias";
+export const LabelInfraProviderID = "omni.sidero.dev/infra-provider-id";
 export const LabelMachineRequest = "omni.sidero.dev/machine-request";
 export const LabelMachineRequestSet = "omni.sidero.dev/machine-request-set";
 export const LabelNoManualAllocation = "omni.sidero.dev/no-manual-allocation";
+export const LabelIsManagedByStaticInfraProvider = "omni.sidero.dev/is-managed-by-static-infra-provider";
+export const LabelMachinePendingAccept = "omni.sidero.dev/accept-pending";
 export const MachineStatusLabelConnected = "omni.sidero.dev/connected";
 export const MachineStatusLabelDisconnected = "omni.sidero.dev/disconnected";
 export const MachineStatusLabelInvalidState = "omni.sidero.dev/invalid-state";
diff --git a/frontend/src/components/SideBar/TSideBarList.vue b/frontend/src/components/SideBar/TSideBarList.vue
index 95fc1091..56cb142a 100644
--- a/frontend/src/components/SideBar/TSideBarList.vue
+++ b/frontend/src/components/SideBar/TSideBarList.vue
@@ -15,7 +15,8 @@ included in the LICENSE file.
         :icon="item.icon"
         :label="item.label"
         :label-color="item.labelColor"
-      />
+      >
+      </t-menu-item>
     </div>
   </nav>
 </template>
@@ -30,7 +31,7 @@ export type SideBarItem = {
   route: string | RouteLocationRaw,
   icon?: IconType,
   label?: string | number,
-  labelColor?: string
+  labelColor?: string,
 }
 
 type Props = {
diff --git a/frontend/src/components/common/Icon/TIcon.vue b/frontend/src/components/common/Icon/TIcon.vue
index 6bcdaec5..5d921b9d 100644
--- a/frontend/src/components/common/Icon/TIcon.vue
+++ b/frontend/src/components/common/Icon/TIcon.vue
@@ -31,6 +31,7 @@ import {
   ServerIcon,
   ServerStackIcon,
   CalendarIcon,
+  CpuChipIcon,
 } from "@heroicons/vue/24/outline";
 
 import {
@@ -114,6 +115,7 @@ const icons = {
   "rollback": defineAsyncComponent(() => import("../../icons/IconRollback.vue")),
   "extensions": defineAsyncComponent(() => import("../../icons/IconExtensions.vue")),
   "extensions-toggle": defineAsyncComponent(() => import("../../icons/IconExtensionsToggle.vue")),
+  "server-network": defineAsyncComponent(() => import("../../icons/IconServerNetwork.vue")),
   "document": DocumentIcon,
   "power": PowerIcon,
   "users": UsersIcon,
@@ -135,6 +137,7 @@ const icons = {
   "server-stack": ServerStackIcon,
   "lifebuoy": LifebuoyIcon,
   "calendar": CalendarIcon,
+  "cpu-chip": CpuChipIcon,
 };
 
 const getComponent = (icon: string): Component | undefined => {
diff --git a/frontend/src/components/common/MenuItem/TMenuItem.vue b/frontend/src/components/common/MenuItem/TMenuItem.vue
index 57d602fa..704749fc 100644
--- a/frontend/src/components/common/MenuItem/TMenuItem.vue
+++ b/frontend/src/components/common/MenuItem/TMenuItem.vue
@@ -6,11 +6,22 @@ included in the LICENSE file.
 -->
 <template>
   <component :is="componentType" v-bind="componentAttributes">
-    <div class="item">
-      <t-icon v-if="icon" class="item__icon" :icon="icon" :svg-base64="iconSvgBase64"/>
-      <p class="item__name truncate">{{ name }}</p>
-      <div v-if="label" class="rounded-full text-naturals-N13 bg-naturals-N4 text-xs p-1 w-6 h-6 text-center" :class="labelColor ? 'text-' + labelColor : ''">
-        {{ label }}
+    <div :class="{'border-naturals-N5': expanded, 'border-transparent': !expanded}" class="border-b border-t divide-naturals-N5 flex flex-col">
+      <div class="item" :class="{'sub-item': subItem}">
+        <t-icon v-if="icon" class="item-icon" :icon="icon" :svg-base64="iconSvgBase64"/>
+        <p class="item-name truncate">{{ name }}</p>
+        <div v-if="label" class="rounded-full text-naturals-N13 bg-naturals-N4 text-xs p-1 w-6 h-6 text-center" :class="labelColor ? 'text-' + labelColor : ''">
+          {{ label }}
+        </div>
+        <t-icon v-if="hasSubItems"
+          icon="arrow-up"
+          class="w-4 h-4 hover:text-naturals-N13 transition-color transition-transform duration-250"
+          :class="{'rotate-180': expanded}"
+          @click.stop.prevent="() => expanded = !expanded"
+          />
+      </div>
+      <div @click.stop.prevent v-if="expanded">
+        <slot/>
       </div>
     </div>
   </component>
@@ -18,6 +29,7 @@ included in the LICENSE file.
 
 <script setup lang="ts">
 import TIcon, { IconType } from "@/components/common/Icon/TIcon.vue";
+import { ref } from "vue";
 
 type Props = {
   route: string | object,
@@ -26,42 +38,49 @@ type Props = {
   icon?: IconType,
   iconSvgBase64?: string,
   label?: string | number,
-  labelColor?: string
+  labelColor?: string,
+  hasSubItems?: boolean
+  subItem?: boolean
 };
 
 const props = defineProps<Props>();
+const expanded = ref(false);
 
 const componentType = props.regularLink ? "a" : "router-link";
 const componentAttributes = props.regularLink ?
     { href: props.route, target: "_blank" } :
-    { to: props.route, activeClass: "item__active" };
+    { to: props.route, activeClass: "item-active" };
 </script>
 
 <style scoped>
 .item {
-  @apply flex gap-4 border-l-2 border-transparent justify-start items-center py-1.5 my-1 px-6 transition-all duration-200 hover:bg-naturals-N4;
+  @apply flex gap-4 border-l-2 border-transparent justify-start items-center py-1.5 my-0.5 px-6 transition-all duration-200 hover:bg-naturals-N4;
 }
-.item:hover .item__icon {
+.item:hover .item-icon {
   @apply text-naturals-N13;
 }
-.item:hover .item__name {
+.item:hover .item-name {
   @apply text-naturals-N13;
 }
-.item__active .item {
+.item-active .item {
   @apply border-primary-P3;
 }
-.item__active .item__icon {
+.item-active .item-icon {
   @apply text-naturals-N13;
 }
-.item__active .item__name {
+.item-active .item-name {
   @apply text-naturals-N13;
 }
-.item__icon {
+.item-icon {
   @apply text-naturals-N11 transition-all duration-200;
   width: 16px;
   height: 16px;
 }
-.item__name {
+.item-name {
   @apply text-xs text-naturals-N11 transition-all duration-200 flex-1;
 }
+
+.item.sub-item {
+  @apply pl-12;
+}
 </style>
diff --git a/frontend/src/components/icons/IconServerNetwork.vue b/frontend/src/components/icons/IconServerNetwork.vue
new file mode 100644
index 00000000..b6c59086
--- /dev/null
+++ b/frontend/src/components/icons/IconServerNetwork.vue
@@ -0,0 +1,34 @@
+<!--
+Copyright (c) 2024 Sidero Labs, Inc.
+
+Use of this software is governed by the Business Source License
+included in the LICENSE file.
+-->
+<template>
+  <svg viewBox="0.403 0.767 23.49 18.6225" width="21.49" height="16.6225" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M 5.833 4.267 C 4.776 4.267 3.903 5.133 3.903 6.197 L 3.903 8.827 C 3.903 9.885 4.769 10.757 5.833 10.757 L 20.463 10.757 C 21.519 10.757 22.393 9.883 22.393 8.827 L 22.393 6.197 C 22.393 5.139 21.527 4.267 20.463 4.267 L 5.833 4.267 Z M 2.403 6.197 C 2.403 4.301 3.951 2.767 5.833 2.767 L 20.463 2.767 C 22.359 2.767 23.893 4.315 23.893 6.197 L 23.893 8.827 C 23.893 10.711 22.347 12.257 20.463 12.257 L 5.833 12.257 C 3.937 12.257 2.403 10.709 2.403 8.827 L 2.403 6.197 Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M 7.143 5.757 C 7.558 5.757 7.893 6.093 7.893 6.507 L 7.893 8.507 C 7.893 8.921 7.558 9.257 7.143 9.257 C 6.729 9.257 6.393 8.921 6.393 8.507 L 6.393 6.507 C 6.393 6.093 6.729 5.757 7.143 5.757 Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M 11.143 5.757 C 11.558 5.757 11.893 6.093 11.893 6.507 L 11.893 8.507 C 11.893 8.921 11.558 9.257 11.143 9.257 C 10.729 9.257 10.393 8.921 10.393 8.507 L 10.393 6.507 C 10.393 6.093 10.729 5.757 11.143 5.757 Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M 14.393 7.507 C 14.393 7.093 14.729 6.757 15.143 6.757 L 19.143 6.757 C 19.557 6.757 19.893 7.093 19.893 7.507 C 19.893 7.921 19.557 8.257 19.143 8.257 L 15.143 8.257 C 14.729 8.257 14.393 7.921 14.393 7.507 Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M 13.148 10.89 C 13.562 10.89 13.898 11.225 13.898 11.64 L 13.898 14.64 C 13.898 15.054 13.562 15.39 13.148 15.39 C 12.734 15.39 12.398 15.054 12.398 14.64 L 12.398 11.64 C 12.398 11.225 12.734 10.89 13.148 10.89 Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M 13.148 15.39 C 12.458 15.39 11.898 15.949 11.898 16.64 C 11.898 17.33 12.458 17.89 13.148 17.89 C 13.839 17.89 14.398 17.33 14.398 16.64 C 14.398 15.949 13.839 15.39 13.148 15.39 Z M 10.398 16.64 C 10.398 15.121 11.629 13.89 13.148 13.89 C 14.667 13.89 15.898 15.121 15.898 16.64 C 15.898 18.158 14.667 19.39 13.148 19.39 C 11.629 19.39 10.398 18.158 10.398 16.64 Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M 14.398 16.64 C 14.398 16.225 14.734 15.89 15.148 15.89 L 19.148 15.89 C 19.562 15.89 19.898 16.225 19.898 16.64 C 19.898 17.054 19.562 17.39 19.148 17.39 L 15.148 17.39 C 14.734 17.39 14.398 17.054 14.398 16.64 Z"
+      fill="currentColor" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M 6.398 16.64 C 6.398 16.225 6.734 15.89 7.148 15.89 L 11.148 15.89 C 11.562 15.89 11.898 16.225 11.898 16.64 C 11.898 17.054 11.562 17.39 11.148 17.39 L 7.148 17.39 C 6.734 17.39 6.398 17.054 6.398 16.64 Z"
+      fill="currentColor" />
+  </svg>
+</template>
diff --git a/frontend/src/methods/machine.ts b/frontend/src/methods/machine.ts
index 052d4bdd..87385b0d 100644
--- a/frontend/src/methods/machine.ts
+++ b/frontend/src/methods/machine.ts
@@ -7,9 +7,9 @@ import { Runtime } from "@/api/common/omni.pb";
 import { Code } from "@/api/google/rpc/code.pb";
 
 import { Resource, ResourceService } from "@/api/grpc";
-import { MachineLabelsSpec } from "@/api/omni/specs/omni.pb";
+import { InfraMachineConfigSpec, InfraMachineConfigSpecAcceptanceStatus, MachineLabelsSpec } from "@/api/omni/specs/omni.pb";
 import { withContext, withRuntime } from "@/api/options";
-import { DefaultNamespace, MachineLabelsType, MachineLocked, MachineSetNodeType, MachineStatusType, SiderolinkResourceType, SystemLabelPrefix } from "@/api/resources";
+import { DefaultNamespace, InfraMachineConfigType, MachineLabelsType, MachineLocked, MachineSetNodeType, MachineStatusType, SiderolinkResourceType, SystemLabelPrefix } from "@/api/resources";
 import { MachineService } from "@/api/talos/machine/machine.pb";
 import { destroyResources, getMachineConfigPatchesToDelete } from "@/methods/cluster";
 import { parseLabels } from "@/methods/labels";
@@ -164,3 +164,49 @@ export const updateTalosMaintenance = async (machine: string, talosVersion: stri
     nodes: [machine]
   }));
 }
+
+export const rejectMachine = async (machine: string) => {
+  await updateInfraMachineConfig(machine, (r: Resource<InfraMachineConfigSpec>) => {
+    r.spec.acceptance_status = InfraMachineConfigSpecAcceptanceStatus.REJECTED;
+  });
+};
+
+export const acceptMachine = async (machine: string) => {
+  await updateInfraMachineConfig(machine, (r: Resource<InfraMachineConfigSpec>) => {
+    r.spec.acceptance_status = InfraMachineConfigSpecAcceptanceStatus.ACCEPTED;
+  });
+};
+
+export const updateInfraMachineConfig = async (machine: string, modify: (r: Resource<InfraMachineConfigSpec>) => void) => {
+  const metadata = {
+    id: machine,
+    namespace: DefaultNamespace,
+    type: InfraMachineConfigType,
+  };
+
+  try {
+    const resource: Resource<InfraMachineConfigSpec> = await ResourceService.Get(metadata, withRuntime(Runtime.Omni));
+
+    modify(resource);
+
+    ResourceService.Update(resource, resource.metadata.version, withRuntime(Runtime.Omni))
+  } catch (e) {
+    if (e.code === Code.NOT_FOUND) {
+      const resource: Resource<InfraMachineConfigSpec> = {
+        metadata,
+        spec: {}
+      };
+
+      modify(resource);
+
+      await ResourceService.Create<Resource<InfraMachineConfigSpec>>(resource, withRuntime(Runtime.Omni));
+    }
+  }
+}
+
+export enum MachineFilterOption {
+  Manual = "manual",
+  Unaccepted = "unaccepted",
+  Provisioned = "provisioned",
+  PXE = "pxe",
+};
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 28dd18cd..7d4fe3f0 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -20,6 +20,7 @@ import OmniSettings from "@/views/omni/Settings/Settings.vue";
 import Authenticate from "@/views/omni/Auth/Authenticate.vue";
 import OmniMachineClasses from "@/views/omni/MachineClasses/MachineClasses.vue";
 import OmniMachineClass from "@/views/omni/MachineClasses/MachineClass.vue";
+import OmniMachinesPending from "@/views/omni/Machines/MachinesPending.vue";
 import OmniBackupStorageSettings from "@/views/omni/Settings/BackupStorage.vue";
 import OIDC from "@/views/omni/Auth/OIDC.vue";
 
@@ -72,6 +73,8 @@ import UserCreate from "@/views/omni/Modals/UserCreate.vue";
 import RoleEdit from "@/views/omni/Modals/RoleEdit.vue";
 import ServiceAccountCreate from "@/views/omni/Modals/ServiceAccountCreate.vue";
 import ServiceAccountRenew from "@/views/omni/Modals/ServiceAccountRenew.vue";
+import MachineAccept from "@/views/omni/Modals/MachineAccept.vue";
+import MachineReject from "@/views/omni/Modals/MachineReject.vue";
 
 import { current } from "@/context";
 import { authGuard } from "@auth0/auth0-vue";
@@ -79,13 +82,17 @@ import { AuthType, authType } from "@/methods";
 import { getAuthCookies, isAuthorized } from "@/methods/key";
 import { refreshTitle } from "@/methods/title";
 import { loadCurrentUser } from "@/methods/auth";
+import { MachineFilterOption } from "@/methods/machine";
 
 export const FrontendAuthFlow = "frontend";
 
 const withPrefix = (prefix: string, routes: RouteRecordRaw[], meta?: Record<string, any>) =>
   routes.map((route) => {
-    if (meta && !route.meta) {
-      route.meta = meta;
+    if (meta) {
+      route.meta = {
+        ...route.meta,
+        ...meta,
+      }
     }
 
     if (!route.beforeEnter) {
@@ -207,6 +214,35 @@ const routes: RouteRecordRaw[] = [
       name: "Machines",
       component:  OmniMachines,
     },
+    {
+      path: "/machines/manual",
+      name: "MachinesManual",
+      component: OmniMachines,
+      props: {
+        filter: MachineFilterOption.Manual,
+      },
+    },
+    {
+      path: "/machines/provisioned",
+      name: "MachinesProvisioned",
+      component: OmniMachines,
+      props: {
+        filter: MachineFilterOption.Provisioned,
+      },
+    },
+    {
+      path: "/machines/pxe",
+      name: "MachinesPXE",
+      component: OmniMachines,
+      props: {
+        filter: MachineFilterOption.PXE,
+      },
+    },
+    {
+      path: "/machines/pending",
+      name: "MachinesPending",
+      component: OmniMachinesPending,
+    },
     {
       path: "/machine-classes",
       name: "MachineClasses",
@@ -458,6 +494,8 @@ const modals = {
   serviceAccountCreate: ServiceAccountCreate,
   serviceAccountRenew: ServiceAccountRenew,
   roleEdit: RoleEdit,
+  machineAccept: MachineAccept,
+  machineReject: MachineReject,
   updateExtensions: UpdateExtensions,
 };
 
diff --git a/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue b/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue
index 6a9e7f18..c30b9b0c 100644
--- a/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue
+++ b/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue
@@ -9,7 +9,7 @@ included in the LICENSE file.
     <div class="w-5 pointer-events-none"/>
     <div class="flex-1 grid grid-cols-4 -mr-3 items-center" @click="openNodeInfo">
       <div class="col-span-2 flex items-center gap-2">
-        <t-icon :icon="Object.keys(machine.spec.provision_status ?? {}).length ? 'cloud-connection' : 'server'" class="w-4 h-4 ml-2"/>
+        <t-icon :icon="icon" class="w-4 h-4 ml-2"/>
         <router-link :to="{ name: 'NodeOverview', params: { cluster: clusterName, machine: machine.metadata.id }}" class="list-item-link truncate">
           {{ nodeName }}
         </router-link>
@@ -37,7 +37,7 @@ included in the LICENSE file.
 </template>
 
 <script setup lang="ts">
-import { LabelHostname, LabelCluster, MachineLocked, LabelWorkerRole, UpdateLocked } from "@/api/resources";
+import { LabelHostname, LabelCluster, MachineLocked, LabelWorkerRole, UpdateLocked, LabelIsManagedByStaticInfraProvider } from "@/api/resources";
 import { useRouter } from "vue-router";
 import { computed, toRefs } from "vue";
 import { Resource } from "@/api/grpc";
@@ -61,6 +61,14 @@ const props = defineProps<{
 
 const { machine, machineSet } = toRefs(props);
 
+const icon = computed(() => {
+  if (machine.value.metadata.labels?.[LabelIsManagedByStaticInfraProvider] !== undefined) {
+    return "server-network";
+  }
+
+  return Object.keys(machine.value.spec.provision_status ?? {}).length ? "cloud-connection" : "server";
+});
+
 const locked = computed(() => {
   return machine.value?.metadata?.annotations?.[MachineLocked] !== undefined;
 });
diff --git a/frontend/src/views/omni/ItemLabels/ItemLabels.vue b/frontend/src/views/omni/ItemLabels/ItemLabels.vue
index f5d8aa1f..a185a4e6 100644
--- a/frontend/src/views/omni/ItemLabels/ItemLabels.vue
+++ b/frontend/src/views/omni/ItemLabels/ItemLabels.vue
@@ -36,6 +36,7 @@ const { resource } = toRefs(props);
 defineEmits(['filterLabel']);
 
 const labelOrder = {
+  "is-managed-by-static-infra-provider": -1,
   "machine-request-set": -1,
   "no-manual-allocation": -1,
   "machine-request": -1,
diff --git a/frontend/src/views/omni/Machines/MachineTabs.vue b/frontend/src/views/omni/Machines/MachineTabs.vue
new file mode 100644
index 00000000..ddead399
--- /dev/null
+++ b/frontend/src/views/omni/Machines/MachineTabs.vue
@@ -0,0 +1,51 @@
+<!--
+Copyright (c) 2024 Sidero Labs, Inc.
+
+Use of this software is governed by the Business Source License
+included in the LICENSE file.
+-->
+<template>
+  <tabs-header class="border-b border-naturals-N4 pb-3.5 mb-6">
+    <tab-button is="router-link"
+      v-for="route in routes"
+      :key="route.name"
+      :to="route.to"
+      :selected="$route.name === route.to.name"
+    >
+      {{ route.name }}
+    </tab-button>
+  </tabs-header>
+  <router-view name="inner"/>
+</template>
+
+<script setup lang="ts">
+import TabsHeader from "@/components/common/Tabs/TabsHeader.vue";
+import TabButton from "@/components/common/Tabs/TabButton.vue";
+import { RouteLocationRaw } from "vue-router";
+import { computed } from "vue";
+
+const routes = computed((): {name: string, to: RouteLocationRaw }[] => {
+  return [
+    {
+      name: "All",
+      to: { name: "Machines" },
+    },
+    {
+      name: "Manual",
+      to: { name: "MachinesManual" },
+    },
+    {
+      name: "Autoprovisioned",
+      to: { name: "MachinesProvisioned" },
+    },
+    {
+      name: "PXE Booted",
+      to: { name: "MachinesPXE" },
+    },
+    {
+      name: "Pending",
+      to: { name: "MachinesPending" },
+    },
+  ];
+});
+</script>
diff --git a/frontend/src/views/omni/Machines/Machines.vue b/frontend/src/views/omni/Machines/Machines.vue
index 990e20f1..21c746fd 100644
--- a/frontend/src/views/omni/Machines/Machines.vue
+++ b/frontend/src/views/omni/Machines/Machines.vue
@@ -15,7 +15,7 @@ included in the LICENSE file.
       >
       <template #header="{ itemsCount, filtered }">
         <div class="flex gap-4">
-          <page-header title="Machines">
+          <page-header title="Machines" v-if="!filter">
             <div class="flex gap-6 items-center">
               <stats-item pluralized-text="Machine" :count="itemsCount" icon="nodes" :text="filtered ? ' Found' : ' Total'"/>
             </div>
@@ -28,7 +28,11 @@ included in the LICENSE file.
               </template>
             </watch>
           </page-header>
+          <page-header title="Manually Joined Machines" v-else-if="filter === MachineFilterOption.Manual"/>
+          <page-header title="Machines Provisioned by the Infra Providers" v-else-if="filter === MachineFilterOption.Provisioned"/>
+          <page-header title="Machines Managed by the Bare Metal Providers" v-else-if="filter === MachineFilterOption.PXE"/>
         </div>
+        <machine-tabs/>
       </template>
       <template #input>
         <labels-input :completions-resource="{
@@ -49,7 +53,7 @@ included in the LICENSE file.
 
 <script setup lang="ts">
 import { Runtime } from "@/api/common/omni.pb";
-import { MetricsNamespace, MachineStatusLinkType, LabelsCompletionType, VirtualNamespace, MachineStatusType, MachineStatusMetricsType, MachineStatusMetricsID, EphemeralNamespace } from "@/api/resources";
+import { MetricsNamespace, MachineStatusLinkType, LabelsCompletionType, VirtualNamespace, MachineStatusType, MachineStatusMetricsType, MachineStatusMetricsID, EphemeralNamespace, LabelIsManagedByStaticInfraProvider, LabelMachineRequest } from "@/api/resources";
 import { itemID, WatchOptions } from "@/api/watch";
 
 import TList from "@/components/common/List/TList.vue";
@@ -57,20 +61,43 @@ import MachineItem from "@/views/omni/Machines/MachineItem.vue";
 import PageHeader from "@/components/common/PageHeader.vue";
 import { computed, ref } from "vue";
 import LabelsInput from "@/views/omni/ItemLabels/LabelsInput.vue";
-import { Label, addLabel, selectors } from "@/methods/labels";
+import { Label, addLabel, selectors as labelsToSelectors } from "@/methods/labels";
 import Watch from "@/components/common/Watch/Watch.vue";
 import { Resource } from "@/api/grpc";
 import { MachineStatusMetricsSpec } from "@/api/omni/specs/omni.pb";
 import StatsItem from "@/components/common/Stats/StatsItem.vue";
+import { MachineFilterOption } from "@/methods/machine";
+import { toRefs } from "vue";
+import MachineTabs from "./MachineTabs.vue";
+
+const props = defineProps<{
+  filter?: MachineFilterOption,
+}>();
+
+const { filter } = toRefs(props);
 
 const watchOpts = computed<WatchOptions>(() => {
+  const selectors = labelsToSelectors(filterLabels.value) ?? [];
+
+  switch (filter.value) {
+    case MachineFilterOption.Manual:
+      selectors.push(`!${LabelMachineRequest}`, `!${LabelIsManagedByStaticInfraProvider}`);
+      break;
+    case MachineFilterOption.Provisioned:
+      selectors.push(`${LabelMachineRequest}`);
+      break;
+    case MachineFilterOption.PXE:
+      selectors.push(`${LabelIsManagedByStaticInfraProvider}`);
+      break;
+  }
+
   return {
     runtime: Runtime.Omni,
     resource: {
       type: MachineStatusLinkType,
       namespace: MetricsNamespace,
     },
-    selectors: selectors(filterLabels.value),
+    selectors,
   }
 });
 
diff --git a/frontend/src/views/omni/Machines/MachinesPending.vue b/frontend/src/views/omni/Machines/MachinesPending.vue
new file mode 100644
index 00000000..61febba8
--- /dev/null
+++ b/frontend/src/views/omni/Machines/MachinesPending.vue
@@ -0,0 +1,92 @@
+<!--
+Copyright (c) 2024 Sidero Labs, Inc.
+
+Use of this software is governed by the Business Source License
+included in the LICENSE file.
+-->
+<template>
+  <div>
+    <t-list
+      :opts="watchOpts"
+      search
+      pagination
+      >
+      <template #header="{ itemsCount, filtered }">
+        <div class="flex gap-4">
+          <page-header title="Pending Machines">
+            <stats-item pluralized-text="Machine" :count="itemsCount" icon="nodes" :text="filtered ? ' Found' : ' Total'"/>
+          </page-header>
+        </div>
+        <machine-tabs/>
+      </template>
+      <template #default="{ items, searchQuery }">
+        <div class="header">
+          <p>ID</p>
+          <p>Provider</p>
+        </div>
+        <t-list-item v-for="item in items" :key="itemID(item)">
+          <div class="flex gap-2 items-center">
+            <div class="grid grid-cols-2 flex-1 gap-2">
+              <WordHighlighter
+                  :query="searchQuery"
+                  :textToHighlight="item.metadata.id"
+                  highlightClass="bg-naturals-N14"
+              />
+              <span>{{ item.metadata.labels?.[LabelInfraProviderID] }}</span>
+            </div>
+            <t-button icon="check" type="highlighted" @click="() => acceptMachine(item)">Accept</t-button>
+            <t-button icon="close" @click="() => rejectMachine(item)">Reject</t-button>
+          </div>
+        </t-list-item>
+      </template>
+    </t-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Runtime } from "@/api/common/omni.pb";
+import { InfraMachineType, InfraProviderNamespace, LabelMachinePendingAccept, LabelInfraProviderID } from "@/api/resources";
+import { itemID, WatchOptions } from "@/api/watch";
+
+import TList from "@/components/common/List/TList.vue";
+import PageHeader from "@/components/common/PageHeader.vue";
+import { computed } from "vue";
+import StatsItem from "@/components/common/Stats/StatsItem.vue";
+import TListItem from "@/components/common/List/TListItem.vue";
+import { Resource } from "@/api/grpc";
+import TButton from "@/components/common/Button/TButton.vue";
+import WordHighlighter from "vue-word-highlighter";
+import { useRouter } from "vue-router";
+import MachineTabs from "./MachineTabs.vue";
+
+const router = useRouter();
+
+const watchOpts = computed<WatchOptions>(() => {
+  return {
+    runtime: Runtime.Omni,
+    resource: {
+      type: InfraMachineType,
+      namespace: InfraProviderNamespace,
+    },
+    selectors: [`${LabelMachinePendingAccept}`],
+  };
+});
+
+const acceptMachine = (item: Resource) => {
+  router.push({
+    query: { modal: "machineAccept", machine: item.metadata.id },
+  });
+};
+
+const rejectMachine = (item: Resource) => {
+  router.push({
+    query: { modal: "machineReject", machine: item.metadata.id },
+  });
+};
+</script>
+
+<style scoped>
+.header {
+  @apply grid grid-cols-2 p-2 gap-2 bg-naturals-N2 pr-56 pl-3 text-xs text-naturals-N13;
+}
+</style>
diff --git a/frontend/src/views/omni/Modals/MachineAccept.vue b/frontend/src/views/omni/Modals/MachineAccept.vue
new file mode 100644
index 00000000..e583d910
--- /dev/null
+++ b/frontend/src/views/omni/Modals/MachineAccept.vue
@@ -0,0 +1,68 @@
+<!--
+Copyright (c) 2024 Sidero Labs, Inc.
+
+Use of this software is governed by the Business Source License
+included in the LICENSE file.
+-->
+<template>
+  <div class="modal-window">
+    <div class="heading">
+      <h3 class="text-base text-naturals-N14">
+        Accept the Machine {{ $route.query.machine }} ?
+      </h3>
+      <close-button @click="close"/>
+    </div>
+
+    <p class="text-xs py-2">Please confirm the action.</p>
+
+    <div class="flex justify-end gap-4 mt-8">
+      <t-button @click="reject" class="w-32 h-9" icon="check" iconPosition="left">
+        Accept
+      </t-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+import { showError, showSuccess } from "@/notification";
+
+import CloseButton from "@/views/omni/Modals/CloseButton.vue";
+import TButton from "@/components/common/Button/TButton.vue";
+import { acceptMachine } from "@/methods/machine";
+
+const router = useRouter();
+const route = useRoute();
+
+let closed = false;
+
+const close = () => {
+  if (closed) {
+    return;
+  }
+
+  closed = true;
+
+  router.go(-1);
+};
+
+const reject = async () => {
+  try {
+    await acceptMachine(route.query.machine as string);
+  } catch (e) {
+    showError(`Failed to Accept the Machine ${route.query.machine}`, e.message)
+  }
+
+  close();
+
+  showSuccess(
+    `The Machine ${route.query.machine} was Accepted`,
+  );
+}
+</script>
+
+<style scoped>
+.heading {
+  @apply flex justify-between items-center mb-5 text-xl text-naturals-N14;
+}
+</style>
diff --git a/frontend/src/views/omni/Modals/MachineReject.vue b/frontend/src/views/omni/Modals/MachineReject.vue
new file mode 100644
index 00000000..b14b107d
--- /dev/null
+++ b/frontend/src/views/omni/Modals/MachineReject.vue
@@ -0,0 +1,69 @@
+<!--
+Copyright (c) 2024 Sidero Labs, Inc.
+
+Use of this software is governed by the Business Source License
+included in the LICENSE file.
+-->
+<template>
+  <div class="modal-window">
+    <div class="heading">
+      <h3 class="text-base text-naturals-N14">
+        Reject the Machine {{ $route.query.machine }} ?
+      </h3>
+      <close-button @click="close"/>
+    </div>
+
+    <p class="text-xs py-2">Please confirm the action.</p>
+    <p class="text-xs py-2 text-primary-P2">Rejected machine will not appear in the UI anymore. You can use omnictl to accept it again.</p>
+
+    <div class="flex justify-end gap-4 mt-8">
+      <t-button @click="reject" class="w-32 h-9" icon="close" iconPosition="left">
+        Reject
+      </t-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+import { showError, showSuccess } from "@/notification";
+
+import CloseButton from "@/views/omni/Modals/CloseButton.vue";
+import TButton from "@/components/common/Button/TButton.vue";
+import { rejectMachine } from "@/methods/machine";
+
+const router = useRouter();
+const route = useRoute();
+
+let closed = false;
+
+const close = () => {
+  if (closed) {
+    return;
+  }
+
+  closed = true;
+
+  router.go(-1);
+};
+
+const reject = async () => {
+  try {
+    await rejectMachine(route.query.machine as string);
+  } catch (e) {
+    showError(`Failed to Reject the Machine ${route.query.machine}`, e.message)
+  }
+
+  close();
+
+  showSuccess(
+    `The Machine ${route.query.machine} was Rejected`,
+  );
+}
+</script>
+
+<style scoped>
+.heading {
+  @apply flex justify-between items-center mb-5 text-xl text-naturals-N14;
+}
+</style>
diff --git a/internal/backend/runtime/omni/controllers/omni/cluster_machine_status.go b/internal/backend/runtime/omni/controllers/omni/cluster_machine_status.go
index bed60a24..db0f2ef8 100644
--- a/internal/backend/runtime/omni/controllers/omni/cluster_machine_status.go
+++ b/internal/backend/runtime/omni/controllers/omni/cluster_machine_status.go
@@ -92,6 +92,12 @@ func NewClusterMachineStatusController() *ClusterMachineStatusController {
 					return err
 				}
 
+				if _, ok := machineStatus.Metadata().Labels().Get(omni.LabelIsManagedByStaticInfraProvider); ok {
+					clusterMachineStatus.Metadata().Labels().Set(omni.LabelIsManagedByStaticInfraProvider, "")
+				} else {
+					clusterMachineStatus.Metadata().Labels().Delete(omni.LabelIsManagedByStaticInfraProvider)
+				}
+
 				if err = updateMachineProvisionStatus(ctx, r, machineStatus, cmsVal); err != nil {
 					return err
 				}
@@ -255,13 +261,12 @@ func NewClusterMachineStatusController() *ClusterMachineStatusController {
 
 func updateMachineProvisionStatus(ctx context.Context, r controller.Reader, machineStatus *omni.MachineStatus, cmsVal *specs.ClusterMachineStatusSpec) error {
 	machineRequestID, ok := machineStatus.Metadata().Labels().Get(omni.LabelMachineRequest)
-	if !ok {
-		cmsVal.ProvisionStatus = nil
-	}
 
 	cmsVal.ProvisionStatus = &specs.ClusterMachineStatusSpec_ProvisionStatus{}
 
-	cmsVal.ProvisionStatus.RequestId = machineRequestID
+	if ok {
+		cmsVal.ProvisionStatus.RequestId = machineRequestID
+	}
 
 	machineRequestStatus, err := safe.ReaderGetByID[*infra.MachineRequestStatus](ctx, r, machineRequestID)
 	if err != nil && !state.IsNotFoundError(err) {
diff --git a/internal/backend/runtime/omni/controllers/omni/infra_machine.go b/internal/backend/runtime/omni/controllers/omni/infra_machine.go
index 337d740b..d50ddef0 100644
--- a/internal/backend/runtime/omni/controllers/omni/infra_machine.go
+++ b/internal/backend/runtime/omni/controllers/omni/infra_machine.go
@@ -25,6 +25,7 @@ import (
 	"github.com/siderolabs/omni/client/pkg/omni/resources/infra"
 	"github.com/siderolabs/omni/client/pkg/omni/resources/omni"
 	"github.com/siderolabs/omni/client/pkg/omni/resources/siderolink"
+	"github.com/siderolabs/omni/internal/backend/runtime/omni/controllers/helpers"
 )
 
 // InfraMachineControllerName is the name of the controller.
@@ -164,13 +165,18 @@ func (h *infraMachineControllerHelper) finalizerRemovalExtraOutput(ctx context.C
 		return err
 	}
 
+	_, err = helpers.HandleInput[*omni.InfraMachineConfig](ctx, r, InfraMachineControllerName, link)
+	if err != nil {
+		return err
+	}
+
 	return nil
 }
 
 // applyInfraMachineConfig applies the user-managed configuration from the omni.InfraMachineConfig resource into the infra.Machine.
-func (h *infraMachineControllerHelper) applyInfraMachineConfig(ctx context.Context, r controller.Reader, link *siderolink.Link, infraMachine *infra.Machine) error {
-	config, err := safe.ReaderGetByID[*omni.InfraMachineConfig](ctx, r, link.Metadata().ID())
-	if err != nil && !state.IsNotFoundError(err) {
+func (h *infraMachineControllerHelper) applyInfraMachineConfig(ctx context.Context, r controller.ReaderWriter, link *siderolink.Link, infraMachine *infra.Machine) error {
+	config, err := helpers.HandleInput[*omni.InfraMachineConfig](ctx, r, InfraMachineControllerName, link)
+	if err != nil {
 		return err
 	}
 
@@ -180,9 +186,13 @@ func (h *infraMachineControllerHelper) applyInfraMachineConfig(ctx context.Conte
 	infraMachine.TypedSpec().Value.PreferredPowerState = defaultPreferredPowerState
 	infraMachine.TypedSpec().Value.ExtraKernelArgs = ""
 
+	pendingAccept := config == nil
+
 	if config != nil { // apply user configuration: acceptance, preferred power state, extra kernel args
 		infraMachine.TypedSpec().Value.AcceptanceStatus = config.TypedSpec().Value.AcceptanceStatus
 
+		pendingAccept = infraMachine.TypedSpec().Value.AcceptanceStatus == specs.InfraMachineConfigSpec_PENDING
+
 		switch config.TypedSpec().Value.PowerState {
 		case specs.InfraMachineConfigSpec_POWER_STATE_OFF:
 			infraMachine.TypedSpec().Value.PreferredPowerState = specs.InfraMachineSpec_POWER_STATE_OFF
@@ -197,6 +207,12 @@ func (h *infraMachineControllerHelper) applyInfraMachineConfig(ctx context.Conte
 		infraMachine.TypedSpec().Value.ExtraKernelArgs = config.TypedSpec().Value.ExtraKernelArgs
 	}
 
+	if pendingAccept {
+		infraMachine.Metadata().Labels().Set(omni.LabelMachinePendingAccept, "")
+	} else {
+		infraMachine.Metadata().Labels().Delete(omni.LabelMachinePendingAccept)
+	}
+
 	return nil
 }
 
diff --git a/internal/version/data/tag b/internal/version/data/tag
index a0438f46..5c9207d6 100644
--- a/internal/version/data/tag
+++ b/internal/version/data/tag
@@ -1 +1 @@
-v0.45.0-beta.0
+v0.45.0-beta.0
\ No newline at end of file