mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-10-01 03:36:04 +08:00
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>
This commit is contained in:
Andy Lee
@@ -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>
|
||||
@@ -0,0 +1,167 @@
|
||||
<script>
|
||||
import merge from 'lodash/merge';
|
||||
import jsyaml from 'js-yaml';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import { RadioGroup } from '@components/Form/Radio';
|
||||
|
||||
const DEFAULT_VALUE = {
|
||||
certManagerVersion: 'v1.20.2',
|
||||
rancher: {
|
||||
hostname: '',
|
||||
version: '',
|
||||
bootstrapPassword: '',
|
||||
},
|
||||
k3kCluster: {
|
||||
servers: 1,
|
||||
version: 'v1.35.4-k3s1',
|
||||
storageClassName: 'harvester-longhorn',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'EditAddonRancherK3k',
|
||||
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({}, DEFAULT_VALUE, jsyaml.load(this.value.spec.valuesContent));
|
||||
} catch (err) {
|
||||
valuesContentJson = merge({}, DEFAULT_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.version) {
|
||||
errors.push(this.t('validation.required', { key: this.t('harvester.addons.rancherK3k.version') }, 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"
|
||||
:mode="mode"
|
||||
placeholder="v1.14.0"
|
||||
/>
|
||||
</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"
|
||||
:tooltip="t('harvester.addons.rancherK3k.passwordTooltip')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() .radio-group {
|
||||
display: flex;
|
||||
.radio-container {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1832,6 +1832,8 @@ 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 is an add-on to deploy the k3k controller.
|
||||
'rancher-k3k': rancher-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,14 @@ harvester:
|
||||
hostname: Hostname
|
||||
rancherVersion: Rancher Version
|
||||
password: Bootstrap Password
|
||||
rancherK3k:
|
||||
accessRancher: Access the Rancher Dashboard
|
||||
hostname: Hostname
|
||||
version: Rancher Version
|
||||
password: Bootstrap Password
|
||||
passwordTooltip: The initial password in Rancher for the first time login.
|
||||
enable:
|
||||
title: Enable K3k
|
||||
switchFailed: "{action} {name} failed!"
|
||||
nvidiaDriverToolkit:
|
||||
titles:
|
||||
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
/>
|
||||
|
||||
<a
|
||||
v-if="scope.row.metadata.name === 'rancher-vcluster' && scope.row.spec.enabled"
|
||||
v-if="['rancher-vcluster', 'rancher-k3k'].includes(scope.row.metadata.name) && scope.row.spec.enabled"
|
||||
v-tooltip="t('harvester.addons.rancherVcluster.accessRancher')"
|
||||
class="ml-5"
|
||||
rel="nofollow noopener noreferrer"
|
||||
|
||||
@@ -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_ADDON = 'rancher-k3k/rancher-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_ADDON) {
|
||||
const rancherDashboard = {
|
||||
action: 'goToRancher',
|
||||
enabled: this.spec.enabled,
|
||||
@@ -57,6 +59,15 @@ export default class HciAddonConfig extends HarvesterResource {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.spec.enabled && this.id === RANCHER_K3K_ADDON) {
|
||||
this.$dispatch('promptModal', {
|
||||
resources: [this],
|
||||
component: 'HarvesterEnableK3k',
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.spec.enabled = !this.spec.enabled;
|
||||
await this.save();
|
||||
} catch (err) {
|
||||
@@ -69,18 +80,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_ADDON ? valuesContent.rancher?.hostname : valuesContent.hostname;
|
||||
|
||||
return `https://${ hostname }`;
|
||||
}
|
||||
|
||||
get stateColor() {
|
||||
|
||||
Reference in New Issue
Block a user