mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 01:32:18 +02:00
ui: fix add host form state on submit (#11815)
This commit is contained in:
Abhishek Kumar
GitHub
parent
2b1f0bbbdb
commit
67250d99d4
@ -17,236 +17,238 @@
|
||||
|
||||
<template>
|
||||
<div class="form-layout" v-ctrl-enter="handleSubmitForm">
|
||||
<a-form
|
||||
:ref="formRef"
|
||||
:model="form"
|
||||
:loading="loading"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
@submit="handleSubmitForm">
|
||||
<a-form-item name="zoneid" ref="zoneid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.zonenamelabel')" :tooltip="placeholder.zoneid"/>
|
||||
<a-spin :spinning="loading">
|
||||
<a-form
|
||||
:ref="formRef"
|
||||
:model="form"
|
||||
:loading="loading"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
@submit="handleSubmitForm">
|
||||
<a-form-item name="zoneid" ref="zoneid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.zonenamelabel')" :tooltip="placeholder.zoneid"/>
|
||||
</template>
|
||||
<a-select
|
||||
v-focus="true"
|
||||
v-model:value="form.zoneid"
|
||||
:placeholder="placeholder.zoneid"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
@change="fetchPods">
|
||||
<a-select-option
|
||||
v-for="zone in zonesList"
|
||||
:value="zone.id"
|
||||
:key="zone.id"
|
||||
:label="zone.name">
|
||||
<span>
|
||||
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
|
||||
<global-outlined v-else style="margin-right: 5px" />
|
||||
{{ zone.name }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="podid" ref="podid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.podname')" :tooltip="placeholder.podid"/>
|
||||
</template>
|
||||
<a-select
|
||||
v-model:value="form.podid"
|
||||
:placeholder="placeholder.podid"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
@change="fetchClusters">
|
||||
<a-select-option
|
||||
v-for="pod in podsList"
|
||||
:value="pod.id"
|
||||
:key="pod.id"
|
||||
:label="pod.name">
|
||||
{{ pod.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="clusterid" ref="clusterid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.clustername')" :tooltip="placeholder.clusterid"/>
|
||||
</template>
|
||||
<a-select
|
||||
v-model:value="form.clusterid"
|
||||
:placeholder="placeholder.clusterid"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
@change="handleChangeCluster">
|
||||
<a-select-option
|
||||
v-for="cluster in clustersList"
|
||||
:value="cluster.id"
|
||||
:key="cluster.id"
|
||||
:label="cluster.name">
|
||||
{{ cluster.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="hostname" ref="hostname">
|
||||
<template #label>
|
||||
<tooltip-label
|
||||
:title="selectedClusterHyperVisorType === 'VMware' ? $t('label.esx.host') : $t('label.hostnamelabel')"
|
||||
:tooltip="placeholder.url"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.hostname"
|
||||
:placeholder="placeholder.url"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="username" ref="username" v-if="!['VMware', 'External'].includes(selectedClusterHyperVisorType)">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.username')" :tooltip="placeholder.username"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.username"
|
||||
:placeholder="placeholder.username"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="authmethod" ref="authmethod" v-if="!['VMware', 'External'].includes(selectedClusterHyperVisorType)">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.authentication.method')" :tooltip="$t('label.authentication.method')"/>
|
||||
</template>
|
||||
<a-radio-group
|
||||
v-model:value="form.authmethod"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { handleAuthMethodChange(selected.target.value) }">
|
||||
<a-radio-button value="password">
|
||||
{{ $t('label.password') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="sshkey" v-if="selectedClusterHyperVisorType === 'KVM'">
|
||||
{{ $t('label.authentication.sshkey') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<div v-if="authMethod === 'sshkey'">
|
||||
<a-alert type="warning">
|
||||
<template #message>
|
||||
<span style="display:block;width:300px;word-wrap:break-word;" v-html="$t('message.add.host.sshkey')" />
|
||||
</template>
|
||||
</a-alert>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item name="password" ref="password" v-if="!['VMware', 'External'].includes(selectedClusterHyperVisorType) && authMethod === 'password'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.password')" :tooltip="placeholder.password"/>
|
||||
</template>
|
||||
<a-input-password
|
||||
v-model:value="form.password"
|
||||
:placeholder="placeholder.password" />
|
||||
</a-form-item>
|
||||
<a-form-item name="agentusername" ref="agentusername" v-if="selectedClusterHyperVisorType === 'Ovm3'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.agent.username')" :tooltip="$t('label.agent.username')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.agentusername"
|
||||
:placeholder="$t('label.agent.username')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="agentpassword" ref="agentpassword" v-if="selectedClusterHyperVisorType === 'Ovm3'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.agent.password')" :tooltip="$t('label.agent.password')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.agentpassword"
|
||||
:placeholder="$t('label.agent.password')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="agentport" ref="agentport" v-if="selectedClusterHyperVisorType === 'Ovm3'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.agentport')" :tooltip="$t('label.agentport')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.agentport"
|
||||
:placeholder="$t('label.agentport')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="baremetalcpucores" ref="baremetalcpucores" v-if="selectedClusterHyperVisorType === 'BareMetal'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.baremetalcpucores')" :tooltip="$t('label.baremetalcpucores')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.baremetalcpucores"
|
||||
:placeholder="$t('label.baremetalcpucores')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="baremetalcpu" ref="baremetalcpu" v-if="selectedClusterHyperVisorType === 'BareMetal'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.baremetalcpu')" :tooltip="$t('label.baremetalcpu')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.baremetalcpu"
|
||||
:placeholder="$t('label.baremetalcpu')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="baremetalmemory" ref="baremetalmemory" v-if="selectedClusterHyperVisorType === 'BareMetal'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.baremetalmemory')" :tooltip="$t('label.baremetalmemory')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.baremetalmemory"
|
||||
:placeholder="$t('label.baremetalmemory')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="baremetalmac" ref="baremetalmac" v-if="selectedClusterHyperVisorType === 'BareMetal'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.baremetalmac')" :tooltip="$t('label.baremetalmac')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.baremetalmac"
|
||||
:placeholder="$t('label.baremetalmac')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="hosttags" ref="hosttags">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.hosttags')" :tooltip="placeholder.hosttags"/>
|
||||
</template>
|
||||
<a-select
|
||||
mode="tags"
|
||||
showSearch
|
||||
optionFilterProp="value"
|
||||
:filterOption="(input, option) => {
|
||||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
v-model:value="form.hosttags"
|
||||
:placeholder="placeholder.hosttags">
|
||||
<a-select-option v-for="tag in hostTagsList" :key="tag.name">{{ tag.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="externaldetails" ref="externaldetails" v-if="selectedClusterHyperVisorType === 'External'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.configuration.details')" :tooltip="apiParams.externaldetails.description"/>
|
||||
</template>
|
||||
<a-switch v-model:checked="externalDetailsEnabled" @change="onExternalDetailsEnabledChange"/>
|
||||
<a-card v-if="externalDetailsEnabled" style="margin-top: 10px">
|
||||
<div style="margin-bottom: 10px">{{ $t('message.add.extension.resource.details') }}</div>
|
||||
<details-input
|
||||
v-model:value="form.externaldetails" />
|
||||
</a-card>
|
||||
</a-form-item>
|
||||
<a-form-item name="isdedicated" ref="isdedicated">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.isdedicated')"/>
|
||||
</template>
|
||||
<a-checkbox @change="toggleDedicated"></a-checkbox>
|
||||
</a-form-item>
|
||||
<template v-if="showDedicated">
|
||||
<DedicateDomain
|
||||
@domainChange="id => dedicatedDomainId = id"
|
||||
@accountChange="id => dedicatedAccount = id"
|
||||
:error="domainError" />
|
||||
</template>
|
||||
<a-select
|
||||
v-focus="true"
|
||||
v-model:value="form.zoneid"
|
||||
:placeholder="placeholder.zoneid"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
@change="fetchPods">
|
||||
<a-select-option
|
||||
v-for="zone in zonesList"
|
||||
:value="zone.id"
|
||||
:key="zone.id"
|
||||
:label="zone.name">
|
||||
<span>
|
||||
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
|
||||
<global-outlined v-else style="margin-right: 5px" />
|
||||
{{ zone.name }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="podid" ref="podid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.podname')" :tooltip="placeholder.podid"/>
|
||||
</template>
|
||||
<a-select
|
||||
v-model:value="form.podid"
|
||||
:placeholder="placeholder.podid"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
@change="fetchClusters">
|
||||
<a-select-option
|
||||
v-for="pod in podsList"
|
||||
:value="pod.id"
|
||||
:key="pod.id"
|
||||
:label="pod.name">
|
||||
{{ pod.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="clusterid" ref="clusterid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.clustername')" :tooltip="placeholder.clusterid"/>
|
||||
</template>
|
||||
<a-select
|
||||
v-model:value="form.clusterid"
|
||||
:placeholder="placeholder.clusterid"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
@change="handleChangeCluster">
|
||||
<a-select-option
|
||||
v-for="cluster in clustersList"
|
||||
:value="cluster.id"
|
||||
:key="cluster.id"
|
||||
:label="cluster.name">
|
||||
{{ cluster.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="hostname" ref="hostname">
|
||||
<template #label>
|
||||
<tooltip-label
|
||||
:title="selectedClusterHyperVisorType === 'VMware' ? $t('label.esx.host') : $t('label.hostnamelabel')"
|
||||
:tooltip="placeholder.url"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.hostname"
|
||||
:placeholder="placeholder.url"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="username" ref="username" v-if="!['VMware', 'External'].includes(selectedClusterHyperVisorType)">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.username')" :tooltip="placeholder.username"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.username"
|
||||
:placeholder="placeholder.username"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="authmethod" ref="authmethod" v-if="!['VMware', 'External'].includes(selectedClusterHyperVisorType)">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.authentication.method')" :tooltip="$t('label.authentication.method')"/>
|
||||
</template>
|
||||
<a-radio-group
|
||||
v-model:value="form.authmethod"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { handleAuthMethodChange(selected.target.value) }">
|
||||
<a-radio-button value="password">
|
||||
{{ $t('label.password') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="sshkey" v-if="selectedClusterHyperVisorType === 'KVM'">
|
||||
{{ $t('label.authentication.sshkey') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<div v-if="authMethod === 'sshkey'">
|
||||
<a-alert type="warning">
|
||||
<template #message>
|
||||
<span style="display:block;width:300px;word-wrap:break-word;" v-html="$t('message.add.host.sshkey')" />
|
||||
</template>
|
||||
</a-alert>
|
||||
|
||||
<a-divider></a-divider>
|
||||
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button @click="handleSubmitForm" ref="submit" type="primary">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item name="password" ref="password" v-if="!['VMware', 'External'].includes(selectedClusterHyperVisorType) && authMethod === 'password'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.password')" :tooltip="placeholder.password"/>
|
||||
</template>
|
||||
<a-input-password
|
||||
v-model:value="form.password"
|
||||
:placeholder="placeholder.password" />
|
||||
</a-form-item>
|
||||
<a-form-item name="agentusername" ref="agentusername" v-if="selectedClusterHyperVisorType === 'Ovm3'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.agent.username')" :tooltip="$t('label.agent.username')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.agentusername"
|
||||
:placeholder="$t('label.agent.username')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="agentpassword" ref="agentpassword" v-if="selectedClusterHyperVisorType === 'Ovm3'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.agent.password')" :tooltip="$t('label.agent.password')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.agentpassword"
|
||||
:placeholder="$t('label.agent.password')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="agentport" ref="agentport" v-if="selectedClusterHyperVisorType === 'Ovm3'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.agentport')" :tooltip="$t('label.agentport')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.agentport"
|
||||
:placeholder="$t('label.agentport')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="baremetalcpucores" ref="baremetalcpucores" v-if="selectedClusterHyperVisorType === 'BareMetal'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.baremetalcpucores')" :tooltip="$t('label.baremetalcpucores')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.baremetalcpucores"
|
||||
:placeholder="$t('label.baremetalcpucores')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="baremetalcpu" ref="baremetalcpu" v-if="selectedClusterHyperVisorType === 'BareMetal'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.baremetalcpu')" :tooltip="$t('label.baremetalcpu')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.baremetalcpu"
|
||||
:placeholder="$t('label.baremetalcpu')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="baremetalmemory" ref="baremetalmemory" v-if="selectedClusterHyperVisorType === 'BareMetal'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.baremetalmemory')" :tooltip="$t('label.baremetalmemory')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.baremetalmemory"
|
||||
:placeholder="$t('label.baremetalmemory')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="baremetalmac" ref="baremetalmac" v-if="selectedClusterHyperVisorType === 'BareMetal'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.baremetalmac')" :tooltip="$t('label.baremetalmac')"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.baremetalmac"
|
||||
:placeholder="$t('label.baremetalmac')" />
|
||||
</a-form-item>
|
||||
<a-form-item name="hosttags" ref="hosttags">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.hosttags')" :tooltip="placeholder.hosttags"/>
|
||||
</template>
|
||||
<a-select
|
||||
mode="tags"
|
||||
showSearch
|
||||
optionFilterProp="value"
|
||||
:filterOption="(input, option) => {
|
||||
return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
v-model:value="form.hosttags"
|
||||
:placeholder="placeholder.hosttags">
|
||||
<a-select-option v-for="tag in hostTagsList" :key="tag.name">{{ tag.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="externaldetails" ref="externaldetails" v-if="selectedClusterHyperVisorType === 'External'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.configuration.details')" :tooltip="apiParams.externaldetails.description"/>
|
||||
</template>
|
||||
<a-switch v-model:checked="externalDetailsEnabled" @change="onExternalDetailsEnabledChange"/>
|
||||
<a-card v-if="externalDetailsEnabled" style="margin-top: 10px">
|
||||
<div style="margin-bottom: 10px">{{ $t('message.add.extension.resource.details') }}</div>
|
||||
<details-input
|
||||
v-model:value="form.externaldetails" />
|
||||
</a-card>
|
||||
</a-form-item>
|
||||
<a-form-item name="isdedicated" ref="isdedicated">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.isdedicated')"/>
|
||||
</template>
|
||||
<a-checkbox @change="toggleDedicated"></a-checkbox>
|
||||
</a-form-item>
|
||||
<template v-if="showDedicated">
|
||||
<DedicateDomain
|
||||
@domainChange="id => dedicatedDomainId = id"
|
||||
@accountChange="id => dedicatedAccount = id"
|
||||
:error="domainError" />
|
||||
</template>
|
||||
|
||||
<a-divider></a-divider>
|
||||
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button @click="handleSubmitForm" ref="submit" type="primary">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user