PR9346: move IPv4 subnet to seperated tab

weizhouapache · Jul 16, 2024 · 6d52a64 · 6d52a64
1 parent 0795237
commit 6d52a64
Show file tree

Hide file tree

Showing 3 changed files with 653 additions and 13 deletions.
diff --git a/ui/src/config/section/infra/zones.js b/ui/src/config/section/infra/zones.js
@@ -72,6 +72,9 @@ export default {
   }, {
     name: 'physical.network',
     component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/PhysicalNetworksTab.vue')))
+  }, {
+    name: 'ipv4.subnets',
+    component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/Ipv4GuestSubnetsTab.vue')))
   }, {
     name: 'system.vms',
     component: shallowRef(defineAsyncComponent(() => import('@/views/infra/zone/SystemVmsTab.vue'))),

diff --git a/ui/src/views/infra/network/IpRangesTabGuest.vue b/ui/src/views/infra/network/IpRangesTabGuest.vue
@@ -108,19 +108,19 @@
 
     <a-modal
       :visible="accountForIpv4GuestSubnetModal"
-      v-if="selectedItem"
+      v-if="selectedIpv4GuestSubnet"
       :closable="true"
       :maskClosable="false"
       :footer="null"
       @cancel="accountForIpv4GuestSubnetModal = false">
       <div>
         <div style="margin-bottom: 10px;">
           <div class="list__label">{{ $t('label.account') }}</div>
-          <div>{{ selectedItem.account }}</div>
+          <div>{{ selectedIpv4GuestSubnet.account }}</div>
         </div>
         <div style="margin-bottom: 10px;">
           <div class="list__label">{{ $t('label.domain') }}</div>
-          <div>{{ selectedItem.domain }}</div>
+          <div>{{ selectedIpv4GuestSubnet.domain }}</div>
         </div>
       </div>
 
@@ -227,7 +227,7 @@
     <a-modal
       :visible="updateIpv4SubnetModal"
       :title="$t('label.update.ip.range')"
-      v-if="selectedItem"
+      v-if="selectedIpv4GuestSubnet"
       :maskClosable="false"
       :footer="null"
       @cancel="updateIpv4SubnetModal = false">
@@ -410,7 +410,7 @@ export default {
       showCreateForm: false,
       page: 1,
       pageSize: 10,
-      selectedItem: null,
+      selectedIpv4GuestSubnet: null,
       ipv4Subnets: [],
       showAccountForIpv4GuestSubnetFields: false,
       accountForIpv4GuestSubnetModal: false,
@@ -574,8 +574,8 @@ export default {
       api('listIpv4GuestSubnetsForZone', {
         zoneid: this.resource.zoneid,
         showicon: true,
-        page: this.page,
-        pagesize: this.pageSize
+        page: this.ipv4SubnetPage,
+        pagesize: this.ipv4SubnetPageSize
       }).then(response => {
         this.ipv4Subnets = response?.listipv4guestsubnetsforzoneresponse?.zoneipv4subnet || []
         this.ipv4SubnetsTotal = response?.listipv4guestsubnetsforzoneresponse?.count || 0
@@ -707,8 +707,8 @@ export default {
       }
 
       var params = {
-        id: this.selectedItem.id,
-        zoneid: this.selectedItem.zoneid,
+        id: this.selectedIpv4GuestSubnet.id,
+        zoneid: this.selectedIpv4GuestSubnet.zoneid,
         domainid: this.addAccountForIpv4GuestSubnet.domain
       }
 
@@ -774,7 +774,7 @@ export default {
     },
     handleOpenAddAccountForIpv4GuestSubnetModal (item) {
       if (!this.addIpv4SubnetModal) {
-        this.selectedItem = item
+        this.selectedIpv4GuestSubnet = item
       }
       this.addAccountForIpv4GuestSubnetModal = true
       this.fetchDomains()
@@ -790,9 +790,9 @@ export default {
     },
     handleUpdateIpv4SubnetModal (item) {
       this.initUpdateIpv4SubnetForm()
-      this.selectedItem = item
+      this.selectedIpv4GuestSubnet = item
       this.updateIpv4SubnetModal = true
-      this.formUpdateIpv4Subnet.subnet = this.selectedItem?.subnet || ''
+      this.formUpdateIpv4Subnet.subnet = this.selectedIpv4GuestSubnet?.subnet || ''
     },
     handleDeleteIpv4Subnet (id) {
       this.componentLoading = true
@@ -863,7 +863,7 @@ export default {
         this.componentLoading = true
         this.updateIpv4SubnetModal = false
         var params = {
-          id: this.selectedItem.id,
+          id: this.selectedIpv4GuestSubnet.id,
           subnet: values.subnet
         }
         api('updateIpv4GuestSubnetForZone', params).then(response => {