Merge branch '4.18'

ui/public/locales/en.json

@@ -2278,7 +2278,7 @@
 "message.action.delete.system.service.offering": "Please confirm that you want to delete this system service offering.",
 "message.action.delete.template": "Please confirm that you want to delete this template.",
 "message.action.delete.tungsten.router.table": "Please confirm that you want to remove Route Table from this network?",
-"message.action.delete.volume": "Please confirm that you want to delete this volume.",
+"message.action.delete.volume": "Please confirm that you want to delete this volume. Note: this will not delete any snapshots of this volume.",
 "message.action.delete.vpn.user": "Please confirm that you want to delete the VPN user.",
 "message.action.delete.zone": "Please confirm that you want to delete this zone.",
 "message.action.destroy.instance": "Please confirm that you want to destroy the instance.",

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

@@ -36,25 +36,30 @@
         :rowKey="item => item.id"
         :pagination="false" >
 
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'actions'">
-            <a-popconfirm
-              :title="$t('message.confirm.remove.ip.range')"
-              @confirm="removeIpRange(record.id)"
-              :okText="$t('label.yes')"
-              :cancelText="$t('label.no')" >
-              <tooltip-button
-                tooltipPlacement="bottom"
-                :tooltip="$t('label.action.delete.ip.range')"
-                type="primary"
-                :danger="true"
-                icon="delete-outlined" />
-            </a-popconfirm>
-          </template>
+        <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)"
+            :okText="$t('label.yes')"
+            :cancelText="$t('label.no')" >
+            <tooltip-button
+              tooltipPlacement="bottom"
+              :tooltip="$t('label.action.delete.ip.range')"
+              type="primary"
+              :danger="true"
+              icon="delete-outlined" />
+          </a-popconfirm>
         </template>
-
       </a-table>
+
       <a-divider/>
+
       <a-pagination
         class="row-element pagination"
         size="small"
@@ -86,12 +91,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: {
@@ -112,6 +156,8 @@ export default {
     return {
       fetchLoading: false,
       showCreateForm: false,
+      showUpdateForm: false,
+      selectedItem: null,
       total: 0,
       ipranges: [],
       page: 1,
@@ -184,6 +230,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