mirror of https://github.com/apache/cloudstack.git
1470 lines
60 KiB
Vue
1470 lines
60 KiB
Vue
// 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="guestiptype" ref="guestiptype">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.guestiptype')" :tooltip="apiParams.guestiptype.description"/>
|
|
</template>
|
|
<a-radio-group
|
|
v-model:value="form.guestiptype"
|
|
buttonStyle="solid"
|
|
@change="selected => { handleGuestTypeChange(selected.target.value) }">
|
|
<a-radio-button value="isolated">
|
|
{{ $t('label.isolated') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="l2">
|
|
{{ $t('label.l2') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="shared">
|
|
{{ $t('label.shared') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item name="internetprotocol" ref="internetprotocol" v-if="guestType === 'isolated'">
|
|
<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="forvpc" ref="forvpc" v-if="guestType === 'isolated'">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.vpc')" :tooltip="apiParams.forvpc.description"/>
|
|
</template>
|
|
<a-switch v-model:checked="form.forvpc" @change="handleForVpcChange" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<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"
|
|
disabled
|
|
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-row>
|
|
<!-- NSX specific toggles (mirror AddNetworkOffering.vue) -->
|
|
<a-row :gutter="12" v-if="form.provider === 'NSX'">
|
|
<a-col :md="12" :lg="12">
|
|
<a-form-item name="nsxsupportlb" ref="nsxsupportlb" v-if="guestType === 'isolated'">
|
|
<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-col :md="12" :lg="12" v-if="form.nsxsupportlb && form.forvpc">
|
|
<a-form-item name="nsxsupportsinternallb" ref="nsxsupportsinternallb" v-if="guestType === 'isolated'">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.nsx.supports.internal.lb')" :tooltip="apiParams.nsxsupportsinternallb.description"/>
|
|
</template>
|
|
<a-switch v-model:checked="form.nsxsupportsinternallb"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-form-item name="networkmode" ref="networkmode" v-if="guestType === 'isolated' && form.provider">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.networkmode')" :tooltip="apiParams.networkmode.description"/>
|
|
</template>
|
|
<a-select
|
|
v-model:value="form.networkmode"
|
|
@change="val => { handleForNetworkModeChange(val) }"
|
|
:disabled="provider === 'NSX' || provider === 'Netris'"
|
|
optionFilterProp="label"
|
|
:filterOption="(input, option) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}"
|
|
:placeholder="apiParams.networkmode.description">
|
|
<a-select-option value="NATTED" :label="'NATTED'">NATTED</a-select-option>
|
|
<a-select-option value="ROUTED" :label="'ROUTED'">ROUTED</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 name="userdatal2" ref="userdatal2" :label="$t('label.user.data')" v-if="guestType === 'l2'">
|
|
<a-switch v-model:checked="form.userdatal2" />
|
|
</a-form-item>
|
|
<a-form-item name="networkrate" ref="networkrate">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
|
|
</template>
|
|
<a-input
|
|
v-model:value="form.networkrate"
|
|
:placeholder="apiParams.networkrate.description"/>
|
|
</a-form-item>
|
|
<a-row :gutter="12">
|
|
<a-col :md="12" :lg="12">
|
|
<a-form-item name="specifyvlan" ref="specifyvlan">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.specifyvlan')" :tooltip="apiParams.specifyvlan.description"/>
|
|
</template>
|
|
<a-switch v-model:checked="form.specifyvlan" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="12" :lg="12">
|
|
<a-form-item name="ispersistent" ref="ispersistent" v-if="guestType !== 'shared'">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.ispersistent')" :tooltip="apiParams.ispersistent.description"/>
|
|
</template>
|
|
<a-switch v-model:checked="form.ispersistent" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="12">
|
|
<a-col :md="12" :lg="12">
|
|
<a-form-item name="promiscuousmode" ref="promiscuousmode">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.promiscuousmode')" :tooltip="$t('message.network.offering.promiscuous.mode')"/>
|
|
</template>
|
|
<a-radio-group
|
|
v-model:value="form.promiscuousmode"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="">
|
|
{{ $t('label.none') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="true">
|
|
{{ $t('label.accept') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="false">
|
|
{{ $t('label.reject') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item name="macaddresschanges" ref="macaddresschanges">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.macaddresschanges')" :tooltip="$t('message.network.offering.mac.address.changes')"/>
|
|
</template>
|
|
<a-radio-group
|
|
v-model:value="form.macaddresschanges"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="">
|
|
{{ $t('label.none') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="true">
|
|
{{ $t('label.accept') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="false">
|
|
{{ $t('label.reject') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :md="12" :lg="12">
|
|
<a-form-item name="forgedtransmits" ref="forgedtransmits">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.forgedtransmits')" :tooltip="$t('message.network.offering.forged.transmits')"/>
|
|
</template>
|
|
<a-radio-group
|
|
v-model:value="form.forgedtransmits"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="">
|
|
{{ $t('label.none') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="true">
|
|
{{ $t('label.accept') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="false">
|
|
{{ $t('label.reject') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item name="maclearning" ref="maclearning">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.maclearning')" :tooltip="$t('message.network.offering.mac.learning')"/>
|
|
</template>
|
|
<span v-if="form.maclearning !== ''">
|
|
<a-alert type="warning">
|
|
<template #message>
|
|
<div v-html="$t('message.network.offering.mac.learning.warning')"></div>
|
|
</template>
|
|
</a-alert>
|
|
<br/>
|
|
</span>
|
|
<a-radio-group
|
|
v-model:value="form.maclearning"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="">
|
|
{{ $t('label.none') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="true">
|
|
{{ $t('label.accept') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="false">
|
|
{{ $t('label.reject') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-form-item v-if="guestType !== 'l2'">
|
|
<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'}-${item.defaultChecked}`"
|
|
: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="lbtype" ref="lbtype" :label="$t('label.lbtype')" v-if="forVpc && lbServiceChecked">
|
|
<a-radio-group
|
|
v-model:value="form.lbtype"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="publicLb">
|
|
{{ $t('label.public.lb') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="internalLb">
|
|
{{ $t('label.internal.lb') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item name="serviceofferingid" ref="serviceofferingid" v-if="guestType !== 'l2' && isVirtualRouterForAtLeastOneService">
|
|
<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="(offering, index) in serviceOfferings"
|
|
:value="offering.id"
|
|
:label="offering.displaytext || offering.name"
|
|
:key="index">
|
|
{{ offering.displaytext || offering.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="redundantroutercapability"
|
|
ref="redundantroutercapability"
|
|
:label="$t('label.redundantrouter')"
|
|
v-if="(guestType === 'shared' || guestType === 'isolated') && sourceNatServiceChecked && !isVpcVirtualRouterForAtLeastOneService">
|
|
<a-switch v-model:checked="form.redundantroutercapability" />
|
|
</a-form-item>
|
|
<a-form-item name="sourcenattype" ref="sourcenattype" :label="$t('label.sourcenattype')" v-if="(guestType === 'shared' || guestType === 'isolated') && sourceNatServiceChecked">
|
|
<a-radio-group
|
|
v-model:value="form.sourcenattype"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="peraccount">
|
|
{{ $t('label.per.account') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="perzone">
|
|
{{ $t('label.per.zone') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="vmautoscalingcapability"
|
|
ref="vmautoscalingcapability"
|
|
:label="$t('label.supportsvmautoscaling')"
|
|
v-if="lbServiceChecked && ['Netscaler', 'VirtualRouter', 'VpcVirtualRouter'].includes(lbServiceProvider)">
|
|
<a-switch v-model:checked="form.vmautoscalingcapability" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="elasticlb"
|
|
ref="elasticlb"
|
|
:label="$t('label.service.lb.elasticlbcheckbox')"
|
|
v-if="guestType === 'shared' && lbServiceChecked && lbServiceProvider === 'Netscaler'">
|
|
<a-switch v-model:checked="form.elasticlb" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="inlinemode"
|
|
ref="inlinemode"
|
|
:label="$t('label.service.lb.inlinemodedropdown')"
|
|
v-if="['shared', 'isolated'].includes(guestType) && lbServiceChecked && firewallServiceChecked && ['F5BigIp', 'Netscaler'].includes(lbServiceProvider) && ['JuniperSRX'].includes(firewallServiceProvider)">
|
|
<a-radio-group
|
|
v-model:value="form.inlinemode"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="false">
|
|
{{ $t('side.by.side') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="true">
|
|
{{ $t('inline') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="netscalerservicepackages"
|
|
ref="netscalerservicepackages"
|
|
:label="$t('label.service.lb.netscaler.servicepackages')"
|
|
v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && lbServiceProvider === 'Netscaler'">
|
|
<a-select
|
|
v-model:value="form.netscalerservicepackages"
|
|
showSearch
|
|
optionFilterProp="label"
|
|
:filterOption="(input, option) => {
|
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}"
|
|
:loading="registeredServicePackageLoading"
|
|
:placeholder="$t('label.service.lb.netscaler.servicepackages')">
|
|
<a-select-option v-for="(opt, optIndex) in registeredServicePackages" :key="optIndex" :label="opt.name || opt.description">
|
|
{{ opt.name || opt.description }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="netscalerservicepackagesdescription"
|
|
ref="netscalerservicepackagesdescription"
|
|
:label="$t('label.service.lb.netscaler.servicepackages.description')"
|
|
v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && lbServiceProvider === 'Netscaler'">
|
|
<a-input
|
|
v-model:value="form.netscalerservicepackagesdescription"
|
|
:placeholder="$t('label.service.lb.netscaler.servicepackages.description')"/>
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="elasticip"
|
|
ref="elasticip"
|
|
:label="$t('label.service.staticnat.elasticipcheckbox')"
|
|
v-if="guestType === 'shared' && staticNatServiceChecked && staticNatServiceProvider === 'Netscaler'">
|
|
<a-switch v-model:checked="form.elasticip" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="associatepublicip"
|
|
ref="associatepublicip"
|
|
:label="$t('label.service.staticnat.associatepublicip')"
|
|
v-if="isElasticIp && staticNatServiceChecked && staticNatServiceProvider === 'Netscaler'">
|
|
<a-switch v-model:checked="form.associatepublicip" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="supportsstrechedl2subnet"
|
|
ref="supportsstrechedl2subnet"
|
|
:label="$t('label.supportsstrechedl2subnet')"
|
|
v-if="connectivityServiceChecked">
|
|
<a-switch v-model:checked="form.supportsstrechedl2subnet" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
name="conservemode"
|
|
ref="conservemode"
|
|
v-if="guestType === 'shared' || guestType === 'isolated'">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.conservemode')" :tooltip="apiParams.conservemode.description"/>
|
|
</template>
|
|
<a-switch v-model:checked="form.conservemode" />
|
|
</a-form-item>
|
|
<a-form-item name="tags" ref="tags">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.tags')" :tooltip="apiParams.tags.description"/>
|
|
</template>
|
|
<a-input
|
|
v-model:value="form.tags"
|
|
:placeholder="apiParams.tags.description"/>
|
|
</a-form-item>
|
|
<a-form-item name="availability" ref="availability" v-if="requiredNetworkOfferingExists && guestType === 'isolated' && sourceNatServiceChecked">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.availability')" :tooltip="apiParams.availability.description"/>
|
|
</template>
|
|
<a-radio-group
|
|
v-model:value="form.availability"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="Optional">
|
|
{{ $t('label.optional') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="Required">
|
|
{{ $t('label.required') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item name="egressdefaultpolicy" ref="egressdefaultpolicy">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.egressdefaultpolicy')" :tooltip="apiParams.egressdefaultpolicy.description"/>
|
|
</template>
|
|
<a-radio-group
|
|
v-model:value="form.egressdefaultpolicy"
|
|
buttonStyle="solid">
|
|
<a-radio-button value="allow">
|
|
{{ $t('label.allow') }}
|
|
</a-radio-button>
|
|
<a-radio-button value="deny">
|
|
{{ $t('label.deny') }}
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item name="specifyipranges" ref="specifyipranges">
|
|
<template #label>
|
|
<tooltip-label :title="$t('label.specifyipranges')" :tooltip="apiParams.specifyipranges.description"/>
|
|
</template>
|
|
<a-switch v-model:checked="form.specifyipranges"/>
|
|
</a-form-item>
|
|
<a-form-item name="ispublic" ref="ispublic" :label="$t('label.ispublic')" v-show="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
|
|
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.network.offering')" :tooltip="apiParams.enable.description"/>
|
|
</template>
|
|
<a-switch v-model:checked="form.enable"/>
|
|
</a-form-item>
|
|
<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-form>
|
|
</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 ResourceIcon from '@/components/view/ResourceIcon'
|
|
import TooltipLabel from '@/components/widgets/TooltipLabel'
|
|
import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
|
|
import { BlockOutlined, GlobalOutlined } from '@ant-design/icons-vue'
|
|
|
|
export default {
|
|
name: 'CloneNetworkOffering',
|
|
mixins: [mixinForm],
|
|
components: {
|
|
ResourceIcon,
|
|
TooltipLabel,
|
|
CheckBoxSelectPair,
|
|
BlockOutlined,
|
|
GlobalOutlined
|
|
},
|
|
props: {
|
|
resource: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
VPCVR: {
|
|
name: 'VPCVirtualRouter',
|
|
description: 'VPCVirtualRouter',
|
|
enabled: true
|
|
},
|
|
VR: {
|
|
name: 'VirtualRouter',
|
|
description: 'VirtualRouter',
|
|
enabled: true
|
|
},
|
|
NSX: {
|
|
name: 'Nsx',
|
|
description: 'Nsx',
|
|
enabled: true
|
|
},
|
|
Netris: {
|
|
name: 'Netris',
|
|
description: 'Netris',
|
|
enabled: true
|
|
},
|
|
nsxSupportedServicesMap: {},
|
|
netrisSupportedServicesMap: {},
|
|
// supported services backup
|
|
supportedSvcs: [],
|
|
guestType: 'isolated',
|
|
forVpc: false,
|
|
provider: '',
|
|
networkmode: '',
|
|
routingMode: 'static',
|
|
internetProtocolValue: 'ipv4',
|
|
networkmodes: [
|
|
{
|
|
id: 0,
|
|
name: 'NATTED'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: 'ROUTED'
|
|
}
|
|
],
|
|
supportedServices: [],
|
|
supportedServiceLoading: false,
|
|
servicesReady: false,
|
|
selectedServiceProviderMap: {},
|
|
serviceProviderMap: {},
|
|
serviceOfferings: [],
|
|
serviceOfferingLoading: false,
|
|
isVirtualRouterForAtLeastOneService: false,
|
|
isVpcVirtualRouterForAtLeastOneService: false,
|
|
requiredNetworkOfferingExists: false,
|
|
sourceNatServiceChecked: false,
|
|
lbServiceChecked: false,
|
|
lbServiceProvider: '',
|
|
firewallServiceChecked: false,
|
|
firewallServiceProvider: '',
|
|
staticNatServiceChecked: false,
|
|
staticNatServiceProvider: '',
|
|
connectivityServiceChecked: false,
|
|
isElasticIp: false,
|
|
registeredServicePackages: [],
|
|
registeredServicePackageLoading: false,
|
|
isPublic: true,
|
|
domains: [],
|
|
domainLoading: false,
|
|
zones: [],
|
|
zoneLoading: false,
|
|
ipv6NetworkOfferingEnabled: false
|
|
}
|
|
},
|
|
beforeCreate () {
|
|
this.apiParams = this.$getApiParams('cloneNetworkOffering')
|
|
},
|
|
watch: {
|
|
'form.elasticip' (newVal) {
|
|
this.isElasticIp = newVal
|
|
}
|
|
},
|
|
async created () {
|
|
this.zones = [
|
|
{
|
|
id: null,
|
|
name: this.$t('label.all.zone')
|
|
}
|
|
]
|
|
this.isPublic = isAdmin()
|
|
this.initForm()
|
|
await this.checkRequiredNetworkOfferingExists()
|
|
this.fetchSupportedServices()
|
|
this.fetchServiceOfferingData()
|
|
this.fetchDomainData()
|
|
this.fetchZoneData()
|
|
this.fetchIpv6NetworkOfferingConfiguration()
|
|
},
|
|
methods: {
|
|
initForm () {
|
|
this.formRef = ref()
|
|
this.form = reactive({
|
|
guestiptype: this.guestType,
|
|
internetprotocol: 'ipv4',
|
|
forvpc: false,
|
|
provider: '',
|
|
networkmode: '',
|
|
routingmode: 'static',
|
|
lbtype: 'publicLb',
|
|
userdatal2: false,
|
|
availability: 'Optional',
|
|
conservemode: true,
|
|
ispersistent: false,
|
|
specifyvlan: false,
|
|
specifyipranges: false,
|
|
egressdefaultpolicy: 'deny',
|
|
enable: false,
|
|
promiscuousmode: '',
|
|
macaddresschanges: '',
|
|
forgedtransmits: '',
|
|
maclearning: '',
|
|
ispublic: this.isPublic,
|
|
domainid: [],
|
|
zoneid: [],
|
|
redundantroutercapability: false,
|
|
sourcenattype: 'peraccount',
|
|
vmautoscalingcapability: true,
|
|
elasticlb: false,
|
|
inlinemode: 'false',
|
|
elasticip: false,
|
|
associatepublicip: false,
|
|
supportsstrechedl2subnet: false,
|
|
isolation: 'dedicated',
|
|
netscalerservicepackages: null,
|
|
netscalerservicepackagesdescription: '',
|
|
nsxsupportlb: true,
|
|
nsxsupportsinternallb: false
|
|
})
|
|
this.rules = reactive({
|
|
name: [{ required: true, message: this.$t('message.error.required.input') }],
|
|
networkrate: [{
|
|
validator: async (rule, value) => {
|
|
if (value && (isNaN(value) || value < 0)) {
|
|
return Promise.reject(this.$t('message.validate.number'))
|
|
}
|
|
return Promise.resolve()
|
|
}
|
|
}],
|
|
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()
|
|
}
|
|
}]
|
|
})
|
|
},
|
|
fetchServiceOfferingData () {
|
|
this.serviceOfferingLoading = true
|
|
getAPI('listServiceOfferings', { issystem: true, systemvmtype: 'domainrouter' }).then(json => {
|
|
this.serviceOfferings = json.listserviceofferingsresponse.serviceoffering || []
|
|
}).finally(() => {
|
|
this.serviceOfferingLoading = false
|
|
})
|
|
},
|
|
fetchSupportedServices () {
|
|
this.supportedServiceLoading = true
|
|
getAPI('listSupportedNetworkServices', {}).then(json => {
|
|
this.supportedServices = json.listsupportednetworkservicesresponse.networkservice || []
|
|
|
|
for (const i in this.supportedServices) {
|
|
const networkServiceObj = this.supportedServices[i]
|
|
const serviceName = networkServiceObj.name
|
|
const serviceDisplayName = serviceName
|
|
|
|
const providers = []
|
|
for (const j in this.supportedServices[i].provider) {
|
|
const provider = this.supportedServices[i].provider[j]
|
|
providers.push({
|
|
name: provider.name,
|
|
enabled: true
|
|
})
|
|
}
|
|
|
|
this.supportedServices[i].provider = providers
|
|
this.supportedServices[i].description = serviceDisplayName
|
|
}
|
|
|
|
this.supportedSvcs = this.supportedServices.slice()
|
|
this.populateFormFromResource()
|
|
this.updateSupportedServices()
|
|
}).finally(() => {
|
|
this.supportedServiceLoading = false
|
|
})
|
|
},
|
|
populateFormFromResource () {
|
|
if (!this.resource) return
|
|
|
|
const r = this.resource
|
|
this.form.name = r.name + ' - Clone'
|
|
this.form.displaytext = r.displaytext || r.name
|
|
|
|
if (r.guestiptype) {
|
|
this.guestType = r.guestiptype.toLowerCase()
|
|
this.form.guestiptype = r.guestiptype.toLowerCase()
|
|
|
|
if (this.guestType === 'l2' && r.service && Array.isArray(r.service)) {
|
|
this.form.userdatal2 = r.service.some(svc => svc.name === 'UserData')
|
|
}
|
|
}
|
|
if (r.internetprotocol) {
|
|
this.form.internetprotocol = r.internetprotocol.toLowerCase()
|
|
this.internetProtocolValue = r.internetprotocol.toLowerCase()
|
|
}
|
|
if (r.forvpc !== undefined) {
|
|
this.forVpc = r.forvpc
|
|
this.form.forvpc = r.forvpc
|
|
}
|
|
|
|
if (r.service && Array.isArray(r.service)) {
|
|
// Prefer provider from NetworkACL service if present (for NSX/Netris), else scan other services
|
|
let detectedProvider = null
|
|
const networkAclService = r.service.find(svc => svc.name === 'NetworkACL')
|
|
if (networkAclService && networkAclService.provider && networkAclService.provider.length > 0) {
|
|
const provName = (networkAclService.provider[0].name || '').toLowerCase()
|
|
if (provName === 'nsx') detectedProvider = 'NSX'
|
|
else if (provName === 'netris') detectedProvider = 'Netris'
|
|
}
|
|
|
|
if (!detectedProvider) {
|
|
// fallback: detect provider (Nsx/Netris) from any service provider in the source offering
|
|
for (const svc of r.service) {
|
|
if (svc.provider && Array.isArray(svc.provider) && svc.provider.length > 0) {
|
|
const provName = (svc.provider[0].name || '').toLowerCase()
|
|
if (provName === 'nsx') {
|
|
detectedProvider = 'NSX'
|
|
break
|
|
} else if (provName === 'netris') {
|
|
detectedProvider = 'Netris'
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (detectedProvider) {
|
|
this.provider = detectedProvider
|
|
this.form.provider = detectedProvider
|
|
if (detectedProvider === 'NSX') {
|
|
this.nsxSupportedServicesMap = {}
|
|
for (const svc of r.service) {
|
|
if (svc.provider && svc.provider.length > 0) {
|
|
const provName = svc.provider[0].name
|
|
if (provName && provName.toLowerCase() === 'nsx') {
|
|
this.nsxSupportedServicesMap[svc.name] = this.NSX
|
|
} else if (svc.name === 'Dhcp' || svc.name === 'Dns' || svc.name === 'UserData') {
|
|
this.nsxSupportedServicesMap[svc.name] = this.forVpc ? this.VPCVR : this.VR
|
|
}
|
|
}
|
|
}
|
|
if (this.forVpc) {
|
|
this.nsxSupportedServicesMap.NetworkACL = this.NSX
|
|
} else {
|
|
this.nsxSupportedServicesMap.Firewall = this.NSX
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (r.networkmode) {
|
|
this.networkmode = r.networkmode
|
|
this.form.networkmode = r.networkmode
|
|
}
|
|
|
|
if (r.availability) {
|
|
const isIsolatedWithSourceNat = this.guestType === 'isolated' &&
|
|
r.service &&
|
|
r.service.some(svc => svc.name === 'SourceNat')
|
|
if (isIsolatedWithSourceNat && this.requiredNetworkOfferingExists) {
|
|
this.form.availability = 'Optional'
|
|
} else {
|
|
this.form.availability = r.availability
|
|
}
|
|
}
|
|
if (r.tags) this.form.tags = r.tags
|
|
if (r.conservemode !== undefined) this.form.conservemode = r.conservemode
|
|
if (r.ispersistent !== undefined) this.form.ispersistent = r.ispersistent
|
|
if (r.specifyvlan !== undefined) this.form.specifyvlan = r.specifyvlan
|
|
if (r.specifyipranges !== undefined) this.form.specifyipranges = r.specifyipranges
|
|
if (r.egressdefaultpolicy !== undefined) {
|
|
this.form.egressdefaultpolicy = r.egressdefaultpolicy ? 'allow' : 'deny'
|
|
}
|
|
if (r.networkrate) this.form.networkrate = r.networkrate
|
|
if (r.serviceofferingid) this.form.serviceofferingid = r.serviceofferingid
|
|
|
|
if (r.details) {
|
|
if (r.details.promiscuousmode) this.form.promiscuousmode = r.details.promiscuousmode
|
|
if (r.details.macaddresschanges) this.form.macaddresschanges = r.details.macaddresschanges
|
|
if (r.details.forgedtransmits) this.form.forgedtransmits = r.details.forgedtransmits
|
|
if (r.details.maclearning) this.form.maclearning = r.details.maclearning
|
|
}
|
|
|
|
this.forVpc = r.forvpc || false
|
|
|
|
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.supportedSvcs = updatedServices.map(svc => ({ ...svc }))
|
|
|
|
this.sourceNatServiceChecked = !!this.selectedServiceProviderMap.SourceNat
|
|
this.lbServiceChecked = !!this.selectedServiceProviderMap.Lb
|
|
this.lbServiceProvider = this.selectedServiceProviderMap.Lb || ''
|
|
this.firewallServiceChecked = !!this.selectedServiceProviderMap.Firewall
|
|
this.firewallServiceProvider = this.selectedServiceProviderMap.Firewall || ''
|
|
this.staticNatServiceChecked = !!this.selectedServiceProviderMap.StaticNat
|
|
this.staticNatServiceProvider = this.selectedServiceProviderMap.StaticNat || ''
|
|
this.connectivityServiceChecked = !!this.selectedServiceProviderMap.Connectivity
|
|
|
|
this.$nextTick(() => {
|
|
this.servicesReady = true
|
|
this.$nextTick(() => {
|
|
this.checkVirtualRouterForServices()
|
|
})
|
|
})
|
|
}
|
|
if (this.provider === 'NSX') {
|
|
this.form.nsxsupportlb = Boolean(this.serviceProviderMap.Lb)
|
|
this.form.nsxsupportsinternallb = Boolean(r.nsxsupportsinternallb)
|
|
this.handleNsxLbService(this.form.nsxsupportlb)
|
|
}
|
|
},
|
|
updateSupportedServices () {
|
|
const supportedServices = this.supportedServices || []
|
|
if (!this.supportedSvcs || this.supportedSvcs.length === 0) {
|
|
this.supportedSvcs = supportedServices.slice()
|
|
}
|
|
|
|
if (this.provider !== 'NSX' && this.provider !== 'Netris') {
|
|
const filtered = supportedServices.map(svc => {
|
|
if (svc.name !== 'Connectivity') {
|
|
const providers = svc.provider.map(provider => {
|
|
if (this.forVpc) {
|
|
const enabledProviders = ['VpcVirtualRouter', 'Netscaler', 'BigSwitchBcf', 'ConfigDrive']
|
|
provider.enabled = enabledProviders.includes(provider.name)
|
|
} else {
|
|
provider.enabled = !['InternalLbVm', 'VpcVirtualRouter', 'Nsx', 'Netris'].includes(provider.name)
|
|
}
|
|
return provider
|
|
})
|
|
return { ...svc, provider: providers }
|
|
}
|
|
return svc
|
|
})
|
|
this.supportedServices = filtered
|
|
} else {
|
|
let svcMap = this.provider === 'NSX' ? this.nsxSupportedServicesMap : this.netrisSupportedServicesMap
|
|
if (!svcMap || Object.keys(svcMap).length === 0) {
|
|
svcMap = {}
|
|
const forVpc = this.forVpc
|
|
const baseProvider = this.provider === 'NSX' ? this.NSX : this.Netris
|
|
const vrProvider = forVpc ? this.VPCVR : this.VR
|
|
svcMap.Dhcp = vrProvider
|
|
svcMap.Dns = vrProvider
|
|
svcMap.UserData = vrProvider
|
|
if (this.networkmode === 'NATTED') {
|
|
svcMap.SourceNat = baseProvider
|
|
svcMap.StaticNat = baseProvider
|
|
svcMap.PortForwarding = baseProvider
|
|
svcMap.Lb = baseProvider
|
|
}
|
|
if (forVpc) {
|
|
svcMap.NetworkACL = baseProvider
|
|
} else {
|
|
svcMap.Firewall = baseProvider
|
|
}
|
|
}
|
|
|
|
const filtered = this.supportedSvcs.filter(svc => Object.keys(svcMap).includes(svc.name))
|
|
.map(svc => {
|
|
const preserveSelected = svc.selectedProvider !== undefined ? { defaultChecked: svc.defaultChecked, selectedProvider: svc.selectedProvider } : {}
|
|
const mappedProvider = svcMap[svc.name]
|
|
if (!['Dhcp', 'Dns', 'UserData'].includes(svc.name)) {
|
|
return { ...svc, provider: [mappedProvider], ...preserveSelected }
|
|
}
|
|
return { ...svc, provider: [mappedProvider], ...preserveSelected }
|
|
})
|
|
this.supportedServices = filtered
|
|
const newSelectedMap = {}
|
|
for (const svc of filtered) {
|
|
const mappedProvider = svc.provider && svc.provider[0]
|
|
const providerName = svc.selectedProvider || (mappedProvider && mappedProvider.name) || null
|
|
if (providerName) {
|
|
newSelectedMap[svc.name] = providerName
|
|
}
|
|
}
|
|
this.selectedServiceProviderMap = newSelectedMap
|
|
}
|
|
},
|
|
checkVirtualRouterForServices () {
|
|
this.isVirtualRouterForAtLeastOneService = false
|
|
this.isVpcVirtualRouterForAtLeastOneService = false
|
|
for (const service in this.selectedServiceProviderMap) {
|
|
const provider = this.selectedServiceProviderMap[service]
|
|
if (provider === 'VirtualRouter') {
|
|
this.isVirtualRouterForAtLeastOneService = true
|
|
} else if (provider === 'VpcVirtualRouter') {
|
|
this.isVirtualRouterForAtLeastOneService = true
|
|
this.isVpcVirtualRouterForAtLeastOneService = true
|
|
}
|
|
}
|
|
},
|
|
handleGuestTypeChange (val) {
|
|
this.guestType = val
|
|
},
|
|
handleForVpcChange (val) {
|
|
this.forVpc = val
|
|
this.updateSupportedServices()
|
|
},
|
|
handleNsxLbService (supportLb) {
|
|
const forVpc = this.forVpc
|
|
const baseProvider = this.NSX
|
|
const vrProvider = forVpc ? this.VPCVR : this.VR
|
|
|
|
const map = {
|
|
Dhcp: vrProvider,
|
|
Dns: vrProvider,
|
|
UserData: vrProvider
|
|
}
|
|
const wantSourceNat = this.networkmode === 'NATTED' || !!this.serviceProviderMap.SourceNat
|
|
const wantStaticNat = this.networkmode === 'NATTED' || !!this.serviceProviderMap.StaticNat
|
|
const wantPortForwarding = this.networkmode === 'NATTED' || !!this.serviceProviderMap.PortForwarding
|
|
const wantLb = supportLb || !!this.serviceProviderMap.Lb
|
|
|
|
if (wantSourceNat) map.SourceNat = baseProvider
|
|
if (wantStaticNat) map.StaticNat = baseProvider
|
|
if (wantPortForwarding) map.PortForwarding = baseProvider
|
|
if (wantLb) map.Lb = baseProvider
|
|
|
|
if (forVpc) map.NetworkACL = baseProvider
|
|
else map.Firewall = baseProvider
|
|
|
|
this.nsxSupportedServicesMap = map
|
|
this.updateSupportedServices()
|
|
},
|
|
handleForNetworkModeChange (val) {
|
|
this.networkmode = val
|
|
|
|
const routedExcludedServices = ['SourceNat', 'StaticNat', 'Lb', 'PortForwarding', 'Vpn']
|
|
|
|
if (val === 'ROUTED' && this.guestType === 'isolated') {
|
|
routedExcludedServices.forEach(service => {
|
|
if (this.selectedServiceProviderMap[service]) {
|
|
this.handleSupportedServiceChange(service, false, null)
|
|
}
|
|
})
|
|
|
|
this.supportedServices = this.supportedServices.map(svc => {
|
|
if (routedExcludedServices.includes(svc.name)) {
|
|
return {
|
|
...svc,
|
|
defaultChecked: false,
|
|
selectedProvider: null
|
|
}
|
|
}
|
|
return svc
|
|
})
|
|
} else if (val === 'NATTED') {
|
|
routedExcludedServices.forEach(service => {
|
|
if (!this.selectedServiceProviderMap[service] && this.serviceProviderMap[service]) {
|
|
const provider = this.serviceProviderMap[service]
|
|
this.handleSupportedServiceChange(service, true, provider)
|
|
}
|
|
})
|
|
|
|
this.supportedServices = this.supportedServices.map(svc => {
|
|
if (routedExcludedServices.includes(svc.name) && this.serviceProviderMap[svc.name]) {
|
|
return {
|
|
...svc,
|
|
defaultChecked: true,
|
|
selectedProvider: this.serviceProviderMap[svc.name]
|
|
}
|
|
}
|
|
return svc
|
|
})
|
|
}
|
|
},
|
|
isAdmin () {
|
|
return isAdmin()
|
|
},
|
|
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
|
|
})
|
|
},
|
|
checkRequiredNetworkOfferingExists () {
|
|
return getAPI('listNetworkOfferings', {
|
|
guestiptype: 'Isolated',
|
|
sourcenatsupported: true,
|
|
availability: 'Required',
|
|
state: 'Enabled'
|
|
}).then(json => {
|
|
const offerings = json.listnetworkofferingsresponse.networkoffering || []
|
|
this.requiredNetworkOfferingExists = offerings.length > 0
|
|
return this.requiredNetworkOfferingExists
|
|
}).catch(error => {
|
|
console.error('checkRequiredNetworkOfferingExists: Error checking for required offerings:', error)
|
|
this.requiredNetworkOfferingExists = false
|
|
return false
|
|
})
|
|
},
|
|
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'
|
|
})
|
|
},
|
|
fetchRegisteredServicePackages () {
|
|
this.registeredServicePackageLoading = true
|
|
getAPI('listRegisteredServicePackages', {}).then(json => {
|
|
this.registeredServicePackages = json.listregisteredservicepackage?.registeredServicePackage || []
|
|
}).finally(() => {
|
|
this.registeredServicePackageLoading = false
|
|
})
|
|
},
|
|
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 === 'SourceNat') {
|
|
this.sourceNatServiceChecked = checked
|
|
} else if (service === 'Lb') {
|
|
this.lbServiceChecked = checked
|
|
this.lbServiceProvider = checked ? provider : ''
|
|
if (checked && provider === 'Netscaler') {
|
|
this.fetchRegisteredServicePackages()
|
|
}
|
|
} else if (service === 'Firewall') {
|
|
this.firewallServiceChecked = checked
|
|
this.firewallServiceProvider = checked ? provider : ''
|
|
} else if (service === 'StaticNat') {
|
|
this.staticNatServiceChecked = checked
|
|
this.staticNatServiceProvider = checked ? provider : ''
|
|
} else if (service === 'Connectivity') {
|
|
this.connectivityServiceChecked = checked
|
|
}
|
|
|
|
this.checkVirtualRouterForServices()
|
|
},
|
|
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
|
|
}
|
|
|
|
const forNsx = values.provider === 'NSX'
|
|
if (forNsx) {
|
|
params.provider = 'NSX'
|
|
params.nsxsupportlb = values.nsxsupportlb
|
|
if ('nsxsupportsinternallb' in values) {
|
|
params.nsxsupportsinternallb = values.nsxsupportsinternallb
|
|
}
|
|
}
|
|
const forNetris = values.provider === 'Netris'
|
|
if (forNetris) {
|
|
params.provider = 'Netris'
|
|
}
|
|
|
|
if (values.guestiptype) {
|
|
params.guestiptype = values.guestiptype
|
|
}
|
|
|
|
// MUST send supportedservices explicitly for ALL providers (including NSX/Netris)
|
|
// because backend's cloneNetworkOffering copies services from source offering if not provided
|
|
// When network mode changes, we need to send the updated service list
|
|
if (this.selectedServiceProviderMap != null) {
|
|
const supportedServices = Object.keys(this.selectedServiceProviderMap)
|
|
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.supportsstrechedl2subnet === true) {
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'Connectivity'
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RegionLevelVpc'
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
|
serviceCapabilityIndex++
|
|
}
|
|
}
|
|
|
|
if (supportedServices.includes('SourceNat')) {
|
|
if (values.redundantroutercapability === true) {
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'SourceNat'
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RedundantRouter'
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
|
serviceCapabilityIndex++
|
|
}
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'SourceNat'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'SupportedSourceNatTypes'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.sourcenattype
|
|
serviceCapabilityIndex++
|
|
} else if (values.redundantroutercapability === true) {
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].service'] = 'Gateway'
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilitytype'] = 'RedundantRouter'
|
|
params['serviceCapabilityList[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
|
serviceCapabilityIndex++
|
|
}
|
|
|
|
if (supportedServices.includes('SourceNat')) {
|
|
if (values.elasticip === true) {
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'StaticNat'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'ElasticIp'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
|
serviceCapabilityIndex++
|
|
}
|
|
if (values.elasticip === true || values.associatepublicip === true) {
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'StaticNat'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'associatePublicIP'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.associatepublicip
|
|
serviceCapabilityIndex++
|
|
}
|
|
}
|
|
|
|
if (supportedServices.includes('Lb')) {
|
|
if ('vmautoscalingcapability' in values) {
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'VmAutoScaling'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.vmautoscalingcapability
|
|
serviceCapabilityIndex++
|
|
}
|
|
if (values.elasticlb === true) {
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'ElasticLb'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = true
|
|
serviceCapabilityIndex++
|
|
}
|
|
if (values.inlinemode === 'true' && ((this.selectedServiceProviderMap.Lb === 'F5BigIp') || (this.selectedServiceProviderMap.Lb === 'Netscaler'))) {
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'InlineMode'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.inlinemode
|
|
serviceCapabilityIndex++
|
|
}
|
|
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'SupportedLbIsolation'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = values.isolation || 'dedicated'
|
|
serviceCapabilityIndex++
|
|
|
|
if (this.selectedServiceProviderMap.Lb === 'InternalLbVm') {
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].service'] = 'lb'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilitytype'] = 'lbSchemes'
|
|
params['servicecapabilitylist[' + serviceCapabilityIndex + '].capabilityvalue'] = 'internal'
|
|
serviceCapabilityIndex++
|
|
}
|
|
|
|
if ('netscalerservicepackages' in values &&
|
|
values.netscalerservicepackages !== null &&
|
|
this.registeredServicePackages.length > values.netscalerservicepackages &&
|
|
'netscalerservicepackagesdescription' in values) {
|
|
params['details[0].servicepackageuuid'] = this.registeredServicePackages[values.netscalerservicepackages].id
|
|
params['details[1].servicepackagedescription'] = values.netscalerservicepackagesdescription
|
|
}
|
|
}
|
|
}
|
|
|
|
if (values.guestiptype === 'l2' && values.userdatal2 === true) {
|
|
params.supportedservices = 'UserData'
|
|
}
|
|
|
|
if (values.availability) {
|
|
params.availability = values.availability
|
|
}
|
|
if (values.tags) {
|
|
params.tags = values.tags
|
|
}
|
|
if (values.specifyvlan !== undefined) {
|
|
params.specifyvlan = values.specifyvlan
|
|
}
|
|
if (values.conservemode !== undefined) {
|
|
params.conservemode = values.conservemode
|
|
}
|
|
if (values.ispersistent !== undefined) {
|
|
params.ispersistent = values.ispersistent
|
|
}
|
|
if (values.specifyipranges !== undefined) {
|
|
params.specifyipranges = values.specifyipranges
|
|
}
|
|
if (values.egressdefaultpolicy !== undefined) {
|
|
params.egressdefaultpolicy = values.egressdefaultpolicy
|
|
}
|
|
if (values.networkrate) {
|
|
params.networkrate = values.networkrate
|
|
}
|
|
if (values.serviceofferingid) {
|
|
params.serviceofferingid = values.serviceofferingid
|
|
}
|
|
if (values.enable !== undefined) {
|
|
params.enable = values.enable
|
|
}
|
|
|
|
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
|
|
}
|
|
}
|
|
if (values.networkmode) {
|
|
params.networkmode = values.networkmode
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
params.traffictype = this.resource.traffictype || 'GUEST'
|
|
|
|
let detailsIndex = 0
|
|
if (values.promiscuousmode && values.promiscuousmode !== '') {
|
|
params['details[' + detailsIndex + '].key'] = 'promiscuousmode'
|
|
params['details[' + detailsIndex + '].value'] = values.promiscuousmode
|
|
detailsIndex++
|
|
}
|
|
if (values.macaddresschanges && values.macaddresschanges !== '') {
|
|
params['details[' + detailsIndex + '].key'] = 'macaddresschanges'
|
|
params['details[' + detailsIndex + '].value'] = values.macaddresschanges
|
|
detailsIndex++
|
|
}
|
|
if (values.forgedtransmits && values.forgedtransmits !== '') {
|
|
params['details[' + detailsIndex + '].key'] = 'forgedtransmits'
|
|
params['details[' + detailsIndex + '].value'] = values.forgedtransmits
|
|
detailsIndex++
|
|
}
|
|
if (values.maclearning && values.maclearning !== '') {
|
|
params['details[' + detailsIndex + '].key'] = 'maclearning'
|
|
params['details[' + detailsIndex + '].value'] = values.maclearning
|
|
detailsIndex++
|
|
}
|
|
|
|
this.loading = true
|
|
postAPI('cloneNetworkOffering', params).then(json => {
|
|
this.$message.success(`${this.$t('message.success.clone.network.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="less">
|
|
.form-layout {
|
|
width: 80vw;
|
|
|
|
@media (min-width: 700px) {
|
|
width: 550px;
|
|
}
|
|
}
|
|
|
|
.supported-services-container {
|
|
height: 250px;
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|