Skip to content

Commit 58d729e

Browse files
sudo87sudo87
committed
Support iprange while creating remote access vpn
1 parent f985a67 commit 58d729e

File tree

2 files changed

+145
-109
lines changed

2 files changed

+145
-109
lines changed

‎ui/public/locales/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1588,6 +1588,8 @@
15881588
"label.migrate.instance.specific.storages": "Migrate volume(s) of the Instance to specific primary storages",
15891589
"label.migrate.systemvm.to": "Migrate System VM to",
15901590
"label.migrate.volume": "Migrate Volume",
1591+
"label.specify.iprange": "Specify IP Range",
1592+
"message.iprange.description": "The range of IP addresses to allocate to VPN clients. The first IP in the range will be taken by the VPN server. (Optional)",
15911593
"message.memory.usage.info.hypervisor.additionals": "The data shown may not reflect the actual memory usage if the Instance does not have the additional hypervisor tools installed",
15921594
"message.memory.usage.info.negative.value": "If the Instance's memory usage cannot be obtained from the hypervisor, the lines for free memory in the raw data graph and memory usage in the percentage graph will be disabled",
15931595
"message.migrate.volume.tooltip": "Volume can be migrated to any suitable storage pool. Admin has to choose the appropriate disk offering to replace, that supports the new storage pool",

‎ui/src/views/network/VpnDetails.vue‎

Lines changed: 143 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -16,131 +16,153 @@
1616
// under the License.
1717

1818
<template>
19-
<div v-if="remoteAccessVpn">
20-
<div>
21-
<p>{{ $t('message.enabled.vpn') }} <strong>{{ remoteAccessVpn.publicip }}</strong></p>
22-
<p>{{ $t('message.enabled.vpn.ip.sec') }} <strong>{{ remoteAccessVpn.presharedkey }}</strong></p>
23-
<a-divider/>
24-
<a-button
25-
style="margin-left: 10px"
26-
type="primary"
27-
danger
28-
@click="disableVpn = true"
29-
:disabled="!('deleteRemoteAccessVpn' in $store.getters.apis)">
30-
{{ $t('label.disable.vpn') }}
31-
</a-button>
32-
<a-button><router-link :to="{ path: '/vpnuser'}">{{ $t('label.manage.vpn.user') }}</router-link></a-button>
33-
</div>
19+
<div class="vpn-details">
3420

35-
<a-modal
36-
:visible="disableVpn"
37-
:footer="null"
38-
:title="$t('label.disable.vpn')"
39-
:closable="true"
40-
:maskClosable="false"
41-
@cancel="disableVpn = false">
42-
<div v-ctrl-enter="handleDisableVpn">
43-
<p>{{ $t('message.disable.vpn') }}</p>
44-
45-
<a-divider />
46-
47-
<div class="actions">
48-
<a-button @click="() => disableVpn = false">{{ $t('label.cancel') }}</a-button>
49-
<a-button type="primary" @click="handleDisableVpn">{{ $t('label.yes') }}</a-button>
50-
</div>
21+
<div v-if="remoteAccessVpn">
22+
<div>
23+
<p>{{ $t('message.enabled.vpn') }} <strong>{{ remoteAccessVpn.publicip }}</strong></p>
24+
<p>{{ $t('message.enabled.vpn.ip.sec') }} <strong>{{ remoteAccessVpn.presharedkey }}</strong></p>
25+
<a-divider/>
26+
<a-button
27+
style="margin-left: 10px"
28+
type="primary"
29+
danger
30+
@click="disableVpn = true"
31+
:disabled="!('deleteRemoteAccessVpn' in $store.getters.apis)">
32+
{{ $t('label.disable.vpn') }}
33+
</a-button>
34+
<a-button><router-link :to="{ path: '/vpnuser'}">{{ $t('label.manage.vpn.user') }}</router-link></a-button>
5135
</div>
52-
</a-modal>
53-
54-
</div>
55-
<div v-else>
56-
<a-button
57-
:disabled="!('createRemoteAccessVpn' in $store.getters.apis)"
58-
type="primary"
59-
style="margin-left: 10px"
60-
@click="enableVpn = true">
61-
{{ $t('label.enable.vpn') }}
62-
</a-button>
6336

