Skip to content
This repository was archived by the owner on Jan 20, 2021. It is now read-only.

Commit 4c6cc6b

Browse files
davidjumanidavidjumani
committed
network: Adding GuestIpRanges tab
1 parent 0593302 commit 4c6cc6b

File tree

3 files changed

+243
-0
lines changed

3 files changed

+243
-0
lines changed

‎src/config/section/network.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ export default {
5353
name: 'virtual.routers',
5454
component: () => import('@/views/network/RoutersTab.vue'),
5555
show: (record) => { return (record.type === 'Isolated' || record.type === 'Shared') && 'listRouters' in store.getters.apis }
56+
}, {
57+
name: 'guest.ip.range',
58+
component: () => import('@/views/network/GuestIpRanges.vue'),
59+
show: (record) => { return 'listVlanIpRanges' in store.getters.apis && (record.type !== 'Isolated' || record.service.filter(x => x.name === 'SourceNat').count === 0) }
5660
}],
5761
actions: [
5862
{

‎src/views/network/CreateVlanIpRange.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Licensed to the Apache Software Foundation (ASF) under one
2+
// or more contributor license agreements. See the NOTICE file
3+
// distributed with this work for additional information
4+
// regarding copyright ownership. The ASF licenses this file
5+
// to you under the Apache License, Version 2.0 (the
6+
// "License"); you may not use this file except in compliance
7+
// with the License. You may obtain a copy of the License at
8+
//
9+
// http://www.apache.org/licenses/LICENSE-2.0
10+
//
11+
// Unless required by applicable law or agreed to in writing,
12+
// software distributed under the License is distributed on an
13+
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
// KIND, either express or implied. See the License for the
15+
// specific language governing permissions and limitations
16+
// under the License.
17+
18+
<template>
19+
<div class="form-layout">
20+
<a-spin :spinning="loading">
21+
<a-form
22+
:form="form"
23+
@submit="handleSubmit"
24+
layout="vertical">
25+
<a-form-item>
26+
<span slot="label">
27+
{{ $t('label.name') }}
28+
<a-tooltip :title="apiParams.name.gateway">
29+
<a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
30+
</a-tooltip>
31+
</span>
32+
<a-input
33+
v-decorator="['gateway', {
34+
rules: [{ required: true, message: $t('message.error.kubecluster.name') }]
35+
}]"
36+
:placeholder="apiParams.name.description"/>
37+
</a-form-item>
38+
</a-form>
39+
</a-spin>
40+
</div>
41+
</template>

‎src/views/network/GuestIpRanges.vue‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
// Licensed to the Apache Software Foundation (ASF) under one
2+
// or more contributor license agreements. See the NOTICE file
3+
// distributed with this work for additional information
4+
// regarding copyright ownership. The ASF licenses this file
5+
// to you under the Apache License, Version 2.0 (the
6+
// "License"); you may not use this file except in compliance
7+
// with the License. You may obtain a copy of the License at
8+
//
9+
// http://www.apache.org/licenses/LICENSE-2.0
10+
//
11+
// Unless required by applicable law or agreed to in writing,
12+
// software distributed under the License is distributed on an
13+
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
// KIND, either express or implied. See the License for the
15+
// specific language governing permissions and limitations
16+
// under the License.
17+
18+
<template>
19+
<div>
20+
<a-spin :spinning="fetchLoading">
21+
<a-button
22+
icon="plus"
23+
shape="round"
24+
style="float: right;margin-bottom: 10px; z-index: 8"
25+
@click="() => { showCreateForm = true }">
26+
{{ $t('label.add.ip.range') }}
27+
</a-button>
28+
<br />
29+
<br />
30+
31+
<a-table
32+
size="small"
33+
style="overflow-y: auto"
34+
:columns="columns"
35+
:dataSource="ipranges"
36+
:rowKey="item => item.id"
37+
:pagination="false" >
38+
39+
<template slot="action" slot-scope="text, record">
40+
<a-tooltip placement="bottom">
41+
<template slot="title">
42+
{{ $t('label.action.delete.ip.range') }}
43+
</template>
44+
<a-popconfirm
45+
:title="$t('message.confirm.remove.ip.range')"
46+
@confirm="removeIpRange(record.id)"
47+
:okText="$t('label.yes')"
48+
:cancelText="$t('label.no')" >
49+
<a-button
50+
type="danger"
51+
icon="delete"
52+
shape="circle" />
53+
</a-popconfirm>
54+
</a-tooltip>
55+
</template>
56+
57+
</a-table>
58+
<a-divider/>
59+
<a-pagination
60+
class="row-element pagination"
61+
size="small"
62+
:current="page"
63+
:pageSize="pageSize"
64+
:total="total"
65+
:showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
66+
:pageSizeOptions="['10', '20', '40', '80', '100']"
67+
@change="changePage"
68+
@showSizeChange="changePageSize"
69+
showSizeChanger>
70+
<template slot="buildOptionText" slot-scope="props">
71+
<span>{{ props.value }} / {{ $t('label.page') }}</span>
72+
</template>
73+
</a-pagination>
74+
</a-spin>
75+
<a-modal
76+
v-if="showCreateForm"
77+
:visible="showCreateForm"
78+
:title="$t('label.add.ip.range')"
79+
:maskClosable="false"
80+
:footer="null"
81+
:cancelText="$t('label.cancel')"
82+
@cancel="() => { showCreateForm = false }"
83+
centered
84+
width="auto">
85+
<CreateVlanIpRange
86+
@close-action="showCreateForm = false" />
87+
</a-modal>
88+
</div>
89+
</template>
90+
<script>
91+
import { api } from '@/api'
92+
import CreateVlanIpRange from '@/views/network/CreateVlanIpRange'
93+
94+
export default {
95+
name: 'GuestIpRanges',
96+
components: {
97+
CreateVlanIpRange
98+
},
99+
props: {
100+
resource: {
101+
type: Object,
102+
required: true
103+
},
104+
loading: {
105+
type: Boolean,
106+
default: false
107+
}
108+
},
109+
data () {
110+
return {
111+
fetchLoading: false,
112+
showCreateForm: false,
113+
total: 0,
114+
ipranges: [],
115+
page: 1,
116+
pageSize: 10,
117+
columns: [
118+
{
119+
title: this.$t('label.startipv4'),
120+
dataIndex: 'startip'
121+
},
122+
{
123+
title: this.$t('label.endipv4'),
124+
dataIndex: 'endip'
125+
},
126+
{
127+
title: this.$t('label.startipv6'),
128+
dataIndex: 'startipv6'
129+
},
130+
{
131+
title: this.$t('label.endipv6'),
132+
dataIndex: 'endipv6'
133+
},
134+
{
135+
title: this.$t('label.gateway'),
136+
dataIndex: 'gateway'
137+
},
138+
{
139+
title: this.$t('label.netmask'),
140+
dataIndex: 'netmask'
141+
},
142+
{
143+
title: '',
144+
scopedSlots: { customRender: 'action' }
145+
}
146+
]
147+
}
148+
},
149+
mounted () {
150+
this.fetchData()
151+
},
152+
watch: {
153+
resource: function (newItem, oldItem) {
154+
if (!newItem || !newItem.id) {
155+
return
156+
}
157+
this.fetchData()
158+
}
159+
},
160+
methods: {
161+
fetchData () {
162+
const params = {
163+
zoneid: this.resource.zoneid,
164+
networkid: this.resource.id,
165+
listall: true,
166+
page: this.page,
167+
pagesize: this.pageSize
168+
}
169+
this.fetchLoading = true
170+
api('listVlanIpRanges', params).then(json => {
171+
this.total = json.listvlaniprangesresponse.count || 0
172+
this.ipranges = json.listvlaniprangesresponse.vlaniprange || []
173+
}).finally(() => {
174+
this.fetchLoading = false
175+
})
176+
},
177+
addIpRange () {
178+
179+
},
180+
removeIpRange (id) {
181+
api('deleteVlanIpRange', { id: id }).then(json => {
182+
}).finally(() => {
183+
this.fetchData()
184+
})
185+
},
186+
changePage (page, pageSize) {
187+
this.page = page
188+
this.pageSize = pageSize
189+
this.fetchData()
190+
},
191+
changePageSize (currentPage, pageSize) {
192+
this.page = currentPage
193+
this.pageSize = pageSize
194+
this.fetchData()
195+
}
196+
}
197+
}
198+
</script>

0 commit comments

Comments
 (0)