| // 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-card v-if="isCustomized"> | |
| <a-col> | |
| <a-row> | |
| <a-col :md="colContraned" :lg="colContraned" v-if="isCustomized"> | |
| <a-form-item | |
| :label="$t('label.cpunumber')" | |
| :validate-status="errors.cpu.status" | |
| :help="errors.cpu.message"> | |
| <a-row :gutter="12"> | |
| <a-col :md="10" :lg="10" v-show="isConstrained && maxCpu && !isNaN(maxCpu)"> | |
| <a-slider | |
| :min="minCpu" | |
| :max="maxCpu" | |
| v-model:value="cpuNumberInputValue" | |
| @change="($event) => updateComputeCpuNumber($event)" | |
| /> | |
| </a-col> | |
| <a-col :md="4" :lg="4"> | |
| <a-input-number | |
| v-focus="isConstrained" | |
| v-model:value="cpuNumberInputValue" | |
| @change="($event) => updateComputeCpuNumber($event)" | |
| /> | |
| </a-col> | |
| </a-row> | |
| </a-form-item> | |
| </a-col> | |
| <a-col :md="8" :lg="8" v-show="!isConstrained" v-if="isCustomized"> | |
| <a-form-item | |
| :label="$t('label.cpuspeed')" | |
| :validate-status="errors.cpuspeed.status" | |
| :help="errors.cpuspeed.message"> | |
| <a-input-number | |
| v-focus="!isConstrained" | |
| v-model:value="cpuSpeedInputValue" | |
| @change="($event) => updateComputeCpuSpeed($event)" | |
| /> | |
| </a-form-item> | |
| </a-col> | |
| <a-col :md="colContraned" :lg="colContraned" v-if="isCustomized"> | |
| <a-form-item | |
| :label="$t('label.memory.mb')" | |
| :validate-status="errors.memory.status" | |
| :help="errors.memory.message"> | |
| <a-row :gutter="12"> | |
| <a-col :md="10" :lg="10" v-show="isConstrained && maxMemory && !isNaN(maxMemory)"> | |
| <a-slider | |
| :min="minMemory" | |
| :max="maxMemory" | |
| v-model:value="memoryInputValue" | |
| @change="($event) => updateComputeMemory($event)" | |
| /> | |
| </a-col> | |
| <a-col :md="4" :lg="4"> | |
| <a-input-number | |
| v-model:value="memoryInputValue" | |
| @change="($event) => updateComputeMemory($event)" | |
| /> | |
| </a-col> | |
| </a-row> | |
| </a-form-item> | |
| </a-col> | |
| <a-col :md="8" v-if="isCustomizedIOps"> | |
| <a-form-item :label="$t('label.miniops')"> | |
| <a-input-number v-model:value="minIOps" @change="updateIOpsValue" /> | |
| <p v-if="errorMinIOps" style="color: red"> {{ $t(errorMinIOps) }} </p> | |
| </a-form-item> | |
| </a-col> | |
| <a-col :md="8" v-if="isCustomizedIOps"> | |
| <a-form-item :label="$t('label.maxiops')"> | |
| <a-input-number v-model:value="maxIOps" @change="updateIOpsValue" /> | |
| <p v-if="errorMaxIOps" style="color: red"> {{ $t(errorMaxIOps) }} </p> | |
| </a-form-item> | |
| </a-col> | |
| </a-row> | |
| </a-col> | |
| </a-card> | |
| </template> | |
| <script> | |
| export default { | |
| name: 'ComputeSelection', | |
| props: { | |
| computeOfferingId: { | |
| type: String, | |
| default: () => '' | |
| }, | |
| isConstrained: { | |
| type: Boolean, | |
| default: true | |
| }, | |
| cpuSpeed: { | |
| type: Number, | |
| default: 0 | |
| }, | |
| initialCpuValue: { | |
| type: Number, | |
| default: 0 | |
| }, | |
| minCpu: { | |
| type: Number, | |
| default: 0 | |
| }, | |
| maxCpu: { | |
| type: Number, | |
| default: 2 | |
| }, | |
| initialMemoryValue: { | |
| type: Number, | |
| default: 0 | |
| }, | |
| minMemory: { | |
| type: Number, | |
| default: 0 | |
| }, | |
| maxMemory: { | |
| type: Number, | |
| default: 256 | |
| }, | |
| cpuNumberInputDecorator: { | |
| type: String, | |
| default: '' | |
| }, | |
| cpuSpeedInputDecorator: { | |
| type: String, | |
| default: '' | |
| }, | |
| memoryInputDecorator: { | |
| type: String, | |
| default: '' | |
| }, | |
| preFillContent: { | |
| type: Object, | |
| default: () => {} | |
| }, | |
| isCustomized: { | |
| type: Boolean, | |
| default: false | |
| }, | |
| isCustomizedIOps: { | |
| type: Boolean, | |
| default: false | |
| } | |
| }, | |
| data () { | |
| return { | |
| cpuNumberInputValue: 0, | |
| cpuSpeedInputValue: 0, | |
| memoryInputValue: 0, | |
| errors: { | |
| cpu: { | |
| status: '', | |
| message: '' | |
| }, | |
| cpuspeed: { | |
| status: '', | |
| message: '' | |
| }, | |
| memory: { | |
| status: '', | |
| message: '' | |
| } | |
| }, | |
| minIOps: null, | |
| maxIOps: null, | |
| errorMinIOps: false, | |
| errorMaxIOps: false | |
| } | |
| }, | |
| computed: { | |
| colContraned () { | |
| if (this.isConstrained && this.maxCpu && !isNaN(this.maxCpu)) { | |
| return 12 | |
| } | |
| return 8 | |
| } | |
| }, | |
| watch: { | |
| computeOfferingId (newValue, oldValue) { | |
| if (newValue !== oldValue) { | |
| this.fillValue() | |
| } | |
| } | |
| }, | |
| mounted () { | |
| if (this.isCustomized) { | |
| this.fillValue() | |
| } | |
| }, | |
| methods: { | |
| fillValue () { | |
| this.cpuNumberInputValue = this.initialCpuValue > 0 ? this.initialCpuValue : this.minCpu | |
| this.memoryInputValue = this.initialMemoryValue > 0 ? this.initialMemoryValue : this.minMemory | |
| this.cpuSpeedInputValue = this.cpuSpeed | |
| if (!this.preFillContent) { | |
| this.updateComputeCpuNumber(this.cpuNumberInputValue) | |
| this.updateComputeCpuSpeed(this.cpuSpeedInputValue) | |
| this.updateComputeMemory(this.memoryInputValue) | |
| return | |
| } | |
| if (this.preFillContent.cpunumber) { | |
| this.cpuNumberInputValue = this.preFillContent.cpunumber | |
| } | |
| if (this.preFillContent.cpuspeed) { | |
| this.cpuSpeedInputValue = this.preFillContent.cpuspeed | |
| } | |
| if (this.preFillContent.memory) { | |
| this.memoryInputValue = this.preFillContent.memory | |
| } | |
| this.updateComputeCpuNumber(this.preFillContent.cpunumber || this.cpuNumberInputValue) | |
| this.updateComputeCpuSpeed(this.preFillContent.cpuspeed || this.cpuSpeedInputValue) | |
| this.updateComputeMemory(this.preFillContent.memory || this.memoryInputValue) | |
| }, | |
| updateComputeCpuNumber (value) { | |
| if (!value) this.cpuNumberInputValue = 0 | |
| if (!this.validateInput('cpu', value)) { | |
| return | |
| } | |
| this.$emit('update-compute-cpunumber', this.cpuNumberInputDecorator, value) | |
| }, | |
| updateComputeCpuSpeed (value) { | |
| this.$emit('update-compute-cpuspeed', this.cpuSpeedInputDecorator, value) | |
| }, | |
| updateComputeMemory (value) { | |
| if (!value) this.memoryInputValue = 0 | |
| if (!this.validateInput('memory', value)) { | |
| return | |
| } | |
| this.$emit('update-compute-memory', this.memoryInputDecorator, value) | |
| }, | |
| validateInput (input, value) { | |
| this.errors[input].status = '' | |
| this.errors[input].message = '' | |
| if (value === null || value === undefined || value.length === 0) { | |
| this.errors[input].status = 'error' | |
| this.errors[input].message = this.$t('message.error.required.input') | |
| return false | |
| } | |
| if (!this.isConstrained) { | |
| return true | |
| } | |
| let min | |
| let max | |
| switch (input) { | |
| case 'cpu': | |
| min = this.minCpu | |
| max = this.maxCpu | |
| break | |
| case 'memory': | |
| min = this.minMemory | |
| max = this.maxMemory | |
| break | |
| } | |
| if (!this.checkValidRange(value, min, max)) { | |
| this.errors[input].status = 'error' | |
| this.errors[input].message = `${this.$t('message.please.enter.value')} ${this.$t('label.from')} ${min} ${this.$t('label.to')} ${max})` | |
| return false | |
| } | |
| return true | |
| }, | |
| checkValidRange (value, min, max) { | |
| if (value < min || value > max) { | |
| return false | |
| } | |
| return true | |
| }, | |
| updateIOpsValue () { | |
| let flag = true | |
| this.errorMinIOps = false | |
| this.errorMaxIOps = false | |
| if (this.minIOps < 0) { | |
| this.errorMinIOps = `${this.$t('message.error.limit.value')} 0` | |
| flag = false | |
| } | |
| if (this.maxIOps < 0) { | |
| this.errorMaxIOps = `${this.$t('message.error.limit.value')} 0` | |
| flag = false | |
| } | |
| if (!flag) { | |
| this.$emit('handler-error', true) | |
| return | |
| } | |
| if (this.minIOps > this.maxIOps) { | |
| this.errorMinIOps = this.$t('message.error.valid.iops.range') | |
| this.errorMaxIOps = this.$t('message.error.valid.iops.range') | |
| this.$emit('handler-error', true) | |
| return | |
| } | |
| this.$emit('update-iops-value', 'minIops', this.minIOps) | |
| this.$emit('update-iops-value', 'maxIops', this.maxIOps) | |
| this.$emit('handler-error', false) | |
| } | |
| } | |
| } | |
| </script> |