64-
<a-modal
65-
:visible="enableVpn"
66-
:footer="null"
67-
:title="$t('label.enable.vpn')"
68-
:maskClosable="false"
69-
:closable="true"
70-
@cancel="enableVpn = false">
71-
<div v-ctrl-enter="handleCreateVpn">
72-
<p>{{ $t('message.enable.vpn') }}</p>
37+
<a-modal
38+
:visible="disableVpn"
39+
:footer="null"
40+
:title="$t('label.disable.vpn')"
41+
:closable="true"
42+
:maskClosable="false"
43+
@cancel="disableVpn = false">
44+
<div v-ctrl-enter="handleDisableVpn">
45+
<p>{{ $t('message.disable.vpn') }}</p>
7346

74-
<a-divider />
47+
<a-divider />
7548

76-
<div class="actions">
77-
<a-button @click="() => enableVpn = false">{{ $t('label.cancel') }}</a-button>
78-
<a-button type="primary" ref="submit" @click="handleCreateVpn">{{ $t('label.yes') }}</a-button>
49+
<div class="actions">
50+
<a-button @click="() => disableVpn = false">{{ $t('label.cancel') }}</a-button>
51+
<a-button type="primary" @click="handleDisableVpn">{{ $t('label.yes') }}</a-button>
52+
</div>
7953
</div>
80-
</div>
81-
</a-modal>
82-
83-
</div>
54+
</a-modal>
8455

85-
<br>
86-
<div v-if="vpnGateway">
87-
<div>
88-
<a-button
89-
:disabled="!('deleteVpnGateway' in $store.getters.apis)"
90-
style="margin-left: 10px"
91-
danger
92-
type="primary"
93-
@click="deleteVpnGateway = true">
94-
{{ $t('label.delete.vpn.gateway') }}
95-
</a-button>
9656
</div>
97-
<a-modal
98-
:visible="deleteVpnGateway"
99-
:footer="null"
100-
:title="$t('label.enable.vpn')"
101-
:maskClosable="false"
102-
:closable="true"
103-
@cancel="deleteVpnGateway = false">
104-
<div v-ctrl-enter="handleDeleteVpnGateway">
105-
<p>{{ $t('message.delete.vpn.gateway') }}</p>
106-
<div :span="24" class="action-button">
107-
<a-button @click="deleteVpnGateway = false">{{ $t('label.cancel') }}</a-button>
108-
<a-button :loading="loading" type="primary" @click="handleDeleteVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
109-
</div>
110-
</div>
111-
</a-modal>
112-
</div>
113-
<div v-else-if="vpnGatewayEnabled">
114-
<div>
57+
<div v-else>
11558
<a-button
116-
:disabled="!('createVpnGateway' in $store.getters.apis)"
117-
style="margin-left: 10px"
59+
:disabled="!('createRemoteAccessVpn' in $store.getters.apis)"
11860
type="primary"
119-
@click="createVpnGateway = true">
120-
{{ $t('label.add.vpn.gateway') }}
61+
style="margin-left: 10px"
62+
@click="enableVpn = true">
63+
{{ $t('label.enable.vpn') }}
12164
</a-button>
65+
66+
<a-modal
67+
:visible="enableVpn"
68+
:footer="null"
69+
:title="$t('label.enable.vpn')"
70+
:maskClosable="false"
71+
:closable="true"
72+
@cancel="enableVpn = false">
73+
<div v-ctrl-enter="handleCreateVpn">
74+
<p>{{ $t('message.enable.vpn') }}</p>
75+
76+
<a-form-item>
77+
<a-checkbox v-model:checked="specifyIpRange">
78+
{{ $t('label.specify.iprange') }}
79+
</a-checkbox>
80+
</a-form-item>
81+
<a-form-item
82+
v-if="specifyIpRange"
83+
name="iprange"
84+
:colon="false"
85+
ref="iprange">
86+
<template #label>
87+
<tooltip-label :title="$t('label.ip.range')" :tooltip="$t('message.iprange.description')"/>
88+
</template>
89+
<a-input
90+
v-model:value="vpnIpRange"
91+
:placeholder="'10.1.2.1-10.1.2.8'"
92+
/>
93+
</a-form-item>
94+
95+
<a-divider />
96+
97+
<div class="actions">
98+
<a-button @click="() => enableVpn = false">{{ $t('label.cancel') }}</a-button>
99+
<a-button type="primary" ref="submit" @click="handleCreateVpn">{{ $t('label.yes') }}</a-button>
100+
</div>
101+
</div>
102+
</a-modal>
103+
122104
</div>
123-
<a-modal
124-
:visible="createVpnGateway"
125-
:footer="null"
126-
:title="$t('label.add.vpn.gateway')"
127-
:maskClosable="false"
128-
:closable="true"
129-
@cancel="createVpnGateway = false">
130-
<div v-ctrl-enter="handleCreateVpnGateway">
131-
<p>{{ $t('message.add.vpn.gateway') }}</p>
132-
<div :span="24" class="action-button">
133-
<a-button @click="createVpnGateway = false">{{ $t('label.cancel') }}</a-button>
134-
<a-button :loading="loading" type="primary" @click="handleCreateVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
105+
106+
<br/>
107+
<div v-if="vpnGateway">
108+
<div>
109+
<a-button
110+
:disabled="!('deleteVpnGateway' in $store.getters.apis)"
111+
style="margin-left: 10px"
112+
danger
113+
type="primary"
114+
@click="deleteVpnGateway = true">
115+
{{ $t('label.delete.vpn.gateway') }}
116+
</a-button>
117+
</div>
118+
<a-modal
119+
:visible="deleteVpnGateway"
120+
:footer="null"
121+
:title="$t('label.enable.vpn')"
122+
:maskClosable="false"
123+
:closable="true"
124+
@cancel="deleteVpnGateway = false">
125+
<div v-ctrl-enter="handleDeleteVpnGateway">
126+
<p>{{ $t('message.delete.vpn.gateway') }}</p>
127+
<div :span="24" class="action-button">
128+
<a-button @click="deleteVpnGateway = false">{{ $t('label.cancel') }}</a-button>
129+
<a-button :loading="loading" type="primary" @click="handleDeleteVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
130+
</div>
135131
</div>
132+
</a-modal>
133+
</div>
134+
<div v-else-if="vpnGatewayEnabled">
135+
<div>
136+
<a-button
137+
:disabled="!('createVpnGateway' in $store.getters.apis)"
138+
style="margin-left: 10px"
139+
type="primary"
140+
@click="createVpnGateway = true">
141+
{{ $t('label.add.vpn.gateway') }}
142+
</a-button>
136143
</div>
137-
</a-modal>
144+
<a-modal
145+
:visible="createVpnGateway"
146+
:footer="null"
147+
:title="$t('label.add.vpn.gateway')"
148+
:maskClosable="false"
149+
:closable="true"
150+
@cancel="createVpnGateway = false">
151+
<div v-ctrl-enter="handleCreateVpnGateway">
152+
<p>{{ $t('message.add.vpn.gateway') }}</p>
153+
<div :span="24" class="action-button">
154+
<a-button @click="createVpnGateway = false">{{ $t('label.cancel') }}</a-button>
155+
<a-button :loading="loading" type="primary" @click="handleCreateVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
156+
</div>
157+
</div>
158+
</a-modal>
159+
</div>
138160
</div>
139-
140161
</template>
141162

