This is an automated email from the ASF dual-hosted git repository. davidjumani pushed a commit to branch pr/5579 in repository https://gitbox.apache.org/repos/asf/cloudstack.git
commit 07d7c8cda79559a77c28f5d7a14cfd7a09477efb Author: davidjumani <[email protected]> AuthorDate: Thu Feb 9 17:47:35 2023 +0530 Removing unused files / api links --- tools/apidoc/gen_toc.py | 28 -- ui/src/config/section/network.js | 120 ------- ui/src/views/compute/InstanceTab.vue | 189 +---------- ui/src/views/network/tungsten/AddRoutingPolicy.vue | 328 ------------------ ui/src/views/network/tungsten/LogicalRouterTab.vue | 50 --- .../network/tungsten/NetworkRouterTableTab.vue | 290 ---------------- .../network/tungsten/NetworkRoutingPolicyTab.vue | 302 ----------------- .../views/network/tungsten/RoutingPolicyTerms.vue | 309 ----------------- .../network/tungsten/RoutingPolicyTermsTab.vue | 307 ----------------- .../tungsten/TungstenInterfaceStaticRoute.vue | 334 ------------------- .../tungsten/TungstenNetworkStaticRoute.vue | 368 --------------------- .../network/tungsten/TungstenNetworkTable.vue | 5 +- 12 files changed, 4 insertions(+), 2626 deletions(-) diff --git a/tools/apidoc/gen_toc.py b/tools/apidoc/gen_toc.py index 9624169db5c..1352800c2bf 100644 --- a/tools/apidoc/gen_toc.py +++ b/tools/apidoc/gen_toc.py @@ -87,11 +87,8 @@ known_categories = { 'OpenDaylight': 'Network', 'createServiceInstance': 'Network', 'addGloboDnsHost': 'Network', - 'createTungstenFabricController': 'Tungsten', 'createTungstenFabricProvider': 'Tungsten', - 'deleteTungstenFabricProvider': 'Tungsten', 'listTungstenFabricProviders': 'Tungsten', - 'getTungstenFabricProviders': 'Tungsten', 'configTungstenFabricService': 'Tungsten', 'createTungstenFabricPublicNetwork': 'Tungsten', 'synchronizeTungstenFabricData': 'Tungsten', @@ -119,46 +116,21 @@ known_categories = { 'createTungstenFabricFirewallRule': 'Tungsten', 'createTungstenFabricServiceGroup': 'Tungsten', 'createTungstenFabricAddressGroup': 'Tungsten', - 'createTungstenFabricInterfaceRouteTable': 'Tungsten', - 'createTungstenFabricNetworkRouteTable': 'Tungsten', 'createTungstenFabricLogicalRouter': 'Tungsten', - 'createTungstenFabricRoutingPolicy': 'Tungsten', - 'addTungstenFabricFirewallPolicy': 'Tungsten', - 'addTungstenFabricFirewallRule': 'Tungsten', - 'addTungstenFabricRouteTableToInterface': 'Tungsten', - 'addTungstenFabricRouteTableToNetwork': 'Tungsten', - 'addTungstenFabricInterfaceStaticRoute': 'Tungsten', - 'addTungstenFabricNetworkStaticRoute': 'Tungsten', 'addTungstenFabricNetworkGatewayToLogicalRouter': 'Tungsten', - 'addTungstenFabricRoutingPolicyTerm': 'Tungsten', 'listTungstenFabricApplicationPolicySet': 'Tungsten', 'listTungstenFabricFirewallPolicy': 'Tungsten', 'listTungstenFabricFirewallRule': 'Tungsten', 'listTungstenFabricServiceGroup': 'Tungsten', 'listTungstenFabricAddressGroup': 'Tungsten', - 'listTungstenFabricInterfaceRouteTable': 'Tungsten', - 'listTungstenFabricNetworkRouteTable': 'Tungsten', - 'listTungstenFabricInterfaceStaticRoute': 'Tungsten', - 'listTungstenFabricNetworkStaticRoute': 'Tungsten', 'listTungstenFabricLogicalRouter': 'Tungsten', - 'listTungstenFabricRoutingPolicy': 'Tungsten', 'deleteTungstenFabricApplicationPolicySet': 'Tungsten', 'deleteTungstenFabricFirewallPolicy': 'Tungsten', 'deleteTungstenFabricFirewallRule': 'Tungsten', 'deleteTungstenFabricAddressGroup': 'Tungsten', 'deleteTungstenFabricServiceGroup': 'Tungsten', 'deleteTungstenFabricLogicalRouter': 'Tungsten', - 'removeTungstenFabricFirewallPolicy': 'Tungsten', - 'removeTungstenFabricFirewallRule': 'Tungsten', - 'removeTungstenFabricInterfaceRouteTable': 'Tungsten', - 'removeTungstenFabricNetworkRouteTable': 'Tungsten', - 'removeTungstenFabricInterfaceStaticRoute': 'Tungsten', - 'removeTungstenFabricNetworkStaticRoute': 'Tungsten', - 'removeTungstenFabricRouteTableFromInterface': 'Tungsten', - 'removeTungstenFabricRouteTableFromNetwork': 'Tungsten', 'removeTungstenFabricNetworkGatewayFromLogicalRouter': 'Tungsten', - 'removeTungstenFabricRoutingPolicy': 'Tungsten', - 'removeTungstenFabricRoutingPolicyTerm': 'Tungsten', 'updateTungstenFabricLBHealthMonitor': 'Tungsten', 'listTungstenFabricLBHealthMonitor': 'Tungsten', 'Vpn': 'VPN', diff --git a/ui/src/config/section/network.js b/ui/src/config/section/network.js index 33186f1330b..5e197181c7a 100644 --- a/ui/src/config/section/network.js +++ b/ui/src/config/section/network.js @@ -76,18 +76,6 @@ export default { name: 'guest.ip.range', component: shallowRef(defineAsyncComponent(() => import('@/views/network/GuestIpRanges.vue'))), show: (record) => { return 'listVlanIpRanges' in store.getters.apis && (record.type === 'Shared' || (record.service && record.service.filter(x => x.name === 'SourceNat').count === 0)) } - }, { - name: 'tungsten.router.table', - component: shallowRef(defineAsyncComponent(() => import('@/views/network/tungsten/NetworkRouterTableTab.vue'))), - show: (record) => { - return ('listTungstenFabricNetworkRouteTable' in store.getters.apis) && (record.broadcasturi === 'tf://tf' && record.type !== 'Shared') - } - }, { - name: 'tungsten.routing.polices', - component: shallowRef(defineAsyncComponent(() => import('@/views/network/tungsten/NetworkRoutingPolicyTab.vue'))), - show: (record) => { - return ('listTungstenFabricRoutingPolicy' in store.getters.apis) && (record.broadcasturi === 'tf://tf' && record.type !== 'Shared') - } }, { name: 'network.policy', component: shallowRef(defineAsyncComponent(() => import('@/views/network/tungsten/NetworkPolicyTab.vue'))), @@ -798,78 +786,6 @@ export default { } ] }, - { - name: 'tungstennetworkroutertable', - title: 'label.tungsten.network.router.table', - icon: shallowRef(tungsten), - hidden: true, - permission: ['listTungstenFabricNetworkRouteTable'], - columns: ['name', 'zonename'], - details: ['uuid', 'name', 'zonename'], - tabs: [ - { - name: 'details', - component: shallowRef(defineAsyncComponent(() => import('@/components/view/DetailsTab.vue'))) - }, - { - name: 'tungsten.static.routes', - component: shallowRef(defineAsyncComponent(() => import('@/views/network/tungsten/TungstenNetworkStaticRoute.vue'))) - } - ], - actions: [ - { - api: 'removeTungstenFabricNetworkRouteTable', - icon: 'delete-outlined', - label: 'label.remove.network.route.table', - message: 'label.confirm.remove.network.route.table', - dataView: true, - mapping: { - tungstennetworkroutetableuuid: { - value: (record) => { return record.uuid } - }, - zoneid: { - value: (record) => { return record.zoneid } - } - } - } - ] - }, - { - name: 'tungsteninterfaceroutertable', - title: 'label.tungsten.interface.router.table', - icon: shallowRef(tungsten), - hidden: true, - permission: ['listTungstenFabricInterfaceRouteTable'], - columns: ['name', 'zonename'], - details: ['uuid', 'name', 'zonename'], - tabs: [ - { - name: 'details', - component: shallowRef(defineAsyncComponent(() => import('@/components/view/DetailsTab.vue'))) - }, - { - name: 'tungsten.static.routes', - component: shallowRef(defineAsyncComponent(() => import('@/views/network/tungsten/TungstenInterfaceStaticRoute.vue'))) - } - ], - actions: [ - { - api: 'removeTungstenFabricInterfaceRouteTable', - icon: 'delete-outlined', - label: 'label.remove.interface.route.table', - message: 'label.confirm.remove.interface.route.table', - dataView: true, - mapping: { - tungsteninterfaceroutetableuuid: { - value: (record) => { return record.uuid } - }, - zoneid: { - value: (record) => { return record.zoneid } - } - } - } - ] - }, { name: 'tungstenpolicy', title: 'label.network.policy', @@ -950,42 +866,6 @@ export default { } ] }, - { - name: 'tungstenroutingpolicy', - title: 'label.routing.policy', - icon: shallowRef(tungsten), - hidden: true, - permission: ['listTungstenFabricRoutingPolicy'], - columns: ['name', 'zonename'], - details: ['uuid', 'name', 'zonename'], - tabs: [ - { - name: 'details', - component: shallowRef(defineAsyncComponent(() => import('@/components/view/DetailsTab.vue'))) - }, - { - name: 'routing.policy.terms', - component: shallowRef(defineAsyncComponent(() => import('@/views/network/tungsten/RoutingPolicyTermsTab.vue'))) - } - ], - actions: [ - { - api: 'removeTungstenFabricRoutingPolicy', - icon: 'delete-outlined', - label: 'label.remove.routing.policy', - message: 'message.confirm.remove.routing.policy', - dataView: true, - mapping: { - tungstenroutingpolicyuuid: { - value: (record) => { return record.uuid } - }, - zoneid: { - value: (record) => { return record.zoneid } - } - } - } - ] - }, { name: 'tungstenfirewallpolicy', title: 'label.firewall.policy', diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue index 2edae41fbc5..2b1572b1c16 100644 --- a/ui/src/views/compute/InstanceTab.vue +++ b/ui/src/views/compute/InstanceTab.vue @@ -74,18 +74,6 @@ icon="environment-outlined" :disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))" @onClick="onAcquireSecondaryIPAddress(record)" /> - <tooltip-button - v-if="('addTungstenFabricRouteTableToInterface' in $store.getters.apis) && checkTungstenZone(record.nic)" - tooltipPlacement="bottom" - :tooltip="$t('label.add.router.table.to.instance')" - icon="plus-outlined" - @onClick="onShowRouterTable(record.nic, 'ADD')" /> - <tooltip-button - v-if="('removeTungstenFabricRouteTableFromInterface' in $store.getters.apis) && checkTungstenZone(record.nic)" - tooltipPlacement="bottom" - :tooltip="$t('label.action.remove.router.table.from.interface')" - icon="close-outlined" - @onClick="onShowRouterTable(record.nic, 'DEL')" /> <a-popconfirm :title="$t('message.network.removenic')" @confirm="removeNIC(record.nic)" @@ -160,7 +148,7 @@ showSearch optionFilterProp="label" :filterOption="(input, option) => { - return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 + return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 }" > <a-select-option v-for="network in addNetworkData.allNetworks" @@ -289,51 +277,11 @@ </a-list> </a-modal> - <a-modal - :visible="showRouterTable" - :title="routerTableTitle" - :maskClosable="false" - :footer="null" - :closable="false" - class="wide-modal" - @cancel="closeModals" - > - <a-alert v-if="routerTableType === 'ADD'" type="warning" :message="$t('message.confirm.add.router.table.to.instance')"></a-alert> - <a-alert v-else type="warning" :message="$t('message.confirm.remove.router.table.to.instance')"></a-alert> - - <div v-ctrl-enter="submitRouterTable"> - <a-form - :ref="routerTableRef" - :model="formRouterTable" - :rules="routerTableRules" - layout="vertical"> - <a-form-item name="tungstenRouteTable" ref="tungstenRouteTable" :label="$t('label.interface.router.table')"> - <a-select - v-model:value="formRouterTable.tungstenRouteTable" - v-focus="true" - showSearch - optionFilterProp="label" - :filterOption="(input, option) => { - return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 - }" - :loading="routerTables.loading"> - <a-select-option v-for="router in routerTables.opts" :key="router.uuid">{{ router.name }}</a-select-option> - </a-select> - </a-form-item> - - <div :span="24" class="action-button"> - <a-button :loading="routerTableLoading" @click="closeModals">{{ $t('label.cancel') }}</a-button> - <a-button :loading="routerTableLoading" type="primary" ref="submit" @click="submitRouterTable">{{ $t('label.ok') }}</a-button> - </div> - </a-form> - </div> - </a-modal> - </a-spin> </template> <script> -import { ref, reactive, toRaw } from 'vue' + import { api } from '@/api' import { mixinDevice } from '@/utils/mixin.js' import ResourceLayout from '@/layouts/ResourceLayout' @@ -401,23 +349,13 @@ export default { opts: [] }, annotations: [], - dataResource: {}, - showRouterTable: false, - routerTableParams: {}, - routerTables: { - loading: false, - opts: [] - }, - routerTableLoading: false, - routerTableType: '', - routerTableTitle: '' + dataResource: {} } }, created () { const self = this this.dataResource = this.resource this.vm = this.dataResource - this.initForm() this.fetchData() window.addEventListener('popstate', function () { self.setCurrentTab() @@ -442,16 +380,6 @@ export default { this.setCurrentTab() }, methods: { - initForm () { - this.routerTableRef = ref() - this.formRouterTable = reactive({}) - this.routerTableRules = reactive({ - tungstenRouteTable: [{ required: true, message: this.$t('message.error.select') }] - }) - }, - checkTungstenZone (record) { - return record?.isolationuri === 'tf://tf' && record?.type !== 'Shared' - }, setCurrentTab () { this.currentTab = this.$route.query.tab ? this.$route.query.tab : 'details' }, @@ -536,12 +464,10 @@ export default { this.showAddNetworkModal = false this.showUpdateIpModal = false this.showSecondaryIpModal = false - this.showRouterTable = false this.addNetworkData.network = '' this.addNetworkData.ip = '' this.editIpAddressValue = '' this.newSecondaryIp = '' - this.routerTableParams = {} }, onChangeIPAddress (record) { this.editNicResource = record.nic @@ -762,115 +688,6 @@ export default { this.loadingNic = false this.fetchSecondaryIPs(this.selectedNicId) }) - }, - onShowRouterTable (record, type) { - this.showRouterTable = true - this.routerTableParams.tungstenvminterfaceuuid = record.id - this.routerTables.loading = true - this.routerTables.opts = [] - this.routerTableType = type - if (this.routerTableType === 'DEL') { - this.routerTableTitle = this.$t('label.action.remove.router.table.from.interface') - } else { - this.routerTableTitle = this.$t('label.add.router.table.to.instance') - } - - const params = {} - params.zoneid = this.dataResource.zoneid - params.tungstenvminterfaceuuid = record.id - params.isattachedtointerface = type === 'DEL' - api('listTungstenFabricInterfaceRouteTable', params).then(json => { - this.routerTables.opts = json?.listtungstenfabricinterfaceroutetableresponse?.interfaceroutetable || [] - this.formRouterTable.tungstenRouteTable = this.routerTables.opts[0]?.uuid || null - }).finally(() => { - this.routerTables.loading = false - }) - }, - submitRouterTable () { - if (this.routerTableType === 'DEL') { - this.removeRouterTable() - } else { - this.addRouterTable() - } - }, - addRouterTable () { - if (this.routerTableLoading) return - - this.routerTableRef.value.validate().then(() => { - const values = toRaw(this.formRouterTable) - - this.routerTableParams.zoneid = this.dataResource.zoneid - this.routerTableParams.tungsteninterfaceroutetableuuid = values.tungstenRouteTable - this.routerTableLoading = true - - api('addTungstenFabricRouteTableToInterface', this.routerTableParams).then(json => { - this.$pollJob({ - jobId: json.addtungstenfabricroutetabletointerfaceresponse.jobid, - title: this.$t('label.add.router.table.to.instance'), - successMessage: this.$t('message.success.add.router.table.to.instance'), - successMethod: () => { - this.closeModals() - this.parentFetchData() - }, - errorMessage: this.$t('message.add.router.table.to.instance.failed'), - errorMethod: () => { - this.closeModals() - this.parentFetchData() - }, - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.closeModals() - this.parentFetchData() - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { - this.closeModals() - this.routerTableLoading = false - }) - }).catch((error) => { - this.routerTableRef.value.scrollToField(error.errorFields[0].name) - }) - }, - removeRouterTable () { - if (this.routerTableLoading) return - this.routerTableRef.value.validate().then(() => { - const values = toRaw(this.formRouterTable) - - this.routerTableParams.zoneid = this.dataResource.zoneid - this.routerTableParams.tungsteninterfaceroutetableuuid = values.tungstenRouteTable - this.routerTableLoading = true - - api('removeTungstenFabricRouteTableFromInterface', this.routerTableParams).then(json => { - this.$pollJob({ - jobId: json.removetungstenfabricroutetablefrominterfaceresponse.jobid, - title: this.$t('label.action.remove.router.table.from.interface'), - successMessage: this.$t('message.success.remove.router.table.from.interface'), - successMethod: () => { - this.closeModals() - this.parentFetchData() - }, - errorMessage: this.$t('message.remove.router.table.from.interface.failed'), - errorMethod: () => { - this.closeModals() - this.parentFetchData() - }, - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.closeModals() - this.parentFetchData() - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { - this.closeModals() - this.routerTableLoading = false - }) - }).catch((error) => { - this.routerTableRef.value.scrollToField(error.errorFields[0].name) - }) } } } diff --git a/ui/src/views/network/tungsten/AddRoutingPolicy.vue b/ui/src/views/network/tungsten/AddRoutingPolicy.vue deleted file mode 100644 index 38e332f3f9c..00000000000 --- a/ui/src/views/network/tungsten/AddRoutingPolicy.vue +++ /dev/null @@ -1,328 +0,0 @@ -// 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"> - <a-steps - ref="zoneStep" - labelPlacement="vertical" - size="small" - :current="currentStep"> - <a-step - v-for="(item, index) in steps" - :key="item.name" - :title="$t(item.title)" - :ref="`step${index}`"> - </a-step> - </a-steps> - <a-form :ref="formRef" :model="form" :rules="rules" class="form-content" > - <div v-if="currentStep === 0"> - <a-form-item name="name" ref="name" :label="$t('label.name')" v-bind="formItemLayout"> - <a-input - v-model:value="form.name" - @change="(e) => changeFieldValue('name', e.target.value)"/> - </a-form-item> - </div> - <div v-else-if="currentStep === 1"> - <routing-policy-terms - :formModel="formModel" - :errors="errors" - @onChangeFields="onChangeFields" /> - </div> - <div v-else-if="currentStep === 2"> - <routing-policy-terms - :termThen="true" - :formModel="formModel" - :errors="errors" - @onChangeFields="onChangeFields" /> - </div> - <div v-else> - <a-alert type="info" :message="$t('message.add.tungsten.routing.policy.available')"></a-alert> - </div> - </a-form> - <div class="form-action" :span="24"> - <a-button @click="handleBack" class="button-back" v-if="currentStep > 0"> - {{ $t('label.previous') }} - </a-button> - <a-button ref="submit" type="primary" @click="handleNext" class="button-next"> - <poweroff-outlined v-if="currentStep === 3" /> - <span v-if="currentStep < 3">{{ $t('label.next') }}</span> - <span v-else>{{ $t('label.create.routing.policy') }}</span> - </a-button> - </div> - <a-modal - :visible="showError" - :title="`${$t('label.error')}!`" - :maskClosable="false" - :closable="true" - :footer="null" - @cancel="() => { showError = false }" - centered - > - <div v-ctrl-enter="() => { showError = false }"> - <span>{{ errorMessage }}</span> - <div :span="24" class="action-button"> - <a-button @click="showError = false">{{ $t('label.cancel') }}</a-button> - <a-button type="primary" ref="submit" @click="showError = false">{{ $t('label.ok') }}</a-button> - </div> - </div> - </a-modal> - </div> -</template> - -<script> -import { ref, reactive } from 'vue' -import { api } from '@/api' -import RoutingPolicyTerms from '@/views/network/tungsten/RoutingPolicyTerms' - -export default { - name: 'AddRoutingPolicy', - components: { RoutingPolicyTerms }, - props: { - resource: { - type: Object, - required: true - }, - loading: { - type: Boolean, - default: false - }, - action: { - type: Object, - default: () => {} - } - }, - data () { - return { - actionLoading: false, - formItemLayout: { - labelCol: { span: 8 }, - wrapperCol: { span: 12 } - }, - formModel: {}, - currentStep: 0, - steps: [{ - name: 'routingpolicy', - title: 'label.routing.policy' - }, { - name: 'routingpolicyterms', - title: 'label.routing.policy.terms' - }, { - name: 'routingpolicytermsthen', - title: 'label.routing.policy.terms.then' - }, { - name: 'finish', - title: 'label.finish' - }], - prefixList: [], - termsList: [], - errors: { - prefix: [], - termvalue: [] - }, - showError: false, - errorMessage: '' - } - }, - created () { - this.initForm() - }, - inject: ['onFetchData'], - methods: { - initForm () { - this.formRef = ref() - this.form = reactive({}) - this.rules = reactive({ - name: [{ required: true, message: this.$t('message.error.required.input') }] - }) - }, - handleBack () { - this.currentStep-- - }, - handleNext () { - this.formRef.value.validate().then(() => { - if (this.currentStep > 0) { - this.checkPolicyPrefix() - const valid = this.checkPolicyTermValues() - if (this.errors.prefix.length > 0 || this.errors.termvalue.length > 0) { - this.showError = true - this.errorMessage = this.$t('message.error.required.input') - return - } - if (!valid) { - this.showError = true - this.errorMessage = this.$t('message.error.routing.policy.term') - return - } - } - if (this.currentStep === 3) { - return this.handleSubmit() - } - this.currentStep++ - }) - }, - changeFieldValue (field, value) { - this.formModel[field] = value - }, - onChangeFields (formModel) { - this.formModel = { ...this.formModel, ...formModel } - this.prefixList = this.formModel?.prefixList || [] - this.termsList = this.formModel?.termsList || [] - }, - checkPolicyPrefix () { - this.errors.prefix = [] - this.prefixList.forEach((item, index) => { - if (!item.prefix) { - this.errors.prefix.push(index) - } - }) - }, - checkPolicyTermValues () { - let valid = true - this.errors.termvalue = [] - this.termsList.forEach((item, index) => { - if (!item.termvalue) { - this.errors.termvalue.push(index) - return true - } - - if (item.termvalue && item.termtype === 'action') { - return true - } - - if (!/^(\d+)([:])(\d+)$/.test(item.termvalue)) { - valid = false - } - }) - - return valid - }, - async handleSubmit () { - if (this.actionLoading) return - const params = {} - params.zoneid = this.resource.zoneid - params.name = this.formModel.name - - this.actionLoading = true - try { - const routingPolicy = await this.createTungstenFabricRoutingPolicy(params) - const routingPolicyTermParams = {} - routingPolicyTermParams.zoneid = this.resource.zoneid - routingPolicyTermParams.tungstenroutingpolicyuuid = routingPolicy.uuid - routingPolicyTermParams.tungstenroutingpolicyfromtermcommunities = this.formModel?.tungstenroutingpolicyfromtermcommunities?.join(',') || '' - routingPolicyTermParams.tungstenroutingpolicymatchall = this.formModel?.tungstenroutingpolicymatchall || false - routingPolicyTermParams.tungstenroutingpolicyprotocol = this.formModel?.tungstenroutingpolicyprotocol?.join(',') || '' - routingPolicyTermParams.tungstenroutingpolicyfromtermprefixlist = this.prefixList?.map(item => [item.prefix, item.prefixtype].join('&')).join(',') || '' - routingPolicyTermParams.tungstenroutingpolicythentermlist = this.termsList.map(item => { - if (item.termtype === 'action') { - return [item.termvalue, item.termtype, ' '].join('&') - } else { - return [' ', item.termtype, item.termvalue].join('&') - } - }).join(',') || '' - const jobId = await this.addTungstenFabricRoutingPolicyTerm(routingPolicyTermParams) - await this.$pollJob({ - jobId, - title: this.$t('label.create.tungsten.routing.policy'), - description: params.name, - catchMessage: this.$t('error.fetching.async.job.result'), - successMessage: `${this.$t('message.success.add.tungsten.routing.policy')} ${params.name}`, - successMethod: () => { - this.onFetchData() - }, - errorMethod: () => { - this.onFetchData() - }, - catchMethod: () => { - this.onFetchData() - }, - action: { - isFetchData: false - } - }) - this.$emit('close-action') - this.actionLoading = false - } catch (error) { - this.$notifyError(error) - this.$emit('close-action') - this.onFetchData() - this.actionLoading = false - } - }, - createTungstenFabricRoutingPolicy (params) { - return new Promise((resolve, reject) => { - api('createTungstenFabricRoutingPolicy', params).then(json => { - const routingPolicy = json?.createtungstenfabricroutingpolicyresponse?.routingpolicy - resolve(routingPolicy) - }).catch(error => { - reject(error) - }) - }) - }, - addTungstenFabricRoutingPolicyTerm (params) { - return new Promise((resolve, reject) => { - api('addTungstenFabricRoutingPolicyTerm', params).then(json => { - const jobId = json?.addtungstenfabricroutingpolicytermresponse?.jobid - resolve(jobId) - }).catch(error => { - reject(error) - }) - }) - } - } -} -</script> - -<style lang="less"> -.form { - width: 100%; - - @media (min-width: 1000px) { - width: 700px; - } - - .form-content { - background-color: inherit; - vertical-align: center; - padding: 8px; - padding-top: 16px; - margin-top: 8px; - overflow-y: auto; - - :deep(.has-error) { - .ant-form-explain { - text-align: left; - } - } - - :deep(.ant-form-item-control) { - text-align: left; - } - } - - .form-action { - position: relative; - margin-top: 16px; - height: 35px; - } - - .button-next { - position: absolute; - right: 0; - } -} -</style> diff --git a/ui/src/views/network/tungsten/LogicalRouterTab.vue b/ui/src/views/network/tungsten/LogicalRouterTab.vue index cd7c8feee03..60b3cfcfacc 100644 --- a/ui/src/views/network/tungsten/LogicalRouterTab.vue +++ b/ui/src/views/network/tungsten/LogicalRouterTab.vue @@ -32,23 +32,6 @@ :dataSource="dataSource" :rowKey="(item, index) => index" :pagination="false"> - <template #action="{ record }"> - <a-popconfirm - v-if="'removeTungstenFabricRouteTableFromNetwork' in $store.getters.apis" - placement="topRight" - :title="$t('message.action.remove.logical.router')" - :ok-text="$t('label.yes')" - :cancel-text="$t('label.no')" - :loading="deleteLoading" - @confirm="deleteLogicalRouter(record)" - > - <tooltip-button - :tooltip="$t('label.action.remove.logical.router')" - danger - type="primary" - icon="delete-outlined" /> - </a-popconfirm> - </template> </a-table> <div style="display: block; text-align: right; margin-top: 10px;"> <a-pagination @@ -254,39 +237,6 @@ export default { }).finally(() => { this.submitLoading = false }) - }, - deleteLogicalRouter (record) { - if (this.deleteLoading) return - this.deleteLoading = true - const params = {} - params.zoneid = this.resource.zoneid - params.networkuuid = this.resource.id - params.logicalrouteruuid = record.uuid - api('removeTungstenFabricNetworkGatewayFromLogicalRouter', params).then(json => { - const jobId = json?.removetungstenfabricnetworkgatewayfromlogicalrouterresponse?.jobid - this.$pollJob({ - jobId, - title: this.$t('label.action.remove.logical.router'), - description: record.name || record.uuid, - successMessage: `${this.$t('message.success.remove.logical.router')} ${record.name || record.uuid}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.remove.logical.router'), - errorMethod: () => { - this.fetchData() - }, - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.deleteLoading = false }) } } } diff --git a/ui/src/views/network/tungsten/NetworkRouterTableTab.vue b/ui/src/views/network/tungsten/NetworkRouterTableTab.vue deleted file mode 100644 index 4afd0775d40..00000000000 --- a/ui/src/views/network/tungsten/NetworkRouterTableTab.vue +++ /dev/null @@ -1,290 +0,0 @@ -// 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-button - :disabled="!('addTungstenFabricRouteTableToNetwork' in $store.getters.apis)" - type="dashed" - style="width: 100%; margin-bottom: 15px" - @click="onShowAction"> - <template #icon><plus-outlined /></template> - {{ $t('label.add.tungsten.router.table') }} - </a-button> - <a-table - size="small" - :columns="columns" - :loading="loading || fetchLoading" - :dataSource="dataSource" - :rowKey="item => item.uuid" - :pagination="false"> - <template #action="{ record }"> - <a-popconfirm - v-if="'removeTungstenFabricRouteTableFromNetwork' in $store.getters.apis" - placement="topRight" - :title="$t('message.action.delete.tungsten.router.table')" - :ok-text="$t('label.yes')" - :cancel-text="$t('label.no')" - :loading="deleteLoading" - @confirm="deleteRouterTable(record)" - > - <tooltip-button - :tooltip="$t('label.action.delete.tungsten.router.table')" - danger - type="primary" - icon="delete-outlined" /> - </a-popconfirm> - </template> - </a-table> - - <div style="display: block; text-align: right; margin-top: 10px;"> - <a-pagination - size="small" - :current="page" - :pageSize="pageSize" - :total="itemCount" - :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`" - :pageSizeOptions="pageSizeOptions" - @change="onChangePage" - @showSizeChange="onChangePageSize" - showSizeChanger> - <template #buildOptionText="props"> - <span>{{ props.value }} / {{ $t('label.page') }}</span> - </template> - </a-pagination> - </div> - - <a-modal - v-if="showAction" - :visible="showAction" - :title="$t('label.add.tungsten.router.table')" - :maskClosable="false" - :footer="null" - @cancel="showAction = false"> - <div v-ctrl-enter="handleSubmit"> - <a-form :ref="formRef" :model="form" :rules="rules" layout="vertical"> - <a-form-item name="tungstenRouteTable" ref="tungstenRouteTable" :label="$t('label.tungsten.network.router.table')"> - <a-select - :loading="networks.loading" - v-model:value="form.tungstenRouteTable"> - <a-select-option v-for="network in networks.opts" :key="network.uuid">{{ network.name }}</a-select-option> - </a-select> - </a-form-item> - </a-form> - - <div :span="24" class="action-button"> - <a-button @click="() => { showAction = false }">{{ this.$t('label.cancel') }}</a-button> - <a-button type="primary" ref="submit" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button> - </div> - </div> - </a-modal> - </div> -</template> - -<script> -import { ref, reactive, toRaw } from 'vue' -import { api } from '@/api' -import { mixinDevice } from '@/utils/mixin.js' -import TooltipButton from '@/components/widgets/TooltipButton' - -export default { - name: 'NetworkRouterTableTab', - components: { TooltipButton }, - mixins: [mixinDevice], - props: { - resource: { - type: Object, - required: true - }, - loading: { - type: Boolean, - default: false - } - }, - data () { - return { - page: 1, - pageSize: this.$store.getters.defaultListViewPageSize, - itemCount: 0, - dataSource: [], - networks: { - loading: false, - opts: [] - }, - fetchLoading: false, - deleteLoading: false, - showAction: false, - columns: [{ - title: this.$t('label.name'), - dataIndex: 'name', - slots: { customRender: 'name' } - }, { - title: this.$t('label.action'), - dataIndex: 'action', - slots: { customRender: 'action' }, - width: 80 - }] - } - }, - computed: { - pageSizeOptions () { - const sizes = [20, 50, 100, 200, this.$store.getters.defaultListViewPageSize] - if (this.device !== 'desktop') { - sizes.unshift(10) - } - return [...new Set(sizes)].sort(function (a, b) { - return a - b - }).map(String) - } - }, - watch: { - resource () { - this.fetchData() - } - }, - created () { - this.initForm() - this.fetchData() - }, - methods: { - initForm () { - this.formRef = ref() - this.form = reactive({}) - this.rules = reactive({ - tungstenRouteTable: [{ required: true, message: this.$t('message.error.select') }] - }) - }, - fetchData () { - if (!this.resource.id || !this.resource.zoneid) return - const params = {} - params.zoneid = this.resource.zoneid - params.tungstennetworkuuid = this.resource.id - params.isattachedtonetwork = true - params.listAll = true - params.page = this.page - params.pagesize = this.pageSize - - this.fetchLoading = true - api('listTungstenFabricNetworkRouteTable', params).then(json => { - this.dataSource = json?.listtungstenfabricnetworkroutetableresponse?.routetable || [] - this.itemCount = json?.listtungstenfabricnetworkroutetableresponse?.count || 0 - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.fetchLoading = false }) - }, - onShowAction () { - const params = {} - params.zoneid = this.resource.zoneid - params.tungstennetworkuuid = this.resource.id - params.isattachedtonetwork = false - - this.showAction = true - this.networks.loading = true - this.networks.opts = [] - api('listTungstenFabricNetworkRouteTable', params).then(json => { - this.networks.opts = json?.listtungstenfabricnetworkroutetableresponse?.routetable || [] - this.form.tungstenRouteTable = this.networks.opts[0]?.uuid || undefined - }).finally(() => { - this.networks.loading = false - }) - }, - handleSubmit () { - this.formRef.value.validate().then(() => { - const values = toRaw(this.form) - - const params = {} - params.zoneid = this.resource.zoneid - params.networkuuid = this.resource.id - params.tungstennetworkroutetableuuid = values.tungstenRouteTable - - const routerTable = this.networks.opts.filter(network => network.uuid === values.tungstenRouteTable) - const routerTableName = routerTable[0]?.name || values.tungstenRouteTable - - api('addTungstenFabricRouteTableToNetwork', params).then(json => { - this.$pollJob({ - jobId: json.addtungstenfabricroutetabletonetworkresponse.jobid, - title: this.$t('label.add.tungsten.router.table'), - description: routerTableName, - successMessage: `${this.$t('message.success.add.tungsten.router.table')} ${routerTableName}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.add.tungsten.router.table'), - loadingMessage: this.$t('message.loading.add.tungsten.router.table'), - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { - this.showAction = false - }) - }).catch(error => { - this.formRef.value.scrollToField(error.errorFields[0].name) - }) - }, - deleteRouterTable (record) { - const params = {} - params.zoneid = this.resource.zoneid - params.networkuuid = this.resource.id - params.tungstennetworkroutetableuuid = record.uuid - - this.deleteLoading = true - api('removeTungstenFabricRouteTableFromNetwork', params).then(json => { - this.$pollJob({ - jobId: json.removetungstenfabricroutetablefromnetworkresponse.jobid, - title: this.$t('label.action.delete.tungsten.router.table'), - description: record.name || record.uuid, - successMessage: `${this.$t('message.success.delete.tungsten.router.table')} ${record.name || record.uuid}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.delete.tungsten.router.table'), - loadingMessage: this.$t('message.loading.delete.tungsten.router.table'), - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.deleteLoading = false }) - }, - onChangePage (page, pageSize) { - this.page = page - this.pageSize = pageSize - this.fetchData() - }, - onChangePageSize (page, pageSize) { - this.page = page - this.pageSize = pageSize - this.fetchData() - } - } -} -</script> - -<style scoped> -</style> diff --git a/ui/src/views/network/tungsten/NetworkRoutingPolicyTab.vue b/ui/src/views/network/tungsten/NetworkRoutingPolicyTab.vue deleted file mode 100644 index 29c6496c876..00000000000 --- a/ui/src/views/network/tungsten/NetworkRoutingPolicyTab.vue +++ /dev/null @@ -1,302 +0,0 @@ -// 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-button - :disabled="!('addTungstenFabricRoutingPolicyToNetwork' in $store.getters.apis)" - type="dashed" - style="width: 100%; margin-bottom: 15px" - @click="onShowAction"> - <template #icon><plus-outlined /></template> - {{ $t('label.add.tungsten.routing.policy') }} - </a-button> - <a-table - size="small" - :columns="columns" - :loading="loading || fetchLoading" - :dataSource="dataSource" - :rowKey="item => item.uuid" - :pagination="false"> - <template #action="{ record }"> - <a-popconfirm - v-if="'removeTungstenFabricRoutingPolicyFromNetwork' in $store.getters.apis" - placement="topRight" - :title="$t('message.action.remove.routing.policy')" - :ok-text="$t('label.yes')" - :cancel-text="$t('label.no')" - :loading="deleteLoading" - @confirm="deleteRoutingPolicy(record)" - > - <tooltip-button - :tooltip="$t('label.action.remove.tungsten.routing.policy')" - danger - type="primary" - icon="delete-outlined" /> - </a-popconfirm> - </template> - </a-table> - - <div style="display: block; text-align: right; margin-top: 10px;"> - <a-pagination - size="small" - :current="page" - :pageSize="pageSize" - :total="itemCount" - :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`" - :pageSizeOptions="pageSizeOptions" - @change="onChangePage" - @showSizeChange="onChangePageSize" - showSizeChanger> - <template #buildOptionText="props"> - <span>{{ props.value }} / {{ $t('label.page') }}</span> - </template> - </a-pagination> - </div> - - <a-modal - v-if="showAction" - :visible="showAction" - :title="$t('label.add.tungsten.routing.policy')" - :maskClosable="false" - :footer="null" - @cancel="showAction = false"> - <div v-ctrl-enter="handleSubmit"> - <a-form :ref="formRef" :model="form" :rules="rules" layout="vertical"> - <a-alert type="warning"> - <template #message> - <span v-html="$t('message.confirm.add.routing.policy')" /> - </template> - </a-alert> - <a-form-item name="tungstenRoutingPolicy" ref="tungstenRoutingPolicy" :label="$t('label.routing.policy')"> - <a-select - :loading="networks.loading" - v-model:value="form.tungstenRoutingPolicy"> - <a-select-option v-for="network in networks.opts" :key="network.uuid">{{ network.name }}</a-select-option> - </a-select> - </a-form-item> - </a-form> - - <div :span="24" class="action-button"> - <a-button @click="() => { showAction = false }">{{ $t('label.cancel') }}</a-button> - <a-button type="primary" ref="submit" @click="handleSubmit">{{ $t('label.ok') }}</a-button> - </div> - </div> - </a-modal> - </div> -</template> - -<script> -import { ref, reactive, toRaw } from 'vue' -import { api } from '@/api' -import { mixinDevice } from '@/utils/mixin.js' -import TooltipButton from '@/components/widgets/TooltipButton' - -export default { - name: 'NetworkRoutingPolicyTab', - components: { TooltipButton }, - mixins: [mixinDevice], - props: { - resource: { - type: Object, - required: true - }, - loading: { - type: Boolean, - default: false - } - }, - data () { - return { - page: 1, - pageSize: this.$store.getters.defaultListViewPageSize, - itemCount: 0, - dataSource: [], - networks: { - loading: false, - opts: [] - }, - fetchLoading: false, - deleteLoading: false, - submitLoading: false, - showAction: false, - columns: [{ - title: this.$t('label.name'), - dataIndex: 'name', - slots: { customRender: 'name' } - }, { - title: this.$t('label.action'), - dataIndex: 'action', - slots: { customRender: 'action' }, - width: 80 - }] - } - }, - computed: { - pageSizeOptions () { - const sizes = [20, 50, 100, 200, this.$store.getters.defaultListViewPageSize] - if (this.device !== 'desktop') { - sizes.unshift(10) - } - return [...new Set(sizes)].sort(function (a, b) { - return a - b - }).map(String) - } - }, - watch: { - resource () { - this.fetchData() - } - }, - created () { - this.initForm() - this.fetchData() - }, - methods: { - initForm () { - this.formRef = ref() - this.form = reactive({}) - this.rules = reactive({ - tungstenRoutingPolicy: [{ required: true, message: this.$t('message.error.select') }] - }) - }, - fetchData () { - if (!this.resource.id || !this.resource.zoneid) return - const params = {} - params.zoneid = this.resource.zoneid - params.tungstennetworkuuid = this.resource.id - params.isattachedtonetwork = false - params.listAll = true - params.page = this.page - params.pagesize = this.pageSize - - this.fetchLoading = true - api('listTungstenFabricRoutingPolicy', params).then(json => { - this.dataSource = json?.listtungstenfabricroutingpolicyresponse?.routingpolicy || [] - this.itemCount = json?.listtungstenfabricroutingpolicyresponse?.count || 0 - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.fetchLoading = false }) - }, - onShowAction () { - const params = {} - params.zoneid = this.resource.zoneid - params.tungstennetworkuuid = this.resource.id - params.isattachedtonetwork = false - - this.showAction = true - this.networks.loading = true - this.networks.opts = [] - api('listTungstenFabricRoutingPolicy', params).then(json => { - this.networks.opts = json?.listtungstenfabricroutingpolicyresponse?.routingpolicy || [] - this.form.tungstenRoutingPolicy = this.networks.opts[0]?.uuid || undefined - }).finally(() => { - this.networks.loading = false - }) - }, - handleSubmit () { - if (this.submitLoading) return - this.submitLoading = true - this.formRef.value.validate().then(() => { - const values = toRaw(this.form) - - const params = {} - params.zoneid = this.resource.zoneid - params.networkuuid = this.resource.id - params.tungstenroutingpolicyuuid = values.tungstenRoutingPolicy - - const network = this.networks.opts.filter(network => network.uuid === values.tungstenRoutingPolicy) - const resourceName = network[0]?.name || values.tungstenRoutingPolicy - - api('addTungstenFabricRoutingPolicyToNetwork', params).then(json => { - this.$pollJob({ - jobId: json.addtungstenfabricroutetabletonetworkresponse.jobid, - title: this.$t('label.add.tungsten.routing.policy'), - description: resourceName, - successMessage: `${this.$t('message.success.add.tungsten.routing.policy')} ${resourceName}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.add.tungsten.routing.policy'), - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { - this.showAction = false - this.submitLoading = false - }) - }).catch(error => { - this.formRef.value.scrollToField(error.errorFields[0].name) - }).finally(() => { - this.submitLoading = false - }) - }, - deleteRoutingPolicy (record) { - const params = {} - params.zoneid = this.resource.zoneid - params.networkuuid = this.resource.id - params.tungstennetworkroutetableuuid = record.uuid - - this.deleteLoading = true - api('removeTungstenFabricRoutingPolicyFromNetwork', params).then(json => { - this.$pollJob({ - jobId: json.removetungstenfabricroutingpolicyfromnetworkresponse.jobid, - title: this.$t('label.action.remove.tungsten.routing.policy'), - description: record.name || record.uuid, - successMessage: `${this.$t('message.success.remove.tungsten.routing.policy')} ${record.name || record.uuid}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.remove.tungsten.routing.policy'), - errorMethod: () => { - this.fetchData() - }, - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.deleteLoading = false }) - }, - onChangePage (page, pageSize) { - this.page = page - this.pageSize = pageSize - this.fetchData() - }, - onChangePageSize (page, pageSize) { - this.page = page - this.pageSize = pageSize - this.fetchData() - } - } -} -</script> - -<style scoped> -</style> diff --git a/ui/src/views/network/tungsten/RoutingPolicyTerms.vue b/ui/src/views/network/tungsten/RoutingPolicyTerms.vue deleted file mode 100644 index dc2d8f1b94a..00000000000 --- a/ui/src/views/network/tungsten/RoutingPolicyTerms.vue +++ /dev/null @@ -1,309 +0,0 @@ -// 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-form :ref="formRef" :model="form" :rules="rules"> - <a-form-item - v-if="!termThen" - name="tungstenroutingpolicyfromtermcommunities" - ref="tungstenroutingpolicyfromtermcommunities" - :label="$t('label.community')" - v-bind="formItemLayout"> - <a-select - mode="tags" - :token-separators="[',']" - v-model:value="form.tungstenroutingpolicyfromtermcommunities" - @change="(value) => changeFieldValue('tungstenroutingpolicyfromtermcommunities', value)"> - <a-select-option v-for="item in listCommunities" :key="item.id">{{ item.name }}</a-select-option> - </a-select> - </a-form-item> - <a-form-item - v-if="!termThen" - name="tungstenroutingpolicymatchall" - ref="tungstenroutingpolicymatchall" - :label="$t('label.matchall')" - v-bind="formItemLayout"> - <a-checkbox - v-model:checked="form.tungstenroutingpolicymatchall" - @change="(e) => changeFieldValue('tungstenroutingpolicymatchall', e.target.checked)" - /> - </a-form-item> - <a-form-item - v-if="!termThen" - name="tungstenroutingpolicyprotocol" - ref="tungstenroutingpolicyprotocol" - :label="$t('label.protocol')" - v-bind="formItemLayout"> - <a-select - mode="tags" - :token-separators="[',']" - v-model:value="form.tungstenroutingpolicyprotocol" - @change="(value) => changeFieldValue('tungstenroutingpolicyprotocol', value)"> - <a-select-option v-for="item in listCommunities" :key="item.id">{{ item.name }}</a-select-option> - </a-select> - </a-form-item> - - <a-table - v-if="!termThen" - bordered - :dataSource="prefixList" - :columns="prefixColumns" - :pagination="false" - :rowKey="(record, idx) => idx" - style="margin-bottom: 24px; width: 100%"> - <template #prefix="{ text, index }"> - <a-form-item - :hasFeedback="errors.prefix && errors.prefix.includes(index)" - :validateStatus="errors.prefix && errors.prefix.includes(index) ? 'error' : ''"> - <a-input :value="text" @change="e => onCellChange(index, 'prefix', e.target.value)" /> - </a-form-item> - </template> - <template #prefixtype="{ text, index }"> - <a-form-item> - <a-select - style="width: 100%" - :defaultValue="text" - @change="value => onCellChange(index, 'prefixtype', value)" - showSearch - :dropdownMatchSelectWidth="false" - optionFilterProp="label" - :filterOption="(input, option) => { - return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 - }" > - <a-select-option value="exact"> exact </a-select-option> - <a-select-option value="longer"> longer </a-select-option> - <a-select-option value="orlonger"> orlonger </a-select-option> - </a-select> - </a-form-item> - </template> - <template #action="{ index }"> - <tooltip-button - :tooltip="$t('label.delete.prefix')" - danger - type="primary" - icon="delete-outlined" - @onClick="() => deletePrefix(index)" /> - </template> - <template #footer> - <a-button @click="addNewPrefix"> - {{ $t('label.add.prefix') }} - </a-button> - </template> - </a-table> - - <a-table - v-if="termThen" - bordered - :dataSource="termThenList" - :columns="termThenColumns" - :pagination="false" - :rowKey="(record, idx) => idx" - style="margin-bottom: 24px; width: 100%"> - <template #termtype="{ text, index }"> - <a-form-item> - <a-select - style="width: 100%" - :defaultValue="text" - @change="value => onCellChange(index, 'termtype', value)" - showSearch - optionFilterProp="label" - :dropdownMatchSelectWidth="false" - :filterOption="(input, option) => { - return option.children[0].children.toLowerCase().indexOf(input.toLowerCase()) >= 0 - }" > - <a-select-option value="add community"> add community </a-select-option> - <a-select-option value="set community"> set community </a-select-option> - <a-select-option value="remove community"> remove community </a-select-option> - <a-select-option value="local-preference"> local-preference </a-select-option> - <a-select-option value="med"> med </a-select-option> - <a-select-option value="action"> action </a-select-option> - <a-select-option value="as-path"> as-path </a-select-option> - </a-select> - </a-form-item> - </template> - <template #termvalue="{ index }"> - <a-form-item - :hasFeedback="errors.termvalue && errors.termvalue.includes(index)" - :validateStatus="errors.termvalue && errors.termvalue.includes(index) ? 'error' : ''"> - <a-input - v-if="termThenList[index].termtype !== 'action'" - @change="e => onCellChange(index, 'termvalue', e.target.value)" /> - <a-select v-else value="default" @change="value => onCellChange(index, 'termvalue', value)"> - <a-select-option value="default">default</a-select-option> - <a-select-option value="accept">accept</a-select-option> - <a-select-option value="reject">reject</a-select-option> - <a-select-option value="next">next</a-select-option> - </a-select> - </a-form-item> - </template> - <template #action="{ index }"> - <tooltip-button - :tooltip="$t('label.delete.term')" - danger - type="primary" - icon="delete-outlined" - @onClick="() => deleteTerms(index)" /> - </template> - <template #footer> - <a-button @click="addNewTerms"> - {{ $t('label.add.term.then') }} - </a-button> - </template> - </a-table> - </a-form> - </div> -</template> - -<script> -import { ref, reactive } from 'vue' -import TooltipButton from '@/components/widgets/TooltipButton' - -export default { - name: 'RoutingPolicyTerms', - components: { TooltipButton }, - props: { - termThen: { - type: Boolean, - default: false - }, - formModel: { - type: Object, - default: () => {} - }, - errors: { - type: Object, - default: () => {} - } - }, - data () { - return { - formItemLayout: { - labelCol: { span: 8 }, - wrapperCol: { span: 12 } - }, - listCommunities: [], - prefixList: [], - prefixColumns: [ - { - title: this.$t('label.prefix'), - dataIndex: 'prefix', - slots: { customRender: 'prefix' } - }, - { - title: this.$t('label.prefix.type'), - dataIndex: 'prefixtype', - slots: { customRender: 'prefixtype' } - }, - { - slots: { customRender: 'action' }, - width: 50 - } - ], - termThenList: [], - termThenColumns: [ - { - title: this.$t('label.term.type'), - dataIndex: 'termtype', - slots: { customRender: 'termtype' } - }, - { - title: this.$t('label.action.value'), - dataIndex: 'termvalue', - slots: { customRender: 'termvalue' } - }, - { - slots: { customRender: 'action' }, - width: 50 - } - ] - } - }, - created () { - this.initForm() - this.prefixList = this.formModel?.prefixList || [] - this.termThenList = this.formModel?.termsList || [] - }, - methods: { - initForm () { - this.formRef = ref() - this.form = reactive({ - tungstenroutingpolicyfromtermcommunities: this.formModel?.tungstenroutingpolicyfromtermcommunities || [], - tungstenroutingpolicymatchall: this.formModel?.tungstenroutingpolicymatchall || false, - tungstenroutingpolicyprotocol: this.formModel?.tungstenroutingpolicyprotocol || [], - prefixList: this.formModel?.prefixList || [], - termThenList: this.formModel?.termsList || [] - }) - this.rules = reactive({ - tungstenroutingpolicyfromtermcommunities: [{ type: 'array' }], - tungstenroutingpolicyprotocol: [{ type: 'array' }] - }) - }, - addNewPrefix () { - this.prefixList.push({ - prefix: '', - prefixtype: 'exact' - }) - this.form.prefixList = this.prefixList - this.emitEvents() - }, - deletePrefix (index) { - this.prefixList.splice(index, 1) - this.form.prefixList = this.prefixList - this.emitEvents() - }, - addNewTerms () { - this.termThenList.push({ - termtype: 'add community', - termvalue: '' - }) - this.form.termsList = this.termThenList - this.emitEvents() - }, - deleteTerms (index) { - this.termThenList.splice(index, 1) - this.form.termsList = this.termThenList - this.emitEvents() - }, - changeFieldValue (field, value) { - this.form[field] = value - this.emitEvents() - }, - onCellChange (key, name, value) { - if (['termtype', 'termvalue'].includes(name)) { - if (name === 'termtype' && value === 'action') { - this.termThenList[key].termvalue = 'default' - } - if (name === 'termtype' && value !== 'action') { - this.termThenList[key].termvalue = '' - } - this.termThenList[key][name] = value - this.form.termsList = this.termThenList - this.emitEvents() - return - } - - this.prefixList[key][name] = value - this.form.prefixList = this.prefixList - this.emitEvents() - }, - emitEvents () { - this.$emit('onChangeFields', this.form) - } - } -} -</script> diff --git a/ui/src/views/network/tungsten/RoutingPolicyTermsTab.vue b/ui/src/views/network/tungsten/RoutingPolicyTermsTab.vue deleted file mode 100644 index 19738f184d6..00000000000 --- a/ui/src/views/network/tungsten/RoutingPolicyTermsTab.vue +++ /dev/null @@ -1,307 +0,0 @@ -// 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-button - :disabled="!('addTungstenFabricRoutingPolicyTerm' in $store.getters.apis)" - type="dashed" - style="width: 100%; margin-bottom: 15px" - @click="onShowAction"> - <template #icon><plus-outlined /></template> - {{ $t('label.add.routing.policy') }} - </a-button> - <a-table - size="small" - :loading="loading" - :columns="columns" - :dataSource="dataSource" - :rowKey="(item, index) => index" - :pagination="false"> - </a-table> - <a-modal - v-if="showAction" - :visible="showAction" - :closable="true" - :maskClosable="false" - :footer="null" - :title="$t('label.add.routing.policy')" - @cancel="closeAction" - style="top: 20px;" - width="auto" - centered> - <div class="form" v-ctrl-enter="handleSubmit"> - <a-steps - ref="zoneStep" - labelPlacement="vertical" - size="small" - :current="currentStep"> - <a-step - v-for="(item, index) in steps" - :key="item.name" - :title="$t(item.title)" - :ref="`step${index}`"> - </a-step> - </a-steps> - <a-form class="form-content"> - <div v-if="currentStep === 0"> - <routing-policy-terms - :formModel="formModel" - :errors="errors" - @onChangeFields="onChangeFields" /> - </div> - <div v-else-if="currentStep === 1"> - <routing-policy-terms - :termThen="true" - :formModel="formModel" - :errors="errors" - @onChangeFields="onChangeFields" /> - </div> - <div v-else> - <a-alert type="info" :message="$t('message.add.tungsten.routing.policy.available')"></a-alert> - </div> - </a-form> - <div class="form-action" :span="24"> - <a-button @click="handleBack" class="button-back" v-if="currentStep > 0"> - {{ $t('label.previous') }} - </a-button> - <a-button ref="submit" type="primary" @click="handleNext" class="button-next"> - <poweroff-outlined v-if="currentStep === 2" /> - <span v-if="currentStep < 2">{{ $t('label.next') }}</span> - <span v-else>{{ $t('label.create.routing.policy') }}</span> - </a-button> - </div> - </div> - </a-modal> - <a-modal - :visible="showError" - :title="`${$t('label.error')}!`" - :maskClosable="false" - :closable="true" - :footer="null" - @cancel="() => { showError = false }" - centered - > - <div v-ctrl-enter="() => { showError = false }"> - <span>{{ errorMessage }}</span> - <div :span="24" class="action-button"> - <a-button @click="showError = false">{{ $t('label.cancel') }}</a-button> - <a-button type="primary" ref="submit" @click="showError = false">{{ $t('label.ok') }}</a-button> - </div> - </div> - </a-modal> - </div> -</template> - -<script> -import { api } from '@/api' -import RoutingPolicyTerms from '@/views/network/tungsten/RoutingPolicyTerms' - -export default { - name: 'RoutingPolicyTermsTab', - components: { RoutingPolicyTerms }, - props: { - resource: { - type: Object, - required: true - }, - loading: { - type: Boolean, - default: false - } - }, - data () { - return { - showAction: false, - showError: false, - formModel: {}, - currentStep: 0, - steps: [{ - name: 'routingpolicyterms', - title: 'label.routing.policy.terms' - }, { - name: 'routingpolicytermsthen', - title: 'label.routing.policy.terms.then' - }, { - name: 'finish', - title: 'label.finish' - }], - columns: [{ - title: this.$t('label.name'), - dataIndex: 'tungstenroutingpolicytermname' - }], - dataSource: [], - prefixList: [], - termsList: [], - zoneId: null, - errors: { - prefix: [], - termvalue: [] - }, - errorMessage: '' - } - }, - watch: { - resource () { - this.dataSource = this.resource?.tungstenroutingpolicyterm || [] - } - }, - created () { - this.zoneId = this.$route?.query?.zoneid || null - this.dataSource = this.resource?.tungstenroutingpolicyterm || [] - }, - methods: { - onShowAction () { - this.showAction = true - }, - onChangeFields (formModel) { - this.formModel = { ...this.formModel, ...formModel } - this.prefixList = this.formModel?.prefixList || [] - this.termsList = this.formModel?.termsList || [] - }, - closeAction () { - this.formModel = {} - this.showAction = false - }, - checkPolicyPrefix () { - this.errors.prefix = [] - this.prefixList.forEach((item, index) => { - if (!item.prefix) { - this.errors.prefix.push(index) - } - }) - }, - checkPolicyTermValues () { - let valid = true - this.errors.termvalue = [] - this.termsList.forEach((item, index) => { - if (!item.termvalue) { - this.errors.termvalue.push(index) - return true - } - - if (item.termvalue && item.termtype === 'action') { - return true - } - - if (!/^(\d+)([:])(\d+)$/.test(item.termvalue)) { - valid = false - } - }) - - return valid - }, - handleBack () { - this.currentStep-- - }, - handleNext () { - this.checkPolicyPrefix() - const valid = this.checkPolicyTermValues() - if (this.errors.prefix.length > 0 || this.errors.termvalue.length > 0) { - this.showError = true - this.errorMessage = this.$t('message.error.required.input') - return - } - if (!valid) { - this.showError = true - this.errorMessage = this.$t('message.error.routing.policy.term') - return - } - if (this.currentStep === 2) { - return this.handleSubmit() - } - this.currentStep++ - }, - async handleSubmit () { - const params = {} - params.zoneid = this.zoneId - params.tungstenroutingpolicyuuid = this.resource.uuid - params.tungstenroutingpolicyfromtermcommunities = this.formModel?.tungstenroutingpolicyfromtermcommunities?.join(',') || '' - params.tungstenroutingpolicymatchall = this.formModel?.tungstenroutingpolicymatchall || false - params.tungstenroutingpolicyprotocol = this.formModel?.tungstenroutingpolicyprotocol?.join(',') || '' - params.tungstenroutingpolicyfromtermprefixlist = this.prefixList.length > 0 ? this.prefixList.map(item => [item.prefix, item.prefixtype].join('&')).join(',') : '' - params.tungstenroutingpolicythentermlist = this.termsList.length > 0 ? this.termsList.map(item => { - if (item.termtype === 'action') { - return [item.termtype, item.termvalue, ' '].join('&') - } else { - return [' ', item.termtype, item.termvalue].join('&') - } - }).join(',') : '' - - const jobId = await this.addTungstenFabricRoutingPolicyTerm(params) - await this.$pollJob({ - jobId, - title: this.$t('label.add.routing.policy'), - description: this.resource.name, - catchMessage: this.$t('error.fetching.async.job.result'), - successMessage: `${this.$t('message.success.add.tungsten.routing.policy')} ${this.resource.name}` - }) - this.closeAction() - }, - addTungstenFabricRoutingPolicyTerm (params) { - return new Promise((resolve, reject) => { - api('addTungstenFabricRoutingPolicyTerm', params).then(json => { - const jobId = json?.addtungstenfabricroutingpolicytermresponse?.jobid - resolve(jobId) - }).catch(error => { - reject(error) - }) - }) - } - } -} -</script> - -<style scoped lang="less"> -.form { - width: 100%; - - @media (min-width: 1000px) { - width: 700px; - } - - .form-content { - background-color: inherit; - vertical-align: center; - padding: 8px; - padding-top: 16px; - margin-top: 8px; - overflow-y: auto; - - :deep(.has-error) { - .ant-form-explain { - text-align: left; - } - } - - :deep(.ant-form-item-control) { - text-align: left; - } - } - - .form-action { - position: relative; - margin-top: 16px; - height: 35px; - } - - .button-next { - position: absolute; - right: 0; - } -} -</style> diff --git a/ui/src/views/network/tungsten/TungstenInterfaceStaticRoute.vue b/ui/src/views/network/tungsten/TungstenInterfaceStaticRoute.vue deleted file mode 100644 index 8a2a2d0202a..00000000000 --- a/ui/src/views/network/tungsten/TungstenInterfaceStaticRoute.vue +++ /dev/null @@ -1,334 +0,0 @@ -// 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-button - :disabled="!('addTungstenFabricInterfaceStaticRoute' in $store.getters.apis)" - type="dashed" - style="width: 100%; margin-bottom: 15px" - @click="addInterfaceStaticRoute"> - <template #icon><plus-outlined /></template> - {{ $t('label.add.tungsten.interface.static.route') }} - </a-button> - <a-table - size="small" - :loading="loading || fetchLoading" - :columns="columns" - :dataSource="dataSource" - :rowKey="(item, index) => index" - :pagination="false"> - <template #action="{ record }"> - <a-popconfirm - v-if="'removeTungstenFabricInterfaceStaticRoute' in $store.getters.apis" - placement="topRight" - :title="$t('message.action.delete.interface.static.route')" - :ok-text="$t('label.yes')" - :cancel-text="$t('label.no')" - :loading="deleteLoading" - @confirm="deleteStaticRoute(record)" - > - <tooltip-button - :tooltip="$t('label.action.delete.interface.static.route')" - danger - type="primary" - icon="delete-outlined" /> - </a-popconfirm> - </template> - </a-table> - - <div style="display: block; text-align: right; margin-top: 10px;"> - <a-pagination - size="small" - :current="page" - :pageSize="pageSize" - :total="itemCount" - :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`" - :pageSizeOptions="pageSizeOptions" - @change="onChangePage" - @showSizeChange="onChangePageSize" - showSizeChanger> - <template #buildOptionText="props"> - <span>{{ props.value }} / {{ $t('label.page') }}</span> - </template> - </a-pagination> - </div> - - <a-modal - v-if="interfaceStaticRouteModal" - :visible="interfaceStaticRouteModal" - :title="$t('label.add.tungsten.network.static.route')" - :closable="true" - :footer="null" - @cancel="closeAction" - centered - width="450px"> - <div v-ctrl-enter="handleSubmit"> - <a-form :ref="formRef" :model="form" :rules="rules" layout="vertical"> - <a-form-item name="interfacerouteprefix" ref="interfacerouteprefix"> - <template #label> - <tooltip-label :title="$t('label.routeprefix')" :tooltip="apiParams.interfacerouteprefix.description"/> - </template> - <a-input - v-focus="true" - v-model:value="form.interfacerouteprefix" - :placeholder="apiParams.interfacerouteprefix.description"/> - </a-form-item> - <a-form-item name="interfacecommunities" ref="interfacecommunities"> - <template #label> - <tooltip-label :title="$t('label.communities')" :tooltip="apiParams.interfacecommunities.description"/> - </template> - <a-select - mode="tags" - :token-separators="[',']" - v-model:value="form.interfacecommunities" - :placeholder="apiParams.interfacecommunities.description"> - <a-select-option v-for="item in listCommunities" :key="item.id">{{ item.name }}</a-select-option> - </a-select> - </a-form-item> - - <div :span="24" class="action-button"> - <a-button :loading="actionLoading" @click="closeAction"> {{ this.$t('label.cancel') }}</a-button> - <a-button :loading="actionLoading" type="primary" @click="handleSubmit" ref="submit">{{ this.$t('label.ok') }}</a-button> - </div> - </a-form> - </div> - </a-modal> - </div> -</template> - -<script> -import { ref, reactive, toRaw } from 'vue' -import { api } from '@/api' -import { mixinDevice } from '@/utils/mixin.js' -import TooltipButton from '@/components/widgets/TooltipButton' -import TooltipLabel from '@/components/widgets/TooltipLabel' - -export default { - name: 'TungstenInterfaceStaticRoute', - components: { TooltipButton, TooltipLabel }, - mixins: [mixinDevice], - props: { - resource: { - type: Object, - required: true - }, - loading: { - type: Boolean, - default: false - } - }, - data () { - return { - zoneId: null, - fetchLoading: false, - deleteLoading: false, - actionLoading: false, - dataSource: [], - itemCount: 0, - page: 1, - pageSize: this.$store.getters.defaultListViewPageSize, - columns: [ - { - title: this.$t('label.routeprefix'), - dataIndex: 'routeprefix', - slots: { customRender: 'routeprefix' } - }, - { - title: this.$t('label.communities'), - dataIndex: 'communities', - slots: { customRender: 'communities' } - }, - { - title: this.$t('label.action'), - dataIndex: 'action', - slots: { customRender: 'action' }, - width: 80 - } - ], - interfaceStaticRouteModal: false, - listRouteNextHopType: [{ - id: 'ip-address', - description: 'ip-address' - }], - listCommunities: [{ - id: 'no-export', - name: 'no-export' - }, { - id: 'no-export-subconfed', - name: 'no-export-subconfed' - }, { - id: 'no-advertise', - name: 'no-advertise' - }, { - id: 'no-reoriginate', - name: 'no-reoriginate' - }] - } - }, - computed: { - pageSizeOptions () { - const sizes = [20, 50, 100, 200, this.$store.getters.defaultListViewPageSize] - if (this.device !== 'desktop') { - sizes.unshift(10) - } - return [...new Set(sizes)].sort(function (a, b) { - return a - b - }).map(String) - } - }, - watch: { - resource () { - this.fetchData() - } - }, - beforeCreate () { - this.apiParams = this.$getApiParams('addTungstenFabricInterfaceStaticRoute') - }, - created () { - this.initForm() - this.fetchData() - }, - methods: { - initForm () { - this.formRef = ref() - this.form = reactive({}) - this.rules = reactive({ - interfacerouteprefix: [{ required: true, message: this.$t('message.error.required.input') }], - interfacecommunities: [{ type: 'array' }] - }) - }, - fetchData () { - if (!this.resource.uuid || !('zoneid' in this.$route.query)) return - this.zoneId = this.$route.query.zoneid || null - - const params = {} - params.zoneid = this.zoneId - params.tungsteninterfaceroutetableuuid = this.resource.uuid - params.page = this.page - params.pagesize = this.pageSize - - this.dataSource = [] - this.fetchLoading = true - api('listTungstenFabricInterfaceStaticRoute', params).then(json => { - this.dataSource = json?.listtungstenfabricinterfacestaticrouteresponse?.interfacestaticroute || [] - this.itemCount = json?.listtungstenfabricinterfacestaticrouteresponse?.count || 0 - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.fetchLoading = false }) - }, - deleteStaticRoute (record) { - const params = {} - params.zoneid = this.zoneId - params.tungsteninterfaceroutetableuuid = this.resource.uuid - params.routeprefix = record.routeprefix - - this.deleteLoading = true - api('removeTungstenFabricInterfaceStaticRoute', params).then(json => { - this.$pollJob({ - jobId: json.removetungstenfabricinterfacestaticrouteresponse.jobid, - title: this.$t('label.action.delete.interface.static.route'), - description: record.routeprefix, - successMessage: `${this.$t('message.success.delete.interface.static.route')} ${record.routeprefix}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.delete.interface.static.route'), - errorMethod: () => { - this.fetchData() - }, - loadingMessage: this.$t('message.loading.delete.interface.static.route'), - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.deleteLoading = false }) - }, - addInterfaceStaticRoute () { - this.interfaceStaticRouteModal = true - }, - handleSubmit () { - this.formRef.value.validate().then(() => { - const values = toRaw(this.form) - - const params = {} - params.zoneid = this.zoneId - params.tungsteninterfaceroutetableuuid = this.resource.uuid - params.interfacerouteprefix = values.interfacerouteprefix - params.interfacecommunities = values.interfacecommunities ? values.interfacecommunities.join(',') : null - - this.actionLoading = true - api('addTungstenFabricInterfaceStaticRoute', params).then(json => { - this.$pollJob({ - jobId: json.addtungstenfabricinterfacestaticrouteresponse.jobid, - title: this.$t('label.add.tungsten.interface.static.route'), - description: values.routeprefix, - successMessage: `${this.$t('message.success.add.interface.static.route')} ${values.routeprefix}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.add.interface.static.route'), - errorMethod: () => { - this.fetchData() - }, - loadingMessage: this.$t('message.loading.add.interface.static.route'), - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { - this.actionLoading = false - this.closeAction() - }) - }).catch(error => { - this.formRef.value.scrollToField(error.errorFields[0].name) - }).finally(() => { - this.actionLoading = false - }) - }, - closeAction () { - this.interfaceStaticRouteModal = false - this.formRef.value.resetFields() - }, - onChangePage (page, pageSize) { - this.page = page - this.pageSize = pageSize - this.fetchData() - }, - onChangePageSize (page, pageSize) { - this.page = page - this.pageSize = pageSize - this.fetchData() - } - } -} -</script> - -<style scoped> -</style> diff --git a/ui/src/views/network/tungsten/TungstenNetworkStaticRoute.vue b/ui/src/views/network/tungsten/TungstenNetworkStaticRoute.vue deleted file mode 100644 index 9204dfcdab7..00000000000 --- a/ui/src/views/network/tungsten/TungstenNetworkStaticRoute.vue +++ /dev/null @@ -1,368 +0,0 @@ -// 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-button - :disabled="!('addTungstenFabricNetworkStaticRoute' in $store.getters.apis)" - type="dashed" - style="width: 100%; margin-bottom: 15px" - @click="addStaticRoute"> - <template #icon><plus-outlined /></template> - {{ $t('label.add.tungsten.network.static.route') }} - </a-button> - <a-table - size="small" - :loading="loading || fetchLoading" - :columns="columns" - :dataSource="dataSource" - :rowKey="(item, index) => index" - :pagination="false"> - <template #action="{ record }"> - <a-popconfirm - v-if="'removeTungstenFabricNetworkStaticRoute' in $store.getters.apis" - placement="topRight" - :title="$t('message.action.delete.tungsten.static.route')" - :ok-text="$t('label.yes')" - :cancel-text="$t('label.no')" - :loading="deleteLoading" - @confirm="deleteStaticRoute(record)" - > - <tooltip-button - :tooltip="$t('label.action.delete.tungsten.static.route')" - danger - type="primary" - icon="delete-outlined" /> - </a-popconfirm> - </template> - </a-table> - - <div style="display: block; text-align: right; margin-top: 10px;"> - <a-pagination - size="small" - :current="page" - :pageSize="pageSize" - :total="itemCount" - :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`" - :pageSizeOptions="pageSizeOptions" - @change="onChangePage" - @showSizeChange="onChangePageSize" - showSizeChanger> - <template #buildOptionText="props"> - <span>{{ props.value }} / {{ $t('label.page') }}</span> - </template> - </a-pagination> - </div> - - <a-modal - v-if="addStaticRouteModal" - :visible="addStaticRouteModal" - :title="$t('label.add.tungsten.network.static.route')" - :closable="true" - :footer="null" - @cancel="closeAction" - centered - width="450px"> - <div v-ctrl-enter="handleSubmit"> - <a-form :ref="formRef" :model="form" :rules="rules" layout="vertical"> - <a-form-item name="routeprefix" ref="routeprefix"> - <template #label> - <tooltip-label :title="$t('label.routeprefix')" :tooltip="apiParams.routeprefix.description"/> - </template> - <a-input - v-focus="true" - v-model:value="form.routeprefix" - :placeholder="apiParams.routeprefix.description"/> - </a-form-item> - <a-form-item name="routenexthop" ref="routenexthop"> - <template #label> - <tooltip-label :title="$t('label.routenexthop')" :tooltip="apiParams.routenexthop.description"/> - </template> - <a-input - v-model:value="form.routenexthop" - :placeholder="apiParams.routenexthop.description"/> - </a-form-item> - <a-form-item name="routenexthoptype" ref="routenexthoptype"> - <template #label> - <tooltip-label :title="$t('label.routenexthoptype')" :tooltip="apiParams.routenexthoptype.description"/> - </template> - <a-select - v-model:value="form.routenexthoptype" - :placeholder="apiParams.routenexthoptype.description"> - <a-select-option v-for="item in listRouteNextHopType" :key="item.id">{{ item.description }}</a-select-option> - </a-select> - </a-form-item> - <a-form-item name="communities" ref="communities"> - <template #label> - <tooltip-label :title="$t('label.communities')" :tooltip="apiParams.communities.description"/> - </template> - <a-select - mode="tags" - :token-separators="[',']" - v-model:value="form.communities" - :placeholder="apiParams.communities.description"> - <a-select-option v-for="item in listCommunities" :key="item.id">{{ item.name }}</a-select-option> - </a-select> - </a-form-item> - - <div :span="24" class="action-button"> - <a-button :loading="actionLoading" @click="closeAction"> {{ this.$t('label.cancel') }}</a-button> - <a-button :loading="actionLoading" type="primary" @click="handleSubmit" ref="submit">{{ this.$t('label.ok') }}</a-button> - </div> - </a-form> - </div> - </a-modal> - </div> -</template> - -<script> -import { ref, reactive, toRaw } from 'vue' -import { api } from '@/api' -import { mixinDevice } from '@/utils/mixin.js' -import TooltipButton from '@/components/widgets/TooltipButton' -import TooltipLabel from '@/components/widgets/TooltipLabel' - -export default { - name: 'TungstenNetworkStaticRoute', - components: { TooltipButton, TooltipLabel }, - mixins: [mixinDevice], - props: { - resource: { - type: Object, - required: true - }, - loading: { - type: Boolean, - default: false - } - }, - data () { - return { - zoneId: null, - fetchLoading: false, - deleteLoading: false, - actionLoading: false, - dataSource: [], - itemCount: 0, - page: 1, - pageSize: this.$store.getters.defaultListViewPageSize, - columns: [ - { - title: this.$t('label.routeprefix'), - dataIndex: 'routeprefix', - slots: { customRender: 'routeprefix' } - }, - { - title: this.$t('label.routenexthop'), - dataIndex: 'routenexthop', - slots: { customRender: 'routenexthop' } - }, - { - title: this.$t('label.routenexthoptype'), - dataIndex: 'routenexthoptype', - slots: { customRender: 'routenexthoptype' } - }, - { - title: this.$t('label.communities'), - dataIndex: 'communities', - slots: { customRender: 'communities' } - }, - { - title: this.$t('label.action'), - dataIndex: 'action', - slots: { customRender: 'action' }, - width: 80 - } - ], - addStaticRouteModal: false, - listRouteNextHopType: [{ - id: 'ip-address', - description: 'ip-address' - }], - listCommunities: [{ - id: 'no-export', - name: 'no-export' - }, { - id: 'no-export-subconfed', - name: 'no-export-subconfed' - }, { - id: 'no-advertise', - name: 'no-advertise' - }, { - id: 'no-reoriginate', - name: 'no-reoriginate' - }] - } - }, - computed: { - pageSizeOptions () { - const sizes = [20, 50, 100, 200, this.$store.getters.defaultListViewPageSize] - if (this.device !== 'desktop') { - sizes.unshift(10) - } - return [...new Set(sizes)].sort(function (a, b) { - return a - b - }).map(String) - } - }, - watch: { - resource () { - this.fetchData() - } - }, - beforeCreate () { - this.apiParams = this.$getApiParams('addTungstenFabricNetworkStaticRoute') - }, - created () { - this.initForm() - this.fetchData() - }, - methods: { - initForm () { - this.formRef = ref() - this.form = reactive({ - routenexthoptype: 'ip-address' - }) - this.rules = reactive({ - routeprefix: [{ required: true, message: this.$t('message.error.required.input') }], - routenexthop: [{ required: true, message: this.$t('message.error.required.input') }], - routenexthoptype: [{ required: true, message: this.$t('message.error.select') }], - communities: [{ type: 'array' }] - }) - }, - fetchData () { - if (!this.resource.uuid || !('zoneid' in this.$route.query)) return - this.zoneId = this.$route.query.zoneid || null - - const params = {} - params.zoneid = this.zoneId - params.tungstennetworkroutetableuuid = this.resource.uuid - params.page = this.page - params.pagesize = this.pageSize - - this.dataSource = [] - this.fetchLoading = true - api('listTungstenFabricNetworkStaticRoute', params).then(json => { - this.dataSource = json?.listtungstenfabricnetworkstaticrouteresponse?.networkstaticroute || [] - this.itemCount = json?.listtungstenfabricnetworkstaticrouteresponse?.count || 0 - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.fetchLoading = false }) - }, - deleteStaticRoute (record) { - const params = {} - params.zoneid = this.zoneId - params.tungstennetworkroutetableuuid = this.resource.uuid - params.routeprefix = record.routeprefix - - this.deleteLoading = true - api('removeTungstenFabricNetworkStaticRoute', params).then(json => { - this.$pollJob({ - jobId: json.removetungstenfabricnetworkstaticrouteresponse.jobid, - title: this.$t('label.action.delete.network.static.route'), - description: record.routeprefix, - successMessage: `${this.$t('message.success.delete.network.static.route')} ${record.routeprefix}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.delete.network.static.route'), - errorMethod: () => { - this.fetchData() - }, - loadingMessage: this.$t('message.loading.delete.network.static.route'), - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { this.deleteLoading = false }) - }, - addStaticRoute () { - this.addStaticRouteModal = true - }, - closeAction () { - this.addStaticRouteModal = false - this.formRef.value.resetFields() - }, - handleSubmit () { - this.formRef.value.validate().then(() => { - const values = toRaw(this.form) - - const params = {} - params.zoneid = this.zoneId - params.tungstennetworkroutetableuuid = this.resource.uuid - params.routeprefix = values.routeprefix - params.routenexthop = values.routenexthop - params.routenexthoptype = values.routenexthoptype - params.communities = values.communities ? values.communities.join(',') : null - - this.actionLoading = true - api('addTungstenFabricNetworkStaticRoute', params).then(json => { - this.$pollJob({ - jobId: json.addtungstenfabricnetworkstaticrouteresponse.jobid, - title: this.$t('label.add.tungsten.network.static.route'), - description: values.routeprefix, - successMessage: `${this.$t('message.success.add.network.static.route')} ${values.routeprefix}`, - successMethod: () => { - this.fetchData() - }, - errorMessage: this.$t('message.error.add.network.static.route'), - errorMethod: () => { - this.fetchData() - }, - loadingMessage: this.$t('message.loading.add.network.static.route'), - catchMessage: this.$t('error.fetching.async.job.result'), - catchMethod: () => { - this.fetchData() - }, - action: { - isFetchData: false - } - }) - }).catch(error => { - this.$notifyError(error) - }).finally(() => { - this.actionLoading = false - this.closeAction() - }) - }).catch(error => { - this.formRef.value.scrollToField(error.errorFields[0].name) - }).finally(() => { - this.actionLoading = false - }) - }, - onChangePage (page, pageSize) { - this.page = page - this.pageSize = pageSize - this.fetchData() - }, - onChangePageSize (page, pageSize) { - this.page = page - this.pageSize = pageSize - this.fetchData() - } - } -} -</script> - -<style scoped> -</style> diff --git a/ui/src/views/network/tungsten/TungstenNetworkTable.vue b/ui/src/views/network/tungsten/TungstenNetworkTable.vue index 7d075ff1702..7bb0e902ba3 100644 --- a/ui/src/views/network/tungsten/TungstenNetworkTable.vue +++ b/ui/src/views/network/tungsten/TungstenNetworkTable.vue @@ -31,11 +31,8 @@ :enabled="true" :resource="record" @exec-action="(action) => execAction(action, record)"/> --> - <router-link v-if="apiName === 'listTungstenFabricNetworkRouteTable'" :to="{ path: '/tungstennetworkroutertable/' + record.uuid, query: { zoneid: resource.zoneid } }" >{{ text }}</router-link> - <router-link v-else-if="apiName === 'listTungstenFabricInterfaceRouteTable'" :to="{ path: '/tungsteninterfaceroutertable/' + record.uuid, query: { zoneid: resource.zoneid } }" >{{ text }}</router-link> - <router-link v-else-if="apiName === 'listTungstenFabricPolicy'" :to="{ path: '/tungstenpolicy/' + record.uuid, query: { zoneid: resource.zoneid } }" >{{ text }}</router-link> + <router-link v-if="apiName === 'listTungstenFabricPolicy'" :to="{ path: '/tungstenpolicy/' + record.uuid, query: { zoneid: resource.zoneid } }" >{{ text }}</router-link> <router-link v-else-if="apiName === 'listTungstenFabricApplicationPolicySet'" :to="{ path: '/tungstenpolicyset/' + record.uuid, query: { zoneid: resource.zoneid } }" >{{ text }}</router-link> - <router-link v-else-if="apiName === 'listTungstenFabricRoutingPolicy'" :to="{ path: '/tungstenroutingpolicy/' + record.uuid, query: { zoneid: resource.zoneid } }" >{{ text }}</router-link> <span v-else>{{ text }}</span> </template> <template #tungstenvms="{ record }">
