From 8cb30551d584462c697a4f49c9106d4f15b5cd53 Mon Sep 17 00:00:00 2001
From: Wei Zhou <weizhou@apache.org>
Date: Wed, 23 Aug 2023 12:36:16 +0200
Subject: [PATCH] UI: update ip ranges of shared networks (#7896)

* UI: update ip ranges of shared networks

* UI: remove ip6gateway and ip6cidr from GuestIpRanges.vue
---
 ui/src/views/network/CreateVlanIpRange.vue |  4 +-
 ui/src/views/network/GuestIpRanges.vue     | 98 ++++++++++++++++++++++
 2 files changed, 100 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/network/CreateVlanIpRange.vue b/ui/src/views/network/CreateVlanIpRange.vue
index 96bbc9c041b..d69c1451fe8 100644
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/ui/src/views/network/CreateVlanIpRange.vue
@@ -195,14 +195,14 @@ export default {
           {
             validator: this.checkIpFormat,
             ipV6: true,
-            message: this.$t('message.error.ipV6.address')
+            message: this.$t('message.error.ipv6.address')
           }
         ],
         endipv6: [
           {
             validator: this.checkIpFormat,
             ipV6: true,
-            message: this.$t('message.error.ipV6.address')
+            message: this.$t('message.error.ipv6.address')
           }
         ]
       })
diff --git a/ui/src/views/network/GuestIpRanges.vue b/ui/src/views/network/GuestIpRanges.vue
index 14cd8a116bc..b2e56de5820 100644
--- a/ui/src/views/network/GuestIpRanges.vue
+++ b/ui/src/views/network/GuestIpRanges.vue
@@ -37,6 +37,12 @@
         :pagination="false" >
 
         <template #action="{ record }">
+          <tooltip-button
+            tooltipPlacement="bottom"
+            :tooltip="$t('label.edit')"
+            type="primary"
+            @click="() => { handleUpdateIpRangeModal(record) }"
+            icon="swap-outlined" />
           <a-popconfirm
             :title="$t('message.confirm.remove.ip.range')"
             @confirm="removeIpRange(record.id)"
@@ -84,12 +90,51 @@
         @refresh-data="fetchData"
         @close-action="showCreateForm = false" />
     </a-modal>
+    <a-modal
+      :visible="showUpdateForm"
+      :title="$t('label.update.ip.range')"
+      v-if="selectedItem"
+      :maskClosable="false"
+      :footer="null"
+      @cancel="showUpdateForm = false">
+      <a-form
+        :ref="updRangeRef"
+        :model="formUpdRange"
+        :rules="updRangeRules"
+        @finish="handleUpdateIpRange"
+        v-ctrl-enter="handleUpdateIpRange"
+        layout="vertical"
+        class="form"
+      >
+        <div>
+          <a-form-item name="startip" ref="startip" :label="$t('label.startip')" class="form__item">
+            <a-input v-focus="true" v-model:value="formUpdRange.startip"></a-input>
+          </a-form-item>
+          <a-form-item name="endip" ref="endip" :label="$t('label.endip')" class="form__item">
+            <a-input v-model:value="formUpdRange.endip"></a-input>
+          </a-form-item>
+          <a-form-item name="gateway" ref="gateway" :label="$t('label.gateway')" class="form__item">
+            <a-input v-model:value="formUpdRange.gateway"></a-input>
+          </a-form-item>
+          <a-form-item name="netmask" ref="netmask" :label="$t('label.netmask')" class="form__item">
+            <a-input v-model:value="formUpdRange.netmask"></a-input>
+          </a-form-item>
+        </div>
+
+        <div :span="24" class="action-button">
+          <a-button @click="showUpdateForm = false">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="handleUpdateIpRange">{{ $t('label.ok') }}</a-button>
+        </div>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 <script>
 import { api } from '@/api'
 import CreateVlanIpRange from '@/views/network/CreateVlanIpRange'
 import TooltipButton from '@/components/widgets/TooltipButton'
+import { reactive, ref, toRaw } from 'vue'
+
 export default {
   name: 'GuestIpRanges',
   components: {
@@ -110,6 +155,8 @@ export default {
     return {
       fetchLoading: false,
       showCreateForm: false,
+      showUpdateForm: false,
+      selectedItem: null,
       total: 0,
       ipranges: [],
       page: 1,
@@ -182,6 +229,57 @@ export default {
         this.fetchData()
       })
     },
+    initFormUpdateRange () {
+      this.updRangeRef = ref()
+      this.formUpdRange = reactive({})
+      this.updRangeRules = reactive({
+        startip: [{ required: true, message: this.$t('label.required') }],
+        endip: [{ required: true, message: this.$t('label.required') }],
+        gateway: [{ required: true, message: this.$t('label.required') }],
+        netmask: [{ required: true, message: this.$t('label.required') }]
+      })
+    },
+    handleUpdateIpRangeModal (item) {
+      this.initFormUpdateRange()
+      this.selectedItem = item
+      this.showUpdateForm = true
+
+      this.formUpdRange = reactive({})
+      this.formUpdRange.startip = this.selectedItem?.startip || ''
+      this.formUpdRange.endip = this.selectedItem?.endip || ''
+      this.formUpdRange.gateway = this.selectedItem?.gateway || ''
+      this.formUpdRange.netmask = this.selectedItem?.netmask || ''
+    },
+    handleUpdateIpRange (e) {
+      if (this.componentLoading) return
+      this.updRangeRef.value.validate().then(() => {
+        const values = toRaw(this.formUpdRange)
+
+        this.componentLoading = true
+        this.showUpdateForm = false
+        var params = {
+          id: this.selectedItem.id
+        }
+        var ipRangeKeys = ['gateway', 'netmask', 'startip', 'endip']
+        for (const key of ipRangeKeys) {
+          params[key] = values[key]
+        }
+        api('updateVlanIpRange', params).then(() => {
+          this.$notification.success({
+            message: this.$t('message.success.update.iprange')
+          })
+        }).catch(error => {
+          this.$notification.error({
+            message: `${this.$t('label.error')} ${error.response.status}`,
+            description: error.response.data.updatevlaniprangeresponse?.errortext || error.response.data.errorresponse.errortext,
+            duration: 0
+          })
+        }).finally(() => {
+          this.componentLoading = false
+          this.fetchData()
+        })
+      })
+    },
     changePage (page, pageSize) {
       this.page = page
       this.pageSize = pageSize