feat: add rancher k3k addon UI page (#1137)

* feat: add k3k addon UI Signed-off-by: Andy Lee <andy.lee@suse.com> * feat: add rancher-k3k addon UI Signed-off-by: Andy Lee <andy.lee@suse.com> * refactor: copilot review Signed-off-by: Andy Lee <andy.lee@suse.com> * refactor: copilot review Signed-off-by: Andy Lee <andy.lee@suse.com> * refactor: remove k3k edit page Signed-off-by: Andy Lee <andy.lee@suse.com> * refactor: k3k addon description Signed-off-by: Andy Lee <andy.lee@suse.com> --------- Signed-off-by: Andy Lee <andy.lee@suse.com>
2026-10-04 05:06:05 +08:00 · 2026-09-14 15:46:14 +08:00
parent cba37194b6
commit 50b4cf5248
5 changed files with 360 additions and 7 deletions
@@ -0,0 +1,164 @@
+<script>
+import merge from 'lodash/merge';
+import jsyaml from 'js-yaml';
+import { mapGetters } from 'vuex';
+import { Card } from '@components/Card';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import AsyncButton from '@shell/components/AsyncButton';
+import { escapeHtml } from '@shell/utils/string';
+
+const DEFAULT_VALUE = {
+  rancher: {
+    hostname:          '',
+    version:           '',
+    bootstrapPassword: '',
+  },
+};
+
+export default {
+  name: 'HarvesterEnableK3k',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton,
+    Card,
+    LabeledInput,
+  },
+
+  props: {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    const addon = this.resources[0];
+    let valuesContentJson;
+
+    try {
+      valuesContentJson = merge({}, DEFAULT_VALUE, jsyaml.load(addon.spec.valuesContent));
+    } catch (e) {
+      valuesContentJson = merge({}, DEFAULT_VALUE);
+    }
+
+    return { valuesContentJson };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    buttonDisabled() {
+      const { rancher } = this.valuesContentJson;
+
+      return !(rancher?.hostname || '').trim() || !(rancher?.version || '').trim() || !(rancher?.bootstrapPassword || '').trim();
+    }
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    async enable(buttonCb) {
+      const addon = this.resources[0];
+
+      try {
+        addon.spec.valuesContent = jsyaml.dump(this.valuesContentJson);
+        addon.spec.enabled = true;
+        await addon.save();
+        buttonCb(true);
+        this.close();
+      } catch (err) {
+        addon.spec.enabled = false;
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('generic.notification.title.error', { name: escapeHtml(addon.metadata.name) }),
+          err,
+        }, { root: true });
+        buttonCb(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card :show-highlight-border="false">
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.addons.rancherK3k.enable.title')"
+        class="text-default-text"
+      />
+    </template>
+
+    <template #body>
+      <div class="body">
+        <div class="row mb-15">
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="valuesContentJson.rancher.hostname"
+              :required="true"
+              :label="t('harvester.addons.rancherK3k.hostname')"
+              placeholder="rancher.$vip.nip.io"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledInput
+              v-model:value="valuesContentJson.rancher.version"
+              :required="true"
+              :label="t('harvester.addons.rancherK3k.version')"
+              placeholder="v1.14.0"
+            />
+          </div>
+        </div>
+        <div class="row mb-15">
+          <div class="col span-12">
+            <LabeledInput
+              v-model:value="valuesContentJson.rancher.bootstrapPassword"
+              :required="true"
+              type="password"
+              :label="t('harvester.addons.rancherK3k.password')"
+              :tooltip="t('harvester.addons.rancherK3k.passwordTooltip')"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #actions>
+      <div class="buttons actions">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="enable"
+          :disabled="buttonDisabled"
+          @click="enable"
+        />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.body {
+  display: flex;
+  flex-direction: column;
+  min-width: 400px;
+}
+
+.actions {
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>