add support for service cidr, show it in the create form (#4364)

dashboard/src/lib/clusters/index.ts

@@ -97,8 +97,9 @@ function clientEKSConfigToProto(
       });
     }),
     network: new AWSClusterNetwork({
-      ...(existingConfig?.network ?? { serviceCidr: "172.20.0.0/16" }), // serviceCidr explicitly added for backwards compatibility with contracts without network fields
+      ...(existingConfig?.network ?? {}),
       vpcCidr: clientConfig.cidrRange,
+      serviceCidr: clientConfig.serviceCidrRange,
     }),
     loadBalancer: new LoadBalancer({
       loadBalancerType: match(clientConfig.loadBalancer.type)
@@ -164,6 +165,7 @@ function clientGKEConfigToProto(
     network: new GKENetwork({
       ...(existingConfig?.network ?? {}),
       cidrRange: clientConfig.cidrRange,
+      serviceCidr: clientConfig.serviceCidrRange,
     }),
   });
 }
@@ -251,6 +253,7 @@ const clientEKSConfigFromProto = (value: EKS): EKSClientClusterConfig => {
       };
     }),
     cidrRange: value.network?.vpcCidr ?? value.cidrRange ?? "", // network will always be provided in one of those fields
+    serviceCidrRange: value.network?.serviceCidr ?? "172.20.0.0/16", // serviceCidr explicitly added for backwards compatibility with contracts without network fields
     logging: {
       isApiServerLogsEnabled: value.logging?.enableApiServerLogs ?? false,
       isAuditLogsEnabled: value.logging?.enableAuditLogs ?? false,
@@ -321,6 +324,7 @@ const clientGKEConfigFromProto = (value: GKE): GKEClientClusterConfig => {
       };
     }),
     cidrRange: value.network?.cidrRange ?? "", // network will always be provided
+    serviceCidrRange: value.network?.serviceCidr ?? "",
   };
 };
 
@@ -349,5 +353,6 @@ const clientAKSConfigFromProto = (value: AKS): AKSClientClusterConfig => {
       .with(AksSkuTier.STANDARD, () => "STANDARD" as const)
       .otherwise(() => "UNKNOWN" as const),
     cidrRange: value.cidrRange,
+    serviceCidrRange: "172.20.0.0/16", // not yet supported by AKS, this is a placeholder
   };
 };

dashboard/src/lib/clusters/types.ts

@@ -418,6 +418,7 @@ const eksConfigValidator = z.object({
   region: awsRegionValidator,
   nodeGroups: eksNodeGroupValidator.array(),
   cidrRange: cidrRangeValidator,
+  serviceCidrRange: cidrRangeValidator,
   logging: z
     .object({
       isApiServerLogsEnabled: z.boolean(),
@@ -472,6 +473,7 @@ const gkeConfigValidator = z.object({
   region: gcpRegionValidator,
   nodeGroups: gkeNodeGroupValidator.array(),
   cidrRange: cidrRangeValidator,
+  serviceCidrRange: cidrRangeValidator,
 });
 const aksConfigValidator = z.object({
   kind: z.literal("AKS"),
@@ -481,6 +483,7 @@ const aksConfigValidator = z.object({
   nodeGroups: aksNodeGroupValidator.array(),
   skuTier: z.enum(["UNKNOWN", "FREE", "STANDARD"]),
   cidrRange: cidrRangeValidator,
+  serviceCidrRange: cidrRangeValidator,
 });
 const clusterConfigValidator = z.discriminatedUnion("kind", [
   eksConfigValidator,

dashboard/src/main/home/infrastructure-dashboard/forms/aws/ConfigureEKSCluster.tsx

@@ -93,7 +93,7 @@ const ConfigureEKSCluster: React.FC<Props> = ({ goBack }) => {
               <Text size={16}>CIDR range</Text>
               <Spacer y={0.5} />
               <Text color="helper">
-                Specify the CIDR range for your cluster.
+                Specify the VPC CIDR range for your cluster.
               </Text>
               <Spacer y={0.7} />
               <ControlledInput
@@ -103,6 +103,18 @@ const ConfigureEKSCluster: React.FC<Props> = ({ goBack }) => {
                 error={errors.cluster?.config?.cidrRange?.message}
                 {...register("cluster.config.cidrRange")}
               />
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Specify the service CIDR range for your cluster.
+              </Text>
+              <Spacer y={0.7} />
+              <ControlledInput
+                placeholder="ex: 172.20.0.0/16"
+                type="text"
+                width="300px"
+                error={errors.cluster?.config?.serviceCidrRange?.message}
+                {...register("cluster.config.serviceCidrRange")}
+              />
             </>
           ) : null,
           <>

dashboard/src/main/home/infrastructure-dashboard/forms/aws/CreateEKSClusterForm.tsx

@@ -61,6 +61,7 @@ const CreateEKSClusterForm: React.FC<Props> = ({
             },
           ],
           cidrRange: "10.78.0.0/16",
+          serviceCidrRange: "172.20.0.0/16",
         },
       },
     });

dashboard/src/main/home/infrastructure-dashboard/forms/azure/CreateAKSClusterForm.tsx

@@ -62,6 +62,7 @@ const CreateAKSClusterForm: React.FC<Props> = ({
             },
           ],
           cidrRange: "10.78.0.0/16",
+          serviceCidrRange: "172.20.0.0/16", // does not actually go into contract because not supported there yet
           skuTier: "FREE" as const,
         },
       },

dashboard/src/main/home/infrastructure-dashboard/forms/gcp/ConfigureGKECluster.tsx

@@ -98,7 +98,7 @@ const ConfigureGKECluster: React.FC<Props> = ({ goBack }) => {
               <Text size={16}>CIDR range</Text>
               <Spacer y={0.5} />
               <Text color="helper">
-                Specify the CIDR range for your cluster.
+                Specify the VPC CIDR range for your cluster.
               </Text>
               <Spacer y={0.7} />
               <ControlledInput
@@ -108,6 +108,18 @@ const ConfigureGKECluster: React.FC<Props> = ({ goBack }) => {
                 error={errors.cluster?.config?.cidrRange?.message}
                 {...register("cluster.config.cidrRange")}
               />
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Specify the service CIDR range for your cluster.
+              </Text>
+              <Spacer y={0.7} />
+              <ControlledInput
+                placeholder="ex: 172.20.0.0/16"
+                type="text"
+                width="300px"
+                error={errors.cluster?.config?.serviceCidrRange?.message}
+                {...register("cluster.config.serviceCidrRange")}
+              />
             </>
           ) : null,
           <>

dashboard/src/main/home/infrastructure-dashboard/forms/gcp/CreateGKEClusterForm.tsx

@@ -63,6 +63,7 @@ const CreateGKEClusterForm: React.FC<Props> = ({
             },
           ],
           cidrRange: "10.78.0.0/16",
+          serviceCidrRange: "172.20.0.0/16",
         },
       },
     });

