From 67250d99d4494b888270e76202906566bc614673 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Fri, 10 Oct 2025 13:09:25 +0530
Subject: [PATCH] ui: fix add host form state on submit (#11815)

---
 ui/src/views/infra/HostAdd.vue | 458 +++++++++++++++++----------------
 1 file changed, 230 insertions(+), 228 deletions(-)

diff --git a/ui/src/views/infra/HostAdd.vue b/ui/src/views/infra/HostAdd.vue
index 4cc179ac467..6879fa89f8b 100644
--- a/ui/src/views/infra/HostAdd.vue
+++ b/ui/src/views/infra/HostAdd.vue
@@ -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>