etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

combine add/clone disk/compute offering forms

This commit is contained in:
Pearl Dsilva 2026-01-20 16:33:44 -05:00
parent 3aa1040ef4
commit 3981d423d3
12 changed files with 1807 additions and 2537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java
View File

@ -3929,11 +3929,11 @@ public class ConfigurationManagerImpl extends ManagerBase implements Configurati
return sourceDiskOfferingId != null ? _diskOfferingDao.findById(sourceDiskOfferingId) : null;
}
private <T> T getOrDefault(T cmdValue, T defaultValue) {
public <T> T getOrDefault(T cmdValue, T defaultValue) {
return cmdValue != null ? cmdValue : defaultValue;
}
private Boolean resolveBooleanParam(Map<String, String> requestParams, String paramKey,
public Boolean resolveBooleanParam(Map<String, String> requestParams, String paramKey,
java.util.function.Supplier<Boolean> cmdValueSupplier, Boolean defaultValue) {
return requestParams != null && requestParams.containsKey(paramKey) ? cmdValueSupplier.get() : defaultValue;
}
@ -8287,7 +8287,39 @@ public class ConfigurationManagerImpl extends ManagerBase implements Configurati
logger.info("Cloning network offering {} (id: {}) to new offering with name: {}",
sourceOffering.getName(), sourceOfferingId, name);
// Resolve parameters from source offering and apply add/drop logic
String detectedProvider = cmd.getProvider();
if (detectedProvider == null || detectedProvider.isEmpty()) {
Map<Network.Service, Set<Network.Provider>> sourceServiceProviderMap =
_networkModel.getNetworkOfferingServiceProvidersMap(sourceOfferingId);
if (sourceServiceProviderMap.containsKey(Network.Service.NetworkACL)) {
Set<Network.Provider> networkAclProviders = sourceServiceProviderMap.get(Network.Service.NetworkACL);
if (networkAclProviders != null && !networkAclProviders.isEmpty()) {
Network.Provider provider = networkAclProviders.iterator().next();
if (provider == Network.Provider.Nsx) {
detectedProvider = "NSX";
} else if (provider == Network.Provider.Netris) {
detectedProvider = "Netris";
}
}
}
}
// If this is an NSX/Netris offering, prevent network mode changes
if (detectedProvider != null && (detectedProvider.equals("NSX") || detectedProvider.equals("Netris"))) {
String cmdNetworkMode = cmd.getNetworkMode();
if (cmdNetworkMode != null && sourceOffering.getNetworkMode() != null) {
if (!cmdNetworkMode.equalsIgnoreCase(sourceOffering.getNetworkMode().toString())) {
throw new InvalidParameterValueException(
String.format("Cannot change network mode when cloning %s provider network offerings. " +
"Source offering has network mode '%s', but '%s' was specified. " +
"The network mode is determined by the provider configuration and cannot be modified.",
detectedProvider, sourceOffering.getNetworkMode(), cmdNetworkMode));
}
}
}
applySourceOfferingValuesToCloneCmd(cmd, sourceOffering);
return createNetworkOffering(cmd);
@ -8443,7 +8475,20 @@ public class ConfigurationManagerImpl extends ManagerBase implements Configurati
.anyMatch(key -> key.startsWith(ApiConstants.SERVICE_CAPABILITY_LIST));
if (!hasCapabilityParams && sourceServiceCapabilityList != null && !sourceServiceCapabilityList.isEmpty()) {
setField(cmd, "serviceCapabilitiesList", sourceServiceCapabilityList);
// Filter capabilities to only include those for services in the final service list
// This ensures that if services are dropped, their capabilities are also removed
Map<String, Map<String, String>> filteredCapabilities = new HashMap<>();
for (Map.Entry<String, Map<String, String>> entry : sourceServiceCapabilityList.entrySet()) {
Map<String, String> capabilityMap = entry.getValue();
String serviceName = capabilityMap.get("service");
if (serviceName != null && finalServices.contains(serviceName)) {
filteredCapabilities.put(entry.getKey(), capabilityMap);
}
}
if (!filteredCapabilities.isEmpty()) {
setField(cmd, "serviceCapabilitiesList", filteredCapabilities);
}
}
applyIfNotProvided(cmd, requestParams, "displayText", ApiConstants.DISPLAY_TEXT, cmd.getDisplayText(), sourceOffering.getDisplayText());

46
server/src/main/java/com/cloud/network/vpc/VpcManagerImpl.java
View File

@ -1024,7 +1024,10 @@ public class VpcManagerImpl extends ManagerBase implements VpcManager, VpcProvis
if ((cmd.getServiceCapabilityList() == null || cmd.getServiceCapabilityList().isEmpty())
&& sourceServiceCapabilityList != null && !sourceServiceCapabilityList.isEmpty()) {
ConfigurationManagerImpl.setField(cmd, "serviceCapabilityList", sourceServiceCapabilityList);
Map<String, String> filteredCapabilities = filterServiceCapabilities(sourceServiceCapabilityList, finalServices);
if (!filteredCapabilities.isEmpty()) {
ConfigurationManagerImpl.setField(cmd, "serviceCapabilityList", filteredCapabilities);
}
}
if (cmd.getDisplayText() == null && sourceOffering.getDisplayText() != null) {
@ -1095,6 +1098,47 @@ public class VpcManagerImpl extends ManagerBase implements VpcManager, VpcProvis
return null;
}
/**
* Filters service capabilities to only include those for services present in the final services list.
* This ensures that when services are dropped during cloning, their associated capabilities are also removed.
*
* @param sourceServiceCapabilityList The original capability list from the source VPC offering
* in format: Map with keys like "0.service", "0.capabilitytype", "0.capabilityvalue"
* @param finalServices The list of service names that should be retained in the cloned offering
* @return Filtered map containing only capabilities for services in finalServices
*/
private Map<String, String> filterServiceCapabilities(Map<String, String> sourceServiceCapabilityList,
List<String> finalServices) {
Map<String, String> filteredCapabilities = new HashMap<>();
for (Map.Entry<String, String> entry : sourceServiceCapabilityList.entrySet()) {
String key = entry.getKey();
String value = entry.getValue();
// Check if this is a service key (e.g., "0.service", "1.service")
if (key.endsWith(".service")) {
String serviceName = value;
if (finalServices.contains(serviceName)) {
// Include this service and its associated capability entries
String prefix = key.substring(0, key.lastIndexOf('.'));
filteredCapabilities.put(key, value);
// Also include the capability type and value for this service
String capabilityTypeKey = prefix + ".capabilitytype";
String capabilityValueKey = prefix + ".capabilityvalue";
if (sourceServiceCapabilityList.containsKey(capabilityTypeKey)) {
filteredCapabilities.put(capabilityTypeKey, sourceServiceCapabilityList.get(capabilityTypeKey));
}
if (sourceServiceCapabilityList.containsKey(capabilityValueKey)) {
filteredCapabilities.put(capabilityValueKey, sourceServiceCapabilityList.get(capabilityValueKey));
}
}
}
}
return filteredCapabilities;
}
private void validateConnectivtyServiceCapabilities(final Set<Provider> providers, final Map serviceCapabilitystList) {
if (serviceCapabilitystList != null && !serviceCapabilitystList.isEmpty()) {
final Collection serviceCapabilityCollection = serviceCapabilitystList.values();

4
server/src/test/java/com/cloud/configuration/ConfigurationManagerCloneIntegrationTest.java
View File

@ -22,7 +22,6 @@ import com.cloud.domain.DomainVO;
import com.cloud.domain.dao.DomainDao;
import com.cloud.exception.InvalidParameterValueException;
import com.cloud.network.Network;
import com.cloud.network.NetworkModel;
import com.cloud.network.Networks;
import com.cloud.offering.DiskOffering;
import com.cloud.offering.NetworkOffering;
@ -680,10 +679,9 @@ public class ConfigurationManagerCloneIntegrationTest {
when(sourceOffering.getAvailability()).thenReturn(NetworkOffering.Availability.Optional);
when(sourceOffering.getState()).thenReturn(NetworkOffering.State.Enabled);
when(sourceOffering.isDefault()).thenReturn(false);
when(sourceOffering.getConserveMode()).thenReturn(true);
when(sourceOffering.isConserveMode()).thenReturn(true);
when(sourceOffering.isEgressDefaultPolicy()).thenReturn(false);
when(sourceOffering.isPersistent()).thenReturn(false);
when(sourceOffering.getInternetProtocol()).thenReturn("ipv4");
CloneNetworkOfferingCmd cmd = mock(CloneNetworkOfferingCmd.class);
when(cmd.getSourceOfferingId()).thenReturn(sourceId);

37
server/src/test/java/com/cloud/configuration/ConfigurationManagerImplTest.java
View File

@ -40,11 +40,9 @@ import com.cloud.network.dao.PhysicalNetworkDao;
import com.cloud.network.element.NsxProviderVO;
import com.cloud.offering.DiskOffering;
import com.cloud.offering.NetworkOffering;
import com.cloud.offering.ServiceOffering;
import com.cloud.offerings.NetworkOfferingVO;
import com.cloud.offerings.dao.NetworkOfferingDao;
import com.cloud.service.ServiceOfferingVO;
import com.cloud.service.dao.ServiceOfferingDao;
import com.cloud.storage.DiskOfferingVO;
import com.cloud.storage.Storage;
import com.cloud.storage.StorageManager;
@ -1181,7 +1179,7 @@ public class ConfigurationManagerImplTest {
Long sourceOfferingId = 1L;
ServiceOfferingVO sourceOffering = Mockito.mock(ServiceOfferingVO.class);
DiskOfferingVO sourceDiskOffering = Mockito.mock(DiskOfferingVO.class);
when(sourceOffering.getId()).thenReturn(sourceOfferingId);
when(sourceOffering.getDisplayText()).thenReturn("Source Display Text");
when(sourceOffering.getCpu()).thenReturn(2);
@ -1213,7 +1211,7 @@ public class ConfigurationManagerImplTest {
@Test
public void testCloneServiceOfferingValidatesSourceOfferingExists() {
Long sourceOfferingId = 999L;
try (MockedStatic<CallContext> callContextMock = Mockito.mockStatic(CallContext.class)) {
CallContext callContext = Mockito.mock(CallContext.class);
callContextMock.when(CallContext::current).thenReturn(callContext);
@ -1227,7 +1225,7 @@ public class ConfigurationManagerImplTest {
public void testCloneDiskOfferingWithAllParameters() {
Long sourceOfferingId = 1L;
DiskOfferingVO sourceOffering = Mockito.mock(DiskOfferingVO.class);
when(sourceOffering.getId()).thenReturn(sourceOfferingId);
when(sourceOffering.getDisplayText()).thenReturn("Source Disk Display Text");
when(sourceOffering.getProvisioningType()).thenReturn(Storage.ProvisioningType.THIN);
@ -1252,7 +1250,7 @@ public class ConfigurationManagerImplTest {
@Test
public void testCloneDiskOfferingValidatesSourceOfferingExists() {
Long sourceOfferingId = 999L;
try (MockedStatic<CallContext> callContextMock = Mockito.mockStatic(CallContext.class)) {
CallContext callContext = Mockito.mock(CallContext.class);
callContextMock.when(CallContext::current).thenReturn(callContext);
@ -1262,18 +1260,11 @@ public class ConfigurationManagerImplTest {
}
}
@Test
public void testCloneNetworkOfferingValidatesSourceOfferingExists() {
Long sourceOfferingId = 999L;
Assert.assertNotNull(sourceOfferingId);
}
@Test
public void testCloneNetworkOfferingRequiresName() {
Long sourceOfferingId = 1L;
NetworkOfferingVO sourceOffering = Mockito.mock(NetworkOfferingVO.class);
when(sourceOffering.getId()).thenReturn(sourceOfferingId);
when(sourceOffering.getName()).thenReturn("Source Network Offering");
@ -1284,9 +1275,9 @@ public class ConfigurationManagerImplTest {
public void testGetOrDefaultReturnsCommandValueWhenNotNull() {
String cmdValue = "command-value";
String defaultValue = "default-value";
String result = configurationManagerImplSpy.getOrDefault(cmdValue, defaultValue);
Assert.assertEquals(cmdValue, result);
}
@ -1294,9 +1285,9 @@ public class ConfigurationManagerImplTest {
public void testGetOrDefaultReturnsDefaultWhenCommandValueIsNull() {
String cmdValue = null;
String defaultValue = "default-value";
String result = configurationManagerImplSpy.getOrDefault(cmdValue, defaultValue);
Assert.assertEquals(defaultValue, result);
}
@ -1304,22 +1295,22 @@ public class ConfigurationManagerImplTest {
public void testResolveBooleanParamUsesCommandValueWhenInRequestParams() {
Map<String, String> requestParams = new HashMap<>();
requestParams.put("offerha", "true");
Boolean result = configurationManagerImplSpy.resolveBooleanParam(
requestParams, "offerha", () -> true, false
);
Assert.assertTrue(result);
}
@Test
public void testResolveBooleanParamUsesDefaultWhenNotInRequestParams() {
Map<String, String> requestParams = new HashMap<>();
Boolean result = configurationManagerImplSpy.resolveBooleanParam(
requestParams, "offerha", () -> true, false
);
Assert.assertFalse(result);
}
@ -1328,7 +1319,7 @@ public class ConfigurationManagerImplTest {
Boolean result = configurationManagerImplSpy.resolveBooleanParam(
null, "offerha", () -> true, false
);
Assert.assertFalse(result);
}
}

795
ui/src/components/offering/ComputeOfferingForm.vue Normal file
View File

@ -0,0 +1,795 @@
<template>
<a-form
ref="internalFormRef"
:model="form"
:rules="rules"
@finish="onInternalSubmit"
layout="vertical">
<a-form-item name="name" ref="name">
<template #label>
<tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
</template>
<a-input
v-focus="true"
v-model:value="form.name"
:placeholder="$t('label.name')"/>
</a-form-item>
<a-form-item name="displaytext" ref="displaytext">
<template #label>
<tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
</template>
<a-input
v-model:value="form.displaytext"
:placeholder="$t('label.displaytext')"/>
</a-form-item>
<a-form-item name="systemvmtype" ref="systemvmtype" v-if="isSystem">
<template #label>
<tooltip-label :title="$t('label.systemvmtype')" :tooltip="apiParams.systemvmtype.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.systemvmtype"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
:placeholder="apiParams.systemvmtype.description">
<a-select-option key="domainrouter" :label="$t('label.domain.router')">{{ $t('label.domain.router') }}</a-select-option>
<a-select-option key="consoleproxy" :label="$t('label.console.proxy')">{{ $t('label.console.proxy') }}</a-select-option>
<a-select-option key="secondarystoragevm" :label="$t('label.secondary.storage.vm')">{{ $t('label.secondary.storage.vm') }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="offeringtype" ref="offeringtype" :label="$t('label.offeringtype')" v-show="!isSystem">
<a-radio-group
v-model:value="form.offeringtype"
@change="selected => { handleComputeOfferingTypeChange(selected.target.value) }"
buttonStyle="solid">
<a-radio-button value="fixed">{{ $t('label.fixed') }}</a-radio-button>
<a-radio-button value="customconstrained">{{ $t('label.customconstrained') }}</a-radio-button>
<a-radio-button value="customunconstrained">{{ $t('label.customunconstrained') }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-row :gutter="12">
<a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
<a-form-item name="cpunumber" ref="cpunumber">
<template #label>
<tooltip-label :title="$t('label.cpunumber')" :tooltip="apiParams.cpunumber.description"/>
</template>
<a-input v-model:value="form.cpunumber" :placeholder="apiParams.cpunumber.description"/>
</a-form-item>
</a-col>
<a-col :md="8" :lg="8" v-if="offeringType !== 'customunconstrained'">
<a-form-item name="cpuspeed" ref="cpuspeed">
<template #label>
<tooltip-label :title="$t('label.cpuspeed')" :tooltip="apiParams.cpuspeed.description"/>
</template>
<a-input v-model:value="form.cpuspeed" :placeholder="apiParams.cpuspeed.description"/>
</a-form-item>
</a-col>
<a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
<a-form-item name="memory" ref="memory">
<template #label>
<tooltip-label :title="$t('label.memory.mb')" :tooltip="apiParams.memory.description"/>
</template>
<a-input v-model:value="form.memory" :placeholder="apiParams.memory.description"/>
</a-form-item>
</a-col>
</a-row>
<!-- The rest of the form fields (storage, QoS, GPU, tags, etc.) were copied
from AddComputeOffering.vue to ensure identical behavior. -->
<a-row :gutter="12" v-if="offeringType === 'customconstrained'">
<a-col :md="12" :lg="12">
<a-form-item name="mincpunumber" ref="mincpunumber">
<template #label>
<tooltip-label :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
</template>
<a-input v-model:value="form.mincpunumber" :placeholder="apiParams.mincpunumber.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="maxcpunumber" ref="maxcpunumber">
<template #label>
<tooltip-label :title="$t('label.maxcpunumber')" :tooltip="apiParams.maxcpunumber.description"/>
</template>
<a-input v-model:value="form.maxcpunumber" :placeholder="apiParams.maxcpunumber.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12" v-if="offeringType === 'customconstrained'">
<a-col :md="12" :lg="12">
<a-form-item name="minmemory" ref="minmemory">
<template #label>
<tooltip-label :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
</template>
<a-input v-model:value="form.minmemory" :placeholder="apiParams.minmemory.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="maxmemory" ref="maxmemory">
<template #label>
<tooltip-label :title="$t('label.maxmemory')" :tooltip="apiParams.maxmemory.description"/>
</template>
<a-input v-model:value="form.maxmemory" :placeholder="apiParams.maxmemory.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="hosttags" ref="hosttags">
<template #label>
<tooltip-label :title="$t('label.hosttags')" :tooltip="apiParams.hosttags.description"/>
</template>
<a-input v-model:value="form.hosttags" :placeholder="apiParams.hosttags.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="networkrate" ref="networkrate">
<template #label>
<tooltip-label :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
</template>
<a-input v-model:value="form.networkrate" :placeholder="apiParams.networkrate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item name="offerha" ref="offerha">
<template #label>
<tooltip-label :title="$t('label.offerha')" :tooltip="apiParams.offerha.description"/>
</template>
<a-switch v-model:checked="form.offerha" />
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="dynamicscalingenabled" ref="dynamicscalingenabled">
<template #label>
<tooltip-label :title="$t('label.dynamicscalingenabled')" :tooltip="apiParams.dynamicscalingenabled.description"/>
</template>
<a-switch v-model:checked="form.dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item name="limitcpuuse" ref="limitcpuuse">
<template #label>
<tooltip-label :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
</template>
<a-switch v-model:checked="form.limitcpuuse" />
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item v-if="!isSystem" name="isvolatile" ref="isvolatile">
<template #label>
<tooltip-label :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
</template>
<a-switch v-model:checked="form.isvolatile" />
</a-form-item>
</a-col>
</a-row>
<a-form-item name="deploymentplanner" ref="deploymentplanner" v-if="!isSystem && isAdmin()">
<template #label>
<tooltip-label :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.deploymentplanner"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
:loading="deploymentPlannerLoading"
:placeholder="apiParams.deploymentplanner.description"
@change="val => { handleDeploymentPlannerChange(val) }">
<a-select-option v-for="(opt) in deploymentPlanners" :key="opt.name" :label="opt.name || opt.description || ''">{{ opt.name || opt.description }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="plannermode" ref="plannermode" :label="$t('label.plannermode')" v-if="plannerModeVisible">
<a-radio-group v-model:value="form.plannermode" buttonStyle="solid">
<a-radio-button value="">{{ $t('label.none') }}</a-radio-button>
<a-radio-button value="strict">{{ $t('label.strict') }}</a-radio-button>
<a-radio-button value="Preferred">{{ $t('label.preferred') }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="gpucardid" ref="gpucardid" :label="$t('label.gpu.card')" v-if="!isSystem">
<a-select
v-model:value="form.gpucardid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
:loading="gpuCardLoading"
:placeholder="$t('label.gpu.card')"
@change="handleGpuCardChange">
<a-select-option v-for="(opt, optIndex) in gpuCards" :key="optIndex" :value="opt.id" :label="opt.name || opt.description || ''">{{ opt.description || opt.name || '' }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="vgpuprofile" ref="vgpuprofile" :label="$t('label.vgpu.profile')" v-if="!isSystem && form.gpucardid && vgpuProfiles.length > 0">
<a-select
v-model:value="form.vgpuprofile"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
:loading="vgpuProfileLoading"
:placeholder="$t('label.vgpu.profile')">
<a-select-option v-for="(vgpu, vgpuIndex) in vgpuProfiles" :key="vgpuIndex" :value="vgpu.id" :label="vgpu.vgpuprofile || ''">{{ vgpu.name }} {{ getVgpuProfileDetails(vgpu) }}</a-select-option>
</a-select>
</a-form-item>
<a-row :gutter="12" v-if="!isSystem && form.gpucardid">
<a-col :md="12" :lg="12">
<a-form-item name="gpucount" ref="gpucount">
<template #label>
<tooltip-label :title="$t('label.gpu.count')" :tooltip="apiParams.gpucount.description"/>
</template>
<a-input v-model:value="form.gpucount" type="number" min="1" max="16" :placeholder="$t('label.gpu.count')"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="gpudisplay" ref="gpudisplay">
<template #label>
<tooltip-label :title="$t('label.gpu.display')" :tooltip="apiParams.gpudisplay.description"/>
</template>
<a-switch v-model:checked="form.gpudisplay" />
</a-form-item>
</a-col>
</a-row>
<a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-show="isAdmin()">
<a-switch v-model:checked="form.ispublic" />
</a-form-item>
<a-form-item name="domainid" ref="domainid" v-if="!form.ispublic">
<template #label>
<tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
</template>
<a-select
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.domainid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<block-outlined v-else style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="zoneid" ref="zoneid" v-if="!isSystem">
<template #label>
<tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
</template>
<a-select
id="zone-selection"
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.zoneid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
@select="val => fetchvSphereStoragePolicies(val)"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<global-outlined v-else style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="storagepolicy" ref="storagepolicy" v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
<template #label>
<tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagepolicy"
:placeholder="apiParams.storagepolicy.description"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => { return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }">
<a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">{{ policy.name || policy.id }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="purgeresources" ref="purgeresources">
<template #label>
<tooltip-label :title="$t('label.purgeresources')" :tooltip="apiParams.purgeresources.description"/>
</template>
<a-switch v-model:checked="form.purgeresources"/>
</a-form-item>
<a-form-item name="showLeaseOptions" ref="showLeaseOptions" v-if="isLeaseFeatureEnabled">
<template #label>
<tooltip-label :title="$t('label.lease.enable')" :tooltip="$t('label.lease.enable.tooltip')" />
</template>
<a-switch v-model:checked="showLeaseOptions" @change="onToggleLeaseData"/>
</a-form-item>
<a-row :gutter="12" v-if="isLeaseFeatureEnabled && showLeaseOptions">
<a-col :md="12" :lg="12">
<a-form-item name="leaseduration" ref="leaseduration">
<template #label>
<tooltip-label :title="$t('label.leaseduration')"/>
</template>
<a-input v-model:value="form.leaseduration" :placeholder="$t('label.instance.lease.placeholder')"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="leaseexpiryaction" ref="leaseexpiryaction" v-if="form.leaseduration > 0">
<template #label>
<tooltip-label :title="$t('label.leaseexpiryaction')" />
</template>
<a-select v-model:value="form.leaseexpiryaction" :defaultValue="expiryActions">
<a-select-option v-for="action in expiryActions" :key="action" :label="action"/>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item name="computeonly" ref="computeonly">
<template #label>
<tooltip-label :title="$t('label.computeonly.offering')" :tooltip="$t('label.computeonly.offering.tooltip')"/>
</template>
<a-switch v-model:checked="form.computeonly" :checked="computeonly" @change="val => { computeonly = val }"/>
</a-form-item>
<a-card style="margin-bottom: 10px;">
<span v-if="computeonly">
<a-form-item name="storagetype" ref="storagetype">
<template #label>
<tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
</template>
<a-radio-group v-model:value="form.storagetype" buttonStyle="solid" @change="selected => { handleStorageTypeChange(selected.target.value) }">
<a-radio-button value="shared">{{ $t('label.shared') }}</a-radio-button>
<a-radio-button value="local">{{ $t('label.local') }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="provisioningtype" ref="provisioningtype">
<template #label>
<tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
</template>
<a-radio-group v-model:value="form.provisioningtype" buttonStyle="solid" @change="selected => { handleProvisioningTypeChange(selected.target.value) }">
<a-radio-button value="thin">{{ $t('label.provisioningtype.thin') }}</a-radio-button>
<a-radio-button value="sparse">{{ $t('label.provisioningtype.sparse') }}</a-radio-button>
<a-radio-button value="fat">{{ $t('label.provisioningtype.fat') }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="cachemode" ref="cachemode">
<template #label>
<tooltip-label :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
</template>
<a-radio-group v-model:value="form.cachemode" buttonStyle="solid" @change="selected => { handleCacheModeChange(selected.target.value) }">
<a-radio-button value="none">{{ $t('label.nodiskcache') }}</a-radio-button>
<a-radio-button value="writeback">{{ $t('label.writeback') }}</a-radio-button>
<a-radio-button value="writethrough">{{ $t('label.writethrough') }}</a-radio-button>
<a-radio-button value="hypervisor_default">{{ $t('label.hypervisor.default') }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item :label="$t('label.qostype')" name="qostype" ref="qostype">
<a-radio-group v-model:value="form.qostype" buttonStyle="solid" @change="selected => { handleQosTypeChange(selected.target.value) }">
<a-radio-button value="">{{ $t('label.none') }}</a-radio-button>
<a-radio-button value="hypervisor">{{ $t('label.hypervisor') }}</a-radio-button>
<a-radio-button value="storage">{{ $t('label.storage') }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-row :gutter="12" v-if="qosType === 'hypervisor'">
<a-col :md="12" :lg="12">
<a-form-item name="diskbytesreadrate" ref="diskbytesreadrate">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
</template>
<a-input v-model:value="form.diskbytesreadrate" :placeholder="apiParams.bytesreadrate.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskbyteswriterate" ref="diskbyteswriterate">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
</template>
<a-input v-model:value="form.diskbyteswriterate" :placeholder="apiParams.byteswriterate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12" v-if="qosType === 'hypervisor'">
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsreadrate" ref="diskiopsreadrate">
<template #label>
<tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
</template>
<a-input v-model:value="form.diskiopsreadrate" :placeholder="apiParams.iopsreadrate.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskiopswriterate" ref="diskiopswriterate">
<template #label>
<tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
</template>
<a-input v-model:value="form.diskiopswriterate" :placeholder="apiParams.iopswriterate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="!isSystem && qosType === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
<template #label>
<tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
</template>
<a-switch v-model:checked="form.iscustomizeddiskiops" :checked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
</a-form-item>
<a-row :gutter="12" v-if="qosType === 'storage' && !isCustomizedDiskIops">
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsmin" ref="diskiopsmin">
<template #label>
<tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
</template>
<a-input v-model:value="form.diskiopsmin" :placeholder="apiParams.miniops.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsmax" ref="diskiopsmax">
<template #label>
<tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
</template>
<a-input v-model:value="form.diskiopsmax" :placeholder="apiParams.maxiops.description"/>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="!isSystem && qosType === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
<template #label>
<tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
</template>
<a-input v-model:value="form.hypervisorsnapshotreserve" :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
</a-form-item>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item v-if="apiParams.rootdisksize" name="rootdisksize" ref="rootdisksize">
<template #label>
<tooltip-label :title="$t('label.root.disk.size')" :tooltip="apiParams.rootdisksize.description"/>
</template>
<a-input v-model:value="form.rootdisksize" :placeholder="apiParams.rootdisksize.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="storagetags" ref="storagetags">
<template #label>
<tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
</template>
<a-select
mode="tags"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagetags"
showSearch
optionFilterProp="value"
:filterOption="(input, option) => { return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 }"
:loading="storageTagLoading"
:placeholder="apiParams.tags.description"
v-if="isAdmin() || isDomainAdminAllowedToInformTags">
<a-select-option v-for="opt in storageTags" :key="opt">{{ opt }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item name="encryptdisk" ref="encryptdisk">
<template #label>
<tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encryptroot.description" />
</template>
<a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
</a-form-item>
</span>
<span v-if="!computeonly">
<a-form-item>
<a-button type="primary" @click="addDiskOffering()"> {{ $t('label.add.disk.offering') }} </a-button>
<a-modal
:visible="showDiskOfferingModal"
:title="$t('label.add.disk.offering')"
:footer="null"
centered
:closable="true"
@cancel="closeDiskOfferingModal"
width="auto">
<add-disk-offering @close-action="closeDiskOfferingModal()" @publish-disk-offering-id="($event) => updateSelectedDiskOffering($event)"/>
</a-modal>
<br /><br />
<a-form-item :label="$t('label.disk.offerings')" name="diskofferingid" ref="diskofferingid">
<a-select :getPopupContainer="(trigger) => trigger.parentNode" v-model:value="form.diskofferingid" :loading="loading" :placeholder="$t('label.diskoffering')">
<a-select-option v-for="(offering, index) in diskOfferings" :value="offering.id" :key="index">{{ offering.displaytext || offering.name }}</a-select-option>
</a-select>
</a-form-item>
</a-form-item>
</span>
<a-form-item name="diskofferingstrictness" ref="diskofferingstrictness">
<template #label>
<tooltip-label :title="$t('label.diskofferingstrictness')" :tooltip="apiParams.diskofferingstrictness.description"/>
</template>
<a-switch v-model:checked="form.diskofferingstrictness" :checked="diskofferingstrictness" @change="val => { diskofferingstrictness = val }"/>
</a-form-item>
</a-card>
<a-form-item name="externaldetails" ref="externaldetails">
<template #label>
<tooltip-label :title="$t('label.externaldetails')" :tooltip="apiParams.externaldetails.description"/>
</template>
<a-switch v-model:checked="externalDetailsEnabled" @change="onExternalDetailsEnabledChange"/>
<a-card v-if="externalDetailsEnabled" style="margin-top: 10px">
<div style="margin-bottom: 10px">{{ $t('message.add.orchestrator.resource.details') }}</div>
<details-input v-model:value="form.externaldetails" />
</a-card>
</a-form-item>
<slot name="form-actions"></slot>
</a-form>
</template>
<script>
import { reactive, toRaw } from 'vue'
import { getAPI } from '@/api'
import AddDiskOffering from '@/views/offering/AddDiskOffering'
import { isAdmin } from '@/role'
import { mixinForm } from '@/utils/mixin'
import ResourceIcon from '@/components/view/ResourceIcon'
import TooltipLabel from '@/components/widgets/TooltipLabel'
import DetailsInput from '@/components/widgets/DetailsInput'
import store from '@/store'
export default {
name: 'ComputeOfferingForm',
mixins: [mixinForm],
components: {
AddDiskOffering,
ResourceIcon,
TooltipLabel,
DetailsInput
},
props: {
initialValues: {
type: Object,
default: () => ({})
},
apiParams: {
type: Object,
default: () => ({})
},
isSystem: {
type: Boolean,
default: false
},
isAdmin: {
type: Function,
default: () => false
}
},
data () {
return {
internalFormRef: null,
form: reactive(Object.assign({
systemvmtype: 'domainrouter',
offeringtype: 'fixed',
ispublic: true,
dynamicscalingenabled: true,
plannermode: '',
gpucardid: '',
vgpuprofile: '',
gpucount: '1',
gpudisplay: false,
computeonly: true,
storagetype: 'shared',
provisioningtype: 'thin',
cachemode: 'none',
qostype: '',
iscustomizeddiskiops: false,
diskofferingid: null,
diskofferingstrictness: false,
encryptdisk: false,
leaseduration: undefined,
leaseexpiryaction: undefined
}, this.initialValues || {})),
rules: reactive({}),
// other UI state copied
storageType: 'shared',
provisioningType: 'thin',
cacheMode: 'none',
offeringType: 'fixed',
isCustomizedDiskIops: false,
isPublic: true,
domains: [],
domainLoading: false,
zones: [],
zoneLoading: false,
selectedDeploymentPlanner: null,
storagePolicies: null,
storageTags: [],
storageTagLoading: false,
deploymentPlanners: [],
deploymentPlannerLoading: false,
plannerModeVisible: false,
plannerMode: '',
selectedGpuCard: '',
showDiskOfferingModal: false,
gpuCardLoading: false,
gpuCards: [],
loading: false,
dynamicscalingenabled: true,
diskofferingstrictness: false,
encryptdisk: false,
computeonly: true,
diskOfferingLoading: false,
diskOfferings: [],
selectedDiskOfferingId: '',
qosType: '',
isDomainAdminAllowedToInformTags: false,
isLeaseFeatureEnabled: this.$store.getters.features.instanceleaseenabled,
showLeaseOptions: false,
expiryActions: ['STOP', 'DESTROY'],
defaultLeaseDuration: 90,
defaultLeaseExpiryAction: 'STOP',
leaseduration: undefined,
leaseexpiryaction: undefined,
vgpuProfiles: [],
vgpuProfileLoading: false,
externalDetailsEnabled: false
}
},
created () {
this.zones = [{ id: null, name: this.$t('label.all.zone') }]
this.initForm()
this.fetchData()
this.isPublic = isAdmin()
this.form.ispublic = this.isPublic
},
methods: {
initForm () {
this.formRef = this.$refs.internalFormRef
this.rules = reactive({
name: [{ required: true, message: this.$t('message.error.required.input') }]
})
},
fetchData () {
this.fetchDomainData()
this.fetchZoneData()
this.fetchGPUCards()
if (isAdmin()) {
this.fetchStorageTagData()
this.fetchDeploymentPlannerData()
} else if (this.isDomainAdmin()) {
this.checkIfDomainAdminIsAllowedToInformTag()
if (this.isDomainAdminAllowedToInformTags) {
this.fetchStorageTagData()
}
}
this.fetchDiskOfferings()
},
fetchGPUCards () {
this.gpuCardLoading = true
getAPI('listGpuCards', {
}).then(json => {
this.gpuCards = json.listgpucardsresponse.gpucard || []
this.gpuCards.unshift({ id: '', name: this.$t('label.none') })
}).finally(() => {
this.gpuCardLoading = false
})
},
addDiskOffering () { this.showDiskOfferingModal = true },
fetchDiskOfferings () {
this.diskOfferingLoading = true
getAPI('listDiskOfferings', { listall: true }).then(json => {
this.diskOfferings = json.listdiskofferingsresponse.diskoffering || []
if (this.selectedDiskOfferingId === '') {
this.selectedDiskOfferingId = this.diskOfferings[0]?.id || ''
}
}).finally(() => { this.diskOfferingLoading = false })
},
updateSelectedDiskOffering (id) { if (id) this.selectedDiskOfferingId = id },
closeDiskOfferingModal () { this.fetchDiskOfferings(); this.showDiskOfferingModal = false },
isDomainAdmin () {
return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
},
getVgpuProfileDetails (vgpuProfile) {
let output = '('
if (vgpuProfile?.videoram) output += `${vgpuProfile.videoram} MB`
if (vgpuProfile?.maxresolutionx && vgpuProfile?.maxresolutiony) {
if (output !== '(') output += ', '
output += `${vgpuProfile.maxresolutionx}x${vgpuProfile.maxresolutiony}`
}
output += ')'
return output === '()' ? '' : output
},
checkIfDomainAdminIsAllowedToInformTag () {
const params = { id: store.getters.userInfo.accountid }
getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
})
},
arrayHasItems (array) { return array !== null && array !== undefined && Array.isArray(array) && array.length > 0 },
fetchDomainData () {
const params = { listAll: true, showicon: true, details: 'min' }
this.domainLoading = true
getAPI('listDomains', params).then(json => {
const listDomains = json.listdomainsresponse.domain
this.domains = this.domains.concat(listDomains)
}).finally(() => { this.domainLoading = false })
},
fetchZoneData () {
const params = { showicon: true }
this.zoneLoading = true
getAPI('listZones', params).then(json => {
const listZones = json.listzonesresponse.zone
if (listZones) this.zones = this.zones.concat(listZones)
}).finally(() => { this.zoneLoading = false })
},
fetchStorageTagData () {
this.storageTagLoading = true
this.storageTags = []
getAPI('listStorageTags').then(json => {
const tags = json.liststoragetagsresponse.storagetag || []
for (const tag of tags) if (!this.storageTags.includes(tag.name)) this.storageTags.push(tag.name)
}).finally(() => { this.storageTagLoading = false })
},
fetchDeploymentPlannerData () {
this.deploymentPlannerLoading = true
getAPI('listDeploymentPlanners').then(json => {
const planners = json.listdeploymentplannersresponse.deploymentPlanner
this.deploymentPlanners = this.deploymentPlanners.concat(planners)
this.deploymentPlanners.unshift({ name: '' })
this.form.deploymentplanner = this.deploymentPlanners.length > 0 ? this.deploymentPlanners[0].name : ''
}).finally(() => { this.deploymentPlannerLoading = false })
},
fetchvSphereStoragePolicies (zoneIndex) {
if (zoneIndex === 0 || this.form.zoneid.length > 1) { this.storagePolicies = null; return }
const zoneid = this.zones[zoneIndex].id
if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
this.storagePolicies = []
getAPI('listVsphereStoragePolicies', { zoneid }).then(response => { this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || [] })
}
},
handleStorageTypeChange (val) { this.storageType = val },
handleProvisioningTypeChange (val) { this.provisioningType = val },
handleCacheModeChange (val) { this.cacheMode = val },
handleComputeOfferingTypeChange (val) { this.offeringType = val },
handleQosTypeChange (val) { this.qosType = val },
handleDeploymentPlannerChange (planner) { this.selectedDeploymentPlanner = planner; this.plannerModeVisible = false; if (this.selectedDeploymentPlanner === 'ImplicitDedicationPlanner') this.plannerModeVisible = isAdmin() },
handleGpuCardChange (cardId) { this.selectedGpuCard = cardId; this.form.vgpuprofile = ''; if (cardId && cardId !== '') this.fetchVgpuProfiles(cardId); else { this.vgpuProfiles = []; this.form.gpucount = '1' } },
fetchVgpuProfiles (gpuCardId) { this.vgpuProfileLoading = true; this.vgpuProfiles = []; getAPI('listVgpuProfiles', { gpucardid: gpuCardId }).then(json => { this.vgpuProfiles = json.listvgpuprofilesresponse.vgpuprofile || []; this.form.vgpuprofile = this.vgpuProfiles.length > 0 ? this.vgpuProfiles[0].id : '' }).catch(() => { this.vgpuProfiles = [] }).finally(() => { this.vgpuProfileLoading = false }) },
onExternalDetailsEnabledChange (val) { if (val || !this.form.externaldetails) return; this.form.externaldetails = undefined },
onToggleLeaseData () { if (this.showLeaseOptions === false) { this.leaseduration = undefined; this.leaseexpiryaction = undefined } else { this.leaseduration = this.leaseduration !== undefined ? this.leaseduration : this.defaultLeaseDuration; this.leaseexpiryaction = this.leaseexpiryaction !== undefined ? this.leaseexpiryaction : this.defaultLeaseExpiryAction } this.form.leaseduration = this.leaseduration; this.form.leaseexpiryaction = this.leaseexpiryaction },
validate () {
return this.$refs.internalFormRef.validate().then(() => {
const formRaw = toRaw(this.form)
const values = this.handleRemoveFields(formRaw)
return values
})
},
onInternalSubmit (e) {
// When internal form triggers submit, validate and emit
this.validate().then(values => this.$emit('submit', values))
}
}
}
</script>
<style scoped>
</style>

507
ui/src/components/offering/DiskOfferingForm.vue Normal file
View File

@ -0,0 +1,507 @@
// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements. See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership. The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied. See the License for the
// specific language governing permissions and limitations
// under the License.
<template>
<a-form
ref="internalFormRef"
:model="form"
:rules="rules"
@finish="onInternalSubmit"
layout="vertical">
<a-form-item name="name" ref="name">
<template #label>
<tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
</template>
<a-input
v-focus="true"
v-model:value="form.name"
:placeholder="apiParams.name.description"/>
</a-form-item>
<a-form-item name="displaytext" ref="displaytext">
<template #label>
<tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
</template>
<a-input
v-model:value="form.displaytext"
:placeholder="apiParams.displaytext.description"/>
</a-form-item>
<a-form-item name="storagetype" ref="storagetype">
<template #label>
<tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
</template>
<a-radio-group
v-model:value="form.storagetype"
buttonStyle="solid">
<a-radio-button value="shared">
{{ $t('label.shared') }}
</a-radio-button>
<a-radio-button value="local">
{{ $t('label.local') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="provisioningtype" ref="provisioningtype">
<template #label>
<tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
</template>
<a-radio-group
v-model:value="form.provisioningtype"
buttonStyle="solid">
<a-radio-button value="thin">
{{ $t('label.provisioningtype.thin') }}
</a-radio-button>
<a-radio-button value="sparse">
{{ $t('label.provisioningtype.sparse') }}
</a-radio-button>
<a-radio-button value="fat">
{{ $t('label.provisioningtype.fat') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="encryptdisk" ref="encryptdisk">
<template #label>
<tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encrypt.description" />
</template>
<a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
</a-form-item>
<a-form-item name="disksizestrictness" ref="disksizestrictness">
<template #label>
<tooltip-label :title="$t('label.disksizestrictness')" :tooltip="apiParams.disksizestrictness.description" />
</template>
<a-switch v-model:checked="form.disksizestrictness" :checked="disksizestrictness" @change="val => { disksizestrictness = val }" />
</a-form-item>
<a-form-item name="customdisksize" ref="customdisksize">
<template #label>
<tooltip-label :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
</template>
<a-switch v-model:checked="form.customdisksize" />
</a-form-item>
<a-form-item v-if="!form.customdisksize" name="disksize" ref="disksize">
<template #label>
<tooltip-label :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
</template>
<a-input
v-model:value="form.disksize"
:placeholder="apiParams.disksize.description"/>
</a-form-item>
<a-form-item name="qostype" ref="qostype" :label="$t('label.qostype')">
<a-radio-group
v-model:value="form.qostype"
buttonStyle="solid">
<a-radio-button value="">
{{ $t('label.none') }}
</a-radio-button>
<a-radio-button value="hypervisor">
{{ $t('label.hypervisor') }}
</a-radio-button>
<a-radio-button value="storage">
{{ $t('label.storage') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadrate" ref="diskbytesreadrate">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
</template>
<a-input
v-model:value="form.diskbytesreadrate"
:placeholder="apiParams.bytesreadrate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadratemax" ref="diskbytesreadratemax">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadratemax')" :tooltip="apiParams.bytesreadratemax.description"/>
</template>
<a-input
v-model:value="form.diskbytesreadratemax"
:placeholder="apiParams.bytesreadratemax.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriterate" ref="diskbyteswriterate">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
</template>
<a-input
v-model:value="form.diskbyteswriterate"
:placeholder="apiParams.byteswriterate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriteratemax" ref="diskbyteswriteratemax">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriteratemax')" :tooltip="apiParams.byteswriteratemax.description"/>
</template>
<a-input
v-model:value="form.diskbyteswriteratemax"
:placeholder="apiParams.byteswriteratemax.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopsreadrate" ref="diskiopsreadrate">
<template #label>
<tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
</template>
<a-input
v-model:value="form.diskiopsreadrate"
:placeholder="apiParams.iopsreadrate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopswriterate" ref="diskiopswriterate">
<template #label>
<tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
</template>
<a-input
v-model:value="form.diskiopswriterate"
:placeholder="apiParams.iopswriterate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
<template #label>
<tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
</template>
<a-switch v-model:checked="form.iscustomizeddiskiops" />
</a-form-item>
<a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmin" ref="diskiopsmin">
<template #label>
<tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmin"
:placeholder="apiParams.miniops.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmax" ref="diskiopsmax">
<template #label>
<tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmax"
:placeholder="apiParams.maxiops.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
<template #label>
<tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
</template>
<a-input
v-model:value="form.hypervisorsnapshotreserve"
:placeholder="apiParams.hypervisorsnapshotreserve.description"/>
</a-form-item>
<a-form-item name="writecachetype" ref="writecachetype">
<template #label>
<tooltip-label :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
</template>
<a-radio-group
v-model:value="form.writecachetype"
buttonStyle="solid"
@change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
<a-radio-button value="none">
{{ $t('label.nodiskcache') }}
</a-radio-button>
<a-radio-button value="writeback">
{{ $t('label.writeback') }}
</a-radio-button>
<a-radio-button value="writethrough">
{{ $t('label.writethrough') }}
</a-radio-button>
<a-radio-button value="hypervisor_default">
{{ $t('label.hypervisor.default') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="tags" ref="tags">
<template #label>
<tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
mode="tags"
v-model:value="form.tags"
showSearch
optionFilterProp="value"
:filterOption="(input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="storageTagLoading"
:placeholder="apiParams.tags.description"
v-if="isAdmin() || isDomainAdminAllowedToInformTags">
<a-select-option v-for="(opt) in storageTags" :key="opt">
{{ opt }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('label.ispublic')" v-show="isAdmin()" name="ispublic" ref="ispublic">
<a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
</a-form-item>
<a-form-item v-if="!isPublic" name="domainid" ref="domainid">
<template #label>
<tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
</template>
<a-select
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.domainid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<block-outlined v-else style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="zoneid" ref="zoneid">
<template #label>
<tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
</template>
<a-select
id="zone-selection"
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.zoneid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@select="val => fetchvSphereStoragePolicies(val)"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<global-outlined v-else style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null" name="storagepolicy" ref="storagepolicy">
<template #label>
<tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagepolicy"
:placeholder="apiParams.storagepolicy.description"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}">
<a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
{{ policy.name || policy.id }}
</a-select-option>
</a-select>
</a-form-item>
<slot name="form-actions"></slot>
</a-form>
</template>
<script>
import { reactive, toRaw } from 'vue'
import { getAPI } from '@/api'
import { isAdmin } from '@/role'
import { mixinForm } from '@/utils/mixin'
import ResourceIcon from '@/components/view/ResourceIcon'
import TooltipLabel from '@/components/widgets/TooltipLabel'
import store from '@/store'
import { BlockOutlined, GlobalOutlined } from '@ant-design/icons-vue'
export default {
name: 'DiskOfferingForm',
mixins: [mixinForm],
components: {
ResourceIcon,
TooltipLabel,
BlockOutlined,
GlobalOutlined
},
props: {
initialValues: {
type: Object,
default: () => ({})
},
apiParams: {
type: Object,
default: () => ({})
},
isAdmin: {
type: Function,
default: () => false
}
},
data () {
return {
internalFormRef: null,
form: reactive(Object.assign({
storagetype: 'shared',
provisioningtype: 'thin',
customdisksize: true,
writecachetype: 'none',
qostype: '',
ispublic: true,
disksizestrictness: false,
encryptdisk: false
}, this.initialValues || {})),
rules: reactive({}),
storageTags: [],
storagePolicies: null,
storageTagLoading: false,
isPublic: true,
domains: [],
domainLoading: false,
zones: [],
zoneLoading: false,
disksizestrictness: false,
encryptdisk: false,
isDomainAdminAllowedToInformTags: false
}
},
created () {
this.zones = [{ id: null, name: this.$t('label.all.zone') }]
this.initForm()
this.fetchData()
this.isPublic = isAdmin()
this.form.ispublic = this.isPublic
},
methods: {
initForm () {
this.formRef = this.$refs.internalFormRef
this.rules = reactive({
name: [{ required: true, message: this.$t('message.error.required.input') }],
disksize: [
{ required: true, message: this.$t('message.error.required.input') },
{ type: 'number', validator: this.validateNumber }
],
diskbytesreadrate: [{ type: 'number', validator: this.validateNumber }],
diskbytesreadratemax: [{ type: 'number', validator: this.validateNumber }],
diskbyteswriterate: [{ type: 'number', validator: this.validateNumber }],
diskbyteswriteratemax: [{ type: 'number', validator: this.validateNumber }],
diskiopsreadrate: [{ type: 'number', validator: this.validateNumber }],
diskiopswriterate: [{ type: 'number', validator: this.validateNumber }],
diskiopsmin: [{ type: 'number', validator: this.validateNumber }],
diskiopsmax: [{ type: 'number', validator: this.validateNumber }],
hypervisorsnapshotreserve: [{ type: 'number', validator: this.validateNumber }],
domainid: [{ type: 'array', required: true, message: this.$t('message.error.select') }],
zoneid: [{
type: 'array',
validator: async (rule, value) => {
if (value && value.length > 1 && value.indexOf(0) !== -1) {
return Promise.reject(this.$t('message.error.zone.combined'))
}
return Promise.resolve()
}
}]
})
},
fetchData () {
this.fetchDomainData()
this.fetchZoneData()
if (isAdmin()) {
this.fetchStorageTagData()
}
if (this.isDomainAdmin()) {
this.checkIfDomainAdminIsAllowedToInformTag()
if (this.isDomainAdminAllowedToInformTags) {
this.fetchStorageTagData()
}
}
},
handleWriteCacheTypeChange (val) {
this.form.writeCacheType = val
},
isDomainAdmin () {
return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
},
checkIfDomainAdminIsAllowedToInformTag () {
const params = { id: store.getters.userInfo.accountid }
getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
})
},
fetchDomainData () {
const params = {}
params.listAll = true
params.showicon = true
params.details = 'min'
this.domainLoading = true
getAPI('listDomains', params).then(json => {
const listDomains = json.listdomainsresponse.domain
this.domains = this.domains.concat(listDomains)
}).finally(() => {
this.domainLoading = false
})
},
fetchZoneData () {
const params = {}
params.showicon = true
this.zoneLoading = true
getAPI('listZones', params).then(json => {
const listZones = json.listzonesresponse.zone
if (listZones) {
this.zones = this.zones.concat(listZones)
}
}).finally(() => {
this.zoneLoading = false
})
},
fetchStorageTagData () {
const params = {}
this.storageTagLoading = true
getAPI('listStorageTags', params).then(json => {
const tags = json.liststoragetagsresponse.storagetag || []
for (const tag of tags) {
if (!this.storageTags.includes(tag.name)) {
this.storageTags.push(tag.name)
}
}
}).finally(() => {
this.storageTagLoading = false
})
},
fetchvSphereStoragePolicies (zoneIndex) {
if (zoneIndex === 0 || this.form.zoneid.length > 1) {
this.storagePolicies = null
return
}
const zoneid = this.zones[zoneIndex].id
if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
this.storagePolicies = []
getAPI('listVsphereStoragePolicies', {
zoneid: zoneid
}).then(response => {
this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
})
}
},
validate () {
return this.$refs.internalFormRef.validate().then(() => {
const formRaw = toRaw(this.form)
const values = this.handleRemoveFields(formRaw)
return values
})
},
onInternalSubmit () {
this.$emit('submit')
},
async validateNumber (rule, value) {
if (value && (isNaN(value) || value <= 0)) {
return Promise.reject(this.$t('message.error.number'))
}
return Promise.resolve()
}
}
}
</script>

2
ui/src/config/section/offering.js
View File

@ -408,7 +408,7 @@ export default {
docHelp: 'adminguide/virtual_machines.html#importing-backup-offerings',
dataView: true,
popup: true,
component: shallowRef(defineAsyncComponent(() => import('@/views/offering/ImportBackupOffering.vue')))
component: shallowRef(defineAsyncComponent(() => import('@/views/offering/CloneBackupOffering.vue')))
}, {
api: 'deleteBackupOffering',
icon: 'delete-outlined',

812
ui/src/views/offering/AddComputeOffering.vue
View File

@ -18,658 +18,29 @@
<template>
<div class="form-layout" v-ctrl-enter="handleSubmit">
<a-spin :spinning="loading">
<a-form
:ref="formRef"
:model="form"
<ComputeOfferingForm
:initialValues="form"
:rules="rules"
@finish="handleSubmit"
layout="vertical"
>
<a-form-item name="name" ref="name">
<template #label>
<tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
</template>
<a-input
v-focus="true"
v-model:value="form.name"
:placeholder="$t('label.name')"/>
</a-form-item>
<a-form-item name="displaytext" ref="displaytext">
<template #label>
<tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
</template>
<a-input
v-model:value="form.displaytext"
:placeholder="$t('label.displaytext')"/>
</a-form-item>
<a-form-item name="systemvmtype" ref="systemvmtype" v-if="isSystem">
<template #label>
<tooltip-label :title="$t('label.systemvmtype')" :tooltip="apiParams.systemvmtype.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.systemvmtype"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:placeholder="apiParams.systemvmtype.description">
<a-select-option key="domainrouter" :label="$t('label.domain.router')">{{ $t('label.domain.router') }}</a-select-option>
<a-select-option key="consoleproxy" :label="$t('label.console.proxy')">{{ $t('label.console.proxy') }}</a-select-option>
<a-select-option key="secondarystoragevm" :label="$t('label.secondary.storage.vm')">{{ $t('label.secondary.storage.vm') }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="offeringtype" ref="offeringtype" :label="$t('label.offeringtype')" v-show="!isSystem">
<a-radio-group
v-model:value="form.offeringtype"
@change="selected => { handleComputeOfferingTypeChange(selected.target.value) }"
buttonStyle="solid">
<a-radio-button value="fixed">
{{ $t('label.fixed') }}
</a-radio-button>
<a-radio-button value="customconstrained">
{{ $t('label.customconstrained') }}
</a-radio-button>
<a-radio-button value="customunconstrained">
{{ $t('label.customunconstrained') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-row :gutter="12">
<a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
<a-form-item name="cpunumber" ref="cpunumber">
<template #label>
<tooltip-label :title="$t('label.cpunumber')" :tooltip="apiParams.cpunumber.description"/>
</template>
<a-input
v-model:value="form.cpunumber"
:placeholder="apiParams.cpunumber.description"/>
</a-form-item>
</a-col>
<a-col :md="8" :lg="8" v-if="offeringType !== 'customunconstrained'">
<a-form-item name="cpuspeed" ref="cpuspeed">
<template #label>
<tooltip-label :title="$t('label.cpuspeed')" :tooltip="apiParams.cpuspeed.description"/>
</template>
<a-input
v-model:value="form.cpuspeed"
:placeholder="apiParams.cpuspeed.description"/>
</a-form-item>
</a-col>
<a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
<a-form-item name="memory" ref="memory">
<template #label>
<tooltip-label :title="$t('label.memory.mb')" :tooltip="apiParams.memory.description"/>
</template>
<a-input
v-model:value="form.memory"
:placeholder="apiParams.memory.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12" v-if="offeringType === 'customconstrained'">
<a-col :md="12" :lg="12">
<a-form-item name="mincpunumber" ref="mincpunumber">
<template #label>
<tooltip-label :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
</template>
<a-input
v-model:value="form.mincpunumber"
:placeholder="apiParams.mincpunumber.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="maxcpunumber" ref="maxcpunumber">
<template #label>
<tooltip-label :title="$t('label.maxcpunumber')" :tooltip="apiParams.maxcpunumber.description"/>
</template>
<a-input
v-model:value="form.maxcpunumber"
:placeholder="apiParams.maxcpunumber.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12" v-if="offeringType === 'customconstrained'">
<a-col :md="12" :lg="12">
<a-form-item name="minmemory" ref="minmemory">
<template #label>
<tooltip-label :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
</template>
<a-input
v-model:value="form.minmemory"
:placeholder="apiParams.minmemory.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="maxmemory" ref="maxmemory">
<template #label>
<tooltip-label :title="$t('label.maxmemory')" :tooltip="apiParams.maxmemory.description"/>
</template>
<a-input
v-model:value="form.maxmemory"
:placeholder="apiParams.maxmemory.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="hosttags" ref="hosttags">
<template #label>
<tooltip-label :title="$t('label.hosttags')" :tooltip="apiParams.hosttags.description"/>
</template>
<a-input
v-model:value="form.hosttags"
:placeholder="apiParams.hosttags.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="networkrate" ref="networkrate">
<template #label>
<tooltip-label :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
</template>
<a-input
v-model:value="form.networkrate"
:placeholder="apiParams.networkrate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item name="offerha" ref="offerha">
<template #label>
<tooltip-label :title="$t('label.offerha')" :tooltip="apiParams.offerha.description"/>
</template>
<a-switch v-model:checked="form.offerha" />
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="dynamicscalingenabled" ref="dynamicscalingenabled">
<template #label>
<tooltip-label :title="$t('label.dynamicscalingenabled')" :tooltip="apiParams.dynamicscalingenabled.description"/>
</template>
<a-switch v-model:checked="form.dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item name="limitcpuuse" ref="limitcpuuse">
<template #label>
<tooltip-label :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
</template>
<a-switch v-model:checked="form.limitcpuuse" />
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item v-if="!isSystem" name="isvolatile" ref="isvolatile">
<template #label>
<tooltip-label :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
</template>
<a-switch v-model:checked="form.isvolatile" />
</a-form-item>
</a-col>
</a-row>
<a-form-item name="deploymentplanner" ref="deploymentplanner" v-if="!isSystem && isAdmin()">
<template #label>
<tooltip-label :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.deploymentplanner"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="deploymentPlannerLoading"
:placeholder="apiParams.deploymentplanner.description"
@change="val => { handleDeploymentPlannerChange(val) }">
<a-select-option v-for="(opt) in deploymentPlanners" :key="opt.name" :label="opt.name || opt.description || ''">
{{ opt.name || opt.description }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="plannermode" ref="plannermode" :label="$t('label.plannermode')" v-if="plannerModeVisible">
<a-radio-group
v-model:value="form.plannermode"
buttonStyle="solid">
<a-radio-button value="">
{{ $t('label.none') }}
</a-radio-button>
<a-radio-button value="strict">
{{ $t('label.strict') }}
</a-radio-button>
<a-radio-button value="Preferred">
{{ $t('label.preferred') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="gpucardid" ref="gpucardid" :label="$t('label.gpu.card')" v-if="!isSystem">
<a-select
v-model:value="form.gpucardid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="gpuCardLoading"
:placeholder="$t('label.gpu.card')"
@change="handleGpuCardChange">
<a-select-option v-for="(opt, optIndex) in gpuCards" :key="optIndex" :value="opt.id" :label="opt.name || opt.description || ''">
{{ opt.description || opt.name || '' }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="vgpuprofile" ref="vgpuprofile" :label="$t('label.vgpu.profile')" v-if="!isSystem && form.gpucardid && vgpuProfiles.length > 0">
<a-select
v-model:value="form.vgpuprofile"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="vgpuProfileLoading"
:placeholder="$t('label.vgpu.profile')">
<a-select-option v-for="(vgpu, vgpuIndex) in vgpuProfiles" :key="vgpuIndex" :value="vgpu.id" :label="vgpu.vgpuprofile || ''">
{{ vgpu.name }} {{ getVgpuProfileDetails(vgpu) }}
</a-select-option>
</a-select>
</a-form-item>
<a-row :gutter="12" v-if="!isSystem && form.gpucardid">
<a-col :md="12" :lg="12">
<a-form-item name="gpucount" ref="gpucount">
<template #label>
<tooltip-label :title="$t('label.gpu.count')" :tooltip="apiParams.gpucount.description"/>
</template>
<a-input
v-model:value="form.gpucount"
type="number"
min="1"
max="16"
:placeholder="$t('label.gpu.count')"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="gpudisplay" ref="gpudisplay">
<template #label>
<tooltip-label :title="$t('label.gpu.display')" :tooltip="apiParams.gpudisplay.description"/>
</template>
<a-switch v-model:checked="form.gpudisplay" />
</a-form-item>
</a-col>
</a-row>
<a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-show="isAdmin()">
<a-switch v-model:checked="form.ispublic" />
</a-form-item>
<a-form-item name="domainid" ref="domainid" v-if="!form.ispublic">
<template #label>
<tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
</template>
<a-select
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.domainid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<block-outlined v-else style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="zoneid" ref="zoneid" v-if="!isSystem">
<template #label>
<tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
</template>
<a-select
id="zone-selection"
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.zoneid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@select="val => fetchvSphereStoragePolicies(val)"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<global-outlined v-else style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
name="storagepolicy"
ref="storagepolicy"
v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
<template #label>
<tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagepolicy"
:placeholder="apiParams.storagepolicy.description"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
{{ policy.name || policy.id }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="purgeresources" ref="purgeresources">
<template #label>
<tooltip-label :title="$t('label.purgeresources')" :tooltip="apiParams.purgeresources.description"/>
</template>
<a-switch v-model:checked="form.purgeresources"/>
</a-form-item>
<a-form-item name="showLeaseOptions" ref="showLeaseOptions" v-if="isLeaseFeatureEnabled">
<template #label>
<tooltip-label :title="$t('label.lease.enable')" :tooltip="$t('label.lease.enable.tooltip')" />
</template>
<a-switch v-model:checked="showLeaseOptions" @change="onToggleLeaseData"/>
</a-form-item>
<a-row :gutter="12" v-if="isLeaseFeatureEnabled && showLeaseOptions">
<a-col :md="12" :lg="12">
<a-form-item name="leaseduration" ref="leaseduration">
<template #label>
<tooltip-label :title="$t('label.leaseduration')"/>
</template>
<a-input
v-model:value="form.leaseduration"
:placeholder="$t('label.instance.lease.placeholder')"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="leaseexpiryaction" ref="leaseexpiryaction" v-if="form.leaseduration > 0">
<template #label>
<tooltip-label :title="$t('label.leaseexpiryaction')" />
</template>
<a-select v-model:value="form.leaseexpiryaction" :defaultValue="expiryActions">
<a-select-option v-for="action in expiryActions" :key="action" :label="action"/>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item name="computeonly" ref="computeonly">
<template #label>
<tooltip-label :title="$t('label.computeonly.offering')" :tooltip="$t('label.computeonly.offering.tooltip')"/>
</template>
<a-switch v-model:checked="form.computeonly" :checked="computeonly" @change="val => { computeonly = val }"/>
</a-form-item>
<a-card style="margin-bottom: 10px;">
<span v-if="computeonly">
<a-form-item name="storagetype" ref="storagetype">
<template #label>
<tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
</template>
<a-radio-group
v-model:value="form.storagetype"
buttonStyle="solid"
@change="selected => { handleStorageTypeChange(selected.target.value) }">
<a-radio-button value="shared">
{{ $t('label.shared') }}
</a-radio-button>
<a-radio-button value="local">
{{ $t('label.local') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="provisioningtype" ref="provisioningtype">
<template #label>
<tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
</template>
<a-radio-group
v-model:value="form.provisioningtype"
buttonStyle="solid"
@change="selected => { handleProvisioningTypeChange(selected.target.value) }">
<a-radio-button value="thin">
{{ $t('label.provisioningtype.thin') }}
</a-radio-button>
<a-radio-button value="sparse">
{{ $t('label.provisioningtype.sparse') }}
</a-radio-button>
<a-radio-button value="fat">
{{ $t('label.provisioningtype.fat') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="cachemode" ref="cachemode">
<template #label>
<tooltip-label :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
</template>
<a-radio-group
v-model:value="form.cachemode"
buttonStyle="solid"
@change="selected => { handleCacheModeChange(selected.target.value) }">
<a-radio-button value="none">
{{ $t('label.nodiskcache') }}
</a-radio-button>
<a-radio-button value="writeback">
{{ $t('label.writeback') }}
</a-radio-button>
<a-radio-button value="writethrough">
{{ $t('label.writethrough') }}
</a-radio-button>
<a-radio-button value="hypervisor_default">
{{ $t('label.hypervisor.default') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item :label="$t('label.qostype')" name="qostype" ref="qostype">
<a-radio-group
v-model:value="form.qostype"
buttonStyle="solid"
@change="selected => { handleQosTypeChange(selected.target.value) }">
<a-radio-button value="">
{{ $t('label.none') }}
</a-radio-button>
<a-radio-button value="hypervisor">
{{ $t('label.hypervisor') }}
</a-radio-button>
<a-radio-button value="storage">
{{ $t('label.storage') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-row :gutter="12" v-if="qosType === 'hypervisor'">
<a-col :md="12" :lg="12">
<a-form-item name="diskbytesreadrate" ref="diskbytesreadrate">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
</template>
<a-input
v-model:value="form.diskbytesreadrate"
:placeholder="apiParams.bytesreadrate.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskbyteswriterate" ref="diskbyteswriterate">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
</template>
<a-input
v-model:value="form.diskbyteswriterate"
:placeholder="apiParams.byteswriterate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12" v-if="qosType === 'hypervisor'">
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsreadrate" ref="diskiopsreadrate">
<template #label>
<tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
</template>
<a-input
v-model:value="form.diskiopsreadrate"
:placeholder="apiParams.iopsreadrate.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskiopswriterate" ref="diskiopswriterate">
<template #label>
<tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
</template>
<a-input
v-model:value="form.diskiopswriterate"
:placeholder="apiParams.iopswriterate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="!isSystem && qosType === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
<template #label>
<tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
</template>
<a-switch v-model:checked="form.iscustomizeddiskiops" :checked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
</a-form-item>
<a-row :gutter="12" v-if="qosType === 'storage' && !isCustomizedDiskIops">
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsmin" ref="diskiopsmin">
<template #label>
<tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmin"
:placeholder="apiParams.miniops.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsmax" ref="diskiopsmax">
<template #label>
<tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmax"
:placeholder="apiParams.maxiops.description"/>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="!isSystem && qosType === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
<template #label>
<tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
</template>
<a-input
v-model:value="form.hypervisorsnapshotreserve"
:placeholder="apiParams.hypervisorsnapshotreserve.description"/>
</a-form-item>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item v-if="apiParams.rootdisksize" name="rootdisksize" ref="rootdisksize">
<template #label>
<tooltip-label :title="$t('label.root.disk.size')" :tooltip="apiParams.rootdisksize.description"/>
</template>
<a-input
v-model:value="form.rootdisksize"
:placeholder="apiParams.rootdisksize.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="storagetags" ref="storagetags">
<template #label>
<tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
</template>
<a-select
mode="tags"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagetags"
showSearch
optionFilterProp="value"
:filterOption="(input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="storageTagLoading"
:placeholder="apiParams.tags.description"
v-if="isAdmin() || isDomainAdminAllowedToInformTags">
<a-select-option v-for="opt in storageTags" :key="opt">
{{ opt }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item name="encryptdisk" ref="encryptdisk">
<template #label>
<tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encryptroot.description" />
</template>
<a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
</a-form-item>
</span>
<span v-if="!computeonly">
<a-form-item>
<a-button type="primary" @click="addDiskOffering()"> {{ $t('label.add.disk.offering') }} </a-button>
<a-modal
:visible="showDiskOfferingModal"
:title="$t('label.add.disk.offering')"
:footer="null"
centered
:closable="true"
@cancel="closeDiskOfferingModal"
width="auto">
<add-disk-offering @close-action="closeDiskOfferingModal()" @publish-disk-offering-id="($event) => updateSelectedDiskOffering($event)"/>
</a-modal>
<br /><br />
<a-form-item :label="$t('label.disk.offerings')" name="diskofferingid" ref="diskofferingid">
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.diskofferingid"
:loading="loading"
:placeholder="$t('label.diskoffering')">
<a-select-option
v-for="(offering, index) in diskOfferings"
:value="offering.id"
:key="index">
{{ offering.displaytext || offering.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-form-item>
</span>
<a-form-item name="diskofferingstrictness" ref="diskofferingstrictness">
<template #label>
<tooltip-label :title="$t('label.diskofferingstrictness')" :tooltip="apiParams.diskofferingstrictness.description"/>
</template>
<a-switch v-model:checked="form.diskofferingstrictness" :checked="diskofferingstrictness" @change="val => { diskofferingstrictness = val }"/>
</a-form-item>
</a-card>
<a-form-item name="externaldetails" ref="externaldetails">
<template #label>
<tooltip-label :title="$t('label.externaldetails')" :tooltip="apiParams.externaldetails.description"/>
</template>
<a-switch v-model:checked="externalDetailsEnabled" @change="onExternalDetailsEnabledChange"/>
<a-card v-if="externalDetailsEnabled" style="margin-top: 10px">
<div style="margin-bottom: 10px">{{ $t('message.add.orchestrator.resource.details') }}</div>
<details-input
v-model:value="form.externaldetails" />
</a-card>
</a-form-item>
</a-form>
<br/>
<div :span="24" class="action-button">
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
</div>
:apiParams="apiParams"
:isSystem="isSystem"
:isAdmin="isAdmin"
:ref="formRef"
@submit="handleSubmit">
<template #form-actions>
<br/>
<div :span="24" class="action-button">
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
</div>
</template>
</ComputeOfferingForm>
</a-spin>
</div>
</template>
<script>
import { ref, reactive, toRaw } from 'vue'
import ComputeOfferingForm from '@/components/offering/ComputeOfferingForm'
import { ref, reactive } from 'vue'
import { getAPI, postAPI } from '@/api'
import AddDiskOffering from '@/views/offering/AddDiskOffering'
import { isAdmin } from '@/role'
@ -683,6 +54,7 @@ export default {
name: 'AddServiceOffering',
mixins: [mixinForm],
components: {
ComputeOfferingForm,
AddDiskOffering,
ResourceIcon,
TooltipLabel,
@ -882,9 +254,6 @@ export default {
this.gpuCardLoading = false
})
},
addDiskOffering () {
this.showDiskOfferingModal = true
},
fetchDiskOfferings () {
this.diskOfferingLoading = true
getAPI('listDiskOfferings', {
@ -898,47 +267,18 @@ export default {
this.diskOfferingLoading = false
})
},
updateSelectedDiskOffering (id) {
if (id) {
this.selectedDiskOfferingId = id
}
},
closeDiskOfferingModal () {
this.fetchDiskOfferings()
this.showDiskOfferingModal = false
},
isAdmin () {
return isAdmin()
},
isDomainAdmin () {
return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
},
getVgpuProfileDetails (vgpuProfile) {
let output = '('
if (vgpuProfile?.videoram) {
output += `${vgpuProfile.videoram} MB`
}
if (vgpuProfile?.maxresolutionx && vgpuProfile?.maxresolutiony) {
if (output !== '(') {
output += ', '
}
output += `${vgpuProfile.maxresolutionx}x${vgpuProfile.maxresolutiony}`
}
output += ')'
if (output === '()') {
return ''
}
return output
},
checkIfDomainAdminIsAllowedToInformTag () {
const params = { id: store.getters.userInfo.accountid }
getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
})
},
arrayHasItems (array) {
return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
},
fetchDomainData () {
const params = {}
params.listAll = true
@ -990,83 +330,13 @@ export default {
this.deploymentPlannerLoading = false
})
},
fetchvSphereStoragePolicies (zoneIndex) {
if (zoneIndex === 0 || this.form.zoneid.length > 1) {
this.storagePolicies = null
return
}
const zoneid = this.zones[zoneIndex].id
if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
this.storagePolicies = []
getAPI('listVsphereStoragePolicies', {
zoneid: zoneid
}).then(response => {
this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
})
}
},
handleStorageTypeChange (val) {
this.storageType = val
},
handleProvisioningTypeChange (val) {
this.provisioningType = val
},
handleCacheModeChange (val) {
this.cacheMode = val
},
handleComputeOfferingTypeChange (val) {
this.offeringType = val
},
handleQosTypeChange (val) {
this.qosType = val
},
handleDeploymentPlannerChange (planner) {
this.selectedDeploymentPlanner = planner
this.plannerModeVisible = false
if (this.selectedDeploymentPlanner === 'ImplicitDedicationPlanner') {
this.plannerModeVisible = isAdmin()
}
},
handlePlannerModeChange (val) {
this.plannerMode = val
},
handleGpuCardChange (cardId) {
this.selectedGpuCard = cardId
this.form.vgpuprofile = ''
if (cardId && cardId !== '') {
this.fetchVgpuProfiles(cardId)
} else {
this.vgpuProfiles = []
this.form.gpucount = '1'
}
},
fetchVgpuProfiles (gpuCardId) {
this.vgpuProfileLoading = true
this.vgpuProfiles = []
getAPI('listVgpuProfiles', {
gpucardid: gpuCardId
}).then(json => {
this.vgpuProfiles = json.listvgpuprofilesresponse.vgpuprofile || []
this.form.vgpuprofile = this.vgpuProfiles.length > 0 ? this.vgpuProfiles[0].id : ''
}).catch(error => {
console.error('Error fetching vGPU profiles:', error)
this.vgpuProfiles = []
}).finally(() => {
this.vgpuProfileLoading = false
})
},
onExternalDetailsEnabledChange (val) {
if (val || !this.form.externaldetails) {
return
}
this.form.externaldetails = undefined
},
handleSubmit (e) {
e.preventDefault()
if (e && e.preventDefault) {
e.preventDefault()
}
if (this.loading) return
this.formRef.value.validate().then(() => {
const formRaw = toRaw(this.form)
const values = this.handleRemoveFields(formRaw)
this.formRef.value.validate().then((values) => {
var params = {
issystem: this.isSystem,
name: values.name,
@ -1089,7 +359,6 @@ export default {
params.diskofferingid = values.diskofferingid
}
// Add GPU parameters
if (values.vgpuprofile) {
params.vgpuprofileid = values.vgpuprofile
}
@ -1100,17 +369,16 @@ export default {
params.gpudisplay = values.gpudisplay
}
// custom fields (begin)
if (values.offeringtype === 'fixed') {
params.cpunumber = values.cpunumber
params.cpuspeed = values.cpuspeed
params.memory = values.memory
} else {
if (values.cpuspeed != null &&
values.mincpunumber != null &&
values.maxcpunumber != null &&
values.minmemory != null &&
values.maxmemory != null) {
values.mincpunumber != null &&
values.maxcpunumber != null &&
values.minmemory != null &&
values.maxmemory != null) {
params.cpuspeed = values.cpuspeed
params.mincpunumber = values.mincpunumber
params.maxcpunumber = values.maxcpunumber
@ -1118,7 +386,6 @@ export default {
params.maxmemory = values.maxmemory
}
}
// custom fields (end)
if (values.networkrate != null && values.networkrate.length > 0) {
params.networkrate = values.networkrate
@ -1137,7 +404,7 @@ export default {
params.maxiops = values.diskiopsmax
}
if (values.hypervisorsnapshotreserve !== undefined &&
values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
params.hypervisorsnapshotreserve = values.hypervisorsnapshotreserve
}
}
@ -1163,15 +430,15 @@ export default {
params.hosttags = values.hosttags
}
if ('deploymentplanner' in values &&
values.deploymentplanner !== undefined &&
values.deploymentplanner != null && values.deploymentplanner.length > 0) {
values.deploymentplanner !== undefined &&
values.deploymentplanner != null && values.deploymentplanner.length > 0) {
params.deploymentplanner = values.deploymentplanner
}
if ('deploymentplanner' in values &&
values.deploymentplanner !== undefined &&
values.deploymentplanner === 'ImplicitDedicationPlanner' &&
values.plannermode !== undefined &&
values.plannermode !== '') {
values.deploymentplanner !== undefined &&
values.deploymentplanner === 'ImplicitDedicationPlanner' &&
values.plannermode !== undefined &&
values.plannermode !== '') {
params['serviceofferingdetails[0].key'] = 'ImplicitDedicationMode'
params['serviceofferingdetails[0].value'] = values.plannermode
}
@ -1247,17 +514,6 @@ export default {
return Promise.reject(this.$t('message.error.number'))
}
return Promise.resolve()
},
onToggleLeaseData () {
if (this.showLeaseOptions === false) {
this.leaseduration = undefined
this.leaseexpiryaction = undefined
} else {
this.leaseduration = this.leaseduration !== undefined ? this.leaseduration : this.defaultLeaseDuration
this.leaseexpiryaction = this.leaseexpiryaction !== undefined ? this.leaseexpiryaction : this.defaultLeaseExpiryAction
}
this.form.leaseduration = this.leaseduration
this.form.leaseexpiryaction = this.leaseexpiryaction
}
}
}

492
ui/src/views/offering/AddDiskOffering.vue
View File

@ -18,485 +18,57 @@
<template>
<div class="form-layout" v-ctrl-enter="handleSubmit">
<a-spin :spinning="loading">
<a-form
:ref="formRef"
:model="form"
:rules="rules"
@finish="handleSubmit"
layout="vertical"
>
<a-form-item name="name" ref="name">
<template #label>
<tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
</template>
<a-input
v-focus="true"
v-model:value="form.name"
:placeholder="apiParams.name.description"/>
</a-form-item>
<a-form-item name="displaytext" ref="displaytext">
<template #label>
<tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
</template>
<a-input
v-model:value="form.displaytext"
:placeholder="apiParams.displaytext.description"/>
</a-form-item>
<a-form-item name="storagetype" ref="storagetype">
<template #label>
<tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
</template>
<a-radio-group
v-model:value="form.storagetype"
buttonStyle="solid">
<a-radio-button value="shared">
{{ $t('label.shared') }}
</a-radio-button>
<a-radio-button value="local">
{{ $t('label.local') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="provisioningtype" ref="provisioningtype">
<template #label>
<tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
</template>
<a-radio-group
v-model:value="form.provisioningtype"
buttonStyle="solid">
<a-radio-button value="thin">
{{ $t('label.provisioningtype.thin') }}
</a-radio-button>
<a-radio-button value="sparse">
{{ $t('label.provisioningtype.sparse') }}
</a-radio-button>
<a-radio-button value="fat">
{{ $t('label.provisioningtype.fat') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="encryptdisk" ref="encryptdisk">
<template #label>
<tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encrypt.description" />
</template>
<a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
</a-form-item>
<a-form-item name="disksizestrictness" ref="disksizestrictness">
<template #label>
<tooltip-label :title="$t('label.disksizestrictness')" :tooltip="apiParams.disksizestrictness.description" />
</template>
<a-switch v-model:checked="form.disksizestrictness" :checked="disksizestrictness" @change="val => { disksizestrictness = val }" />
</a-form-item>
<a-form-item name="customdisksize" ref="customdisksize">
<template #label>
<tooltip-label :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
</template>
<a-switch v-model:checked="form.customdisksize" />
</a-form-item>
<a-form-item v-if="!form.customdisksize" name="disksize" ref="disksize">
<template #label>
<tooltip-label :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
</template>
<a-input
v-model:value="form.disksize"
:placeholder="apiParams.disksize.description"/>
</a-form-item>
<a-form-item name="qostype" ref="qostype" :label="$t('label.qostype')">
<a-radio-group
v-model:value="form.qostype"
buttonStyle="solid">
<a-radio-button value="">
{{ $t('label.none') }}
</a-radio-button>
<a-radio-button value="hypervisor">
{{ $t('label.hypervisor') }}
</a-radio-button>
<a-radio-button value="storage">
{{ $t('label.storage') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadrate" ref="diskbytesreadrate">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
</template>
<a-input
v-model:value="form.diskbytesreadrate"
:placeholder="apiParams.bytesreadrate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadratemax" ref="diskbytesreadratemax">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadratemax')" :tooltip="apiParams.bytesreadratemax.description"/>
</template>
<a-input
v-model:value="form.diskbytesreadratemax"
:placeholder="apiParams.bytesreadratemax.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriterate" ref="diskbyteswriterate">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
</template>
<a-input
v-model:value="form.diskbyteswriterate"
:placeholder="apiParams.byteswriterate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriteratemax" ref="diskbyteswriteratemax">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriteratemax')" :tooltip="apiParams.byteswriteratemax.description"/>
</template>
<a-input
v-model:value="form.diskbyteswriteratemax"
:placeholder="apiParams.byteswriteratemax.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopsreadrate" ref="diskiopsreadrate">
<template #label>
<tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
</template>
<a-input
v-model:value="form.diskiopsreadrate"
:placeholder="apiParams.iopsreadrate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopswriterate" ref="diskiopswriterate">
<template #label>
<tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
</template>
<a-input
v-model:value="form.diskiopswriterate"
:placeholder="apiParams.iopswriterate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
<template #label>
<tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
</template>
<a-switch v-model:checked="form.iscustomizeddiskiops" />
</a-form-item>
<a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmin" ref="diskiopsmin">
<template #label>
<tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmin"
:placeholder="apiParams.miniops.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmax" ref="diskiopsmax">
<template #label>
<tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmax"
:placeholder="apiParams.maxiops.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
<template #label>
<tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
</template>
<a-input
v-model:value="form.hypervisorsnapshotreserve"
:placeholder="apiParams.hypervisorsnapshotreserve.description"/>
</a-form-item>
<a-form-item name="writecachetype" ref="writecachetype">
<template #label>
<tooltip-label :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
</template>
<a-radio-group
v-model:value="form.writecachetype"
buttonStyle="solid"
@change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
<a-radio-button value="none">
{{ $t('label.nodiskcache') }}
</a-radio-button>
<a-radio-button value="writeback">
{{ $t('label.writeback') }}
</a-radio-button>
<a-radio-button value="writethrough">
{{ $t('label.writethrough') }}
</a-radio-button>
<a-radio-button value="hypervisor_default">
{{ $t('label.hypervisor.default') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="tags" ref="tags">
<template #label>
<tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
mode="tags"
v-model:value="form.tags"
showSearch
optionFilterProp="value"
:filterOption="(input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="storageTagLoading"
:placeholder="apiParams.tags.description"
v-if="isAdmin() || isDomainAdminAllowedToInformTags">
<a-select-option v-for="(opt) in storageTags" :key="opt">
{{ opt }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('label.ispublic')" v-show="isAdmin()" name="ispublic" ref="ispublic">
<a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
</a-form-item>
<a-form-item v-if="!isPublic" name="domainid" ref="domainid">
<template #label>
<tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
</template>
<a-select
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.domainid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<block-outlined v-else style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="zoneid" ref="zoneid">
<template #label>
<tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
</template>
<a-select
id="zone-selection"
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.zoneid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@select="val => fetchvSphereStoragePolicies(val)"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<global-outlined v-else style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null" name="storagepolicy" ref="storagepolicy">
<template #label>
<tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagepolicy"
:placeholder="apiParams.storagepolicy.description"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
{{ policy.name || policy.id }}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
<div :span="24" class="action-button">
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
</div>
<DiskOfferingForm
ref="formRef"
:initialValues="form"
:apiParams="apiParams"
:isAdmin="isAdmin"
@submit="handleSubmit">
<template #form-actions>
<div :span="24" class="action-button">
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
</div>
</template>
</DiskOfferingForm>
</a-spin>
</div>
</template>
<script>
import { getAPI, postAPI } from '@/api'
import { reactive, ref, toRaw } from 'vue'
import DiskOfferingForm from '@/components/offering/DiskOfferingForm'
import { reactive } from 'vue'
import { postAPI } from '@/api'
import { isAdmin } from '@/role'
import { mixinForm } from '@/utils/mixin'
import ResourceIcon from '@/components/view/ResourceIcon'
import TooltipLabel from '@/components/widgets/TooltipLabel'
import store from '@/store'
export default {
name: 'AddDiskOffering',
mixins: [mixinForm],
components: {
ResourceIcon,
TooltipLabel
DiskOfferingForm
},
data () {
return {
selectedDomains: [],
storageTags: [],
storagePolicies: null,
storageTagLoading: false,
isPublic: true,
isEncrypted: false,
domains: [],
domainLoading: false,
zones: [],
zoneLoading: false,
loading: false,
disksizestrictness: false,
encryptdisk: false,
isDomainAdminAllowedToInformTags: false
formRef: null,
form: reactive({}),
loading: false
}
},
beforeCreate () {
this.apiParams = this.$getApiParams('createDiskOffering')
},
created () {
this.zones = [
{
id: null,
name: this.$t('label.all.zone')
}
]
this.isPublic = isAdmin()
this.initForm()
this.fetchData()
},
methods: {
initForm () {
this.formRef = ref()
this.form = reactive({
storagetype: 'shared',
provisioningtype: 'thin',
customdisksize: true,
writecachetype: 'none',
qostype: '',
ispublic: this.isPublic,
disksizestrictness: this.disksizestrictness,
encryptdisk: this.encryptdisk
})
this.rules = reactive({
name: [{ required: true, message: this.$t('message.error.required.input') }],
disksize: [
{ required: true, message: this.$t('message.error.required.input') },
{ type: 'number', validator: this.validateNumber }
],
diskbytesreadrate: [{ type: 'number', validator: this.validateNumber }],
diskbytesreadratemax: [{ type: 'number', validator: this.validateNumber }],
diskbyteswriterate: [{ type: 'number', validator: this.validateNumber }],
diskbyteswriteratemax: [{ type: 'number', validator: this.validateNumber }],
diskiopsreadrate: [{ type: 'number', validator: this.validateNumber }],
diskiopswriterate: [{ type: 'number', validator: this.validateNumber }],
diskiopsmin: [{ type: 'number', validator: this.validateNumber }],
diskiopsmax: [{ type: 'number', validator: this.validateNumber }],
hypervisorsnapshotreserve: [{ type: 'number', validator: this.validateNumber }],
domainid: [{ type: 'array', required: true, message: this.$t('message.error.select') }],
zoneid: [{
type: 'array',
validator: async (rule, value) => {
if (value && value.length > 1 && value.indexOf(0) !== -1) {
return Promise.reject(this.$t('message.error.zone.combined'))
}
return Promise.resolve()
}
}]
})
},
handleWriteCacheTypeChange (val) {
this.form.writeCacheType = val
},
fetchData () {
this.fetchDomainData()
this.fetchZoneData()
if (isAdmin()) {
this.fetchStorageTagData()
}
if (this.isDomainAdmin()) {
this.checkIfDomainAdminIsAllowedToInformTag()
if (this.isDomainAdminAllowedToInformTags) {
this.fetchStorageTagData()
}
}
},
isDomainAdmin () {
return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
},
isAdmin () {
return isAdmin()
},
checkIfDomainAdminIsAllowedToInformTag () {
const params = { id: store.getters.userInfo.accountid }
getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
})
},
arrayHasItems (array) {
return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
},
fetchDomainData () {
const params = {}
params.listAll = true
params.showicon = true
params.details = 'min'
this.domainLoading = true
getAPI('listDomains', params).then(json => {
const listDomains = json.listdomainsresponse.domain
this.domains = this.domains.concat(listDomains)
}).finally(() => {
this.domainLoading = false
})
},
fetchZoneData () {
const params = {}
params.showicon = true
this.zoneLoading = true
getAPI('listZones', params).then(json => {
const listZones = json.listzonesresponse.zone
if (listZones) {
this.zones = this.zones.concat(listZones)
}
}).finally(() => {
this.zoneLoading = false
})
},
fetchStorageTagData () {
const params = {}
this.storageTagLoading = true
getAPI('listStorageTags', params).then(json => {
const tags = json.liststoragetagsresponse.storagetag || []
for (const tag of tags) {
if (!this.storageTags.includes(tag.name)) {
this.storageTags.push(tag.name)
}
}
}).finally(() => {
this.storageTagLoading = false
})
},
fetchvSphereStoragePolicies (zoneIndex) {
if (zoneIndex === 0 || this.form.zoneid.length > 1) {
this.storagePolicies = null
return
}
const zoneid = this.zones[zoneIndex].id
if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
this.storagePolicies = []
getAPI('listVsphereStoragePolicies', {
zoneid: zoneid
}).then(response => {
this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
})
}
},
handleSubmit (e) {
e.preventDefault()
if (e && e.preventDefault) {
e.preventDefault()
}
if (this.loading) return
this.formRef.value.validate().then(() => {
const formRaw = toRaw(this.form)
const values = this.handleRemoveFields(formRaw)
this.$refs.formRef.validate().then((values) => {
var params = {
name: values.name,
displaytext: values.displaytext,
@ -553,8 +125,9 @@ export default {
var domainId = null
if (domainIndexes && domainIndexes.length > 0) {
var domainIds = []
const domains = this.$refs.formRef.domains
for (var i = 0; i < domainIndexes.length; i++) {
domainIds = domainIds.concat(this.domains[domainIndexes[i]].id)
domainIds.push(domains[domainIndexes[i]].id)
}
domainId = domainIds.join(',')
}
@ -566,8 +139,9 @@ export default {
var zoneId = null
if (zoneIndexes && zoneIndexes.length > 0) {
var zoneIds = []
const zones = this.$refs.formRef.zones
for (var j = 0; j < zoneIndexes.length; j++) {
zoneIds = zoneIds.concat(this.zones[zoneIndexes[j]].id)
zoneIds.push(zones[zoneIndexes[j]].id)
}
zoneId = zoneIds.join(',')
}
@ -577,6 +151,8 @@ export default {
if (values.storagepolicy) {
params.storagepolicy = values.storagepolicy
}
this.loading = true
postAPI('createDiskOffering', params).then(json => {
this.$emit('publish-disk-offering-id', json?.creatediskofferingresponse?.diskoffering?.id)
this.$message.success(`${this.$t('message.disk.offering.created')} ${values.name}`)
@ -591,12 +167,6 @@ export default {
},
closeAction () {
this.$emit('close-action')
},
async validateNumber (rule, value) {
if (value && (isNaN(value) || value <= 0)) {
return Promise.reject(this.$t('message.error.number'))
}
return Promise.resolve()
}
}
}

827
ui/src/views/offering/CloneComputeOffering.vue
View File

@ -19,9 +19,9 @@
<div class="form-layout" v-ctrl-enter="handleSubmit">
<a-spin :spinning="loading">
<a-alert
v-if="resource"
type="info"
style="margin-bottom: 16px">
v-if="resource"
type="info"
style="margin-bottom: 16px">
<template #message>
<div style="display: block; width: 100%;">
<div style="display: block; margin-bottom: 8px;">
@ -33,658 +33,31 @@
</div>
</template>
</a-alert>
<a-form
:ref="formRef"
:model="form"
<ComputeOfferingForm
:initialValues="form"
:rules="rules"
@finish="handleSubmit"
layout="vertical"
>
<a-form-item name="name" ref="name">
<template #label>
<tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
</template>
<a-input
v-focus="true"
v-model:value="form.name"
:placeholder="$t('label.name')"/>
</a-form-item>
<a-form-item name="displaytext" ref="displaytext">
<template #label>
<tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
</template>
<a-input
v-model:value="form.displaytext"
:placeholder="$t('label.displaytext')"/>
</a-form-item>
<a-form-item name="systemvmtype" ref="systemvmtype" v-if="isSystem">
<template #label>
<tooltip-label :title="$t('label.systemvmtype')" :tooltip="apiParams.systemvmtype.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.systemvmtype"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:placeholder="apiParams.systemvmtype.description">
<a-select-option key="domainrouter" :label="$t('label.domain.router')">{{ $t('label.domain.router') }}</a-select-option>
<a-select-option key="consoleproxy" :label="$t('label.console.proxy')">{{ $t('label.console.proxy') }}</a-select-option>
<a-select-option key="secondarystoragevm" :label="$t('label.secondary.storage.vm')">{{ $t('label.secondary.storage.vm') }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="offeringtype" ref="offeringtype" :label="$t('label.offeringtype')" v-show="!isSystem">
<a-radio-group
v-model:value="form.offeringtype"
@change="selected => { handleComputeOfferingTypeChange(selected.target.value) }"
buttonStyle="solid">
<a-radio-button value="fixed">
{{ $t('label.fixed') }}
</a-radio-button>
<a-radio-button value="customconstrained">
{{ $t('label.customconstrained') }}
</a-radio-button>
<a-radio-button value="customunconstrained">
{{ $t('label.customunconstrained') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-row :gutter="12">
<a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
<a-form-item name="cpunumber" ref="cpunumber">
<template #label>
<tooltip-label :title="$t('label.cpunumber')" :tooltip="apiParams.cpunumber.description"/>
</template>
<a-input
v-model:value="form.cpunumber"
:placeholder="apiParams.cpunumber.description"/>
</a-form-item>
</a-col>
<a-col :md="8" :lg="8" v-if="offeringType !== 'customunconstrained'">
<a-form-item name="cpuspeed" ref="cpuspeed">
<template #label>
<tooltip-label :title="$t('label.cpuspeed')" :tooltip="apiParams.cpuspeed.description"/>
</template>
<a-input
v-model:value="form.cpuspeed"
:placeholder="apiParams.cpuspeed.description"/>
</a-form-item>
</a-col>
<a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
<a-form-item name="memory" ref="memory">
<template #label>
<tooltip-label :title="$t('label.memory.mb')" :tooltip="apiParams.memory.description"/>
</template>
<a-input
v-model:value="form.memory"
:placeholder="apiParams.memory.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12" v-if="offeringType === 'customconstrained'">
<a-col :md="12" :lg="12">
<a-form-item name="mincpunumber" ref="mincpunumber">
<template #label>
<tooltip-label :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
</template>
<a-input
v-model:value="form.mincpunumber"
:placeholder="apiParams.mincpunumber.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="maxcpunumber" ref="maxcpunumber">
<template #label>
<tooltip-label :title="$t('label.maxcpunumber')" :tooltip="apiParams.maxcpunumber.description"/>
</template>
<a-input
v-model:value="form.maxcpunumber"
:placeholder="apiParams.maxcpunumber.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12" v-if="offeringType === 'customconstrained'">
<a-col :md="12" :lg="12">
<a-form-item name="minmemory" ref="minmemory">
<template #label>
<tooltip-label :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
</template>
<a-input
v-model:value="form.minmemory"
:placeholder="apiParams.minmemory.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="maxmemory" ref="maxmemory">
<template #label>
<tooltip-label :title="$t('label.maxmemory')" :tooltip="apiParams.maxmemory.description"/>
</template>
<a-input
v-model:value="form.maxmemory"
:placeholder="apiParams.maxmemory.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="hosttags" ref="hosttags">
<template #label>
<tooltip-label :title="$t('label.hosttags')" :tooltip="apiParams.hosttags.description"/>
</template>
<a-input
v-model:value="form.hosttags"
:placeholder="apiParams.hosttags.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="networkrate" ref="networkrate">
<template #label>
<tooltip-label :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
</template>
<a-input
v-model:value="form.networkrate"
:placeholder="apiParams.networkrate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item name="offerha" ref="offerha">
<template #label>
<tooltip-label :title="$t('label.offerha')" :tooltip="apiParams.offerha.description"/>
</template>
<a-switch v-model:checked="form.offerha" />
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="dynamicscalingenabled" ref="dynamicscalingenabled">
<template #label>
<tooltip-label :title="$t('label.dynamicscalingenabled')" :tooltip="apiParams.dynamicscalingenabled.description"/>
</template>
<a-switch v-model:checked="form.dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item name="limitcpuuse" ref="limitcpuuse">
<template #label>
<tooltip-label :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
</template>
<a-switch v-model:checked="form.limitcpuuse" />
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item v-if="!isSystem" name="isvolatile" ref="isvolatile">
<template #label>
<tooltip-label :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
</template>
<a-switch v-model:checked="form.isvolatile" />
</a-form-item>
</a-col>
</a-row>
<a-form-item name="deploymentplanner" ref="deploymentplanner" v-if="!isSystem && isAdmin()">
<template #label>
<tooltip-label :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.deploymentplanner"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="deploymentPlannerLoading"
:placeholder="apiParams.deploymentplanner.description"
@change="val => { handleDeploymentPlannerChange(val) }">
<a-select-option v-for="(opt) in deploymentPlanners" :key="opt.name" :label="opt.name || opt.description || ''">
{{ opt.name || opt.description }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="plannermode" ref="plannermode" :label="$t('label.plannermode')" v-if="plannerModeVisible">
<a-radio-group
v-model:value="form.plannermode"
buttonStyle="solid">
<a-radio-button value="">
{{ $t('label.none') }}
</a-radio-button>
<a-radio-button value="strict">
{{ $t('label.strict') }}
</a-radio-button>
<a-radio-button value="Preferred">
{{ $t('label.preferred') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="gpucardid" ref="gpucardid" :label="$t('label.gpu.card')" v-if="!isSystem">
<a-select
v-model:value="form.gpucardid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="gpuCardLoading"
:placeholder="$t('label.gpu.card')"
@change="handleGpuCardChange">
<a-select-option v-for="(opt, optIndex) in gpuCards" :key="optIndex" :value="opt.id" :label="opt.name || opt.description || ''">
{{ opt.description || opt.name || '' }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="vgpuprofile" ref="vgpuprofile" :label="$t('label.vgpu.profile')" v-if="!isSystem && form.gpucardid && vgpuProfiles.length > 0">
<a-select
v-model:value="form.vgpuprofile"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="vgpuProfileLoading"
:placeholder="$t('label.vgpu.profile')">
<a-select-option v-for="(vgpu, vgpuIndex) in vgpuProfiles" :key="vgpuIndex" :value="vgpu.id" :label="vgpu.vgpuprofile || ''">
{{ vgpu.name }} {{ getVgpuProfileDetails(vgpu) }}
</a-select-option>
</a-select>
</a-form-item>
<a-row :gutter="12" v-if="!isSystem && form.gpucardid">
<a-col :md="12" :lg="12">
<a-form-item name="gpucount" ref="gpucount">
<template #label>
<tooltip-label :title="$t('label.gpu.count')" :tooltip="apiParams.gpucount.description"/>
</template>
<a-input
v-model:value="form.gpucount"
type="number"
min="1"
max="16"
:placeholder="$t('label.gpu.count')"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="gpudisplay" ref="gpudisplay">
<template #label>
<tooltip-label :title="$t('label.gpu.display')" :tooltip="apiParams.gpudisplay.description"/>
</template>
<a-switch v-model:checked="form.gpudisplay" />
</a-form-item>
</a-col>
</a-row>
<a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-show="isAdmin()">
<a-switch v-model:checked="form.ispublic" />
</a-form-item>
<a-form-item name="domainid" ref="domainid" v-if="!form.ispublic">
<template #label>
<tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
</template>
<a-select
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.domainid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<block-outlined v-else style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="zoneid" ref="zoneid" v-if="!isSystem">
<template #label>
<tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
</template>
<a-select
id="zone-selection"
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.zoneid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@select="val => fetchvSphereStoragePolicies(val)"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<global-outlined v-else style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
name="storagepolicy"
ref="storagepolicy"
v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
<template #label>
<tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagepolicy"
:placeholder="apiParams.storagepolicy.description"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
{{ policy.name || policy.id }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="purgeresources" ref="purgeresources">
<template #label>
<tooltip-label :title="$t('label.purgeresources')" :tooltip="apiParams.purgeresources.description"/>
</template>
<a-switch v-model:checked="form.purgeresources"/>
</a-form-item>
<a-form-item name="showLeaseOptions" ref="showLeaseOptions" v-if="isLeaseFeatureEnabled">
<template #label>
<tooltip-label :title="$t('label.lease.enable')" :tooltip="$t('label.lease.enable.tooltip')" />
</template>
<a-switch v-model:checked="showLeaseOptions" @change="onToggleLeaseData"/>
</a-form-item>
<a-row :gutter="12" v-if="isLeaseFeatureEnabled && showLeaseOptions">
<a-col :md="12" :lg="12">
<a-form-item name="leaseduration" ref="leaseduration">
<template #label>
<tooltip-label :title="$t('label.leaseduration')"/>
</template>
<a-input
v-model:value="form.leaseduration"
:placeholder="$t('label.instance.lease.placeholder')"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="leaseexpiryaction" ref="leaseexpiryaction" v-if="form.leaseduration > 0">
<template #label>
<tooltip-label :title="$t('label.leaseexpiryaction')" />
</template>
<a-select v-model:value="form.leaseexpiryaction" :defaultValue="expiryActions">
<a-select-option v-for="action in expiryActions" :key="action" :label="action"/>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item name="computeonly" ref="computeonly">
<template #label>
<tooltip-label :title="$t('label.computeonly.offering')" :tooltip="$t('label.computeonly.offering.tooltip')"/>
</template>
<a-switch v-model:checked="form.computeonly" :checked="computeonly" @change="val => { computeonly = val }"/>
</a-form-item>
<a-card style="margin-bottom: 10px;">
<span v-if="computeonly">
<a-form-item name="storagetype" ref="storagetype">
<template #label>
<tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
</template>
<a-radio-group
v-model:value="form.storagetype"
buttonStyle="solid"
@change="selected => { handleStorageTypeChange(selected.target.value) }">
<a-radio-button value="shared">
{{ $t('label.shared') }}
</a-radio-button>
<a-radio-button value="local">
{{ $t('label.local') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="provisioningtype" ref="provisioningtype">
<template #label>
<tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
</template>
<a-radio-group
v-model:value="form.provisioningtype"
buttonStyle="solid"
@change="selected => { handleProvisioningTypeChange(selected.target.value) }">
<a-radio-button value="thin">
{{ $t('label.provisioningtype.thin') }}
</a-radio-button>
<a-radio-button value="sparse">
{{ $t('label.provisioningtype.sparse') }}
</a-radio-button>
<a-radio-button value="fat">
{{ $t('label.provisioningtype.fat') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="cachemode" ref="cachemode">
<template #label>
<tooltip-label :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
</template>
<a-radio-group
v-model:value="form.cachemode"
buttonStyle="solid"
@change="selected => { handleCacheModeChange(selected.target.value) }">
<a-radio-button value="none">
{{ $t('label.nodiskcache') }}
</a-radio-button>
<a-radio-button value="writeback">
{{ $t('label.writeback') }}
</a-radio-button>
<a-radio-button value="writethrough">
{{ $t('label.writethrough') }}
</a-radio-button>
<a-radio-button value="hypervisor_default">
{{ $t('label.hypervisor.default') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item :label="$t('label.qostype')" name="qostype" ref="qostype">
<a-radio-group
v-model:value="form.qostype"
buttonStyle="solid"
@change="selected => { handleQosTypeChange(selected.target.value) }">
<a-radio-button value="">
{{ $t('label.none') }}
</a-radio-button>
<a-radio-button value="hypervisor">
{{ $t('label.hypervisor') }}
</a-radio-button>
<a-radio-button value="storage">
{{ $t('label.storage') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-row :gutter="12" v-if="qosType === 'hypervisor'">
<a-col :md="12" :lg="12">
<a-form-item name="diskbytesreadrate" ref="diskbytesreadrate">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
</template>
<a-input
v-model:value="form.diskbytesreadrate"
:placeholder="apiParams.bytesreadrate.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskbyteswriterate" ref="diskbyteswriterate">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
</template>
<a-input
v-model:value="form.diskbyteswriterate"
:placeholder="apiParams.byteswriterate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="12" v-if="qosType === 'hypervisor'">
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsreadrate" ref="diskiopsreadrate">
<template #label>
<tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
</template>
<a-input
v-model:value="form.diskiopsreadrate"
:placeholder="apiParams.iopsreadrate.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskiopswriterate" ref="diskiopswriterate">
<template #label>
<tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
</template>
<a-input
v-model:value="form.diskiopswriterate"
:placeholder="apiParams.iopswriterate.description"/>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="!isSystem && qosType === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
<template #label>
<tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
</template>
<a-switch v-model:checked="form.iscustomizeddiskiops" :checked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
</a-form-item>
<a-row :gutter="12" v-if="qosType === 'storage' && !isCustomizedDiskIops">
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsmin" ref="diskiopsmin">
<template #label>
<tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmin"
:placeholder="apiParams.miniops.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item name="diskiopsmax" ref="diskiopsmax">
<template #label>
<tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmax"
:placeholder="apiParams.maxiops.description"/>
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="!isSystem && qosType === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
<template #label>
<tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
</template>
<a-input
v-model:value="form.hypervisorsnapshotreserve"
:placeholder="apiParams.hypervisorsnapshotreserve.description"/>
</a-form-item>
<a-row :gutter="12">
<a-col :md="12" :lg="12">
<a-form-item v-if="apiParams.rootdisksize" name="rootdisksize" ref="rootdisksize">
<template #label>
<tooltip-label :title="$t('label.root.disk.size')" :tooltip="apiParams.rootdisksize.description"/>
</template>
<a-input
v-model:value="form.rootdisksize"
:placeholder="apiParams.rootdisksize.description"/>
</a-form-item>
</a-col>
<a-col :md="12" :lg="12">
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="storagetags" ref="storagetags">
<template #label>
<tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
</template>
<a-select
mode="tags"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagetags"
showSearch
optionFilterProp="value"
:filterOption="(input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="storageTagLoading"
:placeholder="apiParams.tags.description"
v-if="isAdmin() || isDomainAdminAllowedToInformTags">
<a-select-option v-for="opt in storageTags" :key="opt">
{{ opt }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item name="encryptdisk" ref="encryptdisk">
<template #label>
<tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encryptroot.description" />
</template>
<a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
</a-form-item>
</span>
<span v-if="!computeonly">
<a-form-item>
<a-button type="primary" @click="addDiskOffering()"> {{ $t('label.add.disk.offering') }} </a-button>
<a-modal
:visible="showDiskOfferingModal"
:title="$t('label.add.disk.offering')"
:footer="null"
centered
:closable="true"
@cancel="closeDiskOfferingModal"
width="auto">
<add-disk-offering @close-action="closeDiskOfferingModal()" @publish-disk-offering-id="($event) => updateSelectedDiskOffering($event)"/>
</a-modal>
<br /><br />
<a-form-item :label="$t('label.disk.offerings')" name="diskofferingid" ref="diskofferingid">
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.diskofferingid"
:loading="loading"
:placeholder="$t('label.diskoffering')">
<a-select-option
v-for="(offering, index) in diskOfferings"
:value="offering.id"
:key="index">
{{ offering.displaytext || offering.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-form-item>
</span>
<a-form-item name="diskofferingstrictness" ref="diskofferingstrictness">
<template #label>
<tooltip-label :title="$t('label.diskofferingstrictness')" :tooltip="apiParams.diskofferingstrictness.description"/>
</template>
<a-switch v-model:checked="form.diskofferingstrictness" :checked="diskofferingstrictness" @change="val => { diskofferingstrictness = val }"/>
</a-form-item>
</a-card>
<a-form-item name="externaldetails" ref="externaldetails">
<template #label>
<tooltip-label :title="$t('label.externaldetails')" :tooltip="apiParams.externaldetails.description"/>
</template>
<a-switch v-model:checked="externalDetailsEnabled" @change="onExternalDetailsEnabledChange"/>
<a-card v-if="externalDetailsEnabled" style="margin-top: 10px">
<div style="margin-bottom: 10px">{{ $t('message.add.orchestrator.resource.details') }}</div>
<details-input
v-model:value="form.externaldetails" />
</a-card>
</a-form-item>
</a-form>
<br/>
<div :span="24" class="action-button">
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
</div>
</a-spin>
</div>
</template>
:apiParams="apiParams"
:isSystem="isSystem"
:isAdmin="isAdmin"
:ref="formRef"
@submit="handleSubmit">
<!-- form content is provided by ComputeOfferingForm component -->
<template #form-actions>
<br/>
<div :span="24" class="action-button">
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
</div>
</template>
</ComputeOfferingForm>
</a-spin>
</div>
</template>
<script>
import { ref, reactive, toRaw } from 'vue'
import ComputeOfferingForm from '@/components/offering/ComputeOfferingForm'
import { ref, reactive } from 'vue'
import { getAPI, postAPI } from '@/api'
import AddDiskOffering from '@/views/offering/AddDiskOffering'
import { isAdmin } from '@/role'
@ -695,9 +68,10 @@ import DetailsInput from '@/components/widgets/DetailsInput'
import store from '@/store'
export default {
name: 'CloneServiceOffering',
name: 'CreateComputeOffering',
mixins: [mixinForm],
components: {
ComputeOfferingForm,
AddDiskOffering,
ResourceIcon,
TooltipLabel,
@ -1023,9 +397,6 @@ export default {
this.gpuCardLoading = false
})
},
addDiskOffering () {
this.showDiskOfferingModal = true
},
fetchDiskOfferings () {
this.diskOfferingLoading = true
getAPI('listDiskOfferings', {
@ -1039,47 +410,18 @@ export default {
this.diskOfferingLoading = false
})
},
updateSelectedDiskOffering (id) {
if (id) {
this.selectedDiskOfferingId = id
}
},
closeDiskOfferingModal () {
this.fetchDiskOfferings()
this.showDiskOfferingModal = false
},
isAdmin () {
return isAdmin()
},
isDomainAdmin () {
return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
},
getVgpuProfileDetails (vgpuProfile) {
let output = '('
if (vgpuProfile?.videoram) {
output += `${vgpuProfile.videoram} MB`
}
if (vgpuProfile?.maxresolutionx && vgpuProfile?.maxresolutiony) {
if (output !== '(') {
output += ', '
}
output += `${vgpuProfile.maxresolutionx}x${vgpuProfile.maxresolutiony}`
}
output += ')'
if (output === '()') {
return ''
}
return output
},
checkIfDomainAdminIsAllowedToInformTag () {
const params = { id: store.getters.userInfo.accountid }
getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
})
},
arrayHasItems (array) {
return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
},
fetchDomainData () {
const params = {}
params.listAll = true
@ -1131,83 +473,13 @@ export default {
this.deploymentPlannerLoading = false
})
},
fetchvSphereStoragePolicies (zoneIndex) {
if (zoneIndex === 0 || this.form.zoneid.length > 1) {
this.storagePolicies = null
return
}
const zoneid = this.zones[zoneIndex].id
if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
this.storagePolicies = []
getAPI('listVsphereStoragePolicies', {
zoneid: zoneid
}).then(response => {
this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
})
}
},
handleStorageTypeChange (val) {
this.storageType = val
},
handleProvisioningTypeChange (val) {
this.provisioningType = val
},
handleCacheModeChange (val) {
this.cacheMode = val
},
handleComputeOfferingTypeChange (val) {
this.offeringType = val
},
handleQosTypeChange (val) {
this.qosType = val
},
handleDeploymentPlannerChange (planner) {
this.selectedDeploymentPlanner = planner
this.plannerModeVisible = false
if (this.selectedDeploymentPlanner === 'ImplicitDedicationPlanner') {
this.plannerModeVisible = isAdmin()
}
},
handlePlannerModeChange (val) {
this.plannerMode = val
},
handleGpuCardChange (cardId) {
this.selectedGpuCard = cardId
this.form.vgpuprofile = ''
if (cardId && cardId !== '') {
this.fetchVgpuProfiles(cardId)
} else {
this.vgpuProfiles = []
this.form.gpucount = '1'
}
},
fetchVgpuProfiles (gpuCardId) {
this.vgpuProfileLoading = true
this.vgpuProfiles = []
getAPI('listVgpuProfiles', {
gpucardid: gpuCardId
}).then(json => {
this.vgpuProfiles = json.listvgpuprofilesresponse.vgpuprofile || []
this.form.vgpuprofile = this.vgpuProfiles.length > 0 ? this.vgpuProfiles[0].id : ''
}).catch(error => {
console.error('Error fetching vGPU profiles:', error)
this.vgpuProfiles = []
}).finally(() => {
this.vgpuProfileLoading = false
})
},
onExternalDetailsEnabledChange (val) {
if (val || !this.form.externaldetails) {
return
}
this.form.externaldetails = undefined
},
handleSubmit (e) {
e.preventDefault()
if (e && e.preventDefault) {
e.preventDefault()
}
if (this.loading) return
this.formRef.value.validate().then(() => {
const formRaw = toRaw(this.form)
const values = this.handleRemoveFields(formRaw)
this.formRef.value.validate().then((values) => {
var params = {
issystem: this.isSystem,
name: values.name,
@ -1246,10 +518,10 @@ export default {
params.memory = values.memory
} else {
if (values.cpuspeed != null &&
values.mincpunumber != null &&
values.maxcpunumber != null &&
values.minmemory != null &&
values.maxmemory != null) {
values.mincpunumber != null &&
values.maxcpunumber != null &&
values.minmemory != null &&
values.maxmemory != null) {
params.cpuspeed = values.cpuspeed
params.mincpunumber = values.mincpunumber
params.maxcpunumber = values.maxcpunumber
@ -1275,7 +547,7 @@ export default {
params.maxiops = values.diskiopsmax
}
if (values.hypervisorsnapshotreserve !== undefined &&
values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
params.hypervisorsnapshotreserve = values.hypervisorsnapshotreserve
}
}
@ -1301,15 +573,15 @@ export default {
params.hosttags = values.hosttags
}
if ('deploymentplanner' in values &&
values.deploymentplanner !== undefined &&
values.deploymentplanner != null && values.deploymentplanner.length > 0) {
values.deploymentplanner !== undefined &&
values.deploymentplanner != null && values.deploymentplanner.length > 0) {
params.deploymentplanner = values.deploymentplanner
}
if ('deploymentplanner' in values &&
values.deploymentplanner !== undefined &&
values.deploymentplanner === 'ImplicitDedicationPlanner' &&
values.plannermode !== undefined &&
values.plannermode !== '') {
values.deploymentplanner !== undefined &&
values.deploymentplanner === 'ImplicitDedicationPlanner' &&
values.plannermode !== undefined &&
values.plannermode !== '') {
params['serviceofferingdetails[0].key'] = 'ImplicitDedicationMode'
params['serviceofferingdetails[0].value'] = values.plannermode
}
@ -1387,23 +659,12 @@ export default {
return Promise.reject(this.$t('message.error.number'))
}
return Promise.resolve()
},
onToggleLeaseData () {
if (this.showLeaseOptions === false) {
this.leaseduration = undefined
this.leaseexpiryaction = undefined
} else {
this.leaseduration = this.leaseduration !== undefined ? this.leaseduration : this.defaultLeaseDuration
this.leaseexpiryaction = this.leaseexpiryaction !== undefined ? this.leaseexpiryaction : this.defaultLeaseExpiryAction
}
this.form.leaseduration = this.leaseduration
this.form.leaseexpiryaction = this.leaseexpiryaction
}
}
}
</script>
<style scoped lang="scss">
<style scoped lang="scss">
.form-layout {
width: 80vw;
@media (min-width: 800px) {

500
ui/src/views/offering/CloneDiskOffering.vue
View File

@ -33,320 +33,33 @@
</div>
</template>
</a-alert>
<a-form
:ref="formRef"
:model="form"
:rules="rules"
@finish="handleSubmit"
layout="vertical"
>
<a-form-item name="name" ref="name">
<template #label>
<tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
</template>
<a-input
v-focus="true"
v-model:value="form.name"
:placeholder="apiParams.name.description"/>
</a-form-item>
<a-form-item name="displaytext" ref="displaytext">
<template #label>
<tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
</template>
<a-input
v-model:value="form.displaytext"
:placeholder="apiParams.displaytext.description"/>
</a-form-item>
<a-form-item name="storagetype" ref="storagetype">
<template #label>
<tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
</template>
<a-radio-group
v-model:value="form.storagetype"
buttonStyle="solid">
<a-radio-button value="shared">
{{ $t('label.shared') }}
</a-radio-button>
<a-radio-button value="local">
{{ $t('label.local') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="provisioningtype" ref="provisioningtype">
<template #label>
<tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
</template>
<a-radio-group
v-model:value="form.provisioningtype"
buttonStyle="solid">
<a-radio-button value="thin">
{{ $t('label.provisioningtype.thin') }}
</a-radio-button>
<a-radio-button value="sparse">
{{ $t('label.provisioningtype.sparse') }}
</a-radio-button>
<a-radio-button value="fat">
{{ $t('label.provisioningtype.fat') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="encryptdisk" ref="encryptdisk">
<template #label>
<tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encrypt.description" />
</template>
<a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
</a-form-item>
<a-form-item name="disksizestrictness" ref="disksizestrictness">
<template #label>
<tooltip-label :title="$t('label.disksizestrictness')" :tooltip="apiParams.disksizestrictness.description" />
</template>
<a-switch v-model:checked="form.disksizestrictness" :checked="disksizestrictness" @change="val => { disksizestrictness = val }" />
</a-form-item>
<a-form-item name="customdisksize" ref="customdisksize">
<template #label>
<tooltip-label :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
</template>
<a-switch v-model:checked="form.customdisksize" />
</a-form-item>
<a-form-item v-if="!form.customdisksize" name="disksize" ref="disksize">
<template #label>
<tooltip-label :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
</template>
<a-input
v-model:value="form.disksize"
:placeholder="apiParams.disksize.description"/>
</a-form-item>
<a-form-item name="qostype" ref="qostype" :label="$t('label.qostype')">
<a-radio-group
v-model:value="form.qostype"
buttonStyle="solid">
<a-radio-button value="">
{{ $t('label.none') }}
</a-radio-button>
<a-radio-button value="hypervisor">
{{ $t('label.hypervisor') }}
</a-radio-button>
<a-radio-button value="storage">
{{ $t('label.storage') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadrate" ref="diskbytesreadrate">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
</template>
<a-input
v-model:value="form.diskbytesreadrate"
:placeholder="apiParams.bytesreadrate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadratemax" ref="diskbytesreadratemax">
<template #label>
<tooltip-label :title="$t('label.diskbytesreadratemax')" :tooltip="apiParams.bytesreadratemax.description"/>
</template>
<a-input
v-model:value="form.diskbytesreadratemax"
:placeholder="apiParams.bytesreadratemax.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriterate" ref="diskbyteswriterate">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
</template>
<a-input
v-model:value="form.diskbyteswriterate"
:placeholder="apiParams.byteswriterate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriteratemax" ref="diskbyteswriteratemax">
<template #label>
<tooltip-label :title="$t('label.diskbyteswriteratemax')" :tooltip="apiParams.byteswriteratemax.description"/>
</template>
<a-input
v-model:value="form.diskbyteswriteratemax"
:placeholder="apiParams.byteswriteratemax.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopsreadrate" ref="diskiopsreadrate">
<template #label>
<tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
</template>
<a-input
v-model:value="form.diskiopsreadrate"
:placeholder="apiParams.iopsreadrate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopswriterate" ref="diskiopswriterate">
<template #label>
<tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
</template>
<a-input
v-model:value="form.diskiopswriterate"
:placeholder="apiParams.iopswriterate.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
<template #label>
<tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
</template>
<a-switch v-model:checked="form.iscustomizeddiskiops" />
</a-form-item>
<a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmin" ref="diskiopsmin">
<template #label>
<tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmin"
:placeholder="apiParams.miniops.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmax" ref="diskiopsmax">
<template #label>
<tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
</template>
<a-input
v-model:value="form.diskiopsmax"
:placeholder="apiParams.maxiops.description"/>
</a-form-item>
<a-form-item v-if="form.qostype === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
<template #label>
<tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
</template>
<a-input
v-model:value="form.hypervisorsnapshotreserve"
:placeholder="apiParams.hypervisorsnapshotreserve.description"/>
</a-form-item>
<a-form-item name="writecachetype" ref="writecachetype">
<template #label>
<tooltip-label :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
</template>
<a-radio-group
v-model:value="form.writecachetype"
buttonStyle="solid"
@change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
<a-radio-button value="none">
{{ $t('label.nodiskcache') }}
</a-radio-button>
<a-radio-button value="writeback">
{{ $t('label.writeback') }}
</a-radio-button>
<a-radio-button value="writethrough">
{{ $t('label.writethrough') }}
</a-radio-button>
<a-radio-button value="hypervisor_default">
{{ $t('label.hypervisor.default') }}
</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="tags" ref="tags">
<template #label>
<tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
mode="tags"
v-model:value="form.tags"
showSearch
optionFilterProp="value"
:filterOption="(input, option) => {
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="storageTagLoading"
:placeholder="apiParams.tags.description"
v-if="isAdmin() || isDomainAdminAllowedToInformTags">
<a-select-option v-for="(opt) in storageTags" :key="opt">
{{ opt }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('label.ispublic')" v-show="isAdmin()" name="ispublic" ref="ispublic">
<a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
</a-form-item>
<a-form-item v-if="!isPublic" name="domainid" ref="domainid">
<template #label>
<tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
</template>
<a-select
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.domainid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<block-outlined v-else style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item name="zoneid" ref="zoneid">
<template #label>
<tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
</template>
<a-select
id="zone-selection"
mode="multiple"
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.zoneid"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@select="val => fetchvSphereStoragePolicies(val)"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<global-outlined v-else style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null" name="storagepolicy" ref="storagepolicy">
<template #label>
<tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
</template>
<a-select
:getPopupContainer="(trigger) => trigger.parentNode"
v-model:value="form.storagepolicy"
:placeholder="apiParams.storagepolicy.description"
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
{{ policy.name || policy.id }}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
<div :span="24" class="action-button">
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
</div>
<DiskOfferingForm
ref="formRef"
:initialValues="form"
:apiParams="apiParams"
:isAdmin="isAdmin"
@submit="handleSubmit">
<template #form-actions>
<div :span="24" class="action-button">
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
</div>
</template>
</DiskOfferingForm>
</a-spin>
</div>
</template>
<script>
import { getAPI, postAPI } from '@/api'
import { reactive, ref, toRaw } from 'vue'
import DiskOfferingForm from '@/components/offering/DiskOfferingForm'
import { reactive } from 'vue'
import { postAPI } from '@/api'
import { isAdmin } from '@/role'
import { mixinForm } from '@/utils/mixin'
import ResourceIcon from '@/components/view/ResourceIcon'
import TooltipLabel from '@/components/widgets/TooltipLabel'
import store from '@/store'
export default {
name: 'CloneDiskOffering',
mixins: [mixinForm],
components: {
ResourceIcon,
TooltipLabel
DiskOfferingForm
},
props: {
resource: {
@ -356,93 +69,18 @@ export default {
},
data () {
return {
selectedDomains: [],
storageTags: [],
storagePolicies: null,
storageTagLoading: false,
isPublic: true,
isEncrypted: false,
domains: [],
domainLoading: false,
zones: [],
zoneLoading: false,
loading: false,
disksizestrictness: false,
encryptdisk: false,
isDomainAdminAllowedToInformTags: false
formRef: null,
form: reactive({}),
loading: false
}
},
beforeCreate () {
this.apiParams = this.$getApiParams('cloneDiskOffering')
},
created () {
this.zones = [
{
id: null,
name: this.$t('label.all.zone')
}
]
this.isPublic = isAdmin()
this.initForm()
this.fetchData()
this.populateFormFromResource()
},
methods: {
initForm () {
this.formRef = ref()
this.form = reactive({
storagetype: 'shared',
provisioningtype: 'thin',
customdisksize: true,
writecachetype: 'none',
qostype: '',
ispublic: this.isPublic,
disksizestrictness: this.disksizestrictness,
encryptdisk: this.encryptdisk
})
this.rules = reactive({
name: [{ required: true, message: this.$t('message.error.required.input') }],
disksize: [
{ required: true, message: this.$t('message.error.required.input') },
{ type: 'number', validator: this.validateNumber }
],
diskbytesreadrate: [{ type: 'number', validator: this.validateNumber }],
diskbytesreadratemax: [{ type: 'number', validator: this.validateNumber }],
diskbyteswriterate: [{ type: 'number', validator: this.validateNumber }],
diskbyteswriteratemax: [{ type: 'number', validator: this.validateNumber }],
diskiopsreadrate: [{ type: 'number', validator: this.validateNumber }],
diskiopswriterate: [{ type: 'number', validator: this.validateNumber }],
diskiopsmin: [{ type: 'number', validator: this.validateNumber }],
diskiopsmax: [{ type: 'number', validator: this.validateNumber }],
hypervisorsnapshotreserve: [{ type: 'number', validator: this.validateNumber }],
domainid: [{ type: 'array', required: true, message: this.$t('message.error.select') }],
zoneid: [{
type: 'array',
validator: async (rule, value) => {
if (value && value.length > 1 && value.indexOf(0) !== -1) {
return Promise.reject(this.$t('message.error.zone.combined'))
}
return Promise.resolve()
}
}]
})
},
handleWriteCacheTypeChange (val) {
this.form.writeCacheType = val
},
fetchData () {
this.fetchDomainData()
this.fetchZoneData()
if (isAdmin()) {
this.fetchStorageTagData()
}
if (this.isDomainAdmin()) {
this.checkIfDomainAdminIsAllowedToInformTag()
if (this.isDomainAdminAllowedToInformTags) {
this.fetchStorageTagData()
}
}
this.populateFormFromResource()
},
populateFormFromResource () {
if (!this.resource) return
@ -451,11 +89,9 @@ export default {
this.form.displaytext = r.displaytext
if (r.storagetype) {
this.storageType = r.storagetype
this.form.storagetype = r.storagetype
}
if (r.provisioningtype) {
this.provisioningType = r.provisioningtype
this.form.provisioningtype = r.provisioningtype
}
if (r.customized !== undefined) {
@ -464,21 +100,17 @@ export default {
if (r.disksize) this.form.disksize = r.disksize
if (r.cachemode) {
this.cacheMode = r.cachemode
this.form.writecachetype = r.cachemode
}
if (r.disksizestrictness !== undefined) {
this.form.disksizestrictness = r.disksizestrictness
this.disksizestrictness = r.disksizestrictness
}
if (r.encrypt !== undefined) {
this.form.encryptdisk = r.encrypt
this.encryptdisk = r.encrypt
}
if (r.diskBytesReadRate || r.diskBytesReadRateMax || r.diskBytesWriteRate || r.diskBytesWriteRateMax || r.diskIopsReadRate || r.diskIopsWriteRate) {
this.qosType = 'hypervisor'
this.form.qostype = 'hypervisor'
if (r.diskBytesReadRate) this.form.diskbytesreadrate = r.diskBytesReadRate
if (r.diskBytesReadRateMax) this.form.diskbytesreadratemax = r.diskBytesReadRateMax
@ -487,7 +119,6 @@ export default {
if (r.diskIopsReadRate) this.form.diskiopsreadrate = r.diskIopsReadRate
if (r.diskIopsWriteRate) this.form.diskiopswriterate = r.diskIopsWriteRate
} else if (r.miniops || r.maxiops) {
this.qosType = 'storage'
this.form.qostype = 'storage'
if (r.miniops) this.form.diskiopsmin = r.miniops
if (r.maxiops) this.form.diskiopsmax = r.maxiops
@ -503,83 +134,16 @@ export default {
if (r.vspherestoragepolicy) this.form.storagepolicy = r.vspherestoragepolicy
},
isDomainAdmin () {
return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
},
isAdmin () {
return isAdmin()
},
checkIfDomainAdminIsAllowedToInformTag () {
const params = { id: store.getters.userInfo.accountid }
getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
})
},
arrayHasItems (array) {
return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
},
fetchDomainData () {
const params = {}
params.listAll = true
params.showicon = true
params.details = 'min'
this.domainLoading = true
getAPI('listDomains', params).then(json => {
const listDomains = json.listdomainsresponse.domain
this.domains = this.domains.concat(listDomains)
}).finally(() => {
this.domainLoading = false
})
},
fetchZoneData () {
const params = {}
params.showicon = true
this.zoneLoading = true
getAPI('listZones', params).then(json => {
const listZones = json.listzonesresponse.zone
if (listZones) {
this.zones = this.zones.concat(listZones)
}
}).finally(() => {
this.zoneLoading = false
})
},
fetchStorageTagData () {
const params = {}
this.storageTagLoading = true
getAPI('listStorageTags', params).then(json => {
const tags = json.liststoragetagsresponse.storagetag || []
for (const tag of tags) {
if (!this.storageTags.includes(tag.name)) {
this.storageTags.push(tag.name)
}
}
}).finally(() => {
this.storageTagLoading = false
})
},
fetchvSphereStoragePolicies (zoneIndex) {
if (zoneIndex === 0 || this.form.zoneid.length > 1) {
this.storagePolicies = null
return
}
const zoneid = this.zones[zoneIndex].id
if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
this.storagePolicies = []
getAPI('listVsphereStoragePolicies', {
zoneid: zoneid
}).then(response => {
this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
})
}
},
handleSubmit (e) {
e.preventDefault()
if (e && e.preventDefault) {
e.preventDefault()
}
if (this.loading) return
this.formRef.value.validate().then(() => {
const formRaw = toRaw(this.form)
const values = this.handleRemoveFields(formRaw)
this.$refs.formRef.validate().then((values) => {
const params = {
sourceofferingid: this.resource.id,
name: values.name
@ -656,8 +220,9 @@ export default {
let domainId = null
if (domainIndexes && domainIndexes.length > 0) {
const domainIds = []
const domains = this.$refs.formRef.domains
for (let i = 0; i < domainIndexes.length; i++) {
domainIds.push(this.domains[domainIndexes[i]].id)
domainIds.push(domains[domainIndexes[i]].id)
}
domainId = domainIds.join(',')
}
@ -670,8 +235,9 @@ export default {
let zoneId = null
if (zoneIndexes && zoneIndexes.length > 0) {
const zoneIds = []
const zones = this.$refs.formRef.zones
for (let j = 0; j < zoneIndexes.length; j++) {
zoneIds.push(this.zones[zoneIndexes[j]].id)
zoneIds.push(zones[zoneIndexes[j]].id)
}
zoneId = zoneIds.join(',')
}
@ -693,18 +259,10 @@ export default {
}).finally(() => {
this.loading = false
})
}).catch(error => {
this.formRef.value.scrollToField(error.errorFields[0].name)
})
},
closeAction () {
this.$emit('close-action')
},
async validateNumber (rule, value) {
if (value && (isNaN(value) || value <= 0)) {
return Promise.reject(this.$t('message.error.number'))
}
return Promise.resolve()
}
}
}

269
ui/src/views/offering/CloneNetworkOffering.vue
View File

@ -117,7 +117,7 @@
</template>
<a-select
v-model:value="form.provider"
@change="handleProviderChange"
disabled
showSearch
optionFilterProp="label"
:filterOption="(input, option) => {
@ -131,12 +131,33 @@
</a-form-item>
</a-col>
</a-row>
<!-- NSX specific toggles (mirror AddNetworkOffering.vue) -->
<a-row :gutter="12" v-if="form.provider === 'NSX'">
<a-col :md="12" :lg="12">
<a-form-item name="nsxsupportlb" ref="nsxsupportlb" v-if="guestType === 'isolated'">
<template #label>
<tooltip-label :title="$t('label.nsx.supports.lb')" :tooltip="apiParams.nsxsupportlb.description"/>
</template>
<a-switch v-model:checked="form.nsxsupportlb" @change="val => { handleNsxLbService(val) }" />
</a-form-item>
</a-col>
<a-col :md="12" :lg="12" v-if="form.nsxsupportlb && form.forvpc">
<a-form-item name="nsxsupportsinternallb" ref="nsxsupportsinternallb" v-if="guestType === 'isolated'">
<template #label>
<tooltip-label :title="$t('label.nsx.supports.internal.lb')" :tooltip="apiParams.nsxsupportsinternallb.description"/>
</template>
<a-switch v-model:checked="form.nsxsupportsinternallb"/>
</a-form-item>
</a-col>
</a-row>
<a-form-item name="networkmode" ref="networkmode" v-if="guestType === 'isolated' && form.provider">
<template #label>
<tooltip-label :title="$t('label.networkmode')" :tooltip="apiParams.networkmode.description"/>
</template>
<a-select
v-model:value="form.networkmode"
@change="val => { handleForNetworkModeChange(val) }"
:disabled="provider === 'NSX' || provider === 'Netris'"
optionFilterProp="label"
:filterOption="(input, option) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
@ -287,9 +308,10 @@
<template #renderItem="{item}">
<a-list-item>
<CheckBoxSelectPair
:key="`${item.name}-${item.selectedProvider || 'none'}`"
:key="`${item.name}-${item.selectedProvider || 'none'}-${item.defaultChecked}`"
:resourceKey="item.name"
:checkBoxLabel="item.description"
:forExternalNetProvider="form.provider === 'NSX' || form.provider === 'Netris'"
:defaultCheckBoxValue="item.defaultChecked"
:defaultSelectValue="item.selectedProvider"
:selectOptions="item.provider"
@ -577,6 +599,30 @@ export default {
data () {
return {
loading: false,
VPCVR: {
name: 'VPCVirtualRouter',
description: 'VPCVirtualRouter',
enabled: true
},
VR: {
name: 'VirtualRouter',
description: 'VirtualRouter',
enabled: true
},
NSX: {
name: 'Nsx',
description: 'Nsx',
enabled: true
},
Netris: {
name: 'Netris',
description: 'Netris',
enabled: true
},
nsxSupportedServicesMap: {},
netrisSupportedServicesMap: {},
// supported services backup
supportedSvcs: [],
guestType: 'isolated',
forVpc: false,
provider: '',
@ -682,7 +728,9 @@ export default {
supportsstrechedl2subnet: false,
isolation: 'dedicated',
netscalerservicepackages: null,
netscalerservicepackagesdescription: ''
netscalerservicepackagesdescription: '',
nsxsupportlb: true,
nsxsupportsinternallb: false
})
this.rules = reactive({
name: [{ required: true, message: this.$t('message.error.required.input') }],
@ -737,7 +785,9 @@ export default {
this.supportedServices[i].description = serviceDisplayName
}
this.supportedSvcs = this.supportedServices.slice()
this.populateFormFromResource()
this.updateSupportedServices()
}).finally(() => {
this.supportedServiceLoading = false
})
@ -767,15 +817,51 @@ export default {
}
if (r.service && Array.isArray(r.service)) {
// Prefer provider from NetworkACL service if present (for NSX/Netris), else scan other services
let detectedProvider = null
const networkAclService = r.service.find(svc => svc.name === 'NetworkACL')
if (networkAclService && networkAclService.provider && networkAclService.provider.length > 0) {
const providerName = networkAclService.provider[0].name
if (providerName === 'Nsx') {
this.provider = 'NSX'
this.form.provider = 'NSX'
} else if (providerName === 'Netris') {
this.provider = 'Netris'
this.form.provider = 'Netris'
const provName = (networkAclService.provider[0].name || '').toLowerCase()
if (provName === 'nsx') detectedProvider = 'NSX'
else if (provName === 'netris') detectedProvider = 'Netris'
}
if (!detectedProvider) {
// fallback: detect provider (Nsx/Netris) from any service provider in the source offering
for (const svc of r.service) {
if (svc.provider && Array.isArray(svc.provider) && svc.provider.length > 0) {
const provName = (svc.provider[0].name || '').toLowerCase()
if (provName === 'nsx') {
detectedProvider = 'NSX'
break
} else if (provName === 'netris') {
detectedProvider = 'Netris'
break
}
}
}
}
if (detectedProvider) {
this.provider = detectedProvider
this.form.provider = detectedProvider
if (detectedProvider === 'NSX') {
this.nsxSupportedServicesMap = {}
for (const svc of r.service) {
if (svc.provider && svc.provider.length > 0) {
const provName = svc.provider[0].name
if (provName && provName.toLowerCase() === 'nsx') {
this.nsxSupportedServicesMap[svc.name] = this.NSX
} else if (svc.name === 'Dhcp' || svc.name === 'Dns' || svc.name === 'UserData') {
this.nsxSupportedServicesMap[svc.name] = this.forVpc ? this.VPCVR : this.VR
}
}
}
if (this.forVpc) {
this.nsxSupportedServicesMap.NetworkACL = this.NSX
} else {
this.nsxSupportedServicesMap.Firewall = this.NSX
}
}
}
}
@ -851,6 +937,8 @@ export default {
})
this.supportedServices = updatedServices
this.supportedSvcs = updatedServices.map(svc => ({ ...svc }))
this.sourceNatServiceChecked = !!this.selectedServiceProviderMap.SourceNat
this.lbServiceChecked = !!this.selectedServiceProviderMap.Lb
this.lbServiceProvider = this.selectedServiceProviderMap.Lb || ''
@ -867,6 +955,78 @@ export default {
})
})
}
if (this.provider === 'NSX') {
this.form.nsxsupportlb = Boolean(this.serviceProviderMap.Lb)
this.form.nsxsupportsinternallb = Boolean(r.nsxsupportsinternallb)
this.handleNsxLbService(this.form.nsxsupportlb)
}
},
updateSupportedServices () {
const supportedServices = this.supportedServices || []
if (!this.supportedSvcs || this.supportedSvcs.length === 0) {
this.supportedSvcs = supportedServices.slice()
}
if (this.provider !== 'NSX' && this.provider !== 'Netris') {
const filtered = supportedServices.map(svc => {
if (svc.name !== 'Connectivity') {
const providers = svc.provider.map(provider => {
if (this.forVpc) {
const enabledProviders = ['VpcVirtualRouter', 'Netscaler', 'BigSwitchBcf', 'ConfigDrive']
provider.enabled = enabledProviders.includes(provider.name)
} else {
provider.enabled = !['InternalLbVm', 'VpcVirtualRouter', 'Nsx', 'Netris'].includes(provider.name)
}
return provider
})
return { ...svc, provider: providers }
}
return svc
})
this.supportedServices = filtered
} else {
let svcMap = this.provider === 'NSX' ? this.nsxSupportedServicesMap : this.netrisSupportedServicesMap
if (!svcMap || Object.keys(svcMap).length === 0) {
svcMap = {}
const forVpc = this.forVpc
const baseProvider = this.provider === 'NSX' ? this.NSX : this.Netris
const vrProvider = forVpc ? this.VPCVR : this.VR
svcMap.Dhcp = vrProvider
svcMap.Dns = vrProvider
svcMap.UserData = vrProvider
if (this.networkmode === 'NATTED') {
svcMap.SourceNat = baseProvider
svcMap.StaticNat = baseProvider
svcMap.PortForwarding = baseProvider
svcMap.Lb = baseProvider
}
if (forVpc) {
svcMap.NetworkACL = baseProvider
} else {
svcMap.Firewall = baseProvider
}
}
const filtered = this.supportedSvcs.filter(svc => Object.keys(svcMap).includes(svc.name))
.map(svc => {
const preserveSelected = svc.selectedProvider !== undefined ? { defaultChecked: svc.defaultChecked, selectedProvider: svc.selectedProvider } : {}
const mappedProvider = svcMap[svc.name]
if (!['Dhcp', 'Dns', 'UserData'].includes(svc.name)) {
return { ...svc, provider: [mappedProvider], ...preserveSelected }
}
return { ...svc, provider: [mappedProvider], ...preserveSelected }
})
this.supportedServices = filtered
const newSelectedMap = {}
for (const svc of filtered) {
const mappedProvider = svc.provider && svc.provider[0]
const providerName = svc.selectedProvider || (mappedProvider && mappedProvider.name) || null
if (providerName) {
newSelectedMap[svc.name] = providerName
}
}
this.selectedServiceProviderMap = newSelectedMap
}
},
checkVirtualRouterForServices () {
this.isVirtualRouterForAtLeastOneService = false
@ -886,9 +1046,75 @@ export default {
},
handleForVpcChange (val) {
this.forVpc = val
this.updateSupportedServices()
},
handleProviderChange (val) {
this.provider = val
handleNsxLbService (supportLb) {
const forVpc = this.forVpc
const baseProvider = this.NSX
const vrProvider = forVpc ? this.VPCVR : this.VR
const map = {
Dhcp: vrProvider,
Dns: vrProvider,
UserData: vrProvider
}
const wantSourceNat = this.networkmode === 'NATTED' || !!this.serviceProviderMap.SourceNat
const wantStaticNat = this.networkmode === 'NATTED' || !!this.serviceProviderMap.StaticNat
const wantPortForwarding = this.networkmode === 'NATTED' || !!this.serviceProviderMap.PortForwarding
const wantLb = supportLb || !!this.serviceProviderMap.Lb
if (wantSourceNat) map.SourceNat = baseProvider
if (wantStaticNat) map.StaticNat = baseProvider
if (wantPortForwarding) map.PortForwarding = baseProvider
if (wantLb) map.Lb = baseProvider
if (forVpc) map.NetworkACL = baseProvider
else map.Firewall = baseProvider
this.nsxSupportedServicesMap = map
this.updateSupportedServices()
},
handleForNetworkModeChange (val) {
this.networkmode = val
const routedExcludedServices = ['SourceNat', 'StaticNat', 'Lb', 'PortForwarding', 'Vpn']
if (val === 'ROUTED' && this.guestType === 'isolated') {
routedExcludedServices.forEach(service => {
if (this.selectedServiceProviderMap[service]) {
this.handleSupportedServiceChange(service, false, null)
}
})
this.supportedServices = this.supportedServices.map(svc => {
if (routedExcludedServices.includes(svc.name)) {
return {
...svc,
defaultChecked: false,
selectedProvider: null
}
}
return svc
})
} else if (val === 'NATTED') {
routedExcludedServices.forEach(service => {
if (!this.selectedServiceProviderMap[service] && this.serviceProviderMap[service]) {
const provider = this.serviceProviderMap[service]
this.handleSupportedServiceChange(service, true, provider)
}
})
this.supportedServices = this.supportedServices.map(svc => {
if (routedExcludedServices.includes(svc.name) && this.serviceProviderMap[svc.name]) {
return {
...svc,
defaultChecked: true,
selectedProvider: this.serviceProviderMap[svc.name]
}
}
return svc
})
}
},
isAdmin () {
return isAdmin()
@ -1002,10 +1228,26 @@ export default {
params.displaytext = values.displaytext
}
const forNsx = values.provider === 'NSX'
if (forNsx) {
params.provider = 'NSX'
params.nsxsupportlb = values.nsxsupportlb
if ('nsxsupportsinternallb' in values) {
params.nsxsupportsinternallb = values.nsxsupportsinternallb
}
}
const forNetris = values.provider === 'Netris'
if (forNetris) {
params.provider = 'Netris'
}
if (values.guestiptype) {
params.guestiptype = values.guestiptype
}
// MUST send supportedservices explicitly for ALL providers (including NSX/Netris)
// because backend's cloneNetworkOffering copies services from source offering if not provided
// When network mode changes, we need to send the updated service list
if (this.selectedServiceProviderMap != null) {
const supportedServices = Object.keys(this.selectedServiceProviderMap)
params.supportedservices = supportedServices.join(',')
@ -1149,6 +1391,9 @@ export default {
params.domainid = domainId
}
}
if (values.networkmode) {
params.networkmode = values.networkmode
}
const zoneIndexes = values.zoneid
let zoneId = null