From 251361c790c640c74c9725b68354df56a1da69d4 Mon Sep 17 00:00:00 2001
From: Dajeong-Park <ekwjd7182@gmail.com>
Date: Thu, 21 May 2026 14:22:14 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=EB=94=94=EC=8A=A4=ED=81=AC/=EC=BB=B4?=
 =?UTF-8?q?=ED=93=A8=ED=8C=85=20=EC=98=A4=ED=8D=BC=EB=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80/=EB=B3=B5=EC=A0=9C=20=EC=96=91=EC=8B=9D=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=A9=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/offering/AddComputeOffering.vue | 706 +------------------
 ui/src/views/offering/AddDiskOffering.vue    | 415 +----------
 2 files changed, 58 insertions(+), 1063 deletions(-)

diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index 2a687bb6500a..3a588fd76f8a 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -18,664 +18,22 @@
 <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 v-if="!form.shareable" name="kvdoenable" ref="kvdoenable">
-              <template #label>
-                <tooltip-label :title="$t('label.kvdoenable')" :tooltip="apiParams.kvdoenable.description"/>
-              </template>
-              <a-switch v-model:checked="form.kvdoenable" />
-            </a-form-item>
-            <a-form-item v-if="!form.kvdoenable" name="shareable" ref="shareable">
-              <template #label>
-                <tooltip-label :title="$t('label.shareable')" :tooltip="apiParams.shareable.description"/>
-              </template>
-              <a-switch v-model:checked="form.shareable" />
-            </a-form-item>
-            <a-form-item v-if="!form.shareable" 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>
@@ -890,10 +248,8 @@ export default {
     },
     fetchGPUCards () {
       this.gpuCardLoading = true
-      getAPI('listGpuCards', {
-      }).then(json => {
+      getAPI('listGpuCards', {}).then(json => {
         this.gpuCards = json.listgpucardsresponse.gpucard || []
-        // Add a "None" option at the beginning
         this.gpuCards.unshift({
           id: '',
           name: this.$t('label.none')
@@ -909,7 +265,7 @@ export default {
       }).then(json => {
         this.diskOfferings = json.listdiskofferingsresponse.diskoffering || []
         if (this.selectedDiskOfferingId === '') {
-          this.selectedDiskOfferingId = this.diskOfferings[0].id || ''
+          this.selectedDiskOfferingId = this.diskOfferings?.[0]?.id || ''
         }
       }).finally(() => {
         this.diskOfferingLoading = false
@@ -985,7 +341,7 @@ export default {
       if (this.loading) return
 
       this.formRef.value.validate().then((values) => {
-        var params = {
+        const params = {
           issystem: this.isSystem,
           name: values.name,
           displaytext: values.displaytext,
@@ -1048,7 +404,7 @@ export default {
           params.rootdisksize = values.rootdisksize
         }
         if (values.qostype === 'storage') {
-          var customIops = values.iscustomizeddiskiops === true
+          const customIops = values.iscustomizeddiskiops === true
           params.customizediops = customIops
           if (!customIops) {
             if (values.diskiopsmin != null && values.diskiopsmin.length > 0) {
@@ -1077,8 +433,7 @@ export default {
           }
         }
         if (values.storagetags != null && values.storagetags.length > 0) {
-          var tags = values.storagetags.join(',')
-          params.tags = tags
+          params.tags = values.storagetags.join(',')
         }
         if (values.hosttags != null && values.hosttags.length > 0) {
           params.hosttags = values.hosttags
@@ -1112,12 +467,12 @@ export default {
         }
 
         if (values.ispublic !== true) {
-          var domainIndexes = values.domainid
-          var domainId = null
+          const domainIndexes = values.domainid
+          let domainId = null
           if (domainIndexes && domainIndexes.length > 0) {
-            var domainIds = []
-            for (var i = 0; i < domainIndexes.length; i++) {
-              domainIds = domainIds.concat(this.domains[domainIndexes[i]].id)
+            const domainIds = []
+            for (let i = 0; i < domainIndexes.length; i++) {
+              domainIds.push(this.domains[domainIndexes[i]].id)
             }
             domainId = domainIds.join(',')
           }
@@ -1125,12 +480,12 @@ export default {
             params.domainid = domainId
           }
         }
-        var zoneIndexes = values.zoneid
-        var zoneId = null
+        const zoneIndexes = values.zoneid
+        let zoneId = null
         if (zoneIndexes && zoneIndexes.length > 0) {
-          var zoneIds = []
-          for (var j = 0; j < zoneIndexes.length; j++) {
-            zoneIds = zoneIds.concat(this.zones[zoneIndexes[j]].id)
+          const zoneIds = []
+          for (let j = 0; j < zoneIndexes.length; j++) {
+            zoneIds.push(this.zones[zoneIndexes[j]].id)
           }
           zoneId = zoneIds.join(',')
         }
@@ -1146,6 +501,7 @@ export default {
           })
         }
 
+        this.loading = true
         postAPI('createServiceOffering', params).then(json => {
           const message = this.isSystem
             ? `${this.$t('message.create.service.offering')}: `
diff --git a/ui/src/views/offering/AddDiskOffering.vue b/ui/src/views/offering/AddDiskOffering.vue
index 0ebbef18058b..d8978733770e 100644
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@@ -18,331 +18,33 @@
 <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 v-if="!form.shareable" name="kvdoenable" ref="kvdoenable">
-          <template #label>
-            <tooltip-label :title="$t('label.kvdoenable')" :tooltip="apiParams.kvdoenable.description"/>
-          </template>
-          <a-switch v-model:checked="form.kvdoenable" />
-        </a-form-item>
-        <a-form-item v-if="!form.kvdoenable" name="shareable" ref="shareable">
-          <template #label>
-            <tooltip-label :title="$t('label.shareable')" :tooltip="apiParams.shareable.description"/>
-          </template>
-          <a-switch v-model:checked="form.shareable" />
-        </a-form-item>
-        <a-form-item  v-if="!form.shareable" 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 DiskOfferingForm from '@/components/offering/DiskOfferingForm'
+import { reactive } from 'vue'
 import { postAPI } from '@/api'
-import { reactive, ref } from 'vue'
 import { isAdmin } from '@/role'
-import { mixinForm } from '@/utils/mixin'
-import ResourceIcon from '@/components/view/ResourceIcon'
-import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddDiskOffering',
-  mixins: [mixinForm],
   components: {
-    ResourceIcon,
-    TooltipLabel
+    DiskOfferingForm
   },
   data () {
     return {
@@ -354,69 +56,7 @@ export default {
   beforeCreate () {
     this.apiParams = this.$getApiParams('createDiskOffering')
   },
-  created () {
-  },
   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,
-        kvdoenable: false,
-        shareable: false
-      })
-      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()
     },
@@ -427,7 +67,7 @@ export default {
       if (this.loading) return
 
       this.$refs.formRef.validate().then((values) => {
-        var params = {
+        const params = {
           name: values.name,
           displaytext: values.displaytext,
           storageType: values.storagetype,
@@ -446,7 +86,7 @@ export default {
           params.disksize = values.disksize
         }
         if (values.qostype === 'storage') {
-          var customIops = values.iscustomizeddiskiops === true
+          const customIops = values.iscustomizeddiskiops === true
           params.customizediops = customIops
           if (!customIops) {
             if (values.diskiopsmin != null && values.diskiopsmin.length > 0) {
@@ -480,16 +120,15 @@ export default {
           }
         }
         if (values.tags != null && values.tags.length > 0) {
-          var tags = values.tags.join(',')
-          params.tags = tags
+          params.tags = values.tags.join(',')
         }
         if (values.ispublic !== true) {
-          var domainIndexes = values.domainid
-          var domainId = null
+          const domainIndexes = values.domainid
+          let domainId = null
           if (domainIndexes && domainIndexes.length > 0) {
-            var domainIds = []
+            const domainIds = []
             const domains = this.$refs.formRef.domains
-            for (var i = 0; i < domainIndexes.length; i++) {
+            for (let i = 0; i < domainIndexes.length; i++) {
               domainIds.push(domains[domainIndexes[i]].id)
             }
             domainId = domainIds.join(',')
@@ -498,12 +137,12 @@ export default {
             params.domainid = domainId
           }
         }
-        var zoneIndexes = values.zoneid
-        var zoneId = null
+        const zoneIndexes = values.zoneid
+        let zoneId = null
         if (zoneIndexes && zoneIndexes.length > 0) {
-          var zoneIds = []
+          const zoneIds = []
           const zones = this.$refs.formRef.zones
-          for (var j = 0; j < zoneIndexes.length; j++) {
+          for (let j = 0; j < zoneIndexes.length; j++) {
             zoneIds.push(zones[zoneIndexes[j]].id)
           }
           zoneId = zoneIds.join(',')

From 1ba7cbe4d3d7f9b12147e39b841b7c4fa9e89f35 Mon Sep 17 00:00:00 2001
From: Dajeong-Park <ekwjd7182@gmail.com>
Date: Fri, 22 May 2026 10:21:58 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=EC=BB=B4=ED=93=A8=ED=8A=B8=20=EC=98=A4?=
 =?UTF-8?q?=ED=8D=BC=EB=A7=81=20=EB=B3=B5=EC=A0=9C=20=EC=8B=9C=20=EC=A0=95?=
 =?UTF-8?q?=EC=83=81=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EA=B8=B0=EC=A1=B4=20?=
 =?UTF-8?q?=EA=B0=92=EC=9D=84=20=EA=B0=80=EC=A0=B8=EC=98=A4=EC=A7=80=20?=
 =?UTF-8?q?=EB=AA=BB=ED=95=98=EB=8A=94=20=EC=98=A4=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../offering/ComputeOfferingForm.vue          | 51 +++++++++++++--
 .../views/offering/CloneComputeOffering.vue   | 62 ++++++++++++++++---
 2 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/offering/ComputeOfferingForm.vue b/ui/src/components/offering/ComputeOfferingForm.vue
index c621324f108e..1c2c626cbfbf 100644
--- a/ui/src/components/offering/ComputeOfferingForm.vue
+++ b/ui/src/components/offering/ComputeOfferingForm.vue
@@ -366,11 +366,11 @@
       <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-switch v-model:checked="form.computeonly" />
     </a-form-item>
 
     <a-card style="margin-bottom: 10px;">
-      <span v-if="computeonly">
+      <span v-if="form.computeonly">
         <a-form-item name="storagetype" ref="storagetype">
           <template #label>
             <tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
@@ -517,7 +517,7 @@
           <a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
         </a-form-item>
       </span>
-      <span v-if="!computeonly">
+      <span v-if="!form.computeonly">
         <a-form-item>
           <a-button type="primary" @click="addDiskOffering()"> {{ $t('label.add.disk.offering') }} </a-button>
           <a-modal
@@ -670,9 +670,18 @@ export default {
       externalDetailsEnabled: false
     }
   },
+  watch: {
+    initialValues: {
+      deep: true,
+      handler (values) {
+        this.applyInitialValues(values)
+      }
+    }
+  },
   created () {
     this.zones = [{ id: null, name: this.$t('label.all.zone') }]
     this.initForm()
+    this.syncUiStateFromForm()
     this.fetchData()
     this.isPublic = isAdmin()
     this.form.ispublic = this.isPublic
@@ -684,6 +693,28 @@ export default {
         name: [{ required: true, message: this.$t('message.error.required.input') }]
       })
     },
+    applyInitialValues (values) {
+      if (!values) {
+        return
+      }
+      Object.assign(this.form, values)
+      this.syncUiStateFromForm()
+    },
+    syncUiStateFromForm () {
+      this.offeringType = this.form.offeringtype || 'fixed'
+      this.computeonly = this.form.computeonly !== false
+      this.qosType = this.form.qostype || ''
+      this.isCustomizedDiskIops = this.form.iscustomizeddiskiops === true
+      this.selectedDiskOfferingId = this.form.diskofferingid || ''
+      this.diskofferingstrictness = this.form.diskofferingstrictness === true
+      this.encryptdisk = this.form.encryptdisk === true
+      this.selectedGpuCard = this.form.gpucardid || ''
+      this.showLeaseOptions = this.form.leaseduration !== undefined && this.form.leaseduration !== null
+      this.externalDetailsEnabled = !!(this.form.externaldetails && Object.keys(this.form.externaldetails).length > 0)
+      if (this.form.deploymentplanner) {
+        this.handleDeploymentPlannerChange(this.form.deploymentplanner)
+      }
+    },
     fetchData () {
       this.fetchDomainData()
       this.fetchZoneData()
@@ -714,12 +745,18 @@ export default {
       this.diskOfferingLoading = true
       getAPI('listDiskOfferings', { listall: true }).then(json => {
         this.diskOfferings = json.listdiskofferingsresponse.diskoffering || []
-        if (this.selectedDiskOfferingId === '') {
+        if (!this.form.diskofferingid) {
           this.selectedDiskOfferingId = this.diskOfferings[0]?.id || ''
+          this.form.diskofferingid = this.selectedDiskOfferingId
         }
       }).finally(() => { this.diskOfferingLoading = false })
     },
-    updateSelectedDiskOffering (id) { if (id) this.selectedDiskOfferingId = id },
+    updateSelectedDiskOffering (id) {
+      if (id) {
+        this.selectedDiskOfferingId = id
+        this.form.diskofferingid = id
+      }
+    },
     closeDiskOfferingModal () { this.fetchDiskOfferings(); this.showDiskOfferingModal = false },
     isDomainAdmin () {
       return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
@@ -771,7 +808,9 @@ export default {
         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 : ''
+        if (!this.form.deploymentplanner) {
+          this.form.deploymentplanner = this.deploymentPlanners.length > 0 ? this.deploymentPlanners[0].name : ''
+        }
       }).finally(() => { this.deploymentPlannerLoading = false })
     },
     fetchvSphereStoragePolicies (zoneIndex) {
diff --git a/ui/src/views/offering/CloneComputeOffering.vue b/ui/src/views/offering/CloneComputeOffering.vue
index 07ce8852add5..71d54f10b64d 100644
--- a/ui/src/views/offering/CloneComputeOffering.vue
+++ b/ui/src/views/offering/CloneComputeOffering.vue
@@ -160,8 +160,49 @@ export default {
     this.fetchData()
     this.isPublic = isAdmin()
     this.form.ispublic = this.isPublic
+    this.fetchSourceOffering()
   },
   methods: {
+    fetchSourceOffering () {
+      if (!this.resource?.id) {
+        this.populateFormFromResource()
+        return
+      }
+
+      const params = {
+        id: this.resource.id,
+        listall: true,
+        details: 'all'
+      }
+      if (this.isSystem) {
+        params.issystem = true
+      }
+
+      getAPI('listServiceOfferings', params).then(json => {
+        const offering = json?.listserviceofferingsresponse?.serviceoffering?.[0]
+        const sourceOffering = offering || this.resource
+        this.populateFormFromResource(sourceOffering)
+        this.resolveComputeOnlyState(sourceOffering)
+      }).catch(() => {
+        this.populateFormFromResource()
+        this.resolveComputeOnlyState(this.resource)
+      })
+    },
+    resolveComputeOnlyState (sourceResource) {
+      if (!sourceResource?.diskofferingid) {
+        return
+      }
+
+      getAPI('listDiskOfferings', {
+        id: sourceResource.diskofferingid,
+        listall: true
+      }).then(json => {
+        const diskOffering = json?.listdiskofferingsresponse?.diskoffering?.[0]
+        const isComputeOnly = !diskOffering
+        this.form.computeonly = isComputeOnly
+        this.computeonly = isComputeOnly
+      })
+    },
     initForm () {
       this.formRef = ref()
       this.form = reactive({
@@ -262,13 +303,13 @@ export default {
         }
       }
       this.fetchDiskOfferings()
-      this.populateFormFromResource()
     },
-    populateFormFromResource () {
-      if (!this.resource) return
+    populateFormFromResource (sourceResource = this.resource) {
+      if (!sourceResource) return
 
       // Pre-fill form with source offering values
-      const r = this.resource
+      const r = sourceResource
+      const offeringDetails = r.serviceofferingdetails || {}
       this.form.name = r.name + ' - Clone'
       this.form.displaytext = r.displaytext
 
@@ -289,10 +330,10 @@ export default {
       if (r.cpuspeed) this.form.cpuspeed = r.cpuspeed
       if (r.memory) this.form.memory = r.memory
 
-      if (r.mincpunumber) this.form.mincpunumber = r.mincpunumber
-      if (r.maxcpunumber) this.form.maxcpunumber = r.maxcpunumber
-      if (r.minmemory) this.form.minmemory = r.minmemory
-      if (r.maxmemory) this.form.maxmemory = r.maxmemory
+      if (r.mincpunumber || offeringDetails.mincpunumber) this.form.mincpunumber = r.mincpunumber || offeringDetails.mincpunumber
+      if (r.maxcpunumber || offeringDetails.maxcpunumber) this.form.maxcpunumber = r.maxcpunumber || offeringDetails.maxcpunumber
+      if (r.minmemory || offeringDetails.minmemory) this.form.minmemory = r.minmemory || offeringDetails.minmemory
+      if (r.maxmemory || offeringDetails.maxmemory) this.form.maxmemory = r.maxmemory || offeringDetails.maxmemory
 
       if (r.hosttags) this.form.hosttags = r.hosttags
       if (r.networkrate) this.form.networkrate = r.networkrate
@@ -304,6 +345,11 @@ export default {
       if (r.limitcpuuse !== undefined) this.form.limitcpuuse = r.limitcpuuse
       if (r.isvolatile !== undefined) this.form.isvolatile = r.isvolatile
 
+      if (r.diskofferingid) {
+        this.form.diskofferingid = r.diskofferingid
+        this.selectedDiskOfferingId = r.diskofferingid
+      }
+
       if (r.storagetype) {
         this.storageType = r.storagetype
         this.form.storagetype = r.storagetype

From 7377f7c064a07fd6b20bd8edb54b5d1ecf22731c Mon Sep 17 00:00:00 2001
From: Dajeong-Park <ekwjd7182@gmail.com>
Date: Fri, 22 May 2026 13:26:46 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=EC=BB=B4=ED=93=A8=ED=8A=B8=20=EC=98=A4?=
 =?UTF-8?q?=ED=8D=BC=EB=A7=81=20=EC=B6=94=EA=B0=80=20=EC=8B=9C=20=EC=95=95?=
 =?UTF-8?q?=EC=B6=95/=EC=A4=91=EB=B3=B5=20=ED=99=9C=EC=84=B1=ED=99=94?=
 =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B2=84=EA=B7=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/cloud/configuration/ConfigurationManagerImpl.java  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java b/server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java
index 091116d2bba0..6549908b7911 100644
--- a/server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java
+++ b/server/src/main/java/com/cloud/configuration/ConfigurationManagerImpl.java
@@ -3785,6 +3785,8 @@ private DiskOfferingVO createDiskOfferingInternal(final String name, final Strin
         diskOffering.setMinIops(minIops);
         diskOffering.setMaxIops(maxIops);
         diskOffering.setEncrypt(encrypt);
+        diskOffering.setShareable(shareable);
+        diskOffering.setKvdoEnable(kvdoEnable);
 
         setBytesRate(diskOffering, bytesReadRate, bytesReadRateMax, bytesReadRateMaxLength, bytesWriteRate, bytesWriteRateMax, bytesWriteRateMaxLength);
         setIopsRate(diskOffering, iopsReadRate, iopsReadRateMax, iopsReadRateMaxLength, iopsWriteRate, iopsWriteRateMax, iopsWriteRateMaxLength);

From 919ffd8a3929ce49acb49e4bad3df2239b0a9976 Mon Sep 17 00:00:00 2001
From: Dajeong-Park <ekwjd7182@gmail.com>
Date: Fri, 22 May 2026 13:27:46 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=EC=BB=B4=ED=93=A8=ED=8A=B8/=EB=94=94?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=20=EC=98=A4=ED=8D=BC=EB=A7=81=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20form=EC=97=90=20=EC=95=95=EC=B6=95/=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=20=EC=A0=9C=EA=B1=B0,=20=EA=B3=B5=EC=9C=A0=EB=B3=BC?=
 =?UTF-8?q?=EB=A5=A8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../offering/ComputeOfferingForm.vue          |  18 ++-
 .../components/offering/DiskOfferingForm.vue  | 107 ++++++++++++++++--
 .../views/offering/CloneComputeOffering.vue   |  19 +++-
 ui/src/views/offering/CloneDiskOffering.vue   |  68 +++++++++--
 4 files changed, 190 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/offering/ComputeOfferingForm.vue b/ui/src/components/offering/ComputeOfferingForm.vue
index 1c2c626cbfbf..6ba8be151bf8 100644
--- a/ui/src/components/offering/ComputeOfferingForm.vue
+++ b/ui/src/components/offering/ComputeOfferingForm.vue
@@ -390,7 +390,21 @@
             <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">
+        <a-form-item v-if="!form.shareable" name="kvdoenable" ref="kvdoenable">
+          <template #label>
+            <tooltip-label :title="$t('label.kvdoenable')" :tooltip="apiParams.kvdoenable ? apiParams.kvdoenable.description : ''"/>
+          </template>
+          <a-switch v-model:checked="form.kvdoenable" />
+        </a-form-item>
+
+        <a-form-item v-if="!form.kvdoenable" name="shareable" ref="shareable">
+          <template #label>
+            <tooltip-label :title="$t('label.shareable')" :tooltip="apiParams.shareable ? apiParams.shareable.description : ''"/>
+          </template>
+          <a-switch v-model:checked="form.shareable" />
+        </a-form-item>
+
+        <a-form-item v-if="!form.shareable" name="cachemode" ref="cachemode">
           <template #label>
             <tooltip-label :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
           </template>
@@ -621,6 +635,8 @@ export default {
         diskofferingid: null,
         diskofferingstrictness: false,
         encryptdisk: false,
+        kvdoenable: false,
+        shareable: false,
         leaseduration: undefined,
         leaseexpiryaction: undefined
       }, this.initialValues || {})),
diff --git a/ui/src/components/offering/DiskOfferingForm.vue b/ui/src/components/offering/DiskOfferingForm.vue
index f3f39647fefa..250dedc7dbe5 100644
--- a/ui/src/components/offering/DiskOfferingForm.vue
+++ b/ui/src/components/offering/DiskOfferingForm.vue
@@ -76,13 +76,13 @@
       <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-switch v-model:checked="form.encryptdisk" />
     </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-switch v-model:checked="form.disksizestrictness" />
     </a-form-item>
     <a-form-item name="customdisksize" ref="customdisksize">
       <template #label>
@@ -191,7 +191,19 @@
         v-model:value="form.hypervisorsnapshotreserve"
         :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
     </a-form-item>
-    <a-form-item name="writecachetype" ref="writecachetype">
+    <a-form-item v-if="!form.shareable" name="kvdoenable" ref="kvdoenable">
+      <template #label>
+        <tooltip-label :title="$t('label.kvdoenable')" :tooltip="apiParams.kvdoenable ? apiParams.kvdoenable.description : ''"/>
+      </template>
+      <a-switch v-model:checked="form.kvdoenable" />
+    </a-form-item>
+    <a-form-item v-if="!form.kvdoenable" name="shareable" ref="shareable">
+      <template #label>
+        <tooltip-label :title="$t('label.shareable')" :tooltip="apiParams.shareable ? apiParams.shareable.description : ''"/>
+      </template>
+      <a-switch v-model:checked="form.shareable" />
+    </a-form-item>
+    <a-form-item v-if="!form.shareable" name="writecachetype" ref="writecachetype">
       <template #label>
         <tooltip-label :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
       </template>
@@ -235,9 +247,9 @@
       </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-switch v-model:checked="form.ispublic" />
     </a-form-item>
-    <a-form-item v-if="!isPublic" name="domainid" ref="domainid">
+    <a-form-item v-if="!form.ispublic" name="domainid" ref="domainid">
       <template #label>
         <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
       </template>
@@ -353,7 +365,9 @@ export default {
         qostype: '',
         ispublic: true,
         disksizestrictness: false,
-        encryptdisk: false
+        encryptdisk: false,
+        kvdoenable: false,
+        shareable: false
       }, this.initialValues || {})),
       rules: reactive({}),
       storageTags: [],
@@ -364,17 +378,25 @@ export default {
       domainLoading: false,
       zones: [],
       zoneLoading: false,
-      disksizestrictness: false,
-      encryptdisk: false,
       isDomainAdminAllowedToInformTags: false
     }
   },
+  watch: {
+    initialValues: {
+      deep: true,
+      handler (values) {
+        this.applyInitialValues(values)
+      }
+    }
+  },
   created () {
     this.zones = [{ id: null, name: this.$t('label.all.zone') }]
     this.initForm()
+    this.applyInitialValues(this.initialValues)
     this.fetchData()
-    this.isPublic = isAdmin()
-    this.form.ispublic = this.isPublic
+    if (this.form.ispublic === undefined) {
+      this.form.ispublic = isAdmin()
+    }
   },
   methods: {
     initForm () {
@@ -406,6 +428,40 @@ export default {
         }]
       })
     },
+    applyInitialValues (values) {
+      if (!values) {
+        return
+      }
+      Object.assign(this.form, values)
+      this.normalizeQosType()
+      this.syncUiStateFromForm()
+    },
+    normalizeQosType () {
+      const hasHypervisorQos = [
+        this.form.diskbytesreadrate,
+        this.form.diskbytesreadratemax,
+        this.form.diskbyteswriterate,
+        this.form.diskbyteswriteratemax,
+        this.form.diskiopsreadrate,
+        this.form.diskiopswriterate
+      ].some(value => value !== undefined && value !== null && value !== '')
+      const hasStorageQos = [
+        this.form.diskiopsmin,
+        this.form.diskiopsmax,
+        this.form.hypervisorsnapshotreserve
+      ].some(value => value !== undefined && value !== null && value !== '') || this.form.iscustomizeddiskiops === true
+
+      if (hasHypervisorQos) {
+        this.form.qostype = 'hypervisor'
+      } else if (hasStorageQos) {
+        this.form.qostype = 'storage'
+      }
+    },
+    syncUiStateFromForm () {
+      this.isPublic = this.form.ispublic !== false
+      this.normalizeDomainSelection()
+      this.normalizeZoneSelection()
+    },
     fetchData () {
       this.fetchDomainData()
       this.fetchZoneData()
@@ -440,6 +496,7 @@ export default {
       getAPI('listDomains', params).then(json => {
         const listDomains = json.listdomainsresponse.domain
         this.domains = this.domains.concat(listDomains)
+        this.normalizeDomainSelection()
       }).finally(() => {
         this.domainLoading = false
       })
@@ -453,6 +510,7 @@ export default {
         if (listZones) {
           this.zones = this.zones.concat(listZones)
         }
+        this.normalizeZoneSelection()
       }).finally(() => {
         this.zoneLoading = false
       })
@@ -486,6 +544,35 @@ export default {
         })
       }
     },
+    normalizeDomainSelection () {
+      if (!Array.isArray(this.form.domainid) || this.form.domainid.length === 0 || this.domains.length === 0) {
+        return
+      }
+      if (typeof this.form.domainid[0] === 'number') {
+        return
+      }
+      const domainIndexes = this.form.domainid.map(domainId => {
+        return this.domains.findIndex(domain => domain.id === domainId)
+      }).filter(index => index >= 0)
+      if (domainIndexes.length > 0) {
+        this.form.domainid = domainIndexes
+      }
+    },
+    normalizeZoneSelection () {
+      if (!Array.isArray(this.form.zoneid) || this.form.zoneid.length === 0 || this.zones.length === 0) {
+        return
+      }
+      if (typeof this.form.zoneid[0] === 'number') {
+        return
+      }
+      const zoneIndexes = this.form.zoneid.map(zoneId => {
+        return this.zones.findIndex(zone => zone.id === zoneId)
+      }).filter(index => index >= 0)
+      if (zoneIndexes.length > 0) {
+        this.form.zoneid = zoneIndexes
+        this.fetchvSphereStoragePolicies(zoneIndexes[0])
+      }
+    },
     validate () {
       return this.$refs.internalFormRef.validate().then(() => {
         const formRaw = toRaw(this.form)
diff --git a/ui/src/views/offering/CloneComputeOffering.vue b/ui/src/views/offering/CloneComputeOffering.vue
index 71d54f10b64d..83040a63c741 100644
--- a/ui/src/views/offering/CloneComputeOffering.vue
+++ b/ui/src/views/offering/CloneComputeOffering.vue
@@ -224,6 +224,8 @@ export default {
         diskofferingid: this.selectedDiskOfferingId,
         diskofferingstrictness: this.diskofferingstrictness,
         encryptdisk: this.encryptdisk,
+        kvdoenable: false,
+        shareable: false,
         leaseduration: this.leaseduration,
         leaseexpiryaction: this.leaseexpiryaction
       })
@@ -309,6 +311,7 @@ export default {
 
       // Pre-fill form with source offering values
       const r = sourceResource
+      const isTrueValue = value => value === true || value === 'true' || value === 1 || value === '1'
       const offeringDetails = r.serviceofferingdetails || {}
       this.form.name = r.name + ' - Clone'
       this.form.displaytext = r.displaytext
@@ -368,8 +371,14 @@ export default {
         this.diskofferingstrictness = r.diskofferingstrictness
       }
       if (r.encryptroot !== undefined) {
-        this.form.encryptdisk = r.encryptroot
-        this.encryptdisk = r.encryptroot
+        this.form.encryptdisk = isTrueValue(r.encryptroot)
+        this.encryptdisk = isTrueValue(r.encryptroot)
+      }
+      if (r.kvdoenable !== undefined) {
+        this.form.kvdoenable = isTrueValue(r.kvdoenable)
+      }
+      if (r.shareable !== undefined) {
+        this.form.shareable = isTrueValue(r.shareable)
       }
 
       if (r.diskBytesReadRate || r.diskBytesWriteRate || r.diskIopsReadRate || r.diskIopsWriteRate) {
@@ -539,11 +548,17 @@ export default {
           dynamicscalingenabled: values.dynamicscalingenabled,
           diskofferingstrictness: values.diskofferingstrictness,
           encryptroot: values.encryptdisk,
+          shareable: values.shareable,
+          kvdoEnable: values.kvdoenable,
           purgeresources: values.purgeresources,
           leaseduration: values.leaseduration,
           leaseexpiryaction: values.leaseexpiryaction
         }
 
+        if (values.shareable === true) {
+          params.cacheMode = 'none'
+        }
+
         if (values.diskofferingid) {
           params.diskofferingid = values.diskofferingid
         }
diff --git a/ui/src/views/offering/CloneDiskOffering.vue b/ui/src/views/offering/CloneDiskOffering.vue
index 3e5ddd6ce84f..a3ae9b9410ab 100644
--- a/ui/src/views/offering/CloneDiskOffering.vue
+++ b/ui/src/views/offering/CloneDiskOffering.vue
@@ -53,7 +53,7 @@
 <script>
 import DiskOfferingForm from '@/components/offering/DiskOfferingForm'
 import { reactive } from 'vue'
-import { postAPI } from '@/api'
+import { getAPI, postAPI } from '@/api'
 import { isAdmin } from '@/role'
 
 export default {
@@ -78,13 +78,30 @@ export default {
     this.apiParams = this.$getApiParams('cloneDiskOffering')
   },
   created () {
-    this.populateFormFromResource()
+    this.fetchSourceOffering()
   },
   methods: {
-    populateFormFromResource () {
-      if (!this.resource) return
+    fetchSourceOffering () {
+      if (!this.resource?.id) {
+        this.populateFormFromResource()
+        return
+      }
 
-      const r = this.resource
+      getAPI('listDiskOfferings', {
+        id: this.resource.id,
+        listall: true
+      }).then(json => {
+        const offering = json?.listdiskofferingsresponse?.diskoffering?.[0]
+        this.populateFormFromResource(offering || this.resource)
+      }).catch(() => {
+        this.populateFormFromResource()
+      })
+    },
+    populateFormFromResource (sourceResource = this.resource) {
+      if (!sourceResource) return
+
+      const r = sourceResource
+      const isTrueValue = value => value === true || value === 'true' || value === 1 || value === '1'
       this.form.name = r.name + ' - Clone'
       this.form.displaytext = r.displaytext
 
@@ -94,7 +111,9 @@ export default {
       if (r.provisioningtype) {
         this.form.provisioningtype = r.provisioningtype
       }
-      if (r.customized !== undefined) {
+      if (r.iscustomized !== undefined) {
+        this.form.customdisksize = r.iscustomized
+      } else if (r.customized !== undefined) {
         this.form.customdisksize = r.customized
       }
       if (r.disksize) this.form.disksize = r.disksize
@@ -109,8 +128,28 @@ export default {
       if (r.encrypt !== undefined) {
         this.form.encryptdisk = r.encrypt
       }
+      if (r.kvdoenable !== undefined) {
+        this.form.kvdoenable = isTrueValue(r.kvdoenable)
+      }
+      if (r.shareable !== undefined) {
+        this.form.shareable = isTrueValue(r.shareable)
+      }
+
+      const hasHypervisorQos = [
+        r.diskBytesReadRate,
+        r.diskBytesReadRateMax,
+        r.diskBytesWriteRate,
+        r.diskBytesWriteRateMax,
+        r.diskIopsReadRate,
+        r.diskIopsWriteRate
+      ].some(value => value !== undefined && value !== null)
+      const hasStorageQos = [
+        r.miniops,
+        r.maxiops,
+        r.hypervisorsnapshotreserve
+      ].some(value => value !== undefined && value !== null) || isTrueValue(r.iscustomizediops)
 
-      if (r.diskBytesReadRate || r.diskBytesReadRateMax || r.diskBytesWriteRate || r.diskBytesWriteRateMax || r.diskIopsReadRate || r.diskIopsWriteRate) {
+      if (hasHypervisorQos) {
         this.form.qostype = 'hypervisor'
         if (r.diskBytesReadRate) this.form.diskbytesreadrate = r.diskBytesReadRate
         if (r.diskBytesReadRateMax) this.form.diskbytesreadratemax = r.diskBytesReadRateMax
@@ -118,20 +157,31 @@ export default {
         if (r.diskBytesWriteRateMax) this.form.diskbyteswriteratemax = r.diskBytesWriteRateMax
         if (r.diskIopsReadRate) this.form.diskiopsreadrate = r.diskIopsReadRate
         if (r.diskIopsWriteRate) this.form.diskiopswriterate = r.diskIopsWriteRate
-      } else if (r.miniops || r.maxiops) {
+      } else if (hasStorageQos) {
         this.form.qostype = 'storage'
         if (r.miniops) this.form.diskiopsmin = r.miniops
         if (r.maxiops) this.form.diskiopsmax = r.maxiops
         if (r.hypervisorsnapshotreserve) this.form.hypervisorsnapshotreserve = r.hypervisorsnapshotreserve
       }
       if (r.iscustomizediops !== undefined) {
-        this.form.iscustomizeddiskiops = r.iscustomizediops
+        this.form.iscustomizeddiskiops = isTrueValue(r.iscustomizediops)
       }
 
       if (r.tags) {
         this.form.tags = r.tags.split(',')
       }
 
+      if (r.ispublic !== undefined) {
+        this.form.ispublic = isTrueValue(r.ispublic)
+      } else if (typeof r.domainid === 'string' && r.domainid.length > 0) {
+        this.form.ispublic = false
+      }
+      if (typeof r.domainid === 'string' && r.domainid.length > 0) {
+        this.form.domainid = r.domainid.split(',')
+      }
+      if (typeof r.zoneid === 'string' && r.zoneid.length > 0) {
+        this.form.zoneid = r.zoneid.split(',')
+      }
       if (r.vspherestoragepolicy) this.form.storagepolicy = r.vspherestoragepolicy
     },
     isAdmin () {

From a810e47d52f9e9e6b9b4cd8c3b4524348e1012ff Mon Sep 17 00:00:00 2001
From: Dajeong-Park <ekwjd7182@gmail.com>
Date: Thu, 28 May 2026 09:34:45 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=EC=BB=B4=ED=93=A8=ED=8A=B8/=EB=94=94?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=20=EC=98=A4=ED=8D=BC=EB=A7=81=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=ED=99=94=EB=A9=B4=EC=9D=98=20Write-cache=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=EA=B0=92=EC=9D=84=20none=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20writeback=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/offering/ComputeOfferingForm.vue | 6 +++---
 ui/src/components/offering/DiskOfferingForm.vue    | 8 ++++----
 ui/src/views/offering/AddComputeOffering.vue       | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/offering/ComputeOfferingForm.vue b/ui/src/components/offering/ComputeOfferingForm.vue
index 6ba8be151bf8..9b4b9612bf71 100644
--- a/ui/src/components/offering/ComputeOfferingForm.vue
+++ b/ui/src/components/offering/ComputeOfferingForm.vue
@@ -409,9 +409,9 @@
             <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="none">{{ $t('label.nodiskcache') }}</a-radio-button>
             <a-radio-button value="hypervisor_default">{{ $t('label.hypervisor.default') }}</a-radio-button>
           </a-radio-group>
         </a-form-item>
@@ -629,7 +629,7 @@ export default {
         computeonly: true,
         storagetype: 'shared',
         provisioningtype: 'thin',
-        cachemode: 'none',
+        cachemode: 'writeback',
         qostype: '',
         iscustomizeddiskiops: false,
         diskofferingid: null,
@@ -644,7 +644,7 @@ export default {
       // other UI state copied
       storageType: 'shared',
       provisioningType: 'thin',
-      cacheMode: 'none',
+      cacheMode: 'writeback',
       offeringType: 'fixed',
       isCustomizedDiskIops: false,
       isPublic: true,
diff --git a/ui/src/components/offering/DiskOfferingForm.vue b/ui/src/components/offering/DiskOfferingForm.vue
index 250dedc7dbe5..85a748a42d2d 100644
--- a/ui/src/components/offering/DiskOfferingForm.vue
+++ b/ui/src/components/offering/DiskOfferingForm.vue
@@ -211,15 +211,15 @@
         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="none">
+          {{ $t('label.nodiskcache') }}
+        </a-radio-button>
         <a-radio-button value="hypervisor_default">
           {{ $t('label.hypervisor.default') }}
         </a-radio-button>
@@ -361,7 +361,7 @@ export default {
         storagetype: 'shared',
         provisioningtype: 'thin',
         customdisksize: true,
-        writecachetype: 'none',
+        writecachetype: 'writeback',
         qostype: '',
         ispublic: true,
         disksizestrictness: false,
diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index 3a588fd76f8a..50764a45f697 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -78,7 +78,7 @@ export default {
       },
       storageType: 'shared',
       provisioningType: 'thin',
-      cacheMode: 'none',
+      cacheMode: 'writeback',
       offeringType: 'fixed',
       isCustomizedDiskIops: false,
       isPublic: true,

From e7397e9a0661e1f2b810101d28cefe4ee9ca2345 Mon Sep 17 00:00:00 2001
From: Dajeong-Park <ekwjd7182@gmail.com>
Date: Thu, 28 May 2026 09:40:50 +0900
Subject: [PATCH 6/6] Update ImportBackupOffering.vue

---
 ui/src/views/offering/ImportBackupOffering.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/views/offering/ImportBackupOffering.vue b/ui/src/views/offering/ImportBackupOffering.vue
index 5cefebed8643..7a70ca49fcd3 100644
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@@ -351,7 +351,7 @@ export default {
       if (this.loading) return
       this.formRef.value.validate().then(async () => {
         await this.checkBackupOffering()
-        if (this.useCommvault) {
+        if (this.isCommvaultProvider && this.useCommvault) {
           this.$notification.error({
             message: this.$t('message.request.failed'),
             description: this.$t('message.error.import.backup.offering')