feat: add natOutgoing option for custom subnet with corresponding tooltip (#878)

* feat: add external connectivity option for subnets with corresponding tooltip

Signed-off-by: Andy Lee <andy.lee@suse.com>

* fix: remove gatewayType from subnet spec when not needed

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: update external connectivity feature to use NAT outgoing and improve tooltip descriptions

Signed-off-by: Andy Lee <andy.lee@suse.com>

* fix: update subnet creation to correctly handle natOutgoing and improve comment clarity

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: improve tooltip clarity for external connectivity NAT option

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/edit/kubeovn.io.subnet/index.vue

@@ -43,6 +43,7 @@ export default {
   created() {
     const vpc = this.$route.query.vpc || '';
     const enableDHCP = this.value?.spec?.enableDHCP || false;
+    const natOutgoing = this.value?.spec?.natOutgoing || false;
 
     set(this.value.spec, 'enableDHCP', enableDHCP);
     set(this.value, 'spec', this.value.spec || {
@@ -50,10 +51,11 @@ export default {
       protocol:     NETWORK_PROTOCOL.IPv4,
       provider:     '',
       vpc,
-      gatewayIP:  '',
+      gateway:      '',
       excludeIps:   [],
       private:      false,
       enableDHCP,
+      natOutgoing,
       acls:         []
     });
   },
@@ -129,6 +131,10 @@ export default {
         label: n.id,
         value: n.id,
       }));
+    },
+    natOutgoingDisabled() {
+      // Disable the NAT Outgoing option when the subnet belongs to the ovn-cluster VPC and its name is join or ovn-default.
+      return this.value?.spec?.vpc === 'ovn-cluster' && ['join', 'ovn-default'].includes(this.value?.metadata?.name);
     }
   },
 
@@ -304,6 +310,20 @@ export default {
             </Banner>
           </div>
         </div>
+        <div class="row mt-20">
+          <div class="col span-6">
+            <RadioGroup
+              v-model:value="value.spec.natOutgoing"
+              name="enableExternalConnectivity"
+              :disabled="natOutgoingDisabled"
+              :options="[true, false]"
+              :label="t('harvester.subnet.externalConnectivity.label')"
+              :labels="[t('generic.enabled'), t('generic.disabled')]"
+              :mode="mode"
+              :tooltip="t('harvester.subnet.externalConnectivity.tooltip')"
+            />
+          </div>
+        </div>
         <div class="row mt-20">
           <div class="col span-6">
             <RadioGroup

pkg/harvester/l10n/en-us.yaml

@@ -1156,6 +1156,9 @@ harvester:
       placeholder: key1=value1, key2=value2
       dhcpOptionBanner: DHCP options is a key/value string concatenate with comma. For more detail, please refer to <a href="https://kubeovn.github.io/docs/v1.13.x/en/kubevirt/dhcp/" target="_blank">KubOVN document</a>
       tooltip: Enable DHCP server for this subnet. When enabled, VMs can automatically obtain IP addresses from this subnet.
+    externalConnectivity:
+      label: NAT Outgoing
+      tooltip: Enable NAT for VMs using this subnet to access external networks.
     private:
       label: Private Subnet
       tooltip: Enable network isolation for this Subnet. When enabled, VMs can only communicate within this subnet, even if other subnets exist under the same VPC.