UI changes

Author: abh1sar

ui/public/locales/en.json

@@ -2398,6 +2398,7 @@
 "label.update.to": "updated to",
 "label.update.traffic.label": "Update traffic labels",
 "label.update.vmware.datacenter": "Update VMWare datacenter",
+"label.update.vpn.customer.gateway": "Update VPN Customer Gateway",
 "label.update.webhook": "Update Webhook",
 "label.updating": "Updating",
 "label.upgrade.router.newer.template": "Upgrade router to use newer Template",
@@ -3600,6 +3601,7 @@
 "message.success.update.network": "Successfully updated Network",
 "message.success.update.template": "Successfully updated Template",
 "message.success.update.user": "Successfully updated User",
+"message.success.update.vpn.customer.gateway": "Successfully updated VPN customer gateway",
 "message.success.upgrade.kubernetes": "Successfully upgraded Kubernetes Cluster",
 "message.success.upload": "Successfully uploaded",
 "message.success.upload.description": "This ISO file has been uploaded. Please check its status in the Templates menu.",
@@ -3626,6 +3628,9 @@
 "message.update.condition.failed": "Failed to update condition",
 "message.update.condition.processing": "Updating condition...",
 "message.update.failed": "Update failed",
+"message.update.vpn.customer.gateway": "Update VPN customer gateway",
+"message.update.vpn.customer.gateway.failed": "Updating the VPN customer gateway failed",
+"message.update.vpn.customer.gateway.processing": "Updating VPN customer gateway...",
 "message.test.webhook.delivery": "Test delivery to the Webhook with an optional payload",
 "message.two.factor.authorization.failed": "Unable to verify 2FA with provided code, please retry.",
 "message.two.fa.auth": "Open the two-factor authentication app on your mobile device to view your authentication code.",
@@ -3711,6 +3716,10 @@
 "message.volumes.managed": "Volumes controlled by CloudStack.",
 "message.volumes.unmanaged": "Volumes not controlled by CloudStack.",
 "message.vpc.restart.required": "Restart is required for VPC(s). Click here to view VPC(s) which require restart.",
+"message.vpn.customer.gateway.contains.obsolete.parameters": "The VPN Customer Gateway is configured with parameters marked as obsolete. Consider changing the parameters using Update VPN Customer Gateway.",
+"message.vpn.customer.gateway.excluded.parameter": " is marked as excluded. Please choose another value.",
+"message.vpn.customer.gateway.obsolete.parameter": " is marked as obsolete/insecure. Please choose another value.",
+"message.vpn.customer.gateway.obsolete.parameter.tooltip": "This parameter value is marked as obsolete/insecure.",
 "message.vr.alert.upon.network.offering.creation.l2": "As virtual routers are not created for L2 Networks, the compute offering will not be used.",
 "message.vr.alert.upon.network.offering.creation.others": "As none of the obligatory services for creating a virtual router (VPN, DHCP, DNS, Firewall, LB, UserData, SourceNat, StaticNat, PortForwarding) are enabled, the virtual router will not be created and the compute offering will not be used.",
 "message.warn.change.primary.storage.scope": "This feature is tested and supported for the following configurations:<br>KVM - NFS/Ceph - DefaultPrimary<br>VMware - NFS - DefaultPrimary<br>*There might be extra steps involved to make it work for other configurations.",

ui/src/components/view/ListView.vue

@@ -103,6 +103,12 @@
                 <warning-outlined style="color: #f5222d"/>
               </a-tooltip>
             </span>
+            <span v-else-if="$route.path.startsWith('/vpncustomergateway')">
+              &nbsp;
+              <a-tooltip v-if="record.containsexcludedparameters || record.containsobsoleteparameters" :title="$t('message.vpn.customer.gateway.contains.obsolete.parameters')">
+                <warning-outlined :style="{ color: $config.theme['@warning-color'] }" />
+              </a-tooltip>
+            </span>
           </span>
         </span>
       </template>

ui/src/config/section/network.js

@@ -1264,15 +1264,11 @@ export default {
         {
           api: 'updateVpnCustomerGateway',
           icon: 'edit-outlined',
-          label: 'label.edit',
+          label: 'label.update.vpn.customer.gateway',
           docHelp: 'adminguide/networking_and_traffic.html#updating-and-removing-a-vpn-customer-gateway',
           dataView: true,
-          args: ['name', 'gateway', 'cidrlist', 'ipsecpsk', 'ikepolicy', 'ikelifetime', 'ikeversion', 'esppolicy', 'esplifetime', 'dpd', 'splitconnections', 'forceencap'],
-          mapping: {
-            ikeversion: {
-              options: ['ike', 'ikev1', 'ikev2']
-            }
-          }
+          popup: true,
+          component: shallowRef(defineAsyncComponent(() => import('@/views/network/UpdateVpnCustomerGateway.vue')))
         },
         {
           api: 'deleteVpnCustomerGateway',