This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
The following commit(s) were added to refs/heads/master by this push:
new 7beafe2 infra: add host form (#122)
7beafe2 is described below
commit 7beafe276740bda55a2b133a6744d962f9c04621
Author: Ritchie Vincent <[email protected]>
AuthorDate: Mon Feb 17 10:00:46 2020 +0000
infra: add host form (#122)
Add host form with dedicate to account/domain option.
Signed-off-by: Rohit Yadav <[email protected]>
Co-authored-by: Rohit Yadav <[email protected]>
---
src/config/section/infra/hosts.js | 3 +-
src/locales/en.json | 1 +
src/views/infra/ClusterAdd.vue | 2 +-
src/views/infra/{ClusterAdd.vue => HostAdd.vue} | 269 ++++++++++++++----------
src/views/infra/PodAdd.vue | 2 +-
5 files changed, 158 insertions(+), 119 deletions(-)
diff --git a/src/config/section/infra/hosts.js
b/src/config/section/infra/hosts.js
index 36e9b76..e225ca7 100644
--- a/src/config/section/infra/hosts.js
+++ b/src/config/section/infra/hosts.js
@@ -42,7 +42,8 @@ export default {
icon: 'plus',
label: 'label.add.host',
listView: true,
- args: ['zoneid', 'podid', 'clusterid', 'hypervisor', 'username',
'password', 'url', 'hosttags']
+ popup: true,
+ component: () => import('@/views/infra/HostAdd.vue')
},
{
api: 'updateHost',
diff --git a/src/locales/en.json b/src/locales/en.json
index 882aad2..25a0f50 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -252,6 +252,7 @@
"hostId": "Host",
"hostTags": "Host Tags",
"hostname": "Host",
+"hostnamelabel": "Host Name",
"hosts": "Hosts",
"hosttags": "Host Tags",
"hypervisor": "Hypervisor",
diff --git a/src/views/infra/ClusterAdd.vue b/src/views/infra/ClusterAdd.vue
index c2cc465..a84963c 100644
--- a/src/views/infra/ClusterAdd.vue
+++ b/src/views/infra/ClusterAdd.vue
@@ -277,7 +277,7 @@ export default {
this.$store.dispatch('AddAsyncJob', {
title: 'Successfully dedicated cluster',
jobid: response.dedicateclusterresponse.jobid,
- description: `Domain ID: ${this.dedicateddedicatedDomainId}`,
+ description: `Domain ID: ${this.dedicatedDomainId}`,
status: 'progress'
})
},
diff --git a/src/views/infra/ClusterAdd.vue b/src/views/infra/HostAdd.vue
similarity index 53%
copy from src/views/infra/ClusterAdd.vue
copy to src/views/infra/HostAdd.vue
index c2cc465..b77e651 100644
--- a/src/views/infra/ClusterAdd.vue
+++ b/src/views/infra/HostAdd.vue
@@ -18,6 +18,7 @@
<template>
<a-spin :spinning="loading">
<div class="form">
+
<div class="form__item">
<div class="form__label"><span class="required">* </span>{{
$t('zonenamelabel') }}</div>
<a-select v-model="zoneId" @change="fetchPods">
@@ -31,58 +32,75 @@
</div>
<div class="form__item">
- <div class="form__label">{{ $t('hypervisor') }}</div>
- <a-select v-model="hypervisor" @change="resetAllFields">
+ <div class="form__label"><span class="required">* </span>{{
$t('podname') }}</div>
+ <a-select v-model="podId" @change="fetchClusters">
<a-select-option
- v-for="hv in hypervisorsList"
- :value="hv.name"
- :key="hv.name">
- {{ hv.name }}
+ v-for="pod in podsList"
+ :value="pod.id"
+ :key="pod.id">
+ {{ pod.name }}
</a-select-option>
</a-select>
</div>
<div class="form__item">
- <div class="form__label">{{ $t('podname') }}</div>
- <a-select v-model="podId">
+ <div class="form__label"><span class="required">* </span>{{
$t('clustername') }}</div>
+ <a-select v-model="clusterId" @change="handleChangeCluster">
<a-select-option
- v-for="pod in podsList"
- :value="pod.id"
- :key="pod.id">
- {{ pod.name }}
+ v-for="cluster in clustersList"
+ :value="cluster.id"
+ :key="cluster.id">
+ {{ cluster.name }}
</a-select-option>
</a-select>
</div>
- <div class="form__item">
- <div class="form__label"><span class="required">* </span>{{
$t('clusternamelabel') }}</div>
- <span class="required required-label"
ref="requiredCluster">Required</span>
- <a-input :placeholder="placeholder.clustername"
v-model="clustername"></a-input>
+ <div class="form__item required-field">
+ <div class="form__label"><span class="required">* </span>{{
selectedClusterHyperVisorType === 'VMware' ? $t('vcenterHost') :
$t('hostnamelabel') }}</div>
+ <span class="required required-label">Required</span>
+ <a-input v-model="hostname"></a-input>
</div>
- <template v-if="hypervisor === 'VMware'">
- <div class="form__item">
- <div class="form__label">{{ $t('vCenterHost') }}</div>
- <a-input v-model="host"></a-input>
- </div>
+ <div class="form__item required-field"
v-if="selectedClusterHyperVisorType !== 'VMware'">
+ <div class="form__label"><span class="required">* </span>{{
$t('username') }}</div>
+ <span class="required required-label">Required</span>
+ <a-input :placeholder="placeholder.username"
v-model="username"></a-input>
+ </div>
- <div class="form__item">
- <div class="form__label">{{ $t('vCenterUsername') }}</div>
- <a-input v-model="username"></a-input>
- </div>
+ <div class="form__item required-field"
v-if="selectedClusterHyperVisorType !== 'VMware'">
+ <div class="form__label"><span class="required">* </span>{{
$t('password') }}</div>
+ <span class="required required-label">Required</span>
+ <a-input :placeholder="placeholder.password" type="password"
v-model="password"></a-input>
+ </div>
+ <template v-if="selectedClusterHyperVisorType === 'Ovm3'">
<div class="form__item">
- <div class="form__label">{{ $t('vCenterPassword') }}</div>
- <a-input v-model="password"></a-input>
+ <div class="form__label">{{ $t('agentUsername') }}</div>
+ <a-input v-model="agentusername"></a-input>
+ </div>
+ <div class="form__item required-field">
+ <div class="form__label"><span class="required">* </span>{{
$t('agentPassword') }}</div>
+ <span class="required required-label">Required</span>
+ <a-input type="password" v-model="agentpassword"></a-input>
</div>
-
<div class="form__item">
- <div class="form__label">{{ $t('vCenterDataCenter') }}</div>
- <a-input v-model="dataCenter"></a-input>
+ <div class="form__label">{{ $t('agentPort') }}</div>
+ <a-input v-model="agentport"></a-input>
</div>
</template>
<div class="form__item">
+ <div class="form__label">{{ $t('hostTags') }}</div>
+ <a-select
+ mode="tags"
+ :placeholder="placeholder.hosttags"
+ v-model="selectedTags"
+ >
+ <a-select-option v-for="tag in hostTagsList" :key="tag.name">{{
tag.name }}</a-select-option>
+ </a-select>
+ </div>
+
+ <div class="form__item">
<div class="form__label">{{ $t('isDedicated') }}</div>
<a-checkbox @change="toggleDedicated" />
</div>
@@ -110,7 +128,7 @@ import { api } from '@/api'
import DedicateDomain from '../../components/view/DedicateDomain'
export default {
- name: 'ClusterAdd',
+ name: 'HostAdd',
components: {
DedicateDomain
},
@@ -125,28 +143,31 @@ export default {
return {
loading: false,
zoneId: null,
- hypervisor: null,
podId: null,
- clustername: null,
- clustertype: 'CloudManaged',
+ clusterId: null,
+ hostname: null,
username: null,
password: null,
- url: null,
- host: null,
- dataCenter: null,
- ovm3pool: null,
- ovm3cluster: null,
- ovm3vip: null,
+ selectedTags: [],
zonesList: [],
- hypervisorsList: [],
+ clustersList: [],
podsList: [],
+ hostTagsList: [],
+ url: null,
+ agentusername: null,
+ agentpassword: null,
+ agentport: null,
+ selectedCluster: null,
+ selectedClusterHyperVisorType: null,
showDedicated: false,
dedicatedDomainId: null,
dedicatedAccount: null,
domainError: false,
params: [],
placeholder: {
- clustername: null
+ username: null,
+ password: null,
+ hosttags: null
}
}
},
@@ -156,8 +177,8 @@ export default {
methods: {
fetchData () {
this.fetchZones()
- this.fetchHypervisors()
- this.params = this.$store.getters.apis.addCluster.params
+ this.fetchHostTags()
+ this.params = this.$store.getters.apis.addHost.params
Object.keys(this.placeholder).forEach(item => {
this.returnPlaceholder(item) })
},
fetchZones () {
@@ -175,117 +196,152 @@ export default {
this.loading = false
})
},
- fetchHypervisors () {
+ fetchPods () {
this.loading = true
- api('listHypervisors').then(response => {
- this.hypervisorsList = response.listhypervisorsresponse.hypervisor ||
[]
- this.hypervisor = this.hypervisorsList[0].name || null
+ api('listPods', {
+ zoneid: this.zoneId
+ }).then(response => {
+ this.podsList = response.listpodsresponse.pod || []
+ this.podId = this.podsList[0].id || null
+ this.fetchClusters()
}).catch(error => {
this.$notification.error({
message: `Error ${error.response.status}`,
description: error.response.data.errorresponse.errortext
})
+ this.podsList = []
+ this.podId = ''
}).finally(() => {
this.loading = false
})
},
- fetchPods () {
+ fetchClusters () {
this.loading = true
- api('listPods', {
- zoneid: this.zoneId
+ api('listClusters', {
+ podid: this.podId
}).then(response => {
- this.podsList = response.listpodsresponse.pod || []
- this.podId = this.podsList[0].id || null
+ this.clustersList = response.listclustersresponse.cluster || []
+ this.clusterId = this.clustersList[0].id || null
+ if (this.clusterId) {
+ this.handleChangeCluster()
+ }
}).catch(error => {
this.$notification.error({
message: `Error ${error.response.status}`,
- description: error.response.data.errorresponse.errortext
+ description: error.response.data.listclustersresponse.errortext
})
+ this.clustersList = []
+ this.clusterId = null
}).finally(() => {
this.loading = false
})
},
+ fetchHostTags () {
+ this.loading = true
+ api('listHostTags').then(response => {
+ this.hostTagsList = response.listhosttagsresponse.hosttag || []
+ }).catch(error => {
+ this.$notification.error({
+ message: `Error ${error.response.status}`,
+ description: error.response.data.listhosttagsresponse.errortext
+ })
+ this.hostTagsList = []
+ }).finally(() => {
+ this.loading = false
+ })
+ },
+ handleChangeCluster () {
+ this.selectedCluster = this.clustersList.find(i => i.id ===
this.clusterId)
+ this.selectedClusterHyperVisorType = this.selectedCluster.hypervisortype
+ },
toggleDedicated () {
this.dedicatedDomainId = null
this.dedicatedAccount = null
this.showDedicated = !this.showDedicated
},
handleSubmitForm () {
- if (!this.clustername) {
- this.$refs.requiredCluster.classList.add('required-label--visible')
- return
- }
- this.$refs.requiredCluster.classList.remove('required-label--visible')
+ const requiredFields = document.querySelectorAll('.required-field')
- if (this.hypervisor === 'Ovm3') {
- this.ovm3pool = 'on'
- this.ovm3cluster = 'undefined'
- this.ovm3vip = ''
+ requiredFields.forEach(field => {
+ const input = field.querySelector('.ant-input')
+ if (!input.value) {
+
input.parentNode.querySelector('.required-label').classList.add('required-label--error')
+ } else {
+
input.parentNode.querySelector('.required-label').classList.remove('required-label--error')
+ }
+ })
+
+ if (this.$el.querySelectorAll('.required-label--error').length > 0)
return
+
+ if (this.selectedClusterHyperVisorType === 'VMware') {
+ this.username = ''
+ this.password = ''
}
- if (this.hypervisor === 'VMware') {
- this.clustertype = 'ExternalManaged'
- const clusternameVal = this.clustername
- this.url = `http://${this.host}/${this.dataCenter}/${clusternameVal}`
- this.clustername = `${this.host}/${this.dataCenter}/${clusternameVal}`
+ if (this.hostname.indexOf('http://') === -1) {
+ this.url = `http://${this.hostname}`
+ } else {
+ this.url = this.hostname
}
- this.loading = true
- this.parentToggleLoading()
- api('addCluster', {
- zoneId: this.zoneId,
- hypervisor: this.hypervisor,
- clustertype: this.clustertype,
- podId: this.podId,
- clustername: this.clustername,
- ovm3pool: this.ovm3pool,
- ovm3cluster: this.ovm3cluster,
- ovm3vip: this.ovm3vip,
+ const args = {
+ zoneid: this.zoneId,
+ podid: this.podId,
+ clusterid: this.clusterId,
+ hypervisor: this.selectedClusterHyperVisorType,
+ clustertype: this.selectedCluster.clustertype,
+ hosttags: this.selectedTags.join(),
username: this.username,
password: this.password,
- url: this.url
- }).then(response => {
- const cluster = response.addclusterresponse.cluster[0] || {}
- if (cluster.id && this.showDedicated) {
- this.dedicateCluster(cluster.id)
+ url: this.url,
+ agentusername: this.agentusername,
+ agentpassword: this.agentpassword,
+ agentport: this.agentport
+ }
+ 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] || {}
+ if (host.id && this.showDedicated) {
+ this.dedicateHost(host.id)
}
}).catch(error => {
this.$notification.error({
message: `Error ${error.response.status}`,
- description: error.response.data.addclusterresponse.errortext,
+ description: error.response.data.addhostresponse.errortext,
duration: 0
})
}).finally(() => {
this.loading = false
this.parentFetchData()
- this.parentToggleLoading()
this.$parent.$parent.close()
})
},
- dedicateCluster (clusterId) {
+ dedicateHost (hostId) {
this.loading = true
- api('dedicateCluster', {
- clusterId,
+ api('dedicateHost', {
+ hostId,
domainId: this.dedicatedDomainId,
account: this.dedicatedAccount
}).then(response => {
this.$pollJob({
- jobId: response.dedicateclusterresponse.jobid,
- successMessage: `Successfully dedicated cluster`,
+ jobId: response.dedicatehostresponse.jobid,
+ successMessage: `Successfully dedicated host`,
successMethod: () => {
this.loading = false
this.$store.dispatch('AddAsyncJob', {
- title: 'Successfully dedicated cluster',
- jobid: response.dedicateclusterresponse.jobid,
- description: `Domain ID: ${this.dedicateddedicatedDomainId}`,
+ title: 'Successfully dedicated host',
+ jobid: response.dedicatehostresponse.jobid,
+ description: `Domain ID: ${this.dedicatedDomainId}`,
status: 'progress'
})
},
- errorMessage: 'Failed to dedicate cluster',
+ errorMessage: 'Failed to dedicate host',
errorMethod: () => {
this.loading = false
},
- loadingMessage: `Dedicating cluster...`,
+ loadingMessage: `Dedicating host...`,
catchMessage: 'Error encountered while fetching async job result',
catchMethod: () => {
this.loading = false
@@ -300,17 +356,6 @@ export default {
this.loading = false
})
},
- resetAllFields () {
- this.clustertype = 'CloudManaged'
- this.username = null
- this.password = null
- this.url = null
- this.host = null
- this.dataCenter = null
- this.ovm3pool = null
- this.ovm3cluster = null
- this.ovm3vip = null
- },
returnPlaceholder (field) {
this.params.find(i => {
if (i.name === field) this.placeholder[field] = i.description
@@ -322,28 +367,22 @@ export default {
<style scoped lang="scss">
.form {
-
&__label {
margin-bottom: 5px;
}
-
&__item {
margin-bottom: 20px;
}
-
.ant-select {
width: 85vw;
-
@media (min-width: 760px) {
width: 400px;
}
}
}
-
.actions {
display: flex;
justify-content: flex-end;
-
button {
&:not(:last-child) {
margin-right: 10px;
@@ -353,11 +392,9 @@ export default {
.required {
color: #ff0000;
-
&-label {
display: none;
-
- &--visible {
+ &--error {
display: block;
}
}
diff --git a/src/views/infra/PodAdd.vue b/src/views/infra/PodAdd.vue
index 1e82f64..ae5ec5a 100644
--- a/src/views/infra/PodAdd.vue
+++ b/src/views/infra/PodAdd.vue
@@ -230,7 +230,7 @@ export default {
errorMethod: () => {
this.loading = false
},
- loadingMessage: `Dedicating cluster...`,
+ loadingMessage: `Dedicating pod...`,
catchMessage: 'Error encountered while fetching async job result',
catchMethod: () => {
this.loading = false
