Boink (#4066)

dashboard/src/components/GCPProvisionerSettings.tsx

@@ -73,11 +73,18 @@ const instanceTypes = [
   { value: "e2-standard-8", label: "e2-standard-8" },
   { value: "e2-standard-16", label: "e2-standard-16" },
   { value: "e2-standard-32", label: "e2-standard-32" },
-  // { value: "n1-standard-1", label: "n1-standard-1" }, // start of GPU nodes. 
-  // { value: "n1-standard-2", label: "n1-standard-2" },
-  // { value: "n1-standard-4", label: "n1-standard-4" },
-  // { value: "n1-standard-8", label: "n1-standard-8" },
-  // { value: "n1-standard-16", label: "n1-standard-16" }, // Maximum of 1 GPU per node until further notice
+  { value: "c3-standard-4", label: "c3-standard-4" },
+  { value: "c3-standard-8", label: "c3-standard-8" },
+  { value: "c3-standard-22", label: "c3-standard-22" },
+  { value: "c3-standard-44", label: "c3-standard-44" },
+  { value: "c3-highcpu-4", label: "c3-highcpu-4" },
+  { value: "c3-highcpu-8", label: "c3-highcpu-8" },
+  { value: "c3-highcpu-22", label: "c3-highcpu-22" },
+  { value: "c3-highcpu-44", label: "c3-highcpu-44" },
+  { value: "c3-highmem-4", label: "c3-highmem-4" },
+  { value: "c3-highmem-8", label: "c3-highmem-8" },
+  { value: "c3-highmem-22", label: "c3-highmem-22" },
+  { value: "c3-highmem-44", label: "c3-highmem-44" }, // Maximum of 1 GPU per node until further notice
 ];
 
 const gpuMachineTypeOptions = [
@@ -131,7 +138,7 @@ const GCPProvisionerSettings: React.FC<Props> = (props) => {
   const [gpuMinInstances, setGpuMinInstances] = useState(1);
   const [gpuMaxInstances, setGpuMaxInstances] = useState(5);
   const [gpuInstanceType, setGpuInstanceType] = useState("n1-standard-1");
-
+  const [expandAdvancedCidrs, setAdvancedCidrs] = useState(false);
   const { showIntercomWithMessage } = useIntercom();
 
   const markStepStarted = async (step: string, region?: string) => {
@@ -183,11 +190,11 @@ const GCPProvisionerSettings: React.FC<Props> = (props) => {
     if (!region) {
       return "GCP region is required";
     }
-    if (!clusterNetworking.cidrRange) {
-      return "VPC CIDR range is required";
+    if (!clusterNetworking.cidrRange || !clusterNetworking.controlPlaneCidr || !clusterNetworking.podCidr || !clusterNetworking.serviceCidr) {
+      return "CIDR ranges are required";
     }
-    if (!VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.cidrRange)) {
-      return "VPC CIDR range must be in the format of [0-255].[0-255].0.0/16";
+    if (!VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.cidrRange) || !VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.controlPlaneCidr) || !VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.podCidr) || !VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.serviceCidr)) {
+      return "CIDR ranges must be in the format of [0-255].[0-255].0.0/16";
     }
 
     return "";
@@ -242,8 +249,51 @@ const GCPProvisionerSettings: React.FC<Props> = (props) => {
                 label="VPC CIDR range"
                 placeholder="ex: 10.78.0.0/16"
               />
-              <Spacer y={0.25} />
-              <Text color="helper">The following ranges will be used: {clusterNetworking.cidrRange}, {clusterNetworking.controlPlaneCidr}, {clusterNetworking.serviceCidr}, {clusterNetworking.podCidr}</Text>
+              {
+                <Heading>
+                  <ExpandHeader
+                    onClick={() => {
+                      setAdvancedCidrs(!expandAdvancedCidrs);
+                    }}
+                    isExpanded={expandAdvancedCidrs}
+                  >
+                    <i className="material-icons">arrow_drop_down</i>
+                    Advanced CIDR settings
+                  </ExpandHeader>
+                </Heading>
+              }
+              {expandAdvancedCidrs && <>
+                <InputRow
+                  width="350px"
+                  type="string"
+                  disabled={isReadOnly}
+                  value={clusterNetworking.controlPlaneCidr}
+                  setValue={(x: string) => setClusterNetworking(new GKENetwork({ ...clusterNetworking, controlPlaneCidr: x }))}
+                  label="Control Plane CIDR range"
+                  placeholder="ex: 10.78.0.0/16"
+                />
+                <InputRow
+                  width="350px"
+                  type="string"
+                  disabled={isReadOnly}
+                  value={clusterNetworking.podCidr}
+                  setValue={(x: string) => setClusterNetworking(new GKENetwork({ ...clusterNetworking, podCidr: x }))}
+                  label="Pod CIDR range"
+                  placeholder="ex: 10.78.0.0/16"
+                />
+                <InputRow
+                  width="350px"
+                  type="string"
+                  disabled={isReadOnly}
+                  value={clusterNetworking.serviceCidr}
+                  setValue={(x: string) => setClusterNetworking(new GKENetwork({ ...clusterNetworking, serviceCidr: x }))}
+                  label="Service CIDR range"
+                  placeholder="ex: 10.78.0.0/16"
+                />
+                <Spacer y={0.25} />
+                <Text color="helper">The following ranges will be used: {clusterNetworking.cidrRange}, {clusterNetworking.controlPlaneCidr}, {clusterNetworking.serviceCidr}, {clusterNetworking.podCidr}</Text>
+              </>
+              }
             </>
           )
         }
@@ -257,7 +307,11 @@ const GCPProvisionerSettings: React.FC<Props> = (props) => {
     if (!clusterNetworking.cidrRange) {
       return "VPC CIDR range is required";
     }
-    if (!VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.cidrRange)) {
+    if (!VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.cidrRange)
+      || !VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.controlPlaneCidr)
+      || !VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.podCidr)
+      || !VALID_CIDR_RANGE_PATTERN.test(clusterNetworking.serviceCidr)
+    ) {
       return "VPC CIDR range must be in the format of [0-255].[0-255].0.0/16";
     }