network: add network form (#111)

Add network form for shared, l2 and isolated networks

Co-authored-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
Co-authored-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/locales/en.json

@@ -102,7 +102,7 @@
 "broadcastdomaintype": "Broadcast Domain Type",
 "broadcasturi": "Broadcast URI",
 "bucket": "Bucket",
-"bypassVlanOverlapCheck": "Bypass VLAN id/range overlap",
+"bypassvlanoverlapcheck": "Bypass VLAN id/range overlap",
 "cachemode": "Write-cache Type",
 "capacity": "Capacity",
 "capacityBytes": "Capacity Bytes",
@@ -166,7 +166,7 @@
 "diskIopsReadRate": "Disk Read Rate (IOPS)",
 "diskIopsWriteRate": "Disk Write Rate (IOPS)",
 "diskoffering": "Disk Offering",
-"diskOfferingId": "Disk Offerings",
+"diskofferingid": "Disk Offering",
 "diskSize": "Disk Size (in GB)",
 "diskiopstotal": "IOPS",
 "diskioread": "Disk Read (IO)",
@@ -207,7 +207,7 @@
 "esplifetime": "ESP Lifetime (second)",
 "esppolicy": "ESP policy",
 "expunge": "Expunge",
-"externalId": "External Id",
+"externalid": "External Id",
 "extra": "Extra Arguments",
 "fingerprint": "FingerPrint",
 "firstname": "First Name",
@@ -319,7 +319,8 @@
 "isextractable": "Extractable",
 "isfeatured": "Featured",
 "iso": "ISO",
-"isolatedpvlanId": "Secondary Isolated VLAN ID",
+"isolatedpvlantype": "Secondary Isolated VLAN Type",
+"isolatedpvlanid": "Secondary Isolated VLAN ID",
 "isolationmethods": "Isolation method",
 "isolationuri": "Isolation URI",
 "isoname": "Attached ISO",

ui/src/views/AutogenView.vue

@@ -111,10 +111,16 @@
             <a-form-item
               v-for="(field, fieldIndex) in currentAction.paramFields"
               :key="fieldIndex"
-              :label="$t(field.name)"
               :v-bind="field.name"
               v-if="!(currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].value)"
             >
+              <span slot="label">
+                {{ $t(field.name) }}
+                <a-tooltip :title="field.description">
+                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </span>
+
               <span v-if="field.type==='boolean'">
                 <a-switch
                   v-decorator="[field.name, {
@@ -198,8 +204,7 @@
                   v-decorator="[field.name, {
                     rules: [{ required: field.required, message: 'Please enter input' }]
                   }]"
-                  :placeholder="field.description"
+                  :placeholder="field.description" />
-                />
               </span>
             </a-form-item>
           </a-form>

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -0,0 +1,472 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-spin :spinning="loading">
+    <div class="form-layout">
+      <div class="form">
+        <a-form
+          :form="form"
+          layout="vertical"
+          @submit="handleSubmit">
+          <a-form-item :label="$t('name')">
+            <a-input
+              v-decorator="['name', {
+                rules: [{ required: true, message: 'Please enter name' }]
+              }]"
+              :placeholder="this.$t('Name')"/>
+          </a-form-item>
+          <a-form-item :label="$t('displaytext')">
+            <a-input
+              v-decorator="['displaytext', {
+                rules: [{ required: true, message: 'Please enter display text' }]
+              }]"
+              :placeholder="this.$t('Display text')"/>
+          </a-form-item>
+          <a-form-item :label="$t('zoneid')">
+            <a-select
+              v-decorator="['zoneid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="zoneLoading"
+              :placeholder="this.$t('.zoneid')"
+              @change="val => { this.handleZoneChanged(this.zones[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('domain')" v-if="this.isAdminOrDomainAdmin()">
+            <a-select
+              v-decorator="['domainid', {}]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="domainLoading"
+              :placeholder="this.$t('domainid')"
+              @change="val => { this.handleDomainChange(this.domains[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('networkofferingid')">
+            <a-select
+              v-decorator="['networkofferingid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="networkOfferingLoading"
+              :placeholder="this.$t('networkofferingid')"
+              @change="val => { this.handleNetworkOfferingChange(this.networkOfferings[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.networkOfferings" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('vlan')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
+            <a-input
+              v-decorator="['vlanid', {
+                rules: [{ required: true, message: 'Please enter value' }]
+              }]"
+              :placeholder="this.$t('vlanid')"/>
+          </a-form-item>
+          <a-form-item :label="$t('vpcid')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.forvpc">
+            <a-select
+              v-decorator="['vpcid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="vpcLoading"
+              :placeholder="this.$t('vpcid')"
+              @change="val => { this.selectedVpc = this.vpcs[val] }">
+              <a-select-option v-for="(opt, optIndex) in this.vpcs" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('externalid')">
+            <a-input
+              v-decorator="['externalid', {}]"
+              :placeholder="$t('externalid')"/>
+          </a-form-item>
+          <a-form-item :label="$t('gateway')">
+            <a-input
+              v-decorator="['gateway', {}]"
+              :placeholder="this.$t('gateway')"/>
+          </a-form-item>
+          <a-form-item :label="$t('netmask')">
+            <a-input
+              v-decorator="['netmask', {}]"
+              :placeholder="this.$t('netmask')"/>
+          </a-form-item>
+          <a-form-item :label="$t('networkdomain')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && !this.selectedNetworkOffering.forvpc">
+            <a-input
+              v-decorator="['networkdomain', {}]"
+              :placeholder="this.$t('networkdomain')"/>
+          </a-form-item>
+          <a-form-item :label="$t('account')" v-if="this.accountVisible">
+            <a-input
+              v-decorator="['account', {
+                rules: [
+                  { required: true, message: this.$t('required') }
+                ]
+              }]"
+              :placeholder="this.$t('account')"/>
+          </a-form-item>
+          <div :span="24" class="action-button">
+            <a-button
+              :loading="actionLoading"
+              @click="closeAction">
+              {{ this.$t('Cancel') }}
+            </a-button>
+            <a-button
+              :loading="actionLoading"
+              type="primary"
+              @click="handleSubmit">
+              {{ this.$t('OK') }}
+            </a-button>
+          </div>
+        </a-form>
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+  name: 'CreateIsolatedNetworkForm',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    vpc: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      actionLoading: false,
+      domains: [],
+      domainLoading: false,
+      selectedDomain: {},
+      zones: [],
+      zoneLoading: false,
+      selectedZone: {},
+      networkOfferings: [],
+      networkOfferingLoading: false,
+      selectedNetworkOffering: {},
+      vpcs: [],
+      vpcLoading: false,
+      selectedVpc: {},
+      accountVisible: this.isAdminOrDomainAdmin()
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.domains = [
+      {
+        id: '-1',
+        name: ' '
+      }
+    ]
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+    },
+    isAdmin () {
+      return ['Admin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    isAdminOrDomainAdmin () {
+      return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    isObjectEmpty (obj) {
+      return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
+    },
+    arrayHasItems (array) {
+      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
+    },
+    isValidTextValueForKey (obj, key) {
+      return key in obj && obj[key] != null && obj[key].length > 0
+    },
+    fetchZoneData () {
+      const params = {}
+      params.listAll = true
+      this.zoneLoading = true
+      api('listZones', params).then(json => {
+        for (const i in json.listzonesresponse.zone) {
+          const zone = json.listzonesresponse.zone[i]
+          if (zone.networktype === 'Advanced' && zone.securitygroupsenabled !== true) {
+            this.zones.push(zone)
+          }
+        }
+        this.zoneLoading = false
+        if (this.arrayHasItems(this.zones)) {
+          this.form.setFieldsValue({
+            zoneid: 0
+          })
+          this.handleZoneChange(this.zones[0])
+        }
+      })
+    },
+    handleZoneChange (zone) {
+      this.selectedZone = zone
+      this.updateVPCCheckAndFetchNetworkOfferingData()
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.details = 'min'
+      this.domainLoading = true
+      api('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+        this.form.setFieldsValue({
+          domainid: 0
+        })
+        this.handleDomainChange(this.domains[0])
+      })
+    },
+    handleDomainChange (domain) {
+      this.selectedDomain = domain
+      this.accountVisible = domain.id !== '-1'
+      if (this.isAdminOrDomainAdmin()) {
+        this.updateVPCCheckAndFetchNetworkOfferingData()
+      }
+    },
+    updateVPCCheckAndFetchNetworkOfferingData () {
+      if (this.vpc !== null) { // from VPC section
+        this.fetchNetworkOfferingData(true)
+      } else { // from guest network section
+        var params = {}
+        this.networkOfferingLoading = true
+        api('listVPCs', params).then(json => {
+          const listVPCs = json.listvpcsresponse.vpc
+          var vpcAvailable = this.arrayHasItems(listVPCs)
+          if (vpcAvailable === false) {
+            this.fetchNetworkOfferingData(false)
+          } else {
+            this.fetchNetworkOfferingData()
+          }
+        })
+      }
+    },
+    fetchNetworkOfferingData (forVpc) {
+      this.networkOfferingLoading = true
+      var params = {
+        zoneid: this.selectedZone.id,
+        guestiptype: 'Isolated',
+        supportedServices: 'SourceNat',
+        state: 'Enabled'
+      }
+      if (this.isAdminOrDomainAdmin() && this.selectedDomain.id !== '-1') { // domain is visible only for admins
+        params.domainid = this.selectedDomain.id
+      }
+      if (!this.isAdmin()) { // normal user is not aware of the VLANs in the system, so normal user is not allowed to create network with network offerings whose specifyvlan = true
+        params.specifyvlan = false
+      }
+      if (forVpc !== null) {
+        params.forvpc = forVpc
+      }
+      this.networkOfferings = []
+      this.selectedNetworkOffering = {}
+      api('listNetworkOfferings', params).then(json => {
+        this.networkOfferings = json.listnetworkofferingsresponse.networkoffering
+      }).finally(() => {
+        this.networkOfferingLoading = false
+        if (this.arrayHasItems(this.networkOfferings)) {
+          this.form.setFieldsValue({
+            networkofferingid: 0
+          })
+          this.handleNetworkOfferingChange(this.networkOfferings[0])
+        }
+      })
+    },
+    handleNetworkOfferingChange (networkOffering) {
+      this.selectedNetworkOffering = networkOffering
+      if (networkOffering.forvpc) {
+        this.fetchVpcData()
+      }
+    },
+    fetchVpcData () {
+      this.vpcLoading = true
+      var params = {
+        listAll: true,
+        details: 'min'
+      }
+      if (this.vpc !== null) {
+        params.id = this.vpc.id
+      }
+      api('listVPCs', params).then(json => {
+        this.vpcs = json.listvpcsresponse.vpc
+      }).finally(() => {
+        this.vpcLoading = false
+        if (this.arrayHasItems(this.vpcs)) {
+          this.form.setFieldsValue({
+            vpcid: 0
+          })
+          this.selectedVpc = this.vpcs[0]
+        }
+      })
+    },
+    handleSubmit (e) {
+      this.form.validateFields((error, values) => {
+        if (error) {
+          return
+        }
+        this.actionLoading = true
+        var params = {
+          zoneId: this.selectedZone.id,
+          name: values.name,
+          displayText: values.displaytext,
+          networkOfferingId: this.selectedNetworkOffering.id
+        }
+        if (this.isValidTextValueForKey(values, 'gateway')) {
+          params.gateway = values.gateway
+        }
+        if (this.isValidTextValueForKey(values, 'netmask')) {
+          params.netmask = values.netmask
+        }
+        if (this.isValidTextValueForKey(values, 'externalid')) {
+          params.externalid = values.externalid
+        }
+        if (this.isValidTextValueForKey(values, 'vpcid')) {
+          params.vpcid = this.selectedVpc.id
+        }
+        if (this.isValidTextValueForKey(values, 'vlanid')) {
+          params.vlan = values.vlanid
+        }
+        if (this.isValidTextValueForKey(values, 'networkdomain')) {
+          params.networkdomain = values.networkdomain
+        }
+        if ('domainid' in values && values.domainid > 0) {
+          params.domainid = this.selectedDomain.id
+          if (this.isValidTextValueForKey(values, 'account')) {
+            params.account = values.account
+          }
+        }
+        api('createNetwork', params).then(json => {
+          this.$notification.success({
+            message: 'Network',
+            description: 'Successfully created isolated network'
+          })
+          this.$emit('refresh-data')
+        }).catch(error => {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
+          })
+        }).finally(() => {
+          this.actionLoading = false
+          this.closeAction()
+        })
+      })
+    },
+    showInput () {
+      this.inputVisible = true
+      this.$nextTick(function () {
+        this.$refs.input.focus()
+      })
+    },
+    resetForm () {
+      this.form.setFieldsValue({
+      })
+      this.tags = []
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.form-layout {
+  .ant-tag {
+    margin-bottom: 10px;
+  }
+
+  /deep/.custom-time-select .ant-time-picker {
+    width: 100%;
+  }
+
+  /deep/.ant-divider-horizontal {
+    margin-top: 0;
+  }
+}
+
+.form {
+  margin: 10px 0;
+}
+
+.tagsTitle {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 12px;
+}
+
+.action-button {
+  text-align: right;
+
+  button {
+    margin-right: 5px;
+  }
+}
+</style>

ui/src/views/network/CreateL2NetworkForm.vue

@@ -0,0 +1,393 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-spin :spinning="loading">
+    <div class="form-layout">
+      <div class="form">
+        <a-form
+          :form="form"
+          layout="vertical"
+          @submit="handleSubmit">
+          <a-form-item :label="$t('name')">
+            <a-input
+              v-decorator="['name', {
+                rules: [{ required: true, message: 'Please enter name' }]
+              }]"
+              :placeholder="this.$t('Name')"/>
+          </a-form-item>
+          <a-form-item :label="$t('displaytext')">
+            <a-input
+              v-decorator="['displaytext', {
+                rules: [{ required: true, message: 'Please enter display text' }]
+              }]"
+              :placeholder="this.$t('displaytext')"/>
+          </a-form-item>
+          <a-form-item :label="$t('zoneid')">
+            <a-select
+              v-decorator="['zoneid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="zoneLoading"
+              :placeholder="this.$t('zoneid')"
+              @change="val => { this.handleZoneChanged(this.zones[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('domain')" v-if="this.isAdminOrDomainAdmin()">
+            <a-select
+              v-decorator="['domainid', {}]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="domainLoading"
+              :placeholder="this.$t('domainid')"
+              @change="val => { this.handleDomainChange(this.domains[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('networkofferingid')">
+            <a-select
+              v-decorator="['networkofferingid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="networkOfferingLoading"
+              :placeholder="this.$t('networkofferingid')"
+              @change="val => { this.handleNetworkOfferingChange(this.networkOfferings[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.networkOfferings" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('vlan')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
+            <a-input
+              v-decorator="['vlanid', {
+                rules: [{ required: true, message: 'Please enter value' }]
+              }]"
+              :placeholder="this.$t('vlanid')"/>
+          </a-form-item>
+          <a-form-item :label="$t('bypassvlanoverlapcheck')" v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
+            <a-switch v-decorator="['bypassvlanoverlapcheck']" />
+          </a-form-item>
+          <a-form-item :label="$t('account')" v-if="this.accountVisible">
+            <a-input
+              v-decorator="['account', {
+                rules: [
+                  { required: true, message: this.$t('required') }
+                ]
+              }]"
+              :placeholder="this.$t('account')"/>
+          </a-form-item>
+          <div :span="24" class="action-button">
+            <a-button
+              :loading="actionLoading"
+              @click="closeAction">
+              {{ this.$t('Cancel') }}
+            </a-button>
+            <a-button
+              :loading="actionLoading"
+              type="primary"
+              @click="handleSubmit">
+              {{ this.$t('OK') }}
+            </a-button>
+          </div>
+        </a-form>
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+  name: 'CreateL2NetworkForm',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    vpc: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      actionLoading: false,
+      domains: [],
+      domainLoading: false,
+      selectedDomain: {},
+      zones: [],
+      zoneLoading: false,
+      selectedZone: {},
+      networkOfferings: [],
+      networkOfferingLoading: false,
+      selectedNetworkOffering: {},
+      accountVisible: this.isAdminOrDomainAdmin()
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.domains = [
+      {
+        id: '-1',
+        name: ' '
+      }
+    ]
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.fetchDomainData()
+      this.fetchZoneData()
+    },
+    isAdmin () {
+      return ['Admin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    isAdminOrDomainAdmin () {
+      return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    isObjectEmpty (obj) {
+      return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
+    },
+    arrayHasItems (array) {
+      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
+    },
+    isValidValueForKey (obj, key) {
+      return key in obj && obj[key] != null
+    },
+    isValidTextValueForKey (obj, key) {
+      return this.isValidValueForKey(obj, key) && obj[key].length > 0
+    },
+    fetchZoneData () {
+      const params = {}
+      params.listAll = true
+      this.zoneLoading = true
+      api('listZones', params).then(json => {
+        for (const i in json.listzonesresponse.zone) {
+          const zone = json.listzonesresponse.zone[i]
+          if (zone.networktype === 'Advanced' && zone.securitygroupsenabled !== true) {
+            this.zones.push(zone)
+          }
+        }
+        this.zoneLoading = false
+        if (this.arrayHasItems(this.zones)) {
+          this.form.setFieldsValue({
+            zoneid: 0
+          })
+          this.handleZoneChange(this.zones[0])
+        }
+      })
+    },
+    handleZoneChange (zone) {
+      this.selectedZone = zone
+      this.updateVPCCheckAndFetchNetworkOfferingData()
+    },
+    fetchDomainData () {
+      const params = {}
+      params.listAll = true
+      params.details = 'min'
+      this.domainLoading = true
+      api('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+        this.form.setFieldsValue({
+          domainid: 0
+        })
+        this.handleDomainChange(this.domains[0])
+      })
+    },
+    handleDomainChange (domain) {
+      this.selectedDomain = domain
+      this.accountVisible = domain.id !== '-1'
+      if (this.isAdminOrDomainAdmin()) {
+        this.updateVPCCheckAndFetchNetworkOfferingData()
+      }
+    },
+    updateVPCCheckAndFetchNetworkOfferingData () {
+      if (this.vpc !== null) { // from VPC section
+        this.fetchNetworkOfferingData(true)
+      } else { // from guest network section
+        var params = {}
+        this.networkOfferingLoading = true
+        api('listVPCs', params).then(json => {
+          const listVPCs = json.listvpcsresponse.vpc
+          var vpcAvailable = this.arrayHasItems(listVPCs)
+          if (vpcAvailable === false) {
+            this.fetchNetworkOfferingData(false)
+          } else {
+            this.fetchNetworkOfferingData()
+          }
+        })
+      }
+    },
+    fetchNetworkOfferingData (forVpc) {
+      this.networkOfferingLoading = true
+      var params = {
+        zoneid: this.selectedZone.id,
+        guestiptype: 'L2',
+        state: 'Enabled'
+      }
+      if (this.isAdminOrDomainAdmin() && this.selectedDomain.id !== '-1') { // domain is visible only for admins
+        params.domainid = this.selectedDomain.id
+      }
+      if (!this.isAdmin()) { // normal user is not aware of the VLANs in the system, so normal user is not allowed to create network with network offerings whose specifyvlan = true
+        params.specifyvlan = false
+      }
+      if (forVpc !== null) {
+        params.forvpc = forVpc
+      }
+      api('listNetworkOfferings', params).then(json => {
+        this.networkOfferings = json.listnetworkofferingsresponse.networkoffering
+      }).finally(() => {
+        this.networkOfferingLoading = false
+        if (this.arrayHasItems(this.networkOfferings)) {
+          this.form.setFieldsValue({
+            networkofferingid: 0
+          })
+          this.handleNetworkOfferingChange(this.networkOfferings[0])
+        }
+      })
+    },
+    handleNetworkOfferingChange (networkOffering) {
+      this.selectedNetworkOffering = networkOffering
+    },
+    handleSubmit (e) {
+      this.form.validateFields((error, values) => {
+        if (error) {
+          return
+        }
+        this.actionLoading = true
+        var params = {
+          zoneId: this.selectedZone.id,
+          name: values.name,
+          displayText: values.displaytext,
+          networkOfferingId: this.selectedNetworkOffering.id
+        }
+        if (this.isValidTextValueForKey(values, 'vlanid')) {
+          params.vlan = values.vlanid
+        }
+        if (this.isValidValueForKey(values, 'bypassvlanoverlapcheck')) {
+          params.bypassvlanoverlapcheck = values.bypassvlanoverlapcheck
+        }
+        if ('domainid' in values && values.domainid > 0) {
+          params.domainid = this.selectedDomain.id
+          if (this.isValidTextValueForKey(values, 'account')) {
+            params.account = values.account
+          }
+        }
+        api('createNetwork', params).then(json => {
+          this.$notification.success({
+            message: 'Network',
+            description: 'Successfully created L2 network'
+          })
+        }).catch(error => {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
+          })
+        }).finally(() => {
+          this.$emit('refresh-data')
+          this.actionLoading = false
+          this.closeAction()
+        })
+      })
+    },
+    showInput () {
+      this.inputVisible = true
+      this.$nextTick(function () {
+        this.$refs.input.focus()
+      })
+    },
+    resetForm () {
+      this.form.setFieldsValue({
+      })
+      this.tags = []
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.form-layout {
+  .ant-tag {
+    margin-bottom: 10px;
+  }
+
+  /deep/.custom-time-select .ant-time-picker {
+    width: 100%;
+  }
+
+  /deep/.ant-divider-horizontal {
+    margin-top: 0;
+  }
+}
+
+.form {
+  margin: 10px 0;
+}
+
+.tagsTitle {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 12px;
+}
+
+.action-button {
+  text-align: right;
+
+  button {
+    margin-right: 5px;
+  }
+}
+</style>

ui/src/views/network/CreateNetwork.vue

@@ -16,25 +16,118 @@
 // under the License.
 
 <template>
-  <div>
+  <div class="form-layout">
-    TODO: create network form: L2, isolated and shared
+    <a-tabs defaultActiveKey="1" :animated="false">
+      <a-tab-pane :tab="$t('Isolated')" key="1" v-if="this.isAdvancedZoneWithoutSGAvailable()">
+        <CreateIsolatedNetworkForm
+          :loading="loading"
+          @close-action="closeAction"
+          @refresh-data="refreshParent"
+          @refresh="handleRefresh"/>
+      </a-tab-pane>
+      <a-tab-pane :tab="$t('L2')" key="2">
+        <CreateL2NetworkForm
+          :loading="loading"
+          @close-action="closeAction"
+          @refresh-data="refreshParent"
+          @refresh="handleRefresh"/>
+      </a-tab-pane>
+      <a-tab-pane :tab="$t('Shared')" key="3" v-if="this.isAdmin()">
+        <CreateSharedNetworkForm
+          :loading="loading"
+          @close-action="closeAction"
+          @refresh-data="refreshParent"
+          @refresh="handleRefresh"/>
+      </a-tab-pane>
+    </a-tabs>
   </div>
 </template>
 
 <script>
+import { api } from '@/api'
+import CreateIsolatedNetworkForm from '@/views/network/CreateIsolatedNetworkForm'
+import CreateL2NetworkForm from '@/views/network/CreateL2NetworkForm'
+import CreateSharedNetworkForm from '@/views/network/CreateSharedNetworkForm'
 
 export default {
-  name: '',
+  name: 'CreateNetwork',
   components: {
+    CreateIsolatedNetworkForm,
+    CreateL2NetworkForm,
+    CreateSharedNetworkForm
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
   },
   data () {
     return {
+      defaultNetworkTypeTabKey: '1',
+      loading: false,
+      actionZones: [],
+      actionZoneLoading: false
     }
   },
+  mounted () {
+    this.fetchData()
+  },
   methods: {
+    fetchData () {
+      this.loading = true
+      this.fetchActionZoneData()
+    },
+    isAdmin () {
+      return ['Admin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    fetchActionZoneData () {
+      const params = {}
+      params.listAll = true
+      this.actionZonesLoading = true
+      api('listZones', params).then(json => {
+        this.actionZones = json.listzonesresponse.zone
+      }).finally(() => {
+        this.actionZoneLoading = false
+        this.loading = false
+      })
+    },
+    isAdvancedZoneWithoutSGAvailable () {
+      for (const i in this.actionZones) {
+        const zone = this.actionZones[i]
+        if (zone.networktype === 'Advanced' && zone.securitygroupsenabled !== true) {
+          return true
+        }
+      }
+      return true
+    },
+    handleRefresh () {
+      this.fetchData()
+    },
+    refreshParent () {
+      this.$emit('refresh-data')
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .form-layout {
+    width: 600px;
+  }
+
+  .random {
+    width: 80%;
+  }
+
+  .action-button {
+    text-align: right;
+
+    button {
+      margin-right: 5px;
+    }
+  }
 </style>

ui/src/views/network/CreateSharedNetworkForm.vue

@@ -0,0 +1,716 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-spin :spinning="loading">
+    <div class="form-layout">
+      <div class="form">
+        <a-form
+          :form="form"
+          layout="vertical"
+          @submit="handleSubmit">
+          <a-form-item :label="$t('name')">
+            <a-input
+              v-decorator="['name', {
+                rules: [{ required: true, message: 'Please enter name' }]
+              }]"
+              :placeholder="this.$t('Name')"/>
+          </a-form-item>
+          <a-form-item :label="$t('displaytext')">
+            <a-input
+              v-decorator="['displaytext', {
+                rules: [{ required: true, message: 'Please enter display text' }]
+              }]"
+              :placeholder="this.$t('Display text')"/>
+          </a-form-item>
+          <a-form-item :label="$t('zoneid')" v-if="this.isObjectEmpty(this.zone)">
+            <a-select
+              v-decorator="['zoneid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="zoneLoading"
+              :placeholder="this.$t('zoneid')"
+              @change="val => { this.handleZoneChanged(this.zones[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('physicalnetworkid')" v-if="this.isObjectEmpty(this.zone)">
+            <a-select
+              v-decorator="['physicalnetworkid', {}]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="zoneLoading"
+              :placeholder="this.$t('physicalnetworkid')"
+              @change="val => { this.handleZoneChanged(this.formPhysicalNetworks[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.formPhysicalNetworks" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('vlan')">
+            <a-input
+              v-decorator="['vlanid', {
+                rules: [{ required: true, message: 'Please enter value' }]
+              }]"
+              :placeholder="this.$t('vlanid')"/>
+          </a-form-item>
+          <a-form-item :label="$t('bypassvlanoverlapcheck')">
+            <a-switch v-decorator="['bypassvlanoverlapcheck']" />
+          </a-form-item>
+          <a-form-item :label="$t('isolatedpvlantype')">
+            <a-radio-group
+              v-decorator="['isolatedpvlantype', {
+                initialValue: this.isolatePvlanType
+              }]"
+              buttonStyle="solid"
+              @change="selected => { this.handleIsolatedPvlanTypeChange(selected.target.value) }">
+              <a-radio-button value="none">
+                {{ $t('None') }}
+              </a-radio-button>
+              <a-radio-button value="community">
+                {{ $t('Community') }}
+              </a-radio-button>
+              <a-radio-button value="isolated">
+                {{ $t('Isolated') }}
+              </a-radio-button>
+              <a-radio-button value="promiscuous">
+                {{ $t('Promiscuous') }}
+              </a-radio-button>
+            </a-radio-group>
+          </a-form-item>
+          <a-form-item :label="$t('isolatedpvlan')" v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
+            <a-input
+              v-decorator="['isolatedpvlan', {}]"
+              :placeholder="this.$t('isolatedpvlan')"/>
+          </a-form-item>
+          <a-form-item :label="$t('scope')">
+            <a-radio-group
+              v-decorator="['scope', {
+                initialValue: this.scopeType
+              }]"
+              buttonStyle="solid"
+              @change="selected => { this.handleScopeTypeChange(selected.target.value) }">
+              <a-radio-button value="all">
+                {{ $t('All') }}
+              </a-radio-button>
+              <a-radio-button value="domain" v-if="!this.parseBooleanValueForKey(this.selectedZone, 'securitygroupsenabled')">
+                {{ $t('Domain') }}
+              </a-radio-button>
+              <a-radio-button value="account" v-if="!this.parseBooleanValueForKey(this.selectedZone, 'securitygroupsenabled')">
+                {{ $t('Account') }}
+              </a-radio-button>
+              <a-radio-button value="project" v-if="!this.parseBooleanValueForKey(this.selectedZone, 'securitygroupsenabled')">
+                {{ $t('Project') }}
+              </a-radio-button>
+            </a-radio-group>
+          </a-form-item>
+          <a-form-item :label="$t('domain')" v-if="this.scopeType !== 'all'">
+            <a-select
+              v-decorator="['domainid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="domainLoading"
+              :placeholder="this.$t('domainid')"
+              @change="val => { this.handleDomainChange(this.domains[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('subdomainaccess')" v-if="this.scopeType === 'domain'">
+            <a-switch v-decorator="['subdomainaccess']" />
+          </a-form-item>
+          <a-form-item :label="$t('account')" v-if="this.scopeType === 'account'">
+            <a-input
+              v-decorator="['account', {}]"
+              :placeholder="this.$t('account')"/>
+          </a-form-item>
+          <a-form-item :label="$t('projectid')" v-if="this.scopeType === 'project'">
+            <a-select
+              v-decorator="['projectid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="projectLoading"
+              :placeholder="this.$t('projectid')"
+              @change="val => { this.handleProjectChange(this.projects[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.projects" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('networkofferingid')">
+            <a-select
+              v-decorator="['networkofferingid', {
+                rules: [
+                  {
+                    required: true,
+                    message: 'Please select option'
+                  }
+                ]
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }"
+              :loading="networkOfferingLoading"
+              :placeholder="this.$t('networkofferingid')"
+              @change="val => { this.handleNetworkOfferingChange(this.networkOfferings[val]) }">
+              <a-select-option v-for="(opt, optIndex) in this.networkOfferings" :key="optIndex">
+                {{ opt.name || opt.description }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :label="$t('ip4gateway')">
+            <a-input
+              v-decorator="['ip4gateway', {}]"
+              :placeholder="this.$t('ip4gateway')"/>
+          </a-form-item>
+          <a-form-item :label="$t('ip4Netmask')">
+            <a-input
+              v-decorator="['netmask', {}]"
+              :placeholder="this.$t('netmask')"/>
+          </a-form-item>
+          <a-form-item :label="$t('startipv4')">
+            <a-input
+              v-decorator="['startipv4', {}]"
+              :placeholder="this.$t('startipv4')"/>
+          </a-form-item>
+          <a-form-item :label="$t('endipv4')">
+            <a-input
+              v-decorator="['endipv4', {}]"
+              :placeholder="this.$t('endipv4')"/>
+          </a-form-item>
+          <a-form-item :label="$t('ip6gateway')">
+            <a-input
+              v-decorator="['ip6gateway', {}]"
+              :placeholder="this.$t('ip6gateway')"/>
+          </a-form-item>
+          <a-form-item :label="$t('ip6cidr')">
+            <a-input
+              v-decorator="['ip6cidr', {}]"
+              :placeholder="this.$t('ip6cidr')"/>
+          </a-form-item>
+          <a-form-item :label="$t('startipv6')">
+            <a-input
+              v-decorator="['startipv6', {}]"
+              :placeholder="this.$t('startipv6')"/>
+          </a-form-item>
+          <a-form-item :label="$t('endipv6')">
+            <a-input
+              v-decorator="['endipv6', {}]"
+              :placeholder="this.$t('endipv6')"/>
+          </a-form-item>
+          <a-form-item :label="$t('networkdomain')">
+            <a-input
+              v-decorator="['networkdomain', {}]"
+              :placeholder="this.$t('networkdomain')"/>
+          </a-form-item>
+          <a-form-item :label="$t('hideipaddressusage')">
+            <a-switch v-decorator="['hideipaddressusage']" />
+          </a-form-item>
+          <div :span="24" class="action-button">
+            <a-button
+              :loading="actionLoading"
+              @click="closeAction">
+              {{ this.$t('Cancel') }}
+            </a-button>
+            <a-button
+              :loading="actionLoading"
+              type="primary"
+              @click="handleSubmit">
+              {{ this.$t('OK') }}
+            </a-button>
+          </div>
+        </a-form>
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+  name: 'CreateGuestNetworkForm',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    zone: {
+      type: Object,
+      default: null
+    },
+    physicalNetworks: {
+      type: Array,
+      default: null
+    }
+  },
+  data () {
+    return {
+      actionLoading: false,
+      zones: [],
+      zoneLoading: false,
+      selectedZone: {},
+      formPhysicalNetworks: [],
+      formPhysicalNetworkLoading: false,
+      formSelectedPhysicalNetwork: {},
+      isolatePvlanType: 'none',
+      scopeType: 'all',
+      domains: [],
+      domainLoading: false,
+      selectedDomain: {},
+      networkOfferings: [],
+      networkOfferingLoading: false,
+      selectedNetworkOffering: {},
+      projects: [],
+      projectLoading: false,
+      selectedProject: {}
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      if (this.isObjectEmpty(this.zone)) {
+        this.fetchZoneData()
+      } else {
+        this.fetchNetworkOfferingData()
+      }
+    },
+    isAdmin () {
+      return ['Admin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    isAdminOrDomainAdmin () {
+      return ['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype)
+    },
+    isObjectEmpty (obj) {
+      return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
+    },
+    arrayHasItems (array) {
+      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
+    },
+    isValidValueForKey (obj, key) {
+      return key in obj && obj[key] != null
+    },
+    parseBooleanValueForKey (obj, key) {
+      return this.isValidValueForKey(obj, key) && obj[key] === true
+    },
+    isValidTextValueForKey (obj, key) {
+      return this.isValidValueForKey(obj, key) && obj[key].length > 0
+    },
+    fetchZoneData () {
+      if (this.zone !== null) {
+        this.zones.push(this.zone)
+        if (this.arrayHasItems(this.zones)) {
+          this.form.setFieldsValue({
+            zoneid: 0
+          })
+          this.handleZoneChange(this.zones[0])
+        }
+      } else {
+        const params = {}
+        params.listAll = true
+        this.zoneLoading = true
+        api('listZones', params).then(json => {
+          for (const i in json.listzonesresponse.zone) {
+            const zone = json.listzonesresponse.zone[i]
+            if (zone.networktype === 'Advanced') {
+              this.zones.push(zone)
+            }
+          }
+        }).finally(() => {
+          this.zoneLoading = false
+          if (this.arrayHasItems(this.zones)) {
+            this.form.setFieldsValue({
+              zoneid: 0
+            })
+            this.handleZoneChange(this.zones[0])
+          }
+        })
+      }
+    },
+    handleZoneChange (zone) {
+      this.selectedZone = zone
+      this.fetchPhysicalNetworkData()
+    },
+    fetchPhysicalNetworkData () {
+      if (this.physicalNetworks != null) {
+        this.formPhysicalNetworks = this.physicalNetworks
+        if (this.arrayHasItems(this.formPhysicalNetworks)) {
+          this.form.setFieldsValue({
+            physicalnetworkid: 0
+          })
+          this.handlePhysicalNetworkChange(this.formPhysicalNetworks[0])
+        }
+      } else {
+        if (this.selectedZone === null || this.selectedZone === undefined) {
+          return
+        }
+        const params = {}
+        params.zoneid = this.selectedZone.id
+        this.formPhysicalNetworksLoading = true
+        api('listPhysicalNetworks', params).then(json => {
+          this.formPhysicalNetworks = []
+          var networks = json.listphysicalnetworksresponse.physicalnetwork
+          if (this.arrayHasItems(networks)) {
+            for (const i in networks) {
+              this.addPhysicalNetworkForGuestTrafficType(networks[i], i * 1 === networks.length - 1)
+            }
+          } else {
+            this.formPhysicalNetworkLoading = false
+          }
+        }).finally(() => {
+        })
+      }
+    },
+    addPhysicalNetworkForGuestTrafficType (physicalNetwork, isLastNetwork) {
+      const params = {}
+      params.physicalnetworkid = physicalNetwork.id
+      api('listTrafficTypes', params).then(json => {
+        var trafficTypes = json.listtraffictypesresponse.traffictype
+        if (this.arrayHasItems(trafficTypes)) {
+          for (const i in trafficTypes) {
+            if (trafficTypes[i].traffictype === 'Guest') {
+              this.formPhysicalNetworks.push(physicalNetwork)
+              break
+            }
+          }
+        } else {
+          this.formPhysicalNetworkLoading = false
+        }
+      }).finally(() => {
+        if (isLastNetwork) {
+          this.form.setFieldsValue({
+            physicalnetworkid: 0
+          })
+          this.handlePhysicalNetworkChange(this.formPhysicalNetworks[0])
+        }
+      })
+    },
+    handlePhysicalNetworkChange (physicalNet) {
+      this.formSelectedPhysicalNetwork = physicalNet
+      this.fetchNetworkOfferingData()
+    },
+    handleIsolatedPvlanTypeChange (pvlan) {
+      this.isolatePvlanType = pvlan
+    },
+    handleScopeTypeChange (scope) {
+      this.scopeType = scope
+      switch (scope) {
+        case 'domain':
+        {
+          this.fetchDomainData()
+          break
+        }
+        case 'project':
+        {
+          this.fetchDomainData()
+          this.fetchProjectData()
+          this.fetchNetworkOfferingData()
+          break
+        }
+        default:
+        {
+          this.fetchNetworkOfferingData()
+        }
+      }
+    },
+    fetchNetworkOfferingData () {
+      if (this.isObjectEmpty(this.selectedZone)) {
+        return
+      }
+      this.networkOfferingLoading = true
+      var params = {
+        zoneid: this.selectedZone.id,
+        state: 'Enabled'
+      }
+      if (!this.isObjectEmpty(this.formSelectedPhysicalNetwork) &&
+        !this.isObjectEmpty(this.formSelectedPhysicalNetwork.tags) &&
+        this.formSelectedPhysicalNetwork.tags.length > 0) {
+        params.tags = this.formSelectedPhysicalNetwork.tags
+      }
+      // Network tab in Guest Traffic Type in Infrastructure menu is only available when it's under Advanced zone.
+      // zone dropdown in add guest network dialog includes only Advanced zones.
+      if (this.scopeType === 'all' || this.scopeType === 'domain') {
+        params.guestiptype = 'Shared'
+        if (this.scopeType === 'domain') {
+          params.domainid = this.selectedDomain.id
+        }
+      }
+      api('listNetworkOfferings', params).then(json => {
+        this.networkOfferings = json.listnetworkofferingsresponse.networkoffering
+      }).finally(() => {
+        this.networkOfferingLoading = false
+        if (this.arrayHasItems(this.networkOfferings)) {
+          this.form.setFieldsValue({
+            networkofferingid: 0
+          })
+          this.handleNetworkOfferingChange(this.networkOfferings[0])
+        }
+      })
+    },
+    handleNetworkOfferingChange (networkOffering) {
+      this.selectedNetworkOffering = networkOffering
+    },
+    fetchDomainData () {
+      const params = {}
+      if (!this.isObjectEmpty(this.selectedZone) && this.selectedZone.domainid != null) {
+        params.id = this.selectedZone.id
+        params.isrecursive = true
+      } else {
+        params.listall = true
+      }
+      this.domainLoading = true
+      api('listDomains', params).then(json => {
+        const listDomains = json.listdomainsresponse.domain
+        this.domains = this.domains.concat(listDomains)
+      }).finally(() => {
+        this.domainLoading = false
+        this.form.setFieldsValue({
+          domainid: 0
+        })
+        this.handleDomainChange(this.domains[0])
+      })
+    },
+    handleDomainChange (domain) {
+      this.selectedDomain = domain
+      if (!this.isObjectEmpty(domain)) {
+        this.fetchNetworkOfferingData()
+      }
+    },
+    fetchProjectData () {
+      this.projects = []
+      const params = {}
+      params.listall = true
+      params.details = 'min'
+      this.projectLoading = true
+      api('listProjects', params).then(json => {
+        const listProjects = json.listprojectsresponse.project
+        this.projects = this.projects.concat(listProjects)
+      }).finally(() => {
+        this.projectLoading = false
+        if (this.arrayHasItems(this.projects)) {
+          this.form.setFieldsValue({
+            projectid: 0
+          })
+          this.handleProjectChange(this.projects[0])
+        }
+      })
+    },
+    handleProjectChange (project) {
+      this.selectedProject = project
+    },
+    handleSubmit (e) {
+      this.form.validateFields((error, values) => {
+        if (error) {
+          return
+        }
+        if (
+          (!this.isValidTextValueForKey(values, 'ip4gateway') && !this.isValidTextValueForKey(values, 'netmask') &&
+            !this.isValidTextValueForKey(values, 'startipv4') && !this.isValidTextValueForKey(values, 'endipv4') &&
+            !this.isValidTextValueForKey(values, 'ip6gateway') && !this.isValidTextValueForKey(values, 'ip6cidr') &&
+            !this.isValidTextValueForKey(values, 'startipv6') && !this.isValidTextValueForKey(values, 'endipv6'))
+        ) {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: 'Either IPv4 fields or IPv6 fields need to be filled when adding a guest network'
+          })
+        }
+        this.actionLoading = true
+        var params = {
+          zoneId: this.selectedZone.id,
+          name: values.name,
+          displayText: values.displaytext,
+          networkOfferingId: this.selectedNetworkOffering.id
+        }
+        if (this.selectedNetworkOffering.guestiptype === 'Shared') {
+          params.physicalnetworkid = this.formSelectedPhysicalNetwork.id
+        }
+        if (this.isValidTextValueForKey(values, 'vlanid')) {
+          params.vlan = values.vlanid
+        }
+        if (this.isValidValueForKey(values, 'bypassvlanoverlapcheck')) {
+          params.bypassvlanoverlapcheck = values.bypassvlanoverlapcheck
+        }
+        if (this.isValidValueForKey(values, 'isolatedpvlantype')) {
+          params.isolatedpvlantype = values.isolatedpvlantype
+        }
+        if (this.isValidValueForKey(values, 'isolatedpvlan')) {
+          params.isolatedpvlan = values.isolatedpvlan
+        }
+        if (this.scopeType !== 'all') {
+          params.domainid = this.selectedDomain.id
+          params.acltype = this.scopeType
+          if (this.scopeType === 'account') { // account-specific
+            params.account = values.account
+          } else if (this.scopeType === 'project') { // project-specific
+            params.projectid = this.selectedProject.id
+          } else { // domain-specific
+            params.subdomainaccess = this.parseBooleanValueForKey(values, 'subdomainaccess')
+          }
+        } else { // zone-wide
+          params.acltype = 'domain' // server-side will make it Root domain (i.e. domainid=1)
+        }
+        // IPv4 (begin)
+        if (this.isValidTextValueForKey(values, 'ip4gateway')) {
+          params.gateway = values.ip4gateway
+        }
+        if (this.isValidTextValueForKey(values, 'netmask')) {
+          params.netmask = values.netmask
+        }
+        if (this.isValidTextValueForKey(values, 'startipv4')) {
+          params.startip = values.startipv4
+        }
+        if (this.isValidTextValueForKey(values, 'endipv4')) {
+          params.endip = values.endipv4
+        }
+        // IPv4 (end)
+
+        // IPv6 (begin)
+        if (this.isValidTextValueForKey(values, 'ip4gateway')) {
+          params.ip6gateway = values.ip6gateway
+        }
+        if (this.isValidTextValueForKey(values, 'ip6cidr')) {
+          params.ip6cidr = values.ip6cidr
+        }
+        if (this.isValidTextValueForKey(values, 'startipv6')) {
+          params.startipv6 = values.startipv6
+        }
+        if (this.isValidTextValueForKey(values, 'endipv6')) {
+          params.endipv6 = values.endipv6
+        }
+        // IPv6 (end)
+
+        if (this.isValidTextValueForKey(values, 'networkdomain')) {
+          params.networkdomain = values.networkdomain
+        }
+        var hideipaddressusage = this.parseBooleanValueForKey(values, 'hideipaddressusage')
+        if (hideipaddressusage) {
+          params.hideipaddressusage = true
+        }
+        api('createNetwork', params).then(json => {
+          this.$notification.success({
+            message: 'Network',
+            description: 'Successfully created guest network'
+          })
+          this.resetForm()
+        }).catch(error => {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
+          })
+        }).finally(() => {
+          this.$emit('refresh-data')
+          this.actionLoading = false
+          this.closeAction()
+        })
+      })
+    },
+    showInput () {
+      this.inputVisible = true
+      this.$nextTick(function () {
+        this.$refs.input.focus()
+      })
+    },
+    resetForm () {
+      this.form.setFieldsValue({
+      })
+      this.tags = []
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.form-layout {
+  .ant-tag {
+    margin-bottom: 10px;
+  }
+
+  /deep/.custom-time-select .ant-time-picker {
+    width: 100%;
+  }
+
+  /deep/.ant-divider-horizontal {
+    margin-top: 0;
+  }
+}
+
+.form {
+  margin: 10px 0;
+}
+
+.tagsTitle {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+  margin-bottom: 12px;
+}
+
+.action-button {
+  text-align: right;
+
+  button {
+    margin-right: 5px;
+  }
+}
+</style>

ui/src/views/network/VpcTiersTab.vue

@@ -154,7 +154,7 @@
               placeholder="Netmask of the tier. For example, with VPC CIDR of 10.0.0.0/16 and network tier CIDR of 10.1.1.0/24, gateway is 10.1.1.1 and netmask is 255.255.255.0"
               v-decorator="['netmask',{rules: [{ required: true, message: 'Required' }]}]"></a-input>
           </a-form-item>
-          <a-form-item :label="$t('externalId')">
+          <a-form-item :label="$t('externalid')">
             <a-input
               v-decorator="['externalId']"></a-input>
           </a-form-item>

ui/src/views/storage/CreateVolume.vue

@@ -150,6 +150,7 @@ export default {
           })
         }).finally(() => {
           this.loading = false
+          this.$emit('refresh-data')
           this.closeModal()
         })
       })

ui/src/views/storage/UploadLocalVolume.vue

@@ -127,7 +127,7 @@ export default {
         if (json && json.listzonesresponse && json.listzonesresponse.zone) {
           this.zones = json.listzonesresponse.zone
           if (this.zones.length > 0) {
-            this.zoneSelected = this.zone[0].id
+            this.zoneSelected = this.zones[0].id
           }
         }
       })