mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-08-16 12:49:14 +00:00
feat(forklift): Fixed config based on new figma changes
Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
This commit is contained in:
Marcelo Fukumoto
parent
2259910be1
commit
63d726aa91
16
pkg/harvester/models/forklift.konveyor.io.plan.js
Normal file
16
pkg/harvester/models/forklift.konveyor.io.plan.js
Normal file
@ -0,0 +1,16 @@
|
||||
import HarvesterResource from './harvester';
|
||||
|
||||
export default class ForkliftPlan extends HarvesterResource {
|
||||
/**
|
||||
* Deleting a Plan cascades via ownerReferences set at creation time.
|
||||
* Kubernetes GC will automatically delete: Migration, NetworkMap, StorageMap, Provider (→ Secret).
|
||||
* Use foreground propagation to ensure children are deleted before the parent.
|
||||
*/
|
||||
remove() {
|
||||
const opt = { ...arguments };
|
||||
|
||||
opt.params = { propagationPolicy: 'Foreground' };
|
||||
|
||||
return this._remove(opt);
|
||||
}
|
||||
}
|
||||
16
pkg/harvester/models/forklift.konveyor.io.provider.js
Normal file
16
pkg/harvester/models/forklift.konveyor.io.provider.js
Normal file
@ -0,0 +1,16 @@
|
||||
import HarvesterResource from './harvester';
|
||||
|
||||
export default class ForkliftProvider extends HarvesterResource {
|
||||
/**
|
||||
* Deleting a Provider cascades via ownerReferences set at creation time.
|
||||
* Kubernetes GC will automatically delete: Secret, NetworkMap, StorageMap.
|
||||
* Use foreground propagation to ensure children are deleted before the parent.
|
||||
*/
|
||||
remove() {
|
||||
const opt = { ...arguments };
|
||||
|
||||
opt.params = { propagationPolicy: 'Foreground' };
|
||||
|
||||
return this._remove(opt);
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Loading from '@shell/components/Loading';
|
||||
@ -23,18 +23,6 @@ const schema = {
|
||||
metadata: { name: HCI.FORKLIFT_NETWORK_MAP },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ForkliftConfigureMappings',
|
||||
|
||||
components: {
|
||||
Loading,
|
||||
Masthead,
|
||||
AsyncButton,
|
||||
LabeledSelect,
|
||||
RcItemCard,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -48,8 +36,8 @@ export default defineComponent({
|
||||
const errors = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
const NAMESPACE = 'forklift';
|
||||
const providerName = computed(() => route.query.provider || 'vsphere');
|
||||
const namespace = computed(() => route.query.namespace || 'default');
|
||||
|
||||
const harvesterNetworkOptions = computed(() => {
|
||||
const options = [
|
||||
@ -90,76 +78,68 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
const buildNetworkEntries = () => {
|
||||
const entries = [];
|
||||
const networkMap = {};
|
||||
|
||||
vms.value.forEach((vm) => {
|
||||
const vmName = vm.name || vm.id;
|
||||
|
||||
if (vm.networks && vm.networks.length > 0) {
|
||||
vm.networks.forEach((net) => {
|
||||
entries.push({
|
||||
vmId: vm.id,
|
||||
vmName: vm.name || vm.id,
|
||||
const netKey = net.id || net.name || 'default';
|
||||
|
||||
if (!networkMap[netKey]) {
|
||||
networkMap[netKey] = {
|
||||
name: net.name || 'Unknown',
|
||||
id: net.id || '',
|
||||
vlanId: net.vlanId || '',
|
||||
target: 'pod',
|
||||
_key: `net-${ vm.id }-${ net.id || net.name }`,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
entries.push({
|
||||
vmId: vm.id,
|
||||
vmName: vm.name || vm.id,
|
||||
name: 'Default Network',
|
||||
id: '',
|
||||
vlanId: '',
|
||||
target: 'pod',
|
||||
_key: `net-${ vm.id }-default`,
|
||||
target: '',
|
||||
usedBy: [],
|
||||
_key: `net-${ netKey }`,
|
||||
};
|
||||
}
|
||||
|
||||
if (!networkMap[netKey].usedBy.includes(vmName)) {
|
||||
networkMap[netKey].usedBy.push(vmName);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
networkEntries.value = entries;
|
||||
networkEntries.value = Object.values(networkMap);
|
||||
};
|
||||
|
||||
const buildStorageEntries = () => {
|
||||
const entries = [];
|
||||
const datastoreMap = {};
|
||||
|
||||
vms.value.forEach((vm) => {
|
||||
if (vm.disks && vm.disks.length > 0) {
|
||||
const seen = new Set();
|
||||
const vmName = vm.name || vm.id;
|
||||
|
||||
if (vm.disks && vm.disks.length > 0) {
|
||||
vm.disks.forEach((disk) => {
|
||||
const ds = disk.datastore;
|
||||
|
||||
if (ds && ds.id && !seen.has(ds.id)) {
|
||||
seen.add(ds.id);
|
||||
entries.push({
|
||||
vmId: vm.id,
|
||||
vmName: vm.name || vm.id,
|
||||
if (ds && ds.id) {
|
||||
if (!datastoreMap[ds.id]) {
|
||||
datastoreMap[ds.id] = {
|
||||
name: ds.name || 'Unknown',
|
||||
id: ds.id || '',
|
||||
id: ds.id,
|
||||
type: ds.type || '',
|
||||
capacity: disk.capacity || 0,
|
||||
target: 'harvester-longhorn',
|
||||
_key: `stor-${ vm.id }-${ ds.id }`,
|
||||
});
|
||||
capacity: ds.capacity || 0,
|
||||
target: '',
|
||||
usedBy: [],
|
||||
_key: `stor-${ ds.id }`,
|
||||
};
|
||||
}
|
||||
|
||||
if (!datastoreMap[ds.id].usedBy.includes(vmName)) {
|
||||
datastoreMap[ds.id].usedBy.push(vmName);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
entries.push({
|
||||
vmId: vm.id,
|
||||
vmName: vm.name || vm.id,
|
||||
name: 'Default Datastore',
|
||||
id: '',
|
||||
type: '',
|
||||
capacity: 0,
|
||||
target: 'harvester-longhorn',
|
||||
_key: `stor-${ vm.id }-default`,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
storageEntries.value = entries;
|
||||
storageEntries.value = Object.values(datastoreMap);
|
||||
};
|
||||
|
||||
const formatStorageDetail = (entry) => {
|
||||
@ -182,7 +162,15 @@ export default defineComponent({
|
||||
return parts.join(' \u2022 ');
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
const cancel = async() => {
|
||||
const inStore = store.getters['currentProduct'].inStore;
|
||||
const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
|
||||
const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE);
|
||||
|
||||
if (provider) {
|
||||
await provider.remove();
|
||||
}
|
||||
|
||||
router.push({
|
||||
name: `${ PRODUCT_NAME }-c-cluster-forklift`,
|
||||
params: {
|
||||
@ -200,13 +188,13 @@ export default defineComponent({
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'Provider',
|
||||
name: providerName.value,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
destination: {
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'Provider',
|
||||
name: 'host',
|
||||
namespace: 'forklift',
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
};
|
||||
|
||||
@ -233,18 +221,31 @@ export default defineComponent({
|
||||
destination: {
|
||||
type: 'multus',
|
||||
name: entry.target,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
};
|
||||
}),
|
||||
provider: providerRef,
|
||||
};
|
||||
|
||||
// Fetch the Provider to build ownerReference
|
||||
const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
|
||||
const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE);
|
||||
|
||||
const providerOwnerRef = provider ? [{
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'Provider',
|
||||
name: provider.metadata.name,
|
||||
uid: provider.metadata.uid,
|
||||
blockOwnerDeletion: true,
|
||||
}] : [];
|
||||
|
||||
const networkMap = await store.dispatch(`${ inStore }/create`, {
|
||||
type: HCI.FORKLIFT_NETWORK_MAP,
|
||||
metadata: {
|
||||
name: `${ providerName.value }-network-map-${ Math.random().toString(36).substring(2, 7) }`,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
ownerReferences: providerOwnerRef,
|
||||
},
|
||||
spec: networkMapSpec,
|
||||
});
|
||||
@ -264,7 +265,8 @@ export default defineComponent({
|
||||
type: HCI.FORKLIFT_STORAGE_MAP,
|
||||
metadata: {
|
||||
name: `${ providerName.value }-storage-map-${ Math.random().toString(36).substring(2, 7) }`,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
ownerReferences: providerOwnerRef,
|
||||
},
|
||||
spec: storageMapSpec,
|
||||
});
|
||||
@ -273,15 +275,15 @@ export default defineComponent({
|
||||
|
||||
// Navigate to review page with all mapping data
|
||||
const networkMappingsData = networkEntries.value.map((entry) => ({
|
||||
vmId: entry.vmId,
|
||||
source: entry.name,
|
||||
target: entry.target === 'pod' ? 'Pod Networking' : entry.target === 'ignored' ? 'Ignored' : entry.target,
|
||||
usedBy: entry.usedBy,
|
||||
}));
|
||||
|
||||
const storageMappingsData = storageEntries.value.map((entry) => ({
|
||||
vmId: entry.vmId,
|
||||
source: entry.name,
|
||||
target: entry.target,
|
||||
usedBy: entry.usedBy,
|
||||
}));
|
||||
|
||||
router.push({
|
||||
@ -292,7 +294,6 @@ export default defineComponent({
|
||||
},
|
||||
query: {
|
||||
provider: providerName.value,
|
||||
namespace: namespace.value,
|
||||
vms: route.query.vms,
|
||||
networkMap: networkMap.metadata.name,
|
||||
storageMap: storageMap.metadata.name,
|
||||
@ -323,6 +324,12 @@ export default defineComponent({
|
||||
storageClasses.value = [];
|
||||
}
|
||||
|
||||
try {
|
||||
await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
|
||||
} catch (e) {
|
||||
// Provider may already be in store from previous step
|
||||
}
|
||||
|
||||
const vmsParam = route.query.vms;
|
||||
|
||||
if (vmsParam) {
|
||||
@ -347,23 +354,6 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
schema,
|
||||
loading,
|
||||
networkEntries,
|
||||
storageEntries,
|
||||
errors,
|
||||
harvesterNetworkOptions,
|
||||
storageClassOptions,
|
||||
canSave,
|
||||
t,
|
||||
formatStorageDetail,
|
||||
cancel,
|
||||
saveMappings,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -402,17 +392,17 @@ export default defineComponent({
|
||||
:id="entry._key"
|
||||
:key="entry._key"
|
||||
:variant="'small'"
|
||||
:header="{ title: { text: entry.vmId }, statuses: entry.target ? [{ icon: 'icon-notify-tick', color: 'text-success' }] : [] }"
|
||||
:header="{}"
|
||||
>
|
||||
<template #item-card-content>
|
||||
<div class="card-content-column">
|
||||
<div class="card-content-row">
|
||||
<div class="mapping-source">
|
||||
<span class="source-name">{{ entry.name }}</span>
|
||||
<span class="source-id text-muted">{{ entry.id }}</span>
|
||||
<span class="source-detail text-muted">VLAN {{ entry.vlanId || '0' }}</span>
|
||||
</div>
|
||||
<div class="mapping-arrow">
|
||||
→
|
||||
<div :class="['mapping-arrow', entry.target ? 'text-success' : 'text-muted']">
|
||||
<i class="icon icon-upgrade-alt" />
|
||||
</div>
|
||||
<div class="mapping-target">
|
||||
<LabeledSelect
|
||||
@ -423,6 +413,12 @@ export default defineComponent({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="used-by">
|
||||
Used by: <b>{{ entry.usedBy.join(', ') }}</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</RcItemCard>
|
||||
</div>
|
||||
@ -443,20 +439,20 @@ export default defineComponent({
|
||||
:id="entry._key"
|
||||
:key="entry._key"
|
||||
:variant="'small'"
|
||||
:header="{ title: { text: entry.vmId }, statuses: entry.target ? [{ icon: 'icon-notify-tick', color: 'text-success' }] : [] }"
|
||||
:header="{}"
|
||||
>
|
||||
<template #item-card-content>
|
||||
<div class="card-content-column">
|
||||
<div class="card-content-row">
|
||||
<div class="mapping-source">
|
||||
<span class="source-name">{{ entry.name }}</span>
|
||||
<span class="source-id text-muted">{{ entry.id }}</span>
|
||||
<span
|
||||
v-if="entry.type || entry.capacity"
|
||||
class="source-detail text-muted"
|
||||
>{{ formatStorageDetail(entry) }}</span>
|
||||
</div>
|
||||
<div class="mapping-arrow">
|
||||
→
|
||||
<div :class="['mapping-arrow', entry.target ? 'text-success' : 'text-muted']">
|
||||
<i class="icon icon-upgrade-alt" />
|
||||
</div>
|
||||
<div class="mapping-target">
|
||||
<LabeledSelect
|
||||
@ -467,6 +463,12 @@ export default defineComponent({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="used-by">
|
||||
Used by: <b>{{ entry.usedBy.join(', ') }}</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</RcItemCard>
|
||||
</div>
|
||||
@ -506,6 +508,10 @@ export default defineComponent({
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
|
||||
:deep(.item-card-header) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mapping-section-title {
|
||||
@ -521,6 +527,13 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-content-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mapping-source {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -530,13 +543,20 @@ export default defineComponent({
|
||||
|
||||
.source-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.used-by {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mapping-arrow {
|
||||
color: var(--muted);
|
||||
font-size: 16px;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.mapping-target {
|
||||
@ -553,4 +573,5 @@ export default defineComponent({
|
||||
.line-height-20 {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
@ -23,18 +23,6 @@ const schema = {
|
||||
metadata: { name: HCI.FORKLIFT_PROVIDER },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ForkliftConfigureProvider',
|
||||
|
||||
components: {
|
||||
LabeledInput,
|
||||
Checkbox,
|
||||
Banner,
|
||||
Masthead,
|
||||
AsyncButton,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -52,10 +40,25 @@ export default defineComponent({
|
||||
const createdProvider = ref(null);
|
||||
const createdSecret = ref(null);
|
||||
const loading = ref(true);
|
||||
const testPassed = ref(false);
|
||||
|
||||
const isFormValid = computed(() => !!providerName.value && !!url.value && !!username.value && !!password.value);
|
||||
|
||||
const cancel = () => {
|
||||
// Reset test state when any field changes
|
||||
watch([providerName, url, username, password], () => {
|
||||
testPassed.value = false;
|
||||
testResult.value = null;
|
||||
});
|
||||
|
||||
const cancel = async() => {
|
||||
if (createdProvider.value) {
|
||||
await createdProvider.value.remove();
|
||||
createdProvider.value = null;
|
||||
} else if (createdSecret.value) {
|
||||
await createdSecret.value.remove();
|
||||
createdSecret.value = null;
|
||||
}
|
||||
|
||||
router.push({
|
||||
name: `${ PRODUCT_NAME }-c-cluster-forklift`,
|
||||
params: {
|
||||
@ -79,41 +82,20 @@ export default defineComponent({
|
||||
const inStore = store.getters['currentProduct'].inStore;
|
||||
|
||||
try {
|
||||
// Delete previous provider (cascades to secret via ownerReferences)
|
||||
if (createdProvider.value) {
|
||||
await createdProvider.value.remove();
|
||||
createdProvider.value = null;
|
||||
}
|
||||
if (createdSecret.value) {
|
||||
createdSecret.value = null;
|
||||
} else if (createdSecret.value) {
|
||||
await createdSecret.value.remove();
|
||||
createdSecret.value = null;
|
||||
}
|
||||
|
||||
const namespace = 'default';
|
||||
const namespace = 'forklift';
|
||||
const secretName = `${ providerName.value }-creds-${ randomStr(4).toLowerCase() }`;
|
||||
|
||||
const newSecret = await store.dispatch(`${ inStore }/create`, {
|
||||
type: SECRET,
|
||||
metadata: {
|
||||
name: secretName,
|
||||
namespace,
|
||||
labels: {
|
||||
createdForProviderType: 'vsphere',
|
||||
createdForResourceType: 'providers',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
newSecret['_type'] = 'Opaque';
|
||||
newSecret['data'] = {
|
||||
user: btoa(username.value),
|
||||
password: btoa(password.value),
|
||||
insecureSkipVerify: btoa(String(skipTlsVerify.value)),
|
||||
url: btoa(url.value),
|
||||
};
|
||||
|
||||
await newSecret.save();
|
||||
createdSecret.value = newSecret;
|
||||
|
||||
// Create Provider first so we have its UID for the ownerReference on the Secret
|
||||
const provider = await store.dispatch(`${ inStore }/create`, {
|
||||
type: HCI.FORKLIFT_PROVIDER,
|
||||
metadata: {
|
||||
@ -133,6 +115,39 @@ export default defineComponent({
|
||||
await provider.save();
|
||||
createdProvider.value = provider;
|
||||
|
||||
// Create Secret with ownerReference already set (avoids an extra PUT)
|
||||
const newSecret = await store.dispatch(`${ inStore }/create`, {
|
||||
type: SECRET,
|
||||
metadata: {
|
||||
name: secretName,
|
||||
namespace,
|
||||
labels: {
|
||||
createdForProviderType: 'vsphere',
|
||||
createdForResourceType: 'providers',
|
||||
},
|
||||
ownerReferences: [
|
||||
{
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'Provider',
|
||||
name: provider.metadata.name,
|
||||
uid: provider.metadata.uid,
|
||||
blockOwnerDeletion: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
});
|
||||
|
||||
newSecret['_type'] = 'Opaque';
|
||||
newSecret['data'] = {
|
||||
user: btoa(username.value),
|
||||
password: btoa(password.value),
|
||||
insecureSkipVerify: btoa(String(skipTlsVerify.value)),
|
||||
url: btoa(url.value),
|
||||
};
|
||||
|
||||
await newSecret.save();
|
||||
createdSecret.value = newSecret;
|
||||
|
||||
const maxAttempts = 15;
|
||||
let attempts = 0;
|
||||
let connected = false;
|
||||
@ -174,14 +189,15 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
if (connected) {
|
||||
testPassed.value = true;
|
||||
testResult.value = t('harvester.addons.forklift.configureProvider.testSuccess');
|
||||
buttonCb(true);
|
||||
} else {
|
||||
if (createdProvider.value) {
|
||||
await createdProvider.value.remove();
|
||||
createdProvider.value = null;
|
||||
}
|
||||
if (createdSecret.value) {
|
||||
createdSecret.value = null;
|
||||
} else if (createdSecret.value) {
|
||||
await createdSecret.value.remove();
|
||||
createdSecret.value = null;
|
||||
}
|
||||
@ -209,85 +225,36 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const saveProvider = async(buttonCb) => {
|
||||
const inStore = store.getters['currentProduct'].inStore;
|
||||
|
||||
errors.value = [];
|
||||
|
||||
try {
|
||||
if (createdProvider.value) {
|
||||
if (!testPassed.value) {
|
||||
// Test hasn't passed yet — run it first
|
||||
await testConnection((success) => {
|
||||
if (success) {
|
||||
router.push({
|
||||
name: `${ PRODUCT_NAME }-c-cluster-forklift-select-vms`,
|
||||
params: {
|
||||
product: route.params.product,
|
||||
cluster: route.params.cluster,
|
||||
},
|
||||
query: {
|
||||
provider: providerName.value,
|
||||
namespace: createdProvider.value.metadata.namespace,
|
||||
query: { provider: providerName.value }
|
||||
});
|
||||
} else {
|
||||
buttonCb(false);
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const namespace = 'default';
|
||||
const secretName = `${ providerName.value }-creds-${ randomStr(4).toLowerCase() }`;
|
||||
|
||||
const newSecret = await store.dispatch(`${ inStore }/create`, {
|
||||
type: SECRET,
|
||||
metadata: {
|
||||
name: secretName,
|
||||
namespace,
|
||||
labels: {
|
||||
createdForProviderType: 'vsphere',
|
||||
createdForResourceType: 'providers',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
newSecret['_type'] = 'Opaque';
|
||||
newSecret['data'] = {
|
||||
user: btoa(username.value),
|
||||
password: btoa(password.value),
|
||||
insecureSkipVerify: btoa(String(skipTlsVerify.value)),
|
||||
url: btoa(url.value),
|
||||
};
|
||||
|
||||
await newSecret.save();
|
||||
|
||||
const provider = await store.dispatch(`${ inStore }/create`, {
|
||||
type: HCI.FORKLIFT_PROVIDER,
|
||||
metadata: {
|
||||
name: providerName.value,
|
||||
namespace,
|
||||
},
|
||||
spec: {
|
||||
type: 'vsphere',
|
||||
url: url.value,
|
||||
secret: {
|
||||
name: secretName,
|
||||
namespace,
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
await provider.save();
|
||||
|
||||
router.push({
|
||||
name: `${ PRODUCT_NAME }-c-cluster-forklift-select-vms`,
|
||||
params: {
|
||||
product: route.params.product,
|
||||
cluster: route.params.cluster,
|
||||
},
|
||||
query: {
|
||||
provider: providerName.value,
|
||||
namespace,
|
||||
}
|
||||
query: { provider: providerName.value }
|
||||
});
|
||||
} catch (err) {
|
||||
errors.value = [err.message || err];
|
||||
buttonCb(false);
|
||||
}
|
||||
};
|
||||
|
||||
const init = async() => {
|
||||
@ -298,27 +265,6 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
schema,
|
||||
allSecrets,
|
||||
providerName,
|
||||
url,
|
||||
username,
|
||||
password,
|
||||
skipTlsVerify,
|
||||
testResult,
|
||||
testError,
|
||||
errors,
|
||||
loading,
|
||||
isFormValid,
|
||||
t,
|
||||
cancel,
|
||||
testConnection,
|
||||
saveProvider,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -402,8 +348,17 @@ export default defineComponent({
|
||||
</div>
|
||||
|
||||
<div class="mb-20">
|
||||
<button
|
||||
v-if="testPassed"
|
||||
class="btn role-secondary test-passed-btn"
|
||||
disabled
|
||||
>
|
||||
<i class="icon icon-checkmark mr-10" /> {{ t('harvester.addons.forklift.configureProvider.testConnection') }}
|
||||
</button>
|
||||
<AsyncButton
|
||||
v-else
|
||||
mode="test"
|
||||
:disabled="!isFormValid"
|
||||
:action-label="t('harvester.addons.forklift.configureProvider.testConnection')"
|
||||
:waiting-label="t('harvester.addons.forklift.configureProvider.testConnection')"
|
||||
:success-label="t('harvester.addons.forklift.configureProvider.testConnection')"
|
||||
@ -474,4 +429,9 @@ export default defineComponent({
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.test-passed-btn {
|
||||
color: var(--success) !important;
|
||||
border-color: var(--success) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute } from 'vue-router';
|
||||
import Loading from '@shell/components/Loading';
|
||||
@ -24,18 +24,6 @@ const schema = {
|
||||
metadata: { name: HCI.FORKLIFT_PLAN },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ForkliftMigrationDashboard',
|
||||
|
||||
components: {
|
||||
Loading,
|
||||
Masthead,
|
||||
MappingsCell,
|
||||
PercentageBar,
|
||||
ResourceTable,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n(store);
|
||||
@ -69,32 +57,43 @@ export default defineComponent({
|
||||
|
||||
plan.vmProgress = vms.map((vm) => {
|
||||
const pipeline = vm.pipeline || [];
|
||||
const totalSteps = pipeline.length;
|
||||
const completedSteps = pipeline.filter((s) => s.phase === 'Completed').length;
|
||||
const totalSteps = pipeline.length || 1;
|
||||
let overallProgress = 0;
|
||||
let currentStep = '';
|
||||
let errorMsg = '';
|
||||
|
||||
pipeline.forEach((step, idx) => {
|
||||
const stepWeight = 100 / totalSteps;
|
||||
|
||||
if (step.phase === 'Completed') {
|
||||
overallProgress += stepWeight;
|
||||
} else {
|
||||
const stepPct = (step.progress?.completed && step.progress?.total) ? (step.progress.completed / step.progress.total) * 100 : 0;
|
||||
|
||||
overallProgress += (stepPct / 100) * stepWeight;
|
||||
|
||||
if (!currentStep) {
|
||||
currentStep = step.name || `Step ${ idx + 1 }`;
|
||||
}
|
||||
|
||||
if (step.error) {
|
||||
errorMsg = (step.error.reasons || []).join('; ') || 'Error';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
overallProgress = Math.round(overallProgress);
|
||||
|
||||
return {
|
||||
name: vm.id || vm.name || 'Unknown',
|
||||
steps: pipeline.map((step) => ({
|
||||
name: step.name || 'Unknown',
|
||||
progress: step.phase === 'Completed' ? 100 : (step.progress?.completed && step.progress?.total ? Math.round((step.progress.completed / step.progress.total) * 100) : 0),
|
||||
hasError: !!step.error,
|
||||
reason: (step.error?.reasons || []).join('; ') || '',
|
||||
})),
|
||||
progress: totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0,
|
||||
vmName: vm.name || vm.id || 'Unknown',
|
||||
vmId: vm.id || '',
|
||||
progress: overallProgress,
|
||||
currentStep,
|
||||
errorMsg,
|
||||
};
|
||||
});
|
||||
|
||||
let totalSteps = 0;
|
||||
let completedSteps = 0;
|
||||
|
||||
vms.forEach((vm) => {
|
||||
const pipeline = vm.pipeline || [];
|
||||
|
||||
totalSteps += pipeline.length;
|
||||
completedSteps += pipeline.filter((s) => s.phase === 'Completed').length;
|
||||
});
|
||||
|
||||
plan.progress = totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0;
|
||||
plan.progress = plan.vmProgress.length > 0 ? Math.round(plan.vmProgress.reduce((sum, vm) => sum + vm.progress, 0) / plan.vmProgress.length) : 0;
|
||||
|
||||
return plan;
|
||||
});
|
||||
@ -120,13 +119,12 @@ export default defineComponent({
|
||||
name: 'progress',
|
||||
labelKey: 'harvester.addons.forklift.dashboard.columns.progress',
|
||||
value: 'progress',
|
||||
width: 299,
|
||||
width: 500,
|
||||
},
|
||||
{
|
||||
name: 'mappings',
|
||||
labelKey: 'harvester.addons.forklift.dashboard.columns.mappings',
|
||||
value: 'mappingsDisplay',
|
||||
width: 387,
|
||||
},
|
||||
{ ...AGE },
|
||||
];
|
||||
@ -142,17 +140,6 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
schema,
|
||||
loading,
|
||||
rows,
|
||||
createLocation,
|
||||
headers,
|
||||
t,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -210,41 +197,43 @@ export default defineComponent({
|
||||
<template #cell:progress="{ row }">
|
||||
<div
|
||||
v-if="row.vmProgress && row.vmProgress.length"
|
||||
class="progress-steps"
|
||||
class="progress-cells"
|
||||
>
|
||||
<div
|
||||
v-for="vm in row.vmProgress"
|
||||
:key="vm.name"
|
||||
:key="vm.vmId"
|
||||
class="vm-progress"
|
||||
>
|
||||
<div class="vm-name">
|
||||
{{ vm.name }}
|
||||
<div class="vm-progress-header">
|
||||
<div class="vm-name-block">
|
||||
<span class="vm-name">{{ vm.vmName }}</span>
|
||||
<span class="text-muted vm-id">id: {{ vm.vmId }}</span>
|
||||
</div>
|
||||
<span class="vm-pct">{{ vm.progress }}%</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="step in vm.steps"
|
||||
:key="step.name"
|
||||
class="progress-step"
|
||||
>
|
||||
<span
|
||||
class="step-name"
|
||||
:class="{ 'text-error': step.hasError }"
|
||||
>
|
||||
{{ step.name }}
|
||||
</span>
|
||||
<PercentageBar
|
||||
:model-value="step.progress"
|
||||
:color-stops="step.hasError ? { 0: '--error' } : { 99: '--primary', 100: '--success' }"
|
||||
:model-value="vm.progress"
|
||||
:color-stops="vm.errorMsg ? { 0: '--error' } : { 99: '--primary', 100: '--success' }"
|
||||
preferred-direction="MORE"
|
||||
class="step-bar"
|
||||
class="vm-bar"
|
||||
/>
|
||||
<span class="step-pct">{{ step.progress }}%</span>
|
||||
<div
|
||||
v-if="vm.progress === 100"
|
||||
class="step-label text-muted"
|
||||
>
|
||||
Finished Successfully
|
||||
</div>
|
||||
<div
|
||||
v-for="step in vm.steps.filter(s => s.hasError)"
|
||||
:key="`error-${step.name}`"
|
||||
class="step-error-msg"
|
||||
v-else-if="vm.errorMsg"
|
||||
class="step-label text-error"
|
||||
>
|
||||
<span class="text-error">{{ step.reason }}</span>
|
||||
{{ vm.errorMsg }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="vm.currentStep"
|
||||
class="step-label text-muted"
|
||||
>
|
||||
{{ vm.currentStep }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -274,50 +263,54 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.progress-steps {
|
||||
.progress-cells {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.vm-progress {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 6px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
.vm-progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.vm-name {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
.vm-name-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
padding-right: 13px;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.step-error-msg {
|
||||
.vm-id {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.vm-pct {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vm-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
|
||||
.text-error {
|
||||
color: var(--error);
|
||||
}
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-size: 12px;
|
||||
width: 110px;
|
||||
min-width: 110px;
|
||||
max-width: 110px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 20px;
|
||||
|
||||
&.text-error {
|
||||
color: var(--error);
|
||||
@ -325,17 +318,6 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.step-bar {
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.step-pct {
|
||||
font-size: 12px;
|
||||
min-width: 35px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Loading from '@shell/components/Loading';
|
||||
@ -24,19 +24,6 @@ const schema = {
|
||||
metadata: { name: HCI.FORKLIFT_PLAN },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ForkliftReviewMigration',
|
||||
|
||||
components: {
|
||||
Loading,
|
||||
Masthead,
|
||||
AsyncButton,
|
||||
Banner,
|
||||
MappingsCell,
|
||||
RcItemCard,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -48,8 +35,9 @@ export default defineComponent({
|
||||
const errors = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
const NAMESPACE = 'forklift';
|
||||
const TARGET_NAMESPACE = 'default';
|
||||
const providerName = computed(() => route.query.provider || 'vsphere');
|
||||
const namespace = computed(() => route.query.namespace || 'default');
|
||||
const networkMapName = computed(() => route.query.networkMap || '');
|
||||
const storageMapName = computed(() => route.query.storageMap || '');
|
||||
|
||||
@ -88,8 +76,8 @@ export default defineComponent({
|
||||
const diskDisplay = totalDiskBytes ? `${ Math.round(totalDiskBytes / (1024 * 1024 * 1024)) } GB` : '-';
|
||||
const os = vm.guestName || vm.guestOS || vm.os || '-';
|
||||
|
||||
const vmNetworkMappings = networkMappings.value.filter((m) => m.vmId === vm.id);
|
||||
const vmStorageMappings = storageMappings.value.filter((m) => m.vmId === vm.id);
|
||||
const vmNetworkMappings = networkMappings.value.filter((m) => m.usedBy && m.usedBy.includes(vm.name || vm.id));
|
||||
const vmStorageMappings = storageMappings.value.filter((m) => m.usedBy && m.usedBy.includes(vm.name || vm.id));
|
||||
|
||||
return {
|
||||
id: vm.id,
|
||||
@ -104,7 +92,15 @@ export default defineComponent({
|
||||
});
|
||||
});
|
||||
|
||||
const cancel = () => {
|
||||
const cancel = async() => {
|
||||
const inStore = store.getters['currentProduct'].inStore;
|
||||
const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
|
||||
const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE);
|
||||
|
||||
if (provider) {
|
||||
await provider.remove();
|
||||
}
|
||||
|
||||
router.push({
|
||||
name: `${ PRODUCT_NAME }-c-cluster-forklift`,
|
||||
params: {
|
||||
@ -126,13 +122,13 @@ export default defineComponent({
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'Provider',
|
||||
name: providerName.value,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
destination: {
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'Provider',
|
||||
name: 'host',
|
||||
namespace: 'forklift',
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
},
|
||||
map: {
|
||||
@ -140,16 +136,16 @@ export default defineComponent({
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'NetworkMap',
|
||||
name: networkMapName.value,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
storage: {
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'StorageMap',
|
||||
name: storageMapName.value,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
},
|
||||
targetNamespace: namespace.value,
|
||||
targetNamespace: 'default',
|
||||
vms: vms.value.map((vm) => ({
|
||||
id: vm.id,
|
||||
name: vm.name || vm.id,
|
||||
@ -161,33 +157,56 @@ export default defineComponent({
|
||||
type: HCI.FORKLIFT_PLAN,
|
||||
metadata: {
|
||||
name: planName,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
spec: planSpec,
|
||||
});
|
||||
|
||||
await plan.save();
|
||||
|
||||
// Build ownerReference pointing to the Plan
|
||||
const planOwnerRef = {
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'Plan',
|
||||
name: plan.metadata.name,
|
||||
uid: plan.metadata.uid,
|
||||
blockOwnerDeletion: true,
|
||||
};
|
||||
|
||||
// Create Migration owned by Plan
|
||||
const migrationName = `${ planName }-migration-${ Math.random().toString(36).substring(2, 7) }`;
|
||||
|
||||
const migration = await store.dispatch(`${ inStore }/create`, {
|
||||
type: HCI.FORKLIFT_MIGRATION,
|
||||
metadata: {
|
||||
name: migrationName,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
ownerReferences: [planOwnerRef],
|
||||
},
|
||||
spec: {
|
||||
plan: {
|
||||
apiVersion: 'forklift.konveyor.io/v1beta1',
|
||||
kind: 'Plan',
|
||||
name: planName,
|
||||
namespace: namespace.value,
|
||||
namespace: NAMESPACE,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await migration.save();
|
||||
|
||||
// Set Plan as owner of Provider (Provider already owns NetworkMap, StorageMap, Secret)
|
||||
const allProviders = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
|
||||
const provider = allProviders.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === NAMESPACE);
|
||||
|
||||
if (provider) {
|
||||
provider.metadata.ownerReferences = [
|
||||
...(provider.metadata.ownerReferences || []),
|
||||
planOwnerRef,
|
||||
];
|
||||
await provider.save();
|
||||
}
|
||||
|
||||
router.push({
|
||||
name: `${ PRODUCT_NAME }-c-cluster-forklift`,
|
||||
params: {
|
||||
@ -246,24 +265,6 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
schema,
|
||||
loading,
|
||||
vms,
|
||||
errors,
|
||||
providerName,
|
||||
namespace,
|
||||
totalVCpu,
|
||||
totalMemoryGB,
|
||||
totalStorageGB,
|
||||
vmCards,
|
||||
t,
|
||||
cancel,
|
||||
startMigration,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -310,7 +311,7 @@ export default defineComponent({
|
||||
<span class="detail-label">{{ t('harvester.addons.forklift.reviewMigration.targetNamespace') }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-value">{{ namespace }}</span>
|
||||
<span class="detail-value">{{ TARGET_NAMESPACE }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-column">
|
||||
@ -334,9 +335,6 @@ export default defineComponent({
|
||||
<div class="detail-item">
|
||||
<span class="detail-value">
|
||||
{{ t('harvester.addons.forklift.reviewMigration.coldMigration') }}
|
||||
<span
|
||||
class="ml-10 small-text"
|
||||
>{{ t('harvester.addons.forklift.reviewMigration.vmsWillShutDown') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<script>
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Loading from '@shell/components/Loading';
|
||||
import Masthead from '@shell/components/ResourceList/Masthead';
|
||||
import SortableTable from '@shell/components/SortableTable';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import { BadgeState } from '@components/BadgeState';
|
||||
import { SCHEMA } from '@shell/config/types';
|
||||
import { useI18n } from '@shell/composables/useI18n';
|
||||
import { HCI } from '../../../../types';
|
||||
@ -22,17 +22,6 @@ const schema = {
|
||||
metadata: { name: HCI.FORKLIFT_PROVIDER },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ForkliftSelectVms',
|
||||
|
||||
components: {
|
||||
Loading,
|
||||
Masthead,
|
||||
SortableTable,
|
||||
LabeledInput,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -42,35 +31,26 @@ export default defineComponent({
|
||||
const provider = ref(null);
|
||||
const discoveredVMs = ref([]);
|
||||
const selectedVMs = ref([]);
|
||||
const manualVMs = ref([]);
|
||||
const newVmId = ref('');
|
||||
const tableRows = ref([]);
|
||||
const loading = ref(true);
|
||||
|
||||
const providerName = computed(() => provider.value?.metadata?.name || route.query.provider || '');
|
||||
const vmCount = computed(() => discoveredVMs.value.length);
|
||||
const showManualEntry = computed(() => discoveredVMs.value.length === 0);
|
||||
const selectedCount = computed(() => showManualEntry.value ? manualVMs.value.length : selectedVMs.value.length);
|
||||
|
||||
const manualHeaders = [
|
||||
{
|
||||
name: 'id',
|
||||
labelKey: 'harvester.addons.forklift.selectVms.columns.vmId',
|
||||
value: 'id',
|
||||
},
|
||||
];
|
||||
const selectedCount = computed(() => selectedVMs.value.length);
|
||||
|
||||
const headers = [
|
||||
{
|
||||
name: 'vmName',
|
||||
labelKey: 'harvester.addons.forklift.selectVms.columns.vmName',
|
||||
value: 'vmName',
|
||||
sort: ['vmName'],
|
||||
subLabel: 'Identifier',
|
||||
},
|
||||
{
|
||||
name: 'os',
|
||||
labelKey: 'harvester.addons.forklift.selectVms.columns.os',
|
||||
value: 'os',
|
||||
sort: ['os'],
|
||||
},
|
||||
{
|
||||
name: 'resources',
|
||||
@ -82,17 +62,20 @@ export default defineComponent({
|
||||
name: 'powerState',
|
||||
labelKey: 'harvester.addons.forklift.selectVms.columns.powerState',
|
||||
value: 'powerState',
|
||||
sort: ['powerState'],
|
||||
},
|
||||
{
|
||||
name: 'network',
|
||||
labelKey: 'harvester.addons.forklift.selectVms.columns.network',
|
||||
value: 'network',
|
||||
sort: ['network'],
|
||||
subLabel: 'Identifier',
|
||||
},
|
||||
{
|
||||
name: 'datastore',
|
||||
labelKey: 'harvester.addons.forklift.selectVms.columns.datastore',
|
||||
value: 'datastore',
|
||||
sort: ['datastore'],
|
||||
subLabel: 'Identifier',
|
||||
},
|
||||
];
|
||||
@ -110,7 +93,8 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const diskDisplay = totalDiskBytes ? `${ Math.round(totalDiskBytes / (1024 * 1024 * 1024)) } GB` : '-';
|
||||
const powerState = vm.powerState || vm.status?.phase || '-';
|
||||
const rawPowerState = vm.powerState || vm.status?.phase || '-';
|
||||
const powerState = rawPowerState.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (c) => c.toUpperCase());
|
||||
|
||||
let networks = [];
|
||||
|
||||
@ -160,29 +144,19 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
|
||||
const addManualVm = () => {
|
||||
if (!newVmId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
manualVMs.value.push({
|
||||
id: newVmId.value.trim(),
|
||||
name: newVmId.value.trim(),
|
||||
_key: `manual-${ newVmId.value.trim() }`,
|
||||
});
|
||||
|
||||
newVmId.value = '';
|
||||
};
|
||||
|
||||
const removeManualVm = (index) => {
|
||||
manualVMs.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onSelect = (rows) => {
|
||||
selectedVMs.value = rows.map((r) => r._original);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
const cancel = async() => {
|
||||
const inStore = store.getters['currentProduct'].inStore;
|
||||
const providers = store.getters[`${ inStore }/all`](HCI.FORKLIFT_PROVIDER) || [];
|
||||
const found = providers.find((p) => p.metadata.name === providerName.value && p.metadata.namespace === 'forklift');
|
||||
|
||||
if (found) {
|
||||
await found.remove();
|
||||
}
|
||||
|
||||
router.push({
|
||||
name: `${ PRODUCT_NAME }-c-cluster-forklift`,
|
||||
params: {
|
||||
@ -193,13 +167,7 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const saveSelection = () => {
|
||||
let vmIds;
|
||||
|
||||
if (showManualEntry.value) {
|
||||
vmIds = manualVMs.value.map((vm) => vm.id);
|
||||
} else {
|
||||
vmIds = selectedVMs.value.map((vm) => vm.id || vm.vmId || vm.metadata?.name);
|
||||
}
|
||||
const vmIds = selectedVMs.value.map((vm) => vm.id || vm.vmId || vm.metadata?.name);
|
||||
|
||||
router.push({
|
||||
name: `${ PRODUCT_NAME }-c-cluster-forklift-configure-mappings`,
|
||||
@ -209,7 +177,6 @@ export default defineComponent({
|
||||
},
|
||||
query: {
|
||||
provider: providerName.value,
|
||||
namespace: provider.value?.metadata?.namespace || 'default',
|
||||
vms: JSON.stringify(vmIds),
|
||||
}
|
||||
});
|
||||
@ -221,11 +188,10 @@ export default defineComponent({
|
||||
allProviders.value = await store.dispatch(`${ inStore }/findAll`, { type: HCI.FORKLIFT_PROVIDER });
|
||||
|
||||
const queryProvider = route.query.provider;
|
||||
const namespace = route.query.namespace || 'default';
|
||||
|
||||
if (queryProvider) {
|
||||
provider.value = allProviders.value.find(
|
||||
(p) => p.metadata.name === queryProvider && p.metadata.namespace === namespace
|
||||
(p) => p.metadata.name === queryProvider && p.metadata.namespace === 'forklift'
|
||||
);
|
||||
}
|
||||
|
||||
@ -248,31 +214,6 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
schema,
|
||||
loading,
|
||||
provider,
|
||||
providerName,
|
||||
discoveredVMs,
|
||||
selectedVMs,
|
||||
manualVMs,
|
||||
newVmId,
|
||||
tableRows,
|
||||
vmCount,
|
||||
showManualEntry,
|
||||
selectedCount,
|
||||
manualHeaders,
|
||||
headers,
|
||||
t,
|
||||
addManualVm,
|
||||
removeManualVm,
|
||||
onSelect,
|
||||
cancel,
|
||||
saveSelection,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -299,66 +240,8 @@ export default defineComponent({
|
||||
</template>
|
||||
</Masthead>
|
||||
|
||||
<!-- Manual VM entry when no discovered VMs -->
|
||||
<div v-if="showManualEntry">
|
||||
<h3 class="m-0 mb-10">
|
||||
{{ t('harvester.addons.forklift.selectVms.manualEntry.title') }}
|
||||
</h3>
|
||||
<p class="text-muted mb-20">
|
||||
{{ t('harvester.addons.forklift.selectVms.manualEntry.description') }}
|
||||
</p>
|
||||
|
||||
<div class="manual-vm-form">
|
||||
<div class="row">
|
||||
<div class="col span-6">
|
||||
<LabeledInput
|
||||
v-model:value="newVmId"
|
||||
:label="t('harvester.addons.forklift.selectVms.manualEntry.vmId')"
|
||||
:placeholder="t('harvester.addons.forklift.selectVms.manualEntry.vmIdPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col span-2 add-btn-col">
|
||||
<button
|
||||
class="btn role-primary"
|
||||
:disabled="!newVmId"
|
||||
@click="addManualVm"
|
||||
>
|
||||
{{ t('harvester.addons.forklift.selectVms.manualEntry.add') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SortableTable
|
||||
:rows="manualVMs"
|
||||
:headers="manualHeaders"
|
||||
:search="false"
|
||||
:table-actions="false"
|
||||
:row-actions="false"
|
||||
:groupable="false"
|
||||
key-field="_key"
|
||||
class="mt-20"
|
||||
>
|
||||
<template #header-left>
|
||||
<span class="text-muted">{{ manualVMs.length }} {{ t('harvester.addons.forklift.selectVms.manualEntry.added') }}</span>
|
||||
</template>
|
||||
<template #cell:id="{ row }">
|
||||
<div class="manual-vm-row">
|
||||
<span>{{ row.id }}</span>
|
||||
<button
|
||||
class="btn btn-sm role-link"
|
||||
@click="removeManualVm(manualVMs.indexOf(row))"
|
||||
>
|
||||
<i class="icon icon-close" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</SortableTable>
|
||||
</div>
|
||||
|
||||
<!-- Discovered VMs table -->
|
||||
<SortableTable
|
||||
v-else
|
||||
:rows="tableRows"
|
||||
:headers="headers"
|
||||
:search="true"
|
||||
@ -387,10 +270,10 @@ export default defineComponent({
|
||||
<span class="text-muted">{{ row.resourcesSub }}</span>
|
||||
</template>
|
||||
<template #cell:powerState="{ row }">
|
||||
<span
|
||||
class="power-badge"
|
||||
:class="row.powerStateClass"
|
||||
>{{ row.powerState }}</span>
|
||||
<BadgeState
|
||||
:label="row.powerState"
|
||||
:color="row.powerStateClass === 'power-on' ? 'bg-warning' : 'bg-darker'"
|
||||
/>
|
||||
</template>
|
||||
<template #cell:network="{ row }">
|
||||
<div>
|
||||
@ -456,59 +339,17 @@ export default defineComponent({
|
||||
.vm-name-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
|
||||
.vm-name {
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.vm-id {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.power-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
&.power-on {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
&.power-off {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
}
|
||||
|
||||
.manual-vm-form {
|
||||
.add-btn-col {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.manual-vm-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.multi-line-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.actions-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user