Merge pull request #752 from gravitl/kwesi/net-1509-bug-ra-gw-persist…

…ent-keepalive-does fix(NET-1509): add fields for client config mtu and pka values
gravitl · Sep 11, 2024 · 4368b10 · 4368b10
2 parents 5b45a40 + 9514d70
commit 4368b10
Show file tree

Hide file tree

Showing 10 changed files with 108 additions and 9 deletions.
diff --git a/src/components/modals/add-client-modal/AddClientModal.tsx b/src/components/modals/add-client-modal/AddClientModal.tsx
@@ -166,6 +166,8 @@ export default function AddClientModal({
           extclientdns: formData.extclientdns,
           is_internet_gw: isServerEE ? formData.is_internet_gw : false,
           metadata: '',
+          mtu: 1500,
+          persistentkeepalive: 20,
         });
       }
 

diff --git a/src/components/modals/add-remote-access-gateway-modal/AddRemoteAccessGatewayModal.tsx b/src/components/modals/add-remote-access-gateway-modal/AddRemoteAccessGatewayModal.tsx
@@ -7,6 +7,7 @@ import {
   Divider,
   Form,
   Input,
+  InputNumber,
   Modal,
   notification,
   Row,
@@ -29,7 +30,6 @@ import { NodesService } from '@/services/NodesService';
 import { Host } from '@/models/Host';
 import { CreateIngressNodeDto } from '@/services/dtos/CreateIngressNodeDto';
 import { PUBLIC_DNS_RESOLVERS } from '@/constants/AppConstants';
-import { coerce } from 'semver';
 import { ExternalLinks } from '@/constants/LinkAndImageConstants';
 import { useServerLicense } from '@/utils/Utils';
 
@@ -69,21 +69,21 @@ export default function AddRemoteAccessGatewayModal({
   const isInternetGatewayVal = Form.useWatch('is_internet_gw', form);
   const defaultClientDNS = Form.useWatch('extclientdns', form);
 
-  const networkHosts = useMemo<ExtendedNode[]>(() => {
+  const networkNodes = useMemo<ExtendedNode[]>(() => {
     return store.nodes
       .filter((node) => node.network === networkId)
       .map((node) => getExtendedNode(node, store.hostsCommonDetails));
   }, [networkId, store.hostsCommonDetails, store.nodes]);
 
-  const filteredNetworkNonIngressHosts = useMemo<ExtendedNode[]>(
+  const filteredNetworkNonIngressNodes = useMemo<ExtendedNode[]>(
     () =>
-      networkHosts.filter(
+      networkNodes.filter(
         (node) =>
           (node.name?.toLowerCase().includes(gatewaySearch.toLowerCase()) ||
             node.address?.toLowerCase().includes(gatewaySearch.toLowerCase())) &&
           node.isingressgateway === false,
       ),
-    [gatewaySearch, networkHosts],
+    [gatewaySearch, networkNodes],
   );
 
   const selectedGatewayHost = useMemo<Host | null>(() => {
@@ -172,6 +172,8 @@ export default function AddRemoteAccessGatewayModal({
           extclientdns: formData.extclientdns,
           is_internet_gw: formData.is_internet_gw,
           metadata: formData.metadata,
+          mtu: formData.mtu,
+          persistentkeepalive: formData.persistentkeepalive,
         })
       ).data;
       resetModal();
@@ -207,7 +209,7 @@ export default function AddRemoteAccessGatewayModal({
     >
       <Divider style={{ margin: '0px 0px 2rem 0px' }} />
 
-      <Form name="add-ingress-form" form={form} layout="vertical">
+      <Form name="add-ingress-form" form={form} layout="vertical" initialValues={{}}>
         <div className="" style={{ maxHeight: '60vh', overflow: 'auto' }}>
           <div className="CustomModalBody">
             <Row>
@@ -252,7 +254,7 @@ export default function AddRemoteAccessGatewayModal({
                               <Table
                                 size="small"
                                 columns={gatewayTableCols}
-                                dataSource={filteredNetworkNonIngressHosts}
+                                dataSource={filteredNetworkNonIngressNodes}
                                 rowKey="id"
                                 onRow={(node) => {
                                   return {
@@ -356,6 +358,32 @@ export default function AddRemoteAccessGatewayModal({
               </Col>
             </Row>
 
+            <Row>
+              <Col xs={24}>
+                <Form.Item
+                  label="Client config MTU"
+                  name="mtu"
+                  style={{ marginTop: '1rem' }}
+                  data-nmui-intercom="add-ingress-form_mtu"
+                >
+                  <InputNumber min={0} style={{ width: '100%' }} placeholder="Maximum Transmission Unit" />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row>
+              <Col xs={24}>
+                <Form.Item
+                  label="Client config Persistent Keepalive"
+                  name="persistentkeepalive"
+                  style={{ marginTop: '1rem' }}
+                  data-nmui-intercom="add-ingress-form_pka"
+                >
+                  <InputNumber min={0} style={{ width: '100%' }} placeholder="Persistent Keepalive" />
+                </Form.Item>
+              </Col>
+            </Row>
+
             {!isServerEE && (
               <Row>
                 <Col xs={24} ref={addClientGatewayModalIsInternetGatewayRef}>

diff --git a/src/components/modals/quick-setup-modal/QuickSetupModal.tsx b/src/components/modals/quick-setup-modal/QuickSetupModal.tsx
@@ -438,6 +438,8 @@ export default function QuickSetupModal(props: QuickSetupModalProps) {
             extclientdns: '',
             is_internet_gw: false,
             metadata: '',
+            mtu: 1500,
+            persistentkeepalive: 20,
           });
           props.notify.success({ message: `Remote access gateway created` });
           setIngressNodeId(answer);
@@ -559,6 +561,8 @@ export default function QuickSetupModal(props: QuickSetupModalProps) {
             extclientdns: '',
             is_internet_gw: false,
             metadata: '',
+            mtu: 1500,
+            persistentkeepalive: 20,
           });
           await NodesService.createExternalClient(answer, networkId, {
             clientid: '',

diff --git a/src/components/modals/update-remote-access-gateway-modal/UpdateRemoteAccessGatewayModal.tsx b/src/components/modals/update-remote-access-gateway-modal/UpdateRemoteAccessGatewayModal.tsx
@@ -1,4 +1,18 @@
-import { Button, Col, Divider, Form, Input, Modal, notification, Row, Select, Switch, Tooltip, Typography } from 'antd';
+import {
+  Button,
+  Col,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  notification,
+  Row,
+  Select,
+  Switch,
+  Tooltip,
+  Typography,
+} from 'antd';
 import { MouseEvent, useState } from 'react';
 import '../CustomModal.scss';
 import { Network } from '@/models/Network';
@@ -21,6 +35,9 @@ interface UpdateRemoteAccessGatewayModalProp {
 
 interface UpdateRemoteAccessGatewayForm {
   ingressdns: string;
+  isinternetgateway?: boolean;
+  ingresspersistentkeepalive: Node['ingresspersistentkeepalive'];
+  ingressmtu: Node['ingressmtu'];
 }
 
 export default function UpdateRemoteAccessGatewayModal({
@@ -50,6 +67,8 @@ export default function UpdateRemoteAccessGatewayModal({
         await NodesService.updateNode(ingress.id, networkId, {
           ...ingress,
           ingressdns: formData.ingressdns,
+          ingressmtu: formData.ingressmtu,
+          ingresspersistentkeepalive: formData.ingresspersistentkeepalive,
           isinternetgateway: form.getFieldValue('isinternetgateway'),
           additional_rag_ips: form.getFieldValue('additional_rag_ips'),
           metadata: form.getFieldValue('metadata'),
@@ -83,7 +102,7 @@ export default function UpdateRemoteAccessGatewayModal({
       style={{ minWidth: '50vw' }}
     >
       <Divider style={{ margin: '0px 0px 2rem 0px' }} />
-      <Form name="update-ingress-form" form={form} layout="vertical" initialValues={ingress}>
+      <Form name="update-ingress-form" form={form} layout="vertical" initialValues={{ ...ingress }}>
         <div className="" style={{ maxHeight: '60vh', overflow: 'auto' }}>
           <div className="CustomModalBody">
             <Form.Item
@@ -94,6 +113,32 @@ export default function UpdateRemoteAccessGatewayModal({
               <Input placeholder="DNS" />
             </Form.Item>
 
+            <Row>
+              <Col xs={24}>
+                <Form.Item
+                  label="Client config MTU"
+                  name="ingressmtu"
+                  style={{ marginTop: '1rem' }}
+                  data-nmui-intercom="add-ingress-form_mtu"
+                >
+                  <InputNumber min={0} style={{ width: '100%' }} placeholder="Maximum Transmission Unit" />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row>
+              <Col xs={24}>
+                <Form.Item
+                  label="Client config Persistent Keepalive"
+                  name="ingresspersistentkeepalive"
+                  style={{ marginTop: '1rem' }}
+                  data-nmui-intercom="add-ingress-form_pka"
+                >
+                  <InputNumber type="number" min={0} style={{ width: '100%' }} placeholder="Persistent Keepalive" />
+                </Form.Item>
+              </Col>
+            </Row>
+
             {isServerEE && (
               <Form.Item
                 name="additional_rag_ips"

diff --git a/src/constants/Types.ts b/src/constants/Types.ts
@@ -48,6 +48,9 @@ export const NULL_NODE: Node = {
   isegressgateway: false,
   isingressgateway: false,
   ingressdns: '',
+  ingressmtu: 0,
+  ingresspersistentkeepalive: 0,
+  metadata: '',
   egressgatewayranges: [],
   egressgatewaynatenabled: false,
   failovernode: '',

diff --git a/src/models/Node.ts b/src/models/Node.ts
@@ -19,6 +19,8 @@ export interface Node {
   isegressgateway: boolean;
   isingressgateway: boolean;
   ingressdns: string;
+  ingresspersistentkeepalive: number;
+  ingressmtu: number;
   egressgatewayranges: string[];
   egressgatewaynatenabled: boolean;
   failovernode: string;

diff --git a/src/services/dtos/CreateIngressNodeDto.ts b/src/services/dtos/CreateIngressNodeDto.ts
@@ -1,7 +1,10 @@
+import { Host } from '@/models/Host';
 import { Node } from '@/models/Node';
 
 export interface CreateIngressNodeDto {
   extclientdns: Node['ingressdns'];
   is_internet_gw: Node['isinternetgateway'];
   metadata: Node['metadata'];
+  persistentkeepalive: Host['persistentkeepalive'];
+  mtu: Host['mtu'];
 }
diff --git a/src/tests/fixtures/Models.ts b/src/tests/fixtures/Models.ts
@@ -125,6 +125,9 @@ export const stubNode1: Node = {
   isegressgateway: false,
   isingressgateway: false,
   ingressdns: '',
+  ingressmtu: 0,
+  ingresspersistentkeepalive: 0,
+  metadata: '',
   egressgatewayranges: [],
   egressgatewaynatenabled: false,
   failovernode: '',
@@ -169,6 +172,9 @@ export const stubNode2: Node = {
   isegressgateway: false,
   isingressgateway: false,
   ingressdns: '',
+  ingressmtu: 0,
+  ingresspersistentkeepalive: 0,
+  metadata: '',
   egressgatewayranges: [],
   egressgatewaynatenabled: false,
   failovernode: '',

diff --git a/src/tests/utils/NodeUtils.test.ts b/src/tests/utils/NodeUtils.test.ts
@@ -21,6 +21,9 @@ const testNode: Node = {
   isegressgateway: false,
   isingressgateway: false,
   ingressdns: '',
+  ingressmtu: 0,
+  ingresspersistentkeepalive: 0,
+  metadata: '',
   egressgatewayranges: [],
   egressgatewaynatenabled: false,
   failovernode: '',

diff --git a/src/tests/utils/Utils.test.tsx b/src/tests/utils/Utils.test.tsx
@@ -31,6 +31,9 @@ const testNode1: Node = {
   isegressgateway: false,
   isingressgateway: false,
   ingressdns: '',
+  ingressmtu: 0,
+  ingresspersistentkeepalive: 0,
+  metadata: '',
   egressgatewayranges: [],
   egressgatewaynatenabled: false,
   failovernode: '',