dashboard/src/main/home/infrastructure-dashboard/shared/NodeGroups.tsx

@@ -22,8 +22,12 @@ import world from "assets/world.svg";
 
 type Props = {
   availableMachineTypes: ClientMachineType[];
+  isDefaultExpanded?: boolean;
 };
-const NodeGroups: React.FC<Props> = ({ availableMachineTypes }) => {
+const NodeGroups: React.FC<Props> = ({
+  availableMachineTypes,
+  isDefaultExpanded = true,
+}) => {
   const { control } = useFormContext<ClientClusterContract>();
   const { currentProject } = useContext(Context);
   const {
@@ -52,7 +56,7 @@ const NodeGroups: React.FC<Props> = ({ availableMachineTypes }) => {
       {displayableNodeGroups.APPLICATION?.map((ng) => {
         return (
           <Expandable
-            preExpanded={false}
+            preExpanded={isDefaultExpanded}
             key={ng.nodeGroup.id}
             header={
               <Container row>
@@ -129,7 +133,7 @@ const NodeGroups: React.FC<Props> = ({ availableMachineTypes }) => {
       {displayableNodeGroups.CUSTOM?.map((ng) => {
         return (
           <Expandable
-            preExpanded={false}
+            preExpanded={isDefaultExpanded}
             key={ng.nodeGroup.id}
             header={
               <Container row spaced>

dashboard/src/main/home/infrastructure-dashboard/tabs/overview/AKSClusterOverview.tsx

@@ -77,6 +77,7 @@ const AKSClusterOverview: React.FC = () => {
         availableMachineTypes={CloudProviderAzure.machineTypes.filter((mt) =>
           mt.supportedRegions.includes(region)
         )}
+        isDefaultExpanded={false}
       />
     </>
   );

dashboard/src/main/home/infrastructure-dashboard/tabs/overview/EKSClusterOverview.tsx

@@ -61,7 +61,10 @@ const EKSClusterOverview: React.FC = () => {
         </a>
       </Text>
       <Spacer y={1} />
-      <NodeGroups availableMachineTypes={CloudProviderAWS.machineTypes} />
+      <NodeGroups
+        availableMachineTypes={CloudProviderAWS.machineTypes}
+        isDefaultExpanded={false}
+      />
     </>
   );
 };

dashboard/src/main/home/infrastructure-dashboard/tabs/overview/GKEClusterOverview.tsx

@@ -51,7 +51,10 @@ const GKEClusterOverview: React.FC = () => {
         </a>
       </Text>
       <Spacer y={1} />
-      <NodeGroups availableMachineTypes={CloudProviderGCP.machineTypes} />
+      <NodeGroups
+        availableMachineTypes={CloudProviderGCP.machineTypes}
+        isDefaultExpanded={false}
+      />
     </>
   );
 };