| // 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> |
| <a-card |
| class="ant-form-text" |
| style="text-align: justify; margin: 10px 0; padding: 20px;" |
| v-html="zoneType !== null ? $t(zoneDescription[zoneType]) : $t('message.error.select.zone.type')"> |
| </a-card> |
| <a-table |
| bordered |
| :dataSource="physicalNetworks" |
| :columns="columns" |
| :pagination="false" |
| style="margin-bottom: 24px;"> |
| <template slot="name" slot-scope="text, record"> |
| <a-input :value="text" @change="e => onCellChange(record.key, 'name', e.target.value)" /> |
| </template> |
| <template slot="isolationMethod" slot-scope="text, record"> |
| <a-select |
| style="width: 100%" |
| :defaultValue="text" |
| @change="value => onCellChange(record.key, 'isolationMethod', value)" |
| > |
| <a-select-option value="VLAN"> VLAN </a-select-option> |
| <a-select-option value="VXLAN"> VXLAN </a-select-option> |
| <a-select-option value="GRE"> GRE </a-select-option> |
| <a-select-option value="STT"> STT </a-select-option> |
| <a-select-option value="BCF_SEGMENT"> BCF_SEGMENT </a-select-option> |
| <a-select-option value="ODL"> ODL </a-select-option> |
| <a-select-option value="L3VPN"> L3VPN </a-select-option> |
| <a-select-option value="VSP"> VSP </a-select-option> |
| <a-select-option value="VCS"> VCS </a-select-option> |
| </a-select> |
| </template> |
| <template slot="traffics" slot-scope="traffics, record"> |
| <div v-for="traffic in traffics" :key="traffic.type"> |
| <a-tag |
| :color="trafficColors[traffic.type]" |
| style="margin:2px" |
| > |
| {{ traffic.type.toUpperCase() }} |
| <a-icon type="edit" class="traffic-type-action" @click="editTraffic(record.key, traffic, $event)"/> |
| <a-icon type="delete" class="traffic-type-action" @click="deleteTraffic(record.key, traffic, $event)"/> |
| </a-tag> |
| </div> |
| <a-modal |
| :title="$t('label.edit.traffic.type')" |
| :visible="showEditTraffic" |
| :closable="true" |
| :maskClosable="false" |
| :okText="$t('label.ok')" |
| :cancelText="$t('label.cancel')" |
| @ok="updateTrafficLabel(trafficInEdit)" |
| @cancel="cancelEditTraffic" |
| centered |
| > |
| <a-form :form="form"> |
| <span class="ant-form-text"> {{ $t('message.edit.traffic.type') }} </span> |
| <a-form-item v-bind="formItemLayout" style="margin-top:16px;" :label="$t('label.traffic.label')"> |
| <a-input |
| v-decorator="['trafficLabel', { |
| rules: [{ |
| required: true, |
| message: $t('message.error.traffic.label'), |
| }] |
| }]" |
| /> |
| </a-form-item> |
| </a-form> |
| </a-modal> |
| <div v-if="isShowAddTraffic(record.traffics)"> |
| <div class="traffic-select-item" v-if="addingTrafficForKey === record.key"> |
| <a-select |
| :defaultValue="trafficLabelSelected" |
| @change="val => { trafficLabelSelected = val }" |
| style="min-width: 120px;" |
| > |
| <a-select-option |
| v-for="(traffic, index) in availableTrafficToAdd" |
| :value="traffic" |
| :key="index" |
| :disabled="isDisabledTraffic(record.traffics, traffic)" |
| > |
| {{ traffic.toUpperCase() }} |
| </a-select-option> |
| </a-select> |
| <a-button |
| class="icon-button" |
| shape="circle" |
| icon="plus" |
| size="small" |
| @click="trafficAdded" /> |
| <a-button |
| class="icon-button" |
| type="danger" |
| shape="circle" |
| icon="close" |
| size="small" |
| @click="() => { addingTrafficForKey = null }" /> |
| </div> |
| <a-tag |
| key="addingTraffic" |
| style="margin:2px;" |
| v-else |
| @click="addingTraffic(record.key, record.traffics)" |
| > |
| <a-icon type="plus" /> |
| {{ $t('label.add.traffic') }} |
| </a-tag> |
| </div> |
| </template> |
| <template slot="actions" slot-scope="text, record"> |
| <a-button v-if="physicalNetworks.indexOf(record) > 0" type="danger" shape="circle" icon="delete" @click="onDelete(record)" /> |
| </template> |
| <template slot="footer" v-if="isAdvancedZone"> |
| <a-button |
| @click="handleAddPhysicalNetwork"> |
| {{ $t('label.add.physical.network') }} |
| </a-button> |
| </template> |
| </a-table> |
| <div class="form-action"> |
| <a-button |
| v-if="!isFixError" |
| class="button-right" |
| @click="handleBack"> |
| {{ $t('label.previous') }} |
| </a-button> |
| <a-button |
| class="button-next" |
| type="primary" |
| @click="handleSubmit"> |
| {{ $t('label.next') }} |
| </a-button> |
| </div> |
| <a-modal |
| :visible="showError" |
| :title="`${$t('label.error')}!`" |
| :maskClosable="false" |
| :okText="$t('label.ok')" |
| :cancelText="$t('label.cancel')" |
| @ok="() => { showError = false }" |
| @cancel="() => { showError = false }" |
| centered |
| > |
| <span>{{ $t('message.required.traffic.type') }}</span> |
| </a-modal> |
| </div> |
| </template> |
| <script> |
| |
| export default { |
| props: { |
| prefillContent: { |
| type: Object, |
| default: function () { |
| return {} |
| } |
| }, |
| isFixError: { |
| type: Boolean, |
| default: false |
| } |
| }, |
| data () { |
| return { |
| formItemLayout: { |
| labelCol: { span: 10 }, |
| wrapperCol: { span: 12 } |
| }, |
| physicalNetworks: [], |
| count: 0, |
| zoneDescription: { |
| Basic: 'message.setup.physical.network.during.zone.creation.basic', |
| Advanced: 'message.setup.physical.network.during.zone.creation' |
| }, |
| hasUnusedPhysicalNetwork: false, |
| trafficColors: { |
| public: 'orange', |
| guest: 'green', |
| management: 'blue', |
| storage: 'red' |
| }, |
| showEditTraffic: false, |
| trafficInEdit: null, |
| availableTrafficToAdd: ['storage'], |
| addingTrafficForKey: '-1', |
| trafficLabelSelected: null, |
| showError: false, |
| defaultTrafficOptions: [] |
| } |
| }, |
| computed: { |
| columns () { |
| const columns = [] |
| columns.push({ |
| title: this.$t('label.network.name'), |
| dataIndex: 'name', |
| width: '30%', |
| scopedSlots: { customRender: 'name' } |
| }) |
| columns.push({ |
| title: this.$t('label.isolation.method'), |
| dataIndex: 'isolationMethod', |
| width: '20%', |
| scopedSlots: { customRender: 'isolationMethod' } |
| }) |
| columns.push({ |
| title: this.$t('label.traffic.types'), |
| key: 'traffics', |
| dataIndex: 'traffics', |
| scopedSlots: { customRender: 'traffics' } |
| }) |
| if (this.isAdvancedZone) { |
| columns.push({ |
| title: '', |
| dataIndex: 'actions', |
| scopedSlots: { customRender: 'actions' }, |
| width: 50 |
| }) |
| } |
| |
| return columns |
| }, |
| isAdvancedZone () { |
| return this.zoneType === 'Advanced' |
| }, |
| zoneType () { |
| return this.prefillContent.zoneType ? this.prefillContent.zoneType.value : null |
| }, |
| securityGroupsEnabled () { |
| return this.isAdvancedZone && (this.prefillContent.securityGroupsEnabled ? this.prefillContent.securityGroupsEnabled.value : false) |
| }, |
| networkOfferingSelected () { |
| return this.prefillContent.networkOfferingSelected |
| }, |
| needsPublicTraffic () { |
| if (!this.isAdvancedZone) { // Basic zone |
| return (this.networkOfferingSelected && (this.networkOfferingSelected.havingEIP || this.networkOfferingSelected.havingELB)) |
| } else { |
| return !this.securityGroupsEnabled |
| } |
| }, |
| requiredTrafficTypes () { |
| const traffics = ['management', 'guest'] |
| if (this.needsPublicTraffic) { |
| traffics.push('public') |
| } |
| return traffics |
| } |
| }, |
| beforeCreate () { |
| this.form = this.$form.createForm(this) |
| }, |
| created () { |
| this.defaultTrafficOptions = ['management', 'guest', 'storage'] |
| if (this.isAdvancedZone || this.needsPublicTraffic) { |
| this.defaultTrafficOptions.push('public') |
| } |
| this.physicalNetworks = this.prefillContent.physicalNetworks |
| this.hasUnusedPhysicalNetwork = this.getHasUnusedPhysicalNetwork() |
| const requiredTrafficTypes = this.requiredTrafficTypes |
| if (this.physicalNetworks && this.physicalNetworks.length > 0) { |
| this.count = this.physicalNetworks.length |
| requiredTrafficTypes.forEach(type => { |
| let foundType = false |
| this.physicalNetworks.forEach(net => { |
| for (const index in net.traffics) { |
| const traffic = net.traffics[index] |
| if (traffic.type === 'storage') { |
| const idx = this.availableTrafficToAdd.indexOf(traffic.type) |
| if (idx > -1) this.availableTrafficToAdd.splice(idx, 1) |
| } |
| if (traffic.type === type) { |
| foundType = true |
| } |
| } |
| }) |
| if (!foundType) this.availableTrafficToAdd.push(type) |
| }) |
| } else { |
| const traffics = requiredTrafficTypes.map(item => { |
| return { type: item, label: '' } |
| }) |
| this.count = 1 |
| this.physicalNetworks = [{ key: this.randomKeyTraffic(this.count), name: 'Physical Network 1', isolationMethod: 'VLAN', traffics: traffics }] |
| } |
| if (this.isAdvancedZone) { |
| this.availableTrafficToAdd.push('guest') |
| } |
| this.emitPhysicalNetworks() |
| }, |
| methods: { |
| onCellChange (key, dataIndex, value) { |
| const physicalNetworks = [...this.physicalNetworks] |
| const target = physicalNetworks.find(item => item.key === key) |
| if (target) { |
| target[dataIndex] = value |
| this.physicalNetworks = physicalNetworks |
| } |
| this.emitPhysicalNetworks() |
| }, |
| onDelete (record) { |
| record.traffics.forEach(traffic => { |
| if (!this.availableTrafficToAdd.includes(traffic.type)) { |
| this.availableTrafficToAdd.push(traffic.type) |
| } |
| }) |
| const physicalNetworks = [...this.physicalNetworks] |
| this.physicalNetworks = physicalNetworks.filter(item => item.key !== record.key) |
| this.hasUnusedPhysicalNetwork = this.getHasUnusedPhysicalNetwork() |
| this.emitPhysicalNetworks() |
| }, |
| handleAddPhysicalNetwork () { |
| const { count, physicalNetworks } = this |
| const newData = { |
| key: this.randomKeyTraffic(count + 1), |
| name: `Physical Network ${count + 1}`, |
| isolationMethod: 'VLAN', |
| traffics: [] |
| } |
| this.physicalNetworks = [...physicalNetworks, newData] |
| this.count = count + 1 |
| this.hasUnusedPhysicalNetwork = this.getHasUnusedPhysicalNetwork() |
| }, |
| isValidSetup () { |
| const shouldHaveLabels = this.physicalNetworks.length > 1 |
| let isValid = true |
| this.requiredTrafficTypes.forEach(type => { |
| let foundType = false |
| this.physicalNetworks.forEach(net => { |
| net.traffics.forEach(traffic => { |
| if (traffic.type === type) { |
| foundType = true |
| } |
| if (shouldHaveLabels && (!traffic.label || traffic.label.length === 0)) { |
| isValid = false |
| } |
| }) |
| }) |
| if (!foundType || !isValid) { |
| isValid = false |
| } |
| }) |
| return isValid |
| }, |
| handleSubmit (e) { |
| if (this.isValidSetup()) { |
| if (this.isFixError) { |
| this.$emit('submitLaunchZone') |
| return |
| } |
| this.$emit('nextPressed', this.physicalNetworks) |
| } else { |
| this.showError = true |
| } |
| }, |
| handleBack (e) { |
| this.$emit('backPressed') |
| }, |
| addingTraffic (key, traffics) { |
| this.addingTrafficForKey = key |
| this.availableTrafficToAdd.forEach(type => { |
| const trafficEx = traffics.filter(traffic => traffic.type === type) |
| if (!trafficEx || trafficEx.length === 0) { |
| this.trafficLabelSelected = type |
| return false |
| } |
| }) |
| }, |
| trafficAdded (trafficType) { |
| const trafficKey = this.physicalNetworks.findIndex(network => network.key === this.addingTrafficForKey) |
| this.physicalNetworks[trafficKey].traffics.push({ |
| type: this.trafficLabelSelected.toLowerCase(), |
| label: '' |
| }) |
| if (!this.isAdvancedZone || this.trafficLabelSelected !== 'guest') { |
| this.availableTrafficToAdd = this.availableTrafficToAdd.filter(item => item !== this.trafficLabelSelected) |
| } |
| this.addingTrafficForKey = null |
| this.trafficLabelSelected = null |
| this.emitPhysicalNetworks() |
| }, |
| editTraffic (key, traffic, $event) { |
| this.trafficInEdit = { |
| key: key, |
| traffic: traffic |
| } |
| this.showEditTraffic = true |
| this.form.setFieldsValue({ |
| trafficLabel: this.trafficInEdit !== null ? this.trafficInEdit.traffic.label : null |
| }) |
| }, |
| deleteTraffic (key, traffic, $event) { |
| const trafficKey = this.physicalNetworks.findIndex(network => network.key === key) |
| this.physicalNetworks[trafficKey].traffics = this.physicalNetworks[trafficKey].traffics.filter(tr => { |
| return tr.type !== traffic.type |
| }) |
| if (!this.isAdvancedZone || traffic.type !== 'guest') { |
| this.availableTrafficToAdd.push(traffic.type) |
| } |
| this.hasUnusedPhysicalNetwork = this.getHasUnusedPhysicalNetwork() |
| this.emitPhysicalNetworks() |
| }, |
| updateTrafficLabel (trafficInEdit) { |
| this.form.validateFields((err, values) => { |
| if (!err) { |
| this.showEditTraffic = false |
| trafficInEdit.traffic.label = values.trafficLabel |
| this.trafficInEdit = null |
| } |
| }) |
| this.emitPhysicalNetworks() |
| }, |
| cancelEditTraffic () { |
| this.showEditTraffic = false |
| this.trafficInEdit = null |
| }, |
| getHasUnusedPhysicalNetwork () { |
| let hasUnused = false |
| if (this.physicalNetworks && this.physicalNetworks.length > 0) { |
| this.physicalNetworks.forEach(item => { |
| if (!item.traffics || item.traffics.length === 0) { |
| hasUnused = true |
| } |
| }) |
| } |
| return hasUnused |
| }, |
| emitPhysicalNetworks () { |
| if (this.physicalNetworks) { |
| this.$emit('fieldsChanged', { physicalNetworks: this.physicalNetworks }) |
| } |
| }, |
| isDisabledTraffic (traffics, traffic) { |
| const trafficEx = traffics.filter(item => item.type === traffic) |
| if (trafficEx && trafficEx.length > 0) { |
| return true |
| } |
| |
| return false |
| }, |
| isShowAddTraffic (traffics) { |
| if (!this.availableTrafficToAdd || this.availableTrafficToAdd.length === 0) { |
| return false |
| } |
| |
| if (traffics.length === this.defaultTrafficOptions.length) { |
| return false |
| } |
| |
| if (this.isAdvancedZone && this.availableTrafficToAdd.length === 1) { |
| const guestEx = traffics.filter(traffic => traffic.type === 'guest') |
| if (guestEx && guestEx.length > 0) { |
| return false |
| } |
| } |
| |
| return true |
| }, |
| randomKeyTraffic (key) { |
| const now = new Date() |
| const random = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) |
| return [key, random, now.getTime()].join('') |
| } |
| } |
| } |
| </script> |
| |
| <style scoped lang="less"> |
| .form-action { |
| margin-top: 16px; |
| } |
| |
| .traffic-type-action { |
| margin-left: 2px; |
| margin-right: 2px; |
| padding-left: 1px; |
| padding-right: 1px; |
| } |
| |
| .physical-network-support { |
| margin: 10px 0; |
| } |
| |
| .traffic-select-item { |
| /deep/.icon-button { |
| margin: 0 0 0 5px; |
| } |
| } |
| </style> |
