ui: add button in zone physical network list (#8028)

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

ui/public/locales/en.json

@@ -2361,6 +2361,8 @@
 "message.add.network.failed": "Adding network failed.",
 "message.add.network.processing": "Adding network...",
 "message.add.new.gateway.to.vpc": "Please specify the information to add a new gateway to this VPC.",
+"message.add.physical.network.failed": "Adding physical network failed",
+"message.add.physical.network.processing": "Adding a new physical network...",
 "message.add.pod": "Add a new pod for zone <b><span id=\"add_pod_zone_name\"></span></b>",
 "message.add.pod.during.zone.creation": "Each zone must contain one or more pods. 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.add.port.forward.failed": "Adding new port forwarding rule failed.",
@@ -2955,6 +2957,7 @@
 "message.success.add.network.acl": "Successfully added Network ACL list",
 "message.success.add.network.static.route": "Successfully added network Static Route",
 "message.success.add.network.permissions": "Successfully added network permissions",
+"message.success.add.physical.network": "Successfully added Physical network",
 "message.success.add.policy.rule": "Successfully added Policy rule",
 "message.success.add.port.forward": "Successfully added new port forwarding rule",
 "message.success.add.private.gateway": "Successfully added private gateway",

ui/src/views/infra/zone/PhysicalNetworksTab.vue

@@ -17,6 +17,14 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
+    <a-button
+      type="primary"
+      style="width: 100%; margin-bottom: 10px"
+      @click="showAddPhyNetModal"
+      :loading="loading"
+      :disabled="!('createPhysicalNetwork' in $store.getters.apis)">
+      <template #icon><plus-outlined /></template> {{ $t('label.add.physical.network') }}
+    </a-button>
     <a-list class="list">
       <a-list-item v-for="network in networks" :key="network.id" class="list__item">
         <div class="list__item-outer-container">
@@ -65,17 +73,94 @@
         </div>
       </a-list-item>
     </a-list>
+    <a-modal
+      :visible="addPhyNetModal"
+      :title="$t('label.add.physical.network')"
+      :maskClosable="false"
+      :closable="true"
+      :footer="null"
+      @cancel="closeModals">
+      <a-form
+        :ref="formRef"
+        :model="form"
+        :rules="rules"
+        @finish="handleAddPhyNet"
+        v-ctrl-enter="handleAddPhyNet"
+        layout="vertical"
+        class="form"
+
+      >
+        <a-form-item name="name" ref="name">
+          <template #label>
+            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
+          </template>
+          <a-input v-model:value="form.name" :placeholder="apiParams.name.description" />
+        </a-form-item>
+        <a-form-item name="isolationmethods" ref="isolationmethods">
+          <template #label>
+            <tooltip-label :title="$t('label.isolationmethods')" :tooltip="apiParams.isolationmethods.description"/>
+          </template>
+          <a-select
+            v-model:value="form.isolationmethods"
+            showSearch
+            optionFilterProp="label"
+            :filterOption="(input, option) => {
+              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            v-focus="true"
+            :placeholder="apiParams.isolationmethods.description">
+            <a-select-option v-for="i in isolationMethods" :key="i" :value="i" :label="i">{{ i }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item name="vlan" ref="vlan">
+          <template #label>
+            <tooltip-label :title="$t('label.vlan')" :tooltip="apiParams.vlan.description"/>
+          </template>
+          <a-input v-model:value="form.vlan" :placeholder="apiParams.vlan.description" />
+        </a-form-item>
+        <a-form-item name="tags" ref="tags">
+          <template #label>
+            <tooltip-label :title="$t('label.tags')" :tooltip="apiParams.tags.description"/>
+          </template>
+          <a-select
+            mode="tags"
+            v-model:value="form.tags"
+            :placeholder="apiParams.tags.description">
+          </a-select>
+        </a-form-item>
+        <a-form-item name="networkspeed" ref="networkspeed">
+          <template #label>
+            <tooltip-label :title="$t('label.networkspeed')" :tooltip="apiParams.networkspeed.description"/>
+          </template>
+          <a-input v-model:value="form.networkspeed" :placeholder="apiParams.networkspeed.description" />
+        </a-form-item>
+        <a-form-item name="broadcastdomainrange" ref="broadcastdomainrange">
+          <template #label>
+            <tooltip-label :title="$t('label.broadcastdomainrange')" :tooltip="apiParams.broadcastdomainrange.description"/>
+          </template>
+          <a-input v-model:value="form.broadcastdomainrange" :placeholder="apiParams.broadcastdomainrange.description" />
+        </a-form-item>
+
+        <div :span="24" class="action-button">
+          <a-button @click="closeModals">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="handleAddPhyNet">{{ $t('label.ok') }}</a-button>
+        </div>
+      </a-form>
+    </a-modal>
   </a-spin>
 </template>
 
 <script>
+import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'PhysicalNetworksTab',
   components: {
-    Status
+    Status,
+    TooltipLabel
   },
   props: {
     resource: {
@@ -90,11 +175,17 @@ export default {
   data () {
     return {
       networks: [],
-      fetchLoading: false
+      fetchLoading: false,
+      addPhyNetModal: false
     }
   },
+  beforeCreate () {
+    this.apiParams = this.$getApiParams('createPhysicalNetwork')
+    console.log(this.apiParams)
+  },
   created () {
     this.fetchData()
+    this.initAddPhyNetForm()
   },
   watch: {
     resource: {
@@ -107,6 +198,11 @@ export default {
       }
     }
   },
+  computed: {
+    isolationMethods () {
+      return ['VLAN', 'VXLAN', 'GRE', 'STT', 'BCF_SEGMENT', 'SSP', 'ODL', 'L3VPN', 'VCS']
+    }
+  },
   methods: {
     fetchData () {
       this.fetchLoading = true
@@ -122,7 +218,9 @@ export default {
       for (const network of this.networks) {
         promises.push(new Promise((resolve, reject) => {
           api('listTrafficTypes', { physicalnetworkid: network.id }).then(json => {
-            network.traffictype = json.listtraffictypesresponse.traffictype.filter(e => { return e.traffictype }).map(e => { return e.traffictype }).join(', ')
+            if (json.listtraffictypesresponse.traffictype) {
+              network.traffictype = json.listtraffictypesresponse.traffictype.filter(e => { return e.traffictype }).map(e => { return e.traffictype }).join(', ')
+            }
             resolve()
           }).catch(error => {
             this.$notifyError(error)
@@ -133,6 +231,52 @@ export default {
       Promise.all(promises).finally(() => {
         this.fetchLoading = false
       })
+    },
+    showAddPhyNetModal () {
+      this.addPhyNetModal = true
+    },
+    initAddPhyNetForm () {
+      this.formRef = ref()
+      this.form = reactive({})
+      this.rules = reactive({
+        name: [{ required: true, message: this.$t('label.required') }]
+      })
+    },
+    handleAddPhyNet () {
+      this.formRef.value.validate().then(() => {
+        const values = toRaw(this.form)
+        values.zoneid = this.resource.id
+        if (values.tags) {
+          values.tags = values.tags.join()
+        }
+        console.log(values)
+        api('createPhysicalNetwork', values).then(response => {
+          this.$pollJob({
+            jobId: response.createphysicalnetworkresponse.jobid,
+            successMessage: this.$t('message.success.add.physical.network'),
+            successMethod: () => {
+              this.fetchData()
+              this.closeModals()
+            },
+            errorMessage: this.$t('message.add.physical.network.failed'),
+            errorMethod: () => {
+              this.fetchData()
+              this.closeModals()
+            },
+            loadingMessage: this.$t('message.add.physical.network.processing'),
+            catchMessage: this.$t('error.fetching.async.job.result'),
+            catchMethod: () => {
+              this.fetchData()
+              this.closeModals()
+            }
+          })
+        }).catch(error => {
+          this.$notifyError(error)
+        })
+      })
+    },
+    closeModals () {
+      this.addPhyNetModal = false
     }
   }
 }