diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 0f0b6781d51..7bfecb71372 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -563,6 +563,7 @@
 "label.enable.vnmc.provider": "Enable VNMC provider",
 "label.enable.vpc.offering": "Enable VPC offering",
 "label.enable.vpn": "Enable Remote Access VPN",
+"label.enable.zone": "Enable Zone",
 "label.enter.token": "Enter token",
 "label.error.volume.upload": "Please choose a file",
 "label.error.zone.combined": "All Zones cannot be combined with any other zone",
@@ -1085,5 +1086,164 @@
 "addNewNetworks": "Add new networks",
 "existingNetworks": "Existing networks",
 "sshKeyPairs": "SSH keypairs",
-"wednesday": "Wednesday"
+"wednesday": "Wednesday",
+"noselect": "No thanks",
+"groupname": "Add to group",
+"keyboard": "Keyboard language",
+"userdata": "Userdata",
+"label.back": "Back",
+"label.basic": "Basic",
+"label.advanced": "Advanced",
+"message.desc.zone": "A zone is the largest organizational unit in CloudStack, and it typically corresponds to a single datacenter. Zones provide physical isolation and redundancy. A zone consists of one or more pods (each of which contains hosts and primary storage servers) and a secondary storage server which is shared by all pods in the zone.",
+"message.desc.basic.zone": "Provide a single network where each VM instance is assigned an IP directly from the network. Guest isolation can be provided through layer-3 means such as security groups (IP address source filtering).",
+"message.desc.advanced.zone": "For more sophisticated network topologies. This network model provides the most flexibility in defining guest networks and providing custom network offerings such as firewall, VPN, or load balancer support.",
+"message.advanced.security.group": "Choose this if you wish to use security groups to provide guest VM isolation.",
+"message.setup.physical.network.during.zone.creation.basic": "When adding a basic zone, you can set up one physical network, which corresponds to a NIC on the hypervisor. The network carries several types of traffic.<br/><br/>You may also <strong>add</strong> other traffic types onto the physical network.",
+"message.setup.physical.network.during.zone.creation": "When adding an advanced zone, you need to set up one or more physical networks. Each network corresponds to a NIC on the hypervisor. Each physical network can carry one or more types of traffic, with certain restrictions on how they may be combined. Add or remove one or more traffic types onto each physical network.",
+"message.public.traffic.in.advanced.zone": "Public traffic is generated when VMs in the cloud access the internet. Publicly-accessible IPs must be allocated for this purpose. End users can use the CloudStack UI to acquire these IPs to implement NAT between their guest network and their public network.<br/><br/>Provide at least one range of IP addresses for internet traffic.",
+"message.public.traffic.in.basic.zone": "Public traffic is generated when VMs in the cloud access the Internet or provide services to clients over the Internet. Publicly accessible IPs must be allocated for this purpose. When a instance is created, an IP from this set of Public IPs will be allocated to the instance in addition to the guest IP address. Static 1-1 NAT will be set up automatically between the public IP and the guest IP. End users can also use the CloudStack UI to acquire additional IPs to implement static NAT between their instances and the public IP.",
+"message.guest.traffic.in.advanced.zone": "Guest network traffic is communication between end-user virtual machines. Specify a range of VLAN IDs to carry guest traffic for each physical network.",
+"message.guest.traffic.in.basic.zone": "Guest network traffic is communication between end-user virtual machines. Specify a range of IP addresses that CloudStack can assign to guest VMs. Make sure this range does not overlap the reserved system IP range.",
+"message.add.pod.during.zone.creation": "Each zone must contain in one or more pods, and we will add the first pod now. A pod contains hosts and primary storage servers, which you will add in a later step. First, configure a range of reserved IP addresses for CloudStack's internal management traffic. The reserved IP range must be unique for each zone in the cloud.",
+"message.desc.cluster": "Each pod must contain one or more clusters, and we will add the first cluster now. A cluster provides a way to group hosts. The hosts in a cluster all have identical hardware, run the same hypervisor, are on the same subnet, and access the same shared storage. Each cluster consists of one or more hosts and one or more primary storage servers.",
+"message.desc.host": "Each cluster must contain at least one host (computer) for guest VMs to run on, and we will add the first host now. For a host to function in CloudStack, you must install hypervisor software on the host, assign an IP address to the host, and ensure the host is connected to the CloudStack management server.<br/><br/>Give the host's DNS or IP address, the user name (usually root) and password, and any labels you use to categorize hosts.",
+"message.creating.zone": "Creating zone",
+"message.dedicate.zone": "Dedicating zone",
+"message.creating.physical.networks": "Creating physical networks",
+"message.configuring.physical.networks": "Configuring physical networks",
+"message.adding.Netscaler.provider": "Adding Netscaler provider",
+"message.adding.Netscaler.device": "Adding Netscaler device",
+"message.creating.pod": "Creating pod",
+"message.creating.guest.network": "Creating guest network",
+"message.configuring.public.traffic": "Configuring public traffic",
+"message.configuring.storage.traffic": "Configuring storage traffic",
+"message.configuring.guest.traffic": "Configuring guest traffic",
+"message.creating.cluster": "Creating cluster",
+"message.adding.host": "Adding host",
+"message.creating.primary.storage": "Creating primary storage",
+"message.creating.secondary.storage": "Creating secondary storage",
+"message.enabling.security.group.provider": "Enabling Security Group provider",
+"message.Zone.creation.complete": "Zone creation complete",
+"message.launch.zone": "Zone is ready to launch; please proceed to the next step.",
+"message.please.wait.while.zone.is.being.created": "Please wait while your zone is being created; this may take a while...",
+"message.required.add.least.IP": "Please add at least 1 IP Range",
+"message.required.traffic.type": "Error in configuration! All required traffic types should be added and with multiple physical networks each network should have a label.",
+"message.desc.primary.storage": "Each cluster must contain one or more primary storage servers, and we will add the first one now. Primary storage contains the disk volumes for all the VMs running on hosts in the cluster. Use any standards-compliant protocol that is supported by the underlying hypervisor.",
+"message.desc.secondary.storage": "Each zone must have at least one NFS or secondary storage server, and we will add the first one now. Secondary storage stores VM templates, ISO images, and VM disk volume snapshots. This server must be available to all hosts in the zone.<br/><br/>Provide the IP address and exported path.",
+"label.name": "Name",
+"label.ipv4.dns1": "IPv4 DNS1",
+"label.ipv4.dns2": "IPv4 DNS2",
+"label.ipv6.dns1": "IPv6 DNS1",
+"label.ipv6.dns2": "IPv6 DNS2",
+"label.internal.dns.1": "Internal DNS 1",
+"label.internal.dns.2": "Internal DNS 2",
+"label.hypervisor": "Hypervisor",
+"label.network.offering": "Network Offering",
+"label.network.domain": "Network Domain",
+"label.guest.cidr": "Guest CIDR",
+"label.dedicated": "Dedicated",
+"label.domains": "Domains",
+"label.account": "Account",
+"label.local.storage.enabled": "Enable local storage for User VMs",
+"label.local.storage.enabled.system.vms": "Enable local storage for System VMs",
+"label.menu.security.groups": "Security Groups",
+"label.network.name": "Network Name",
+"label.isolation.method": "Isolation method",
+"label.traffic.types": "Traffic Types",
+"label.previous": "Previous",
+"label.next": "Next",
+"label.zone.type": "Zone Type",
+"label.zone.details": "Zone details",
+"label.network": "Network",
+"label.add.resources": "Add Resources",
+"label.launch": "Launch",
+"label.physical.network": "Physical Network",
+"label.netScaler": "NetScaler",
+"label.public.traffic": "Public traffic",
+"label.pod": "Pod",
+"label.guest.traffic": "Guest Traffic",
+"label.storage.traffic": "Storage Traffic",
+"label.guest.ip": "Guest IP Address",
+"label.username": "Username",
+"label.password": "Password",
+"label.type": "Type",
+"label.public.interface": "Public Interface",
+"label.private.interface": "Private Interface",
+"label.gslb.service": "GSLB service",
+"label.gslb.service.public.ip": "GSLB service Public IP",
+"label.gslb.service.private.ip": "GSLB service Private IP",
+"label.numretries": "Number of Retries",
+"label.capacity": "Capacity",
+"label.please.specify.netscaler.info": "Please specify Netscaler info",
+"label.zoneWizard.trafficType.management": "Management: Traffic between CloudStack's internal resources, including any components that communicate with the Management Server, such as hosts and CloudStack system VMs",
+"label.pod.name": "Pod name",
+"label.reserved.system.gateway": "Reserved system gateway",
+"label.reserved.system.netmask": "Reserved system netmask",
+"label.start.reserved.system.IP": "Start Reserved system IP",
+"label.end.reserved.system.IP": "End Reserved system IP",
+"label.guest.gateway": "Guest Gateway",
+"label.guest.netmask": "Guest Netmask",
+"label.guest.start.ip": "Guest start IP",
+"label.guest.end.ip": "Guest end IP",
+"label.cluster": "Cluster",
+"label.host": "Host",
+"label.cluster.name": "Cluster Name",
+"label.vcenter.host": "vCenter Host",
+"label.vcenter.password": "vCenter Password",
+"label.vcenter.username": "vCenter Username",
+"label.vcenter.datacenter": "vCenter Datacenter",
+"label.vcenter.datastore": "vCenter Datastore",
+"label.override.public.traffic": "Override Public-Traffic",
+"label.override.guest.traffic": "Override Guest-Traffic",
+"label.cisco.nexus1000v.ip.address": "Nexus 1000v IP Address",
+"label.cisco.nexus1000v.password": "Nexus 1000v Password",
+"label.cisco.nexus1000v.username": "Nexus 1000v Username",
+"label.host.name": "Host Name",
+"label.agent.username": "Agent Username",
+"label.agent.password": "Agent Password",
+"label.tags": "Tags",
+"label.scope": "Scope",
+"label.protocol": "Protocol",
+"label.server": "Server",
+"label.path": "Path",
+"label.SR.name": "SR Name-Label",
+"label.target.iqn": "Target IQN",
+"label.LUN.number": "LUN #",
+"label.smb.domain": "SMB Domain",
+"label.smb.username": "SMB Username",
+"label.smb.password": "SMB Password",
+"label.rados.monitor": "RADOS Monitor",
+"label.rados.pool": "RADOS Pool",
+"label.rados.user": "RADOS User",
+"label.rados.secret": "RADOS Secret",
+"label.volgroup": "Volume Group",
+"label.volume": "Volume",
+"label.storage.tags": "Storage Tags",
+"label.provider": "Provider",
+"label.s3.access_key": "Access Key",
+"label.s3.bucket": "Bucket",
+"label.s3.connection_timeout": "Connection Timeout",
+"label.s3.endpoint": "Endpoint",
+"label.s3.max_error_retry": "Max Error Retry",
+"label.s3.nfs.path": "S3 NFS Path",
+"label.s3.nfs.server": "S3 NFS Server",
+"label.s3.secret_key": "Secret Key",
+"label.s3.socket_timeout": "Socket Timeout",
+"label.s3.use_https": "Use HTTPS",
+"label.create.nfs.secondary.staging.storage": "Create NFS Secondary Staging Store",
+"label.create.nfs.secondary.staging.store": "Create NFS secondary staging store",
+"label.url": "URL",
+"label.key": "Key",
+"label.add.physical.network": "Add Physical Network",
+"label.delete.confirm": "Delete?",
+"label.gateway": "Gateway",
+"label.netmask": "Netmask",
+"label.start.IP": "Start IP",
+"label.end.IP": "End IP",
+"label.add.traffic": "Add Traffic",
+"label.vlan.range": "VLAN/VNI Range",
+"label.launch.zone": "Launch Zone",
+"label.done": "Done",
+"label.fix.errors": "Fix errors",
+"error.something.went.wrong.please.correct.the.following": "Something went wrong; please correct the following"
 }
