mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
zone: Update physical network traffic labels (#884)
* update infra physical network traffic labels * add translation label * Use blank traffic label to placeholder instead set value * fix to reset the traffic label * Update src/views/infra/network/EditTrafficLabel.vue Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com> Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com> Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Hoang Nguyen
Rohit Yadav
parent
ea0802b4c8
commit
aba0f56e9c
@ -84,14 +84,14 @@ export default {
|
||||
{
|
||||
api: 'updatePhysicalNetwork',
|
||||
icon: 'edit',
|
||||
label: 'Update Physical Network',
|
||||
label: 'label.update.physical.network',
|
||||
dataView: true,
|
||||
args: ['vlan', 'tags']
|
||||
},
|
||||
{
|
||||
api: 'addTrafficType',
|
||||
icon: 'plus-square',
|
||||
label: 'Add Traffic Type',
|
||||
label: 'label.add.traffic.type',
|
||||
dataView: true,
|
||||
args: ['traffictype', 'physicalnetworkid', 'isolationmethod'],
|
||||
mapping: {
|
||||
@ -109,15 +109,10 @@ export default {
|
||||
{
|
||||
api: 'updateTrafficType',
|
||||
icon: 'branches',
|
||||
label: 'Update Traffic Labels',
|
||||
label: 'label.update.traffic.label',
|
||||
dataView: true,
|
||||
args: ['id', 'kvmnetworklabel', 'vmwarenetworklabel', 'xennetworklabel', 'hypervnetworklabel', 'ovm3networklabel'],
|
||||
mapping: {
|
||||
id: {
|
||||
api: 'listTrafficTypes',
|
||||
params: (record) => { return { physicalnetworkid: record.id } }
|
||||
}
|
||||
}
|
||||
popup: true,
|
||||
component: () => import('@/views/infra/network/EditTrafficLabel.vue')
|
||||
},
|
||||
{
|
||||
api: 'deletePhysicalNetwork',
|
||||
|
||||
@ -362,6 +362,7 @@
|
||||
"label.add.template": "Add Template",
|
||||
"label.add.to.group": "Add to group",
|
||||
"label.add.traffic": "Add Traffic",
|
||||
"label.add.traffic.type": "Add Traffic Type",
|
||||
"label.add.ucs.manager": "Add UCS Manager",
|
||||
"label.add.user": "Add User",
|
||||
"label.add.vlan": "Add VLAN",
|
||||
@ -2129,11 +2130,13 @@
|
||||
"label.unlimited": "Unlimited",
|
||||
"label.untagged": "Untagged",
|
||||
"label.update.instance.group": "Update Instance Group",
|
||||
"label.update.physical.network": "Update Physical Network",
|
||||
"label.update.project.resources": "Update project resources",
|
||||
"label.update.project.role": "Update project role",
|
||||
"label.update.ssl": " SSL Certificate",
|
||||
"label.update.ssl.cert": " SSL Certificate",
|
||||
"label.update.to": "updated to",
|
||||
"label.update.traffic.label": "Update Traffic Labels",
|
||||
"label.update.vmware.datacenter": "Update VMware Datacenter",
|
||||
"label.updating": "Updating",
|
||||
"label.upgrade.router.newer.template": "Upgrade Router to Use Newer Template",
|
||||
|
||||
235
ui/src/views/infra/network/EditTrafficLabel.vue
Normal file
235
ui/src/views/infra/network/EditTrafficLabel.vue
Normal file
@ -0,0 +1,235 @@
|
||||
// Licensed to the Apache Software Foundation (ASF) under one
|
||||
// or more contributor license agreements. See the NOTICE file
|
||||
// distributed with this work for additional information
|
||||
// regarding copyright ownership. The ASF licenses this file
|
||||
// to you under the Apache License, Version 2.0 (the
|
||||
// "License"); you may not use this file except in compliance
|
||||
// with the License. You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing,
|
||||
// software distributed under the License is distributed on an
|
||||
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
// KIND, either express or implied. See the License for the
|
||||
// specific language governing permissions and limitations
|
||||
// under the License.
|
||||
|
||||
<template>
|
||||
<div class="form-layout">
|
||||
<a-spin :spinning="loading">
|
||||
<a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.traffictype') }}
|
||||
<a-tooltip :title="apiParams.id.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-select
|
||||
v-decorator="['id', {
|
||||
initialValue: selectedType,
|
||||
rules: [{ required: true, message: $t('message.error.select') }] }]"
|
||||
:loading="typeLoading"
|
||||
:placeholder="apiParams.id.description"
|
||||
@change="onChangeTrafficType">
|
||||
<a-select-option v-for="type in trafficTypes" :key="type.id">
|
||||
{{ type.traffictype }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.kvmnetworklabel') }}
|
||||
<a-tooltip :title="apiParams.kvmnetworklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['kvmnetworklabel', {
|
||||
initialValue: trafficResource.kvmnetworklabel
|
||||
}]"
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.vmwarenetworklabel') }}
|
||||
<a-tooltip :title="apiParams.vmwarenetworklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['vmwarenetworklabel', {
|
||||
initialValue: trafficResource.vmwarenetworklabel
|
||||
}]"
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.xennetworklabel') }}
|
||||
<a-tooltip :title="apiParams.xennetworklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['xennetworklabel', {
|
||||
initialValue: trafficResource.xennetworklabel
|
||||
}]"
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.hypervnetworklabel') }}
|
||||
<a-tooltip :title="apiParams.hypervnetworklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['hypervnetworklabel', {
|
||||
initialValue: trafficResource.hypervnetworklabel
|
||||
}]"
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<span slot="label">
|
||||
{{ $t('label.ovm3networklabel') }}
|
||||
<a-tooltip :title="apiParams.ovm3networklabel.description">
|
||||
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
<a-input
|
||||
v-decorator="['ovm3networklabel', {
|
||||
initialValue: trafficResource.ovm3networklabel
|
||||
}]"
|
||||
:placeholder="$t('label.network.label.display.for.blank.value')" />
|
||||
</a-form-item>
|
||||
<div :span="24" class="action-button">
|
||||
<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
|
||||
<a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'EditTrafficLabel',
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
selectedType: undefined,
|
||||
typeLoading: false,
|
||||
traffictype: null,
|
||||
trafficTypes: [],
|
||||
trafficResource: {}
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.apiConfig = this.$store.getters.apis.updateTrafficType || {}
|
||||
this.apiParams = {}
|
||||
if (this.apiConfig.params) {
|
||||
this.apiConfig.params.forEach(param => {
|
||||
this.apiParams[param.name] = param
|
||||
})
|
||||
}
|
||||
},
|
||||
inject: ['parentFetchData'],
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.typeLoading = true
|
||||
|
||||
api('listTrafficTypes', { physicalnetworkid: this.resource.id })
|
||||
.then(json => {
|
||||
this.trafficTypes = json.listtraffictypesresponse.traffictype || []
|
||||
this.selectedType = this.trafficTypes[0].id || undefined
|
||||
this.trafficResource = this.trafficTypes[0] || {}
|
||||
this.traffictype = this.trafficTypes[0].traffictype || undefined
|
||||
})
|
||||
.catch(error => {
|
||||
this.$notification.error({
|
||||
message: `${this.$t('label.error')} ${error.response.status}`,
|
||||
description: error.response.data.errorresponse.errortext
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.typeLoading = false
|
||||
})
|
||||
},
|
||||
onChangeTrafficType (trafficId) {
|
||||
if (!trafficId) return
|
||||
this.trafficResource = this.trafficTypes.filter(item => item.id === trafficId)[0] || {}
|
||||
this.traffictype = this.trafficResource.traffictype || undefined
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (err) {
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
const params = {}
|
||||
for (const key in values) {
|
||||
params[key] = values[key]
|
||||
}
|
||||
const title = this.$t('label.update.traffic.label')
|
||||
const description = this.traffictype
|
||||
api('updateTrafficType', params).then(response => {
|
||||
this.$pollJob({
|
||||
jobId: response.updatetraffictyperesponse.jobid,
|
||||
successMethod: result => {
|
||||
this.$store.dispatch('AddAsyncJob', {
|
||||
title: title,
|
||||
description: description,
|
||||
jobid: response.updatetraffictyperesponse.jobid,
|
||||
status: this.$t('progress')
|
||||
})
|
||||
this.parentFetchData()
|
||||
},
|
||||
successMessage: `${this.$t('label.update.traffic.label')} ${this.traffictype} ${this.$t('label.success')}`,
|
||||
loadingMessage: `${title} ${this.$t('label.in.progress')}`,
|
||||
catchMessage: this.$t('error.fetching.async.job.result')
|
||||
})
|
||||
}).catch(error => {
|
||||
this.$notifyError(error)
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.closeAction()
|
||||
})
|
||||
})
|
||||
},
|
||||
closeAction () {
|
||||
this.$emit('close-action')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.form-layout {
|
||||
width: 80vw;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
.action-button {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user