UI: Fix new UI missing 4 parameters when adding a BareMetal host (#5812)

* fix new UI missing 4 parameters when adding a BareMetal host

* remove test options

* add rule for hosttag with baremetal

* fixes password not provided

ui/src/views/infra/HostAdd.vue

@@ -17,19 +17,27 @@
 
 <template>
   <a-spin :spinning="loading">
-    <div class="form" v-ctrl-enter="handleSubmitForm">
+    <div class="form-layout" v-ctrl-enter="handleSubmitForm">
-
+      <div class="form">
-      <div class="form__item">
+        <a-form
-        <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
+          :form="form"
+          layout="vertical"
+          @submit="handleSubmitForm">
+          <a-form-item>
+            <tooltip-label slot="label" :title="$t('label.zonenamelabel')" :tooltip="placeholder.zoneid"/>
             <a-select
-          v-model="zoneId"
+              v-decorator="['zoneid', {
-          @change="fetchPods"
+                initialValue: this.zoneId,
+                rules: [{ required: true, message: $t('message.error.select') }]
+              }]"
+              :placeholder="placeholder.zoneid"
               autoFocus
               showSearch
               optionFilterProp="children"
               :filterOption="(input, option) => {
                 return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }" >
+              }"
+              @change="fetchPods">
               <a-select-option
                 v-for="zone in zonesList"
                 :value="zone.id"
@@ -42,18 +50,21 @@
                 </span>
               </a-select-option>
             </a-select>
-      </div>
+          </a-form-item>
-
+          <a-form-item>
-      <div class="form__item">
+            <tooltip-label slot="label" :title="$t('label.podname')" :tooltip="placeholder.podid"/>
-        <div class="form__label"><span class="required">* </span>{{ $t('label.podname') }}</div>
             <a-select
-          v-model="podId"
+              v-decorator="['podid', {
-          @change="fetchClusters"
+                initialValue: podId,
+                rules: [{ required: true, message: $t('message.error.select') }]
+              }]"
+              :placeholder="placeholder.podid"
               showSearch
               optionFilterProp="children"
               :filterOption="(input, option) => {
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }" >
+              }"
+              @change="fetchClusters">
               <a-select-option
                 v-for="pod in podsList"
                 :value="pod.id"
@@ -61,18 +72,21 @@
                 {{ pod.name }}
               </a-select-option>
             </a-select>
-      </div>
+          </a-form-item>
-
+          <a-form-item>
-      <div class="form__item">
+            <tooltip-label slot="label" :title="$t('label.clustername')" :tooltip="placeholder.clusterid"/>
-        <div class="form__label"><span class="required">* </span>{{ $t('label.clustername') }}</div>
             <a-select
-          v-model="clusterId"
+              v-decorator="['clusterid', {
-          @change="handleChangeCluster"
+                initialValue: clusterId,
+                rules: [{ required: true, message: $t('message.error.select') }]
+              }]"
+              :placeholder="placeholder.clusterid"
               showSearch
               optionFilterProp="children"
               :filterOption="(input, option) => {
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }" >
+              }"
+              @change="handleChangeCluster">
               <a-select-option
                 v-for="cluster in clustersList"
                 :value="cluster.id"
@@ -80,22 +94,30 @@
                 {{ cluster.name }}
               </a-select-option>
             </a-select>
-      </div>
+          </a-form-item>
-
+          <a-form-item>
-      <div class="form__item required-field">
+            <tooltip-label
-        <div class="form__label"><span class="required">* </span>{{ selectedClusterHyperVisorType === 'VMware' ? $t('label.esx.host') : $t('label.hostnamelabel') }}</div>
+              slot="label"
-        <span class="required required-label">{{ $t('label.required') }}</span>
+              :title="selectedClusterHyperVisorType === 'VMware' ? $t('label.esx.host') : $t('label.hostnamelabel')"
-        <a-input v-model="hostname"></a-input>
+              :tooltip="placeholder.url"/>
-      </div>
+            <a-input
-
+              v-decorator="['hostname', {
-      <div class="form__item required-field" v-if="selectedClusterHyperVisorType !== 'VMware'">
+                initialValue: hostname,
-        <div class="form__label"><span class="required">* </span>{{ $t('label.username') }}</div>
+                rules: [{ required: true, message: $t('message.error.required.input') }]
-        <span class="required required-label">{{ $t('label.required') }}</span>
+              }]"
-        <a-input :placeholder="placeholder.username" v-model="username"></a-input>
+              :placeholder="placeholder.url"></a-input>
-      </div>
+          </a-form-item>
-
+          <a-form-item v-if="selectedClusterHyperVisorType !== 'VMware'">
-      <div class="form__item" v-if="selectedClusterHyperVisorType !== 'VMware'">
+            <tooltip-label slot="label" :title="$t('label.username')" :tooltip="placeholder.username"/>
-        <div class="form__label"><span class="required">* </span>{{ $t('label.authentication.method') }}</div>
+            <a-input
+              v-decorator="['username', {
+                initialValue: username,
+                rules: [{ required: true, message: $t('message.error.required.input') }]
+              }]"
+              :placeholder="placeholder.username"></a-input>
+          </a-form-item>
+          <a-form-item v-if="selectedClusterHyperVisorType !== 'VMware'">
+            <tooltip-label slot="label" :title="$t('label.authentication.method')" :tooltip="$t('label.authentication.method')"/>
             <a-radio-group
               v-decorator="['authmethod', {
                 initialValue: authMethod