diff --git a/ui/src/utils/request.js b/ui/src/utils/request.js
index f28958fcef1..2abad07d6b6 100644
--- a/ui/src/utils/request.js
+++ b/ui/src/utils/request.js
@@ -25,7 +25,7 @@ import { ACCESS_TOKEN, CURRENT_PROJECT } from '@/store/mutation-types'
 
 const service = axios.create({
   baseURL: config.apiBase,
-  timeout: 60000
+  timeout: 600000
 })
 
 const err = (error) => {
diff --git a/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue b/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
new file mode 100644
index 00000000000..97a97fea0d3
--- /dev/null
+++ b/ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue
@@ -0,0 +1,216 @@
+// 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>
+    <a-card
+      class="ant-form-text"
+      style="text-align: justify; margin: 10px 0; padding: 24px;"
+      v-if="description && description.length > 0"
+      v-html="$t(description)">
+    </a-card>
+    <a-form
+      class="form-content"
+      :form="form"
+      @submit="handleSubmit">
+      <a-form-item
+        :label="$t('label.vlan.range')"
+        v-bind="formItemLayout"
+        :help="validMessage"
+        :validate-status="validStatus"
+        has-feedback>
+        <a-form-item
+          has-feedback
+          :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+          <a-input-number
+            v-decorator="['vlanRangeStart', {
+              rules: [{
+                validator: validateFromTo,
+                fromInput: true,
+                compare: 'vlanRangeEnd',
+                initialValue: getPrefilled('vlanRangeStart')
+              }]
+            }]"
+            style="width: 100%;"
+          />
+        </a-form-item>
+        <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
+          -
+        </span>
+        <a-form-item
+          has-feedback
+          :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
+          <a-input-number
+            v-decorator="['vlanRangeEnd', {
+              rules: [{
+                validator: validateFromTo,
+                toInput: true,
+                compare: 'vlanRangeStart',
+                initialValue: getPrefilled('vlanRangeEnd')
+              }]
+            }]"
+            style="width: 100%;"
+          />
+        </a-form-item>
+      </a-form-item>
+    </a-form>
+    <div class="form-action">
+      <a-button
+        v-if="!isFixError"
+        class="button-prev"
+        @click="handleBack">
+        {{ $t('label.previous') }}
+      </a-button>
+      <a-button class="button-next" type="primary" @click="handleSubmit">
+        {{ $t('label.next') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AdvancedGuestTrafficForm',
+  props: {
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    description: {
+      type: String,
+      default: 'Creating IP Ranges'
+    },
+    isFixError: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      formItemLayout: {
+        labelCol: { span: 8 },
+        wrapperCol: { span: 12 }
+      },
+      validStatus: '',
+      validMessage: ''
+    }
+  },
+  created () {
+    this.form = this.$form.createForm(this, {
+      onFieldsChange: (_, changedFields) => {
+        this.$emit('fieldsChanged', changedFields)
+      }
+    })
+  },
+  mounted () {
+    this.fillValue()
+  },
+  methods: {
+    fillValue () {
+      const fieldVal = {}
+      fieldVal.vlanRangeStart = this.getPrefilled('vlanRangeStart')
+      this.form.setFieldsValue(fieldVal)
+      fieldVal.vlanRangeEnd = this.getPrefilled('vlanRangeEnd')
+      this.form.setFieldsValue(fieldVal)
+    },
+    getPrefilled (key) {
+      return this.prefillContent[key] ? this.prefillContent[key].value : null
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        this.validStatus = ''
+        this.validMessage = ''
+        if (err) {
+          return
+        }
+        if (!this.checkFromTo(values.vlanRangeStart, values.vlanRangeEnd)) {
+          this.validStatus = 'error'
+          this.validMessage = 'Please enter a valid VLAN/VNI range'
+          return
+        }
+        if (this.isFixError) {
+          this.$emit('submitLaunchZone')
+          return
+        }
+        this.$emit('nextPressed')
+      })
+    },
+    handleBack (e) {
+      this.$emit('backPressed')
+    },
+    validateFromTo (rule, value, callback) {
+      let fromVal = ''
+      let toVal = ''
+      this.validStatus = ''
+      this.validMessage = ''
+      if (rule.fromInput) {
+        fromVal = value
+        toVal = this.form.getFieldValue(rule.compare)
+      } else if (rule.toInput) {
+        toVal = value
+        fromVal = this.form.getFieldValue(rule.compare)
+      }
+      if (!this.checkFromTo(fromVal, toVal)) {
+        this.validStatus = 'error'
+        this.validMessage = 'Please enter a valid VLAN/VNI range'
+      }
+      callback()
+    },
+    checkFromTo (fromVal, toVal) {
+      if (!fromVal) fromVal = 0
+      if (!toVal) toVal = 0
+      if (fromVal > toVal) {
+        return false
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .form-content {
+    border: 1px dashed #e9e9e9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    vertical-align: center;
+    padding-top: 16px;
+    padding-top: 16px;
+    margin-top: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+
+    /deep/.has-error {
+      .ant-form-explain {
+        text-align: left;
+      }
+    }
+
+    /deep/.ant-form-item-control {
+      text-align: left;
+    }
+  }
+
+  .form-action {
+    margin-top: 16px;
+  }
+</style>
diff --git a/ui/src/views/infra/zone/IpAddressRangeForm.vue b/ui/src/views/infra/zone/IpAddressRangeForm.vue
new file mode 100644
index 00000000000..da34265a8db
--- /dev/null
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@@ -0,0 +1,258 @@
+// 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>
+    <a-card
+      class="ant-form-text"
+      style="text-align: justify; margin: 10px 0; padding: 24px;"
+      v-html="$t(description)">
+    </a-card>
+    <a-table
+      bordered
+      :dataSource="ipRanges"
+      :columns="columns"
+      :pagination="false"
+      style="margin-bottom: 24px;" >
+      <template slot="actions" slot-scope="text, record">
+        <a-button type="danger" shape="circle" icon="delete" @click="onDelete(record.key)" />
+      </template>
+      <template slot="footer">
+        <a-form
+          layout="inline"
+          :form="form"
+          @submit="handleAddRange">
+          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
+            <a-input
+              v-decorator="[ 'gateway', {
+                rules: [{ required: true, message: 'Please enter Gateway' }]
+              }]"
+              :placeholder="$t('label.gateway')"
+            />
+          </a-form-item>
+          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
+            <a-input
+              v-decorator="[ 'netmask', {
+                rules: [{ required: true, message: 'Please enter Netmask' }]
+              }]"
+              :placeholder="$t('label.netmask')"
+            />
+          </a-form-item>
+          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
+            <a-input
+              v-decorator="[ 'vlan', { rules: [{ required: false }] }]"
+              :placeholder="$t('label.vlan')"
+            />
+          </a-form-item>
+          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
+            <a-input
+              v-decorator="[ 'startIp', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please enter Start IP'
+                  },
+                  {
+                    validator: checkIpFormat,
+                    ipV4: true,
+                    message: 'Please enter a valid IPv4 address.'
+                  }
+                ]
+              }]"
+              :placeholder="$t('label.start.IP')"
+            />
+          </a-form-item>
+          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
+            <a-input
+              v-decorator="[ 'endIp', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please enter End IP'
+                  },
+                  {
+                    validator: checkIpFormat,
+                    ipV4: true,
+                    message: 'Please enter a valid IPv4 address.'
+                  }]
+              }]"
+              :placeholder="$t('label.end.IP')"
+            />
+          </a-form-item>
+          <a-form-item :style="{ display: 'inline-block', width: '14%' }">
+            <a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
+          </a-form-item>
+        </a-form>
+      </template>
+    </a-table>
+    <div class="form-action">
+      <a-button
+        v-if="!isFixError"
+        class="button-prev"
+        @click="handleBack">
+        {{ $t('label.previous') }}
+      </a-button>
+      <a-button class="button-next" type="primary" @click="handleSubmit">
+        {{ $t('label.next') }}
+      </a-button>
+    </div>
+    <a-modal
+      :visible="showError"
+      title="Error!"
+      @ok="() => { showError = false }"
+      @cancel="() => { showError = false }"
+      centered
+    >
+      <span>{{ $t('message.required.add.least.IP') }}</span>
+    </a-modal>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    traffic: {
+      type: String,
+      default: '0'
+    },
+    description: {
+      type: String,
+      default: 'Creating IP Ranges'
+    },
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    isFixError: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      formItemLayout: {
+        wrapperCol: { span: 0 }
+      },
+      ipRanges: [],
+      columns: [
+        {
+          title: this.$t('label.gateway'),
+          dataIndex: 'gateway',
+          width: 150
+        },
+        {
+          title: this.$t('label.netmask'),
+          dataIndex: 'netmask',
+          width: 150
+        },
+        {
+          title: this.$t('label.vlan'),
+          dataIndex: 'vlan',
+          width: 120
+        },
+        {
+          title: this.$t('label.start.IP'),
+          dataIndex: 'startIp',
+          width: 130
+        },
+        {
+          title: this.$t('label.end.IP'),
+          dataIndex: 'endIp',
+          width: 130
+        },
+        {
+          title: '',
+          dataIndex: 'actions',
+          scopedSlots: { customRender: 'actions' },
+          width: 50
+        }
+      ],
+      showError: false,
+      ipV4Regex: /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i,
+      ipV6Regex: /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i
+    }
+  },
+  mounted () {
+    const prefilledIpRangesKey = this.traffic + '-ipranges'
+    if (this.prefillContent[prefilledIpRangesKey]) {
+      this.ipRanges = this.prefillContent[prefilledIpRangesKey]
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  methods: {
+    handleAddRange (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.ipRanges.push({
+            key: this.ipRanges.length.toString(),
+            gateway: values.gateway,
+            netmask: values.netmask,
+            vlan: values.vlan,
+            startIp: values.startIp,
+            endIp: values.endIp
+          })
+          this.form.resetFields()
+        }
+      })
+      this.emitIpRanges()
+    },
+    isValidSetup () {
+      return this.ipRanges && this.ipRanges.length > 0
+    },
+    handleSubmit (e) {
+      if (this.isValidSetup()) {
+        if (this.isFixError) {
+          this.$emit('submitLaunchZone')
+          return
+        }
+
+        this.$emit('nextPressed', this.ipRanges)
+      } else {
+        this.showError = true
+      }
+    },
+    handleBack (e) {
+      this.$emit('backPressed')
+    },
+    onDelete (key) {
+      const ipRanges = [...this.ipRanges]
+      this.ipRanges = ipRanges.filter(item => item.key !== key)
+      this.emitIpRanges()
+    },
+    emitIpRanges () {
+      const trafficRanges = {}
+      trafficRanges[this.traffic + '-ipranges'] = this.ipRanges
+      this.$emit('fieldsChanged', trafficRanges)
+    },
+    checkIpFormat (rule, value, callback) {
+      if (!value || value === '') {
+        callback()
+      } else if (rule.ipV4 && !this.ipV4Regex.test(value)) {
+        callback(rule.message)
+      } else if (rule.ipV6 && !this.ipV6Regex.test(value)) {
+        callback(rule.message)
+      } else {
+        callback()
+      }
+    }
+  }
+}
+</script>
diff --git a/ui/src/views/infra/zone/StaticInputsForm.vue b/ui/src/views/infra/zone/StaticInputsForm.vue
new file mode 100644
index 00000000000..7d50da7e715
--- /dev/null
+++ b/ui/src/views/infra/zone/StaticInputsForm.vue
@@ -0,0 +1,277 @@
+// 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>
+    <a-card
+      class="ant-form-text"
+      v-if="description && description.length > 0"
+      v-html="$t(description)">
+    </a-card>
+    <a-form
+      class="form-content"
+      :form="form"
+      @submit="handleSubmit">
+      <a-form-item
+        v-for="(field, index) in this.fields"
+        :key="index"
+        :label="$t(field.title)"
+        v-if="isDisplayInput(field.display)"
+        v-bind="formItemLayout"
+        :has-feedback="field.switch ? false : true">
+        <a-select
+          v-if="field.select"
+          v-decorator="[field.key, {
+            rules: [
+              {
+                required: field.required,
+                message: field.placeHolder,
+                initialValue: getPrefilled(field.key)
+              }
+            ]
+          }]"
+          :allowClear="true"
+        >
+          <a-select-option
+            v-for="option in field.options"
+            :key="option.id"
+            :value="option.id"
+          >
+            {{ option.name || option.description }}
+          </a-select-option>
+        </a-select>
+        <a-switch
+          v-else-if="field.switch"
+          v-decorator="[field.key]"
+          :default-checked="isChecked(field)"
+        />
+        <a-input
+          v-else-if="field.password"
+          type="password"
+          v-decorator="[field.key, {
+            rules: [
+              {
+                required: field.required,
+                message: field.placeHolder,
+                initialValue: getPrefilled(field.key)
+              }
+            ]
+          }]"
+        />
+        <a-input
+          v-else
+          v-decorator="[field.key, {
+            rules: [
+              {
+                required: field.required,
+                message: field.placeHolder,
+                initialValue: getPrefilled(field.key)
+              },
+              {
+                validator: checkIpFormat,
+                ipV4: field.ipV4,
+                ipV6: field.ipV6,
+                message: field.message
+              }
+            ]
+          }]"
+        />
+      </a-form-item>
+    </a-form>
+    <div class="form-action">
+      <a-button
+        v-if="!isFixError"
+        class="button-prev"
+        @click="handleBack">
+        {{ $t('label.previous') }}
+      </a-button>
+      <a-button class="button-next" type="primary" @click="handleSubmit">
+        {{ $t('label.next') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    fields: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    description: {
+      type: String,
+      default: 'Creating IP Ranges'
+    },
+    isFixError: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created () {
+    this.form = this.$form.createForm(this, {
+      onFieldsChange: (_, changedFields) => {
+        this.$emit('fieldsChanged', changedFields)
+      }
+    })
+  },
+  data: () => ({
+    formItemLayout: {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 12 }
+    },
+    ipV4Regex: /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i,
+    ipV6Regex: /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i
+  }),
+  mounted () {
+    this.fillValue(true)
+  },
+  watch: {
+    fields () {
+      this.fillValue(false)
+    }
+  },
+  methods: {
+    fillValue (autoFill) {
+      this.fields.forEach(field => {
+        const fieldExists = this.isDisplayInput(field.display)
+        if (!fieldExists) {
+          return
+        }
+        const fieldVal = {}
+        if (field.key === 'agentUserName' && !this.getPrefilled(field.key)) {
+          fieldVal[field.key] = 'Oracle'
+        } else {
+          fieldVal[field.key] = this.getPrefilled(field.key)
+        }
+        if (autoFill) {
+          this.form.setFieldsValue(fieldVal)
+        } else {
+          this.form.getFieldDecorator(field.key, { initialValue: this.getPrefilled(field.key) })
+        }
+      })
+    },
+    getPrefilled (key) {
+      return this.prefillContent[key] ? this.prefillContent[key].value : null
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        if (this.isFixError) {
+          this.$emit('submitLaunchZone')
+          return
+        }
+        this.$emit('nextPressed')
+      })
+    },
+    handleBack (e) {
+      this.$emit('backPressed')
+    },
+    checkIpFormat (rule, value, callback) {
+      if (!value || value === '') {
+        callback()
+      } else if (rule.ipV4 && !this.ipV4Regex.test(value)) {
+        callback(rule.message)
+      } else if (rule.ipV6 && !this.ipV6Regex.test(value)) {
+        callback(rule.message)
+      } else {
+        callback()
+      }
+    },
+    isDisplayInput (conditions) {
+      if (!conditions || Object.keys(conditions).length === 0) {
+        return true
+      }
+      let isShow = false
+      Object.keys(conditions).forEach(key => {
+        const condition = conditions[key]
+        const fieldVal = this.form.getFieldValue(key)
+          ? this.form.getFieldValue(key)
+          : (this.prefillContent[key] ? this.prefillContent[key].value : null)
+        if (Array.isArray(condition) && condition.includes(fieldVal)) {
+          isShow = true
+          return false
+        } else if (!Array.isArray(condition) && fieldVal === condition) {
+          isShow = true
+          return false
+        }
+
+        return true
+      })
+
+      return isShow
+    },
+    isChecked (field) {
+      if (this.prefillContent[field.key] && this.prefillContent[field.key].value) {
+        return this.prefillContent[field.key].value
+      }
+      if (!field.checked) {
+        return false
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .form-content {
+    border: 1px dashed #e9e9e9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    vertical-align: center;
+    padding-top: 16px;
+    padding-top: 16px;
+    margin-top: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+
+    /deep/.has-error {
+      .ant-form-explain {
+        text-align: left;
+      }
+    }
+
+    /deep/.ant-form-item-control {
+      text-align: left;
+    }
+  }
+
+  .ant-form-text {
+    text-align: justify;
+    margin: 10px 0;
+    padding: 24px;
+    width: 100%;
+  }
+
+  .form-action {
+    margin-top: 16px;
+  }
+</style>
diff --git a/ui/src/views/infra/zone/ZoneWizard.vue b/ui/src/views/infra/zone/ZoneWizard.vue
index e4ec8e1bc07..25cbfbb52dc 100644
--- a/ui/src/views/infra/zone/ZoneWizard.vue
+++ b/ui/src/views/infra/zone/ZoneWizard.vue
@@ -16,29 +16,205 @@
 // under the License.
 
 <template>
-  <div>
-    <a-steps direction="vertical" type="navigation" :current="1">
-      <a-step title="Finished" description="This is a description." />
-      <a-step title="In Progress" description="This is a description." />
-      <a-step title="Waiting" description="This is a description." />
+  <div class="form">
+    <a-steps
+      labelPlacement="vertical"
+      size="small"
+      :current="currentStep">
+      <a-step
+        v-for="(item) in steps"
+        :key="item.title"
+        :title="$t(item.title)">
+      </a-step>
     </a-steps>
+    <div>
+      <zone-wizard-zone-type-step
+        v-if="currentStep === 0"
+        @nextPressed="nextPressed"
+        @fieldsChanged="onFieldsChanged"
+        :prefillContent="zoneConfig"
+      />
+      <zone-wizard-zone-details-step
+        v-else-if="currentStep === 1"
+        @nextPressed="nextPressed"
+        @backPressed="backPressed"
+        @fieldsChanged="onFieldsChanged"
+        @submitLaunchZone="onLaunchZone"
+        :isFixError="stepFixError"
+        :prefillContent="zoneConfig"
+      />
+      <zone-wizard-network-setup-step
+        v-else-if="currentStep === 2"
+        @nextPressed="nextPressed"
+        @backPressed="backPressed"
+        @fieldsChanged="onFieldsChanged"
+        @submitLaunchZone="onLaunchZone"
+        :stepChild="stepChild"
+        :isFixError="stepFixError"
+        :prefillContent="zoneConfig"
+      />
+      <zone-wizard-add-resources
+        v-else-if="currentStep === 3"
+        @nextPressed="nextPressed"
+        @backPressed="backPressed"
+        @fieldsChanged="onFieldsChanged"
+        @submitLaunchZone="onLaunchZone"
+        :stepChild="stepChild"
+        :isFixError="stepFixError"
+        :prefillContent="zoneConfig"
+      />
+      <zone-wizard-launch-zone
+        v-else
+        @backPressed="backPressed"
+        @closeAction="onCloseAction"
+        @refresh-data="onRefreshData"
+        @stepError="onStepError"
+        :launchZone="launchZone"
+        :stepChild="stepChild"
+        :launchData="launchData"
+        :isFixError="stepFixError"
+        :prefillContent="zoneConfig"
+      />
+    </div>
   </div>
 </template>
-
 <script>
+import ZoneWizardZoneTypeStep from '@views/infra/zone/ZoneWizardZoneTypeStep'
+import ZoneWizardZoneDetailsStep from '@views/infra/zone/ZoneWizardZoneDetailsStep'
+import ZoneWizardNetworkSetupStep from '@views/infra/zone/ZoneWizardNetworkSetupStep'
+import ZoneWizardAddResources from '@views/infra/zone/ZoneWizardAddResources'
+import ZoneWizardLaunchZone from '@views/infra/zone/ZoneWizardLaunchZone'
 
 export default {
-  name: 'ZoneWizard',
   components: {
+    ZoneWizardZoneTypeStep,
+    ZoneWizardZoneDetailsStep,
+    ZoneWizardNetworkSetupStep,
+    ZoneWizardAddResources,
+    ZoneWizardLaunchZone
   },
   data () {
     return {
+      currentStep: 0,
+      stepFixError: false,
+      launchZone: false,
+      launchData: {},
+      stepChild: '',
+      steps: [
+        {
+          title: 'label.zone.type',
+          step: [],
+          description: 'Select type of zone basic/advanced.',
+          hint: 'This is the type of zone deployement that you want to use. Basic zone: provides a single network where each VM instance is assigned an IP directly from the network. Guest isolation can be provided through layer-3 means such as security groups (IP address source filtering). Advanced zone: For more sophisticated network topologies. This network model provides the most flexibility in defining guest networks and providing custom network offerings such as firewall, VPN, or load balancer support.'
+        },
+        {
+          title: 'label.zone.details',
+          step: ['stepAddZone', 'dedicateZone'],
+          description: 'Populate zone details',
+          hint: 'A zone is the largest organizational unit in CloudStack, and it typically corresponds to a single datacenter. Zones provide physical isolation and redundancy. A zone consists of one or more pods (each of which contains hosts and primary storage servers) and a secondary storage server which is shared by all pods in the zone.'
+        },
+        {
+          title: 'label.network',
+          step: ['physicalNetwork', 'netscaler', 'pod', 'guestTraffic', 'storageTraffic', 'publicTraffic'],
+          description: 'Setup network and traffic',
+          hint: 'Configure network components and public/guest/management traffic including IP addresses.'
+        },
+        {
+          title: 'label.add.resources',
+          step: ['clusterResource', 'hostResource', 'primaryResource', 'secondaryResource'],
+          description: 'Add infrastructure resources',
+          hint: 'Add infrastructure resources - pods, clusters, primary/secondary storages.'
+        },
+        {
+          title: 'label.launch',
+          step: ['launchZone'],
+          description: 'Zone is ready to launch; please proceed to the next step.',
+          hint: 'Configure network components and traffic including IP addresses.'
+        }
+      ],
+      zoneConfig: {}
     }
   },
   methods: {
+    nextPressed () {
+      this.currentStep++
+    },
+    backPressed (data) {
+      this.currentStep--
+    },
+    onFieldsChanged (data) {
+      if (data.zoneType &&
+        this.zoneConfig.zoneType &&
+        data.zoneType.value !== this.zoneConfig.zoneType.value) {
+        this.zoneConfig.physicalNetworks = null
+      }
+
+      this.zoneConfig = { ...this.zoneConfig, ...data }
+    },
+    onCloseAction () {
+      this.$emit('close-action')
+    },
+    onRefreshData () {
+      this.$message.success('Processing complete!')
+      this.$emit('refresh-data')
+      this.onCloseAction()
+    },
+    onStepError (step, launchData) {
+      this.currentStep = this.steps.findIndex(item => item.step.includes(step))
+      this.stepChild = step
+      this.launchData = launchData
+      this.launchZone = false
+      this.stepFixError = true
+    },
+    onLaunchZone () {
+      this.stepFixError = false
+      this.launchZone = true
+      this.currentStep = this.steps.findIndex(item => item.step.includes('launchZone'))
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .form {
+    width: 95vw;
+    @media (min-width: 1000px) {
+      width: 800px;
+    }
+
+    /deep/.form-action {
+      position: relative;
+      margin-top: 16px;
+      height: 35px;
+    }
+
+    /deep/.button-next {
+      position: absolute;
+      right: 0;
+    }
+
+    /deep/.button-next.ant-btn-loading:not(.ant-btn-circle):not(.ant-btn-circle-outline):not(.ant-btn-icon-only) {
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  /deep/.ant-form-text {
+    width: 100%;
+  }
+
+  .steps-content {
+    border: 1px dashed #e9e9e9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    vertical-align: center;
+    padding: 8px;
+    padding-top: 16px;
+  }
+
+  .steps-action {
+    margin-top: 24px;
+  }
 </style>
diff --git a/ui/src/views/infra/zone/ZoneWizardAddResources.vue b/ui/src/views/infra/zone/ZoneWizardAddResources.vue
new file mode 100644
index 00000000000..5c535dbbaa7
--- /dev/null
+++ b/ui/src/views/infra/zone/ZoneWizardAddResources.vue
@@ -0,0 +1,898 @@
+// 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 style="width: auto;">
+    <a-steps progressDot :current="currentStep" size="small" style="margin-left: 0; margin-top: 16px;">
+      <a-step
+        v-for="step in steps"
+        :key="step.title"
+        :title="$t(step.title)"></a-step>
+    </a-steps>
+    <static-inputs-form
+      v-if="currentStep === 0"
+      @nextPressed="nextPressed"
+      @backPressed="handleBack"
+      @fieldsChanged="fieldsChanged"
+      @submitLaunchZone="submitLaunchZone"
+      :fields="clusterFields"
+      :prefillContent="prefillContent"
+      :description="steps[currentStep].description"
+      :isFixError="isFixError"
+    />
+
+    <div v-if="hypervisor !== 'VMware'">
+      <static-inputs-form
+        v-if="currentStep === 1"
+        @nextPressed="nextPressed"
+        @backPressed="handleBack"
+        @fieldsChanged="fieldsChanged"
+        @submitLaunchZone="submitLaunchZone"
+        :fields="hostFields"
+        :prefillContent="prefillContent"
+        :description="steps[currentStep].description"
+        :isFixError="isFixError"
+      />
+      <static-inputs-form
+        v-if="currentStep === 2"
+        @nextPressed="nextPressed"
+        @backPressed="handleBack"
+        @fieldsChanged="fieldsChanged"
+        @submitLaunchZone="submitLaunchZone"
+        :fields="primaryStorageFields"
+        :prefillContent="prefillContent"
+        :description="steps[currentStep].description"
+        :isFixError="isFixError"
+      />
+      <static-inputs-form
+        v-if="currentStep === 3"
+        @nextPressed="nextPressed"
+        @backPressed="handleBack"
+        @fieldsChanged="fieldsChanged"
+        @submitLaunchZone="submitLaunchZone"
+        :fields="secondaryStorageFields"
+        :prefillContent="prefillContent"
+        :description="steps[currentStep].description"
+        :isFixError="isFixError"
+      />
+    </div>
+    <div v-else>
+      <static-inputs-form
+        v-if="currentStep === 1"
+        @nextPressed="nextPressed"
+        @backPressed="handleBack"
+        @fieldsChanged="fieldsChanged"
+        @submitLaunchZone="submitLaunchZone"
+        :fields="primaryStorageFields"
+        :prefillContent="prefillContent"
+        :description="steps[currentStep].description"
+        :isFixError="isFixError"
+      />
+      <static-inputs-form
+        v-if="currentStep === 2"
+        @nextPressed="nextPressed"
+        @backPressed="handleBack"
+        @fieldsChanged="fieldsChanged"
+        @submitLaunchZone="submitLaunchZone"
+        :fields="secondaryStorageFields"
+        :prefillContent="prefillContent"
+        :description="steps[currentStep].description"
+        :isFixError="isFixError"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import StaticInputsForm from '@views/infra/zone/StaticInputsForm'
+import { api } from '@/api'
+
+export default {
+  components: {
+    StaticInputsForm
+  },
+  props: {
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    stepChild: {
+      type: String,
+      default: ''
+    },
+    isFixError: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    zoneType () {
+      return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : null
+    },
+    hypervisor () {
+      return this.prefillContent.hypervisor ? this.prefillContent.hypervisor.value : null
+    },
+    steps () {
+      const steps = []
+      const hypervisor = this.prefillContent.hypervisor ? this.prefillContent.hypervisor.value : null
+      steps.push({
+        title: 'label.cluster',
+        fromKey: 'clusterResource',
+        description: 'message.desc.cluster'
+      })
+      if (hypervisor !== 'VMware') {
+        steps.push({
+          title: 'label.host',
+          fromKey: 'hostResource',
+          description: 'message.desc.host'
+        })
+      }
+      steps.push({
+        title: 'label.primary.storage',
+        fromKey: 'primaryResource',
+        description: 'message.desc.primary.storage'
+      })
+      steps.push({
+        title: 'label.secondary.storage',
+        fromKey: 'secondaryResource',
+        description: 'message.desc.secondary.storage'
+      })
+
+      return steps
+    },
+    clusterFields () {
+      return [
+        {
+          title: 'label.cluster.name',
+          key: 'clusterName',
+          placeHolder: 'Please enter cluster name',
+          required: true
+        },
+        {
+          title: 'label.vcenter.host',
+          key: 'vCenterHost',
+          placeHolder: 'Please enter vCenter Host',
+          required: true,
+          display: {
+            hypervisor: ['VMware', 'Ovm3']
+          }
+        },
+        {
+          title: 'label.vcenter.username',
+          key: 'vCenterUsername',
+          placeHolder: 'Please enter vCenter Username',
+          required: true,
+          display: {
+            hypervisor: ['VMware', 'Ovm3']
+          }
+        },
+        {
+          title: 'label.vcenter.password',
+          key: 'vCenterPassword',
+          placeHolder: 'Please enter vCenter Password',
+          required: true,
+          password: true,
+          display: {
+            hypervisor: ['VMware', 'Ovm3']
+          }
+        },
+        {
+          title: 'label.vcenter.datacenter',
+          key: 'vCenterDatacenter',
+          placeHolder: 'Please enter vCenter Datacenter',
+          required: true,
+          display: {
+            hypervisor: ['VMware', 'Ovm3']
+          }
+        },
+        {
+          title: 'label.override.public.traffic',
+          key: 'overridepublictraffic',
+          required: false,
+          switch: true,
+          display: {
+            dvSwitchEnabled: true
+          }
+        },
+        {
+          title: 'label.override.guest.traffic',
+          key: 'overrideguesttraffic',
+          required: false,
+          switch: true,
+          display: {
+            dvSwitchEnabled: true
+          }
+        },
+        {
+          title: 'label.cisco.nexus1000v.ip.address',
+          key: 'vsmipaddress',
+          placeHolder: 'Please enter Nexus 1000v IP Address',
+          required: false,
+          display: {
+            vSwitchEnabled: true
+          }
+        },
+        {
+          title: 'label.cisco.nexus1000v.username',
+          key: 'vsmusername',
+          placeHolder: 'Please enter Nexus 1000v Username',
+          required: false,
+          display: {
+            vSwitchEnabled: true
+          }
+        },
+        {
+          title: 'label.cisco.nexus1000v.password',
+          key: 'vsmpassword',
+          placeHolder: 'Please enter Nexus 1000v Password',
+          required: false,
+          display: {
+            vSwitchEnabled: true
+          }
+        }
+      ]
+    },
+    hostFields () {
+      return [
+        {
+          title: 'label.host.name',
+          key: 'hostName',
+          placeHolder: 'Please enter host name',
+          required: true,
+          display: {
+            hypervisor: ['VMware', 'BareMetal', 'Ovm', 'Hyperv', 'KVM', 'XenServer', 'LXC', 'Simulator']
+          }
+        },
+        {
+          title: 'label.username',
+          key: 'hostUserName',
+          placeHolder: 'Please enter host username',
+          required: true,
+          display: {
+            hypervisor: ['VMware', 'BareMetal', 'Ovm', 'Hyperv', 'KVM', 'XenServer', 'LXC', 'Simulator']
+          }
+        },
+        {
+          title: 'label.password',
+          key: 'hostPassword',
+          placeHolder: 'Please enter host password',
+          required: true,
+          password: true,
+          display: {
+            hypervisor: ['VMware', 'BareMetal', 'Ovm', 'Hyperv', 'KVM', 'XenServer', 'LXC', 'Simulator']
+          }
+        },
+        {
+          title: 'label.agent.username',
+          key: 'agentUserName',
+          placeHolder: 'Please enter Agent username',
+          required: false,
+          defaultValue: 'Oracle',
+          display: {
+            hypervisor: 'Ovm'
+          }
+        },
+        {
+          title: 'label.agent.password',
+          key: 'agentPassword',
+          placeHolder: 'Please enter Agent password',
+          required: true,
+          password: true,
+          display: {
+            hypervisor: 'Ovm'
+          }
+        },
+        {
+          title: 'label.tags',
+          key: 'hostTags',
+          placeHolder: 'Please enter host tags',
+          required: false
+        }
+      ]
+    },
+    primaryStorageFields () {
+      return [
+        {
+          title: 'label.name',
+          key: 'primaryStorageName',
+          placeHolder: 'Please enter name',
+          required: true
+        },
+        {
+          title: 'label.scope',
+          key: 'primaryStorageScope',
+          required: false,
+          select: true,
+          options: this.primaryStorageScopes
+        },
+        {
+          title: 'label.protocol',
+          key: 'primaryStorageProtocol',
+          placeHolder: 'Please select option',
+          required: true,
+          select: true,
+          options: this.primaryStorageProtocols
+        },
+        {
+          title: 'label.server',
+          key: 'primaryStorageServer',
+          placeHolder: 'Please enter server',
+          required: true,
+          display: {
+            primaryStorageProtocol: ['nfs', 'iscsi', 'gluster', 'SMB']
+          }
+        },
+        {
+          title: 'label.path',
+          key: 'primaryStoragePath',
+          placeHolder: 'Please enter path',
+          required: true,
+          display: {
+            primaryStorageProtocol: ['nfs', 'SMB', 'SharedMountPoint', 'ocfs2']
+          }
+        },
+        {
+          title: 'label.SR.name',
+          key: 'primaryStorageSRLabel',
+          placeHolder: 'Please enter SR Name-Label',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'PreSetup'
+          }
+        },
+        {
+          title: 'label.target.iqn',
+          key: 'primaryStorageTargetIQN',
+          placeHolder: 'Please enter Target IQN',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'iscsi'
+          }
+        },
+        {
+          title: 'label.LUN.number',
+          key: 'primaryStorageLUN',
+          placeHolder: 'Please enter LUN #',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'iscsi'
+          }
+        },
+        {
+          title: 'label.smb.domain',
+          key: 'primaryStorageSMBDomain',
+          placeHolder: 'Please enter SMB Domain',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'SMB'
+          }
+        },
+        {
+          title: 'label.smb.username',
+          key: 'primaryStorageSMBUsername',
+          placeHolder: 'Please enter SMB Username',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'SMB'
+          }
+        },
+        {
+          title: 'label.smb.password',
+          key: 'primaryStorageSMBPassword',
+          placeHolder: 'Please enter SMB Password',
+          required: true,
+          password: true,
+          display: {
+            primaryStorageProtocol: 'SMB'
+          }
+        },
+        {
+          title: 'label.rados.monitor',
+          key: 'primaryStorageRADOSMonitor',
+          placeHolder: 'Please enter RADOS Monitor',
+          required: false,
+          display: {
+            primaryStorageProtocol: ['rbd']
+          }
+        },
+        {
+          title: 'label.rados.pool',
+          key: 'primaryStorageRADOSPool',
+          placeHolder: 'Please enter RADOS Pool',
+          required: false,
+          display: {
+            primaryStorageProtocol: ['rbd']
+          }
+        },
+        {
+          title: 'label.rados.user',
+          key: 'primaryStorageRADOSUser',
+          placeHolder: 'Please enter RADOS User',
+          required: false,
+          display: {
+            primaryStorageProtocol: ['rbd']
+          }
+        },
+        {
+          title: 'label.rados.secret',
+          key: 'primaryStorageRADOSSecret',
+          placeHolder: 'Please enter RADOS Secret',
+          required: false,
+          display: {
+            primaryStorageProtocol: ['rbd']
+          }
+        },
+        {
+          title: 'label.volgroup',
+          key: 'primaryStorageVolumeGroup',
+          placeHolder: 'Please enter Volume Group',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'clvm'
+          }
+        },
+        {
+          title: 'label.volume',
+          key: 'primaryStorageVolume',
+          placeHolder: 'Please enter Volume',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'gluster'
+          }
+        },
+        {
+          title: 'label.vcenter.datacenter',
+          key: 'primaryStorageVmfsDatacenter',
+          placeHolder: 'Please enter vCenter Datacenter',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'vmfs'
+          }
+        },
+        {
+          title: 'label.vcenter.datastore',
+          key: 'primaryStorageVmfsDatastore',
+          placeHolder: 'Please enter vCenter Datastore',
+          required: true,
+          display: {
+            primaryStorageProtocol: 'vmfs'
+          }
+        },
+        {
+          title: 'label.storage.tags',
+          key: 'primaryStorageTags',
+          placeHolder: 'Please enter storage tags',
+          required: false
+        }
+      ]
+    },
+    secondaryStorageFields () {
+      return [
+        {
+          title: 'label.provider',
+          key: 'secondaryStorageProvider',
+          required: false,
+          select: true,
+          options: this.storageProviders
+        },
+        {
+          title: 'label.name',
+          key: 'secondaryStorageName',
+          required: false,
+          display: {
+            secondaryStorageProvider: ['NFS', 'SMB', 'S3', 'Swift']
+          }
+        },
+        {
+          title: 'label.server',
+          key: 'secondaryStorageServer',
+          required: true,
+          placeHolder: 'Please enter Server',
+          display: {
+            secondaryStorageProvider: ['NFS', 'SMB']
+          }
+        },
+        {
+          title: 'label.path',
+          key: 'secondaryStoragePath',
+          required: true,
+          placeHolder: 'Please enter Path',
+          display: {
+            secondaryStorageProvider: ['NFS', 'SMB']
+          }
+        },
+        {
+          title: 'label.smb.domain',
+          key: 'secondaryStorageSMBDomain',
+          required: true,
+          placeHolder: 'Please enter SMB Domain',
+          display: {
+            secondaryStorageProvider: ['SMB']
+          }
+        },
+        {
+          title: 'label.smb.username',
+          key: 'secondaryStorageSMBUsername',
+          required: true,
+          placeHolder: 'Please enter SMB Username',
+          display: {
+            secondaryStorageProvider: ['SMB']
+          }
+        },
+        {
+          title: 'label.smb.password',
+          key: 'secondaryStorageSMBPassword',
+          required: true,
+          password: true,
+          placeHolder: 'Please enter SMB Password',
+          display: {
+            secondaryStorageProvider: ['SMB']
+          }
+        },
+        {
+          title: 'label.s3.access_key',
+          key: 'secondaryStorageAccessKey',
+          required: true,
+          placeHolder: 'Please enter Access Key',
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.secret_key',
+          key: 'secondaryStorageSecretKey',
+          required: true,
+          placeHolder: 'Please enter Secret Key',
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.bucket',
+          key: 'secondaryStorageBucket',
+          required: true,
+          placeHolder: 'Please enter Bucket',
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.endpoint',
+          key: 'secondaryStorageEndpoint',
+          required: false,
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.use_https',
+          key: 'secondaryStorageHttps',
+          required: false,
+          switch: true,
+          checked: true,
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.connection_timeoutt',
+          key: 'secondaryStorageConnectionTimeout',
+          required: false,
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.max_error_retry',
+          key: 'secondaryStorageMaxError',
+          required: false,
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.socket_timeout',
+          key: 'secondaryStorageSocketTimeout',
+          required: false,
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.create.nfs.secondary.staging.storage',
+          key: 'secondaryStorageNFSStaging',
+          required: false,
+          switch: true,
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.nfs.server',
+          key: 'secondaryStorageNFSServer',
+          required: true,
+          placeHolder: 'Please enter S3 NFS Server',
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.s3.nfs.path',
+          key: 'secondaryStorageNFSPath',
+          required: true,
+          placeHolder: 'Please enter S3 NFS Path',
+          display: {
+            secondaryStorageProvider: ['S3']
+          }
+        },
+        {
+          title: 'label.url',
+          key: 'secondaryStorageURL',
+          required: true,
+          placeHolder: 'Please enter URL',
+          display: {
+            secondaryStorageProvider: ['Swift']
+          }
+        },
+        {
+          title: 'label.account',
+          key: 'secondaryStorageAccount',
+          required: false,
+          display: {
+            secondaryStorageProvider: ['Swift']
+          }
+        },
+        {
+          title: 'label.username',
+          key: 'secondaryStorageUsername',
+          required: false,
+          display: {
+            secondaryStorageProvider: ['Swift']
+          }
+        },
+        {
+          title: 'label.key',
+          key: 'secondaryStorageKey',
+          required: false,
+          display: {
+            secondaryStorageProvider: ['Swift']
+          }
+        }
+      ]
+    }
+  },
+  data () {
+    return {
+      physicalNetworks: null,
+      currentHypervisor: null,
+      primaryStorageScopes: [],
+      primaryStorageProtocols: [],
+      storageProviders: [],
+      currentStep: 0,
+      options: ['primaryStorageScope', 'primaryStorageProtocol', 'provider']
+    }
+  },
+  mounted () {
+    if (this.stepChild && this.stepChild !== '') {
+      this.currentStep = this.steps.findIndex(item => item.fromKey === this.stepChild)
+    }
+    if (this.prefillContent.hypervisor.value === 'BareMetal') {
+      this.$emit('nextPressed')
+    } else {
+      this.fetchConfigurationSwitch()
+      this.options.forEach(this.fetchOptions)
+      if (!this.prefillContent.lastHypervisor) {
+        this.$emit('fieldsChanged', {
+          lastHypervisor: this.prefillContent.hypervisor
+        })
+      } else if (this.prefillContent.lastHypervisor.value !== this.prefillContent.hypervisor.value) {
+        this.$emit('fieldsChanged', {
+          lastHypervisor: this.prefillContent.hypervisor,
+          primaryStorageProtocol: null,
+          primaryStorageScope: null
+        })
+      }
+    }
+  },
+  methods: {
+    nextPressed () {
+      if (this.currentStep === this.steps.length - 1) {
+        this.$emit('nextPressed')
+      } else {
+        this.currentStep++
+      }
+    },
+    handleBack (e) {
+      if (this.currentStep === 0) {
+        this.$emit('backPressed')
+      } else {
+        this.currentStep--
+      }
+    },
+    fieldsChanged (changed) {
+      this.$emit('fieldsChanged', changed)
+    },
+    fetchOptions (name) {
+      switch (name) {
+        case 'primaryStorageScope':
+          this.fetchScope()
+          break
+        case 'primaryStorageProtocol':
+          this.fetchProtocol()
+          break
+        case 'provider':
+          this.fetchProvider()
+          break
+        default:
+          break
+      }
+    },
+    fetchScope () {
+      const hypervisor = this.prefillContent.hypervisor ? this.prefillContent.hypervisor.value : null
+      const scope = []
+      if (['KVM', 'VMware', 'Hyperv'].includes(hypervisor)) {
+        scope.push({
+          id: 'zone',
+          description: this.$t('label.zone.wide')
+        })
+        scope.push({
+          id: 'cluster',
+          description: this.$t('label.cluster')
+        })
+      } else {
+        scope.push({
+          id: 'cluster',
+          description: this.$t('label.cluster')
+        })
+      }
+      this.primaryStorageScopes = scope
+      this.$forceUpdate()
+    },
+    fetchProtocol () {
+      const hypervisor = this.prefillContent.hypervisor ? this.prefillContent.hypervisor.value : null
+      const protocols = []
+      if (hypervisor === 'KVM') {
+        protocols.push({
+          id: 'nfs',
+          description: 'nfs'
+        })
+        protocols.push({
+          id: 'SharedMountPoint',
+          description: 'SharedMountPoint'
+        })
+        protocols.push({
+          id: 'rbd',
+          description: 'RBD'
+        })
+        protocols.push({
+          id: 'clvm',
+          description: 'CLVM'
+        })
+        protocols.push({
+          id: 'gluster',
+          description: 'Gluster'
+        })
+      } else if (hypervisor === 'XenServer') {
+        protocols.push({
+          id: 'nfs',
+          description: 'nfs'
+        })
+        protocols.push({
+          id: 'PreSetup',
+          description: 'PreSetup'
+        })
+        protocols.push({
+          id: 'iscsi',
+          description: 'iscsi'
+        })
+      } else if (hypervisor === 'VMware') {
+        protocols.push({
+          id: 'nfs',
+          description: 'nfs'
+        })
+        protocols.push({
+          id: 'vmfs',
+          description: 'vmfs'
+        })
+      } else if (hypervisor === 'Hyperv') {
+        protocols.push({
+          id: 'SMB',
+          description: 'SMB/CIFS'
+        })
+      } else if (hypervisor === 'Ovm') {
+        protocols.push({
+          id: 'nfs',
+          description: 'nfs'
+        })
+        protocols.push({
+          id: 'ocfs2',
+          description: 'ocfs2'
+        })
+      } else if (hypervisor === 'LXC') {
+        protocols.push({
+          id: 'nfs',
+          description: 'nfs'
+        })
+        protocols.push({
+          id: 'SharedMountPoint',
+          description: 'SharedMountPoint'
+        })
+        protocols.push({
+          id: 'rbd',
+          description: 'RBD'
+        })
+      } else {
+        protocols.push({
+          id: 'nfs',
+          description: 'nfs'
+        })
+      }
+
+      this.primaryStorageProtocols = protocols
+      this.$forceUpdate()
+    },
+    async fetchConfigurationSwitch () {
+      const hypervisor = this.prefillContent.hypervisor ? this.prefillContent.hypervisor.value : null
+      this.$emit('fieldsChanged', { dvSwitchEnabled: { value: false } })
+      this.$emit('fieldsChanged', { vSwitchEnabled: { value: false } })
+      if (hypervisor && hypervisor === 'VMware') {
+        await this.fetchNexusSwitchConfig()
+        await this.fetchDvSwitchConfig()
+      }
+    },
+    fetchNexusSwitchConfig () {
+      api('listConfigurations', { name: 'vmware.use.nexus.vswitch' }).then(json => {
+        let vSwitchEnabled = false
+        if (json.listconfigurationsresponse.configuration[0].value) {
+          vSwitchEnabled = true
+        }
+        this.$emit('fieldsChanged', { vSwitchEnabled: { value: vSwitchEnabled } })
+      })
+    },
+    fetchDvSwitchConfig () {
+      let dvSwitchEnabled = false
+      api('listConfigurations', { name: 'vmware.use.dvswitch' }).then(json => {
+        if (json.listconfigurationsresponse.configuration[0].value) {
+          dvSwitchEnabled = true
+        }
+        this.$emit('fieldsChanged', { dvSwitchEnabled: { value: dvSwitchEnabled } })
+      })
+    },
+    fetchProvider () {
+      const storageProviders = []
+      api('listImageStores', { provider: 'S3' }).then(json => {
+        const s3stores = json.listimagestoresresponse.imagestore
+        if (s3stores != null && s3stores.length > 0) {
+          storageProviders.push({ id: 'S3', description: 'S3' })
+        } else {
+          storageProviders.push({ id: 'NFS', description: 'NFS' })
+          storageProviders.push({ id: 'SMB', description: 'SMB/CIFS' })
+          storageProviders.push({ id: 'S3', description: 'S3' })
+          storageProviders.push({ id: 'Swift', description: 'Swift' })
+        }
+        this.storageProviders = storageProviders
+        this.$forceUpdate()
+      })
+    },
+    submitLaunchZone () {
+      this.$emit('submitLaunchZone')
+    }
+  }
+}
+
+</script>
diff --git a/ui/src/views/infra/zone/ZoneWizardLaunchZone.vue b/ui/src/views/infra/zone/ZoneWizardLaunchZone.vue
new file mode 100644
index 00000000000..70052924550
--- /dev/null
+++ b/ui/src/views/infra/zone/ZoneWizardLaunchZone.vue
@@ -0,0 +1,2168 @@
+// 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 v-if="!isLaunchZone">
+    <a-card class="ant-form-text card-waiting-launch">
+      <a-icon
+        type="check-circle"
+        theme="twoTone"
+        twoToneColor="#52c41a"
+        style="font-size: 20px;"/>
+      {{ $t(description.waiting) }}
+    </a-card>
+    <div class="form-action">
+      <a-button class="button-prev" @click="handleBack">
+        {{ $t('label.previous') }}
+      </a-button>
+      <a-button class="button-next" type="primary" @click="handleSubmit">
+        <a-icon type="rocket" /> {{ $t('label.launch.zone') }}
+      </a-button>
+    </div>
+  </div>
+  <div v-else>
+    <a-card class="ant-form-text card-launch-description">
+      {{ $t(description.launching) }}
+    </a-card>
+    <a-card
+      id="launch-content"
+      class="ant-form-text card-launch-content">
+      <a-steps
+        size="small"
+        direction="vertical"
+        :current="currentStep"
+      >
+        <a-step
+          v-for="(step, index) in steps"
+          :key="index"
+          :title="$t(step.title)"
+          :status="step.status">
+          <a-icon v-if="step.status===status.PROCESS" type="loading" slot="icon" />
+          <a-icon v-else-if="step.status===status.FAILED" type="close-circle" slot="icon" />
+          <a-card
+            slot="description"
+            class="step-error"
+            v-if="step.status===status.FAILED"
+          >
+            <div><strong>{{ $t('error.something.went.wrong.please.correct.the.following') }}:</strong></div>
+            <div>{{ messageError }}</div>
+          </a-card>
+        </a-step>
+      </a-steps>
+    </a-card>
+    <div class="form-action">
+      <a-button
+        v-if="processStatus==='finish'"
+        class="button-next"
+        type="primary"
+        icon="play-circle"
+        :loading="loading"
+        @click="enableZoneAction"
+      >{{ $t('label.enable.zone') }}</a-button>
+      <a-button
+        v-if="processStatus==='error'"
+        class="button-next"
+        type="primary"
+        @click="handleFixesError"
+      >{{ $t('label.fix.errors') }}</a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+
+const BASIC_ZONE = 'Basic'
+const ADVANCED_ZONE = 'Advanced'
+const STATUS_PROCESS = 'process'
+const STATUS_FINISH = 'finish'
+const STATUS_FAILED = 'error'
+
+export default {
+  props: {
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    launchZone: {
+      type: Boolean,
+      default: false
+    },
+    launchData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    stepChild: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      description: {
+        waiting: 'message.launch.zone',
+        launching: 'message.please.wait.while.zone.is.being.created'
+      },
+      isLaunchZone: false,
+      processStatus: null,
+      messageError: '',
+      currentStep: 0,
+      advZoneConfiguredVirtualRouterCount: 0,
+      steps: [],
+      stepData: {},
+      status: {
+        PROCESS: STATUS_PROCESS,
+        FAILED: STATUS_FAILED,
+        FINISH: STATUS_FINISH
+      },
+      loading: false
+    }
+  },
+  updated () {
+    const launchElm = this.$el.querySelector('#launch-content')
+    if (launchElm) {
+      launchElm.scrollTop = launchElm.scrollHeight
+    }
+  },
+  computed: {
+    zoneType () {
+      return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : null
+    },
+    isBasicZone () {
+      return this.zoneType === BASIC_ZONE
+    },
+    isAdvancedZone () {
+      return this.zoneType === ADVANCED_ZONE
+    },
+    isDedicated () {
+      return this.prefillContent.isDedicated ? this.prefillContent.isDedicated.value : false
+    },
+    sgEnabled () {
+      return this.prefillContent.securityGroupsEnabled ? this.prefillContent.securityGroupsEnabled.value : false
+    },
+    havingNetscaler () {
+      return this.prefillContent.networkOfferingSelected ? this.prefillContent.networkOfferingSelected.havingNetscaler : false
+    },
+    havingSG () {
+      return this.prefillContent.networkOfferingSelected ? this.prefillContent.networkOfferingSelected.havingSG : false
+    },
+    havingEIP () {
+      return this.prefillContent.networkOfferingSelected ? this.prefillContent.networkOfferingSelected.havingEIP : false
+    },
+    havingELB () {
+      return this.prefillContent.networkOfferingSelected ? this.prefillContent.networkOfferingSelected.havingELB : false
+    },
+    selectedBaremetalProviders () {
+      return this.prefillContent.networkOfferingSelected ? this.prefillContent.networkOfferingSelected.selectedBaremetalProviders : []
+    }
+  },
+  mounted () {
+    if (this.launchZone) {
+      this.stepData = this.launchData
+      if (this.stepChild === 'publicTraffic') {
+        this.stepData.returnedPublicTraffic = []
+        this.stepData.stepMove = this.stepData.stepMove.filter(item => item.indexOf('createPublicVlanIpRange') === -1)
+      }
+      if (this.stepChild === 'storageTraffic') {
+        this.stepData.tasks = []
+        this.stepData.stepMove = this.stepData.stepMove.filter(item => item.indexOf('createStorageNetworkIpRange') === -1)
+      }
+      this.handleSubmit()
+    }
+  },
+  methods: {
+    addStep (title, step) {
+      this.steps.push({
+        index: this.currentStep,
+        title: title,
+        step: step,
+        status: STATUS_PROCESS
+      })
+      this.setStepStatus(STATUS_PROCESS)
+    },
+    setStepStatus (status) {
+      const index = this.steps.findIndex(step => step.index === this.currentStep)
+      this.steps[index].status = status
+    },
+    handleBack (e) {
+      this.$emit('backPressed')
+    },
+    async handleSubmit () {
+      this.isLaunchZone = true
+      this.advZoneConfiguredVirtualRouterCount = 0
+      this.processStatus = STATUS_PROCESS
+      if (!this.stepData.stepMove) {
+        this.stepData.stepMove = []
+      }
+      await this.stepAddZone()
+    },
+    handleFixesError () {
+      const stepError = this.steps.filter(step => step.index === this.currentStep)
+      if (stepError && stepError.length > 0) {
+        const step = stepError[0].step
+        this.$emit('stepError', step, this.stepData)
+      }
+    },
+    trafficLabelParam (trafficTypeID, physicalNetworkID) {
+      const hypervisor = this.prefillContent.hypervisor.value
+      physicalNetworkID = this.isAdvancedZone ? physicalNetworkID : 0
+      let physicalNetwork = []
+      let trafficConfig = null
+      if (this.prefillContent.physicalNetworks) {
+        physicalNetwork = this.prefillContent.physicalNetworks[0].traffics.filter(traffic => traffic.type === trafficTypeID)
+        trafficConfig = physicalNetwork.length > 0 ? physicalNetwork[0] : null
+      }
+      let trafficLabel
+      if (trafficConfig !== null) {
+        if ('label' in trafficConfig) {
+          trafficLabel = trafficConfig.label
+        } else {
+          trafficLabel = ''
+
+          if ('vSwitchName' in trafficConfig) {
+            trafficLabel += trafficConfig.vSwitchName
+          }
+          if ('vlanId' in trafficConfig) {
+            if (trafficLabel.length > 0) {
+              trafficLabel += ','
+            }
+            trafficLabel += trafficConfig.vlanId
+          }
+          if ('vSwitchType' in trafficConfig) {
+            if (trafficLabel.length > 0) {
+              trafficLabel += ','
+            }
+            trafficLabel += trafficConfig.vSwitchType
+          }
+
+          if (trafficLabel.length === 0) {
+            trafficLabel = null
+          } else if (trafficLabel.length >= 1) {
+            if (trafficLabel.charAt(trafficLabel.length - 1) === ',') {
+              trafficLabel = trafficLabel.substring(0, trafficLabel.length - 1)
+            }
+          }
+        }
+      }
+
+      let hypervisorAttr
+      switch (hypervisor) {
+        case 'XenServer':
+          hypervisorAttr = 'xennetworklabel'
+          break
+        case 'KVM':
+          hypervisorAttr = 'kvmnetworklabel'
+          break
+        case 'VMware':
+          hypervisorAttr = 'vmwarenetworklabel'
+          break
+        case 'Hyperv':
+          hypervisorAttr = 'hypervnetworklabel'
+          break
+        case 'BareMetal':
+          hypervisorAttr = 'baremetalnetworklabel'
+          break
+        case 'Ovm':
+          hypervisorAttr = 'ovmnetworklabel'
+          break
+        case 'LXC':
+          hypervisorAttr = 'lxcnetworklabel'
+          break
+        case 'Ovm3':
+          hypervisorAttr = 'ovm3networklabel'
+          break
+      }
+      const trafficLabelParams = {}
+      if (trafficLabel) {
+        trafficLabelParams[hypervisorAttr] = trafficLabel
+      }
+
+      return trafficLabelParams
+    },
+    async stepAddZone () {
+      this.addStep('message.creating.zone', 'stepAddZone')
+
+      const guestcidraddress = this.prefillContent.guestcidraddress ? this.prefillContent.guestcidraddress.value : null
+      const params = {}
+      params.networktype = this.zoneType
+
+      if (this.isBasicZone) {
+        if (this.havingSG) {
+          params.securitygroupenabled = true
+        } else {
+          params.securitygroupenabled = false
+        }
+      } else {
+        if (!this.sgEnabled) {
+          params.securitygroupenabled = false
+          if (guestcidraddress != null && guestcidraddress.length > 0) {
+            params.guestcidraddress = guestcidraddress
+          }
+        } else {
+          params.securitygroupenabled = true
+        }
+      }
+      params.name = this.prefillContent.name.value
+      params.localstorageenabled = this.prefillContent.localstorageenabled ? this.prefillContent.localstorageenabled.value : false
+      params.dns1 = this.prefillContent.ipv4Dns1.value
+      params.dns2 = this.prefillContent.ipv4Dns2 ? this.prefillContent.ipv4Dns2.value : null
+      params.ip6dns1 = this.prefillContent.ipv6Dns1 ? this.prefillContent.ipv6Dns1.value : null
+      params.ip6dns2 = this.prefillContent.ipv6Dns1 ? this.prefillContent.ipv6Dns1.value : null
+      params.internaldns1 = this.prefillContent.internalDns1 ? this.prefillContent.internalDns1.value : null
+      params.internaldns2 = this.prefillContent.internalDns2 ? this.prefillContent.internalDns2.value : null
+      params.domain = this.prefillContent.networkDomain ? this.prefillContent.networkDomain.value : null
+
+      try {
+        if (!this.stepData.stepMove.includes('createZone')) {
+          this.stepData.zoneReturned = await this.createZone(params)
+          this.stepData.stepMove.push('createZone')
+        }
+        await this.stepDedicateZone()
+        await this.stepAddPhysicalNetworks()
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    async stepDedicateZone () {
+      if (!this.isDedicated || this.stepData.stepMove.includes('dedicateZone')) {
+        return
+      }
+
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.dedicate.zone', 'dedicateZone')
+
+      const params = {}
+      params.zoneid = this.stepData.zoneReturned.id
+      params.domain = this.prefillContent.domainId ? this.prefillContent.domainId.value : null
+      params.account = this.prefillContent.account ? this.prefillContent.account.value : null
+
+      try {
+        await this.dedicateZone(params)
+        this.stepData.stepMove.push('dedicateZone')
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    async stepAddPhysicalNetworks () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.creating.physical.networks', 'physicalNetwork')
+
+      const params = {}
+      params.zoneid = this.stepData.zoneReturned.id
+
+      if (this.isBasicZone) {
+        const requestedTrafficTypeCount = this.prefillContent.physicalNetworks[0].traffics.length
+        this.stepData.requestedTrafficTypeCount = requestedTrafficTypeCount
+        this.stepData.returnedTrafficTypes = this.stepData.returnedTrafficTypes ? this.stepData.returnedTrafficTypes : []
+        this.stepData.physicalNetworkReturned = this.stepData.physicalNetworkReturned ? this.stepData.physicalNetworkReturned : {}
+
+        if (this.prefillContent.physicalNetworks && this.prefillContent.physicalNetworks.length > 0) {
+          params.name = this.prefillContent.physicalNetworks[0].name
+        } else {
+          params.name = 'PhysicalNetworkInBasicZone'
+        }
+
+        try {
+          if (!this.stepData.stepMove.includes('createPhysicalNetwork')) {
+            const physicalNetworkResult = await this.createPhysicalNetwork(params)
+            this.stepData.physicalNetworkReturned = physicalNetworkResult.jobresult.physicalnetwork
+            this.stepData.stepMove.push('createPhysicalNetwork')
+          }
+
+          if (!this.stepData.stepMove.includes('Guest')) {
+            const guestTrafficResult = await this.addTrafficType('Guest')
+            this.stepData.returnedTrafficTypes.push(guestTrafficResult.jobresult.traffictype)
+            this.stepData.stepMove.push('Guest')
+          }
+
+          if (!this.stepData.stepMove.includes('Management')) {
+            const managementTrafficResult = await this.addTrafficType('Management')
+            this.stepData.returnedTrafficTypes.push(managementTrafficResult.jobresult.traffictype)
+            this.stepData.stepMove.push('Management')
+          }
+
+          if (!this.stepData.stepMove.includes('Storage')) {
+            // addTrafficType Storage
+            const storageEx = this.prefillContent.physicalNetworks[0].traffics.filter(traffic => traffic.type === 'storage')
+            if (storageEx && storageEx.length > 0) {
+              const storageTrafficResult = await this.addTrafficType('Storage')
+              this.stepData.returnedTrafficTypes.push(storageTrafficResult.jobresult.traffictype)
+              this.stepData.stepMove.push('Storage')
+            }
+          }
+
+          if (!this.stepData.stepMove.includes('Public')) {
+            if (this.havingSG && this.havingEIP && this.havingELB) {
+              const publicTrafficResult = await this.addTrafficType('Public')
+              this.stepData.returnedTrafficTypes.push(publicTrafficResult.jobresult.traffictype)
+            }
+            this.stepData.stepMove.push('Public')
+          }
+
+          if (this.stepData.returnedTrafficTypes.length === requestedTrafficTypeCount) {
+            this.stepData.physicalNetworkReturned.returnedTrafficTypes = this.stepData.returnedTrafficTypes
+            await this.stepConfigurePhysicalNetwork()
+          }
+        } catch (e) {
+          this.messageError = e
+          this.processStatus = STATUS_FAILED
+          this.setStepStatus(STATUS_FAILED)
+        }
+      } else {
+        this.stepData.physicalNetworksReturned = this.stepData.physicalNetworksReturned ? this.stepData.physicalNetworksReturned : []
+        this.stepData.physicalNetworkItem = this.stepData.physicalNetworkItem ? this.stepData.physicalNetworkItem : {}
+        let physicalNetworkReturned = {}
+
+        if (this.stepData.physicalNetworksReturned.length === this.prefillContent.physicalNetworks.length) {
+          await this.stepConfigurePhysicalNetwork()
+          return
+        }
+
+        for (let index = 0; index < this.prefillContent.physicalNetworks.length; index++) {
+          const physicalNetwork = this.prefillContent.physicalNetworks[index]
+          params.name = physicalNetwork.name
+
+          if (physicalNetwork.isolationMethod) {
+            params.isolationmethods = physicalNetwork.isolationMethod
+          }
+
+          try {
+            if (!this.stepData.stepMove.includes('createPhysicalNetwork' + index)) {
+              const physicalNetworkResult = await this.createPhysicalNetwork(params)
+              physicalNetworkReturned = physicalNetworkResult.jobresult.physicalnetwork
+              this.stepData.physicalNetworkReturned = physicalNetworkReturned
+              this.stepData.physicalNetworkItem['createPhysicalNetwork' + index] = physicalNetworkReturned
+              this.stepData.stepMove.push('createPhysicalNetwork' + index)
+            } else {
+              this.stepData.physicalNetworkReturned = this.stepData.physicalNetworkItem['createPhysicalNetwork' + index]
+            }
+          } catch (e) {
+            this.messageError = e
+            this.processStatus = STATUS_FAILED
+            this.setStepStatus(STATUS_FAILED)
+            break
+          }
+
+          let advCountTrafficReturn = 0
+
+          for (let key = 0; key < physicalNetwork.traffics.length; key++) {
+            const traffic = physicalNetwork.traffics[key]
+
+            try {
+              if (!this.stepData.stepMove.includes('addTrafficType' + index + key)) {
+                if (traffic.type === 'public') {
+                  await this.addTrafficType('Public')
+                } else if (traffic.type === 'management') {
+                  await this.addTrafficType('Management')
+                } else if (traffic.type === 'guest') {
+                  await this.addTrafficType('Guest')
+                } else if (traffic.type === 'storage') {
+                  await this.addTrafficType('Storage')
+                }
+                this.stepData.stepMove.push('addTrafficType' + index + key)
+              }
+
+              advCountTrafficReturn++
+            } catch (e) {
+              this.messageError = e
+              this.processStatus = STATUS_FAILED
+              this.setStepStatus(STATUS_FAILED)
+              break
+            }
+
+            if (advCountTrafficReturn === physicalNetwork.traffics.length) {
+              if (Object.keys(physicalNetworkReturned).length > 0) {
+                this.stepData.physicalNetworksReturned.push(physicalNetworkReturned)
+              }
+
+              if (this.stepData.physicalNetworksReturned.length === this.prefillContent.physicalNetworks.length) {
+                await this.stepConfigurePhysicalNetwork()
+              }
+            }
+          }
+        }
+      }
+    },
+    async stepConfigurePhysicalNetwork () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.configuring.physical.networks', 'physicalNetwork')
+
+      if (this.isBasicZone) {
+        const updPhysicalParams = {}
+        updPhysicalParams.state = 'Enabled'
+        updPhysicalParams.id = this.stepData.physicalNetworkReturned.id
+
+        try {
+          if (!this.stepData.stepMove.includes('updatePhysicalNetwork')) {
+            await this.updatePhysicalNetwork(updPhysicalParams)
+            this.stepData.stepMove.push('updatePhysicalNetwork')
+          }
+
+          if (!this.stepData.stepMove.includes('basicVirtualRouter')) {
+            const listNetworkParams = {}
+            listNetworkParams.name = 'VirtualRouter'
+            listNetworkParams.physicalNetworkId = this.stepData.physicalNetworkReturned.id
+
+            const providerId = await this.listNetworkServiceProviders(listNetworkParams)
+            const virtualRouterElementId = await this.listVirtualRouterElements(providerId)
+            await this.configureVirtualRouterElement(virtualRouterElementId)
+            await this.updateNetworkServiceProvider(providerId)
+            this.stepData.stepMove.push('basicVirtualRouter')
+          }
+
+          for (let i = 0; i < this.selectedBaremetalProviders.length; i++) {
+            if (!this.stepData.stepMove.includes('basicVirtualRouter' + i)) {
+              const listParams = {}
+              listParams.name = this.selectedBaremetalProviders[i]
+              listParams.physicalNetworkId = this.stepData.physicalNetworkReturned.id
+
+              const providerId = await this.listNetworkServiceProviders(listParams, 'BaremetalProvider')
+              if (providerId !== null) {
+                await this.updateNetworkServiceProvider(providerId)
+              }
+              this.stepData.stepMove.push('basicVirtualRouter' + i)
+            }
+          }
+
+          // need to Enable security group provider first
+          if (this.havingSG) {
+            await this.stepEnableSecurityGroupProvider()
+          } else {
+            await this.stepAddNetscalerProvider()
+          }
+        } catch (e) {
+          this.messageError = e
+          this.processStatus = STATUS_FAILED
+          this.setStepStatus(STATUS_FAILED)
+        }
+      } else if (this.isAdvancedZone) {
+        for (let index = 0; index < this.stepData.physicalNetworksReturned.length; index++) {
+          const physicalNetwork = this.stepData.physicalNetworksReturned[index]
+
+          if (!this.stepData.stepMove.includes('advUpdatePhysicalNetwork' + index)) {
+            const updPhysicalParams = {}
+            updPhysicalParams.state = 'Enabled'
+            updPhysicalParams.id = physicalNetwork.id
+
+            try {
+              await this.updatePhysicalNetwork(updPhysicalParams)
+              this.stepData.stepMove.push('advUpdatePhysicalNetwork' + index)
+            } catch (e) {
+              this.messageError = e
+              this.processStatus = STATUS_FAILED
+              this.setStepStatus(STATUS_FAILED)
+              break
+            }
+          }
+
+          // ***** Virtual Router ***** (begin) *****
+          if (!this.stepData.stepMove.includes('advVirtualRouter' + index)) {
+            const listParams = {}
+            listParams.name = 'VirtualRouter'
+            listParams.physicalNetworkId = physicalNetwork.id
+
+            try {
+              const providerId = await this.listNetworkServiceProviders(listParams)
+              const elementId = await this.listVirtualRouterElements(providerId)
+              await this.configureVirtualRouterElement(elementId)
+              await this.updateNetworkServiceProvider(providerId)
+              this.stepData.stepMove.push('advVirtualRouter' + index)
+            } catch (e) {
+              this.messageError = e
+              this.processStatus = STATUS_FAILED
+              this.setStepStatus(STATUS_FAILED)
+              break
+            }
+          }
+
+          this.advZoneConfiguredVirtualRouterCount++
+
+          // ***** Virtual Router ***** (end) *****
+
+          // ***** Ovs ***** (begin) *****
+          this.configOvs(physicalNetwork)
+          // ***** Ovs ***** (end) *****
+          // ***** Internal LB ***** (begin) *****
+          this.configInternalLBVM(physicalNetwork)
+          // ***** Internal LB ***** (end) *****
+
+          try {
+            // Advanced SG-disabled zone
+            if (!this.sgEnabled) {
+              // ***** VPC Virtual Router ***** (begin) *****
+              await this.configVpcVirtualRouter(physicalNetwork)
+              // ***** VPC Virtual Router ***** (end) *****
+            } else {
+              this.stepData.physicalNetworkReturned = physicalNetwork
+              await this.stepEnableSecurityGroupProvider()
+            }
+          } catch (e) {
+            this.messageError = e
+            this.processStatus = STATUS_FAILED
+            this.setStepStatus(STATUS_FAILED)
+            break
+          }
+
+          if (this.advZoneConfiguredVirtualRouterCount === this.stepData.physicalNetworksReturned.length) {
+            if (!this.sgEnabled) {
+              await this.stepAddPod()
+            } else {
+              await this.stepAddGuestNetwork()
+            }
+          }
+        }
+      }
+    },
+    async configOvs (physicalNetwork) {
+      if (this.stepData.stepMove.includes('configOvs')) {
+        return
+      }
+
+      const listParams = {}
+      listParams.name = 'Ovs'
+      listParams.physicalNetworkId = physicalNetwork.id
+
+      const ovsProviderId = await this.listNetworkServiceProviders(listParams, 'ovsProvider')
+      if (ovsProviderId !== null) {
+        const ovsElementId = await this.listOvsElements(ovsProviderId)
+        if (ovsElementId != null) {
+          await this.configureOvsElement(ovsElementId)
+          await this.updateNetworkServiceProvider(ovsProviderId)
+        }
+      }
+
+      this.stepData.stepMove.push('configOvs')
+    },
+    async configInternalLBVM (physicalNetwork) {
+      if (this.stepData.stepMove.includes('configInternalLBVM')) {
+        return
+      }
+
+      const listParams = {}
+      listParams.name = 'Internallbvm'
+      listParams.physicalNetworkId = physicalNetwork.id
+
+      const internalLbProviderId = await this.listNetworkServiceProviders(listParams, 'configInternalLBVM')
+      if (internalLbProviderId !== null) {
+        const internalLbElementId = await this.listInternalLoadBalancerElements(internalLbProviderId)
+        if (internalLbElementId !== null) {
+          await this.configureInternalLoadBalancerElement(internalLbElementId)
+          await this.updateNetworkServiceProvider(internalLbProviderId)
+        }
+      }
+
+      this.stepData.stepMove.push('configInternalLBVM')
+    },
+    async configVpcVirtualRouter (physicalNetwork) {
+      const listParams = {}
+      listParams.name = 'VpcVirtualRouter'
+      listParams.physicalNetworkId = physicalNetwork.id
+
+      try {
+        if (!this.stepData.stepMove.includes('configVpcVirtualRouter')) {
+          const providerId = await this.listNetworkServiceProviders(listParams)
+          const elementId = await this.listVirtualRouterElements(providerId)
+          await this.configureVirtualRouterElement(elementId)
+          await this.updateNetworkServiceProvider(providerId)
+
+          this.stepData.stepMove.push('configVpcVirtualRouter')
+        }
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    async stepAddNetscalerProvider () {
+      if (this.havingNetscaler) {
+        this.setStepStatus(STATUS_FINISH)
+        this.currentStep++
+        this.addStep('message.adding.Netscaler.provider', 'netscaler')
+
+        const params = {}
+        params.name = 'Netscaler'
+        params.physicalnetworkid = this.stepData.physicalNetworkReturned.id
+
+        try {
+          if (!this.stepData.stepMove.includes('addNetworkServiceProvider')) {
+            const addResult = await this.addNetworkServiceProvider(params)
+            this.stepData.netscalerProviderReturned = addResult.jobresult.networkserviceprovider
+            this.stepData.stepMove.push('addNetworkServiceProvider')
+          }
+          await this.stepAddNetscalerDevice()
+        } catch (e) {
+          this.messageError = e
+          this.processStatus = STATUS_FAILED
+          this.setStepStatus(STATUS_FAILED)
+        }
+      } else {
+        await this.stepAddGuestNetwork()
+      }
+    },
+    async stepAddNetscalerDevice () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.adding.Netscaler.device', 'netscaler')
+
+      const params = {}
+      params.physicalnetworkid = this.stepData.physicalNetworkReturned.id
+      params.username = this.prefillContent.netscalerUsername ? this.prefillContent.netscalerUsername.value : null
+      params.password = this.prefillContent.netscalerPassword ? this.prefillContent.netscalerPassword.value : null
+      params.networkdevicetype = this.prefillContent.netscalerType ? this.prefillContent.netscalerType.value : null
+      params.gslbprovider = this.prefillContent.gslbprovider ? this.prefillContent.gslbprovider.value : false
+      params.gslbproviderpublicip = this.prefillContent.gslbproviderpublicip ? this.prefillContent.gslbproviderpublicip.value : null
+      params.gslbproviderprivateip = this.prefillContent.gslbproviderprivateip ? this.prefillContent.gslbproviderprivateip.value : null
+
+      const url = []
+      const ip = this.prefillContent.netscalerIp.value
+      url.push('https://' + ip)
+      let isQuestionMarkAdded = false
+      const publicInterface = this.prefillContent.publicinterface ? this.prefillContent.publicinterface.value : null
+      if (publicInterface != null && publicInterface.length > 0) {
+        if (!isQuestionMarkAdded) {
+          url.push('?')
+          isQuestionMarkAdded = true
+        } else {
+          url.push('&')
+        }
+        url.push('publicinterface=' + publicInterface)
+      }
+
+      const privateInterface = this.prefillContent.privateinterface ? this.prefillContent.privateinterface.value : null
+      if (privateInterface != null && privateInterface.length > 0) {
+        if (!isQuestionMarkAdded) {
+          url.push('?')
+          isQuestionMarkAdded = true
+        } else {
+          url.push('&')
+        }
+        url.push('privateinterface=' + publicInterface)
+      }
+
+      const numretries = this.prefillContent.numretries ? this.prefillContent.numretries.value : null
+      if (numretries != null && numretries.length > 0) {
+        if (!isQuestionMarkAdded) {
+          url.push('?')
+          isQuestionMarkAdded = true
+        } else {
+          url.push('&')
+        }
+        url.push('numretries=' + numretries)
+      }
+
+      const capacity = this.prefillContent.capacity ? this.prefillContent.capacity.value : null
+      if (capacity != null && capacity.length > 0) {
+        if (!isQuestionMarkAdded) {
+          url.push('?')
+          isQuestionMarkAdded = true
+        } else {
+          url.push('&')
+        }
+        url.push('lbdevicecapacity=' + capacity)
+      }
+
+      params.url = encodeURIComponent(url.join(''))
+
+      try {
+        if (!this.stepData.stepMove.includes('addNetscalerLoadBalancer')) {
+          const addResult = await this.addNetscalerLoadBalancer(params)
+          this.stepData.netscalerProviderReturned.netScalerLoadBalancer = addResult.jobresult.netscalerloadbalancer
+          this.stepData.stepMove.push('addNetscalerLoadBalancer')
+        }
+        if (!this.stepData.stepMove.includes('netUpdateNetwork')) {
+          await this.updateNetworkServiceProvider(this.stepData.netscalerProviderReturned.id, 'netscalerProvider')
+          this.stepData.stepMove.push('netUpdateNetwork')
+        }
+        await this.stepAddGuestNetwork()
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    async stepAddPod () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.creating.pod', 'pod')
+
+      const params = {}
+      params.zoneId = this.stepData.zoneReturned.id
+      params.name = this.prefillContent.podName ? this.prefillContent.podName.value : null
+      params.gateway = this.prefillContent.podReservedGateway ? this.prefillContent.podReservedGateway.value : null
+      params.netmask = this.prefillContent.podReservedNetmask ? this.prefillContent.podReservedNetmask.value : null
+      params.startIp = this.prefillContent.podReservedStartIp ? this.prefillContent.podReservedStartIp.value : null
+      params.endIp = this.prefillContent.podReservedStopIp ? this.prefillContent.podReservedStopIp.value : null
+
+      try {
+        if (!this.stepData.stepMove.includes('createPod')) {
+          this.stepData.podReturned = await this.createPod(params)
+          this.stepData.stepMove.push('createPod')
+        }
+        await this.stepConfigurePublicTraffic()
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    async stepAddGuestNetwork () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.creating.guest.network', 'guestTraffic')
+
+      const params = {}
+      params.zoneid = this.stepData.zoneReturned.id
+      params.name = 'defaultGuestNetwork'
+      params.displaytext = 'defaultGuestNetwork'
+      params.networkofferingid = this.prefillContent.networkOfferingSelected ? this.prefillContent.networkOfferingSelected.id : null
+
+      if (this.isAdvancedZone && this.sgEnabled) {
+        params.gateway = this.prefillContent.guestGateway ? this.prefillContent.guestGateway.value : null
+        params.netmask = this.prefillContent.guestNetmask ? this.prefillContent.guestNetmask.value : null
+        params.startip = this.prefillContent.guestStartIp ? this.prefillContent.guestStartIp.value : null
+        params.endip = this.prefillContent.guestStopIp ? this.prefillContent.guestStopIp.value : null
+        params.vlan = this.prefillContent.guestVlan ? this.prefillContent.guestVlan.value : null
+      }
+
+      try {
+        if (!this.stepData.stepMove.includes('createNetwork')) {
+          this.stepData.networkReturned = await this.createNetwork(params)
+          this.stepData.stepMove.push('createNetwork')
+        }
+        await this.stepAddPod()
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    async stepConfigurePublicTraffic () {
+      if (
+        (this.isBasicZone &&
+          (this.havingSG && this.havingEIP && this.havingELB)) ||
+        (this.isAdvancedZone && !this.sgEnabled)) {
+        this.setStepStatus(STATUS_FINISH)
+        this.currentStep++
+        this.addStep('message.configuring.public.traffic', 'publicTraffic')
+
+        let stopNow = false
+        this.stepData.returnedPublicTraffic = this.stepData.returnedPublicTraffic ? this.stepData.returnedPublicTraffic : []
+        for (let index = 0; index < this.prefillContent['public-ipranges'].length; index++) {
+          const publicVlanIpRange = this.prefillContent['public-ipranges'][index]
+          let isExisting = false
+
+          this.stepData.returnedPublicTraffic.forEach(publicVlan => {
+            if (publicVlan.vlan === publicVlanIpRange.vlan &&
+              publicVlan.startIp === publicVlanIpRange.startIp &&
+              publicVlan.netmask === publicVlanIpRange.netmask &&
+              publicVlan.gateway === publicVlanIpRange.gateway) {
+              isExisting = true
+              return false
+            }
+          })
+
+          if (isExisting) {
+            continue
+          }
+
+          const params = {}
+          params.zoneId = this.stepData.zoneReturned.id
+          if (publicVlanIpRange.vlan && publicVlanIpRange.vlan.length > 0) {
+            params.vlan = publicVlanIpRange.vlan
+          } else {
+            params.vlan = 'untagged'
+          }
+          params.gateway = publicVlanIpRange.gateway
+          params.netmask = publicVlanIpRange.netmask
+          params.startip = publicVlanIpRange.startIp
+          params.endip = publicVlanIpRange.endIp
+
+          if (this.isBasicZone) {
+            params.forVirtualNetwork = true
+          } else if (this.isAdvancedZone) {
+            if (!this.sgEnabled) {
+              params.forVirtualNetwork = true
+            } else {
+              params.forVirtualNetwork = false
+            }
+          }
+
+          try {
+            if (!this.stepData.stepMove.includes('createPublicVlanIpRange' + index)) {
+              const vlanIpRangeItem = await this.createVlanIpRange(params)
+              this.stepData.returnedPublicTraffic.push(vlanIpRangeItem)
+              this.stepData.stepMove.push('createPublicVlanIpRange' + index)
+            }
+          } catch (e) {
+            this.messageError = e
+            this.processStatus = STATUS_FAILED
+            this.setStepStatus(STATUS_FAILED)
+            stopNow = true
+          }
+
+          if (stopNow) {
+            break
+          }
+        }
+
+        if (stopNow) {
+          return
+        }
+
+        await this.stepConfigureStorageTraffic()
+      } else if (this.isAdvancedZone && this.sgEnabled) {
+        await this.stepConfigureStorageTraffic()
+      } else {
+        if (this.prefillContent.physicalNetworks) {
+          const storageExists = this.prefillContent.physicalNetworks[0].traffics.filter(traffic => traffic.type === 'storage')
+          if (storageExists && storageExists.length > 0) {
+            await this.stepConfigureStorageTraffic()
+          } else {
+            await this.stepConfigureGuestTraffic()
+          }
+        }
+      }
+    },
+    async stepConfigureStorageTraffic () {
+      let targetNetwork = false
+      this.prefillContent.physicalNetworks.forEach(physicalNetwork => {
+        const storageEx = physicalNetwork.traffics.filter(traffic => traffic.type === 'storage')
+        if (storageEx && storageEx.length > 0) {
+          targetNetwork = true
+          return false
+        }
+      })
+
+      if (!targetNetwork) {
+        await this.stepConfigureGuestTraffic()
+        return
+      }
+
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.configuring.storage.traffic', 'storageTraffic')
+
+      this.stepData.tasks = this.stepData.tasks ? this.stepData.tasks : []
+      await this.prefillContent['storage-ipranges'].map(async (storageIpRange, index) => {
+        const params = {}
+        params.vlan = storageIpRange.vlan
+        params.gateway = storageIpRange.gateway
+        params.netmask = storageIpRange.netmask
+        params.startip = storageIpRange.startIp
+        params.endip = storageIpRange.endIp
+        if (!params.vlan || params.vlan.length === 0) {
+          delete params.vlan
+        }
+        params.zoneid = this.stepData.zoneReturned.id
+        params.podid = this.stepData.podReturned.id
+
+        try {
+          if (!this.stepData.stepMove.includes('createStorageNetworkIpRange' + index)) {
+            const createStorageItem = await this.createStorageNetworkIpRange(params)
+            this.stepData.tasks.push(createStorageItem)
+            this.stepData.stepMove.push('createStorageNetworkIpRange' + index)
+          }
+        } catch (e) {
+          this.stepData.tasks.push({
+            error: true,
+            message: e
+          })
+        }
+      })
+
+      const taskTimer = setInterval(() => {
+        const completedTasks = this.stepData.tasks.filter(item => item.complete || item.error)
+        const errorTasks = this.stepData.tasks.filter(item => item.error)
+
+        if (completedTasks.length === this.prefillContent['storage-ipranges'].length) {
+          clearInterval(taskTimer)
+
+          if (errorTasks.length) {
+            this.messageError = 'configureStorageTraffic. Error: ' + errorTasks[0].message
+            this.processStatus = STATUS_FAILED
+            this.setStepStatus(STATUS_FAILED)
+            return
+          }
+
+          this.stepConfigureGuestTraffic()
+          return
+        }
+
+        if (this.stepData.tasks.length === this.prefillContent['storage-ipranges'].length) {
+          this.stepData.tasks.forEach(async (task) => {
+            if (task.error) {
+              return true
+            }
+
+            const jobResult = await this.pollJob(task.jobid)
+
+            if (jobResult.jobstatus === 1) {
+              task.complete = true
+            } else if (jobResult.jobstatus === 2) {
+              task.error = true
+              task.message = jobResult.jobresult.errortext
+            }
+
+            return true
+          })
+        }
+
+        return true
+      }, 1000)
+
+      return true
+    },
+    async stepConfigureGuestTraffic () {
+      if (this.prefillContent.skipGuestTrafficStep) {
+        await this.stepAddCluster()
+        return
+      }
+
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.configuring.guest.traffic', 'guestTraffic')
+
+      if (this.isBasicZone) {
+        const params = {}
+        params.podid = this.stepData.podReturned.id
+        params.networkid = this.stepData.networkReturned.id
+        params.gateway = this.prefillContent.guestGateway ? this.prefillContent.guestGateway.value : null
+        params.netmask = this.prefillContent.guestNetmask ? this.prefillContent.guestNetmask.value : null
+        params.startip = this.prefillContent.guestStartIp ? this.prefillContent.guestStartIp.value : null
+        params.endip = this.prefillContent.guestStopIp ? this.prefillContent.guestStopIp.value : null
+        params.forVirtualNetwork = false
+
+        try {
+          if (!this.stepData.stepMove.includes('createGuestVlanIpRange')) {
+            this.stepData.returnedGuestNetwork = await this.createVlanIpRange(params)
+            this.stepData.stepMove.push('createGuestVlanIpRange')
+          }
+
+          const hypervisor = this.prefillContent.hypervisor.value
+          if (hypervisor === 'BareMetal') {
+            await this.stepComplete()
+          } else {
+            await this.stepAddCluster()
+          }
+        } catch (e) {
+          this.messageError = e
+          this.processStatus = STATUS_FAILED
+          this.setStepStatus(STATUS_FAILED)
+        }
+      } else if (this.isAdvancedZone) {
+        const physicalNetworksHavingGuestIncludingVlan = []
+        await this.prefillContent.physicalNetworks.map(async (network) => {
+          if (this.prefillContent.vlanRangeStart) {
+            physicalNetworksHavingGuestIncludingVlan.push(network)
+          }
+        })
+
+        if (physicalNetworksHavingGuestIncludingVlan.length === 0) {
+          await this.stepAddCluster()
+        } else {
+          let updatedCount = 0
+
+          for (let index = 0; index < physicalNetworksHavingGuestIncludingVlan.length; index++) {
+            const network = physicalNetworksHavingGuestIncludingVlan[index]
+            let vlan = null
+
+            if (!this.prefillContent.vlanRangeEnd || !this.prefillContent.vlanRangeEnd.value) {
+              vlan = this.prefillContent.vlanRangeStart.value
+            } else {
+              vlan = [this.prefillContent.vlanRangeStart.value, this.prefillContent.vlanRangeEnd.value].join('-')
+            }
+
+            const updateParams = {}
+            updateParams.id = this.stepData.physicalNetworkReturned.id
+            updateParams.vlan = vlan
+
+            try {
+              if (!this.stepData.stepMove.includes('advGuestUpdatePhysicalNetwork' + index)) {
+                await this.updatePhysicalNetwork(updateParams)
+                this.stepData.stepMove.push('advGuestUpdatePhysicalNetwork' + index)
+              }
+              updatedCount++
+              if (updatedCount === physicalNetworksHavingGuestIncludingVlan.length) {
+                await this.stepAddCluster()
+              }
+            } catch (e) {
+              this.messageError = e
+              this.processStatus = STATUS_FAILED
+              this.setStepStatus(STATUS_FAILED)
+              break
+            }
+          }
+        }
+      }
+    },
+    async stepAddCluster () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.creating.cluster', 'clusterResource')
+
+      const hypervisor = this.prefillContent.hypervisor.value
+      const params = {}
+      params.zoneId = this.stepData.zoneReturned.id
+      params.hypervisor = hypervisor
+      let clusterType = null
+
+      if (hypervisor === 'VMware') {
+        clusterType = 'ExternalManaged'
+      } else {
+        clusterType = 'CloudManaged'
+      }
+      params.clustertype = clusterType
+      params.podId = this.stepData.podReturned.id
+      let clusterName = this.prefillContent.clusterName.value
+
+      if (hypervisor === 'VMware') {
+        params.username = this.prefillContent.vCenterUsername ? this.prefillContent.vCenterUsername.value : null
+        params.password = this.prefillContent.vCenterPassword ? this.prefillContent.vCenterPassword.value : null
+        params.vsmipaddress = this.prefillContent.vsmipaddress ? this.prefillContent.vsmipaddress.value : null
+        params.vsmusername = this.prefillContent.vsmusername ? this.prefillContent.vsmusername.value : null
+        params.vsmpassword = this.prefillContent.vsmpassword ? this.prefillContent.vsmpassword.value : null
+
+        const hostname = this.prefillContent.vCenterHost ? this.prefillContent.vCenterHost.value : null
+        const dcName = this.prefillContent.vCenterDatacenter ? this.prefillContent.vCenterDatacenter.value : null
+        let url = null
+        if (hostname.indexOf('http://') === -1) {
+          url = ['http://', hostname].join('')
+        } else {
+          url = hostname
+        }
+
+        url += '/' + dcName + '/' + clusterName
+        params.url = url
+        clusterName = hostname + '/' + dcName + '/' + clusterName
+      }
+      params.clustername = clusterName
+
+      if (hypervisor === 'VMware') {
+        const vmwareData = {}
+        vmwareData.zoneId = this.stepData.zoneReturned.id
+        vmwareData.username = this.prefillContent.vCenterUsername ? this.prefillContent.vCenterUsername.value : null
+        vmwareData.password = this.prefillContent.vCenterPassword ? this.prefillContent.vCenterPassword.value : null
+        vmwareData.name = this.prefillContent.vCenterDatacenter ? this.prefillContent.vCenterDatacenter.value : null
+        vmwareData.vcenter = this.prefillContent.vCenterHost ? this.prefillContent.vCenterHost.value : null
+
+        try {
+          if (!this.stepData.stepMove.includes('addVmwareDc')) {
+            this.stepData.vmWareResult = await this.addVmwareDc(vmwareData)
+            this.stepData.stepMove.push('addVmwareDc')
+          }
+
+          if (this.stepData.vmWareResult.id !== null) {
+            if (!this.stepData.stepMove.includes('addCluster')) {
+              this.stepData.clusterReturned = await this.addCluster(params)
+              this.stepData.stepMove.push('addCluster')
+            }
+            await this.stepAddPrimaryStorage()
+          }
+        } catch (e) {
+          this.messageError = e
+          this.processStatus = STATUS_FAILED
+          this.setStepStatus(STATUS_FAILED)
+        }
+      } else {
+        try {
+          if (!this.stepData.stepMove.includes('addCluster')) {
+            this.stepData.clusterReturned = await this.addCluster(params)
+            this.stepData.stepMove.push('addCluster')
+          }
+          await this.stepAddHost()
+        } catch (e) {
+          this.messageError = e
+          this.processStatus = STATUS_FAILED
+          this.setStepStatus(STATUS_FAILED)
+        }
+      }
+    },
+    async stepAddHost () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.adding.host', 'hostResource')
+
+      const hostData = {}
+      hostData.zoneid = this.stepData.zoneReturned.id
+      hostData.podid = this.stepData.podReturned.id
+      hostData.clusterid = this.stepData.clusterReturned.id
+      hostData.hypervisor = this.stepData.clusterReturned.hypervisortype
+      hostData.clustertype = this.stepData.clusterReturned.clustertype
+      hostData.hosttags = this.prefillContent.hostTags ? this.prefillContent.hostTags.value : null
+      hostData.username = this.prefillContent.hostUserName ? this.prefillContent.hostUserName.value : null
+      hostData.password = this.prefillContent.hostPassword ? this.prefillContent.hostPassword.value : null
+      const hostname = this.prefillContent.hostName ? this.prefillContent.hostName.value : null
+      let url = null
+      if (hostname.indexOf('http://') === -1) {
+        url = ['http://', hostname].join('')
+      } else {
+        url = hostname
+      }
+      hostData.url = url
+      const hypervisor = this.prefillContent.hypervisor.value
+
+      if (hypervisor === 'Ovm') {
+        hostData.agentusername = this.prefillContent.agentUserName ? this.prefillContent.agentUserName.value : null
+        hostData.agentpassword = this.prefillContent.agentPassword ? this.prefillContent.agentPassword.value : null
+      }
+
+      if (this.prefillContent.localstorageenabledforsystemvm.value) {
+        const configParams = {}
+        configParams.name = 'system.vm.use.local.storage'
+        configParams.value = true
+        configParams.zoneid = this.stepData.zoneReturned.id
+
+        try {
+          await this.updateConfiguration(configParams)
+          this.stepData.returnedHost = await this.addHost(hostData)
+          await this.stepAddPrimaryStorage()
+        } catch (e) {
+          this.messageError = e
+          this.processStatus = STATUS_FAILED
+          this.setStepStatus(STATUS_FAILED)
+        }
+      } else {
+        try {
+          this.stepData.returnedHost = await this.addHost(hostData)
+          await this.stepAddPrimaryStorage()
+        } catch (e) {
+          this.messageError = e
+          this.processStatus = STATUS_FAILED
+          this.setStepStatus(STATUS_FAILED)
+        }
+      }
+    },
+    async stepAddPrimaryStorage () {
+      if (this.prefillContent.localstorageenabled.value &&
+        this.prefillContent.localstorageenabledforsystemvm.value) {
+        await this.stepAddSecondaryStorage()
+        return
+      }
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.creating.primary.storage', 'primaryResource')
+
+      const params = {}
+      params.zoneid = this.stepData.zoneReturned.id
+      params.podId = this.stepData.podReturned.id
+      params.clusterid = this.stepData.clusterReturned.id
+      params.name = this.prefillContent.primaryStorageName ? this.prefillContent.primaryStorageName.value : null
+      params.scope = this.prefillContent.primaryStorageScope ? this.prefillContent.primaryStorageScope.value : null
+
+      if (params.scope === 'zone') {
+        const hypervisor = this.prefillContent.hypervisor.value
+        if (hypervisor !== undefined) {
+          params.hypervisor = hypervisor
+        } else if (this.stepData.clusterReturned.hypervisortype !== undefined) {
+          params.hypervisor = this.stepData.clusterReturned.hypervisortype
+        }
+      }
+
+      const server = this.prefillContent.primaryStorageServer ? this.prefillContent.primaryStorageServer.value : null
+      let url = ''
+      const protocol = this.prefillContent.primaryStorageProtocol.value
+
+      if (protocol === 'nfs') {
+        let path = this.prefillContent.primaryStoragePath.value
+        if (path.substring(0, 1) !== '/') {
+          path = '/' + path
+        }
+        url = this.nfsURL(server, path)
+      } else if (protocol === 'SMB') {
+        let path = this.prefillContent.primaryStoragePath.value
+        if (path.substring(0, 1) !== '/') {
+          path = '/' + path
+        }
+        url = this.smbURL(server, path)
+        params['details[0].user'] = this.prefillContent.primaryStorageSMBUsername.value
+        params['details[0].password'] = this.prefillContent.primaryStorageSMBPassword.value
+        params['details[0].domain'] = this.prefillContent.primaryStorageSMBDomain.value
+      } else if (protocol === 'PreSetup') {
+        let path = this.prefillContent.primaryStoragePath.value
+        if (path.substring(0, 1) !== '/') {
+          path = '/' + path
+        }
+        url = this.presetupURL(server, path)
+      } else if (protocol === 'ocfs2') {
+        let path = this.prefillContent.primaryStoragePath.value
+        if (path.substring(0, 1) !== '/') {
+          path = '/' + path
+        }
+        url = this.ocfs2URL(server, path)
+      } else if (protocol === 'SharedMountPoint') {
+        let path = this.prefillContent.primaryStoragePath.value
+        if (path.substring(0, 1) !== '/') {
+          path = '/' + path
+        }
+        url = this.sharedMountPointURL(server, path)
+      } else if (protocol === 'clvm') {
+        let vg = this.prefillContent.primaryStorageVolumeGroup.value
+        if (vg.substring(0, 1) !== '/') {
+          vg = '/' + vg
+        }
+        url = this.clvmURL(vg)
+      } else if (protocol === 'rbd') {
+        const rbdmonitor = this.prefillContent.primaryStorageRADOSMonitor.value
+        const rbdpool = this.prefillContent.primaryStorageRADOSPool.value
+        const rbdid = this.prefillContent.primaryStorageRADOSUser.value
+        const rbdsecret = this.prefillContent.primaryStorage.value
+        url = this.rbdURL(rbdmonitor, rbdpool, rbdid, rbdsecret)
+      } else if (protocol === 'vmfs') {
+        let path = this.prefillContent.primaryStorageVmfsDatacenter.value
+        if (path.substring(0, 1) !== '/') {
+          path = '/' + path
+        }
+        path += '/' + this.prefillContent.primaryStorageVmfsDatastore.value
+        url = this.vmfsURL('dummy', path)
+      } else {
+        let iqn = this.prefillContent.primaryStorageTargetIQN.value
+        if (iqn.substring(0, 1) !== '/') {
+          iqn = '/' + iqn
+        }
+        const lun = this.prefillContent.primaryStorageLUN.value
+        url = this.iscsiURL(server, iqn, lun)
+      }
+
+      params.url = url
+      params.tags = this.prefillContent.primaryStorageTags.value
+
+      try {
+        if (!this.stepData.stepMove.includes('createStoragePool')) {
+          this.stepData.primaryStorageRetunred = await this.createStoragePool(params)
+          this.stepData.stepMove.push('createStoragePool')
+        }
+        await this.stepAddSecondaryStorage()
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    async stepAddSecondaryStorage () {
+      if (!this.prefillContent.secondaryStorageProvider.value ||
+      this.prefillContent.secondaryStorageProvider.value.length === 0) {
+        await this.stepComplete()
+        return
+      }
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.creating.secondary.storage', 'secondaryResource')
+
+      const params = {}
+      params.name = this.prefillContent.secondaryStorageName ? this.prefillContent.secondaryStorageName.value : null
+      if (this.prefillContent.secondaryStorageProvider.value === 'NFS') {
+        const nfsServer = this.prefillContent.secondaryStorageServer.value
+        const path = this.prefillContent.secondaryStoragePath.value
+        const url = this.nfsURL(nfsServer, path)
+
+        params.provider = this.prefillContent.secondaryStorageProvider.value
+        params.zoneid = this.stepData.zoneReturned.id
+        params.url = url
+      } else if (this.prefillContent.secondaryStorageProvider.value === 'SMB') {
+        const nfsServer = this.prefillContent.secondaryStorageServer.value
+        const path = this.prefillContent.secondaryStoragePath.value
+        const url = this.smbURL(nfsServer, path)
+
+        params.provider = this.prefillContent.secondaryStorageProvider.value
+        params.zoneid = this.stepData.zoneReturned.id
+        params.url = url
+        params['details[0].key'] = 'user'
+        params['details[0].value'] = this.prefillContent.secondaryStorageSMBUsername.value
+        params['details[1].key'] = 'password'
+        params['details[1].value'] = this.prefillContent.secondaryStorageSMBPassword.value
+        params['details[2].key'] = 'domain'
+        params['details[2].value'] = this.prefillContent.secondaryStorageSMBDomain.value
+      } else if (this.prefillContent.secondaryStorageProvider.value === 'S3') {
+        params.provider = this.prefillContent.secondaryStorageProvider.value
+        params['details[0].key'] = 'accesskey'
+        params['details[0].value'] = this.prefillContent.secondaryStorageAccessKey.value
+        params['details[1].key'] = 'secretkey'
+        params['details[1].value'] = this.prefillContent.secondaryStorageSecretKey.value
+        params['details[2].key'] = 'bucket'
+        params['details[2].value'] = this.prefillContent.secondaryStorageBucket.value
+        params['details[3].key'] = 'usehttps'
+        params['details[3].value'] = this.prefillContent.secondaryStorageHttps ? this.prefillContent.secondaryStorageHttps.value : false
+
+        let index = 4
+        if (this.prefillContent.secondaryStorageEndpoint &&
+          this.prefillContent.secondaryStorageEndpoint.value.length > 0) {
+          params['details[' + index.toString() + '].key'] = 'endpoint'
+          params['details[' + index.toString() + '].value'] = this.prefillContent.secondaryStorageEndpoint.value
+          index++
+        }
+        if (this.prefillContent.secondaryStorageConnectionTimeout &&
+          this.prefillContent.secondaryStorageConnectionTimeout.value.length > 0) {
+          params['details[' + index.toString() + '].key'] = 'connectiontimeout'
+          params['details[' + index.toString() + '].value'] = this.prefillContent.secondaryStorageConnectionTimeout.value
+          index++
+        }
+        if (this.prefillContent.secondaryStorageMaxError &&
+          this.prefillContent.secondaryStorageMaxError.value.length > 0) {
+          params['details[' + index.toString() + '].key'] = 'maxerrorretry'
+          params['details[' + index.toString() + '].value'] = this.prefillContent.secondaryStorageMaxError.value
+          index++
+        }
+        if (this.prefillContent.secondaryStorageSocketTimeout &&
+          this.prefillContent.secondaryStorageSocketTimeout.value.length > 0) {
+          params['details[' + index.toString() + '].key'] = 'sockettimeout'
+          params['details[' + index.toString() + '].value'] = this.prefillContent.secondaryStorageSocketTimeout.value
+          index++
+        }
+      } else if (this.prefillContent.secondaryStorageProvider.value === 'Swift') {
+        params.provider = this.prefillContent.secondaryStorageProvider.value
+        params.url = this.prefillContent.secondaryStorageURL.value
+
+        let index = 0
+        if (this.prefillContent.secondaryStorageAccount &&
+          this.prefillContent.secondaryStorageAccount.value.length > 0) {
+          params['details[' + index.toString() + '].key'] = 'account'
+          params['details[' + index.toString() + '].value'] = this.prefillContent.secondaryStorageAccount.value
+          index++
+        }
+        if (this.prefillContent.secondaryStorageUsername &&
+          this.prefillContent.secondaryStorageUsername.value.length > 0) {
+          params['details[' + index.toString() + '].key'] = 'username'
+          params['details[' + index.toString() + '].value'] = this.prefillContent.secondaryStorageUsername.value
+          index++
+        }
+        if (this.prefillContent.secondaryStorageKey &&
+          this.prefillContent.secondaryStorageKey.value.length > 0) {
+          params['details[' + index.toString() + '].key'] = 'key'
+          params['details[' + index.toString() + '].value'] = this.prefillContent.secondaryStorageKey.value
+          index++
+        }
+      }
+
+      try {
+        if (!this.stepData.stepMove.includes('addImageStore')) {
+          await this.addImageStore(params)
+          this.stepData.stepMove.push('addImageStore')
+        }
+
+        if (this.prefillContent.secondaryStorageNFSStaging && this.prefillContent.secondaryStorageNFSStaging.value) {
+          const nfsServer = this.prefillContent.secondaryStorageNFSServer.value
+          const path = this.prefillContent.secondaryStorageNFSPath.value
+          const url = this.nfsURL(nfsServer, path)
+
+          const nfsParams = {}
+          nfsParams.provider = 'nfs'
+          nfsParams.zoneid = this.stepData.zoneReturned.id
+          nfsParams.url = url
+
+          if (!this.stepData.stepMove.includes('createSecondaryStagingStore')) {
+            await this.createSecondaryStagingStore(nfsParams)
+            this.stepData.stepMove.push('createSecondaryStagingStore')
+          }
+        }
+
+        await this.stepComplete()
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    async stepEnableSecurityGroupProvider () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.enabling.security.group.provider', 'stepZone')
+
+      const listNetworkParams = {}
+      listNetworkParams.name = 'SecurityGroupProvider'
+      listNetworkParams.physicalNetworkId = this.stepData.physicalNetworkReturned.id
+
+      try {
+        if (!this.stepData.stepMove.includes('enableSecurityGroupProvider')) {
+          const securityGroupProviderId = await this.listNetworkServiceProviders(listNetworkParams)
+          await this.updateNetworkServiceProvider(securityGroupProviderId, 'enableSecurityGroupProvider')
+          this.stepData.stepMove.push('enableSecurityGroupProvider')
+        }
+
+        await this.stepAddNetscalerProvider()
+      } catch (e) {
+        this.messageError = e
+        this.processStatus = STATUS_FAILED
+        this.setStepStatus(STATUS_FAILED)
+      }
+    },
+    stepComplete () {
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.addStep('message.Zone.creation.complete', 'stepComplete')
+      this.setStepStatus(STATUS_FINISH)
+      this.currentStep++
+      this.processStatus = STATUS_FINISH
+    },
+    async enableZoneAction () {
+      const params = {}
+      params.allocationstate = 'Enabled'
+      params.id = this.stepData.zoneReturned.id
+      this.loading = true
+
+      try {
+        await this.enableZone(params)
+        await this.$message.success('Success')
+        this.loading = false
+        this.steps = []
+        this.$emit('closeAction')
+        this.$emit('refresh-data')
+      } catch (e) {
+        this.loading = false
+        await this.$notification.error({
+          message: 'Request Failed',
+          description: e
+        })
+      }
+    },
+    async pollJob (jobId) {
+      return new Promise(resolve => {
+        const asyncJobInterval = setInterval(() => {
+          api('queryAsyncJobResult', { jobId }).then(async json => {
+            const result = json.queryasyncjobresultresponse
+            if (result.jobstatus === 0) {
+              return
+            }
+
+            clearInterval(asyncJobInterval)
+            resolve(result)
+          })
+        }, 1000)
+      })
+    },
+    createZone (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('createZone', args).then(json => {
+          const zone = json.createzoneresponse.zone
+          resolve(zone)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    dedicateZone (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('dedicateZone', args).then(json => {
+          resolve()
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          resolve(message)
+        })
+      })
+    },
+    async createPhysicalNetwork (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('createPhysicalNetwork', args).then(async json => {
+          const jobId = json.createphysicalnetworkresponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              message = 'createPhysicalNetwork failed. Error: ' + result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    addTrafficType (trafficType) {
+      const getTrafficParams = this.trafficLabelParam(trafficType.toLowerCase())
+      let params = {}
+
+      params.trafficType = trafficType
+      params.physicalnetworkid = this.stepData.physicalNetworkReturned.id
+      params = { ...params, ...getTrafficParams }
+
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('addTrafficType', params).then(async json => {
+          const jobId = json.addtraffictyperesponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              this.setStepStatus(STATUS_FAILED)
+              message = 'Failed to add ' + trafficType + ' traffic type to basic zone. Error: ' + result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    updatePhysicalNetwork (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('updatePhysicalNetwork', args).then(async json => {
+          const jobId = json.updatephysicalnetworkresponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              message = 'updatePhysicalNetwork failed. Error:' + result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    listNetworkServiceProviders (params, type) {
+      return new Promise((resolve, reject) => {
+        let providerId = null
+        let message = ''
+
+        api('listNetworkServiceProviders', params).then(json => {
+          const items = json.listnetworkserviceprovidersresponse.networkserviceprovider
+          if (items != null && items.length > 0) {
+            providerId = items[0].id
+          }
+          if (!type && providerId == null) {
+            message = 'error: listNetworkServiceProviders API doesn\'t return VirtualRouter provider ID'
+            reject(message)
+            return
+          }
+          resolve(providerId)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    listVirtualRouterElements (virtualRouterProviderId) {
+      return new Promise((resolve, reject) => {
+        let virtualRouterElementId = null
+        let message = ''
+
+        api('listVirtualRouterElements', { nspid: virtualRouterProviderId }).then(json => {
+          const items = json.listvirtualrouterelementsresponse.virtualrouterelement
+          if (items != null && items.length > 0) {
+            virtualRouterElementId = items[0].id
+          }
+          if (virtualRouterElementId === null) {
+            message = 'error: listVirtualRouterElements API doesn\'t return Virtual Router Element Id'
+            reject(message)
+            return
+          }
+          resolve(virtualRouterElementId)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    configureVirtualRouterElement (virtualRouterElementId) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+        const params = {}
+        params.enabled = true
+        params.id = virtualRouterElementId
+
+        api('configureVirtualRouterElement', params).then(async json => {
+          const jobId = json.configurevirtualrouterelementresponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              message = 'configureVirtualRouterElement failed. Error: ' + result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    updateNetworkServiceProvider (providerId, type) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+        const params = {}
+
+        params.id = providerId
+        params.state = 'Enabled'
+
+        api('updateNetworkServiceProvider', params).then(async json => {
+          const jobId = json.updatenetworkserviceproviderresponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              message = 'updateNetworkServiceProvider failed. Error: '
+              switch (type) {
+                case 'netscalerProvider':
+                  message = 'failed to enable Netscaler provider. Error: '
+                  break
+                case 'enableSecurityGroupProvider':
+                  message = 'failed to enable security group provider. Error: '
+                  break
+              }
+              message += result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    listOvsElements (ovsProviderId) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+        let ovsElementId = null
+
+        api('listOvsElements', { nspid: ovsProviderId }).then(json => {
+          const items = json.listovselementsresponse.ovselement
+          if (items != null && items.length > 0) {
+            ovsElementId = items[0].id
+          }
+          resolve(ovsElementId)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    configureOvsElement (ovsElementId) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('configureOvsElement', { enabled: true, id: ovsElementId }).then(async json => {
+          const jobId = json.configureovselementresponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              message = 'configureOvsElement failed. Error: ' + result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    listInternalLoadBalancerElements (internalLbProviderId) {
+      return new Promise((resolve, reject) => {
+        let internalLbElementId = null
+        let message = ''
+
+        api('listInternalLoadBalancerElements', { nspid: internalLbProviderId }).then(json => {
+          const items = json.listinternalloadbalancerelementsresponse.internalloadbalancerelement
+          if (items != null && items.length > 0) {
+            internalLbElementId = items[0].id
+          }
+          if (internalLbElementId == null) {
+            message = 'error: listInternalLoadBalancerElements API doesn\'t return Internal LB Element Id'
+            reject(message)
+            return
+          }
+          resolve(internalLbElementId)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    configureInternalLoadBalancerElement (internalLbElementId) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+        api('configureInternalLoadBalancerElement', { enabled: true, id: internalLbElementId }).then(async json => {
+          const jobId = json.configureinternalloadbalancerelementresponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              message = 'configureVirtualRouterElement failed. Error: ' + result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    addNetworkServiceProvider (arg) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('addNetworkServiceProvider', arg).then(async json => {
+          const jobId = json.addnetworkserviceproviderresponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              message = 'addNetworkServiceProvider&name=Netscaler failed. Error: ' + result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    createNetwork (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('createNetwork', args).then(json => {
+          const returnedGuestNetwork = json.createnetworkresponse.network
+          resolve(returnedGuestNetwork)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    createPod (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('createPod', args).then(json => {
+          const returnedPod = json.createpodresponse.pod
+          resolve(returnedPod)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    createVlanIpRange (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('createVlanIpRange', args).then(json => {
+          const item = json.createvlaniprangeresponse.vlan
+          resolve(item)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    createStorageNetworkIpRange (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('createStorageNetworkIpRange', args).then(async json => {
+          const jobId = json.createstoragenetworkiprangeresponse.jobid
+          resolve({
+            jobid: jobId,
+            complete: false
+          })
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    addVmwareDc (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('addVmwareDc', {}, 'POST', args).then(json => {
+          const item = json.addvmwaredcresponse.vmwaredc
+          resolve(item)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    addCluster (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('addCluster', args).then(json => {
+          const result = json.addclusterresponse.cluster[0]
+          resolve(result)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    addHost (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('addHost', {}, 'POST', args).then(json => {
+          const result = json.addhostresponse.host[0]
+          resolve(result)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    updateConfiguration (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('updateConfiguration', args).then(json => {
+          resolve()
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    createStoragePool (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('createStoragePool', args).then(json => {
+          const result = json.createstoragepoolresponse.storagepool
+          resolve(result)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    addImageStore (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('addImageStore', args).then(json => {
+          const result = json.addimagestoreresponse.secondarystorage
+          resolve(result)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    createSecondaryStagingStore (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('createSecondaryStagingStore', args).then(json => {
+          const result = json.addimagestoreresponse.secondarystorage
+          resolve(result)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    addNetscalerLoadBalancer (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('addNetscalerLoadBalancer', {}, 'POST', args).then(async json => {
+          const jobId = json.addnetscalerloadbalancerresponse.jobid
+          if (jobId) {
+            const result = await this.pollJob(jobId)
+            if (result.jobstatus === 2) {
+              message = 'addNetscalerDevice' + result.jobresult.errortext
+              reject(message)
+              return
+            }
+            resolve(result)
+          }
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    enableZone (args) {
+      return new Promise((resolve, reject) => {
+        let message = ''
+
+        api('updateZone', args).then(json => {
+          const result = json.updatezoneresponse.zone
+          resolve(result)
+        }).catch(error => {
+          message = error.response.headers['x-description']
+          reject(message)
+        })
+      })
+    },
+    nfsURL (server, path) {
+      let url = null
+      if (path.substring(0, 1) !== '/') {
+        path = '/' + path
+      }
+      if (server.indexOf('://') === -1) {
+        url = 'nfs://' + server + path
+      } else {
+        url = server + path
+      }
+      return url
+    },
+    smbURL (server, path, smbUsername, smbPassword, smbDomain) {
+      let url = ''
+      if (path.substring(0, 1) !== '/') {
+        path = '/' + path
+      }
+      if (server.indexOf('://') === -1) {
+        url += 'cifs://'
+      }
+      url += (server + path)
+      return url
+    },
+    presetupURL (server, path) {
+      let url = null
+      if (server.indexOf('://') === -1) {
+        url = 'presetup://' + server + path
+      } else {
+        url = server + path
+      }
+      return url
+    },
+    ocfs2URL (server, path) {
+      let url = null
+      if (server.indexOf('://') === -1) {
+        url = 'ocfs2://' + server + path
+      } else {
+        url = server + path
+      }
+      return url
+    },
+    sharedMountPointURL (server, path) {
+      let url = ''
+      if (server.indexOf('://') === -1) {
+        url = 'SharedMountPoint://' + server + path
+      } else {
+        url = server + path
+      }
+      return url
+    },
+    rbdURL (monitor, pool, id, secret) {
+      let url
+      secret = secret.replace('+', '-')
+      secret = secret.replace('/', '_')
+      if (id != null && secret != null) {
+        monitor = id + ':' + secret + '@' + monitor
+      }
+      if (pool.substring(0, 1) !== '/') {
+        pool = '/' + pool
+      }
+      if (monitor.indexOf('://') === -1) {
+        url = 'rbd://' + monitor + pool
+      } else {
+        url = monitor + pool
+      }
+
+      return url
+    },
+    clvmURL (vgname) {
+      let url = ''
+      if (vgname.indexOf('://') === -1) {
+        url = 'clvm://localhost/' + vgname
+      } else {
+        url = vgname
+      }
+      return url
+    },
+    vmfsURL (server, path) {
+      let url = ''
+      if (server.indexOf('://') === -1) {
+        url = 'vmfs://' + server + path
+      } else {
+        url = server + path
+      }
+      return url
+    },
+    iscsiURL (server, iqn, lun) {
+      let url = ''
+      if (server.indexOf('://') === -1) {
+        url = 'iscsi://' + server + iqn + '/' + lun
+      } else {
+        url = server + iqn + '/' + lun
+      }
+      return url
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .card-waiting-launch {
+    text-align: center;
+    margin: 10px 0;
+    width: 100%;
+    padding: 20px;
+    font-size: 20px;
+  }
+
+  .card-launch-description {
+    text-align: justify;
+    margin: 10px 0;
+    width: 100%;
+    padding: 0;
+  }
+
+  .card-launch-content {
+    text-align: justify;
+    margin: 10px 0;
+    width: 100%;
+    font-size: 15px;
+    max-height: 45vh;
+    overflow-y: auto;
+  }
+
+  /deep/.step-error {
+    color: #f5222d;
+    margin-top: 20px;
+
+    /deep/.ant-card-body {
+      padding: 15px;
+      text-align: justify;
+    }
+  }
+</style>
diff --git a/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue b/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue
new file mode 100644
index 00000000000..56988d3a8cb
--- /dev/null
+++ b/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue
@@ -0,0 +1,444 @@
+// 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 style="width: auto;">
+    <a-steps progressDot :current="currentStep" size="small" style="margin-left: 0px; margin-top: 16px;">
+      <a-step
+        v-for="step in steps"
+        :key="step.title"
+        :title="$t(step.title)"
+        :style="stepScales"></a-step>
+    </a-steps>
+    <zone-wizard-physical-network-setup-step
+      v-if="steps && steps[currentStep].formKey === 'physicalNetwork'"
+      @nextPressed="nextPressed"
+      @backPressed="handleBack"
+      @fieldsChanged="fieldsChanged"
+      @submitLaunchZone="submitLaunchZone"
+      :prefillContent="prefillContent"
+      :isFixError="isFixError"
+    />
+    <static-inputs-form
+      v-if="steps && steps[currentStep].formKey === 'netscaler'"
+      @nextPressed="nextPressed"
+      @backPressed="handleBack"
+      @fieldsChanged="fieldsChanged"
+      @submitLaunchZone="submitLaunchZone"
+      :fields="netscalerFields"
+      :prefillContent="prefillContent"
+      :description="netscalerSetupDescription"
+      :isFixError="isFixError"
+    />
+    <ip-address-range-form
+      v-if="steps && steps[currentStep].formKey === 'publicTraffic'"
+      @nextPressed="nextPressed"
+      @backPressed="handleBack"
+      @fieldsChanged="fieldsChanged"
+      @submitLaunchZone="submitLaunchZone"
+      traffic="public"
+      :description="publicTrafficDescription[zoneType.toLowerCase()]"
+      :prefillContent="prefillContent"
+      :isFixError="isFixError"
+    />
+
+    <static-inputs-form
+      v-if="steps && steps[currentStep].formKey === 'pod'"
+      @nextPressed="nextPressed"
+      @backPressed="handleBack"
+      @fieldsChanged="fieldsChanged"
+      @submitLaunchZone="submitLaunchZone"
+      :fields="podFields"
+      :prefillContent="prefillContent"
+      :description="podSetupDescription"
+      :isFixError="isFixError"
+    />
+
+    <div v-if="guestTrafficRangeMode">
+      <static-inputs-form
+        v-if="steps && steps[currentStep].formKey === 'guestTraffic'"
+        @nextPressed="nextPressed"
+        @backPressed="handleBack"
+        @fieldsChanged="fieldsChanged"
+        @submitLaunchZone="submitLaunchZone"
+        :fields="guestTrafficFields"
+        :prefillContent="prefillContent"
+        :description="guestTrafficDescription[this.zoneType.toLowerCase()]"
+        :isFixError="isFixError"
+      />
+    </div>
+    <div v-else>
+      <advanced-guest-traffic-form
+        v-if="steps && steps[currentStep].formKey === 'guestTraffic'"
+        @nextPressed="nextPressed"
+        @backPressed="handleBack"
+        @fieldsChanged="fieldsChanged"
+        @submitLaunchZone="submitLaunchZone"
+        :prefillContent="prefillContent"
+        :description="guestTrafficDescription[this.zoneType.toLowerCase()]"
+        :isFixError="isFixError"
+      />
+    </div>
+
+    <ip-address-range-form
+      v-if="steps && steps[currentStep].formKey === 'storageTraffic'"
+      @nextPressed="nextPressed"
+      @backPressed="handleBack"
+      @fieldsChanged="fieldsChanged"
+      @submitLaunchZone="submitLaunchZone"
+      traffic="storage"
+      :description="storageTrafficDescription"
+      :prefillContent="prefillContent"
+      :isFixError="isFixError"
+    />
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import ZoneWizardPhysicalNetworkSetupStep from '@views/infra/zone/ZoneWizardPhysicalNetworkSetupStep'
+import IpAddressRangeForm from '@views/infra/zone/IpAddressRangeForm'
+import StaticInputsForm from '@views/infra/zone/StaticInputsForm'
+import AdvancedGuestTrafficForm from '@views/infra/zone/AdvancedGuestTrafficForm'
+
+export default {
+  components: {
+    ZoneWizardPhysicalNetworkSetupStep,
+    IpAddressRangeForm,
+    StaticInputsForm,
+    AdvancedGuestTrafficForm
+  },
+  props: {
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    stepChild: {
+      type: String,
+      default: ''
+    },
+    isFixError: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    zoneType () {
+      return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : null
+    },
+    sgEnabled () {
+      return this.prefillContent.securityGroupsEnabled ? this.prefillContent.securityGroupsEnabled.value : false
+    },
+    havingNetscaler () {
+      return this.prefillContent.networkOfferingSelected ? this.prefillContent.networkOfferingSelected.havingNetscaler : false
+    },
+    guestTrafficRangeMode () {
+      return this.zoneType === 'Basic' ||
+        (this.zoneType === 'Advanced' && this.sgEnabled)
+    },
+    allSteps () {
+      const steps = []
+      steps.push({
+        title: 'label.physical.network',
+        formKey: 'physicalNetwork'
+      })
+      if (this.havingNetscaler) {
+        steps.push({
+          title: 'label.netScaler',
+          formKey: 'netscaler'
+        })
+      }
+      steps.push({
+        title: 'label.public.traffic',
+        formKey: 'publicTraffic',
+        trafficType: 'public'
+      })
+      steps.push({
+        title: 'label.pod',
+        formKey: 'pod'
+      })
+      steps.push({
+        title: 'label.guest.traffic',
+        formKey: 'guestTraffic',
+        trafficType: 'guest'
+      })
+      steps.push({
+        title: 'label.storage.traffic',
+        formKey: 'storageTraffic',
+        trafficType: 'storage'
+      })
+
+      return steps
+    },
+    stepScales () {
+      if (this.allSteps.length > 4) {
+        return { width: 'calc(100% / ' + this.allSteps.length + ')' }
+      }
+      return {}
+    },
+    netscalerFields () {
+      return [
+        {
+          title: 'label.guest.ip',
+          key: 'netscalerIp',
+          required: false,
+          ipV4: true,
+          message: 'Please enter a valid IP v4 address.'
+        },
+        {
+          title: 'label.username',
+          key: 'netscalerUsername',
+          required: false
+        },
+        {
+          title: 'label.password',
+          key: 'netscalerPassword',
+          required: false,
+          password: true
+        },
+        {
+          title: 'label.type',
+          key: 'netscalerType',
+          required: false,
+          select: true,
+          options: this.netscalerType
+        },
+        {
+          title: 'label.public.interface',
+          key: 'publicinterface',
+          required: false
+        },
+        {
+          title: 'label.private.interface',
+          key: 'privateinterface',
+          required: false
+        },
+        {
+          title: 'label.gslb.service',
+          key: 'gslbprovider',
+          required: false,
+          switch: true
+        },
+        {
+          title: 'label.gslb.service.public.ip',
+          key: 'gslbproviderpublicip',
+          required: false,
+          ipV4: true,
+          message: 'Please enter a valid IP v4 address.'
+        },
+        {
+          title: 'label.gslb.service.private.ip',
+          key: 'gslbproviderprivateip',
+          required: false,
+          ipV4: true,
+          message: 'Please enter a valid IP v4 address.'
+        },
+        {
+          title: 'label.numretries',
+          key: 'numretries',
+          required: false
+        },
+        {
+          title: 'label.capacity',
+          key: 'capacity',
+          required: false
+        }
+      ]
+    }
+  },
+  data () {
+    return {
+      physicalNetworks: null,
+      currentStep: 0,
+      steps: null,
+      skipGuestTrafficStep: false,
+      netscalerType: [],
+      publicTrafficDescription: {
+        advanced: 'message.public.traffic.in.advanced.zone',
+        basic: 'message.public.traffic.in.basic.zone'
+      },
+      guestTrafficDescription: {
+        advanced: 'message.guest.traffic.in.advanced.zone',
+        basic: 'message.guest.traffic.in.basic.zone'
+      },
+      podSetupDescription: 'message.add.pod.during.zone.creation',
+      netscalerSetupDescription: 'label.please.specify.netscaler.info',
+      storageTrafficDescription: 'label.zoneWizard.trafficType.management',
+      podFields: [
+        {
+          title: 'label.pod.name',
+          key: 'podName',
+          placeHolder: 'Please enter pod name',
+          required: true
+        },
+        {
+          title: 'label.reserved.system.gateway',
+          key: 'podReservedGateway',
+          placeHolder: 'Please enter system gateway for Pod',
+          required: true
+        },
+        {
+          title: 'label.reserved.system.netmask',
+          key: 'podReservedNetmask',
+          placeHolder: 'Please enter system netmask for Pod',
+          required: true
+        },
+        {
+          title: 'label.start.reserved.system.IP',
+          key: 'podReservedStartIp',
+          placeHolder: 'Please enter reserved system start ip for Pod',
+          required: true,
+          ipV4: true,
+          message: 'Please enter a valid IP v4 address.'
+        },
+        {
+          title: 'label.end.reserved.system.IP',
+          key: 'podReservedStopIp',
+          placeHolder: 'Please enter reserved system stop ip for Pod',
+          required: false,
+          ipV4: true,
+          message: 'Please enter a valid IP v4 address.'
+        }
+      ],
+      guestTrafficFields: [
+        {
+          title: 'label.guest.gateway',
+          key: 'guestGateway',
+          placeHolder: 'Please enter guest gateway',
+          required: false
+        },
+        {
+          title: 'label.guest.netmask',
+          key: 'guestNetmask',
+          placeHolder: 'Please enter guest netmask',
+          required: false
+        },
+        {
+          title: 'label.guest.start.ip',
+          key: 'guestStartIp',
+          placeHolder: 'Please enter start ip for guest traffic',
+          required: false,
+          ipV4: true,
+          message: 'Please enter a valid IP v4 address.'
+        },
+        {
+          title: 'label.guest.end.ip',
+          key: 'guestStopIp',
+          placeHolder: 'Please enter stop ip for guest traffic',
+          required: false,
+          ipV4: true,
+          message: 'Please enter a valid IP v4 address.'
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.physicalNetworks = this.prefillContent.physicalNetworks
+    this.steps = this.filteredSteps()
+    this.currentStep = this.prefillContent.networkStep ? this.prefillContent.networkStep : 0
+    if (this.stepChild && this.stepChild !== '') {
+      this.currentStep = this.steps.findIndex(item => item.formKey === this.stepChild)
+    }
+    if (this.zoneType === 'Basic' ||
+      (this.zoneType === 'Advanced' && this.sgEnabled)) {
+      this.skipGuestTrafficStep = false
+    } else {
+      this.fetchConfiguration()
+    }
+    this.$emit('fieldsChanged', { skipGuestTrafficStep: this.skipGuestTrafficStep })
+    this.fetchNetscalerType()
+  },
+  methods: {
+    fetchNetscalerType () {
+      const items = []
+      items.push({
+        id: 'NetscalerMPXLoadBalancer',
+        description: 'NetScaler MPX LoadBalancer'
+      })
+      items.push({
+        id: 'NetscalerVPXLoadBalancer',
+        description: 'NetScaler VPX LoadBalancer'
+      })
+      items.push({
+        id: 'NetscalerSDXLoadBalancer',
+        description: 'NetScaler SDX LoadBalancer'
+      })
+      this.netscalerType = items
+      this.$forceUpdate()
+    },
+    nextPressed () {
+      if (this.currentStep === this.steps.length - 1) {
+        this.$emit('nextPressed')
+      } else {
+        this.currentStep++
+        this.$emit('fieldsChanged', { networkStep: this.currentStep })
+      }
+    },
+    handleBack (e) {
+      if (this.currentStep === 0) {
+        this.$emit('backPressed')
+      } else {
+        this.currentStep--
+        this.$emit('fieldsChanged', { networkStep: this.currentStep })
+      }
+    },
+    submitLaunchZone () {
+      this.$emit('submitLaunchZone')
+    },
+    fieldsChanged (changed) {
+      if (changed.physicalNetworks) {
+        this.physicalNetworks = changed.physicalNetworks
+        this.steps = this.filteredSteps()
+      }
+      this.$emit('fieldsChanged', changed)
+    },
+    filteredSteps () {
+      return this.allSteps.filter(step => {
+        if (!step.trafficType) return true
+        if (this.physicalNetworks) {
+          let neededTraffic = false
+          this.physicalNetworks.forEach(net => {
+            net.traffics.forEach(traffic => {
+              if (traffic.type === step.trafficType) {
+                neededTraffic = true
+              }
+            })
+          })
+          if (neededTraffic) return true
+        }
+        return false
+      })
+    },
+    fetchConfiguration () {
+      this.skipGuestTrafficStep = false
+      api('listConfigurations', { name: 'sdn.ovs.controller' }).then(json => {
+        const items = json.listconfigurationsresponse.configuration
+        items.forEach(item => {
+          if (item.name === 'sdn.ovs.controller') {
+            if (item.value) {
+              this.skipGuestTrafficStep = true
+            }
+            return false
+          }
+        })
+      })
+    }
+  }
+}
+</script>
diff --git a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
new file mode 100644
index 00000000000..91510c78269
--- /dev/null
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@@ -0,0 +1,501 @@
+// 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>
+    <a-card
+      class="ant-form-text"
+      style="text-align: justify; margin: 10px 0; padding: 20px;"
+      v-html="zoneType !== null ? $t(zoneDescription[zoneType]) : 'Please select zone type below.'">
+    </a-card>
+    <a-table
+      bordered
+      :dataSource="physicalNetworks"
+      :columns="columns"
+      :pagination="false"
+      style="margin-bottom: 24px;">
+      <template slot="name" slot-scope="text, record">
+        <a-input :value="text" @change="e => onCellChange(record.key, 'name', e.target.value)" />
+      </template>
+      <template slot="isolationMethod" slot-scope="text, record">
+        <a-select
+          style="width: 100%"
+          :defaultValue="text"
+          @change="value => onCellChange(record.key, 'isolationMethod', value)"
+        >
+          <a-select-option value="VLAN"> VLAN </a-select-option>
+          <a-select-option value="VXLAN"> VXLAN </a-select-option>
+          <a-select-option value="GRE"> GRE </a-select-option>
+          <a-select-option value="STT"> STT </a-select-option>
+          <a-select-option value="BCF_SEGMENT"> BCF_SEGMENT </a-select-option>
+          <a-select-option value="ODL"> ODL </a-select-option>
+          <a-select-option value="L3VPN"> L3VPN </a-select-option>
+          <a-select-option value="VSP"> VSP </a-select-option>
+          <a-select-option value="VCS"> VCS </a-select-option>
+        </a-select>
+      </template>
+      <template slot="traffics" slot-scope="traffics, record">
+        <div v-for="traffic in traffics" :key="traffic.type">
+          <a-tag
+            :color="trafficColors[traffic.type]"
+            style="margin:2px"
+          >
+            {{ traffic.type.toUpperCase() }}
+            <a-icon type="edit" class="traffic-type-action" @click="editTraffic(record.key, traffic, $event)"/>
+            <a-icon type="delete" class="traffic-type-action" @click="deleteTraffic(record.key, traffic, $event)"/>
+          </a-tag>
+        </div>
+        <a-modal
+          title="Edit traffic type"
+          :visible="showEditTraffic"
+          :closable="true"
+          @ok="updateTrafficLabel(trafficInEdit)"
+          @cancel="cancelEditTraffic"
+          centered
+        >
+          <a-form :form="form">
+            <span class="ant-form-text"> Please specify the traffic label you want associated with this traffic type. </span>
+            <a-form-item v-bind="formItemLayout" style="margin-top:16px;" label="Traffic Label">
+              <a-input
+                v-decorator="['trafficLabel', {
+                  rules: [{
+                    required: true,
+                    message: 'Please enter traffic label',
+                  }]
+                }]"
+              />
+            </a-form-item>
+          </a-form>
+        </a-modal>
+        <div v-if="isShowAddTraffic(record.traffics)">
+          <div class="traffic-select-item" v-if="addingTrafficForKey === record.key">
+            <a-select
+              :defaultValue="trafficLabelSelected"
+              @change="val => { trafficLabelSelected = val }"
+              style="min-width: 120px;"
+            >
+              <a-select-option
+                v-for="(traffic, index) in availableTrafficToAdd"
+                :value="traffic"
+                :key="index"
+                :disabled="isDisabledTraffic(record.traffics, traffic)"
+              >
+                {{ traffic.toUpperCase() }}
+              </a-select-option>
+            </a-select>
+            <a-button
+              class="icon-button"
+              shape="circle"
+              icon="plus"
+              size="small"
+              @click="trafficAdded" />
+            <a-button
+              class="icon-button"
+              type="danger"
+              shape="circle"
+              icon="close"
+              size="small"
+              @click="() => { addingTrafficForKey = null }" />
+          </div>
+          <a-tag
+            key="addingTraffic"
+            style="margin:2px;"
+            v-else
+            @click="addingTraffic(record.key, record.traffics)"
+          >
+            <a-icon type="plus" />
+            {{ $t('label.add.traffic') }}
+          </a-tag>
+        </div>
+      </template>
+      <template slot="actions" slot-scope="text, record">
+        <a-button v-if="physicalNetworks.indexOf(record) > 0" type="danger" shape="circle" icon="delete" @click="onDelete(record)" />
+      </template>
+      <template slot="footer" v-if="isAdvancedZone">
+        <a-button
+          @click="handleAddPhysicalNetwork">
+          {{ $t('label.add.physical.network') }}
+        </a-button>
+      </template>
+    </a-table>
+    <div class="form-action">
+      <a-button
+        v-if="!isFixError"
+        class="button-right"
+        @click="handleBack">
+        {{ $t('label.previous') }}
+      </a-button>
+      <a-button
+        class="button-next"
+        type="primary"
+        @click="handleSubmit">
+        {{ $t('label.next') }}
+      </a-button>
+    </div>
+    <a-modal
+      :visible="showError"
+      title="Error!"
+      @ok="() => { showError = false }"
+      @cancel="() => { showError = false }"
+      centered
+    >
+      <span>{{ $t('message.required.traffic.type') }}</span>
+    </a-modal>
+  </div>
+</template>
+<script>
+
+export default {
+  props: {
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    isFixError: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      formItemLayout: {
+        labelCol: { span: 10 },
+        wrapperCol: { span: 12 }
+      },
+      physicalNetworks: [],
+      count: 0,
+      zoneDescription: {
+        Basic: 'message.setup.physical.network.during.zone.creation.basic',
+        Advanced: 'message.setup.physical.network.during.zone.creation'
+      },
+      hasUnusedPhysicalNetwork: false,
+      trafficColors: {
+        public: 'orange',
+        guest: 'green',
+        management: 'blue',
+        storage: 'red'
+      },
+      showEditTraffic: false,
+      trafficInEdit: null,
+      availableTrafficToAdd: ['storage'],
+      addingTrafficForKey: '-1',
+      trafficLabelSelected: null,
+      showError: false,
+      defaultTrafficOptions: []
+    }
+  },
+  computed: {
+    columns () {
+      const columns = []
+      columns.push({
+        title: this.$t('label.network.name'),
+        dataIndex: 'name',
+        width: '30%',
+        scopedSlots: { customRender: 'name' }
+      })
+      columns.push({
+        title: this.$t('label.isolation.method'),
+        dataIndex: 'isolationMethod',
+        width: '20%',
+        scopedSlots: { customRender: 'isolationMethod' }
+      })
+      columns.push({
+        title: this.$t('label.traffic.types'),
+        key: 'traffics',
+        dataIndex: 'traffics',
+        scopedSlots: { customRender: 'traffics' }
+      })
+      if (this.isAdvancedZone) {
+        columns.push({
+          title: '',
+          dataIndex: 'actions',
+          scopedSlots: { customRender: 'actions' },
+          width: 50
+        })
+      }
+
+      return columns
+    },
+    isAdvancedZone () {
+      return this.zoneType === 'Advanced'
+    },
+    zoneType () {
+      return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : null
+    },
+    securityGroupsEnabled () {
+      return this.isAdvancedZone && (this.prefillContent.securityGroupsEnabled ? this.prefillContent.securityGroupsEnabled.value : false)
+    },
+    networkOfferingSelected () {
+      return this.prefillContent.networkOfferingSelected
+    },
+    needsPublicTraffic () {
+      if (!this.isAdvancedZone) { // Basic zone
+        return (this.networkOfferingSelected && (this.networkOfferingSelected.havingEIP || this.networkOfferingSelected.havingELB))
+      } else {
+        return !this.securityGroupsEnabled
+      }
+    },
+    requiredTrafficTypes () {
+      const traffics = ['management', 'guest']
+      if (this.needsPublicTraffic) {
+        traffics.push('public')
+      }
+      return traffics
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.defaultTrafficOptions = ['management', 'guest', 'storage']
+    if (this.isAdvancedZone || this.needsPublicTraffic) {
+      this.defaultTrafficOptions.push('public')
+    }
+    this.physicalNetworks = this.prefillContent.physicalNetworks
+    this.hasUnusedPhysicalNetwork = this.getHasUnusedPhysicalNetwork()
+    const requiredTrafficTypes = this.requiredTrafficTypes
+    if (this.physicalNetworks && this.physicalNetworks.length > 0) {
+      this.count = this.physicalNetworks.length
+      requiredTrafficTypes.forEach(type => {
+        let foundType = false
+        this.physicalNetworks.forEach(net => {
+          for (const index in net.traffics) {
+            const traffic = net.traffics[index]
+            if (traffic.type === 'storage') {
+              const idx = this.availableTrafficToAdd.indexOf(traffic.type)
+              if (idx > -1) this.availableTrafficToAdd.splice(idx, 1)
+            }
+            if (traffic.type === type) {
+              foundType = true
+            }
+          }
+        })
+        if (!foundType) this.availableTrafficToAdd.push(type)
+      })
+    } else {
+      const traffics = requiredTrafficTypes.map(item => {
+        return { type: item, label: '' }
+      })
+      this.count = 1
+      this.physicalNetworks = [{ key: this.randomKeyTraffic(this.count), name: 'Physical Network 1', isolationMethod: 'VLAN', traffics: traffics }]
+    }
+    if (this.isAdvancedZone) {
+      this.availableTrafficToAdd.push('guest')
+    }
+    this.emitPhysicalNetworks()
+  },
+  methods: {
+    onCellChange (key, dataIndex, value) {
+      const physicalNetworks = [...this.physicalNetworks]
+      const target = physicalNetworks.find(item => item.key === key)
+      if (target) {
+        target[dataIndex] = value
+        this.physicalNetworks = physicalNetworks
+      }
+      this.emitPhysicalNetworks()
+    },
+    onDelete (record) {
+      record.traffics.forEach(traffic => {
+        if (!this.availableTrafficToAdd.includes(traffic.type)) {
+          this.availableTrafficToAdd.push(traffic.type)
+        }
+      })
+      const physicalNetworks = [...this.physicalNetworks]
+      this.physicalNetworks = physicalNetworks.filter(item => item.key !== record.key)
+      this.hasUnusedPhysicalNetwork = this.getHasUnusedPhysicalNetwork()
+      this.emitPhysicalNetworks()
+    },
+    handleAddPhysicalNetwork () {
+      const { count, physicalNetworks } = this
+      const newData = {
+        key: this.randomKeyTraffic(count + 1),
+        name: `Physical Network ${count + 1}`,
+        isolationMethod: 'VLAN',
+        traffics: []
+      }
+      this.physicalNetworks = [...physicalNetworks, newData]
+      this.count = count + 1
+      this.hasUnusedPhysicalNetwork = this.getHasUnusedPhysicalNetwork()
+    },
+    isValidSetup () {
+      const shouldHaveLabels = this.physicalNetworks.length > 1
+      let isValid = true
+      this.requiredTrafficTypes.forEach(type => {
+        let foundType = false
+        this.physicalNetworks.forEach(net => {
+          net.traffics.forEach(traffic => {
+            if (traffic.type === type) {
+              foundType = true
+            }
+            if (shouldHaveLabels && (!traffic.label || traffic.label.length === 0)) {
+              isValid = false
+            }
+          })
+        })
+        if (!foundType || !isValid) {
+          isValid = false
+        }
+      })
+      return isValid
+    },
+    handleSubmit (e) {
+      if (this.isValidSetup()) {
+        if (this.isFixError) {
+          this.$emit('submitLaunchZone')
+          return
+        }
+        this.$emit('nextPressed', this.physicalNetworks)
+      } else {
+        this.showError = true
+      }
+    },
+    handleBack (e) {
+      this.$emit('backPressed')
+    },
+    addingTraffic (key, traffics) {
+      this.addingTrafficForKey = key
+      this.availableTrafficToAdd.forEach(type => {
+        const trafficEx = traffics.filter(traffic => traffic.type === type)
+        if (!trafficEx || trafficEx.length === 0) {
+          this.trafficLabelSelected = type
+          return false
+        }
+      })
+    },
+    trafficAdded (trafficType) {
+      const trafficKey = this.physicalNetworks.findIndex(network => network.key === this.addingTrafficForKey)
+      this.physicalNetworks[trafficKey].traffics.push({
+        type: this.trafficLabelSelected.toLowerCase(),
+        label: ''
+      })
+      if (!this.isAdvancedZone || this.trafficLabelSelected !== 'guest') {
+        this.availableTrafficToAdd = this.availableTrafficToAdd.filter(item => item !== this.trafficLabelSelected)
+      }
+      this.addingTrafficForKey = null
+      this.trafficLabelSelected = null
+      this.emitPhysicalNetworks()
+    },
+    editTraffic (key, traffic, $event) {
+      this.trafficInEdit = {
+        key: key,
+        traffic: traffic
+      }
+      this.showEditTraffic = true
+      this.form.setFieldsValue({
+        trafficLabel: this.trafficInEdit !== null ? this.trafficInEdit.traffic.label : null
+      })
+    },
+    deleteTraffic (key, traffic, $event) {
+      const trafficKey = this.physicalNetworks.findIndex(network => network.key === key)
+      this.physicalNetworks[trafficKey].traffics = this.physicalNetworks[trafficKey].traffics.filter(tr => {
+        return tr.type !== traffic.type
+      })
+      if (!this.isAdvancedZone || traffic.type !== 'guest') {
+        this.availableTrafficToAdd.push(traffic.type)
+      }
+      this.hasUnusedPhysicalNetwork = this.getHasUnusedPhysicalNetwork()
+      this.emitPhysicalNetworks()
+    },
+    updateTrafficLabel (trafficInEdit) {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.showEditTraffic = false
+          trafficInEdit.traffic.label = values.trafficLabel
+          this.trafficInEdit = null
+        }
+      })
+      this.emitPhysicalNetworks()
+    },
+    cancelEditTraffic () {
+      this.showEditTraffic = false
+      this.trafficInEdit = null
+    },
+    getHasUnusedPhysicalNetwork () {
+      let hasUnused = false
+      if (this.physicalNetworks && this.physicalNetworks.length > 0) {
+        this.physicalNetworks.forEach(item => {
+          if (!item.traffics || item.traffics.length === 0) {
+            hasUnused = true
+          }
+        })
+      }
+      return hasUnused
+    },
+    emitPhysicalNetworks () {
+      if (this.physicalNetworks) {
+        this.$emit('fieldsChanged', { physicalNetworks: this.physicalNetworks })
+      }
+    },
+    isDisabledTraffic (traffics, traffic) {
+      const trafficEx = traffics.filter(item => item.type === traffic)
+      if (trafficEx && trafficEx.length > 0) {
+        return true
+      }
+
+      return false
+    },
+    isShowAddTraffic (traffics) {
+      if (!this.availableTrafficToAdd || this.availableTrafficToAdd.length === 0) {
+        return false
+      }
+
+      if (traffics.length === this.defaultTrafficOptions.length) {
+        return false
+      }
+
+      if (this.isAdvancedZone && this.availableTrafficToAdd.length === 1) {
+        const guestEx = traffics.filter(traffic => traffic.type === 'guest')
+        if (guestEx && guestEx.length > 0) {
+          return false
+        }
+      }
+
+      return true
+    },
+    randomKeyTraffic (key) {
+      const now = new Date()
+      const random = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+      return [key, random, now.getTime()].join('')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .form-action {
+    margin-top: 16px;
+  }
+
+  .traffic-type-action {
+    margin-left: 2px;
+    margin-right: 2px;
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  .physical-network-support {
+    margin: 10px 0;
+  }
+
+  .traffic-select-item {
+    /deep/.icon-button {
+      margin: 0 0 0 5px;
+    }
+  }
+</style>
diff --git a/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue b/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
new file mode 100644
index 00000000000..440ec4653db
--- /dev/null
+++ b/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
@@ -0,0 +1,599 @@
+// 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>
+    <a-card
+      class="ant-form-text"
+      style="text-align: justify; margin: 10px 0; padding: 24px;"
+      v-html="$t(description)">
+    </a-card>
+    <a-form class="form-content" :form="form" @submit="handleSubmit">
+      <a-form-item
+        :label="$t('label.name')"
+        v-bind="formItemLayout"
+        has-feedback>
+        <a-input
+          v-decorator="['name', {
+            rules: [{
+              required: true,
+              message: 'Please enter zone name',
+              initialValue: name
+            }]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.ipv4.dns1')"
+        v-bind="formItemLayout"
+        has-feedback>
+        <a-input
+          v-decorator="['ipv4Dns1', {
+            rules: [
+              {
+                required: true,
+                message: 'Please enter IpV4 DNS 1',
+                initialValue: ipv4Dns1
+              },
+              {
+                validator: checkIpFormat,
+                ipV4: true,
+                message: 'Please enter a valid IP v4 address.'
+              }
+            ]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.ipv4.dns2')"
+        v-bind="formItemLayout"
+        has-feedback>
+        <a-input
+          v-decorator="['ipv4Dns2', {
+            rules: [
+              {
+                message: 'Please enter IpV4 DNS 2',
+                initialValue: ipv4Dns2
+              },
+              {
+                validator: checkIpFormat,
+                ipV4: true,
+                message: 'Please enter a valid IP v4 address.'
+              }
+            ]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.ipv6.dns1')"
+        v-bind="formItemLayout"
+        v-if="isAdvancedZone && !securityGroupsEnabled"
+        has-feedback>
+        <a-input
+          v-decorator="['ipv6Dns1', {
+            rules: [
+              {
+                message: 'Please enter IpV6 DNS 1',
+                initialValue: ipv6Dns1
+              },
+              {
+                validator: checkIpFormat,
+                ipV6: true,
+                message: 'Please enter a valid IP v6 address.'
+              }
+            ]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.ipv6.dns2')"
+        v-bind="formItemLayout"
+        v-if="isAdvancedZone && !securityGroupsEnabled"
+        has-feedback>
+        <a-input
+          v-decorator="['ipv6Dns2', {
+            rules: [
+              {
+                message: 'Please enter IpV6 DNS 2',
+                initialValue: ipv6Dns2
+              },
+              {
+                validator: checkIpFormat,
+                ipV6: true,
+                message: 'Please enter a valid IP v6 address.'
+              }
+            ]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.internal.dns.1')"
+        v-bind="formItemLayout"
+        has-feedback>
+        <a-input
+          v-decorator="['internalDns1', {
+            rules: [
+              {
+                required: true,
+                message: 'Please enter Internal DNS 1',
+                initialValue: internalDns1
+              },
+              {
+                validator: checkIpFormat,
+                ipV4: true,
+                message: 'Please enter a valid IP v4 address.'
+              }
+            ]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.internal.dns.2')"
+        v-bind="formItemLayout"
+        has-feedback>
+        <a-input
+          v-decorator="['internalDns2', {
+            rules: [
+              {
+                message: 'Please enter Internal DNS 2',
+                initialValue: internalDns2
+              },
+              {
+                validator: checkIpFormat,
+                ipV4: true,
+                message: 'Please enter a valid IP v4 address.'
+              }
+            ]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.hypervisor')"
+        v-bind="formItemLayout"
+        has-feedback>
+        <a-select
+          :loading="hypervisors === null"
+          showSearch
+          v-decorator="['hypervisor',{
+            rules: [{
+              required: true,
+              message: 'Please select hypervisor type',
+              initialValue: currentHypervisor
+            }]
+          }]"
+          placeholder="Please select hypervisor type"
+        >
+          <a-select-option v-for="hypervisor in hypervisors" :key="hypervisor.name">
+            {{ hypervisor.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.network.offering')"
+        v-bind="formItemLayout"
+        v-if="!isAdvancedZone || securityGroupsEnabled"
+        has-feedback>
+        <a-select
+          :loading="availableNetworkOfferings === null"
+          v-decorator="['networkOfferingId', {
+            rules: [{
+              message: 'Please select network offering',
+              initialValue: currentNetworkOfferingId
+            }]
+          }]"
+          placeholder="Please select network offering"
+        >
+          <a-select-option
+            v-for="networkOffering in availableNetworkOfferings"
+            :key="networkOffering.id">
+            {{ networkOffering.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.network.domain')"
+        v-bind="formItemLayout"
+        has-feedback>
+        <a-input
+          v-decorator="['networkDomain', {
+            rules: [{
+              message: 'Please enter Network domain',
+              intialValue: networkDomain
+            }]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.guest.cidr')"
+        v-bind="formItemLayout"
+        v-if="isAdvancedZone && !securityGroupsEnabled"
+        has-feedback>
+        <a-input
+          v-decorator="['guestcidraddress', {
+            rules: [{
+              intialValue: guestcidraddress
+            }]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.dedicated')"
+        v-bind="formItemLayout">
+        <a-switch
+          v-decorator="['isDedicated', { valuePropName: 'checked' }]"
+          :value="isDedicated"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.domains')"
+        v-bind="formItemLayout"
+        has-feedback
+        v-if="isDedicated">
+        <a-select
+          :loading="domains === null"
+          v-decorator="['domainId', {
+            rules: [{
+              initialValue: domain
+            }]
+          }]"
+          placeholder="Please select domain to dedicate to"
+        >
+          <a-select-option v-for="dom in domains" :key="dom.id">
+            {{ dom.path }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.account')"
+        v-bind="formItemLayout"
+        v-if="isDedicated">
+        <a-input
+          v-decorator="['account', {
+            rules: [{
+              intialValue: guestcidraddress
+            }]
+          }]"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.local.storage.enabled')"
+        v-bind="formItemLayout">
+        <a-switch
+          v-decorator="['localstorageenabled', { valuePropName: 'checked' }]"
+          :value="localstorageenabled"
+        />
+      </a-form-item>
+      <a-form-item
+        :label="$t('label.local.storage.enabled.system.vms')"
+        v-bind="formItemLayout">
+        <a-switch
+          v-decorator="['localstorageenabledforsystemvm', { valuePropName: 'checked' }]"
+          :value="localstorageenabledforsystemvm"
+        />
+      </a-form-item>
+    </a-form>
+    <div class="form-action">
+      <a-button
+        @click="handleBack"
+        class="button-back"
+        v-if="!isFixError">
+        {{ $t('label.previous') }}
+      </a-button>
+      <a-button type="primary" @click="handleSubmit" class="button-next">
+        {{ $t('label.next') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { api } from '@/api'
+
+export default {
+  props: {
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    isFixError: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => ({
+    description: 'message.desc.zone',
+    formItemLayout: {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 12 }
+    },
+    hypervisors: null,
+    networkOfferings: null,
+    domains: null,
+    baremetalProviders: ['BaremetalDhcpProvider', 'BaremetalPxeProvider', 'BaremetalUserdataProvider'],
+    selectedBaremetalProviders: [],
+    availableNetworkOfferings: null,
+    ipV4Regex: /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i,
+    ipV6Regex: /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i
+  }),
+  created () {
+    this.hypervisors = this.prefillContent.hypervisors ? this.prefillContent.hypervisors : null
+    this.networkOfferings = this.prefillContent.networkOfferings ? this.prefillContent.networkOfferings : null
+    this.form = this.$form.createForm(this, {
+      onFieldsChange: (_, changedFields) => {
+        if (changedFields.networkOfferingId && this.prefillContent.networkOfferingSelected) {
+          if (this.prefillContent.networkOfferingSelected.id !== changedFields.networkOfferingId.value) {
+            changedFields.physicalNetworks = []
+          }
+        }
+        if (this.networkOfferings && changedFields.networkOfferingId) {
+          changedFields.networkOfferings = this.networkOfferings
+          changedFields.networkOfferingSelected = this.networkOfferings[changedFields.networkOfferingId.value]
+        }
+        if (this.hypervisors && changedFields.hypervisor) {
+          changedFields.hypervisors = this.hypervisors
+          this.availableNetworkOfferings = this.getAvailableNetworkOfferings(changedFields.hypervisor)
+        }
+        if (this.domains && changedFields.domain) {
+          changedFields.domains = this.domains
+        }
+        this.$emit('fieldsChanged', changedFields)
+      }
+    })
+  },
+  mounted () {
+    this.form.setFieldsValue({
+      name: this.name,
+      ipv4Dns1: this.ipv4Dns1,
+      ipv4Dns2: this.ipv4Dns2,
+      ipv6Dns1: this.ipv6Dns1,
+      ipv6Dns2: this.ipv6Dns2,
+      internalDns1: this.internalDns1,
+      internalDns2: this.internalDns2,
+      hypervisor: this.currentHypervisor,
+      networkOfferingId: this.currentNetworkOfferingId,
+      networkDomain: this.networkDomain,
+      guestcidraddress: this.isAdvancedZone && !this.securityGroupsEnabled ? this.guestcidraddress : null,
+      isDedicated: this.isDedicated,
+      domain: this.domain,
+      account: this.account,
+      localstorageenabled: this.localstorageenabled,
+      localstorageenabledforsystemvm: this.localstorageenabledforsystemvm
+    })
+
+    const cForm = this.form
+    api('listHypervisors', { listAll: true }).then(json => {
+      this.hypervisors = json.listhypervisorsresponse.hypervisor
+      if ('listSimulatorHAStateTransitions' in this.$store.getters.apis) {
+        this.hypervisors.push({ name: 'Simulator' })
+      }
+      cForm.setFieldsValue({
+        hypervisor: this.currentHypervisor
+      })
+    })
+
+    if (!this.isAdvancedZone || this.securityGroupsEnabled) {
+      api('listNetworkOfferings', { state: 'Enabled', guestiptype: 'Shared' }).then(json => {
+        this.networkOfferings = {}
+        json.listnetworkofferingsresponse.networkoffering.forEach(offering => {
+          this.setupNetworkOfferingAdditionalFlags(offering)
+          this.networkOfferings[offering.id] = offering
+        })
+        this.availableNetworkOfferings = this.getAvailableNetworkOfferings(this.currentHypervisor)
+        cForm.setFieldsValue({
+          networkOfferingId: this.currentNetworkOfferingId
+        })
+      })
+    }
+
+    api('listDomains', { listAll: true }).then(json => {
+      this.domains = {}
+      json.listdomainsresponse.domain.forEach(dom => {
+        this.domains[dom.id] = dom
+      })
+      cForm.setFieldsValue({
+        domain: this.domain
+      })
+    })
+  },
+  computed: {
+    isAdvancedZone () {
+      return this.zoneType === 'Advanced'
+    },
+    zoneType () {
+      return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : null
+    },
+    securityGroupsEnabled () {
+      return this.isAdvancedZone && (this.prefillContent.securityGroupsEnabled ? this.prefillContent.securityGroupsEnabled.value : false)
+    },
+    name () {
+      return this.prefillContent.name ? this.prefillContent.name.value : null
+    },
+    ipv4Dns1 () {
+      return this.prefillContent.ipv4Dns1 ? this.prefillContent.ipv4Dns1.value : null
+    },
+    ipv4Dns2 () {
+      return this.prefillContent.ipv4Dns2 ? this.prefillContent.ipv4Dns2.value : null
+    },
+    ipv6Dns1 () {
+      return this.prefillContent.ipv6Dns1 ? this.prefillContent.ipv6Dns1.value : null
+    },
+    ipv6Dns2 () {
+      return this.prefillContent.ipv6Dns2 ? this.prefillContent.ipv6Dns2.value : null
+    },
+    internalDns1 () {
+      return this.prefillContent.internalDns1 ? this.prefillContent.internalDns1.value : null
+    },
+    internalDns2 () {
+      return this.prefillContent.internalDns2 ? this.prefillContent.internalDns2.value : null
+    },
+    currentHypervisor () {
+      if (this.prefillContent.hypervisor) {
+        return this.prefillContent.hypervisor.value
+      } else if (this.hypervisors && this.hypervisors.length > 0) {
+        return this.hypervisors[0]
+      }
+      return null
+    },
+    currentNetworkOfferingId () {
+      const lastNetworkOfferingId = this.prefillContent.networkOfferingSelected ? this.prefillContent.networkOfferingSelected.id : null
+      if (this.networkOfferings) {
+        if (lastNetworkOfferingId !== null && this.networkOfferings[lastNetworkOfferingId]) {
+          return lastNetworkOfferingId
+        }
+        return this.availableNetworkOfferings[0].id
+      }
+      return null
+    },
+    networkDomain () {
+      return this.prefillContent.networkDomain ? this.prefillContent.networkDomain.value : null
+    },
+    guestcidraddress () {
+      return this.prefillContent.guestcidraddress ? this.prefillContent.guestcidraddress.value : '10.1.1.0/24'
+    },
+    isDedicated () {
+      return this.prefillContent.isDedicated ? this.prefillContent.isDedicated.value : false
+    },
+    domain () {
+      const lastDomainId = this.prefillContent.domainId ? this.prefillContent.domainId.value : null
+      if (this.domains !== null && lastDomainId !== null && this.domains[lastDomainId]) {
+        return lastDomainId
+      }
+      return null
+    },
+    account () {
+      return this.prefillContent.account ? this.prefillContent.account.value : null
+    },
+    localstorageenabled () {
+      return this.prefillContent.localstorageenabled ? this.prefillContent.localstorageenabled.value : false
+    },
+    localstorageenabledforsystemvm () {
+      return this.prefillContent.localstorageenabledforsystemvm ? this.prefillContent.localstorageenabledforsystemvm.value : false
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+
+        if (this.isFixError) {
+          this.$emit('submitLaunchZone')
+          return
+        }
+
+        this.$emit('nextPressed')
+      })
+    },
+    handleBack (e) {
+      this.$emit('backPressed')
+    },
+    setupNetworkOfferingAdditionalFlags (nOffering) {
+      nOffering.havingNetscaler = false
+      nOffering.havingSG = false
+      nOffering.havingEIP = false
+      nOffering.havingELB = false
+      nOffering.selectedBaremetalProviders = []
+
+      nOffering.service.forEach(service => {
+        service.provider.forEach(provider => {
+          if (provider.name === 'Netscaler') {
+            nOffering.havingNetscaler = true
+          } else if (this.baremetalProviders.includes(provider.name)) {
+            this.selectedBaremetalProviders.push(this.name)
+            nOffering.selectedBaremetalProviders = this.selectedBaremetalProviders
+          }
+        })
+
+        if (service.name === 'SecurityGroup') {
+          nOffering.havingSG = true
+        } else if (service.name === 'StaticNat') {
+          service.capability.forEach(capability => {
+            if (capability.name === 'ElasticIp' && capability.value === 'true') {
+              nOffering.havingEIP = true
+            }
+          })
+        } else if (service.name === 'Lb') {
+          service.capability.forEach(capability => {
+            if (capability.name === 'ElasticLb' && capability.value === 'true') {
+              nOffering.havingELB = true
+            }
+          })
+        }
+      })
+    },
+    getAvailableNetworkOfferings (hypervisor) {
+      if (this.networkOfferings) {
+        return Object.values(this.networkOfferings).filter(nOffering => {
+          if ((hypervisor === 'VMware' ||
+            (this.isAdvancedZone && this.securityGroupsEnabled)) &&
+            (nOffering.havingEIP && nOffering.havingELB)) {
+            return false
+          }
+
+          if (this.isAdvancedZone && this.securityGroupsEnabled && !nOffering.havingSG) {
+            return false
+          }
+
+          return true
+        })
+      }
+      return null
+    },
+    checkIpFormat (rule, value, callback) {
+      if (!value || value === '') {
+        callback()
+      } else if (rule.ipV4 && !this.ipV4Regex.test(value)) {
+        callback(rule.message)
+      } else if (rule.ipV6 && !this.ipV6Regex.test(value)) {
+        callback(rule.message)
+      } else {
+        callback()
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .form-content {
+    border: 1px dashed #e9e9e9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    vertical-align: center;
+    padding: 8px;
+    padding-top: 16px;
+    margin-top: 8px;
+    max-height: 40vh;
+    overflow-y: auto;
+
+    /deep/.has-error {
+      .ant-form-explain {
+        text-align: left;
+      }
+    }
+
+    /deep/.ant-form-item-control {
+      text-align: left;
+    }
+  }
+</style>
diff --git a/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue b/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
new file mode 100644
index 00000000000..80e9ddc47b2
--- /dev/null
+++ b/ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue
@@ -0,0 +1,153 @@
+// 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>
+    <a-form
+      class="form-content"
+      :form="form"
+      @submit="handleSubmit">
+      <a-form-item>
+        <a-radio-group
+          v-decorator="['zoneType', {
+            rules: [{
+              required: true,
+              message: 'Please select zone type',
+              initialValue: zoneType
+            }]
+          }]">
+          <a-card :gutter="12" class="card-item">
+            <a-col :md="6" :lg="6">
+              <a-radio class="card-form-item" value="Advanced">{{ $t('label.advanced') }}</a-radio>
+            </a-col>
+            <a-col :md="18" :lg="18">
+              <a-card class="ant-form-text zone-support">{{ $t(zoneDescription.Advanced) }}</a-card>
+            </a-col>
+            <a-col :md="6" :lg="6" style="margin-top: 15px">
+              <a-form-item
+                class="card-form-item"
+                v-bind="formItemLayout">
+                <a-switch
+                  class="card-form-item"
+                  v-decorator="['securityGroupsEnabled', { valuePropName: 'checked' }]"
+                  :value="securityGroupsEnabled"
+                  :disabled="!isAdvancedZone"
+                />
+              </a-form-item>
+              <span>{{ $t('label.menu.security.groups') }}</span>
+            </a-col>
+            <a-col :md="18" :lg="18" style="margin-top: 15px;">
+              <a-card class="zone-support">{{ $t(zoneDescription.SecurityGroups) }}</a-card>
+            </a-col>
+          </a-card>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+    <div class="form-action">
+      <a-button type="primary" @click="handleSubmit" class="button-next">
+        {{ $t('label.next') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    prefillContent: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data: () => ({
+    formItemLayout: {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 }
+    },
+    zoneDescription: {
+      Advanced: 'message.desc.advanced.zone',
+      SecurityGroups: 'message.advanced.security.group'
+    }
+  }),
+  beforeCreate () {
+    this.form = this.$form.createForm(this, {
+      onFieldsChange: (_, changedFields) => {
+        this.$emit('fieldsChanged', changedFields)
+      }
+    })
+  },
+  mounted () {
+    this.form.setFieldsValue({
+      zoneType: this.zoneType,
+      securityGroupsEnabled: this.securityGroupsEnabled
+    })
+  },
+  computed: {
+    isAdvancedZone () {
+      return this.zoneType === 'Advanced'
+    },
+    zoneType () {
+      return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : 'Advanced'
+    },
+    securityGroupsEnabled () {
+      return this.isAdvancedZone && (this.prefillContent.securityGroupsEnabled ? this.prefillContent.securityGroupsEnabled.value : false)
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$emit('nextPressed')
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+  .form-content {
+    border: 1px dashed #e9e9e9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    vertical-align: center;
+    padding: 8px;
+    padding-top: 16px;
+    margin-top: 8px;
+  }
+
+  .card-item {
+    margin-top: 10px;
+
+    .card-form-item {
+      float: left;
+    }
+
+    .checkbox-advance {
+      margin-top: 10px;
+    }
+
+    .zone-support {
+      text-align: justify;
+      background: #fafafa;
+    }
+  }
+</style>
diff --git a/ui/vue.config.js b/ui/vue.config.js
index d9ac391deb3..3bb6d87c7a9 100644
--- a/ui/vue.config.js
+++ b/ui/vue.config.js
@@ -114,7 +114,8 @@ module.exports = {
         target: process.env.CS_URL || 'http://localhost:8080',
         secure: false,
         ws: false,
-        changeOrigin: true
+        changeOrigin: true,
+        proxyTimeout: 10 * 60 * 1000 // 10 minutes
       }
     },
     https: process.env.HTTPS_KEY ? {