mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-10-06 06:06:05 +08:00
feat(forklift): UI based on the FIGMA
Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
This commit is contained in:
Marcelo Fukumoto
@@ -1,119 +0,0 @@
|
||||
<script>
|
||||
import CruResource from '@shell/components/CruResource';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import NameNsDescription from '@shell/components/form/NameNsDescription';
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import FormValidation from '@shell/mixins/form-validation';
|
||||
import { HCI } from '../types';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'EditForkliftMigration',
|
||||
|
||||
emits: ['update:value'],
|
||||
|
||||
components: {
|
||||
CruResource,
|
||||
LabeledSelect,
|
||||
NameNsDescription,
|
||||
},
|
||||
|
||||
mixins: [CreateEditView, FormValidation],
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
async fetch() {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
|
||||
this.allPlans = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PLAN });
|
||||
},
|
||||
|
||||
data() {
|
||||
if (!this.value.spec) {
|
||||
this.value.spec = { plan: {} };
|
||||
}
|
||||
|
||||
return {
|
||||
allPlans: [],
|
||||
|
||||
fvFormRuleSets: [
|
||||
{ path: 'metadata.name', rules: ['nameRequired'] },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({ t: 'i18n/t' }),
|
||||
|
||||
planOptions() {
|
||||
return this.allPlans.map((p) => ({
|
||||
label: p.metadata.name,
|
||||
value: p.metadata.name,
|
||||
}));
|
||||
},
|
||||
|
||||
fvExtraRules() {
|
||||
return { nameRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined };
|
||||
},
|
||||
|
||||
isFormValid() {
|
||||
return this.fvFormIsValid && !!this.value.spec.plan?.name;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updatePlan(val) {
|
||||
const plan = this.allPlans.find((p) => p.metadata.name === val);
|
||||
|
||||
this.value.spec.plan = {
|
||||
name: val,
|
||||
namespace: plan?.metadata?.namespace || this.value.metadata.namespace || 'default',
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CruResource
|
||||
:done-route="doneRoute"
|
||||
:resource="value"
|
||||
:mode="mode"
|
||||
:errors="errors"
|
||||
:apply-hooks="applyHooks"
|
||||
:validation-passed="isFormValid"
|
||||
@finish="save"
|
||||
@error="e=>errors=e"
|
||||
>
|
||||
<NameNsDescription
|
||||
:value="value"
|
||||
:mode="mode"
|
||||
:rules="{ name: fvGetAndReportPathRules('metadata.name') }"
|
||||
@update:value="$emit('update:value', $event)"
|
||||
/>
|
||||
|
||||
<div class="row mb-20 mt-20">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.plan.name"
|
||||
:options="planOptions"
|
||||
:label="t('harvester.addons.forklift.fields.plan')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updatePlan"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CruResource>
|
||||
</template>
|
||||
@@ -1,199 +0,0 @@
|
||||
<script>
|
||||
import CruResource from '@shell/components/CruResource';
|
||||
import Tabbed from '@shell/components/Tabbed';
|
||||
import Tab from '@shell/components/Tabbed/Tab';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import NameNsDescription from '@shell/components/form/NameNsDescription';
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import FormValidation from '@shell/mixins/form-validation';
|
||||
import ForkliftProvider from '../mixins/forklift-provider';
|
||||
import { HCI } from '../types';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'EditForkliftNetworkMap',
|
||||
|
||||
emits: ['update:value'],
|
||||
|
||||
components: {
|
||||
CruResource,
|
||||
Tabbed,
|
||||
Tab,
|
||||
LabeledInput,
|
||||
LabeledSelect,
|
||||
NameNsDescription,
|
||||
},
|
||||
|
||||
mixins: [CreateEditView, FormValidation, ForkliftProvider],
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
async fetch() {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
|
||||
this.allProviders = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
|
||||
},
|
||||
|
||||
data() {
|
||||
if (!this.value.spec) {
|
||||
this.value.spec = {
|
||||
map: [{ source: { id: '' }, destination: { type: 'pod' } }],
|
||||
provider: {
|
||||
source: {},
|
||||
destination: {},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
fvFormRuleSets: [
|
||||
{ path: 'metadata.name', rules: ['nameRequired'] },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({ t: 'i18n/t' }),
|
||||
|
||||
destinationTypeOptions() {
|
||||
return [
|
||||
{ label: this.t('harvester.addons.forklift.fields.destNetworkPod'), value: 'pod' },
|
||||
{ label: this.t('harvester.addons.forklift.fields.destNetworkMultus'), value: 'multus' },
|
||||
];
|
||||
},
|
||||
|
||||
fvExtraRules() {
|
||||
return { nameRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined };
|
||||
},
|
||||
|
||||
isFormValid() {
|
||||
return this.fvFormIsValid &&
|
||||
!!this.value.spec.provider?.source?.name &&
|
||||
!!this.value.spec.provider?.destination?.name;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addMapping() {
|
||||
this.value.spec.map.push({ source: { id: '' }, destination: { type: 'pod' } });
|
||||
},
|
||||
|
||||
removeMapping(idx) {
|
||||
this.value.spec.map.splice(idx, 1);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CruResource
|
||||
:done-route="doneRoute"
|
||||
:resource="value"
|
||||
:mode="mode"
|
||||
:errors="errors"
|
||||
:apply-hooks="applyHooks"
|
||||
:validation-passed="isFormValid"
|
||||
@finish="save"
|
||||
@error="e=>errors=e"
|
||||
>
|
||||
<NameNsDescription
|
||||
:value="value"
|
||||
:mode="mode"
|
||||
:rules="{ name: fvGetAndReportPathRules('metadata.name') }"
|
||||
@update:value="$emit('update:value', $event)"
|
||||
/>
|
||||
|
||||
<Tabbed
|
||||
v-bind="$attrs"
|
||||
class="mt-15"
|
||||
:side-tabs="true"
|
||||
>
|
||||
<Tab
|
||||
name="providers"
|
||||
:label="t('harvester.addons.forklift.titles.providers')"
|
||||
:weight="3"
|
||||
>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.provider.source.name"
|
||||
:options="providerOptions"
|
||||
:label="t('harvester.addons.forklift.fields.sourceProvider')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updateSourceProvider"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.provider.destination.name"
|
||||
:options="providerOptions"
|
||||
:label="t('harvester.addons.forklift.fields.destProvider')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updateDestProvider"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
name="mappings"
|
||||
:label="t('harvester.addons.forklift.titles.networkMappings')"
|
||||
:weight="2"
|
||||
>
|
||||
<div
|
||||
v-for="(entry, idx) in value.spec.map"
|
||||
:key="idx"
|
||||
class="row mb-20"
|
||||
>
|
||||
<div class="col span-5">
|
||||
<LabeledInput
|
||||
v-model:value="entry.source.id"
|
||||
:label="t('harvester.addons.forklift.fields.sourceNetworkId')"
|
||||
:placeholder="t('harvester.addons.forklift.placeholders.sourceNetworkId')"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-5">
|
||||
<LabeledSelect
|
||||
v-model:value="entry.destination.type"
|
||||
:options="destinationTypeOptions"
|
||||
:label="t('harvester.addons.forklift.fields.destNetworkType')"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn role-link"
|
||||
:disabled="value.spec.map.length <= 1"
|
||||
@click="removeMapping(idx)"
|
||||
>
|
||||
{{ t('harvester.addons.forklift.actions.remove') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn role-tertiary"
|
||||
@click="addMapping"
|
||||
>
|
||||
{{ t('harvester.addons.forklift.actions.addMapping') }}
|
||||
</button>
|
||||
</Tab>
|
||||
</Tabbed>
|
||||
</CruResource>
|
||||
</template>
|
||||
@@ -1,303 +0,0 @@
|
||||
<script>
|
||||
import CruResource from '@shell/components/CruResource';
|
||||
import Tabbed from '@shell/components/Tabbed';
|
||||
import Tab from '@shell/components/Tabbed/Tab';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import NameNsDescription from '@shell/components/form/NameNsDescription';
|
||||
import { Checkbox } from '@components/Form/Checkbox';
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import FormValidation from '@shell/mixins/form-validation';
|
||||
import ForkliftProvider from '../mixins/forklift-provider';
|
||||
import { HCI } from '../types';
|
||||
import { FORKLIFT_API_VERSION } from '../config/harvester-map';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'EditForkliftPlan',
|
||||
|
||||
emits: ['update:value'],
|
||||
|
||||
components: {
|
||||
CruResource,
|
||||
Tabbed,
|
||||
Tab,
|
||||
LabeledInput,
|
||||
LabeledSelect,
|
||||
NameNsDescription,
|
||||
Checkbox,
|
||||
},
|
||||
|
||||
mixins: [CreateEditView, FormValidation, ForkliftProvider],
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
async fetch() {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
|
||||
this.allProviders = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
|
||||
this.allNetworkMaps = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_NETWORK_MAP });
|
||||
this.allStorageMaps = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_STORAGE_MAP });
|
||||
},
|
||||
|
||||
data() {
|
||||
if (!this.value.spec) {
|
||||
this.value.spec = {
|
||||
map: {
|
||||
network: {},
|
||||
storage: {},
|
||||
},
|
||||
provider: {
|
||||
source: {},
|
||||
destination: {},
|
||||
},
|
||||
targetNamespace: 'default',
|
||||
migrateSharedDisks: true,
|
||||
vms: [{ id: '', name: '' }],
|
||||
};
|
||||
}
|
||||
|
||||
if (!this.value.metadata.annotations) {
|
||||
this.value.metadata.annotations = {};
|
||||
}
|
||||
this.value.metadata.annotations.populatorLabels = 'True';
|
||||
|
||||
return {
|
||||
allProviders: [],
|
||||
allNetworkMaps: [],
|
||||
allStorageMaps: [],
|
||||
|
||||
fvFormRuleSets: [
|
||||
{ path: 'metadata.name', rules: ['nameRequired'] },
|
||||
{ path: 'spec.targetNamespace', rules: ['targetNsRequired'] },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({ t: 'i18n/t' }),
|
||||
|
||||
providerOptions() {
|
||||
return this.allProviders.map((p) => ({
|
||||
label: `${ p.metadata.name } (${ p.spec?.type || 'unknown' })`,
|
||||
value: p.metadata.name,
|
||||
}));
|
||||
},
|
||||
|
||||
networkMapOptions() {
|
||||
return this.allNetworkMaps.map((m) => ({
|
||||
label: m.metadata.name,
|
||||
value: m.metadata.name,
|
||||
}));
|
||||
},
|
||||
|
||||
storageMapOptions() {
|
||||
return this.allStorageMaps.map((m) => ({
|
||||
label: m.metadata.name,
|
||||
value: m.metadata.name,
|
||||
}));
|
||||
},
|
||||
|
||||
fvExtraRules() {
|
||||
return {
|
||||
nameRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined,
|
||||
targetNsRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.addons.forklift.fields.targetNamespace') }) : undefined,
|
||||
};
|
||||
},
|
||||
|
||||
isFormValid() {
|
||||
return this.fvFormIsValid &&
|
||||
!!this.value.spec.provider?.source?.name &&
|
||||
!!this.value.spec.provider?.destination?.name;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addVm() {
|
||||
this.value.spec.vms.push({ id: '', name: '' });
|
||||
},
|
||||
|
||||
removeVm(idx) {
|
||||
this.value.spec.vms.splice(idx, 1);
|
||||
},
|
||||
|
||||
updateNetworkMap(val) {
|
||||
this.value.spec.map.network = {
|
||||
apiVersion: FORKLIFT_API_VERSION,
|
||||
kind: 'NetworkMap',
|
||||
name: val,
|
||||
namespace: this.value.metadata.namespace || 'default',
|
||||
};
|
||||
},
|
||||
|
||||
updateStorageMap(val) {
|
||||
this.value.spec.map.storage = {
|
||||
apiVersion: FORKLIFT_API_VERSION,
|
||||
kind: 'StorageMap',
|
||||
name: val,
|
||||
namespace: this.value.metadata.namespace || 'default',
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CruResource
|
||||
:done-route="doneRoute"
|
||||
:resource="value"
|
||||
:mode="mode"
|
||||
:errors="errors"
|
||||
:apply-hooks="applyHooks"
|
||||
:validation-passed="isFormValid"
|
||||
@finish="save"
|
||||
@error="e=>errors=e"
|
||||
>
|
||||
<NameNsDescription
|
||||
:value="value"
|
||||
:mode="mode"
|
||||
:rules="{ name: fvGetAndReportPathRules('metadata.name') }"
|
||||
@update:value="$emit('update:value', $event)"
|
||||
/>
|
||||
|
||||
<Tabbed
|
||||
v-bind="$attrs"
|
||||
class="mt-15"
|
||||
:side-tabs="true"
|
||||
>
|
||||
<Tab
|
||||
name="providers"
|
||||
:label="t('harvester.addons.forklift.titles.providers')"
|
||||
:weight="4"
|
||||
>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.provider.source.name"
|
||||
:options="providerOptions"
|
||||
:label="t('harvester.addons.forklift.fields.sourceProvider')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updateSourceProvider"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.provider.destination.name"
|
||||
:options="providerOptions"
|
||||
:label="t('harvester.addons.forklift.fields.destProvider')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updateDestProvider"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
name="mappings"
|
||||
:label="t('harvester.addons.forklift.titles.mappings')"
|
||||
:weight="3"
|
||||
>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.map.network.name"
|
||||
:options="networkMapOptions"
|
||||
:label="t('harvester.addons.forklift.fields.networkMap')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updateNetworkMap"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.map.storage.name"
|
||||
:options="storageMapOptions"
|
||||
:label="t('harvester.addons.forklift.fields.storageMap')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updateStorageMap"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
name="vms"
|
||||
:label="t('harvester.addons.forklift.titles.vms')"
|
||||
:weight="2"
|
||||
>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="value.spec.targetNamespace"
|
||||
:label="t('harvester.addons.forklift.fields.targetNamespace')"
|
||||
:mode="mode"
|
||||
:rules="fvGetAndReportPathRules('spec.targetNamespace')"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<Checkbox
|
||||
v-model:value="value.spec.migrateSharedDisks"
|
||||
:label="t('harvester.addons.forklift.fields.migrateSharedDisks')"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(vm, idx) in value.spec.vms"
|
||||
:key="idx"
|
||||
class="row mb-20"
|
||||
>
|
||||
<div class="col span-5">
|
||||
<LabeledInput
|
||||
v-model:value="vm.id"
|
||||
:label="t('harvester.addons.forklift.fields.vmId')"
|
||||
:placeholder="t('harvester.addons.forklift.placeholders.vmId')"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-5">
|
||||
<LabeledInput
|
||||
v-model:value="vm.name"
|
||||
:label="t('harvester.addons.forklift.fields.vmName')"
|
||||
:placeholder="t('harvester.addons.forklift.placeholders.vmName')"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn role-link"
|
||||
:disabled="value.spec.vms.length <= 1"
|
||||
@click="removeVm(idx)"
|
||||
>
|
||||
{{ t('harvester.addons.forklift.actions.remove') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn role-tertiary"
|
||||
@click="addVm"
|
||||
>
|
||||
{{ t('harvester.addons.forklift.actions.addVm') }}
|
||||
</button>
|
||||
</Tab>
|
||||
</Tabbed>
|
||||
</CruResource>
|
||||
</template>
|
||||
@@ -1,346 +0,0 @@
|
||||
<script>
|
||||
import CruResource from '@shell/components/CruResource';
|
||||
import Tabbed from '@shell/components/Tabbed';
|
||||
import Tab from '@shell/components/Tabbed/Tab';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import NameNsDescription from '@shell/components/form/NameNsDescription';
|
||||
import { RadioGroup } from '@components/Form/Radio';
|
||||
import { Checkbox } from '@components/Form/Checkbox';
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import FormValidation from '@shell/mixins/form-validation';
|
||||
import { SECRET } from '@shell/config/types';
|
||||
import { randomStr } from '@shell/utils/string';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
const PROVIDER_TYPES = [
|
||||
{ labelKey: 'harvester.addons.forklift.fields.providerTypeVsphere', value: 'vsphere' },
|
||||
{ labelKey: 'harvester.addons.forklift.fields.providerTypeOpenstack', value: 'openstack' },
|
||||
{ labelKey: 'harvester.addons.forklift.fields.providerTypeOpenshift', value: 'openshift' },
|
||||
];
|
||||
|
||||
export default {
|
||||
name: 'EditForkliftProvider',
|
||||
|
||||
emits: ['update:value'],
|
||||
|
||||
components: {
|
||||
CruResource,
|
||||
Tabbed,
|
||||
Tab,
|
||||
LabeledInput,
|
||||
LabeledSelect,
|
||||
NameNsDescription,
|
||||
RadioGroup,
|
||||
Checkbox,
|
||||
},
|
||||
|
||||
mixins: [CreateEditView, FormValidation],
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
async fetch() {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
|
||||
this.allSecrets = await this.$store.dispatch(`${ inStore }/findAll`, { type: SECRET });
|
||||
},
|
||||
|
||||
data() {
|
||||
if (!this.value.spec) {
|
||||
this.value.spec = {
|
||||
type: 'vsphere',
|
||||
url: '',
|
||||
secret: {},
|
||||
};
|
||||
}
|
||||
|
||||
const initialMode = this.value.spec.secret?.name ? 'existing' : 'new';
|
||||
|
||||
return {
|
||||
allSecrets: [],
|
||||
authMode: initialMode,
|
||||
newUsername: '',
|
||||
newPassword: '',
|
||||
newCaCert: '',
|
||||
skipTlsVerify: true,
|
||||
|
||||
fvFormRuleSets: [
|
||||
{ path: 'metadata.name', rules: ['nameRequired'] },
|
||||
{ path: 'spec.url', rules: ['urlRequired'] },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({ t: 'i18n/t' }),
|
||||
|
||||
providerTypes() {
|
||||
return PROVIDER_TYPES.map((pt) => ({
|
||||
label: this.t(pt.labelKey),
|
||||
value: pt.value,
|
||||
}));
|
||||
},
|
||||
|
||||
authModeOptions() {
|
||||
return [
|
||||
{ label: this.t('harvester.addons.forklift.fields.createSecret'), value: 'new' },
|
||||
{ label: this.t('harvester.addons.forklift.fields.useSecret'), value: 'existing' }
|
||||
];
|
||||
},
|
||||
|
||||
secretOptions() {
|
||||
const currentNamespace = this.value.metadata.namespace || 'default';
|
||||
|
||||
return this.allSecrets
|
||||
.filter((s) => s.metadata.namespace === currentNamespace)
|
||||
.map((s) => ({
|
||||
label: s.nameDisplay,
|
||||
value: s.metadata.name
|
||||
}));
|
||||
},
|
||||
|
||||
fvExtraRules() {
|
||||
return {
|
||||
nameRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined,
|
||||
urlRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.addons.forklift.fields.url') }) : undefined,
|
||||
};
|
||||
},
|
||||
|
||||
isFormValid() {
|
||||
if (!this.fvFormIsValid) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Local openshift provider doesn't need auth or URL
|
||||
if (this.value.spec.type === 'openshift') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.authMode === 'new') {
|
||||
if (!this.newUsername || !this.newPassword) {
|
||||
return false;
|
||||
}
|
||||
} else if (!this.value.spec.secret?.name) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
usernameRule(val) {
|
||||
return !val ? this.t('validation.required', { key: this.t('harvester.addons.forklift.fields.username') }) : undefined;
|
||||
},
|
||||
passwordRule(val) {
|
||||
return !val ? this.t('validation.required', { key: this.t('harvester.addons.forklift.fields.password') }) : undefined;
|
||||
},
|
||||
secretRule(val) {
|
||||
return !val ? this.t('validation.required', { key: this.t('harvester.addons.forklift.fields.selectSecret') }) : undefined;
|
||||
},
|
||||
|
||||
async saveProvider(buttonCb) {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
|
||||
try {
|
||||
// Local openshift provider uses empty secret
|
||||
if (this.value.spec.type === 'openshift') {
|
||||
this.value.spec.secret = {};
|
||||
this.value.spec.url = '';
|
||||
await this.save(buttonCb);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.authMode === 'new') {
|
||||
const secretName = `${ this.value.metadata.name }-creds-${ randomStr(4).toLowerCase() }`;
|
||||
const namespace = this.value.metadata.namespace || 'default';
|
||||
|
||||
const newSecret = await this.$store.dispatch(`${ inStore }/create`, {
|
||||
type: SECRET,
|
||||
metadata: {
|
||||
name: secretName,
|
||||
namespace,
|
||||
labels: {
|
||||
createdForProviderType: this.value.spec.type,
|
||||
createdForResourceType: 'providers',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
newSecret['_type'] = 'Opaque';
|
||||
newSecret['data'] = {
|
||||
user: btoa(this.newUsername),
|
||||
password: btoa(this.newPassword),
|
||||
insecureSkipVerify: btoa(String(this.skipTlsVerify)),
|
||||
url: btoa(this.value.spec.url),
|
||||
};
|
||||
|
||||
if (this.newCaCert) {
|
||||
newSecret.data.cacert = btoa(this.newCaCert);
|
||||
}
|
||||
|
||||
await newSecret.save();
|
||||
|
||||
this.value.spec.secret = {
|
||||
name: secretName,
|
||||
namespace,
|
||||
};
|
||||
}
|
||||
|
||||
await this.save(buttonCb);
|
||||
} catch (err) {
|
||||
this.errors = [err];
|
||||
buttonCb(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CruResource
|
||||
:done-route="doneRoute"
|
||||
:resource="value"
|
||||
:mode="mode"
|
||||
:errors="errors"
|
||||
:apply-hooks="applyHooks"
|
||||
:validation-passed="isFormValid"
|
||||
@finish="saveProvider"
|
||||
@error="e=>errors=e"
|
||||
>
|
||||
<NameNsDescription
|
||||
:value="value"
|
||||
:mode="mode"
|
||||
:rules="{ name: fvGetAndReportPathRules('metadata.name') }"
|
||||
@update:value="$emit('update:value', $event)"
|
||||
/>
|
||||
|
||||
<Tabbed
|
||||
v-bind="$attrs"
|
||||
class="mt-15"
|
||||
:side-tabs="true"
|
||||
>
|
||||
<Tab
|
||||
name="basic"
|
||||
:label="t('harvester.addons.forklift.titles.basic')"
|
||||
:weight="2"
|
||||
>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
v-model:value="value.spec.type"
|
||||
:options="providerTypes"
|
||||
:label="t('harvester.addons.forklift.fields.providerType')"
|
||||
:mode="mode"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="value.spec.type !== 'openshift'"
|
||||
class="col span-6"
|
||||
>
|
||||
<LabeledInput
|
||||
v-model:value="value.spec.url"
|
||||
:label="t('harvester.addons.forklift.fields.url')"
|
||||
:placeholder="t('harvester.addons.forklift.placeholders.url')"
|
||||
:mode="mode"
|
||||
:rules="fvGetAndReportPathRules('spec.url')"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
v-if="value.spec.type !== 'openshift'"
|
||||
name="auth"
|
||||
:label="t('harvester.addons.forklift.titles.auth')"
|
||||
:weight="1"
|
||||
>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-12">
|
||||
<RadioGroup
|
||||
v-model:value="authMode"
|
||||
name="authMode"
|
||||
:options="authModeOptions"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="authMode === 'new'">
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="newUsername"
|
||||
:label="t('harvester.addons.forklift.fields.username')"
|
||||
:mode="mode"
|
||||
:rules="[usernameRule]"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="newPassword"
|
||||
type="password"
|
||||
:label="t('harvester.addons.forklift.fields.password')"
|
||||
:mode="mode"
|
||||
:rules="[passwordRule]"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-12">
|
||||
<LabeledInput
|
||||
v-model:value="newCaCert"
|
||||
type="multiline"
|
||||
:label="t('harvester.addons.forklift.fields.caCert')"
|
||||
:placeholder="t('harvester.addons.forklift.placeholders.caCert')"
|
||||
:min-height="100"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-20">
|
||||
<div class="col span-12">
|
||||
<Checkbox
|
||||
v-model:value="skipTlsVerify"
|
||||
:label="t('harvester.addons.forklift.fields.insecureSkipVerify')"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="authMode === 'existing'">
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
v-model:value="value.spec.secret.name"
|
||||
:options="secretOptions"
|
||||
:label="t('harvester.addons.forklift.fields.selectSecret')"
|
||||
:mode="mode"
|
||||
:rules="[secretRule]"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabbed>
|
||||
</CruResource>
|
||||
</template>
|
||||
@@ -1,208 +0,0 @@
|
||||
<script>
|
||||
import CruResource from '@shell/components/CruResource';
|
||||
import Tabbed from '@shell/components/Tabbed';
|
||||
import Tab from '@shell/components/Tabbed/Tab';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import NameNsDescription from '@shell/components/form/NameNsDescription';
|
||||
import CreateEditView from '@shell/mixins/create-edit-view';
|
||||
import FormValidation from '@shell/mixins/form-validation';
|
||||
import ForkliftProvider from '../mixins/forklift-provider';
|
||||
import { HCI } from '../types';
|
||||
import { STORAGE_CLASS } from '@shell/config/types';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'EditForkliftStorageMap',
|
||||
|
||||
emits: ['update:value'],
|
||||
|
||||
components: {
|
||||
CruResource,
|
||||
Tabbed,
|
||||
Tab,
|
||||
LabeledInput,
|
||||
LabeledSelect,
|
||||
NameNsDescription,
|
||||
},
|
||||
|
||||
mixins: [CreateEditView, FormValidation, ForkliftProvider],
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
async fetch() {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
|
||||
this.allProviders = await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
|
||||
|
||||
try {
|
||||
this.allStorageClasses = await this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
|
||||
} catch {
|
||||
this.allStorageClasses = [];
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
if (!this.value.spec) {
|
||||
this.value.spec = {
|
||||
map: [{ source: { id: '' }, destination: { storageClass: '' } }],
|
||||
provider: {
|
||||
source: {},
|
||||
destination: {},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
allStorageClasses: [],
|
||||
|
||||
fvFormRuleSets: [
|
||||
{ path: 'metadata.name', rules: ['nameRequired'] },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({ t: 'i18n/t' }),
|
||||
|
||||
storageClassOptions() {
|
||||
return this.allStorageClasses.map((sc) => ({
|
||||
label: sc.metadata.name,
|
||||
value: sc.metadata.name,
|
||||
}));
|
||||
},
|
||||
|
||||
fvExtraRules() {
|
||||
return { nameRequired: (val) => !val ? this.t('validation.required', { key: this.t('harvester.fields.name') }) : undefined };
|
||||
},
|
||||
|
||||
isFormValid() {
|
||||
return this.fvFormIsValid &&
|
||||
!!this.value.spec.provider?.source?.name &&
|
||||
!!this.value.spec.provider?.destination?.name;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addMapping() {
|
||||
this.value.spec.map.push({ source: { id: '' }, destination: { storageClass: '' } });
|
||||
},
|
||||
|
||||
removeMapping(idx) {
|
||||
this.value.spec.map.splice(idx, 1);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CruResource
|
||||
:done-route="doneRoute"
|
||||
:resource="value"
|
||||
:mode="mode"
|
||||
:errors="errors"
|
||||
:apply-hooks="applyHooks"
|
||||
:validation-passed="isFormValid"
|
||||
@finish="save"
|
||||
@error="e=>errors=e"
|
||||
>
|
||||
<NameNsDescription
|
||||
:value="value"
|
||||
:mode="mode"
|
||||
:rules="{ name: fvGetAndReportPathRules('metadata.name') }"
|
||||
@update:value="$emit('update:value', $event)"
|
||||
/>
|
||||
|
||||
<Tabbed
|
||||
v-bind="$attrs"
|
||||
class="mt-15"
|
||||
:side-tabs="true"
|
||||
>
|
||||
<Tab
|
||||
name="providers"
|
||||
:label="t('harvester.addons.forklift.titles.providers')"
|
||||
:weight="3"
|
||||
>
|
||||
<div class="row mb-20">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.provider.source.name"
|
||||
:options="providerOptions"
|
||||
:label="t('harvester.addons.forklift.fields.sourceProvider')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updateSourceProvider"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
:value="value.spec.provider.destination.name"
|
||||
:options="providerOptions"
|
||||
:label="t('harvester.addons.forklift.fields.destProvider')"
|
||||
:mode="mode"
|
||||
required
|
||||
@update:value="updateDestProvider"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
name="mappings"
|
||||
:label="t('harvester.addons.forklift.titles.storageMappings')"
|
||||
:weight="2"
|
||||
>
|
||||
<div
|
||||
v-for="(entry, idx) in value.spec.map"
|
||||
:key="idx"
|
||||
class="row mb-20"
|
||||
>
|
||||
<div class="col span-5">
|
||||
<LabeledInput
|
||||
v-model:value="entry.source.id"
|
||||
:label="t('harvester.addons.forklift.fields.sourceDatastoreId')"
|
||||
:placeholder="t('harvester.addons.forklift.placeholders.sourceDatastoreId')"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-5">
|
||||
<LabeledSelect
|
||||
v-model:value="entry.destination.storageClass"
|
||||
:options="storageClassOptions"
|
||||
:label="t('harvester.addons.forklift.fields.destStorageClass')"
|
||||
:mode="mode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn role-link"
|
||||
:disabled="value.spec.map.length <= 1"
|
||||
@click="removeMapping(idx)"
|
||||
>
|
||||
{{ t('harvester.addons.forklift.actions.remove') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn role-tertiary"
|
||||
@click="addMapping"
|
||||
>
|
||||
{{ t('harvester.addons.forklift.actions.addMapping') }}
|
||||
</button>
|
||||
</Tab>
|
||||
</Tabbed>
|
||||
</CruResource>
|
||||
</template>
|
||||
Reference in New Issue
Block a user