@@ -110,55 +132,91 @@
                 {{ $t('label.authentication.sshkey') }}
               </a-radio-button>
             </a-radio-group>
-        <span v-if="authMethod === 'sshkey'">
+            <div v-if="authMethod === 'sshkey'">
               <a-alert type="warning">
                 <span style="display:block;width:300px;word-wrap:break-word;" slot="message" v-html="$t('message.add.host.sshkey')" />
               </a-alert>
-        </span>
             </div>
-
+          </a-form-item>
-      <div class="form__item required-field" v-if="selectedClusterHyperVisorType !== 'VMware' && authMethod === 'password'">
+          <a-form-item v-if="selectedClusterHyperVisorType !== 'VMware' && authMethod === 'password'">
-        <div class="form__label"><span class="required">* </span>{{ $t('label.password') }}</div>
+            <tooltip-label slot="label" :title="$t('label.password')" :tooltip="placeholder.password"/>
-        <span class="required required-label">{{ $t('label.required') }}</span>
+            <a-input-password
-        <a-input :placeholder="placeholder.password" type="password" v-model="password"></a-input>
+              v-decorator="['password', {
-      </div>
+                initialValue: password,
-
+                rules: [{ required: true, message: $t('message.error.required.input') }]
-      <template v-if="selectedClusterHyperVisorType === 'Ovm3'">
+              }]"
-        <div class="form__item">
+              :placeholder="placeholder.password"></a-input-password>
-          <div class="form__label">{{ $t('label.agent.username') }}</div>
+          </a-form-item>
-          <a-input v-model="agentusername"></a-input>
+          <a-form-item v-if="selectedClusterHyperVisorType === 'Ovm3'">
-        </div>
+            <tooltip-label slot="label" :title="$t('label.agent.username')" :tooltip="$t('label.agent.username')"/>
-        <div class="form__item required-field">
+            <a-input
-          <div class="form__label"><span class="required">* </span>{{ $t('label.agent.password') }}</div>
+              v-decorator="['agentusername', { initialValue: agentusername }]"
-          <span class="required required-label">{{ $t('label.required') }}</span>
+              :placeholder="$t('label.agent.username')"></a-input>
-          <a-input type="password" v-model="agentpassword"></a-input>
+          </a-form-item>
-        </div>
+          <a-form-item v-if="selectedClusterHyperVisorType === 'Ovm3'">
-        <div class="form__item">
+            <tooltip-label slot="label" :title="$t('label.agent.password')" :tooltip="$t('label.agent.password')"/>
-          <div class="form__label">{{ $t('label.agentport') }}</div>
+            <a-input
-          <a-input v-model="agentport"></a-input>
+              v-decorator="['agentpassword', { initialValue: agentpassword }]"
-        </div>
+              :placeholder="$t('label.agent.password')"></a-input>
-      </template>
+          </a-form-item>
-
+          <a-form-item v-if="selectedClusterHyperVisorType === 'Ovm3'">
-      <div class="form__item">
+            <tooltip-label slot="label" :title="$t('label.agentport')" :tooltip="$t('label.agentport')"/>
-        <div class="form__label">{{ $t('label.hosttags') }}</div>
+            <a-input
+              v-decorator="['agentport', { initialValue: agentport }]"
+              :placeholder="$t('label.agentport')"></a-input>
+          </a-form-item>
+          <a-form-item v-if="selectedClusterHyperVisorType === 'BareMetal'">
+            <tooltip-label slot="label" :title="$t('label.baremetalcpucores')" :tooltip="$t('label.baremetalcpucores')"/>
+            <a-input
+              v-decorator="['baremetalcpucores', {
+                rules: [{ required: true, message: $t('message.error.required.input') }]
+              }]"
+              :placeholder="$t('label.baremetalcpucores')"></a-input>
+          </a-form-item>
+          <a-form-item v-if="selectedClusterHyperVisorType === 'BareMetal'">
+            <tooltip-label slot="label" :title="$t('label.baremetalcpu')" :tooltip="$t('label.baremetalcpu')"/>
+            <a-input
+              v-decorator="['baremetalcpu', {
+                rules: [{ required: true, message: $t('message.error.required.input') }]
+              }]"
+              :placeholder="$t('label.baremetalcpu')"></a-input>
+          </a-form-item>
+          <a-form-item v-if="selectedClusterHyperVisorType === 'BareMetal'">
+            <tooltip-label slot="label" :title="$t('label.baremetalmemory')" :tooltip="$t('label.baremetalmemory')"/>
+            <a-input
+              v-decorator="['baremetalmemory', {
+                rules: [{ required: true, message: $t('message.error.required.input') }]
+              }]"
+              :placeholder="$t('label.baremetalmemory')"></a-input>
+          </a-form-item>
+          <a-form-item v-if="selectedClusterHyperVisorType === 'BareMetal'">
+            <tooltip-label slot="label" :title="$t('label.baremetalmac')" :tooltip="$t('label.baremetalmac')"/>
+            <a-input
+              v-decorator="['baremetalmac', {
+                rules: [{ required: true, message: $t('message.error.required.input') }]
+              }]"
+              :placeholder="$t('label.baremetalmac')"></a-input>
+          </a-form-item>
+          <a-form-item>
+            <tooltip-label slot="label" :title="$t('label.hosttags')" :tooltip="placeholder.hosttags"/>
             <a-select
               mode="tags"
               :placeholder="placeholder.hosttags"
