feat: add rancher-k3k addon UI

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/edit/harvesterhci.io.addon/k3k.vue

@@ -0,0 +1,155 @@
+<script>
+import merge from 'lodash/merge';
+import jsyaml from 'js-yaml';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+
+const DEFAUL_VALUE = {
+  rancher: {
+    hostname:          '',
+    version:           '',
+    bootstrapPassword: '',
+  },
+};
+
+export default {
+  name:       'EditAddonK3k',
+  components: { LabeledInput, RadioGroup },
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+    registerBeforeHook: {
+      type:     Function,
+      required: true,
+    },
+  },
+
+  data() {
+    let valuesContentJson = {};
+
+    try {
+      valuesContentJson = merge({}, DEFAUL_VALUE, jsyaml.load(this.value.spec.valuesContent));
+    } catch (err) {
+      valuesContentJson = DEFAUL_VALUE;
+
+      this.$store.dispatch('growl/fromError', {
+        title: this.$store.getters['i18n/t']('generic.notification.title.error'),
+        err:   err.data || err,
+      }, { root: true });
+    }
+
+    return { valuesContentJson };
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.willSave, 'willSave');
+    }
+  },
+
+  methods: {
+    willSave() {
+      const errors = [];
+
+      if (!this.value.spec.enabled) {
+        return Promise.resolve();
+      }
+
+      if (!this.valuesContentJson.rancher.hostname) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.addons.rancherK3k.hostname') }, true));
+      }
+
+      if (!this.valuesContentJson.rancher.bootstrapPassword) {
+        errors.push(this.t('validation.required', { key: this.t('harvester.addons.rancherK3k.password') }, true));
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+
+  watch: {
+    valuesContentJson: {
+      handler(neu) {
+        this.value.spec['valuesContent'] = jsyaml.dump(neu);
+      },
+      deep:      true,
+      immediate: true
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-12">
+        <RadioGroup
+          v-model:value="value.spec.enabled"
+          class="mb-20"
+          name="model"
+          :mode="mode"
+          :options="[true,false]"
+          :labels="[t('generic.enabled'), t('generic.disabled')]"
+        />
+      </div>
+    </div>
+
+    <template v-if="value.spec.enabled">
+      <div class="row mb-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="valuesContentJson.rancher.hostname"
+            label-key="harvester.addons.rancherK3k.hostname"
+            :required="true"
+            :mode="mode"
+            placeholder="rancher.$vip.nip.io"
+          />
+        </div>
+
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="valuesContentJson.rancher.version"
+            label-key="harvester.addons.rancherK3k.version"
+            :required="true"
+            :disabled="false"
+          />
+        </div>
+      </div>
+
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="valuesContentJson.rancher.bootstrapPassword"
+            label-key="harvester.addons.rancherK3k.password"
+            :mode="mode"
+            :required="true"
+            type="password"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  :deep() .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>

pkg/harvester/l10n/en-us.yaml

@@ -1,4 +1,4 @@
-wizard:
+advancedSettingswizard:
   create: Create
   next: Proceed
   previous: Back
@@ -1825,6 +1825,7 @@ harvester:
       'harvester-system/pcidevices-controller': pcidevices-controller is an add-on to help discover PCI devices for nodes in your cluster and allow users to prepare devices for PCI Passthrough, for use with Harvester virtual machine and guest clusters.
       'cattle-logging-system/rancher-logging': rancher-logging is an add-on to collect versatile logs, events, and audits from the Harvester cluster and route them to many kinds of servers based on flows.
       'harvester-system/rancher-vcluster': rancher-vcluster deploys a virtual cluster (vcluster) with Rancher installed.
+      'k3k-system/k3k': k3k deploys a k3k virtual cluster with Rancher installed.
       'cattle-monitoring-system/rancher-monitoring': rancher-monitoring is an add-on that collects Harvester cluster and virtual machine metrics and allows you to view the metrics on an embedded dashboard and send alert(s) to remote servers.
       'vm-import-controller': vm-import-controller is an add-on to help migrate virtual machine workloads from other source clusters to an existing Harvester cluster.
       'pcidevices-controller': pcidevices-controller is an add-on to help discover PCI devices for nodes in your cluster and allow users to prepare devices for PCI Passthrough, for use with Harvester virtual machines and guest clusters.
@@ -1832,6 +1833,7 @@ harvester:
       'rancher-logging': rancher-logging is an add-on to collect versatile logs, events, and audits from the Harvester cluster and route them to many kinds of servers based on flows.
       'rancher-monitoring': rancher-monitoring is an add-on to collect Harvester cluster and virtual machine metrics, view them on the embedded dashboard, and send alert(s) to remote servers.
       'rancher-vcluster': rancher-vcluster deploys a virtual cluster (vcluster) with Rancher installed.
+      'k3k': k3k deploys a k3k virtual cluster with Rancher installed.
       'harvester-seeder': harvester-seeder is an add-on that uses IPMI and Redfish to discover hardware information and perform out-of-band operations.
       'harvester-system/harvester-seeder': harvester-seeder is an add-on that uses IPMI and Redfish to discover hardware information and perform out-of-band operations.
       'harvester-csi-driver-lvm': harvester-csi-driver-lvm is an add-on allowing users to create PVC through the LVM with local devices.
@@ -2136,6 +2138,11 @@ harvester:
       hostname: Hostname
       rancherVersion: Rancher Version
       password: Bootstrap Password
+    rancherK3k:
+      accessRancher: Access the Rancher Dashboard
+      hostname: Hostname
+      version: Rancher Version
+      password: Bootstrap Password
     switchFailed: "{action} {name} failed!"
     nvidiaDriverToolkit:
       titles:

pkg/harvester/list/harvesterhci.io.addon.vue

@@ -72,7 +72,7 @@ export default {
           />
 
           <a
-            v-if="scope.row.metadata.name === 'rancher-vcluster' && scope.row.spec.enabled"
+            v-if="['rancher-vcluster', 'k3k'].includes(scope.row.metadata.name) && scope.row.spec.enabled"
             v-tooltip="t('harvester.addons.rancherVcluster.accessRancher')"
             class="ml-5"
             rel="nofollow noopener noreferrer"

pkg/harvester/models/harvesterhci.io.addon.js

@@ -5,12 +5,14 @@ import HarvesterResource from './harvester';
 import { HCI } from '../types';
 
 const HARVESTER_NVIDIA_DRIVER_TOOLKIT = 'harvester-system/nvidia-driver-toolkit';
+const RANCHER_VCLUSTER = 'harvester-system/rancher-vcluster';
+const RANCHER_K3K = 'k3k-system/k3k';
 
 export default class HciAddonConfig extends HarvesterResource {
   get availableActions() {
     const out = super._availableActions;
 
-    if (this.id === 'harvester-system/rancher-vcluster') {
+    if (this.id === RANCHER_VCLUSTER || this.id === RANCHER_K3K) {
       const rancherDashboard = {
         action:  'goToRancher',
         enabled: this.spec.enabled,
@@ -69,18 +71,19 @@ export default class HciAddonConfig extends HarvesterResource {
   }
 
   goToRancher() {
-    const valuesContent = jsyaml.load(this.spec.valuesContent);
-
     window.open(
-      `https://${ valuesContent.hostname }`,
+      this.rancherHostname,
       '_blank',
     );
   }
 
   get rancherHostname() {
-    const valuesContent = jsyaml.load(this.spec.valuesContent);
+    const valuesContent = jsyaml.load(this.spec.valuesContent) || {};
 
-    return `https://${ valuesContent.hostname }`;
+    // rancher-k3k nests the hostname under `rancher`, rancher-vcluster keeps it at the top level
+    const hostname = this.id === RANCHER_K3K ? valuesContent.rancher?.hostname : valuesContent.hostname;
+
+    return `https://${ hostname }`;
   }
 
   get stateColor() {