This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
The following commit(s) were added to refs/heads/master by this push:
new b99e69a Adding guest networks in guest physical network tab (#764)
b99e69a is described below
commit b99e69ad1085d62fb1a150f78f3ad96120aeadef
Author: davidjumani <[email protected]>
AuthorDate: Tue Sep 29 20:32:11 2020 +0530
Adding guest networks in guest physical network tab (#764)
---
src/views/compute/wizard/NetworkSelection.vue | 2 +-
src/views/infra/network/IpRangesTabGuest.vue | 174 ++++++++++++++++++++++
src/views/infra/network/IpRangesTabManagement.vue | 4 +-
src/views/infra/network/IpRangesTabPublic.vue | 4 +-
src/views/infra/network/IpRangesTabStorage.vue | 6 +-
src/views/infra/network/TrafficTypesTab.vue | 8 +-
src/views/network/CreateIsolatedNetworkForm.vue | 13 ++
src/views/network/CreateL2NetworkForm.vue | 13 ++
src/views/network/CreateNetwork.vue | 11 ++
src/views/network/CreateSharedNetworkForm.vue | 13 ++
10 files changed, 242 insertions(+), 6 deletions(-)
diff --git a/src/views/compute/wizard/NetworkSelection.vue
b/src/views/compute/wizard/NetworkSelection.vue
index e3ea0be..ea04cbe 100644
--- a/src/views/compute/wizard/NetworkSelection.vue
+++ b/src/views/compute/wizard/NetworkSelection.vue
@@ -78,7 +78,7 @@
centered
width="auto">
<create-network
- :resource="{}"
+ :resource="{ zoneid: zoneId }"
@refresh-data="handleSearch"
@close-action="showCreateForm = false"
/>
diff --git a/src/views/infra/network/IpRangesTabGuest.vue
b/src/views/infra/network/IpRangesTabGuest.vue
new file mode 100644
index 0000000..6daeb03
--- /dev/null
+++ b/src/views/infra/network/IpRangesTabGuest.vue
@@ -0,0 +1,174 @@
+// 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>
+ <a-spin :spinning="componentLoading">
+ <a-button
+ :disabled="!('createNetwork' in this.$store.getters.apis)"
+ type="dashed"
+ icon="plus"
+ style="margin-bottom: 20px; width: 100%"
+ @click="handleOpenShowCreateForm">
+ {{ $t('label.add.guest.network') }}
+ </a-button>
+
+ <a-table
+ size="small"
+ style="overflow-y: auto"
+ :columns="columns"
+ :dataSource="items"
+ :rowKey="record => record.id"
+ :pagination="false"
+ >
+ </a-table>
+ <a-pagination
+ class="row-element pagination"
+ size="small"
+ style="overflow-y: auto"
+ :current="page"
+ :pageSize="pageSize"
+ :total="total"
+ :showTotal="total => `${$t('label.total')} ${total}
${$t('label.items')}`"
+ :pageSizeOptions="['10', '20', '40', '80', '100']"
+ @change="changePage"
+ @showSizeChange="changePageSize"
+ showSizeChanger>
+ <template slot="buildOptionText" slot-scope="props">
+ <span>{{ props.value }} / {{ $t('label.page') }}</span>
+ </template>
+ </a-pagination>
+
+ <a-modal
+ v-model="showCreateForm"
+ :title="$t('label.add.guest.network')"
+ :closable="true"
+ :maskClosable="false"
+ :footer="null"
+ @cancel="showCreateForm = false"
+ centered
+ width="auto">
+ <CreateNetwork :resource="{ zoneid: resource.zoneid }"/>
+ </a-modal>
+
+ </a-spin>
+</template>
+
+<script>
+import { api } from '@/api'
+import CreateNetwork from '@/views/network/CreateNetwork'
+
+export default {
+ name: 'IpRangesTabGuest',
+ components: {
+ CreateNetwork
+ },
+ props: {
+ resource: {
+ type: Object,
+ required: true
+ },
+ loading: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data () {
+ return {
+ componentLoading: false,
+ items: [],
+ total: 0,
+ showCreateForm: false,
+ page: 1,
+ pageSize: 10,
+ columns: [
+ {
+ title: this.$t('label.name'),
+ dataIndex: 'name'
+ },
+ {
+ title: this.$t('label.type'),
+ dataIndex: 'type'
+ },
+ {
+ title: this.$t('label.vlan'),
+ dataIndex: 'vlan'
+ },
+ {
+ title: this.$t('label.broadcasturi'),
+ dataIndex: 'broadcasturi'
+ },
+ {
+ title: this.$t('label.cidr'),
+ dataIndex: 'cidr'
+ },
+ {
+ title: this.$t('label.ip6cidr'),
+ dataIndex: 'ip6cidr'
+ }
+ ]
+ }
+ },
+ mounted () {
+ this.fetchData()
+ },
+ watch: {
+ network (newItem, oldItem) {
+ if (!newItem || !newItem.id) {
+ return
+ }
+ this.fetchData()
+ }
+ },
+ methods: {
+ fetchData () {
+ this.componentLoading = true
+ api('listNetworks', {
+ zoneid: this.resource.zoneid,
+ page: this.page,
+ pagesize: this.pageSize
+ }).then(response => {
+ console.log(response)
+ this.items = response.listnetworksresponse.network ?
response.listnetworksresponse.network : []
+ this.total = response.listnetworksresponse.count || 0
+ }).catch(error => {
+ this.$notifyError(error)
+ }).finally(() => {
+ this.componentLoading = false
+ })
+ },
+ handleOpenShowCreateForm () {
+ this.showCreateForm = true
+ },
+ changePage (page, pageSize) {
+ this.page = page
+ this.pageSize = pageSize
+ this.fetchData()
+ },
+ changePageSize (currentPage, pageSize) {
+ this.page = currentPage
+ this.pageSize = pageSize
+ this.fetchData()
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+ .pagination {
+ margin-top: 20px;
+ }
+</style>
diff --git a/src/views/infra/network/IpRangesTabManagement.vue
b/src/views/infra/network/IpRangesTabManagement.vue
index 748bff2..27a1b0c 100644
--- a/src/views/infra/network/IpRangesTabManagement.vue
+++ b/src/views/infra/network/IpRangesTabManagement.vue
@@ -57,7 +57,7 @@
style="overflow-y: auto"
:current="page"
:pageSize="pageSize"
- :total="items.length"
+ :total="total"
:showTotal="total => `${$t('label.total')} ${total}
${$t('label.items')}`"
:pageSizeOptions="['10', '20', '40', '80', '100']"
@change="changePage"
@@ -141,6 +141,7 @@ export default {
return {
componentLoading: false,
items: [],
+ total: 0,
domains: [],
domainsLoading: false,
addIpRangeModal: false,
@@ -210,6 +211,7 @@ export default {
pagesize: this.pageSize
}).then(response => {
this.items = []
+ this.total = response.listpodsresponse.count || 0
const pods = response.listpodsresponse.pod ?
response.listpodsresponse.pod : []
for (const pod of pods) {
if (pod && pod.startip && pod.startip.length > 0) {
diff --git a/src/views/infra/network/IpRangesTabPublic.vue
b/src/views/infra/network/IpRangesTabPublic.vue
index 2d6bad9..73fc228 100644
--- a/src/views/infra/network/IpRangesTabPublic.vue
+++ b/src/views/infra/network/IpRangesTabPublic.vue
@@ -76,7 +76,7 @@
style="overflow-y: auto"
:current="page"
:pageSize="pageSize"
- :total="items.length"
+ :total="total"
:showTotal="total => `${$t('label.total')} ${total}
${$t('label.items')}`"
:pageSizeOptions="['10', '20', '40', '80', '100']"
@change="changePage"
@@ -221,6 +221,7 @@ export default {
return {
componentLoading: false,
items: [],
+ total: 0,
selectedItem: null,
accountModal: false,
addAccountModal: false,
@@ -290,6 +291,7 @@ export default {
pagesize: this.pageSize
}).then(response => {
this.items = response.listvlaniprangesresponse.vlaniprange ?
response.listvlaniprangesresponse.vlaniprange : []
+ this.total = response.listvlaniprangesresponse.count || 0
}).catch(error => {
this.$notifyError(error)
}).finally(() => {
diff --git a/src/views/infra/network/IpRangesTabStorage.vue
b/src/views/infra/network/IpRangesTabStorage.vue
index c8bc311..8b38134 100644
--- a/src/views/infra/network/IpRangesTabStorage.vue
+++ b/src/views/infra/network/IpRangesTabStorage.vue
@@ -55,7 +55,7 @@
style="overflow-y: auto"
:current="page"
:pageSize="pageSize"
- :total="items.length"
+ :total="total"
:showTotal="total => `${$t('label.total')} ${total}
${$t('label.items')}`"
:pageSizeOptions="['10', '20', '40', '80', '100']"
@change="changePage"
@@ -136,6 +136,7 @@ export default {
return {
componentLoading: false,
items: [],
+ total: 0,
pods: [],
domains: [],
domainsLoading: false,
@@ -198,7 +199,8 @@ export default {
page: this.page,
pageSize: this.pageSize
}).then(response => {
- this.items =
response.liststoragenetworkiprangeresponse.storagenetworkiprange ?
response.liststoragenetworkiprangeresponse.storagenetworkiprange : []
+ this.items =
response.liststoragenetworkiprangeresponse.storagenetworkiprange || []
+ this.total = response.liststoragenetworkiprangeresponse.count || 0
}).catch(error => {
this.$notifyError(error)
}).finally(() => {
diff --git a/src/views/infra/network/TrafficTypesTab.vue
b/src/views/infra/network/TrafficTypesTab.vue
index 300511c..d7f6e93 100644
--- a/src/views/infra/network/TrafficTypesTab.vue
+++ b/src/views/infra/network/TrafficTypesTab.vue
@@ -26,6 +26,10 @@
<div><strong>{{ $t(type) }}</strong></div>
<div>{{ item[type] ||
$t('label.network.label.display.for.blank.value') }}</div>
</div>
+ <div v-if="item.traffictype === 'Guest'">
+ <a-divider />
+ <IpRangesTabGuest :resource="resource" :loading="loading" />
+ </div>
<div v-if="item.traffictype === 'Public'">
<div style="margin-bottom: 10px;">
<div><strong>{{ $t('label.traffictype') }}</strong></div>
@@ -57,13 +61,15 @@ import { mixinDevice } from '@/utils/mixin.js'
import IpRangesTabPublic from './IpRangesTabPublic'
import IpRangesTabManagement from './IpRangesTabManagement'
import IpRangesTabStorage from './IpRangesTabStorage'
+import IpRangesTabGuest from './IpRangesTabGuest'
export default {
name: 'TrafficTypesTab',
components: {
IpRangesTabPublic,
IpRangesTabManagement,
- IpRangesTabStorage
+ IpRangesTabStorage,
+ IpRangesTabGuest
},
mixins: [mixinDevice],
props: {
diff --git a/src/views/network/CreateIsolatedNetworkForm.vue
b/src/views/network/CreateIsolatedNetworkForm.vue
index dd29272..8c71469 100644
--- a/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/src/views/network/CreateIsolatedNetworkForm.vue
@@ -262,6 +262,10 @@ export default {
vpc: {
type: Object,
default: null
+ },
+ resource: {
+ type: Object,
+ default: () => { return {} }
}
},
data () {
@@ -282,6 +286,11 @@ export default {
accountVisible: this.isAdminOrDomainAdmin()
}
},
+ watch: {
+ resource (newItem, oldItem) {
+ this.fetchData()
+ }
+ },
beforeCreate () {
this.form = this.$form.createForm(this)
this.apiConfig = this.$store.getters.apis.createNetwork || {}
@@ -322,7 +331,11 @@ export default {
return key in obj && obj[key] != null && obj[key].length > 0
},
fetchZoneData () {
+ this.zones = []
const params = {}
+ if (this.resource.zoneid) {
+ params.id = this.resource.zoneid
+ }
params.listAll = true
this.zoneLoading = true
api('listZones', params).then(json => {
diff --git a/src/views/network/CreateL2NetworkForm.vue
b/src/views/network/CreateL2NetworkForm.vue
index e97c0d6..3146471 100644
--- a/src/views/network/CreateL2NetworkForm.vue
+++ b/src/views/network/CreateL2NetworkForm.vue
@@ -236,6 +236,10 @@ export default {
vpc: {
type: Object,
default: null
+ },
+ resource: {
+ type: Object,
+ default: () => { return {} }
}
},
data () {
@@ -254,6 +258,11 @@ export default {
isolatePvlanType: 'none'
}
},
+ watch: {
+ resource (newItem, oldItem) {
+ this.fetchData()
+ }
+ },
beforeCreate () {
this.form = this.$form.createForm(this)
this.apiConfig = this.$store.getters.apis.createNetwork || {}
@@ -297,7 +306,11 @@ export default {
return this.isValidValueForKey(obj, key) && obj[key].length > 0
},
fetchZoneData () {
+ this.zones = []
const params = {}
+ if (this.resource.zoneid) {
+ params.id = this.resource.zoneid
+ }
params.listAll = true
this.zoneLoading = true
api('listZones', params).then(json => {
diff --git a/src/views/network/CreateNetwork.vue
b/src/views/network/CreateNetwork.vue
index d350919..ed296ff 100644
--- a/src/views/network/CreateNetwork.vue
+++ b/src/views/network/CreateNetwork.vue
@@ -21,6 +21,7 @@
<a-tab-pane :tab="$t('label.isolated')" key="1"
v-if="this.isAdvancedZoneWithoutSGAvailable()">
<CreateIsolatedNetworkForm
:loading="loading"
+ :resource="resource"
@close-action="closeAction"
@refresh-data="refreshParent"
@refresh="handleRefresh"/>
@@ -28,6 +29,7 @@
<a-tab-pane :tab="$t('label.l2')" key="2">
<CreateL2NetworkForm
:loading="loading"
+ :resource="resource"
@close-action="closeAction"
@refresh-data="refreshParent"
@refresh="handleRefresh"/>
@@ -35,6 +37,7 @@
<a-tab-pane :tab="$t('label.shared')" key="3" v-if="this.isAdmin()">
<CreateSharedNetworkForm
:loading="loading"
+ :resource="resource"
@close-action="closeAction"
@refresh-data="refreshParent"
@refresh="handleRefresh"/>
@@ -70,6 +73,11 @@ export default {
actionZoneLoading: false
}
},
+ watch: {
+ resource (newItem, oldItem) {
+ this.fetchData()
+ }
+ },
mounted () {
this.fetchData()
},
@@ -83,6 +91,9 @@ export default {
},
fetchActionZoneData () {
const params = {}
+ if (this.resource && this.resource.zoneid) {
+ params.id = this.resource.zoneid
+ }
params.listAll = true
this.actionZonesLoading = true
api('listZones', params).then(json => {
diff --git a/src/views/network/CreateSharedNetworkForm.vue
b/src/views/network/CreateSharedNetworkForm.vue
index c698f49..20f5f02 100644
--- a/src/views/network/CreateSharedNetworkForm.vue
+++ b/src/views/network/CreateSharedNetworkForm.vue
@@ -432,6 +432,10 @@ export default {
physicalNetworks: {
type: Array,
default: null
+ },
+ resource: {
+ type: Object,
+ default: () => { return {} }
}
},
data () {
@@ -456,6 +460,11 @@ export default {
selectedProject: {}
}
},
+ watch: {
+ resource (newItem, oldItem) {
+ this.fetchData()
+ }
+ },
beforeCreate () {
this.form = this.$form.createForm(this)
this.apiConfig = this.$store.getters.apis.createNetwork || {}
@@ -499,6 +508,7 @@ export default {
return this.isValidValueForKey(obj, key) && obj[key].length > 0
},
fetchZoneData () {
+ this.zones = []
if (this.zone !== null) {
this.zones.push(this.zone)
if (this.arrayHasItems(this.zones)) {
@@ -509,6 +519,9 @@ export default {
}
} else {
const params = {}
+ if (this.resource.zoneid) {
+ params.id = this.resource.zoneid
+ }
params.listAll = true
this.zoneLoading = true
api('listZones', params).then(json => {