-          v-model="selectedTags"
               showSearch
               optionFilterProp="children"
               :filterOption="(input, option) => {
                 return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }" >
+              }"
+              v-decorator="['hosttags', {
+                rules: hostTagRules
+              }]">
               <a-select-option v-for="tag in hostTagsList" :key="tag.name">{{ tag.name }}</a-select-option>
             </a-select>
-      </div>
+          </a-form-item>
-
+          <a-form-item>
-      <div class="form__item">
+            <tooltip-label slot="label" :title="$t('label.isdedicated')"/>
-        <div class="form__label">{{ $t('label.isdedicated') }}</div>
+            <a-checkbox @change="toggleDedicated"></a-checkbox>
-        <a-checkbox @change="toggleDedicated" />
+          </a-form-item>
-      </div>
-
           <template v-if="showDedicated">
             <DedicateDomain
               @domainChange="id => dedicatedDomainId = id"
@@ -169,10 +227,11 @@
           <a-divider></a-divider>
 
           <div :span="24" class="action-button">
-        <a-button @click="() => this.$parent.$parent.close()">{{ $t('label.cancel') }}</a-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>
+      </div>
     </div>
   </a-spin>
 </template>
@@ -181,12 +240,14 @@
 import { api } from '@/api'
 import DedicateDomain from '../../components/view/DedicateDomain'
 import ResourceIcon from '@/components/view/ResourceIcon'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'HostAdd',
   components: {
     DedicateDomain,
-    ResourceIcon
+    ResourceIcon,
+    TooltipLabel
   },
   props: {
     resource: {
@@ -222,12 +283,30 @@ export default {
       domainError: false,
       params: [],
       placeholder: {
+        zoneid: null,
+        podid: null,
+        clusterid: null,
+        url: null,
         username: null,
         password: null,
-        hosttags: null
+        hosttags: null,
+        isdedicated: null
       }
     }
   },
+  computed: {
+    hostTagRules () {
+      let rules = []
+      if (this.selectedClusterHyperVisorType === 'BareMetal') {
+        rules = [{ required: true, message: this.$t('message.error.select') }]
+      }
+
+      return rules
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
   created () {
     this.fetchData()
   },
@@ -274,7 +353,7 @@ export default {
         this.clustersList = response.listclustersresponse.cluster || []
         this.clusterId = this.clustersList[0].id || null
         if (this.clusterId) {
-          this.handleChangeCluster()
+          this.handleChangeCluster(this.clusterId)
         }
       }).catch(error => {
         this.$notifyError(error)
@@ -287,7 +366,16 @@ export default {
     fetchHostTags () {
       this.loading = true
       api('listHostTags').then(response => {
-        this.hostTagsList = response.listhosttagsresponse.hosttag || []
+        const listTagExists = []
+        const hostTagsList = response.listhosttagsresponse.hosttag || []
+        hostTagsList.forEach(tag => {
+          if (listTagExists.includes(tag.name)) {
+            return true
+          }
+
+          listTagExists.push(tag.name)
+          this.hostTagsList.push(tag)
+        })
       }).catch(error => {
         this.$notifyError(error)
         this.hostTagsList = []
@@ -295,7 +383,8 @@ export default {
         this.loading = false
       })
     },
-    handleChangeCluster () {
+    handleChangeCluster (value) {
+      this.clusterId = value
       this.selectedCluster = this.clustersList.find(i => i.id === this.clusterId)
       this.selectedClusterHyperVisorType = this.selectedCluster.hypervisortype
     },
@@ -309,50 +398,36 @@ export default {
     },
     handleSubmitForm () {
       if (this.loading) return
-      const requiredFields = document.querySelectorAll('.required-field')
+      this.form.validateFieldsAndScroll((err, values) => {
+        if (err) return
 
-      requiredFields.forEach(field => {
+        if (values.hostname.indexOf('http://') === -1) {
-        const input = field.querySelector('.ant-input')
+          this.url = `http://${values.hostname}`
-        if (!input.value) {
-          input.parentNode.querySelector('.required-label').classList.add('required-label--error')
         } else {
-          input.parentNode.querySelector('.required-label').classList.remove('required-label--error')
+          this.url = values.hostname
-        }
-      })
-
-      if (this.$el.querySelectorAll('.required-label--error').length > 0) return
-
-      if (this.selectedClusterHyperVisorType === 'VMware') {
-        this.username = ''
-        this.password = ''
-      }
-
-      if (this.hostname.indexOf('http://') === -1) {
-        this.url = `http://${this.hostname}`
-      } else {
-        this.url = this.hostname
-      }
-
-      if (this.authMethod !== 'password') {
-        this.password = ''
         }
 
         const args = {
-        zoneid: this.zoneId,
+          zoneid: values.zoneid,
-        podid: this.podId,
+          podid: values.podid,
-        clusterid: this.clusterId,
+          clusterid: values.clusterid,
           hypervisor: this.selectedClusterHyperVisorType,
           clustertype: this.selectedCluster.clustertype,
-        hosttags: this.selectedTags.join(),
+          hosttags: values.hosttags ? values.hosttags.join() : null,
-        username: this.username,
+          username: values.username,
-        password: this.password,
+          password: this.authMethod !== 'password' ? '' : values.password,
           url: this.url,
-        agentusername: this.agentusername,
+          agentusername: values.agentusername,
-        agentpassword: this.agentpassword,
+          agentpassword: values.agentpassword,
-        agentport: this.agentport
+          agentport: values.agentport
+        }
+        if (this.selectedClusterHyperVisorType === 'BareMetal') {
+          args.cpunumber = values.baremetalcpucores
+          args.cpuspeed = values.baremetalcpu
+          args.memory = values.baremetalmemory
+          args.hostmac = values.baremetalmac
         }
         Object.keys(args).forEach((key) => (args[key] == null) && delete args[key])
-
         this.loading = true
         api('addHost', {}, 'POST', args).then(response => {
           const host = response.addhostresponse.host[0] || {}
@@ -360,7 +435,7 @@ export default {
             this.dedicateHost(host.id)
           }
           this.parentFetchData()
-        this.$parent.$parent.close()
+          this.closeAction()
         }).catch(error => {
           this.$notification.error({
             message: `${this.$t('label.error')} ${error.response.status}`,
@@ -370,6 +445,7 @@ export default {
         }).finally(() => {
           this.loading = false
         })
+      })
     },
     dedicateHost (hostId) {
       this.loading = true
@@ -409,15 +485,22 @@ export default {
       this.params.find(i => {
         if (i.name === field) this.placeholder[field] = i.description
       })
+    },
+    closeAction () {
+      this.$emit('close-action')
     }
   }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
   .form {
     &__label {
       margin-bottom: 5px;
+
+      .required {
+        margin-left: 10px;
+      }
     }
     &__item {
       margin-bottom: 20px;