diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 78fd636443d..ebd052d820c 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -256,6 +256,7 @@
 "label.activate.project": "Activate project",
 "label.activeviewersessions": "Active sessions",
 "label.add": "Add",
+"label.addservices": "Add Services",
 "label.add.account": "Add Account",
 "label.add.acl.rule": "Add rule",
 "label.add.acl": "Add ACL",
@@ -573,6 +574,8 @@
 "label.clear.notification": "Clear notification",
 "label.clientid": "Provider Client ID",
 "label.clone.compute.offering": "Clone Compute Offering",
+"label.clone.disk.offering": "Clone Disk Offering",
+"label.clone.network.offering": "Clone Network Offering",
 "label.clone.system.service.offering": "Clone System Service Offering",
 "label.close": "Close",
 "label.cloud.managed": "CloudManaged",
@@ -949,6 +952,7 @@
 "label.domains": "Domains",
 "label.done": "Done",
 "label.down": "Down",
+"label.dropservices": "Drop Services",
 "label.download": "Download",
 "label.download.csv": "Download CSV",
 "label.download.kubeconfig.cluster": "Download kubeconfig for the cluster <br><br> The <code><b>kubectl</b></code> command-line tool uses kubeconfig files to find the information it needs to choose a cluster and communicate with the API server of a cluster.",
@@ -3387,6 +3391,8 @@
 "message.disable.webhook.ssl.verification": "Disabling SSL verification is not recommended",
 "message.discovering.feature": "Discovering features, please wait...",
 "message.disk.offering.created": "Disk offering created:",
+"message.success.clone.disk.offering": "Successfully cloned disk offering:",
+"message.success.clone.network.offering": "Successfully cloned network offering:",
 "message.disk.usage.info.data.points": "Each data point represents the difference in read/write data since the last data point.",
 "message.disk.usage.info.sum.of.disks": "The disk usage shown is made up of the sum of read/write data from all the disks in the Instance.",
 "message.download.volume": "Please click the link to download the volume:<p><a href=\"#\">00000</a>",
diff --git a/ui/src/components/CheckBoxSelectPair.vue b/ui/src/components/CheckBoxSelectPair.vue
index 480e515be29..a874144458a 100644
--- a/ui/src/components/CheckBoxSelectPair.vue
+++ b/ui/src/components/CheckBoxSelectPair.vue
@@ -74,6 +74,10 @@ export default {
       type: Boolean,
       default: false
     },
+    defaultSelectValue: {
+      type: String,
+      default: null
+    },
     selectOptions: {
       type: Array,
       required: true
@@ -100,6 +104,9 @@ export default {
   },
   created () {
     this.checked = this.defaultCheckBoxValue
+    if (this.defaultSelectValue) {
+      this.selectedOption = this.defaultSelectValue
+    }
   },
   watch: {
     selectOptions () {
diff --git a/ui/src/config/section/offering.js b/ui/src/config/section/offering.js
index 8e6444e0632..bac0e994995 100644
--- a/ui/src/config/section/offering.js
+++ b/ui/src/config/section/offering.js
@@ -349,6 +349,14 @@ export default {
         },
         show: (record) => { return record.state === 'Active' },
         groupMap: (selection) => { return selection.map(x => { return { id: x, state: 'Inactive' } }) }
+      }, {
+        api: 'cloneDiskOffering',
+        icon: 'copy-outlined',
+        label: 'label.clone.disk.offering',
+        docHelp: 'adminguide/service_offerings.html#creating-a-new-disk-offering',
+        dataView: true,
+        popup: true,
+        component: shallowRef(defineAsyncComponent(() => import('@/views/offering/CloneDiskOffering.vue')))
       }]
     },
     {
@@ -504,6 +512,14 @@ export default {
         dataView: true,
         popup: true,
         component: shallowRef(defineAsyncComponent(() => import('@/views/offering/UpdateOfferingAccess.vue')))
+      }, {
+        api: 'cloneNetworkOffering',
+        icon: 'copy-outlined',
+        label: 'label.clone.network.offering',
+        docHelp: 'adminguide/networking.html#creating-a-new-network-offering',
+        dataView: true,
+        popup: true,
+        component: shallowRef(defineAsyncComponent(() => import('@/views/offering/CloneNetworkOffering.vue')))
       }, {
         api: 'deleteNetworkOffering',
         icon: 'delete-outlined',
diff --git a/ui/src/views/offering/CloneDiskOffering.vue b/ui/src/views/offering/CloneDiskOffering.vue
new file mode 100644
index 00000000000..8b12817e779
--- /dev/null
+++ b/ui/src/views/offering/CloneDiskOffering.vue
@@ -0,0 +1,721 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
+    <a-spin :spinning="loading">
+      <a-alert
+        v-if="resource"
+        type="info"
+        style="margin-bottom: 16px">
+        <template #message>
+          <div style="display: block; width: 100%;">
+            <div style="display: block; margin-bottom: 8px;">
+              <strong>{{ $t('message.clone.offering.from') }}: {{ resource.name }}</strong>
+            </div>
+            <div style="display: block; font-size: 12px;">
+              {{ $t('message.clone.offering.edit.hint') }}
+            </div>
+          </div>
+        </template>
+      </a-alert>
+      <a-form
+        :ref="formRef"
+        :model="form"
+        :rules="rules"
+        @finish="handleSubmit"
+        layout="vertical"
+      >
+        <a-form-item name="name" ref="name">
+          <template #label>
+            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
+          </template>
+          <a-input
+            v-focus="true"
+            v-model:value="form.name"
+            :placeholder="apiParams.name.description"/>
+        </a-form-item>
+        <a-form-item name="displaytext" ref="displaytext">
+          <template #label>
+            <tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
+          </template>
+          <a-input
+            v-model:value="form.displaytext"
+            :placeholder="apiParams.displaytext.description"/>
+        </a-form-item>
+        <a-form-item name="storagetype" ref="storagetype">
+          <template #label>
+            <tooltip-label :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
+          </template>
+          <a-radio-group
+            v-model:value="form.storagetype"
+            buttonStyle="solid">
+            <a-radio-button value="shared">
+              {{ $t('label.shared') }}
+            </a-radio-button>
+            <a-radio-button value="local">
+              {{ $t('label.local') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="provisioningtype" ref="provisioningtype">
+          <template #label>
+            <tooltip-label :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
+          </template>
+          <a-radio-group
+            v-model:value="form.provisioningtype"
+            buttonStyle="solid">
+            <a-radio-button value="thin">
+              {{ $t('label.provisioningtype.thin') }}
+            </a-radio-button>
+            <a-radio-button value="sparse">
+              {{ $t('label.provisioningtype.sparse') }}
+            </a-radio-button>
+            <a-radio-button value="fat">
+              {{ $t('label.provisioningtype.fat') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="encryptdisk" ref="encryptdisk">
+          <template #label>
+            <tooltip-label :title="$t('label.encrypt')" :tooltip="apiParams.encrypt.description" />
+          </template>
+          <a-switch v-model:checked="form.encryptdisk" :checked="encryptdisk" @change="val => { encryptdisk = val }" />
+        </a-form-item>
+        <a-form-item name="disksizestrictness" ref="disksizestrictness">
+          <template #label>
+            <tooltip-label :title="$t('label.disksizestrictness')" :tooltip="apiParams.disksizestrictness.description" />
+          </template>
+          <a-switch v-model:checked="form.disksizestrictness" :checked="disksizestrictness" @change="val => { disksizestrictness = val }" />
+        </a-form-item>
+        <a-form-item name="customdisksize" ref="customdisksize">
+          <template #label>
+            <tooltip-label :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
+          </template>
+          <a-switch v-model:checked="form.customdisksize" />
+        </a-form-item>
+        <a-form-item v-if="!form.customdisksize" name="disksize" ref="disksize">
+          <template #label>
+            <tooltip-label :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
+          </template>
+          <a-input
+            v-model:value="form.disksize"
+            :placeholder="apiParams.disksize.description"/>
+        </a-form-item>
+        <a-form-item name="qostype" ref="qostype" :label="$t('label.qostype')">
+          <a-radio-group
+            v-model:value="form.qostype"
+            buttonStyle="solid">
+            <a-radio-button value="">
+              {{ $t('label.none') }}
+            </a-radio-button>
+            <a-radio-button value="hypervisor">
+              {{ $t('label.hypervisor') }}
+            </a-radio-button>
+            <a-radio-button value="storage">
+              {{ $t('label.storage') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadrate" ref="diskbytesreadrate">
+          <template #label>
+            <tooltip-label :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
+          </template>
+          <a-input
+            v-model:value="form.diskbytesreadrate"
+            :placeholder="apiParams.bytesreadrate.description"/>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbytesreadratemax" ref="diskbytesreadratemax">
+          <template #label>
+            <tooltip-label :title="$t('label.diskbytesreadratemax')" :tooltip="apiParams.bytesreadratemax.description"/>
+          </template>
+          <a-input
+            v-model:value="form.diskbytesreadratemax"
+            :placeholder="apiParams.bytesreadratemax.description"/>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriterate" ref="diskbyteswriterate">
+          <template #label>
+            <tooltip-label :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
+          </template>
+          <a-input
+            v-model:value="form.diskbyteswriterate"
+            :placeholder="apiParams.byteswriterate.description"/>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskbyteswriteratemax" ref="diskbyteswriteratemax">
+          <template #label>
+            <tooltip-label :title="$t('label.diskbyteswriteratemax')" :tooltip="apiParams.byteswriteratemax.description"/>
+          </template>
+          <a-input
+            v-model:value="form.diskbyteswriteratemax"
+            :placeholder="apiParams.byteswriteratemax.description"/>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopsreadrate" ref="diskiopsreadrate">
+          <template #label>
+            <tooltip-label :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
+          </template>
+          <a-input
+            v-model:value="form.diskiopsreadrate"
+            :placeholder="apiParams.iopsreadrate.description"/>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'hypervisor'" name="diskiopswriterate" ref="diskiopswriterate">
+          <template #label>
+            <tooltip-label :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
+          </template>
+          <a-input
+            v-model:value="form.diskiopswriterate"
+            :placeholder="apiParams.iopswriterate.description"/>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'storage'" name="iscustomizeddiskiops" ref="iscustomizeddiskiops">
+          <template #label>
+            <tooltip-label :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
+          </template>
+          <a-switch v-model:checked="form.iscustomizeddiskiops" />
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmin" ref="diskiopsmin">
+          <template #label>
+            <tooltip-label :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
+          </template>
+          <a-input
+            v-model:value="form.diskiopsmin"
+            :placeholder="apiParams.miniops.description"/>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'storage' && !form.iscustomizeddiskiops" name="diskiopsmax" ref="diskiopsmax">
+          <template #label>
+            <tooltip-label :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
+          </template>
+          <a-input
+            v-model:value="form.diskiopsmax"
+            :placeholder="apiParams.maxiops.description"/>
+        </a-form-item>
+        <a-form-item v-if="form.qostype === 'storage'" name="hypervisorsnapshotreserve" ref="hypervisorsnapshotreserve">
+          <template #label>
+            <tooltip-label :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
+          </template>
+          <a-input
+            v-model:value="form.hypervisorsnapshotreserve"
+            :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
+        </a-form-item>
+        <a-form-item name="writecachetype" ref="writecachetype">
+          <template #label>
+            <tooltip-label :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
+          </template>
+          <a-radio-group
+            v-model:value="form.writecachetype"
+            buttonStyle="solid"
+            @change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
+            <a-radio-button value="none">
+              {{ $t('label.nodiskcache') }}
+            </a-radio-button>
+            <a-radio-button value="writeback">
+              {{ $t('label.writeback') }}
+            </a-radio-button>
+            <a-radio-button value="writethrough">
+              {{ $t('label.writethrough') }}
+            </a-radio-button>
+            <a-radio-button value="hypervisor_default">
+              {{ $t('label.hypervisor.default') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item v-if="isAdmin() || isDomainAdminAllowedToInformTags" name="tags" ref="tags">
+          <template #label>
+            <tooltip-label :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
+          </template>
+          <a-select
+            :getPopupContainer="(trigger) => trigger.parentNode"
+            mode="tags"
+            v-model:value="form.tags"
+            showSearch
+            optionFilterProp="value"
+            :filterOption="(input, option) => {
+              return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="storageTagLoading"
+            :placeholder="apiParams.tags.description"
+            v-if="isAdmin() || isDomainAdminAllowedToInformTags">
+            <a-select-option v-for="(opt) in storageTags" :key="opt">
+              {{ opt }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('label.ispublic')" v-show="isAdmin()" name="ispublic" ref="ispublic">
+          <a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
+        </a-form-item>
+        <a-form-item v-if="!isPublic" name="domainid" ref="domainid">
+          <template #label>
+            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
+          </template>
+          <a-select
+            mode="multiple"
+            :getPopupContainer="(trigger) => trigger.parentNode"
+            v-model:value="form.domainid"
+            showSearch
+            optionFilterProp="label"
+            :filterOption="(input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="domainLoading"
+            :placeholder="apiParams.domainid.description">
+            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
+              <span>
+                <resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
+                <block-outlined v-else style="margin-right: 5px" />
+                {{ opt.path || opt.name || opt.description }}
+              </span>
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item name="zoneid" ref="zoneid">
+          <template #label>
+            <tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
+          </template>
+          <a-select
+            id="zone-selection"
+            mode="multiple"
+            :getPopupContainer="(trigger) => trigger.parentNode"
+            v-model:value="form.zoneid"
+            showSearch
+            optionFilterProp="label"
+            :filterOption="(input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            @select="val => fetchvSphereStoragePolicies(val)"
+            :loading="zoneLoading"
+            :placeholder="apiParams.zoneid.description">
+            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
+              <span>
+                <resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
+                <global-outlined v-else style="margin-right: 5px"/>
+                {{ opt.name || opt.description }}
+              </span>
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null" name="storagepolicy" ref="storagepolicy">
+          <template #label>
+            <tooltip-label :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
+          </template>
+          <a-select
+            :getPopupContainer="(trigger) => trigger.parentNode"
+            v-model:value="form.storagepolicy"
+            :placeholder="apiParams.storagepolicy.description"
+            showSearch
+            optionFilterProp="label"
+            :filterOption="(input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
+            <a-select-option v-for="policy in storagePolicies" :key="policy.id" :label="policy.name || policy.id || ''">
+              {{ policy.name || policy.id }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+      <div :span="24" class="action-button">
+        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { getAPI, postAPI } from '@/api'
+import { reactive, ref, toRaw } from 'vue'
+import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
+import ResourceIcon from '@/components/view/ResourceIcon'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+import store from '@/store'
+
+export default {
+  name: 'CloneDiskOffering',
+  mixins: [mixinForm],
+  components: {
+    ResourceIcon,
+    TooltipLabel
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      selectedDomains: [],
+      storageTags: [],
+      storagePolicies: null,
+      storageTagLoading: false,
+      isPublic: true,
+      isEncrypted: false,
+      domains: [],
+      domainLoading: false,
+      zones: [],
+      zoneLoading: false,
+      loading: false,
+      disksizestrictness: false,
+      encryptdisk: false,
+      isDomainAdminAllowedToInformTags: false
+    }
+  },
+  beforeCreate () {
+    this.apiParams = this.$getApiParams('cloneDiskOffering')
+  },
+  created () {
+    this.zones = [
+      {
+        id: null,
+        name: this.$t('label.all.zone')
+      }
+    ]
+    this.isPublic = isAdmin()
+    this.initForm()
+    this.fetchData()
+  },
+  methods: {
+    initForm () {
+      this.formRef = ref()
+      this.form = reactive({
+        storagetype: 'shared',
+        provisioningtype: 'thin',
+        customdisksize: true,
+        writecachetype: 'none',
+        qostype: '',
+        ispublic: this.isPublic,
+        disksizestrictness: this.disksizestrictness,
+        encryptdisk: this.encryptdisk
+      })
+      this.rules = reactive({
+        name: [{ required: true, message: this.$t('message.error.required.input') }],
+        disksize: [
+          { required: true, message: this.$t('message.error.required.input') },
+          { type: 'number', validator: this.validateNumber }
+        ],
+        diskbytesreadrate: [{ type: 'number', validator: this.validateNumber }],
+        diskbytesreadratemax: [{ type: 'number', validator: this.validateNumber }],
+        diskbyteswriterate: [{ type: 'number', validator: this.validateNumber }],
+        diskbyteswriteratemax: [{ type: 'number', validator: this.validateNumber }],
+        diskiopsreadrate: [{ type: 'number', validator: this.validateNumber }],
+        diskiopswriterate: [{ type: 'number', validator: this.validateNumber }],
+        diskiopsmin: [{ type: 'number', validator: this.validateNumber }],
+        diskiopsmax: [{ type: 'number', validator: this.validateNumber }],
+        hypervisorsnapshotreserve: [{ type: 'number', validator: this.validateNumber }],
+        domainid: [{ type: 'array', required: true, message: this.$t('message.error.select') }],
+        zoneid: [{
+          type: 'array',
+          validator: async (rule, value) => {
+            if (value && value.length > 1 && value.indexOf(0) !== -1) {
+              return Promise.reject(this.$t('message.error.zone.combined'))
+            }
+            return Promise.resolve()
+          }
+        }]
+      })
+    },
+    handleWriteCacheTypeChange (val) {
+      this.form.writeCacheType = val
+    },
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+      if (isAdmin()) {
+        this.fetchStorageTagData()
+      }
+      if (this.isDomainAdmin()) {
+        this.checkIfDomainAdminIsAllowedToInformTag()
+        if (this.isDomainAdminAllowedToInformTags) {
+          this.fetchStorageTagData()
+        }
+      }
+      this.populateFormFromResource()
+    },
+    populateFormFromResource () {
+      if (!this.resource) return
+
+      const r = this.resource
+      this.form.name = r.name + ' - Clone'
+      this.form.displaytext = r.displaytext
+
+      if (r.storagetype) {
+        this.storageType = r.storagetype
+        this.form.storagetype = r.storagetype
+      }
+      if (r.provisioningtype) {
+        this.provisioningType = r.provisioningtype
+        this.form.provisioningtype = r.provisioningtype
+      }
+      if (r.customized !== undefined) {
+        this.form.customdisksize = r.customized
+      }
+      if (r.disksize) this.form.disksize = r.disksize
+
+      if (r.cachemode) {
+        this.cacheMode = r.cachemode
+        this.form.writecachetype = r.cachemode
+      }
+
+      if (r.disksizestrictness !== undefined) {
+        this.form.disksizestrictness = r.disksizestrictness
+        this.disksizestrictness = r.disksizestrictness
+      }
+      if (r.encrypt !== undefined) {
+        this.form.encryptdisk = r.encrypt
+        this.encryptdisk = r.encrypt
+      }
+
+      if (r.diskBytesReadRate || r.diskBytesReadRateMax || r.diskBytesWriteRate || r.diskBytesWriteRateMax || r.diskIopsReadRate || r.diskIopsWriteRate) {
+        this.qosType = 'hypervisor'
+        this.form.qostype = 'hypervisor'
+        if (r.diskBytesReadRate) this.form.diskbytesreadrate = r.diskBytesReadRate
+        if (r.diskBytesReadRateMax) this.form.diskbytesreadratemax = r.diskBytesReadRateMax
+        if (r.diskBytesWriteRate) this.form.diskbyteswriterate = r.diskBytesWriteRate
+        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) {
+        this.qosType = 'storage'
+        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
+      }
+
+      if (r.tags) {
+        this.form.tags = r.tags.split(',')
+      }
+
+      if (r.vspherestoragepolicy) this.form.storagepolicy = r.vspherestoragepolicy
+    },
+    isDomainAdmin () {
+      return ['DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    isAdmin () {
+      return isAdmin()
+    },
+    checkIfDomainAdminIsAllowedToInformTag () {
+      const params = { id: store.getters.userInfo.accountid }
+      getAPI('isAccountAllowedToCreateOfferingsWithTags', params).then(json => {
+        this.isDomainAdminAllowedToInformTags = json.isaccountallowedtocreateofferingswithtagsresponse.isallowed.isallowed
+      })
+    },
+    arrayHasItems (array) {
+      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.showicon = true
+      params.details = 'min'
+      this.domainLoading = true
+      getAPI('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+      })
+    },
+    fetchZoneData () {
+      const params = {}
+      params.showicon = true
+      this.zoneLoading = true
+      getAPI('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        if (listZones) {
+          this.zones = this.zones.concat(listZones)
+        }
+      }).finally(() => {
+        this.zoneLoading = false
+      })
+    },
+    fetchStorageTagData () {
+      const params = {}
+      this.storageTagLoading = true
+      getAPI('listStorageTags', params).then(json => {
+        const tags = json.liststoragetagsresponse.storagetag || []
+        for (const tag of tags) {
+          if (!this.storageTags.includes(tag.name)) {
+            this.storageTags.push(tag.name)
+          }
+        }
+      }).finally(() => {
+        this.storageTagLoading = false
+      })
+    },
+    fetchvSphereStoragePolicies (zoneIndex) {
+      if (zoneIndex === 0 || this.form.zoneid.length > 1) {
+        this.storagePolicies = null
+        return
+      }
+      const zoneid = this.zones[zoneIndex].id
+      if ('importVsphereStoragePolicies' in this.$store.getters.apis) {
+        this.storagePolicies = []
+        getAPI('listVsphereStoragePolicies', {
+          zoneid: zoneid
+        }).then(response => {
+          this.storagePolicies = response.listvspherestoragepoliciesresponse.StoragePolicy || []
+        })
+      }
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      if (this.loading) return
+      this.formRef.value.validate().then(() => {
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
+
+        const params = {
+          sourceofferingid: this.resource.id,
+          name: values.name
+        }
+
+        if (values.displaytext) {
+          params.displaytext = values.displaytext
+        }
+        if (values.storagetype) {
+          params.storagetype = values.storagetype
+        }
+        if (values.writecachetype) {
+          params.cachemode = values.writecachetype
+        }
+        if (values.provisioningtype) {
+          params.provisioningtype = values.provisioningtype
+        }
+        if (values.customdisksize !== undefined) {
+          params.customized = values.customdisksize
+        }
+        if (values.disksizestrictness !== undefined) {
+          params.disksizestrictness = values.disksizestrictness
+        }
+        if (values.encryptdisk !== undefined) {
+          params.encrypt = values.encryptdisk
+        }
+
+        if (values.customdisksize !== true && values.disksize) {
+          params.disksize = values.disksize
+        }
+
+        if (values.qostype === 'storage') {
+          const customIops = values.iscustomizeddiskiops === true
+          params.customizediops = customIops
+          if (!customIops) {
+            if (values.diskiopsmin != null && values.diskiopsmin.length > 0) {
+              params.miniops = values.diskiopsmin
+            }
+            if (values.diskiopsmax != null && values.diskiopsmax.length > 0) {
+              params.maxiops = values.diskiopsmax
+            }
+            if (values.hypervisorsnapshotreserve != null && values.hypervisorsnapshotreserve.length > 0) {
+              params.hypervisorsnapshotreserve = values.hypervisorsnapshotreserve
+            }
+          }
+        } else if (values.qostype === 'hypervisor') {
+          if (values.diskbytesreadrate != null && values.diskbytesreadrate.length > 0) {
+            params.bytesreadrate = values.diskbytesreadrate
+          }
+          if (values.diskbytesreadratemax != null && values.diskbytesreadratemax.length > 0) {
+            params.bytesreadratemax = values.diskbytesreadratemax
+          }
+          if (values.diskbyteswriterate != null && values.diskbyteswriterate.length > 0) {
+            params.byteswriterate = values.diskbyteswriterate
+          }
+          if (values.diskbyteswriteratemax != null && values.diskbyteswriteratemax.length > 0) {
+            params.byteswriteratemax = values.diskbyteswriteratemax
+          }
+          if (values.diskiopsreadrate != null && values.diskiopsreadrate.length > 0) {
+            params.iopsreadrate = values.diskiopsreadrate
+          }
+          if (values.diskiopswriterate != null && values.diskiopswriterate.length > 0) {
+            params.iopswriterate = values.diskiopswriterate
+          }
+        }
+
+        if (values.tags != null && values.tags.length > 0) {
+          const tags = values.tags.join(',')
+          params.tags = tags
+        }
+
+        if (values.ispublic !== true) {
+          const domainIndexes = values.domainid
+          let domainId = null
+          if (domainIndexes && domainIndexes.length > 0) {
+            const domainIds = []
+            for (let i = 0; i < domainIndexes.length; i++) {
+              domainIds.push(this.domains[domainIndexes[i]].id)
+            }
+            domainId = domainIds.join(',')
+          }
+          if (domainId) {
+            params.domainid = domainId
+          }
+        }
+
+        const zoneIndexes = values.zoneid
+        let zoneId = null
+        if (zoneIndexes && zoneIndexes.length > 0) {
+          const zoneIds = []
+          for (let j = 0; j < zoneIndexes.length; j++) {
+            zoneIds.push(this.zones[zoneIndexes[j]].id)
+          }
+          zoneId = zoneIds.join(',')
+        }
+        if (zoneId) {
+          params.zoneid = zoneId
+        }
+
+        if (values.storagepolicy) {
+          params.storagepolicy = values.storagepolicy
+        }
+
+        this.loading = true
+        postAPI('cloneDiskOffering', params).then(json => {
+          this.$message.success(`${this.$t('message.success.clone.disk.offering')} ${values.name}`)
+          this.$emit('refresh-data')
+          this.closeAction()
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.loading = false
+        })
+      }).catch(error => {
+        this.formRef.value.scrollToField(error.errorFields[0].name)
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    },
+    async validateNumber (rule, value) {
+      if (value && (isNaN(value) || value <= 0)) {
+        return Promise.reject(this.$t('message.error.number'))
+      }
+      return Promise.resolve()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .form-layout {
+    width: 80vw;
+
+    @media (min-width: 700px) {
+      width: 550px;
+    }
+  }
+</style>
diff --git a/ui/src/views/offering/CloneNetworkOffering.vue b/ui/src/views/offering/CloneNetworkOffering.vue
new file mode 100644
index 00000000000..67370e1cafc
--- /dev/null
+++ b/ui/src/views/offering/CloneNetworkOffering.vue
@@ -0,0 +1,1224 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
+    <a-spin :spinning="loading">
+      <a-alert
+        v-if="resource"
+        type="info"
+        style="margin-bottom: 16px">
+        <template #message>
+          <div style="display: block; width: 100%;">
+            <div style="display: block; margin-bottom: 8px;">
+              <strong>{{ $t('message.clone.offering.from') }}: {{ resource.name }}</strong>
+            </div>
+            <div style="display: block; font-size: 12px;">
+              {{ $t('message.clone.offering.edit.hint') }}
+            </div>
+          </div>
+        </template>
+      </a-alert>
+      <a-form
+        :ref="formRef"
+        :model="form"
+        :rules="rules"
+        @finish="handleSubmit"
+        layout="vertical"
+      >
+        <a-form-item name="name" ref="name">
+          <template #label>
+            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
+          </template>
+          <a-input
+            v-focus="true"
+            v-model:value="form.name"
+            :placeholder="apiParams.name.description"/>
+        </a-form-item>
+        <a-form-item name="displaytext" ref="displaytext">
+          <template #label>
+            <tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
+          </template>
+          <a-input
+            v-model:value="form.displaytext"
+            :placeholder="apiParams.displaytext.description"/>
+        </a-form-item>
+        <a-form-item name="guestiptype" ref="guestiptype">
+          <template #label>
+            <tooltip-label :title="$t('label.guestiptype')" :tooltip="apiParams.guestiptype.description"/>
+          </template>
+          <a-radio-group
+            v-model:value="form.guestiptype"
+            buttonStyle="solid"
+            @change="selected => { handleGuestTypeChange(selected.target.value) }">
+            <a-radio-button value="isolated">
+              {{ $t('label.isolated') }}
+            </a-radio-button>
+            <a-radio-button value="l2">
+              {{ $t('label.l2') }}
+            </a-radio-button>
+            <a-radio-button value="shared">
+              {{ $t('label.shared') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="internetprotocol" ref="internetprotocol" v-if="guestType === 'isolated'">
+          <template #label>
+            <tooltip-label :title="$t('label.internetprotocol')" :tooltip="apiParams.internetprotocol.description"/>
+          </template>
+          <span v-if="!ipv6NetworkOfferingEnabled || internetProtocolValue!=='ipv4'">
+            <a-alert type="warning">
+              <template #message>
+                <span v-html="ipv6NetworkOfferingEnabled ? $t('message.offering.internet.protocol.warning') : $t('message.offering.ipv6.warning')" />
+              </template>
+            </a-alert>
+            <br/>
+          </span>
+          <a-radio-group
+            v-model:value="form.internetprotocol"
+            :disabled="!ipv6NetworkOfferingEnabled"
+            buttonStyle="solid"
+            @change="e => { internetProtocolValue = e.target.value }">
+            <a-radio-button value="ipv4">
+              {{ $t('label.ip.v4') }}
+            </a-radio-button>
+            <a-radio-button value="dualstack">
+              {{ $t('label.ip.v4.v6') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-row :gutter="12">
+          <a-col :md="12" :lg="12">
+            <a-form-item name="forvpc" ref="forvpc" v-if="guestType === 'isolated'">
+              <template #label>
+                <tooltip-label :title="$t('label.vpc')" :tooltip="apiParams.forvpc.description"/>
+              </template>
+              <a-switch v-model:checked="form.forvpc" @change="handleForVpcChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item name="provider" ref="provider">
+              <template #label>
+                <tooltip-label :title="$t('label.provider')" :tooltip="apiParams.provider.description"/>
+              </template>
+              <a-select
+                v-model:value="form.provider"
+                @change="handleProviderChange"
+                showSearch
+                optionFilterProp="label"
+                :filterOption="(input, option) => {
+                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }"
+                :placeholder="apiParams.provider.description">
+                <a-select-option key="" value="">{{ $t('label.none') }}</a-select-option>
+                <a-select-option :value="'NSX'" :label="$t('label.nsx')">{{ $t('label.nsx') }}</a-select-option>
+                <a-select-option :value="'Netris'" :label="$t('label.netris')">{{ $t('label.netris') }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item name="networkmode" ref="networkmode" v-if="guestType === 'isolated' && form.provider">
+          <template #label>
+            <tooltip-label :title="$t('label.networkmode')" :tooltip="apiParams.networkmode.description"/>
+          </template>
+          <a-select
+            v-model:value="form.networkmode"
+            optionFilterProp="label"
+            :filterOption="(input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :placeholder="apiParams.networkmode.description">
+            <a-select-option value="NATTED" :label="'NATTED'">NATTED</a-select-option>
+            <a-select-option value="ROUTED" :label="'ROUTED'">ROUTED</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item name="routingmode" ref="routingmode" v-if="networkmode === 'ROUTED' || internetProtocolValue === 'ipv6' || internetProtocolValue === 'dualstack'">
+          <template #label>
+            <tooltip-label :title="$t('label.routingmode')" :tooltip="apiParams.routingmode.description"/>
+          </template>
+          <a-radio-group
+            v-model:value="form.routingmode"
+            buttonStyle="solid"
+            @change="selected => { routingMode = selected.target.value }">
+            <a-radio-button value="static">
+              {{ $t('label.static') }}
+            </a-radio-button>
+            <a-radio-button value="dynamic">
+              {{ $t('label.dynamic') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="userdatal2" ref="userdatal2" :label="$t('label.user.data')" v-if="guestType === 'l2'">
+          <a-switch v-model:checked="form.userdatal2" />
+        </a-form-item>
+        <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-row :gutter="12">
+          <a-col :md="12" :lg="12">
+            <a-form-item name="specifyvlan" ref="specifyvlan">
+              <template #label>
+                <tooltip-label :title="$t('label.specifyvlan')" :tooltip="apiParams.specifyvlan.description"/>
+              </template>
+              <a-switch v-model:checked="form.specifyvlan" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item name="ispersistent" ref="ispersistent" v-if="guestType !== 'shared'">
+              <template #label>
+                <tooltip-label :title="$t('label.ispersistent')" :tooltip="apiParams.ispersistent.description"/>
+              </template>
+              <a-switch v-model:checked="form.ispersistent" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12">
+          <a-col :md="12" :lg="12">
+            <a-form-item name="promiscuousmode" ref="promiscuousmode">
+              <template #label>
+                <tooltip-label :title="$t('label.promiscuousmode')" :tooltip="$t('message.network.offering.promiscuous.mode')"/>
+              </template>
+              <a-radio-group
+                v-model:value="form.promiscuousmode"
+                buttonStyle="solid">
+                <a-radio-button value="">
+                  {{ $t('label.none') }}
+                </a-radio-button>
+                <a-radio-button value="true">
+                  {{ $t('label.accept') }}
+                </a-radio-button>
+                <a-radio-button value="false">
+                  {{ $t('label.reject') }}
+                </a-radio-button>
+              </a-radio-group>
+            </a-form-item>
+            <a-form-item name="macaddresschanges" ref="macaddresschanges">
+              <template #label>
+                <tooltip-label :title="$t('label.macaddresschanges')" :tooltip="$t('message.network.offering.mac.address.changes')"/>
+              </template>
+              <a-radio-group
+                v-model:value="form.macaddresschanges"
+                buttonStyle="solid">
+                <a-radio-button value="">
+                  {{ $t('label.none') }}
+                </a-radio-button>
+                <a-radio-button value="true">
+                  {{ $t('label.accept') }}
+                </a-radio-button>
+                <a-radio-button value="false">
+                  {{ $t('label.reject') }}
+                </a-radio-button>
+              </a-radio-group>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item name="forgedtransmits" ref="forgedtransmits">
+              <template #label>
+                <tooltip-label :title="$t('label.forgedtransmits')" :tooltip="$t('message.network.offering.forged.transmits')"/>
+              </template>
+              <a-radio-group
+                v-model:value="form.forgedtransmits"
+                buttonStyle="solid">
+                <a-radio-button value="">
+                  {{ $t('label.none') }}
+                </a-radio-button>
+                <a-radio-button value="true">
+                  {{ $t('label.accept') }}
+                </a-radio-button>
+                <a-radio-button value="false">
+                  {{ $t('label.reject') }}
+                </a-radio-button>
+              </a-radio-group>
+            </a-form-item>
+            <a-form-item name="maclearning" ref="maclearning">
+              <template #label>
+                <tooltip-label :title="$t('label.maclearning')" :tooltip="$t('message.network.offering.mac.learning')"/>
+              </template>
+              <span v-if="form.maclearning !== ''">
+                <a-alert type="warning">
+                  <template #message>
+                    <div v-html="$t('message.network.offering.mac.learning.warning')"></div>
+                  </template>
+                </a-alert>
+                <br/>
+              </span>
+              <a-radio-group
+                v-model:value="form.maclearning"
+                buttonStyle="solid">
+                <a-radio-button value="">
+                  {{ $t('label.none') }}
+                </a-radio-button>
+                <a-radio-button value="true">
+                  {{ $t('label.accept') }}
+                </a-radio-button>
+                <a-radio-button value="false">
+                  {{ $t('label.reject') }}
+                </a-radio-button>
+              </a-radio-group>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item v-if="guestType !== 'l2'">
+          <template #label>
+            <tooltip-label :title="$t('label.supportedservices')" :tooltip="apiParams.supportedservices ? apiParams.supportedservices.description : ''"/>
+          </template>
+          <div class="supported-services-container" scroll-to="last-child">
+            <a-spin v-if="!servicesReady" :spinning="true" />
+            <a-list v-else itemLayout="horizontal" :dataSource="supportedServices">
+              <template #renderItem="{item}">
+                <a-list-item>
+                  <CheckBoxSelectPair
+                    :key="`${item.name}-${item.selectedProvider || 'none'}`"
+                    :resourceKey="item.name"
+                    :checkBoxLabel="item.description"
+                    :defaultCheckBoxValue="item.defaultChecked"
+                    :defaultSelectValue="item.selectedProvider"
+                    :selectOptions="item.provider"
+                    @handle-checkselectpair-change="handleSupportedServiceChange"/>
+                </a-list-item>
+              </template>
+            </a-list>
+          </div>
+        </a-form-item>
+        <a-form-item name="lbtype" ref="lbtype" :label="$t('label.lbtype')" v-if="forVpc && lbServiceChecked">
+          <a-radio-group
+            v-model:value="form.lbtype"
+            buttonStyle="solid">
+            <a-radio-button value="publicLb">
+              {{ $t('label.public.lb') }}
+            </a-radio-button>
+            <a-radio-button value="internalLb">
+              {{ $t('label.internal.lb') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="serviceofferingid" ref="serviceofferingid" v-if="guestType !== 'l2' && isVirtualRouterForAtLeastOneService">
+          <template #label>
+            <tooltip-label :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
+          </template>
+          <a-select
+            showSearch
+            optionFilterProp="label"
+            v-model:value="form.serviceofferingid"
+            :filterOption="(input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="serviceOfferingLoading"
+            :placeholder="apiParams.serviceofferingid.description">
+            <a-select-option
+              v-for="(offering, index) in serviceOfferings"
+              :value="offering.id"
+              :label="offering.displaytext || offering.name"
+              :key="index">
+              {{ offering.displaytext || offering.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item
+          name="redundantroutercapability"
+          ref="redundantroutercapability"
+          :label="$t('label.redundantrouter')"
+          v-if="(guestType === 'shared' || guestType === 'isolated') && sourceNatServiceChecked && !isVpcVirtualRouterForAtLeastOneService">
+          <a-switch v-model:checked="form.redundantroutercapability" />
+        </a-form-item>
+        <a-form-item name="sourcenattype" ref="sourcenattype" :label="$t('label.sourcenattype')" v-if="(guestType === 'shared' || guestType === 'isolated') && sourceNatServiceChecked">
+          <a-radio-group
+            v-model:value="form.sourcenattype"
+            buttonStyle="solid">
+            <a-radio-button value="peraccount">
+              {{ $t('label.per.account') }}
+            </a-radio-button>
+            <a-radio-button value="perzone">
+              {{ $t('label.per.zone') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item
+          name="vmautoscalingcapability"
+          ref="vmautoscalingcapability"
+          :label="$t('label.supportsvmautoscaling')"
+          v-if="lbServiceChecked && ['Netscaler', 'VirtualRouter', 'VpcVirtualRouter'].includes(lbServiceProvider)">
+          <a-switch v-model:checked="form.vmautoscalingcapability" />
+        </a-form-item>
+        <a-form-item
+          name="elasticlb"
+          ref="elasticlb"
+          :label="$t('label.service.lb.elasticlbcheckbox')"
+          v-if="guestType === 'shared' && lbServiceChecked && lbServiceProvider === 'Netscaler'">
+          <a-switch v-model:checked="form.elasticlb" />
+        </a-form-item>
+        <a-form-item
+          name="inlinemode"
+          ref="inlinemode"
+          :label="$t('label.service.lb.inlinemodedropdown')"
+          v-if="['shared', 'isolated'].includes(guestType) && lbServiceChecked && firewallServiceChecked && ['F5BigIp', 'Netscaler'].includes(lbServiceProvider) && ['JuniperSRX'].includes(firewallServiceProvider)">
+          <a-radio-group
+            v-model:value="form.inlinemode"
+            buttonStyle="solid">
+            <a-radio-button value="false">
+              {{ $t('side.by.side') }}
+            </a-radio-button>
+            <a-radio-button value="true">
+              {{ $t('inline') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item
+          name="netscalerservicepackages"
+          ref="netscalerservicepackages"
+          :label="$t('label.service.lb.netscaler.servicepackages')"
+          v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && lbServiceProvider === 'Netscaler'">
+          <a-select
+            v-model:value="form.netscalerservicepackages"
+            showSearch
+            optionFilterProp="label"
+            :filterOption="(input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="registeredServicePackageLoading"
+            :placeholder="$t('label.service.lb.netscaler.servicepackages')">
+            <a-select-option v-for="(opt, optIndex) in registeredServicePackages" :key="optIndex" :label="opt.name || opt.description">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item
+          name="netscalerservicepackagesdescription"
+          ref="netscalerservicepackagesdescription"
+          :label="$t('label.service.lb.netscaler.servicepackages.description')"
+          v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && lbServiceProvider === 'Netscaler'">
+          <a-input
+            v-model:value="form.netscalerservicepackagesdescription"
+            :placeholder="$t('label.service.lb.netscaler.servicepackages.description')"/>
+        </a-form-item>
+        <a-form-item
+          name="elasticip"
+          ref="elasticip"
+          :label="$t('label.service.staticnat.elasticipcheckbox')"
+          v-if="guestType === 'shared' && staticNatServiceChecked && staticNatServiceProvider === 'Netscaler'">
+          <a-switch v-model:checked="form.elasticip" />
+        </a-form-item>
+        <a-form-item
+          name="associatepublicip"
+          ref="associatepublicip"
+          :label="$t('label.service.staticnat.associatepublicip')"
+          v-if="isElasticIp && staticNatServiceChecked && staticNatServiceProvider === 'Netscaler'">
+          <a-switch v-model:checked="form.associatepublicip" />
+        </a-form-item>
+        <a-form-item
+          name="supportsstrechedl2subnet"
+          ref="supportsstrechedl2subnet"
+          :label="$t('label.supportsstrechedl2subnet')"
+          v-if="connectivityServiceChecked">
+          <a-switch v-model:checked="form.supportsstrechedl2subnet" />
+        </a-form-item>
+        <a-form-item
+          name="conservemode"
+          ref="conservemode"
+          v-if="guestType === 'shared' || guestType === 'isolated'">
+          <template #label>
+            <tooltip-label :title="$t('label.conservemode')" :tooltip="apiParams.conservemode.description"/>
+          </template>
+          <a-switch v-model:checked="form.conservemode" />
+        </a-form-item>
+        <a-form-item name="tags" ref="tags">
+          <template #label>
+            <tooltip-label :title="$t('label.tags')" :tooltip="apiParams.tags.description"/>
+          </template>
+          <a-input
+            v-model:value="form.tags"
+            :placeholder="apiParams.tags.description"/>
+        </a-form-item>
+        <a-form-item name="availability" ref="availability" v-if="requiredNetworkOfferingExists && guestType === 'isolated' && sourceNatServiceChecked">
+          <template #label>
+            <tooltip-label :title="$t('label.availability')" :tooltip="apiParams.availability.description"/>
+          </template>
+          <a-radio-group
+            v-model:value="form.availability"
+            buttonStyle="solid">
+            <a-radio-button value="Optional">
+              {{ $t('label.optional') }}
+            </a-radio-button>
+            <a-radio-button value="Required">
+              {{ $t('label.required') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="egressdefaultpolicy" ref="egressdefaultpolicy">
+          <template #label>
+            <tooltip-label :title="$t('label.egressdefaultpolicy')" :tooltip="apiParams.egressdefaultpolicy.description"/>
+          </template>
+          <a-radio-group
+            v-model:value="form.egressdefaultpolicy"
+            buttonStyle="solid">
+            <a-radio-button value="allow">
+              {{ $t('label.allow') }}
+            </a-radio-button>
+            <a-radio-button value="deny">
+              {{ $t('label.deny') }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item name="specifyipranges" ref="specifyipranges">
+          <template #label>
+            <tooltip-label :title="$t('label.specifyipranges')" :tooltip="apiParams.specifyipranges.description"/>
+          </template>
+          <a-switch v-model:checked="form.specifyipranges"/>
+        </a-form-item>
+        <a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-show="isAdmin()">
+          <a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
+        </a-form-item>
+        <a-form-item name="domainid" ref="domainid" v-if="!isPublic">
+          <template #label>
+            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
+          </template>
+          <a-select
+            mode="multiple"
+            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
+            mode="multiple"
+            v-model:value="form.zoneid"
+            showSearch
+            optionFilterProp="label"
+            :filterOption="(input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :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="enable" ref="enable" v-if="apiParams.enable">
+          <template #label>
+            <tooltip-label :title="$t('label.enable.network.offering')" :tooltip="apiParams.enable.description"/>
+          </template>
+          <a-switch v-model:checked="form.enable"/>
+        </a-form-item>
+        <div :span="24" class="action-button">
+          <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+        </div>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, toRaw } from 'vue'
+import { getAPI, postAPI } from '@/api'
+import { isAdmin } from '@/role'
+import { mixinForm } from '@/utils/mixin'
+import ResourceIcon from '@/components/view/ResourceIcon'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
+import { BlockOutlined, GlobalOutlined } from '@ant-design/icons-vue'
+
+export default {
+  name: 'CloneNetworkOffering',
+  mixins: [mixinForm],
+  components: {
+    ResourceIcon,
+    TooltipLabel,
+    CheckBoxSelectPair,
+    BlockOutlined,
+    GlobalOutlined
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      guestType: 'isolated',
+      forVpc: false,
+      provider: '',
+      networkmode: '',
+      routingMode: 'static',
+      internetProtocolValue: 'ipv4',
+      networkmodes: [
+        {
+          id: 0,
+          name: 'NATTED'
+        },
+        {
+          id: 1,
+          name: 'ROUTED'
+        }
+      ],
+      supportedServices: [],
+      supportedServiceLoading: false,
+      servicesReady: false,
+      selectedServiceProviderMap: {},
+      serviceProviderMap: {},
+      serviceOfferings: [],
+      serviceOfferingLoading: false,
+      isVirtualRouterForAtLeastOneService: false,
+      isVpcVirtualRouterForAtLeastOneService: false,
+      requiredNetworkOfferingExists: false,
+      sourceNatServiceChecked: false,
+      lbServiceChecked: false,
+      lbServiceProvider: '',
+      firewallServiceChecked: false,
+      firewallServiceProvider: '',
+      staticNatServiceChecked: false,
+      staticNatServiceProvider: '',
+      connectivityServiceChecked: false,
+      isElasticIp: false,
+      registeredServicePackages: [],
+      registeredServicePackageLoading: false,
+      isPublic: true,
+      domains: [],
+      domainLoading: false,
+      zones: [],
+      zoneLoading: false,
+      ipv6NetworkOfferingEnabled: false
+    }
+  },
+  beforeCreate () {
+    this.apiParams = this.$getApiParams('cloneNetworkOffering')
+  },
+  watch: {
+    'form.elasticip' (newVal) {
+      this.isElasticIp = newVal
+    }
+  },
+  async created () {
+    this.zones = [
+      {
+        id: null,
+        name: this.$t('label.all.zone')
+      }
+    ]
+    this.isPublic = isAdmin()
+    this.initForm()
+    await this.checkRequiredNetworkOfferingExists()
+    this.fetchSupportedServices()
+    this.fetchServiceOfferingData()
+    this.fetchDomainData()
+    this.fetchZoneData()
+    this.fetchIpv6NetworkOfferingConfiguration()
+  },
+  methods: {
+    initForm () {
+      this.formRef = ref()
+      this.form = reactive({
+        guestiptype: this.guestType,
+        internetprotocol: 'ipv4',
+        forvpc: false,
+        provider: '',
+        networkmode: '',
+        routingmode: 'static',
+        lbtype: 'publicLb',
+        userdatal2: false,
+        availability: 'Optional',
+        conservemode: true,
+        ispersistent: false,
+        specifyvlan: false,
+        specifyipranges: false,
+        egressdefaultpolicy: 'deny',
+        enable: false,
+        promiscuousmode: '',
+        macaddresschanges: '',
+        forgedtransmits: '',
+        maclearning: '',
+        ispublic: this.isPublic,
+        domainid: [],
+        zoneid: [],
+        redundantroutercapability: false,
+        sourcenattype: 'peraccount',
+        vmautoscalingcapability: true,
+        elasticlb: false,
+        inlinemode: 'false',
+        elasticip: false,
+        associatepublicip: false,
+        supportsstrechedl2subnet: false,
+        isolation: 'dedicated',
+        netscalerservicepackages: null,
+        netscalerservicepackagesdescription: ''
+      })
+      this.rules = reactive({
+        name: [{ required: true, message: this.$t('message.error.required.input') }],
+        networkrate: [{
+          validator: async (rule, value) => {
+            if (value && (isNaN(value) || value < 0)) {
+              return Promise.reject(this.$t('message.validate.number'))
+            }
+            return Promise.resolve()
+          }
+        }],
+        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()
+          }
+        }]
+      })
+    },
+    fetchServiceOfferingData () {
+      this.serviceOfferingLoading = true
+      getAPI('listServiceOfferings', { issystem: true, systemvmtype: 'domainrouter' }).then(json => {
+        this.serviceOfferings = json.listserviceofferingsresponse.serviceoffering || []
+      }).finally(() => {
+        this.serviceOfferingLoading = false
+      })
+    },
+    fetchSupportedServices () {
+      this.supportedServiceLoading = true
+      getAPI('listSupportedNetworkServices', {}).then(json => {
+        this.supportedServices = json.listsupportednetworkservicesresponse.networkservice || []
+
+        for (const i in this.supportedServices) {
+          const networkServiceObj = this.supportedServices[i]
+          const serviceName = networkServiceObj.name
+          const serviceDisplayName = serviceName
+
+          const providers = []
+          for (const j in this.supportedServices[i].provider) {
+            const provider = this.supportedServices[i].provider[j]
+            providers.push({
+              name: provider.name,
+              enabled: true
+            })
+          }
+
+          this.supportedServices[i].provider = providers
+          this.supportedServices[i].description = serviceDisplayName
+        }
+
+        this.populateFormFromResource()
+      }).finally(() => {
+        this.supportedServiceLoading = false
+      })
+    },
+    populateFormFromResource () {
+      if (!this.resource) return
+
+      const r = this.resource
+      this.form.name = r.name + ' - Clone'
+      this.form.displaytext = r.displaytext || r.name
+
+      if (r.guestiptype) {
+        this.guestType = r.guestiptype.toLowerCase()
+        this.form.guestiptype = r.guestiptype.toLowerCase()
+
+        if (this.guestType === 'l2' && r.service && Array.isArray(r.service)) {
+          this.form.userdatal2 = r.service.some(svc => svc.name === 'UserData')
+        }
+      }
+      if (r.internetprotocol) {
+        this.form.internetprotocol = r.internetprotocol.toLowerCase()
+        this.internetProtocolValue = r.internetprotocol.toLowerCase()
+      }
+      if (r.forvpc !== undefined) {
+        this.forVpc = r.forvpc
+        this.form.forvpc = r.forvpc
+      }
+
+      if (r.service && Array.isArray(r.service)) {
+        const networkAclService = r.service.find(svc => svc.name === 'NetworkACL')
+        if (networkAclService && networkAclService.provider && networkAclService.provider.length > 0) {
+          const providerName = networkAclService.provider[0].name
+          if (providerName === 'Nsx') {
+            this.provider = 'NSX'
+            this.form.provider = 'NSX'
+          } else if (providerName === 'Netris') {
+            this.provider = 'Netris'
+            this.form.provider = 'Netris'
+          }
+        }
+      }
+
+      if (r.networkmode) {
+        this.networkmode = r.networkmode
+        this.form.networkmode = r.networkmode
+      }
+
+      if (r.availability) {
+        const isIsolatedWithSourceNat = this.guestType === 'isolated' &&
+                                        r.service &&
+                                        r.service.some(svc => svc.name === 'SourceNat')
+        if (isIsolatedWithSourceNat && this.requiredNetworkOfferingExists) {
+          this.form.availability = 'Optional'
+        } else {
+          this.form.availability = r.availability
+        }
+      }
+      if (r.tags) this.form.tags = r.tags
+      if (r.conservemode !== undefined) this.form.conservemode = r.conservemode
+      if (r.ispersistent !== undefined) this.form.ispersistent = r.ispersistent
+      if (r.specifyvlan !== undefined) this.form.specifyvlan = r.specifyvlan
+      if (r.specifyipranges !== undefined) this.form.specifyipranges = r.specifyipranges
+      if (r.egressdefaultpolicy !== undefined) {
+        this.form.egressdefaultpolicy = r.egressdefaultpolicy ? 'allow' : 'deny'
+      }
+      if (r.networkrate) this.form.networkrate = r.networkrate
+      if (r.serviceofferingid) this.form.serviceofferingid = r.serviceofferingid
+
+      if (r.details) {
+        if (r.details.promiscuousmode) this.form.promiscuousmode = r.details.promiscuousmode
+        if (r.details.macaddresschanges) this.form.macaddresschanges = r.details.macaddresschanges
+        if (r.details.forgedtransmits) this.form.forgedtransmits = r.details.forgedtransmits
+        if (r.details.maclearning) this.form.maclearning = r.details.maclearning
+      }
+
+      this.forVpc = r.forvpc || false
+
+      if (r.service && Array.isArray(r.service)) {
+        const sourceServiceMap = {}
+        r.service.forEach(svc => {
+          if (svc.provider && svc.provider.length > 0) {
+            const providerName = svc.provider[0].name
+            sourceServiceMap[svc.name] = providerName
+          }
+        })
+
+        this.serviceProviderMap = sourceServiceMap
+
+        const updatedServices = this.supportedServices.map(svc => {
+          const serviceCopy = { ...svc, provider: [...svc.provider] }
+
+          if (sourceServiceMap[serviceCopy.name]) {
+            const providerName = sourceServiceMap[serviceCopy.name]
+
+            const providerIndex = serviceCopy.provider.findIndex(p => p.name === providerName)
+
+            if (providerIndex > 0) {
+              const targetProvider = serviceCopy.provider[providerIndex]
+              serviceCopy.provider.splice(providerIndex, 1)
+              serviceCopy.provider.unshift(targetProvider)
+            }
+
+            serviceCopy.defaultChecked = true
+            serviceCopy.selectedProvider = providerName
+            this.selectedServiceProviderMap[serviceCopy.name] = providerName
+          } else {
+            serviceCopy.defaultChecked = false
+            serviceCopy.selectedProvider = null
+          }
+          return serviceCopy
+        })
+
+        this.supportedServices = updatedServices
+        this.sourceNatServiceChecked = !!this.selectedServiceProviderMap.SourceNat
+        this.lbServiceChecked = !!this.selectedServiceProviderMap.Lb
+        this.lbServiceProvider = this.selectedServiceProviderMap.Lb || ''
+        this.firewallServiceChecked = !!this.selectedServiceProviderMap.Firewall
+        this.firewallServiceProvider = this.selectedServiceProviderMap.Firewall || ''
+        this.staticNatServiceChecked = !!this.selectedServiceProviderMap.StaticNat
+        this.staticNatServiceProvider = this.selectedServiceProviderMap.StaticNat || ''
+        this.connectivityServiceChecked = !!this.selectedServiceProviderMap.Connectivity
+
+        this.$nextTick(() => {
+          this.servicesReady = true
+          this.$nextTick(() => {
+            this.checkVirtualRouterForServices()
+          })
+        })
+      }
+    },
+    checkVirtualRouterForServices () {
+      this.isVirtualRouterForAtLeastOneService = false
+      this.isVpcVirtualRouterForAtLeastOneService = false
+      for (const service in this.selectedServiceProviderMap) {
+        const provider = this.selectedServiceProviderMap[service]
+        if (provider === 'VirtualRouter') {
+          this.isVirtualRouterForAtLeastOneService = true
+        } else if (provider === 'VpcVirtualRouter') {
+          this.isVirtualRouterForAtLeastOneService = true
+          this.isVpcVirtualRouterForAtLeastOneService = true
+        }
+      }
+    },
+    handleGuestTypeChange (val) {
+      this.guestType = val
+    },
+    handleForVpcChange (val) {
+      this.forVpc = val
+    },
+    handleProviderChange (val) {
+      this.provider = val
+    },
+    isAdmin () {
+      return isAdmin()
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.showicon = true
+      params.details = 'min'
+      this.domainLoading = true
+      getAPI('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+      })
+    },
+    fetchZoneData () {
+      const params = {}
+      params.showicon = true
+      this.zoneLoading = true
+      getAPI('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        if (listZones) {
+          this.zones = this.zones.concat(listZones)
+        }
+      }).finally(() => {
+        this.zoneLoading = false
+      })
+    },
+    checkRequiredNetworkOfferingExists () {
+      return getAPI('listNetworkOfferings', {
+        guestiptype: 'Isolated',
+        sourcenatsupported: true,
+        availability: 'Required',
+        state: 'Enabled'
+      }).then(json => {
+        const offerings = json.listnetworkofferingsresponse.networkoffering || []
+        this.requiredNetworkOfferingExists = offerings.length > 0
+        return this.requiredNetworkOfferingExists
+      }).catch(error => {
+        console.error('checkRequiredNetworkOfferingExists: Error checking for required offerings:', error)
+        this.requiredNetworkOfferingExists = false
+        return false
+      })
+    },
+    fetchIpv6NetworkOfferingConfiguration () {
+      this.ipv6NetworkOfferingEnabled = false
+      const params = { name: 'ipv6.offering.enabled' }
+      getAPI('listConfigurations', params).then(json => {
+        const value = json?.listconfigurationsresponse?.configuration?.[0].value || null
+        this.ipv6NetworkOfferingEnabled = value === 'true'
+      })
+    },
+    fetchRegisteredServicePackages () {
+      this.registeredServicePackageLoading = true
+      getAPI('listRegisteredServicePackages', {}).then(json => {
+        this.registeredServicePackages = json.listregisteredservicepackage?.registeredServicePackage || []
+      }).finally(() => {
+        this.registeredServicePackageLoading = false
+      })
+    },
+    handleSupportedServiceChange (service, checked, provider) {
+      if (checked) {
+        const correctProvider = this.serviceProviderMap[service]
+        if (correctProvider && provider !== correctProvider) {
+          this.selectedServiceProviderMap[service] = correctProvider
+        } else {
+          this.selectedServiceProviderMap[service] = provider
+        }
+      } else {
+        delete this.selectedServiceProviderMap[service]
+      }
+
+      if (service === 'SourceNat') {
+        this.sourceNatServiceChecked = checked
+      } else if (service === 'Lb') {
+        this.lbServiceChecked = checked
+        this.lbServiceProvider = checked ? provider : ''
+        if (checked && provider === 'Netscaler') {
+          this.fetchRegisteredServicePackages()
+        }
+      } else if (service === 'Firewall') {
+        this.firewallServiceChecked = checked
+        this.firewallServiceProvider = checked ? provider : ''
+      } else if (service === 'StaticNat') {
+        this.staticNatServiceChecked = checked
+        this.staticNatServiceProvider = checked ? provider : ''
+      } else if (service === 'Connectivity') {
+        this.connectivityServiceChecked = checked
+      }
+
+      this.checkVirtualRouterForServices()
+    },
+    handleSubmit (e) {
+      if (e) {
+        e.preventDefault()
+      }
+      if (this.loading) return
+
+      this.formRef.value.validate().then(() => {
+        const formRaw = toRaw(this.form)
+        const values = this.handleRemoveFields(formRaw)
+
+        const params = {
+          sourceofferingid: this.resource.id,
+          name: values.name
+        }
+
+        if (values.displaytext) {
+          params.displaytext = values.displaytext
+        }
+
+        if (values.guestiptype) {
+          params.guestiptype = values.guestiptype
+        }
+
+        if (this.selectedServiceProviderMap != null) {
+          const supportedServices = Object.keys(this.selectedServiceProviderMap)
+          params.supportedservices = supportedServices.join(',')
+          for (const k in supportedServices) {
+            params['serviceProviderList[' + k + '].service'] = supportedServices[k]
+            params['serviceProviderList[' + k + '].provider'] = this.selectedServiceProviderMap[supportedServices[k]]
+          }
+
+          let serviceCapabilityIndex = 0
+
+          if (supportedServices.includes('Connectivity')) {
+            if (values.supportsstrechedl2subnet === true) {
+              params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'Connectivity'
+              params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RegionLevelVpc'
+              params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
+              serviceCapabilityIndex++
+            }
+          }
+
+          if (supportedServices.includes('SourceNat')) {
+            if (values.redundantroutercapability === true) {
+              params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'SourceNat'
+              params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RedundantRouter'
+              params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
+              serviceCapabilityIndex++
+            }
+            params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'SourceNat'
+            params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'SupportedSourceNatTypes'
+            params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.sourcenattype
+            serviceCapabilityIndex++
+          } else if (values.redundantroutercapability === true) {
+            params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'Gateway'
+            params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RedundantRouter'
+            params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
+            serviceCapabilityIndex++
+          }
+
+          if (supportedServices.includes('SourceNat')) {
+            if (values.elasticip === true) {
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'StaticNat'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'ElasticIp'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = true
+              serviceCapabilityIndex++
+            }
+            if (values.elasticip === true || values.associatepublicip === true) {
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'StaticNat'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'associatePublicIP'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.associatepublicip
+              serviceCapabilityIndex++
+            }
+          }
+
+          if (supportedServices.includes('Lb')) {
+            if ('vmautoscalingcapability' in values) {
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'VmAutoScaling'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.vmautoscalingcapability
+              serviceCapabilityIndex++
+            }
+            if (values.elasticlb === true) {
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'ElasticLb'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = true
+              serviceCapabilityIndex++
+            }
+            if (values.inlinemode === 'true' && ((this.selectedServiceProviderMap.Lb === 'F5BigIp') || (this.selectedServiceProviderMap.Lb === 'Netscaler'))) {
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'InlineMode'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.inlinemode
+              serviceCapabilityIndex++
+            }
+
+            params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
+            params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'SupportedLbIsolation'
+            params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.isolation || 'dedicated'
+            serviceCapabilityIndex++
+
+            if (this.selectedServiceProviderMap.Lb === 'InternalLbVm') {
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'lbSchemes'
+              params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = 'internal'
+              serviceCapabilityIndex++
+            }
+
+            if ('netscalerservicepackages' in values &&
+                values.netscalerservicepackages !== null &&
+                this.registeredServicePackages.length > values.netscalerservicepackages &&
+                'netscalerservicepackagesdescription' in values) {
+              params['details[0].servicepackageuuid'] = this.registeredServicePackages[values.netscalerservicepackages].id
+              params['details[1].servicepackagedescription'] = values.netscalerservicepackagesdescription
+            }
+          }
+        }
+
+        if (values.guestiptype === 'l2' && values.userdatal2 === true) {
+          params.supportedservices = 'UserData'
+        }
+
+        if (values.availability) {
+          params.availability = values.availability
+        }
+        if (values.tags) {
+          params.tags = values.tags
+        }
+        if (values.specifyvlan !== undefined) {
+          params.specifyvlan = values.specifyvlan
+        }
+        if (values.conservemode !== undefined) {
+          params.conservemode = values.conservemode
+        }
+        if (values.ispersistent !== undefined) {
+          params.ispersistent = values.ispersistent
+        }
+        if (values.specifyipranges !== undefined) {
+          params.specifyipranges = values.specifyipranges
+        }
+        if (values.egressdefaultpolicy !== undefined) {
+          params.egressdefaultpolicy = values.egressdefaultpolicy
+        }
+        if (values.networkrate) {
+          params.networkrate = values.networkrate
+        }
+        if (values.serviceofferingid) {
+          params.serviceofferingid = values.serviceofferingid
+        }
+        if (values.enable !== undefined) {
+          params.enable = values.enable
+        }
+
+        if (values.ispublic !== true) {
+          const domainIndexes = values.domainid
+          let domainId = null
+          if (domainIndexes && domainIndexes.length > 0) {
+            const domainIds = []
+            for (let i = 0; i < domainIndexes.length; i++) {
+              domainIds.push(this.domains[domainIndexes[i]].id)
+            }
+            domainId = domainIds.join(',')
+          }
+          if (domainId) {
+            params.domainid = domainId
+          }
+        }
+
+        const zoneIndexes = values.zoneid
+        let zoneId = null
+        if (zoneIndexes && zoneIndexes.length > 0) {
+          const zoneIds = []
+          for (let j = 0; j < zoneIndexes.length; j++) {
+            zoneIds.push(this.zones[zoneIndexes[j]].id)
+          }
+          zoneId = zoneIds.join(',')
+        }
+        if (zoneId) {
+          params.zoneid = zoneId
+        }
+
+        params.traffictype = this.resource.traffictype || 'GUEST'
+
+        let detailsIndex = 0
+        if (values.promiscuousmode && values.promiscuousmode !== '') {
+          params['details[' + detailsIndex + '].key'] = 'promiscuousmode'
+          params['details[' + detailsIndex + '].value'] = values.promiscuousmode
+          detailsIndex++
+        }
+        if (values.macaddresschanges && values.macaddresschanges !== '') {
+          params['details[' + detailsIndex + '].key'] = 'macaddresschanges'
+          params['details[' + detailsIndex + '].value'] = values.macaddresschanges
+          detailsIndex++
+        }
+        if (values.forgedtransmits && values.forgedtransmits !== '') {
+          params['details[' + detailsIndex + '].key'] = 'forgedtransmits'
+          params['details[' + detailsIndex + '].value'] = values.forgedtransmits
+          detailsIndex++
+        }
+        if (values.maclearning && values.maclearning !== '') {
+          params['details[' + detailsIndex + '].key'] = 'maclearning'
+          params['details[' + detailsIndex + '].value'] = values.maclearning
+          detailsIndex++
+        }
+
+        this.loading = true
+        postAPI('cloneNetworkOffering', params).then(json => {
+          this.$message.success(`${this.$t('message.success.clone.network.offering')} ${values.name}`)
+          this.$emit('refresh-data')
+          this.closeAction()
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.loading = false
+        })
+      }).catch(error => {
+        this.formRef.value.scrollToField(error.errorFields[0].name)
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .form-layout {
+    width: 80vw;
+
+    @media (min-width: 700px) {
+      width: 550px;
+    }
+  }
+
+  .supported-services-container {
+    height: 250px;
+    overflow-y: scroll;
+  }
+</style>