142163
<script>
143164
import { getAPI, postAPI } from '@/api'
165+
import TooltipLabel from '@/components/widgets/TooltipLabel'
144166
145167
export default {
146168
props: {
@@ -149,6 +171,9 @@ export default {
149171
required: true
150172
}
151173
},
174+
components: {
175+
TooltipLabel
176+
},
152177
data () {
153178
return {
154179
remoteAccessVpn: null,
@@ -158,7 +183,9 @@ export default {
158183
vpnGatewayEnabled: false,
159184
createVpnGateway: false,
160185
deleteVpnGateway: false,
161-
isSubmitted: false
186+
isSubmitted: false,
187+
specifyIpRange: false,
188+
vpnIpRange: ''
162189
}
163190
},
164191
inject: ['parentFetchData', 'parentToggleLoading'],
@@ -211,11 +238,15 @@ export default {
211238
this.isSubmitted = true
212239
this.parentToggleLoading()
213240
this.enableVpn = false
214-
postAPI('createRemoteAccessVpn', {
241+
const params = {
215242
publicipid: this.resource.id,
216243
domainid: this.resource.domainid,
217244
account: this.resource.account
218-
}).then(response => {
245+
}
246+
if (this.specifyIpRange && this.vpnIpRange?.trim()) {
247+
params.iprange = this.vpnIpRange.trim()
248+
}
249+
postAPI('createRemoteAccessVpn', params).then(response => {
219250
this.$pollJob({
220251
jobId: response.createremoteaccessvpnresponse.jobid,
221252
successMethod: result => {
@@ -387,4 +418,7 @@ export default {
387418
}
388419
}
389420
}
421+
.vpn-details {
422+
padding: 8px 0;
423+
}
390424
</style>

0 commit comments

Comments
 (0)