mirror of https://github.com/apache/cloudstack.git
infra: Add pod form (#123)
This implements the add pod form with dedicate to domain/account option. Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com> Co-authored-by: Rohit Yadav <rohit@apache.org>
This commit is contained in:
Ritchie Vincent
Rohit Yadav
parent
5c37dcd668
commit
46d73a01d2
|
|
@ -37,7 +37,8 @@ export default {
|
|||
icon: 'plus',
|
||||
label: 'label.add.pod',
|
||||
listView: true,
|
||||
args: ['zoneid', 'name', 'gateway', 'netmask', 'startip', 'endip']
|
||||
popup: true,
|
||||
component: () => import('@/views/infra/PodAdd.vue')
|
||||
},
|
||||
{
|
||||
api: 'updatePod',
|
||||
|
|
|
|||
|
|
@ -68,7 +68,8 @@ export const pollJobPlugin = {
|
|||
console.error(`${catchMessage} - ${e}`)
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: catchMessage
|
||||
description: catchMessage,
|
||||
duration: 0
|
||||
})
|
||||
catchMethod && catchMethod()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,303 @@
|
|||
// 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>
|
||||
<a-spin :spinning="loading">
|
||||
<a-form :form="form" layout="vertical" class="form">
|
||||
|
||||
<a-form-item class="form__item" :label="$t('zone')">
|
||||
<a-select
|
||||
v-decorator="['zoneid', {
|
||||
initialValue: this.zoneId,
|
||||
rules: [{ required: true, message: 'required' }] }
|
||||
]">
|
||||
<a-select-option
|
||||
v-for="zone in zonesList"
|
||||
:value="zone.id"
|
||||
:key="zone.id">
|
||||
{{ zone.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="form__item" :label="$t('podname')">
|
||||
<a-input
|
||||
:placeholder="placeholder.name"
|
||||
v-decorator="[
|
||||
'name',
|
||||
{
|
||||
rules: [{ required: true, message: 'required' }]
|
||||
}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="form__item" :label="$t('reservedSystemGateway')">
|
||||
<a-input
|
||||
:placeholder="placeholder.gateway"
|
||||
v-decorator="[
|
||||
'gateway',
|
||||
{
|
||||
rules: [{ required: true, message: 'required' }]
|
||||
}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="form__item" :label="$t('reservedSystemNetmask')">
|
||||
<a-input
|
||||
:placeholder="placeholder.netmask"
|
||||
v-decorator="[
|
||||
'netmask',
|
||||
{
|
||||
rules: [{ required: true, message: 'required' }]
|
||||
}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="form__item" :label="$t('reservedSystemStartIp')">
|
||||
<a-input
|
||||
:placeholder="placeholder.startip"
|
||||
v-decorator="[
|
||||
'startip',
|
||||
{
|
||||
rules: [{ required: true, message: 'required' }]
|
||||
}]"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="form__item" :label="$t('reservedSystemEndIp')">
|
||||
<a-input
|
||||
:placeholder="placeholder.endip"
|
||||
v-decorator="['endip']"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<div class="form__item">
|
||||
<div class="form__label">{{ $t('isDedicated') }}</div>
|
||||
<a-checkbox @change="toggleDedicate" />
|
||||
</div>
|
||||
|
||||
<template v-if="showDedicated">
|
||||
<DedicateDomain
|
||||
@domainChange="id => dedicatedDomainId = id"
|
||||
@accountChange="id => dedicatedAccount = id"
|
||||
:error="domainError" />
|
||||
</template>
|
||||
|
||||
<a-divider></a-divider>
|
||||
|
||||
<div class="actions">
|
||||
<a-button @click="() => this.$parent.$parent.close()">{{ $t('cancel') }}</a-button>
|
||||
<a-button @click="handleSubmit" type="primary">{{ $t('OK') }}</a-button>
|
||||
</div>
|
||||
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import DedicateDomain from '../../components/view/DedicateDomain'
|
||||
|
||||
export default {
|
||||
name: 'ClusterAdd',
|
||||
components: {
|
||||
DedicateDomain
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
inject: ['parentFetchData'],
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
zonesList: [],
|
||||
zoneId: null,
|
||||
showDedicated: false,
|
||||
dedicatedDomainId: null,
|
||||
dedicatedAccount: null,
|
||||
domainError: false,
|
||||
params: [],
|
||||
placeholder: {
|
||||
name: null,
|
||||
gateway: null,
|
||||
netmask: null,
|
||||
startip: null,
|
||||
endip: null
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.fetchZones()
|
||||
},
|
||||
fetchZones () {
|
||||
this.loading = true
|
||||
api('listZones').then(response => {
|
||||
this.zonesList = response.listzonesresponse.zone || []
|
||||
this.zoneId = this.zonesList[0].id
|
||||
this.params = this.$store.getters.apis.createPod.params
|
||||
Object.keys(this.placeholder).forEach(item => { this.returnPlaceholder(item) })
|
||||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: `Error ${error.response.status}`,
|
||||
description: error.response.data.errorresponse.errortext
|
||||
})
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
toggleDedicate () {
|
||||
this.showDedicated = !this.showDedicated
|
||||
this.dedicatedDomainId = null
|
||||
this.dedicatedAccount = null
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (err) return
|
||||
|
||||
this.loading = true
|
||||
api('createPod', {
|
||||
zoneId: values.zoneid,
|
||||
name: values.name,
|
||||
gateway: values.gateway,
|
||||
netmask: values.netmask,
|
||||
startip: values.startip,
|
||||
endip: values.endip
|
||||
}).then(response => {
|
||||
const pod = response.createpodresponse.pod || {}
|
||||
if (pod && pod.id && this.showDedicated) {
|
||||
this.dedicatePod(pod.id)
|
||||
}
|
||||
this.loading = false
|
||||
this.parentFetchData()
|
||||
this.$parent.$parent.close()
|
||||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: `Error ${error.response.status}`,
|
||||
description: error.response.data.createpodresponse.errortext,
|
||||
duration: 0
|
||||
})
|
||||
this.loading = false
|
||||
this.parentFetchData()
|
||||
this.$parent.$parent.close()
|
||||
})
|
||||
})
|
||||
},
|
||||
dedicatePod (podId) {
|
||||
this.loading = true
|
||||
api('dedicatePod', {
|
||||
podId,
|
||||
domainid: this.dedicatedDomainId,
|
||||
account: this.dedicatedAccount
|
||||
}).then(response => {
|
||||
this.$pollJob({
|
||||
jobId: response.dedicatepodresponse.jobid,
|
||||
successMessage: `Successfully dedicated pod`,
|
||||
successMethod: () => {
|
||||
this.loading = false
|
||||
this.$store.dispatch('AddAsyncJob', {
|
||||
title: 'Successfully dedicated pod',
|
||||
jobid: response.dedicatepodresponse.jobid,
|
||||
description: `Domain ID: ${this.dedicatedDomainId}`,
|
||||
status: 'progress'
|
||||
})
|
||||
},
|
||||
errorMessage: 'Failed to dedicate pod',
|
||||
errorMethod: () => {
|
||||
this.loading = false
|
||||
},
|
||||
loadingMessage: `Dedicating cluster...`,
|
||||
catchMessage: 'Error encountered while fetching async job result',
|
||||
catchMethod: () => {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: `Error ${error.response.status}`,
|
||||
description: error.response.data.errorresponse.errortext,
|
||||
duration: 0
|
||||
})
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
returnPlaceholder (field) {
|
||||
this.params.find(i => {
|
||||
if (i.name === field) this.placeholder[field] = i.description
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ff0000;
|
||||
|
||||
&-label {
|
||||
display: none;
|
||||
|
||||
&--visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue