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

Commit b96fd83

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

2 files changed

Lines changed: 276 additions & 0 deletions

File tree

‎src/config/section/network.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ 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')
5659
}],
5760
actions: [
5861
{

‎src/views/network/GuestIpRanges.vue‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
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-table
22+
size="small"
23+
style="overflow-y: auto"
24+
:columns="columns"
25+
:dataSource="ipranges"
26+
:rowKey="item => item.id"
27+
:pagination="false" >
28+
29+
<template slot="action" slot-scope="text, record">
30+
<a-tooltip placement="bottom">
31+
<template slot="title">
32+
{{ $t('label.action.delete.ip.range') }}
33+
</template>
34+
<a-popconfirm
35+
:title="$t('message.confirm.remove.ip.range')"
36+
@confirm="removeIpRange(record.id)"
37+
:okText="$t('label.yes')"
38+
:cancelText="$t('label.no')" >
39+
<a-button
40+
type="danger"
41+
icon="delete"
42+
shape="circle" />
43+
</a-popconfirm>
44+
</a-tooltip>
45+
</template>
46+
47+
</a-table>
48+
<a-divider/>
49+
<a-pagination
50+
class="row-element pagination"
51+
size="small"
52+
:current="page"
53+
:pageSize="pageSize"
54+
:total="total"
55+
:showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
56+
:pageSizeOptions="['10', '20', '40', '80', '100']"
57+
@change="changePage"
58+
@showSizeChange="changePageSize"
59+
showSizeChanger>
60+
<template slot="buildOptionText" slot-scope="props">
61+
<span>{{ props.value }} / {{ $t('label.page') }}</span>
62+
</template>
63+
</a-pagination>
64+
</a-spin>
65+
</div>
66+
</template>
67+
<script>
68+
import { api } from '@/api'
69+
import Status from '@/components/widgets/Status'
70+
71+
export default {
72+
name: 'GuestIpRanges',
73+
components: {
74+
Status
75+
},
76+
props: {
77+
resource: {
78+
type: Object,
79+
required: true
80+
},
81+
loading: {
82+
type: Boolean,
83+
default: false
84+
}
85+
},
86+
data () {
87+
return {
88+
fetchLoading: false,
89+
ipranges: [],
90+
page: 1,
91+
pageSize: 10,
92+
total: 0,
93+
columns: [
94+
{
95+
title: this.$t('label.startipv4'),
96+
dataIndex: 'startip'
97+
},
98+
{
99+
title: this.$t('label.endipv4'),
100+
dataIndex: 'endip'
101+
},
102+
{
103+
title: this.$t('label.startipv6'),
104+
dataIndex: 'startipv6'
105+
},
106+
{
107+
title: this.$t('label.endipv6'),
108+
dataIndex: 'endipv6'
109+
},
110+
{
111+
title: this.$t('label.gateway'),
112+
dataIndex: 'gateway'
113+
},
114+
{
115+
title: this.$t('label.netmask'),
116+
dataIndex: 'netmask'
117+
},
118+
{
119+
title: '',
120+
scopedSlots: { customRender: 'action' }
121+
}
122+
]
123+
}
124+
},
125+
mounted () {
126+
this.fetchData()
127+
},
128+
watch: {
129+
resource: function (newItem, oldItem) {
130+
if (!newItem || !newItem.id) {
131+
return
132+
}
133+
this.fetchData()
134+
}
135+
},
136+
methods: {
137+
fetchData () {
138+
const params = {
139+
zoneid: this.resource.zoneid,
140+
networkid: this.resource.id,
141+
listall: true,
142+
page: this.page,
143+
pagesize: this.pageSize
144+
}
145+
this.fetchLoading = true
146+
api('listVlanIpRanges', params).then(json => {
147+
this.total = json.listvlaniprangesresponse.count || 0
148+
this.ipranges = json.listvlaniprangesresponse.vlaniprange || []
149+
}).finally(() => {
150+
this.fetchLoading = false
151+
})
152+
},
153+
addIpRange () {
154+
155+
},
156+
removeIpRange (id) {
157+
api('deleteVlanIpRange', { id: id }).then(json => {
158+
}).finally(() => {
159+
this.fetchData()
160+
})
161+
},
162+
changePage (page, pageSize) {
163+
this.page = page
164+
this.pageSize = pageSize
165+
this.fetchData()
166+
},
167+
changePageSize (currentPage, pageSize) {
168+
this.page = currentPage
169+
this.pageSize = pageSize
170+
this.fetchData()
171+
}
172+
}
173+
}
174+
</script>
175+
176+
<style lang="scss" scoped>
177+
.list {
178+
max-height: 95vh;
179+
width: 95vw;
180+
overflow-y: scroll;
181+
margin: -24px;
182+
183+
@media (min-width: 1000px) {
184+
max-height: 70vh;
185+
width: 900px;
186+
}
187+
188+
&__header,
189+
&__footer {
190+
padding: 20px;
191+
}
192+
193+
&__header {
194+
display: flex;
195+
196+
.ant-select {
197+
min-width: 200px;
198+
}
199+
200+
&__col {
201+
202+
&:not(:last-child) {
203+
margin-right: 20px;
204+
}
205+
206+
&--full {
207+
flex: 1;
208+
}
209+
210+
}
211+
212+
}
213+
214+
&__footer {
215+
display: flex;
216+
justify-content: flex-end;
217+
218+
button {
219+
&:not(:last-child) {
220+
margin-right: 10px;
221+
}
222+
}
223+
}
224+
225+
&__item {
226+
padding-right: 20px;
227+
padding-left: 20px;
228+
229+
&--selected {
230+
background-color: #e6f7ff;
231+
}
232+
233+
}
234+
235+
&__title {
236+
font-weight: bold;
237+
}
238+
239+
&__outer-container {
240+
width: 100%;
241+
display: flex;
242+
flex-direction: column;
243+
}
244+
245+
&__container {
246+
display: flex;
247+
flex-direction: column;
248+
width: 100%;
249+
cursor: pointer;
250+
251+
@media (min-width: 760px) {
252+
flex-direction: row;
253+
align-items: center;
254+
}
255+
256+
}
257+
258+
&__row {
259+
margin-bottom: 10px;
260+
261+
@media (min-width: 760px) {
262+
margin-right: 20px;
263+
margin-bottom: 0;
264+
}
265+
}
266+
267+
&__radio {
268+
display: flex;
269+
justify-content: flex-end;
270+
}
271+
272+
}
273+
</style>

0 commit comments

Comments
 (0)