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

@@ -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')
           }
         ]
       })

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