| // Licensed to the Apache Software Foundation (ASF) under one | |
| // or more contributor license agreements. See the NOTICE file | |
| // distributed with this work for additional information | |
| // regarding copyright ownership. The ASF licenses this file | |
| // to you under the Apache License, Version 2.0 (the | |
| // "License"); you may not use this file except in compliance | |
| // with the License. You may obtain a copy of the License at | |
| // | |
| // http://www.apache.org/licenses/LICENSE-2.0 | |
| // | |
| // Unless required by applicable law or agreed to in writing, | |
| // software distributed under the License is distributed on an | |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| // KIND, either express or implied. See the License for the | |
| // specific language governing permissions and limitations | |
| // under the License. | |
| <template> | |
| <a-form | |
| class="form" | |
| :ref="formRef" | |
| :model="form" | |
| :rules="rules" | |
| @finish="submitChangeOfferingForVolume" | |
| v-ctrl-enter="submitChangeOfferingForVolume" | |
| layout="vertical"> | |
| <a-form-item> | |
| <a-alert type="warning"> | |
| <template #message> | |
| <span v-html="$t('message.confirm.change.offering.for.volume')" /> | |
| </template> | |
| </a-alert> | |
| </a-form-item> | |
| <a-form-item name="diskofferingid" ref="diskofferingid"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.diskofferingid')" :tooltip="apiParams.diskofferingid.description || $t('label.diskofferingid')"/> | |
| </template> | |
| <a-select | |
| v-model:value="form.diskofferingid" | |
| :loading="loading" | |
| showSearch | |
| optionFilterProp="label" | |
| :filterOption="(input, option) => { | |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 | |
| }" | |
| @change="id => onChangeDiskOffering(id)"> | |
| <a-select-option | |
| v-for="(offering, index) in diskOfferings" | |
| :value="offering.id" | |
| :key="index" | |
| :label="offering.displaytext || offering.name"> | |
| {{ offering.displaytext || offering.name }} | |
| </a-select-option> | |
| </a-select> | |
| </a-form-item> | |
| <span v-if="customDiskOffering"> | |
| <a-form-item name="size" ref="size"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.sizegb')" :tooltip="apiParams.size.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.size" | |
| :placeholder="$t('label.disksize')"/> | |
| </a-form-item> | |
| </span> | |
| <span v-if="isCustomizedDiskIOps"> | |
| <a-form-item name="miniops" ref="miniops"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.miniops')" :tooltip="apiParams.miniops.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.miniops" | |
| :placeholder="this.$t('label.miniops')"/> | |
| </a-form-item> | |
| <a-form-item name="maxiops" ref="maxiops"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.maxiops')" :tooltip="apiParams.maxiops.description"/> | |
| </template> | |
| <a-input | |
| v-model:value="form.maxiops" | |
| :placeholder="this.$t('label.maxiops')"/> | |
| </a-form-item> | |
| </span> | |
| <a-form-item name="autoMigrate" ref="autoMigrate" :label="$t('label.automigrate.volume')"> | |
| <template #label> | |
| <tooltip-label :title="$t('label.automigrate.volume')" :tooltip="apiParams.automigrate.description"/> | |
| </template> | |
| <a-switch | |
| v-model:checked="form.autoMigrate" | |
| :checked="autoMigrate" | |
| @change="val => { autoMigrate = val }"/> | |
| </a-form-item> | |
| <a-form-item name="shrinkOk" ref="shrinkOk" :label="$t('label.shrinkok')" v-if="!['XenServer'].includes(resource.hypervisor)"> | |
| <a-switch | |
| v-model:checked="form.shrinkOk" | |
| :checked="shrinkOk" | |
| @change="val => { shrinkOk = val }"/> | |
| </a-form-item> | |
| <a-divider /> | |
| <div class="actions"> | |
| <a-button @click="closeModal"> | |
| {{ $t('label.cancel') }} | |
| </a-button> | |
| <a-button type="primary" @click="submitChangeOfferingForVolume"> | |
| {{ $t('label.ok') }} | |
| </a-button> | |
| </div> | |
| </a-form> | |
| </template> | |
| <script> | |
| import { ref, reactive, toRaw } from 'vue' | |
| import { getAPI, postAPI } from '@/api' | |
| import { mixinForm } from '@/utils/mixin' | |
| import TooltipLabel from '@/components/widgets/TooltipLabel' | |
| export default { | |
| name: 'ChangeOfferingForVolume', | |
| mixins: [mixinForm], | |
| props: { | |
| resource: { | |
| type: Object, | |
| required: true | |
| } | |
| }, | |
| components: { | |
| TooltipLabel | |
| }, | |
| inject: ['parentFetchData'], | |
| data () { | |
| return { | |
| diskOfferings: [], | |
| autoMigrate: true, | |
| shrinkOk: false, | |
| selectedDiskOfferingId: null, | |
| size: null, | |
| customDiskOffering: false, | |
| loading: false, | |
| isCustomizedDiskIOps: false | |
| } | |
| }, | |
| beforeCreate () { | |
| this.apiParams = this.$getApiParams('changeOfferingForVolume') | |
| }, | |
| created () { | |
| this.initForm() | |
| this.fetchDiskOfferings() | |
| }, | |
| methods: { | |
| initForm () { | |
| this.formRef = ref() | |
| this.form = reactive({ | |
| diskofferingid: this.selectedDiskOfferingId | |
| }) | |
| this.rules = reactive({ | |
| diskofferingid: [{ required: true, message: this.$t('message.error.select') }], | |
| size: [{ required: true, message: this.$t('message.error.custom.disk.size') }], | |
| miniops: [{ | |
| type: 'number', | |
| validator: async (rule, value) => { | |
| if (value && (isNaN(value) || value <= 0)) { | |
| return Promise.reject(this.$t('message.error.number')) | |
| } | |
| return Promise.resolve() | |
| } | |
| }], | |
| maxiops: [{ | |
| type: 'number', | |
| validator: async (rule, value) => { | |
| if (value && (isNaN(value) || value <= 0)) { | |
| return Promise.reject(this.$t('message.error.number')) | |
| } | |
| return Promise.resolve() | |
| } | |
| }] | |
| }) | |
| }, | |
| fetchDiskOfferings () { | |
| getAPI('listDiskOfferings', { | |
| volumeid: this.resource.id, | |
| listall: true | |
| }).then(response => { | |
| this.diskOfferings = response.listdiskofferingsresponse.diskoffering | |
| if (this.diskOfferings) { | |
| this.selectedDiskOfferingId = this.diskOfferings[0].id | |
| this.customDiskOffering = this.diskOfferings[0].iscustomized || false | |
| this.isCustomizedDiskIOps = this.diskOfferings[0]?.iscustomizediops || false | |
| } | |
| }).catch(error => { | |
| this.$notifyError(error) | |
| this.closeModal() | |
| }) | |
| }, | |
| closeModal () { | |
| this.$emit('close-action') | |
| }, | |
| submitChangeOfferingForVolume () { | |
| if (this.loading) return | |
| this.formRef.value.validate().then(() => { | |
| const formRaw = toRaw(this.form) | |
| const values = this.handleRemoveFields(formRaw) | |
| this.loading = true | |
| const params = {} | |
| params.diskofferingid = values.diskofferingid | |
| params.id = this.resource.id | |
| params.automigrate = values.autoMigrate | |
| params.shrinkok = values.shrinkOk | |
| if (values.size) { | |
| params.size = values.size | |
| } | |
| if (values.miniops) { | |
| params.miniops = values.miniops | |
| } | |
| if (values.maxiops) { | |
| params.maxiops = values.maxiops | |
| } | |
| postAPI('changeOfferingForVolume', params).then(response => { | |
| this.$pollJob({ | |
| jobId: response.changeofferingforvolumeresponse.jobid, | |
| successMessage: this.$t('message.change.offering.for.volume'), | |
| successMethod: () => { | |
| this.parentFetchData() | |
| }, | |
| errorMessage: this.$t('message.change.offering.for.volume.failed'), | |
| errorMethod: () => { | |
| this.parentFetchData() | |
| }, | |
| loadingMessage: this.$t('message.change.offering.for.volume.processing'), | |
| catchMessage: this.$t('error.fetching.async.job.result'), | |
| catchMethod: () => { | |
| this.parentFetchData() | |
| } | |
| }) | |
| this.closeModal() | |
| this.parentFetchData() | |
| }).catch(error => { | |
| this.$notifyError(error) | |
| }) | |
| }).catch(error => { | |
| this.formRef.value.scrollToField(error.errorFields[0].name) | |
| }) | |
| }, | |
| onChangeDiskOffering (id) { | |
| const offering = this.diskOfferings.filter(x => x.id === id) | |
| this.customDiskOffering = offering[0]?.iscustomized || false | |
| this.isCustomizedDiskIOps = offering[0]?.iscustomizediops || false | |
| } | |
| } | |
| } | |
| </script> | |
| <style scoped lang="scss"> | |
| .change-offering-for-volume-container { | |
| width: 85vw; | |
| @media (min-width: 760px) { | |
| width: 500px; | |
| } | |
| } | |
| .actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| margin-top: 20px; | |
| button { | |
| &:not(:last-child) { | |
| margin-right: 10px; | |
| } | |
| } | |
| } | |
| </style> |