You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by ro...@apache.org on 2020/01/10 06:08:05 UTC
[cloudstack-primate] branch master updated: network: create VPN
customer gateway form (#98)
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 698dcf6 network: create VPN customer gateway form (#98)
698dcf6 is described below
commit 698dcf62eff656497a92f77459706f1b40813cd3
Author: Pearl Dsilva <pe...@gmail.com>
AuthorDate: Fri Jan 10 11:37:56 2020 +0530
network: create VPN customer gateway form (#98)
This adds the create VPN customer gateway form
Signed-off-by: Rohit Yadav <ro...@shapeblue.com>
Co-authored-by: Rohit Yadav <ro...@apache.org>
---
src/config/section/network.js | 14 +-
src/locales/en.json | 7 +
src/views/network/CreateVpnCustomerGateway.vue | 325 +++++++++++++++++++++++++
3 files changed, 343 insertions(+), 3 deletions(-)
diff --git a/src/config/section/network.js b/src/config/section/network.js
index ae1f8dd..b85fe36 100644
--- a/src/config/section/network.js
+++ b/src/config/section/network.js
@@ -312,15 +312,23 @@ export default {
icon: 'lock',
permission: ['listVpnCustomerGateways'],
resourceType: 'VpnGateway',
- columns: ['name', 'ipaddress', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain'],
- details: ['name', 'id', 'ipaddress', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain'],
+ columns: ['name', 'gateway', 'cidrlist', 'ipsecpsk', 'account', 'domain'],
+ details: ['name', 'id', 'gateway', 'cidrlist', 'ipsecpsk', 'ikepolicy', 'ikelifetime', 'esppolicy', 'esplifetime', 'dpd', 'forceencap', 'account', 'domain'],
actions: [
{
api: 'createVpnCustomerGateway',
icon: 'plus',
label: 'Add VPN Customer Gateway',
listView: true,
- args: ['name', 'gateway', 'cidrlist', 'ipsecpsk', 'ikelifetime', 'esplifetime', 'dpd', 'forceencap', 'ikepolicy', 'esppolicy']
+ popup: true,
+ component: () => import('@/views/network/CreateVpnCustomerGateway.vue')
+ },
+ {
+ api: 'updateVpnCustomerGateway',
+ icon: 'edit',
+ label: 'Edit VPN Customer Gateway',
+ dataView: true,
+ args: ['name', 'gateway', 'cidrlist', 'ipsecpsk', 'ikepolicy', 'ikelifetime', 'esppolicy', 'esplifetime', 'dpd', 'forceencap']
},
{
api: 'deleteVpnCustomerGateway',
diff --git a/src/locales/en.json b/src/locales/en.json
index d2497f7..722a150 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -64,6 +64,7 @@
"aclname": "ACL Name",
"action": "Action",
"activeviewersessions": "Active Sessions",
+"add": "Add",
"add-scaleDowncondition": "Add",
"add-scaleUpcondition": "Add",
"address": "Address",
@@ -959,6 +960,12 @@
"vpcname": "VPC",
"vpcoffering": "VPC Offering",
"vpncustomergatewayid": "VPN Customer Gateway",
+"vpncustomergatewayname": "Unique name for VPN customer gateway",
+"vpncustomergateway": "IP address of the remote gateway",
+"vpncustomergateway_cidrlist": "Comma separated guest CIDR list of the remote subnets.",
+"vpncustomergateway_secretkey": "Enter a secret key value",
+"vpncustomergateway_ikelifetime": "phase-1 lifetime of the security association in seconds",
+"vpncustomergateway_esplifetime": "The phase-2 lifetime of the security association in seconds",
"vsmctrlvlanid": "Control VLAN ID",
"vsmdeviceid": "Name",
"vsmdevicestate": "State",
diff --git a/src/views/network/CreateVpnCustomerGateway.vue b/src/views/network/CreateVpnCustomerGateway.vue
new file mode 100644
index 0000000..93c316f
--- /dev/null
+++ b/src/views/network/CreateVpnCustomerGateway.vue
@@ -0,0 +1,325 @@
+// 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>
+ <a-form class="form-layout" :form="form" layout="vertical">
+ <a-form-item :label="$t('name')">
+ <a-input
+ v-decorator="[
+ 'name',
+ {
+ rules: [{ required: true, message: 'required' }],
+ }
+ ]"
+ :placeholder="$t('vpncustomergatewayname')" />
+ </a-form-item>
+ <a-form-item :label="$t('gateway')">
+ <a-input
+ v-decorator="[
+ 'gateway',
+ {
+ rules: [{ required: true, message: 'required'}],
+ }
+ ]"
+ :placeholder="$t('vpncustomergateway')" />
+ </a-form-item>
+ <a-form-item :label="$t('cidrlist')">
+ <a-input
+ v-decorator="[
+ 'cidrlist',
+ {
+ rules: [{ required: true, message: 'required'}],
+ }
+ ]"
+ :placeholder="$t('vpncustomergateway_cidrlist')" />
+ </a-form-item>
+ <a-form-item
+ :label="$t('ipsecpsk')">
+ <a-input
+ v-decorator="[
+ 'ipsecpsk',
+ {
+ rules: [{ required: true, message: 'required'}],
+ }
+ ]"
+ :placeholder="$t('vpncustomergateway_secretkey')" />
+ </a-form-item>
+ <a-form-item
+ :label="$t('ikeEncryption')">
+ <a-select
+ v-decorator="[
+ 'ikeEncryption',
+ {
+ initialValue: 'aes128',
+ },
+ ]">
+ <a-select-option :value="algo" v-for="(algo, idx) in encryptionAlgo" :key="idx">
+ {{ algo }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ :label="$t('ikeHash')">
+ <a-select
+ v-decorator="[
+ 'ikeHash',
+ {
+ initialValue: 'sha1',
+ },
+ ]">
+ <a-select-option :value="h" v-for="(h, idx) in hash" :key="idx">
+ {{ h }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ :label="$t('ikeDh')">
+ <a-select
+ v-decorator="[
+ 'ikeDh',
+ {
+ initialValue: 'Group 5(modp1536)',
+ },
+ ]">
+ <a-select-option :value="DHGroups[group]" v-for="(group, idx) in Object.keys(DHGroups)" :key="idx">
+ <div v-if="group !== ''">
+ {{ group+"("+DHGroups[group]+")" }}
+ </div>
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ :label="$t('espEncryption')">
+ <a-select
+ v-decorator="[
+ 'espEncryption',
+ {
+ initialValue: 'aes128',
+ },
+ ]">
+ <a-select-option :value="algo" v-for="(algo, idx) in encryptionAlgo" :key="idx">
+ {{ algo }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ :label="$t('espHash')">
+ <a-select
+ v-decorator="[
+ 'espHash',
+ {
+ initialValue: 'sha1',
+ },
+ ]">
+ <a-select-option :value="h" v-for="(h, idx) in hash" :key="idx">
+ {{ h }}
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ :label="$t('perfectForwardSecrecy')">
+ <a-select
+ v-decorator="[
+ 'perfectForwardSecrecy',
+ {
+ initialValue: 'None',
+ },
+ ]">
+ <a-select-option :value="DHGroups[group]" v-for="(group, idx) in Object.keys(DHGroups)" :key="idx">
+ <div v-if="group === ''">
+ {{ DHGroups[group] }}
+ </div>
+ <div v-else>
+ {{ group+"("+DHGroups[group]+")" }}
+ </div>
+ </a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ :label="$t('ikelifetime')">
+ <a-input
+ v-decorator="[
+ 'ikelifetime',
+ {
+ initialValue: '86400',
+ },
+ ]"
+ :placeholder="$t('vpncustomergateway_ikelifetime')"/>
+ </a-form-item>
+ <a-form-item
+ :label="$t('esplifetime')">
+ <a-input
+ v-decorator="[
+ 'esplifetime',
+ {
+ initialValue: '3600',
+ },
+ ]"
+ :placeholder="$t('vpncustomergateway_esplifetime')"/>
+ </a-form-item>
+ <a-form-item :label="$t('dpd')">
+ <a-switch
+ v-decorator="[
+ 'dpd',
+ {
+ initialValue: 'false',
+ },
+ ]"/>
+ </a-form-item>
+ <a-form-item :label="$t('forceencap')">
+ <a-switch
+ v-decorator="[
+ 'forceencap',
+ {
+ initialValue: 'false',
+ },
+ ]"/>
+ </a-form-item>
+ <div class="actions">
+ <a-button @click="closeModal">
+ {{ $t('Cancel') }}
+ </a-button>
+ <a-button type="primary" @click="handleSubmit">
+ {{ $t('OK') }}
+ </a-button>
+ </div>
+ </a-form>
+ </div>
+</template>
+<script>
+import { api } from '@/api'
+export default {
+ name: 'CreateVpnCustomerGateway',
+ props: {
+ resource: {
+ type: Object,
+ required: true
+ }
+ },
+ inject: ['parentFetchData', 'parentToggleLoading'],
+ data () {
+ return {
+ encryptionAlgo: [
+ 'aes128',
+ 'aes192',
+ 'aes256',
+ '3des'
+ ],
+ hash: [
+ 'sha1',
+ 'sha256',
+ 'sha384',
+ 'sha512',
+ 'md5'
+ ],
+ DHGroups: {
+ '': 'None',
+ 'Group 2': 'modp1024',
+ 'Group 5': 'modp1536',
+ 'Group 14': 'modp2048',
+ 'Group 15': 'modp3072',
+ 'Group 16': 'modp4096',
+ 'Group 17': 'modp6144',
+ 'Group 18': 'modp8192'
+ },
+ ikeDhGroupInitialValue: 'Group 5(modp1536)'
+ }
+ },
+ beforeCreate () {
+ this.form = this.$form.createForm(this)
+ },
+ methods: {
+ closeModal () {
+ this.$parent.$parent.close()
+ },
+ handleSubmit (e) {
+ e.preventDefault()
+ this.form.validateFields((err, values) => {
+ if (err) {
+ return
+ }
+ let ikepolicy = values.ikeEncryption + '-' + values.ikeHash + ';'
+ ikepolicy += (values.ikeDh !== this.ikeDhGroupInitialValue) ? values.ikeDh : (values.ikeDh.split('(')[1]).split(')')[0]
+ let esppolicy = values.espEncryption + '-' + values.espHash
+ if (values.perfectForwardSecrecy !== 'None') {
+ esppolicy += ';' + (values.perfectForwardSecrecy)
+ }
+ api('createVpnCustomerGateway', {
+ name: values.name,
+ gateway: values.gateway,
+ cidrlist: values.cidrlist,
+ ipsecpsk: values.ipsecpsk,
+ ikelifetime: values.ikelifetime,
+ esplifetime: values.esplifetime,
+ dpd: values.dpd,
+ forceencap: values.forceencap,
+ ikepolicy: ikepolicy,
+ esppolicy: esppolicy
+ }).then(response => {
+ this.$store.dispatch('AddAsyncJob', {
+ title: `Adding VPN customer gateway`,
+ jobid: response.createvpncustomergatewayresponse.jobid,
+ description: values.name,
+ status: 'progress'
+ })
+ this.$pollJob({
+ jobId: response.createvpncustomergatewayresponse.jobid,
+ successMessage: `Successfully added VPN customer gateway`,
+ successMethod: () => {
+ this.closeModal()
+ this.parentFetchData()
+ },
+ errorMessage: 'VPN customer gateway creation failed' + response,
+ errorMethod: () => {
+ this.closeModal()
+ this.parentFetchData()
+ },
+ loadingMessage: `Creation of VPN customer gateway is in progress`,
+ catchMessage: 'Error encountered while fetching async job result',
+ catchMethod: () => {
+ this.closeModal()
+ }
+ })
+ this.closeModal()
+ }).catch(error => {
+ console.error(error)
+ this.$message.error('Failed to Add VPN customer gateway')
+ }).finally(() => {
+ this.form.resetFields()
+ this.closeModal()
+ })
+ })
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+.form-layout {
+ width: 500px;
+}
+
+.actions {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 20px;
+ button {
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
+ }
+}
+</style>