This is an automated email from the ASF dual-hosted git repository. pearl11594 pushed a commit to branch show-configured-oobm in repository https://gitbox.apache.org/repos/asf/cloudstack.git
commit a4d4d302dfd4319b808e82da7afe3350544976b4 Author: Pearl Dsilva <[email protected]> AuthorDate: Fri Feb 28 12:06:48 2025 -0500 UI: Show Host OOBM parameter in form if configured --- ui/public/locales/en.json | 1 + ui/src/config/section/infra/hosts.js | 12 +-- ui/src/views/infra/ConfigureHostOOBM.vue | 171 +++++++++++++++++++++++++++++++ 3 files changed, 174 insertions(+), 10 deletions(-) diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json index 666d2a31e39..29e10e51935 100644 --- a/ui/public/locales/en.json +++ b/ui/public/locales/en.json @@ -3066,6 +3066,7 @@ "message.no.description": "No description entered.", "message.offering.internet.protocol.warning": "WARNING: IPv6 supported Networks use static routing and will require upstream routes to be configured manually.", "message.offering.ipv6.warning": "Please refer documentation for creating IPv6 enabled Network/VPC offering <a href='http://docs.cloudstack.apache.org/en/latest/plugins/ipv6.html#isolated-network-and-vpc-tier'>IPv6 support in CloudStack - Isolated Networks and VPC Network Tiers</a>", +"message.oobm.configured": "Successfully configured Out of Band Management for host", "message.ovf.configurations": "OVF configurations available for the selected appliance. Please select the desired value. Incompatible compute offerings will get disabled.", "message.path.description": "NFS: exported path from the server. VMFS: /datacenter name/datastore name. SharedMountPoint: path where primary storage is mounted, such as /mnt/primary.", "message.please.confirm.remove.ssh.key.pair": "Please confirm that you want to remove this SSH key pair.", diff --git a/ui/src/config/section/infra/hosts.js b/ui/src/config/section/infra/hosts.js index f13029b61ca..79ec40287fb 100644 --- a/ui/src/config/section/infra/hosts.js +++ b/ui/src/config/section/infra/hosts.js @@ -150,16 +150,8 @@ export default { message: 'label.outofbandmanagement.configure', docHelp: 'adminguide/hosts.html#out-of-band-management', dataView: true, - post: true, - args: ['hostid', 'address', 'port', 'username', 'password', 'driver'], - mapping: { - hostid: { - value: (record) => { return record.id } - }, - driver: { - options: ['ipmitool', 'nestedcloudstack', 'redfish'] - } - } + popup: true, + component: shallowRef(defineAsyncComponent(() => import('@/views/infra/ConfigureHostOOBM'))) }, { api: 'enableOutOfBandManagementForHost', diff --git a/ui/src/views/infra/ConfigureHostOOBM.vue b/ui/src/views/infra/ConfigureHostOOBM.vue new file mode 100644 index 00000000000..60712ce32e8 --- /dev/null +++ b/ui/src/views/infra/ConfigureHostOOBM.vue @@ -0,0 +1,171 @@ +// 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> + <div class="form-layout"> + <a-form + :ref="formRef" + :model="form" + :rules="rules" + @finish="handleSubmit" + v-ctrl-enter="handleSubmit" + class="form" + layout="vertical" + > + <a-alert type="warning"> + <template #message> + <span v-html="$t('label.outofbandmanagement.configure')" /> + </template> + </a-alert> + <div style="margin-top: 10px;"> + <a-form-item name="address" ref="address"> + <template #label> + <tooltip-label :title="$t('label.address')" :tooltip="apiParams.address.description"/> + </template> + <a-input + v-model:value="form.address" + v-focus="true" /> + </a-form-item> + <a-form-item name="port" ref="port"> + <template #label> + <tooltip-label :title="$t('label.port')" :tooltip="apiParams.port.description"/> + </template> + <a-input + v-model:value="form.port" /> + </a-form-item> + <a-form-item name="username" ref="username"> + <template #label> + <tooltip-label :title="$t('label.username')" :tooltip="apiParams.username.description"/> + </template> + <a-input + v-model:value="form.username" /> + </a-form-item> + <a-form-item name="password" ref="password"> + <template #label> + <tooltip-label :title="$t('label.password')" :tooltip="apiParams.password.description"/> + </template> + <a-input-password + v-model:value="form.password" + :placeholder="apiParams.password.description"/> + </a-form-item> + <a-form-item name="driver" ref="driver"> + <template #label> + <tooltip-label :title="$t('label.driver')" :tooltip="apiParams.driver.description"/> + </template> + <a-select + v-model:value="form.driver" + style="width: 100%;" + optionFilterProp="value" + :filterOption="(input, option) => { + return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 + }" > + <a-select-option key="" label="">{{ }}</a-select-option> + <a-select-option value="ipmitool">ipmitool</a-select-option> + <a-select-option value="nestedcloudstack">nestedcloudstack</a-select-option> + <a-select-option value="redfish">redfish</a-select-option> + </a-select> + </a-form-item> + </div> + <div :span="24" class="action-button"> + <a-button @click="$emit('close-action')">{{ $t('label.cancel') }}</a-button> + <a-button type="primary" @click="handleSubmit" ref="submit">{{ $t('label.ok') }}</a-button> + </div> + </a-form> + </div> +</template> + +<script> +import TooltipLabel from '@/components/widgets/TooltipLabel' +import { ref, reactive, toRaw } from 'vue' +import { api } from '@/api' + +export default { + name: 'ConfigureHostOOBM', + components: { + TooltipLabel + }, + props: { + resource: { + type: Object, + required: true + } + }, + data () { + return { + } + }, + beforeCreate () { + this.apiParams = this.$getApiParams('configureOutOfBandManagement') + }, + created () { + this.initForm() + }, + methods: { + initForm () { + this.formRef = ref() + this.form = reactive({ + address: this.resource.outofbandmanagement.address || '', + port: this.resource.outofbandmanagement.port || '', + username: this.resource.outofbandmanagement.username || '', + password: this.resource.outofbandmanagement.password || '' + }) + this.rules = reactive({ + address: [{ required: true, message: this.$t('message.error.required.input') }], + port: [{ required: true, message: this.$t('message.error.required.input') }], + username: [{ required: true, message: this.$t('message.error.required.input') }], + password: [{ required: true, message: this.$t('message.error.required.input') }], + driver: [{ required: true, message: this.$t('message.error.required.input') }] + }) + }, + handleSubmit (e) { + e.preventDefault() + this.formRef.value.validate().then(() => { + const values = toRaw(this.form) + var params = { + hostid: this.resource.id, + address: values.address, + port: values.port, + username: values.username, + password: values.password, + driver: values.driver + } + + api('configureOutOfBandManagement', {}, 'POST', params).then(_ => { + this.$message.success(`${this.$t('message.oobm.configured')}`) + this.$emit('close-action') + }).catch(error => { + this.$notifyError(error) + }) + }) + } + } +} +</script> + +<style scoped> +.reason { + padding-top: 20px +} + +.form-layout { + width: 30vw; + + @media (min-width: 500px) { + width: 450px; + } + } +</style>
