remove ability to specify autoscaling during cluster create (#4403)

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

@@ -131,7 +131,10 @@ const ConfigureEKSCluster: React.FC<Props> = ({ goBack }) => {
               </a>
             </Text>
             <Spacer y={1} />
-            <NodeGroups availableMachineTypes={CloudProviderAWS.machineTypes} />
+            <NodeGroups
+              availableMachineTypes={CloudProviderAWS.machineTypes}
+              isCreating
+            />
           </>,
           <>
             <Text size={16}>Provision cluster</Text>

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

@@ -162,6 +162,7 @@ const ConfigureAKSCluster: React.FC<Props> = ({ goBack }) => {
               availableMachineTypes={CloudProviderAzure.machineTypes.filter(
                 (mt) => mt.supportedRegions.includes(region)
               )}
+              isCreating
             />
           </>,
           <>

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

@@ -145,7 +145,10 @@ const ConfigureGKECluster: React.FC<Props> = ({ goBack }) => {
               </a>
             </Text>
             <Spacer y={1} />
-            <NodeGroups availableMachineTypes={CloudProviderGCP.machineTypes} />
+            <NodeGroups
+              availableMachineTypes={CloudProviderGCP.machineTypes}
+              isCreating
+            />
           </>,
           <>
             <Text size={16}>Provision cluster</Text>

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

@@ -24,17 +24,19 @@ import world from "assets/world.svg";
 type Props = {
   availableMachineTypes: ClientMachineType[];
   isDefaultExpanded?: boolean;
+  isCreating?: boolean;
 };
 const NodeGroups: React.FC<Props> = ({
   availableMachineTypes,
   isDefaultExpanded = true,
+  isCreating = false,
 }) => {
   const { control } = useFormContext<ClientClusterContract>();
   const { currentProject } = useContext(Context);
   const {
     fields: nodeGroups,
     append,
-    // remove,
+    remove,
   } = useFieldArray({
     control,
     name: "cluster.config.nodeGroups",
@@ -89,42 +91,89 @@ const NodeGroups: React.FC<Props> = ({
                     }}
                     label="Machine type"
                   />
-                  <Spacer y={1} />
-                  <Text color="helper">
-                    Minimum number of application nodes
-                  </Text>
-                  <Spacer y={0.5} />
-                  <Input
-                    width="75px"
-                    type="number"
-                    disabled={false}
-                    value={value.minInstances.toString()}
-                    setValue={(newMinInstances: string) => {
-                      onChange({
-                        ...value,
-                        minInstances: parseInt(newMinInstances),
-                      });
-                    }}
-                    placeholder="ex: 1"
-                  />
-                  <Spacer y={1} />
-                  <Text color="helper">
-                    Maximum number of application nodes
-                  </Text>
-                  <Spacer y={0.5} />
-                  <Input
-                    width="75px"
-                    type="number"
-                    disabled={false}
-                    value={value.maxInstances.toString()}
-                    setValue={(newMaxInstances: string) => {
-                      onChange({
-                        ...value,
-                        maxInstances: parseInt(newMaxInstances),
-                      });
-                    }}
-                    placeholder="ex: 10"
-                  />
+                  {isCreating ? (
+                    <>
+                      <Spacer y={1} />
+                      <PorterOperatorComponent>
+                        <>
+                          <Text color="helper">
+                            Minimum number of application nodes
+                          </Text>
+                          <Spacer y={0.5} />
+                          <Input
+                            width="75px"
+                            type="number"
+                            disabled={false}
+                            value={value.minInstances.toString()}
+                            setValue={(newMinInstances: string) => {
+                              onChange({
+                                ...value,
+                                minInstances: parseInt(newMinInstances),
+                              });
+                            }}
+                            placeholder="ex: 1"
+                          />
+                          <Spacer y={1} />
+                          <Text color="helper">
+                            Maximum number of application nodes
+                          </Text>
+                          <Spacer y={0.5} />
+                          <Input
+                            width="75px"
+                            type="number"
+                            disabled={false}
+                            value={value.maxInstances.toString()}
+                            setValue={(newMaxInstances: string) => {
+                              onChange({
+                                ...value,
+                                maxInstances: parseInt(newMaxInstances),
+                              });
+                            }}
+                            placeholder="ex: 10"
+                          />
+                        </>
+                      </PorterOperatorComponent>
+                    </>
+                  ) : (
+                    <>
+                      <Spacer y={1} />
+                      <Text color="helper">
+                        Minimum number of application nodes
+                      </Text>
+                      <Spacer y={0.5} />
+                      <Input
+                        width="75px"
+                        type="number"
+                        disabled={false}
+                        value={value.minInstances.toString()}
+                        setValue={(newMinInstances: string) => {
+                          onChange({
+                            ...value,
+                            minInstances: parseInt(newMinInstances),
+                          });
+                        }}
+                        placeholder="ex: 1"
+                      />
+                      <Spacer y={1} />
+                      <Text color="helper">
+                        Maximum number of application nodes
+                      </Text>
+                      <Spacer y={0.5} />
+                      <Input
+                        width="75px"
+                        type="number"
+                        disabled={false}
+                        value={value.maxInstances.toString()}
+                        setValue={(newMaxInstances: string) => {
+                          onChange({
+                            ...value,
+                            maxInstances: parseInt(newMaxInstances),
+                          });
+                        }}
+                        placeholder="ex: 10"
+                      />
+                    </>
+                  )}
                 </>
               )}
             />
@@ -297,16 +346,18 @@ const NodeGroups: React.FC<Props> = ({
                   <Spacer inline x={1} />
                   GPU node group
                 </Container>
-                {/* <Container row>
-                  <ActionButton
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      remove(ng.idx);
-                    }}
-                  >
-                    <span className="material-icons">delete</span>
-                  </ActionButton>
-                </Container> */}
+                {isCreating && (
+                  <Container row>
+                    <ActionButton
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        remove(ng.idx);
+                      }}
+                    >
+                      <span className="material-icons">delete</span>
+                    </ActionButton>
+                  </Container>
+                )}
               </Container>
             }
           >
@@ -332,38 +383,85 @@ const NodeGroups: React.FC<Props> = ({
                     }}
                     label="Machine type"
                   />
-                  <Spacer y={1} />
-                  <Text color="helper">Minimum number of GPU nodes</Text>
-                  <Spacer y={0.5} />
-                  <Input
-                    width="75px"
-                    type="number"
-                    disabled={false}
-                    value={value.minInstances.toString()}
-                    setValue={(newMinInstances: string) => {
-                      onChange({
-                        ...value,
-                        minInstances: parseInt(newMinInstances),
-                      });
-                    }}
-                    placeholder="ex: 1"
-                  />
-                  <Spacer y={1} />
-                  <Text color="helper">Maximum number of GPU nodes</Text>
-                  <Spacer y={0.5} />
-                  <Input
-                    width="75px"
-                    type="number"
-                    disabled={false}
-                    value={value.maxInstances.toString()}
-                    setValue={(newMaxInstances: string) => {
-                      onChange({
-                        ...value,
-                        maxInstances: parseInt(newMaxInstances),
-                      });
-                    }}
-                    placeholder="ex: 10"
-                  />
+                  {isCreating ? (
+                    <>
+                      <Spacer y={1} />
+                      <PorterOperatorComponent>
+                        <>
+                          <Text color="helper">
+                            Minimum number of GPU nodes
+                          </Text>
+                          <Spacer y={0.5} />
+                          <Input
+                            width="75px"
+                            type="number"
+                            disabled={false}
+                            value={value.minInstances.toString()}
+                            setValue={(newMinInstances: string) => {
+                              onChange({
+                                ...value,
+                                minInstances: parseInt(newMinInstances),
+                              });
+                            }}
+                            placeholder="ex: 1"
+                          />
+                          <Spacer y={1} />
+                          <Text color="helper">
+                            Maximum number of GPU nodes
+                          </Text>
+                          <Spacer y={0.5} />
+                          <Input
+                            width="75px"
+                            type="number"
+                            disabled={false}
+                            value={value.maxInstances.toString()}
+                            setValue={(newMaxInstances: string) => {
+                              onChange({
+                                ...value,
+                                maxInstances: parseInt(newMaxInstances),
+                              });
+                            }}
+                            placeholder="ex: 10"
+                          />
+                        </>
+                      </PorterOperatorComponent>
+                    </>
+                  ) : (
+                    <>
+                      <Spacer y={1} />
+                      <Text color="helper">Minimum number of GPU nodes</Text>
+                      <Spacer y={0.5} />
+                      <Input
+                        width="75px"
+                        type="number"
+                        disabled={false}
+                        value={value.minInstances.toString()}
+                        setValue={(newMinInstances: string) => {
+                          onChange({
+                            ...value,
+                            minInstances: parseInt(newMinInstances),
+                          });
+                        }}
+                        placeholder="ex: 1"
+                      />
+                      <Spacer y={1} />
+                      <Text color="helper">Maximum number of GPU nodes</Text>
+                      <Spacer y={0.5} />
+                      <Input
+                        width="75px"
+                        type="number"
+                        disabled={false}
+                        value={value.maxInstances.toString()}
+                        setValue={(newMaxInstances: string) => {
+                          onChange({
+                            ...value,
+                            maxInstances: parseInt(newMaxInstances),
+                          });
+                        }}
+                        placeholder="ex: 10"
+                      />
+                    </>
+                  )}
                 </>
               )}
             />
@@ -415,24 +513,24 @@ const I = styled.i`
   }
 `;
 
-// const ActionButton = styled.button`
-//   position: relative;
-//   border: none;
-//   background: none;
-//   color: white;
-//   padding: 5px;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   border-radius: 50%;
-//   cursor: pointer;
-//   color: #aaaabb;
-//   :hover {
-//     color: white;
-//   }
+const ActionButton = styled.button`
+  position: relative;
+  border: none;
+  background: none;
+  color: white;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  color: #aaaabb;
+  :hover {
+    color: white;
+  }
 
-//   > span {
-//     font-size: 20px;
-//   }
-//   margin-right: 5px;
-// `;
+  > span {
+    font-size: 20px;
+  }
+  margin-right: 5px;
+`;