Skip to content

Commit

Permalink
remove ability to specify autoscaling during cluster create (#4403)
Browse files Browse the repository at this point in the history
  • Loading branch information
Feroze Mohideen authored Mar 13, 2024
1 parent a7676e8 commit e7cf03a
Show file tree
Hide file tree
Showing 4 changed files with 206 additions and 101 deletions.
5 changes: 4 additions & 1 deletion dashboard/src/main/home/infrastructure-dashboard/forms/aws/ConfigureEKSCluster.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions dashboard/src/main/home/infrastructure-dashboard/forms/azure/ConfigureAKSCluster.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ const ConfigureAKSCluster: React.FC<Props> = ({ goBack }) => {
availableMachineTypes={CloudProviderAzure.machineTypes.filter(
(mt) => mt.supportedRegions.includes(region)
)}
isCreating
/>
</>,
<>
Expand Down
5 changes: 4 additions & 1 deletion dashboard/src/main/home/infrastructure-dashboard/forms/gcp/ConfigureGKECluster.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
296 changes: 197 additions & 99 deletions dashboard/src/main/home/infrastructure-dashboard/shared/NodeGroups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
/>
</>
)}
</>
)}
/>
Expand Down Expand Up @@ -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>
}
>
Expand All @@ -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"
/>
</>
)}
</>
)}
/>
Expand Down Expand Up @@ -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;
`;

0 comments on commit e7cf03a

Please sign in to comment.