mirror of https://github.com/apache/cloudstack.git
vpc & backup offering clone api
This commit is contained in:
Pearl Dsilva
parent
7fd45679b7
commit
cdd125052d
|
|
@ -559,10 +559,12 @@
|
|||
"label.clear.list": "Clear list",
|
||||
"label.clear.notification": "Clear notification",
|
||||
"label.clientid": "Provider Client ID",
|
||||
"label.clone.backup.offering": "Clone Backup Offering",
|
||||
"label.clone.compute.offering": "Clone Compute Offering",
|
||||
"label.clone.disk.offering": "Clone Disk Offering",
|
||||
"label.clone.network.offering": "Clone Network Offering",
|
||||
"label.clone.system.service.offering": "Clone System Service Offering",
|
||||
"label.clone.vpc.offering": "Clone VPC Offering",
|
||||
"label.close": "Close",
|
||||
"label.cloud.managed": "CloudManaged",
|
||||
"label.cloudian.admin.password": "Admin Service Password",
|
||||
|
|
|
|||
|
|
@ -401,6 +401,14 @@ export default {
|
|||
popup: true,
|
||||
groupMap: (selection) => { return selection.map(x => { return { id: x } }) },
|
||||
args: ['name', 'description', 'allowuserdrivenbackups']
|
||||
}, {
|
||||
api: 'cloneBackupOffering',
|
||||
icon: 'copy-outlined',
|
||||
label: 'label.clone.backup.offering',
|
||||
docHelp: 'adminguide/virtual_machines.html#importing-backup-offerings',
|
||||
dataView: true,
|
||||
popup: true,
|
||||
component: shallowRef(defineAsyncComponent(() => import('@/views/offering/ImportBackupOffering.vue')))
|
||||
}, {
|
||||
api: 'deleteBackupOffering',
|
||||
icon: 'delete-outlined',
|
||||
|
|
@ -612,6 +620,14 @@ export default {
|
|||
dataView: true,
|
||||
popup: true,
|
||||
component: shallowRef(defineAsyncComponent(() => import('@/views/offering/UpdateOfferingAccess.vue')))
|
||||
}, {
|
||||
api: 'cloneVPCOffering',
|
||||
icon: 'copy-outlined',
|
||||
docHelp: 'plugins/nuage-plugin.html?#optional-create-and-enable-vpc-offering',
|
||||
label: 'label.clone.vpc.offering',
|
||||
dataView: true,
|
||||
popup: true,
|
||||
component: shallowRef(defineAsyncComponent(() => import('@/views/offering/CloneVpcOffering.vue')))
|
||||
}, {
|
||||
api: 'deleteVPCOffering',
|
||||
icon: 'delete-outlined',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,320 @@
|
|||
// 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>
|
||||
<div class="form-layout" v-ctrl-enter="handleSubmit">
|
||||
<a-spin :spinning="loading">
|
||||
<a-alert
|
||||
v-if="resource"
|
||||
type="info"
|
||||
style="margin-bottom: 16px">
|
||||
<template #message>
|
||||
<div style="display: block; width: 100%;">
|
||||
<div style="display: block; margin-bottom: 8px;">
|
||||
<strong>{{ $t('message.clone.offering.from') }}: {{ resource.name }}</strong>
|
||||
</div>
|
||||
<div style="display: block; font-size: 12px;">
|
||||
{{ $t('message.clone.offering.edit.hint') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-alert>
|
||||
<a-form
|
||||
layout="vertical"
|
||||
:ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item name="name" ref="name">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-focus="true"
|
||||
v-model:value="form.name"/>
|
||||
</a-form-item>
|
||||
<a-form-item name="description" ref="description">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.description')" :tooltip="apiParams.description.description"/>
|
||||
</template>
|
||||
<a-input v-model:value="form.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item name="zoneid" ref="zoneid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid ? apiParams.zoneid.description : ''"/>
|
||||
</template>
|
||||
<a-select
|
||||
allowClear
|
||||
v-model:value="form.zoneid"
|
||||
:loading="zones.loading"
|
||||
@change="onChangeZone"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}" >
|
||||
<a-select-option v-for="zone in zones.opts" :key="zone.name" :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="externalid" ref="externalid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.externalid')" :tooltip="apiParams.externalid ? apiParams.externalid.description : ''"/>
|
||||
</template>
|
||||
<a-select
|
||||
allowClear
|
||||
v-model:value="form.externalid"
|
||||
:loading="externals.loading"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}" >
|
||||
<a-select-option v-for="opt in externals.opts" :key="opt.id" :label="opt.name">
|
||||
{{ opt.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="allowuserdrivenbackups" ref="allowuserdrivenbackups">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.allowuserdrivenbackups')" :tooltip="apiParams.allowuserdrivenbackups ? apiParams.allowuserdrivenbackups.description : ''"/>
|
||||
</template>
|
||||
<a-switch v-model:checked="form.allowuserdrivenbackups"/>
|
||||
</a-form-item>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button :loading="loading" @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, toRaw } from 'vue'
|
||||
import { getAPI, postAPI } from '@/api'
|
||||
import ResourceIcon from '@/components/view/ResourceIcon'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
import { GlobalOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'CloneBackupOffering',
|
||||
components: {
|
||||
TooltipLabel,
|
||||
ResourceIcon,
|
||||
GlobalOutlined
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
zones: {
|
||||
loading: false,
|
||||
opts: []
|
||||
},
|
||||
externals: {
|
||||
loading: false,
|
||||
opts: []
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.apiParams = this.$getApiParams('cloneBackupOffering')
|
||||
},
|
||||
created () {
|
||||
this.initForm()
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
initForm () {
|
||||
this.formRef = ref()
|
||||
this.form = reactive({
|
||||
allowuserdrivenbackups: true
|
||||
})
|
||||
this.rules = reactive({
|
||||
name: [{ required: true, message: this.$t('message.error.required.input') }],
|
||||
description: [{ required: true, message: this.$t('message.error.required.input') }]
|
||||
})
|
||||
},
|
||||
fetchData () {
|
||||
this.fetchZone()
|
||||
this.$nextTick(() => {
|
||||
this.populateFormFromResource()
|
||||
})
|
||||
},
|
||||
fetchZone () {
|
||||
this.zones.loading = true
|
||||
getAPI('listZones', { available: true, showicon: true }).then(json => {
|
||||
this.zones.opts = json.listzonesresponse.zone || []
|
||||
this.$nextTick(() => {
|
||||
this.populateFormFromResource()
|
||||
})
|
||||
}).catch(error => {
|
||||
this.$notifyError(error)
|
||||
}).finally(() => {
|
||||
this.zones.loading = false
|
||||
})
|
||||
},
|
||||
fetchExternal (zoneId) {
|
||||
if (!zoneId) {
|
||||
this.externals.opts = []
|
||||
return
|
||||
}
|
||||
this.externals.loading = true
|
||||
getAPI('listBackupProviderOfferings', { zoneid: zoneId }).then(json => {
|
||||
this.externals.opts = json.listbackupproviderofferingsresponse.backupoffering || []
|
||||
}).catch(error => {
|
||||
this.$notifyError(error)
|
||||
}).finally(() => {
|
||||
this.externals.loading = false
|
||||
})
|
||||
},
|
||||
populateFormFromResource () {
|
||||
if (!this.resource) return
|
||||
|
||||
const r = this.resource
|
||||
|
||||
this.form.name = r.name + ' - Clone'
|
||||
this.form.description = r.description || r.name
|
||||
|
||||
if (r.allowuserdrivenbackups !== undefined) {
|
||||
this.form.allowuserdrivenbackups = r.allowuserdrivenbackups
|
||||
}
|
||||
|
||||
if (r.zoneid && this.zones.opts.length > 0) {
|
||||
const zone = this.zones.opts.find(z => z.id === r.zoneid)
|
||||
if (zone) {
|
||||
this.form.zoneid = zone.name
|
||||
this.fetchExternal(zone.id)
|
||||
}
|
||||
}
|
||||
|
||||
if (r.externalid) {
|
||||
this.$nextTick(() => {
|
||||
this.form.externalid = r.externalid
|
||||
})
|
||||
}
|
||||
},
|
||||
handleSubmit (e) {
|
||||
if (e) {
|
||||
e.preventDefault()
|
||||
}
|
||||
if (this.loading) return
|
||||
|
||||
this.formRef.value.validate().then(() => {
|
||||
const values = toRaw(this.form)
|
||||
const params = {
|
||||
sourceofferingid: this.resource.id
|
||||
}
|
||||
|
||||
if (values.name) {
|
||||
params.name = values.name
|
||||
}
|
||||
|
||||
if (values.description) {
|
||||
params.description = values.description
|
||||
}
|
||||
|
||||
if (values.zoneid) {
|
||||
const zone = this.zones.opts.find(z => z.name === values.zoneid)
|
||||
if (zone) {
|
||||
params.zoneid = zone.id
|
||||
}
|
||||
}
|
||||
|
||||
if (values.externalid) {
|
||||
params.externalid = values.externalid
|
||||
}
|
||||
|
||||
if (values.allowuserdrivenbackups !== undefined) {
|
||||
params.allowuserdrivenbackups = values.allowuserdrivenbackups
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
const title = this.$t('message.success.clone.backup.offering')
|
||||
|
||||
postAPI('cloneBackupOffering', params).then(json => {
|
||||
const jobId = json.clonebackupofferingresponse?.jobid
|
||||
if (jobId) {
|
||||
this.$pollJob({
|
||||
jobId,
|
||||
title,
|
||||
description: values.name,
|
||||
successMethod: result => {
|
||||
this.$message.success(`${title}: ${values.name}`)
|
||||
this.$emit('refresh-data')
|
||||
this.closeAction()
|
||||
},
|
||||
loadingMessage: `${title} ${this.$t('label.in.progress')} ${this.$t('label.for')} ${params.name}`,
|
||||
catchMessage: this.$t('error.fetching.async.job.result'),
|
||||
catchMethod: () => {
|
||||
this.closeAction()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.success(`${title}: ${values.name}`)
|
||||
this.$emit('refresh-data')
|
||||
this.closeAction()
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$notifyError(error)
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}).catch(error => {
|
||||
this.formRef.value.scrollToField(error.errorFields[0].name)
|
||||
})
|
||||
},
|
||||
onChangeZone (value) {
|
||||
if (!value) {
|
||||
this.externals.opts = []
|
||||
this.form.externalid = null
|
||||
return
|
||||
}
|
||||
const zone = this.zones.opts.find(z => z.name === value)
|
||||
if (zone) {
|
||||
this.fetchExternal(zone.id)
|
||||
}
|
||||
},
|
||||
closeAction () {
|
||||
this.$emit('close-action')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.form-layout {
|
||||
width: 30vw;
|
||||
|
||||
@media (min-width: 500px) {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,885 @@
|
|||
// 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>
|
||||
<div class="form-layout" v-ctrl-enter="handleSubmit">
|
||||
<a-spin :spinning="loading">
|
||||
<a-alert
|
||||
v-if="resource"
|
||||
type="info"
|
||||
style="margin-bottom: 16px">
|
||||
<template #message>
|
||||
<div style="display: block; width: 100%;">
|
||||
<div style="display: block; margin-bottom: 8px;">
|
||||
<strong>{{ $t('message.clone.offering.from') }}: {{ resource.name }}</strong>
|
||||
</div>
|
||||
<div style="display: block; font-size: 12px;">
|
||||
{{ $t('message.clone.offering.edit.hint') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-alert>
|
||||
<a-form
|
||||
:ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
@finish="handleSubmit"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item name="name" ref="name">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-focus="true"
|
||||
v-model:value="form.name"
|
||||
:placeholder="apiParams.name.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item name="displaytext" ref="displaytext">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.displaytext"
|
||||
:placeholder="apiParams.displaytext.description"/>
|
||||
</a-form-item>
|
||||
<a-form-item name="internetprotocol" ref="internetprotocol">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.internetprotocol')" :tooltip="apiParams.internetprotocol.description"/>
|
||||
</template>
|
||||
<span v-if="!ipv6NetworkOfferingEnabled || internetProtocolValue!=='ipv4'">
|
||||
<a-alert type="warning">
|
||||
<template #message>
|
||||
<span v-html="ipv6NetworkOfferingEnabled ? $t('message.offering.internet.protocol.warning') : $t('message.offering.ipv6.warning')" />
|
||||
</template>
|
||||
</a-alert>
|
||||
<br/>
|
||||
</span>
|
||||
<a-radio-group
|
||||
v-model:value="form.internetprotocol"
|
||||
:disabled="!ipv6NetworkOfferingEnabled"
|
||||
buttonStyle="solid"
|
||||
@change="e => { internetProtocolValue = e.target.value }" >
|
||||
<a-radio-button value="ipv4">
|
||||
{{ $t('label.ip.v4') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="dualstack">
|
||||
{{ $t('label.ip.v4.v6') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-row :gutter="12">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item name="provider" ref="provider">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.provider')" :tooltip="apiParams.provider.description"/>
|
||||
</template>
|
||||
<a-select
|
||||
v-model:value="form.provider"
|
||||
@change="val => handleProviderChange(val)"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:placeholder="apiParams.provider.description" >
|
||||
<a-select-option key="" value="">{{ $t('label.none') }}</a-select-option>
|
||||
<a-select-option :value="'NSX'" :label="$t('label.nsx')"> {{ $t('label.nsx') }} </a-select-option>
|
||||
<a-select-option :value="'Netris'" :label="$t('label.netris')"> {{ $t('label.netris') }} </a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="12" :lg="12" v-if="form.provider === 'NSX'">
|
||||
<a-form-item name="nsxsupportlb" ref="nsxsupportlb">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.nsx.supports.lb')" :tooltip="apiParams.nsxsupportlb.description"/>
|
||||
</template>
|
||||
<a-switch v-model:checked="form.nsxsupportlb" @change="val => { handleNsxLbService(val) }" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12" v-if="routingMode === 'dynamic' && form.provider === 'NSX'">
|
||||
<a-col :md="12" :lg="12">
|
||||
<a-form-item name="specifyasnumber" ref="specifyasnumber">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.specifyasnumber')"/>
|
||||
</template>
|
||||
<a-switch v-model:checked="form.specifyasnumber" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item name="networkmode" ref="networkmode">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.networkmode')" :tooltip="apiParams.networkmode.description"/>
|
||||
</template>
|
||||
<a-select
|
||||
optionFilterProp="label"
|
||||
v-model:value="form.networkmode"
|
||||
@change="val => { handleForNetworkModeChange(val) }"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:placeholder="apiParams.networkmode.description">
|
||||
<a-select-option v-for="(opt) in networkmodes" :key="opt.name" :label="opt.name">
|
||||
{{ opt.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="routingmode" ref="routingmode" v-if="networkmode === 'ROUTED' || internetProtocolValue === 'ipv6' || internetProtocolValue === 'dualstack'">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.routingmode')" :tooltip="apiParams.routingmode.description"/>
|
||||
</template>
|
||||
<a-radio-group
|
||||
v-model:value="form.routingmode"
|
||||
buttonStyle="solid"
|
||||
@change="selected => { routingMode = selected.target.value }">
|
||||
<a-radio-button value="static">
|
||||
{{ $t('label.static') }}
|
||||
</a-radio-button>
|
||||
<a-radio-button value="dynamic">
|
||||
{{ $t('label.dynamic') }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.supportedservices')" :tooltip="apiParams.supportedservices ? apiParams.supportedservices.description : ''"/>
|
||||
</template>
|
||||
<div class="supported-services-container" scroll-to="last-child">
|
||||
<a-spin v-if="!servicesReady" :spinning="true" />
|
||||
<a-list v-else itemLayout="horizontal" :dataSource="supportedServices">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<CheckBoxSelectPair
|
||||
:key="`${item.name}-${item.selectedProvider || 'none'}`"
|
||||
:resourceKey="item.name"
|
||||
:checkBoxLabel="item.description"
|
||||
:forExternalNetProvider="form.provider === 'NSX' || form.provider === 'Netris'"
|
||||
:defaultCheckBoxValue="item.defaultChecked"
|
||||
:defaultSelectValue="item.selectedProvider"
|
||||
:selectOptions="item.provider"
|
||||
@handle-checkselectpair-change="handleSupportedServiceChange"/>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item name="regionlevelvpc" ref="regionlevelvpc" :label="$t('label.service.connectivity.regionlevelvpccapabilitycheckbox')" v-if="connectivityServiceChecked">
|
||||
<a-switch v-model:checked="form.regionlevelvpc" />
|
||||
</a-form-item>
|
||||
<a-form-item name="distributedrouter" ref="distributedrouter" :label="$t('label.service.connectivity.distributedroutercapabilitycheckbox')" v-if="connectivityServiceChecked">
|
||||
<a-switch v-model:checked="form.distributedrouter" />
|
||||
</a-form-item>
|
||||
<a-form-item name="redundantrouter" ref="redundantrouter" :label="$t('label.redundantrouter')" v-if="sourceNatServiceChecked">
|
||||
<a-switch v-model:checked="form.redundantrouter" />
|
||||
</a-form-item>
|
||||
<a-form-item name="serviceofferingid" ref="serviceofferingid">
|
||||
<a-alert v-if="!isVpcVirtualRouterForAtLeastOneService" type="warning" style="margin-bottom: 10px">
|
||||
<template #message>
|
||||
<span v-html="$t('message.vr.alert.upon.network.offering.creation.others')" />
|
||||
</template>
|
||||
</a-alert>
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
|
||||
</template>
|
||||
<a-select
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
v-model:value="form.serviceofferingid"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="serviceOfferingLoading"
|
||||
:placeholder="apiParams.serviceofferingid.description">
|
||||
<a-select-option v-for="(opt) in serviceOfferings" :key="opt.id" :label="opt.name || opt.description">
|
||||
{{ opt.name || opt.description }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-if="isAdmin()">
|
||||
<a-switch v-model:checked="form.ispublic" @change="val => { isPublic = val }" />
|
||||
</a-form-item>
|
||||
<a-form-item name="domainid" ref="domainid" v-if="!isPublic">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
|
||||
</template>
|
||||
<a-select
|
||||
mode="multiple"
|
||||
v-model:value="form.domainid"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="domainLoading"
|
||||
:placeholder="apiParams.domainid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
|
||||
<span>
|
||||
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
|
||||
<block-outlined v-else style="margin-right: 5px" />
|
||||
{{ opt.path || opt.name || opt.description }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="zoneid" ref="zoneid">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
|
||||
</template>
|
||||
<a-select
|
||||
id="zone-selection"
|
||||
mode="multiple"
|
||||
v-model:value="form.zoneid"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
:filterOption="(input, option) => {
|
||||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}"
|
||||
:loading="zoneLoading"
|
||||
:placeholder="apiParams.zoneid.description">
|
||||
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
|
||||
<span>
|
||||
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
|
||||
<global-outlined v-else style="margin-right: 5px"/>
|
||||
{{ opt.name || opt.description }}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item name="enable" ref="enable" v-if="apiParams.enable">
|
||||
<template #label>
|
||||
<tooltip-label :title="$t('label.enable.vpc.offering')" :tooltip="apiParams.enable.description"/>
|
||||
</template>
|
||||
<a-switch v-model:checked="form.enable" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, toRaw } from 'vue'
|
||||
import { getAPI, postAPI } from '@/api'
|
||||
import { isAdmin } from '@/role'
|
||||
import { mixinForm } from '@/utils/mixin'
|
||||
import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
|
||||
import ResourceIcon from '@/components/view/ResourceIcon'
|
||||
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
||||
import { BlockOutlined, GlobalOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'CloneVpcOffering',
|
||||
mixins: [mixinForm],
|
||||
components: {
|
||||
CheckBoxSelectPair,
|
||||
ResourceIcon,
|
||||
TooltipLabel,
|
||||
BlockOutlined,
|
||||
GlobalOutlined
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedDomains: [],
|
||||
selectedZones: [],
|
||||
isConserveMode: true,
|
||||
internetProtocolValue: 'ipv4',
|
||||
domains: [],
|
||||
domainLoading: false,
|
||||
zones: [],
|
||||
zoneLoading: false,
|
||||
forNsx: false,
|
||||
provider: '',
|
||||
loading: false,
|
||||
supportedServices: [],
|
||||
supportedServiceLoading: false,
|
||||
servicesReady: false,
|
||||
serviceOfferings: [],
|
||||
serviceOfferingLoading: false,
|
||||
isVpcVirtualRouterForAtLeastOneService: false,
|
||||
connectivityServiceChecked: false,
|
||||
sourceNatServiceChecked: false,
|
||||
selectedServiceProviderMap: {},
|
||||
serviceProviderMap: {},
|
||||
ipv6NetworkOfferingEnabled: false,
|
||||
routedNetworkEnabled: false,
|
||||
routingMode: 'static',
|
||||
networkmode: '',
|
||||
networkmodes: [
|
||||
{
|
||||
id: 0,
|
||||
name: 'NATTED'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'ROUTED'
|
||||
}
|
||||
],
|
||||
isPublic: true,
|
||||
VPCVR: {
|
||||
name: 'VpcVirtualRouter',
|
||||
description: 'VpcVirtualRouter',
|
||||
enabled: true
|
||||
},
|
||||
NSX: {
|
||||
name: 'Nsx',
|
||||
description: 'Nsx',
|
||||
enabled: true
|
||||
},
|
||||
Netris: {
|
||||
name: 'Netris',
|
||||
description: 'Netris',
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.apiParams = this.$getApiParams('cloneVPCOffering')
|
||||
},
|
||||
created () {
|
||||
this.zones = [
|
||||
{
|
||||
id: null,
|
||||
name: this.$t('label.all.zone')
|
||||
}
|
||||
]
|
||||
this.isPublic = isAdmin()
|
||||
this.initForm()
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
initForm () {
|
||||
this.formRef = ref()
|
||||
this.form = reactive({
|
||||
regionlevelvpc: true,
|
||||
distributedrouter: true,
|
||||
ispublic: this.isPublic,
|
||||
internetprotocol: this.internetProtocolValue,
|
||||
nsxsupportlb: true,
|
||||
routingmode: 'static',
|
||||
domainid: [],
|
||||
zoneid: []
|
||||
})
|
||||
this.rules = reactive({
|
||||
name: [{ required: true, message: this.$t('message.error.name') }],
|
||||
domainid: [{ type: 'array', required: true, message: this.$t('message.error.select') }],
|
||||
zoneid: [{
|
||||
type: 'array',
|
||||
validator: async (rule, value) => {
|
||||
if (value && value.length > 1 && value.indexOf(0) !== -1) {
|
||||
return Promise.reject(this.$t('message.error.zone.combined'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}]
|
||||
})
|
||||
},
|
||||
fetchData () {
|
||||
this.fetchDomainData()
|
||||
this.fetchZoneData()
|
||||
this.fetchIpv6NetworkOfferingConfiguration()
|
||||
this.fetchRoutedNetworkConfiguration()
|
||||
this.fetchSupportedServiceData()
|
||||
},
|
||||
isAdmin () {
|
||||
return isAdmin()
|
||||
},
|
||||
fetchIpv6NetworkOfferingConfiguration () {
|
||||
this.ipv6NetworkOfferingEnabled = false
|
||||
const params = { name: 'ipv6.offering.enabled' }
|
||||
getAPI('listConfigurations', params).then(json => {
|
||||
const value = json?.listconfigurationsresponse?.configuration?.[0].value || null
|
||||
this.ipv6NetworkOfferingEnabled = value === 'true'
|
||||
})
|
||||
},
|
||||
fetchRoutedNetworkConfiguration () {
|
||||
this.routedNetworkEnabled = false
|
||||
const params = { name: 'routed.network.vpc.enabled' }
|
||||
getAPI('listConfigurations', params).then(json => {
|
||||
const value = json?.listconfigurationsresponse?.configuration?.[0].value || null
|
||||
this.routedNetworkEnabled = value === 'true'
|
||||
if (!this.routedNetworkEnabled) {
|
||||
this.networkmodes.pop()
|
||||
}
|
||||
})
|
||||
},
|
||||
fetchDomainData () {
|
||||
const params = {}
|
||||
params.listAll = true
|
||||
params.showicon = true
|
||||
params.details = 'min'
|
||||
this.domainLoading = true
|
||||
getAPI('listDomains', params).then(json => {
|
||||
const listDomains = json.listdomainsresponse.domain
|
||||
this.domains = this.domains.concat(listDomains)
|
||||
}).finally(() => {
|
||||
this.domainLoading = false
|
||||
})
|
||||
},
|
||||
fetchZoneData () {
|
||||
const params = {}
|
||||
params.showicon = true
|
||||
this.zoneLoading = true
|
||||
getAPI('listZones', params).then(json => {
|
||||
const listZones = json.listzonesresponse.zone
|
||||
if (listZones) {
|
||||
this.zones = this.zones.concat(listZones)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.zoneLoading = false
|
||||
})
|
||||
},
|
||||
fetchSupportedServiceData () {
|
||||
this.supportedServiceLoading = true
|
||||
getAPI('listSupportedNetworkServices', {}).then(json => {
|
||||
const networkServices = json.listsupportednetworkservicesresponse.networkservice || []
|
||||
|
||||
let services = []
|
||||
if (this.provider === 'NSX') {
|
||||
services = this.buildNsxServices(networkServices)
|
||||
} else if (this.provider === 'Netris') {
|
||||
services = this.buildNetrisServices(networkServices)
|
||||
} else {
|
||||
services = this.buildDefaultServices(networkServices)
|
||||
}
|
||||
|
||||
if (this.networkmode === 'ROUTED') {
|
||||
services = services.filter(service => {
|
||||
return !['SourceNat', 'StaticNat', 'Lb', 'PortForwarding', 'Vpn'].includes(service.name)
|
||||
})
|
||||
if (['NSX', 'Netris'].includes(this.provider)) {
|
||||
services.push({
|
||||
name: 'Gateway',
|
||||
description: 'Gateway',
|
||||
enabled: true,
|
||||
provider: [{ name: this.provider }]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
for (const i in services) {
|
||||
services[i].description = services[i].name
|
||||
}
|
||||
|
||||
this.supportedServices = services
|
||||
this.supportedServiceLoading = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.populateFormFromResource()
|
||||
})
|
||||
})
|
||||
},
|
||||
buildNsxServices (networkServices) {
|
||||
return [
|
||||
{ name: 'Dhcp', enabled: true, provider: [{ name: 'VpcVirtualRouter' }] },
|
||||
{ name: 'Dns', enabled: true, provider: [{ name: 'VpcVirtualRouter' }] },
|
||||
{ name: 'Lb', enabled: true, provider: [{ name: 'Nsx' }] },
|
||||
{ name: 'StaticNat', enabled: true, provider: [{ name: 'Nsx' }] },
|
||||
{ name: 'SourceNat', enabled: true, provider: [{ name: 'Nsx' }] },
|
||||
{ name: 'NetworkACL', enabled: true, provider: [{ name: 'Nsx' }] },
|
||||
{ name: 'PortForwarding', enabled: true, provider: [{ name: 'Nsx' }] },
|
||||
{ name: 'UserData', enabled: true, provider: [{ name: 'VpcVirtualRouter' }] }
|
||||
]
|
||||
},
|
||||
buildNetrisServices (networkServices) {
|
||||
return [
|
||||
{ name: 'Dhcp', enabled: true, provider: [{ name: 'VpcVirtualRouter' }] },
|
||||
{ name: 'Dns', enabled: true, provider: [{ name: 'VpcVirtualRouter' }] },
|
||||
{ name: 'Lb', enabled: true, provider: [{ name: 'Netris' }] },
|
||||
{ name: 'StaticNat', enabled: true, provider: [{ name: 'Netris' }] },
|
||||
{ name: 'SourceNat', enabled: true, provider: [{ name: 'Netris' }] },
|
||||
{ name: 'NetworkACL', enabled: true, provider: [{ name: 'Netris' }] },
|
||||
{ name: 'PortForwarding', enabled: true, provider: [{ name: 'Netris' }] },
|
||||
{ name: 'UserData', enabled: true, provider: [{ name: 'VpcVirtualRouter' }] }
|
||||
]
|
||||
},
|
||||
buildDefaultServices (networkServices) {
|
||||
return [
|
||||
{ name: 'Dhcp', provider: [{ name: 'VpcVirtualRouter' }, { name: 'ConfigDrive' }] },
|
||||
{ name: 'Dns', provider: [{ name: 'VpcVirtualRouter' }, { name: 'ConfigDrive' }] },
|
||||
{ name: 'Lb', provider: [{ name: 'VpcVirtualRouter' }, { name: 'InternalLbVm' }] },
|
||||
{ name: 'Gateway', provider: [{ name: 'VpcVirtualRouter' }, { name: 'BigSwitchBcf' }] },
|
||||
{ name: 'StaticNat', provider: [{ name: 'VpcVirtualRouter' }, { name: 'BigSwitchBcf' }] },
|
||||
{ name: 'SourceNat', provider: [{ name: 'VpcVirtualRouter' }, { name: 'BigSwitchBcf' }] },
|
||||
{ name: 'NetworkACL', provider: [{ name: 'VpcVirtualRouter' }, { name: 'BigSwitchBcf' }] },
|
||||
{ name: 'PortForwarding', provider: [{ name: 'VpcVirtualRouter' }] },
|
||||
{ name: 'UserData', provider: [{ name: 'VpcVirtualRouter' }, { name: 'ConfigDrive' }] },
|
||||
{ name: 'Vpn', provider: [{ name: 'VpcVirtualRouter' }, { name: 'BigSwitchBcf' }] },
|
||||
{ name: 'Connectivity', provider: [{ name: 'BigSwitchBcf' }, { name: 'NiciraNvp' }, { name: 'Ovs' }, { name: 'JuniperContrailVpcRouter' }] }
|
||||
]
|
||||
},
|
||||
populateFormFromResource () {
|
||||
if (!this.resource) return
|
||||
|
||||
const r = this.resource
|
||||
this.form.name = r.name + ' - Clone'
|
||||
this.form.displaytext = r.displaytext || r.name
|
||||
|
||||
if (r.internetprotocol) {
|
||||
this.form.internetprotocol = r.internetprotocol.toLowerCase()
|
||||
this.internetProtocolValue = r.internetprotocol.toLowerCase()
|
||||
}
|
||||
|
||||
if (r.service && Array.isArray(r.service)) {
|
||||
const networkAclService = r.service.find(svc => svc.name === 'NetworkACL')
|
||||
if (networkAclService && networkAclService.provider && networkAclService.provider.length > 0) {
|
||||
const providerName = networkAclService.provider[0].name
|
||||
if (providerName === 'Nsx') {
|
||||
this.provider = 'NSX'
|
||||
this.form.provider = 'NSX'
|
||||
} else if (providerName === 'Netris') {
|
||||
this.provider = 'Netris'
|
||||
this.form.provider = 'Netris'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (r.networkmode) {
|
||||
this.networkmode = r.networkmode
|
||||
this.form.networkmode = r.networkmode
|
||||
}
|
||||
|
||||
if (r.routingmode) {
|
||||
this.routingMode = r.routingmode
|
||||
this.form.routingmode = r.routingmode
|
||||
}
|
||||
|
||||
if (r.serviceofferingid) {
|
||||
this.form.serviceofferingid = r.serviceofferingid
|
||||
}
|
||||
|
||||
if (r.service && Array.isArray(r.service)) {
|
||||
const sourceServiceMap = {}
|
||||
r.service.forEach(svc => {
|
||||
if (svc.provider && svc.provider.length > 0) {
|
||||
const providerName = svc.provider[0].name
|
||||
sourceServiceMap[svc.name] = providerName
|
||||
}
|
||||
})
|
||||
|
||||
this.serviceProviderMap = sourceServiceMap
|
||||
|
||||
const updatedServices = this.supportedServices.map(svc => {
|
||||
const serviceCopy = { ...svc, provider: [...svc.provider] }
|
||||
|
||||
if (sourceServiceMap[serviceCopy.name]) {
|
||||
const providerName = sourceServiceMap[serviceCopy.name]
|
||||
const providerIndex = serviceCopy.provider.findIndex(p => p.name === providerName)
|
||||
|
||||
if (providerIndex > 0) {
|
||||
const targetProvider = serviceCopy.provider[providerIndex]
|
||||
serviceCopy.provider.splice(providerIndex, 1)
|
||||
serviceCopy.provider.unshift(targetProvider)
|
||||
}
|
||||
|
||||
serviceCopy.defaultChecked = true
|
||||
serviceCopy.selectedProvider = providerName
|
||||
this.selectedServiceProviderMap[serviceCopy.name] = providerName
|
||||
} else {
|
||||
serviceCopy.defaultChecked = false
|
||||
serviceCopy.selectedProvider = null
|
||||
}
|
||||
return serviceCopy
|
||||
})
|
||||
|
||||
this.supportedServices = updatedServices
|
||||
|
||||
this.connectivityServiceChecked = Boolean(this.selectedServiceProviderMap.Connectivity)
|
||||
this.sourceNatServiceChecked = Boolean(this.selectedServiceProviderMap.SourceNat)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.servicesReady = true
|
||||
this.$nextTick(() => {
|
||||
this.checkVpcVirtualRouterForServices()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (r.service && Array.isArray(r.service)) {
|
||||
const connectivityService = r.service.find(svc => svc.name === 'Connectivity')
|
||||
if (connectivityService && connectivityService.capability) {
|
||||
const regionLevelCapability = connectivityService.capability.find(cap => cap.name === 'RegionLevelVpc')
|
||||
if (regionLevelCapability) {
|
||||
this.form.regionlevelvpc = regionLevelCapability.value === 'true'
|
||||
}
|
||||
const distributedRouterCapability = connectivityService.capability.find(cap => cap.name === 'DistributedRouter')
|
||||
if (distributedRouterCapability) {
|
||||
this.form.distributedrouter = distributedRouterCapability.value === 'true'
|
||||
}
|
||||
}
|
||||
|
||||
const sourceNatService = r.service.find(svc => svc.name === 'SourceNat')
|
||||
if (sourceNatService && sourceNatService.capability) {
|
||||
const redundantRouterCapability = sourceNatService.capability.find(cap => cap.name === 'RedundantRouter')
|
||||
if (redundantRouterCapability) {
|
||||
this.form.redundantrouter = redundantRouterCapability.value === 'true'
|
||||
}
|
||||
}
|
||||
|
||||
const gatewayService = r.service.find(svc => svc.name === 'Gateway')
|
||||
if (gatewayService && gatewayService.capability) {
|
||||
const redundantRouterCapability = gatewayService.capability.find(cap => cap.name === 'RedundantRouter')
|
||||
if (redundantRouterCapability) {
|
||||
this.form.redundantrouter = redundantRouterCapability.value === 'true'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.provider === 'NSX') {
|
||||
this.form.nsxsupportlb = Boolean(this.serviceProviderMap.Lb)
|
||||
}
|
||||
},
|
||||
async handleProviderChange (value) {
|
||||
this.provider = value
|
||||
if (this.provider === 'NSX') {
|
||||
this.form.nsxsupportlb = true
|
||||
this.handleNsxLbService(true)
|
||||
}
|
||||
this.fetchSupportedServiceData()
|
||||
},
|
||||
handleNsxLbService (supportLb) {
|
||||
if (!supportLb) {
|
||||
this.supportedServices = this.supportedServices.filter(svc => svc.name !== 'Lb')
|
||||
delete this.selectedServiceProviderMap.Lb
|
||||
} else {
|
||||
const lbExists = this.supportedServices.some(svc => svc.name === 'Lb')
|
||||
if (!lbExists) {
|
||||
this.supportedServices.push({
|
||||
name: 'Lb',
|
||||
description: 'Lb',
|
||||
enabled: true,
|
||||
provider: [{ name: 'Nsx' }]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
handleSupportedServiceChange (service, checked, provider) {
|
||||
if (checked) {
|
||||
const correctProvider = this.serviceProviderMap[service]
|
||||
if (correctProvider && provider !== correctProvider) {
|
||||
this.selectedServiceProviderMap[service] = correctProvider
|
||||
} else {
|
||||
this.selectedServiceProviderMap[service] = provider
|
||||
}
|
||||
} else {
|
||||
delete this.selectedServiceProviderMap[service]
|
||||
}
|
||||
|
||||
if (service === 'Connectivity') {
|
||||
this.connectivityServiceChecked = checked
|
||||
}
|
||||
if (service === 'SourceNat') {
|
||||
this.sourceNatServiceChecked = checked
|
||||
}
|
||||
|
||||
this.checkVpcVirtualRouterForServices()
|
||||
},
|
||||
checkVpcVirtualRouterForServices () {
|
||||
this.isVpcVirtualRouterForAtLeastOneService = false
|
||||
const providers = Object.values(this.selectedServiceProviderMap)
|
||||
for (const provider of providers) {
|
||||
if (provider === 'VpcVirtualRouter') {
|
||||
this.isVpcVirtualRouterForAtLeastOneService = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (this.isVpcVirtualRouterForAtLeastOneService && this.serviceOfferings.length === 0) {
|
||||
this.fetchServiceOfferingData()
|
||||
}
|
||||
},
|
||||
handleForNetworkModeChange (networkMode) {
|
||||
this.networkmode = networkMode
|
||||
this.fetchSupportedServiceData()
|
||||
},
|
||||
fetchServiceOfferingData () {
|
||||
const params = {}
|
||||
params.issystem = true
|
||||
params.systemvmtype = 'domainrouter'
|
||||
this.serviceOfferingLoading = true
|
||||
getAPI('listServiceOfferings', params).then(json => {
|
||||
const listServiceOfferings = json.listserviceofferingsresponse.serviceoffering
|
||||
this.serviceOfferings = this.serviceOfferings.concat(listServiceOfferings)
|
||||
}).finally(() => {
|
||||
this.serviceOfferingLoading = false
|
||||
})
|
||||
},
|
||||
handleSubmit (e) {
|
||||
if (e) {
|
||||
e.preventDefault()
|
||||
}
|
||||
if (this.loading) return
|
||||
|
||||
this.formRef.value.validate().then(() => {
|
||||
const formRaw = toRaw(this.form)
|
||||
const values = this.handleRemoveFields(formRaw)
|
||||
|
||||
const params = {
|
||||
sourceofferingid: this.resource.id,
|
||||
name: values.name
|
||||
}
|
||||
|
||||
if (values.displaytext) {
|
||||
params.displaytext = values.displaytext
|
||||
}
|
||||
|
||||
if (values.ispublic !== true) {
|
||||
const domainIndexes = values.domainid
|
||||
let domainId = null
|
||||
if (domainIndexes && domainIndexes.length > 0) {
|
||||
const domainIds = []
|
||||
for (let i = 0; i < domainIndexes.length; i++) {
|
||||
domainIds.push(this.domains[domainIndexes[i]].id)
|
||||
}
|
||||
domainId = domainIds.join(',')
|
||||
}
|
||||
if (domainId) {
|
||||
params.domainid = domainId
|
||||
}
|
||||
}
|
||||
|
||||
const zoneIndexes = values.zoneid
|
||||
let zoneId = null
|
||||
if (zoneIndexes && zoneIndexes.length > 0) {
|
||||
const zoneIds = []
|
||||
for (let j = 0; j < zoneIndexes.length; j++) {
|
||||
zoneIds.push(this.zones[zoneIndexes[j]].id)
|
||||
}
|
||||
zoneId = zoneIds.join(',')
|
||||
}
|
||||
if (zoneId) {
|
||||
params.zoneid = zoneId
|
||||
}
|
||||
|
||||
if (values.internetprotocol) {
|
||||
params.internetprotocol = values.internetprotocol
|
||||
}
|
||||
|
||||
const forNsx = values.provider === 'NSX'
|
||||
if (forNsx) {
|
||||
params.provider = 'NSX'
|
||||
params.nsxsupportlb = values.nsxsupportlb
|
||||
}
|
||||
const forNetris = values.provider === 'Netris'
|
||||
if (forNetris) {
|
||||
params.provider = 'Netris'
|
||||
}
|
||||
|
||||
if (values.networkmode) {
|
||||
params.networkmode = values.networkmode
|
||||
}
|
||||
|
||||
if (values.specifyasnumber !== undefined) {
|
||||
params.specifyasnumber = values.specifyasnumber
|
||||
}
|
||||
|
||||
if (values.routingmode) {
|
||||
params.routingmode = values.routingmode
|
||||
}
|
||||
|
||||
if (this.selectedServiceProviderMap != null) {
|
||||
const supportedServices = Object.keys(this.selectedServiceProviderMap)
|
||||
if (!forNsx && !forNetris) {
|
||||
params.supportedservices = supportedServices.join(',')
|
||||
}
|
||||
for (const k in supportedServices) {
|
||||
params['serviceProviderList[' + k + '].service'] = supportedServices[k]
|
||||
params['serviceProviderList[' + k + '].provider'] = this.selectedServiceProviderMap[supportedServices[k]]
|
||||
}
|
||||
|
||||
let serviceCapabilityIndex = 0
|
||||
if (supportedServices.includes('Connectivity')) {
|
||||
if (values.regionlevelvpc === true) {
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'Connectivity'
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RegionLevelVpc'
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
||||
serviceCapabilityIndex++
|
||||
}
|
||||
if (values.distributedrouter === true) {
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'Connectivity'
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'DistributedRouter'
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
||||
serviceCapabilityIndex++
|
||||
}
|
||||
}
|
||||
|
||||
if (supportedServices.includes('SourceNat') && values.redundantrouter === true) {
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'SourceNat'
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RedundantRouter'
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
||||
serviceCapabilityIndex++
|
||||
} else if (values.redundantrouter === true) {
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'Gateway'
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RedundantRouter'
|
||||
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
||||
serviceCapabilityIndex++
|
||||
}
|
||||
|
||||
if (values.serviceofferingid && this.isVpcVirtualRouterForAtLeastOneService) {
|
||||
params.serviceofferingid = values.serviceofferingid
|
||||
}
|
||||
} else {
|
||||
params.supportedservices = ''
|
||||
}
|
||||
|
||||
if (values.enable !== undefined) {
|
||||
params.enable = values.enable
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
postAPI('cloneVPCOffering', params).then(json => {
|
||||
this.$message.success(`${this.$t('message.success.clone.vpc.offering')} ${values.name}`)
|
||||
this.$emit('refresh-data')
|
||||
this.closeAction()
|
||||
}).catch(error => {
|
||||
this.$notifyError(error)
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}).catch(error => {
|
||||
this.formRef.value.scrollToField(error.errorFields[0].name)
|
||||
})
|
||||
},
|
||||
closeAction () {
|
||||
this.$emit('close-action')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form-layout {
|
||||
width: 80vw;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.supported-services-container {
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue