feat: add dedicated patch pages for machines and cluster machines

Show all machine related config patches as separate tabs on Machines
and ClusterMachine pages.

Fixes: #32

Signed-off-by: Artem Chernyshev <artem.chernyshev@talos-systems.com>

.github/workflows/ci.yaml

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-21T10:07:53Z by kres 0290180.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 name: default
 concurrency:

.github/workflows/e2e-backups-cron.yaml

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-21T10:07:53Z by kres 0290180.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 name: e2e-backups-cron
 concurrency:

.github/workflows/e2e-scaling-cron.yaml

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-21T10:07:53Z by kres 0290180.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 name: e2e-scaling-cron
 concurrency:

.github/workflows/e2e-short-cron.yaml

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-21T10:07:53Z by kres 0290180.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 name: e2e-short-cron
 concurrency:

.github/workflows/e2e-templates-cron.yaml

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-21T10:07:53Z by kres 0290180.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 name: e2e-templates-cron
 concurrency:

.github/workflows/e2e-upgrades-cron.yaml

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-21T10:07:53Z by kres 0290180.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 name: e2e-upgrades-cron
 concurrency:

.golangci.yml

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-20T15:50:30Z by kres 760d739-dirty.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 # options for analysis running
 run:

Dockerfile

@@ -2,7 +2,7 @@
 
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-22T17:52:27Z by kres 5fac898-dirty.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 ARG JS_TOOLCHAIN
 ARG TOOLCHAIN

Makefile

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-22T17:52:27Z by kres 5fac898-dirty.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 # common variables
 

client/.golangci.yml

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-05-20T15:50:30Z by kres 760d739-dirty.
+# Generated on 2024-05-22T16:55:28Z by kres 5fac898-dirty.
 
 # options for analysis running
 run:

frontend/src/router/index.ts

@@ -12,6 +12,8 @@ import OmniClusterCreate from "@/views/omni/Clusters/Management/ClusterCreate.vu
 import OmniClusterScale from "@/views/omni/Clusters/Management/ClusterScale.vue";
 import OmniMachines from "@/views/omni/Machines/Machines.vue";
 import OmniMachineLogs from "@/views/omni/Machines/MachineLogs.vue";
+import OmniMachinePatches from "@/views/omni/Machines/MachinePatches.vue";
+import OmniMachine from "@/views/omni/Machines/Machine.vue";
 import OmniUsers from "@/views/omni/Users/Users.vue";
 import OmniSettings from "@/views/omni/Settings/Settings.vue";
 import Authenticate from "@/views/omni/Auth/Authenticate.vue";
@@ -31,7 +33,8 @@ import NodeLogs from "@/views/cluster/Nodes/NodeLogs.vue";
 import NodeConfig from "@/views/cluster/Nodes/NodeConfig.vue";
 import NodeMounts from "@/views/cluster/Nodes/NodeMounts.vue";
 import NodeExtensions from "@/views/cluster/Nodes/NodeExtensions.vue";
-import ConfigPatches from "@/views/cluster/Config/Patches.vue";
+import NodePatches from "@/views/cluster/Nodes/NodePatches.vue";
+import ClusterPatches from "@/views/cluster/Config/ClusterPatches.vue";
 import PatchEdit from "@/views/cluster/Config/PatchEdit.vue";
 import KubernetesManifestSync from "@/views/cluster/Manifest/Sync.vue";
 import NodeDetails from "@/views/cluster/Nodes/NodeDetails.vue";
@@ -217,16 +220,6 @@ const routes: RouteRecordRaw[] = [
         edit: true,
       }
     },
-    {
-      path: "/machine/:machine/logs",
-      name: "MachineLogs",
-      component:  OmniMachineLogs,
-    },
-    {
-      path: "/machine/:machine/patches",
-      name: "MachineConfigPatches",
-      component: ConfigPatches,
-    },
     {
       path: "/machine/:machine/patches/:patch",
       name: "MachinePatchEdit",
@@ -256,6 +249,30 @@ const routes: RouteRecordRaw[] = [
         },
       ]
     },
+    {
+      path: "/machine/:machine",
+      name: "Machine",
+      component: OmniMachine,
+      redirect: {
+        name: "MachineLogs",
+      },
+      children: [
+        {
+          path: "logs",
+          name: "MachineLogs",
+          components: {
+            inner: OmniMachineLogs,
+          }
+        },
+        {
+          path: "patches",
+          name: "MachineConfigPatches",
+          components: {
+            inner: OmniMachinePatches,
+          }
+        },
+      ]
+    }
   ], { sidebar: OmniSidebar }),
   ...withPrefix("/cluster/:cluster", [
     {
@@ -295,7 +312,7 @@ const routes: RouteRecordRaw[] = [
       name: "ClusterConfigPatches",
       component: ClusterScoped,
       props: {
-        inner: ConfigPatches,
+        inner: ClusterPatches,
       },
     },
     {
@@ -356,6 +373,13 @@ const routes: RouteRecordRaw[] = [
               nodeDetails: NodeConfig,
             },
           },
+          {
+            path: "patches",
+            name: "NodePatches",
+            components: {
+              nodeDetails: NodePatches,
+            },
+          },
           {
             path: "mounts",
             name: "NodeMounts",

frontend/src/views/cluster/Config/ClusterPatches.vue

@@ -0,0 +1,26 @@
+<!--
+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="flex flex-col gap-2 overflow-y-auto">
+    <div class="flex items-start">
+      <page-header class="flex-1" :title="`Cluster ${$route.params.cluster} Config Patches`"/>
+    </div>
+    <patches :cluster="currentCluster"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Resource } from "@/api/grpc";
+import { ClusterSpec } from "@/api/omni/specs/omni.pb";
+
+import Patches from "./Patches.vue";
+import PageHeader from "@/components/common/PageHeader.vue";
+
+defineProps<{
+  currentCluster?: Resource<ClusterSpec>,
+}>();
+</script>

frontend/src/views/cluster/Config/PatchEdit.vue

@@ -21,10 +21,10 @@ included in the LICENSE file.
         />
         <t-select-list
           @checkedValue="setPatchType"
-          v-if="$route.params.cluster"
+          v-if="patchTypes"
           title="Patch Target"
-          :defaultValue="patchTypeCluster"
-          :values="[patchTypeCluster].concat(machineSetTitles).concat(machines)"
+          :defaultValue="patchTypes[0]"
+          :values="patchTypes"
         />
         <popper :show="weight < 100 || weight > 900" placement="bottom-start">
           <t-input type="number"
@@ -91,8 +91,8 @@ import {
   ConfigPatchName,
   ConfigPatchDescription,
   MachineSetType,
+  MachineStatusType,
 } from "@/api/resources";
-import { controlPlaneMachineSetId } from "@/methods/cluster";
 import { showError } from "@/notification";
 import TSpinner from "@/components/common/Spinner/TSpinner.vue";
 import Watch from "../../../api/watch";
@@ -135,14 +135,36 @@ const weight = ref(0);
 const patchName = ref("User defined patch");
 const patchDescription = ref("");
 
-const patchTypeCluster = "Cluster";
+enum PatchType {
+  Cluster = "Cluster",
+  ClusterMachine = "Cluster Machine",
+  Machine = "Machine"
+}
 
 let codeEditor: monaco.editor.IStandaloneCodeEditor | undefined;
 
 const editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
   codeEditor = editor;
 };
 
+const machine = ref<Resource>();
+const machineWatch = new Watch(machine);
+
+machineWatch.setup(computed(() => {
+  if (!route.params.machine) {
+    return;
+  }
+
+  return {
+    resource: {
+      type: MachineStatusType,
+      id: route.params.machine as string,
+      namespace: DefaultNamespace,
+    },
+    runtime: Runtime.Omni,
+  }
+}));
+
 const nodeIDMap: Record<string, string> = {};
 const machineSetIDMap: Record<string, string> = {};
 const patchToCreate: Resource<ConfigPatchSpec> = {
@@ -200,25 +222,10 @@ const checkEncryption = (model: monaco.editor.ITextModel, tokens: monaco.Token[]
   return markers;
 }
 
-const setPatchType = (value: string) => {
-  const machineID = nodeIDMap[value];
-  const machineSetID = machineSetIDMap[value];
+let selectedPatchType: string;
 
-  patchToCreate.metadata.labels = {};
-
-  if (value == patchTypeCluster) {
-    patchToCreate.metadata.labels[LabelMachineSet] = controlPlaneMachineSetId(route.params.cluster as string);
-
-    return;
-  }
-
-  if (machineSetID) {
-    patchToCreate.metadata.labels[LabelMachineSet] = machineSetID;
-
-    return;
-  }
-
-  patchToCreate.metadata.labels[LabelClusterMachine] = machineID;
+const setPatchType = (value: string) => {
+  selectedPatchType = value;
 };
 
 const machineSets: Ref<Resource<MachineSetSpec>[]> = ref([]);
@@ -329,6 +336,18 @@ watch(() => route.params.patch, updatePatchWatchOptions);
 loadPatch();
 watch(patch, loadPatch);
 
+const patchTypes = computed(() => {
+  if (route.params.cluster) {
+    return [PatchType.Cluster as string].concat(machineSetTitles.value).concat(machines.value)
+  }
+
+  if (machine.value?.metadata.labels?.[LabelCluster]) {
+    return [PatchType.Machine, PatchType.ClusterMachine];
+  }
+
+  return undefined;
+});
+
 enum State {
   Unknown = 0,
   Exists = 1,
@@ -419,6 +438,39 @@ const ready = computed(() => {
 
 const saving = ref(false);
 
+const getPatchLabels = () => {
+  const patchType = selectedPatchType ?? patchTypes.value?.[0];
+
+  if (!patchType || patchType === PatchType.Machine) {
+    return {
+      [LabelMachine]: route.params.machine as string,
+    }
+  }
+
+  const cluster = route.params.cluster ?? machine.value?.metadata.labels?.[LabelCluster];
+  if (!cluster) {
+    throw new Error("failed to determine machine cluster");
+  }
+
+  const labels = {
+    [LabelCluster]: cluster as string,
+  }
+
+  const machineID = nodeIDMap[patchType];
+
+  if (patchType === PatchType.ClusterMachine || machineID) {
+    labels[LabelClusterMachine] = machineID ?? machine.value?.metadata.id!;
+  }
+
+  const machineSetID = machineSetIDMap[patchType];
+
+  if (machineSetID) {
+    labels[LabelMachineSet] = machineSetID;
+  }
+
+  return labels
+}
+
 const saveConfig = async () => {
   const create = (state.value === State.NotExists);
 
@@ -433,18 +485,7 @@ const saveConfig = async () => {
     patchToCreate.spec.data = config.value;
 
     currentPatch = patchToCreate;
-
-    if (!currentPatch.metadata.labels) {
-        currentPatch.metadata.labels = {};
-    }
-
-    if (route.params.cluster) {
-        currentPatch.metadata.labels[LabelCluster] = route.params.cluster as string;
-    } else if (route.params.machine) {
-        currentPatch.metadata.labels[LabelMachine] = route.params.machine as string;
-    } else {
-      throw new Error("failed to determine the owner of the patch from the URI");
-    }
+    currentPatch.metadata.labels = getPatchLabels();
   }
 
   if (!currentPatch) {