|
@@ -12,7 +12,15 @@ import Heading from "components/form-components/Heading";
|
|
|
import Helper from "components/form-components/Helper";
|
|
import Helper from "components/form-components/Helper";
|
|
|
import InputRow from "./form-components/InputRow";
|
|
import InputRow from "./form-components/InputRow";
|
|
|
import SaveButton from "./SaveButton";
|
|
import SaveButton from "./SaveButton";
|
|
|
-import { Contract, EnumKubernetesKind, EnumCloudProvider, NodeGroupType, EKSNodeGroup, EKS, Cluster } from "@porter-dev/api-contracts";
|
|
|
|
|
|
|
+import {
|
|
|
|
|
+ Contract,
|
|
|
|
|
+ EnumKubernetesKind,
|
|
|
|
|
+ EnumCloudProvider,
|
|
|
|
|
+ NodeGroupType,
|
|
|
|
|
+ EKSNodeGroup,
|
|
|
|
|
+ EKS,
|
|
|
|
|
+ Cluster,
|
|
|
|
|
+} from "@porter-dev/api-contracts";
|
|
|
import { ClusterType } from "shared/types";
|
|
import { ClusterType } from "shared/types";
|
|
|
import Text from "./porter/Text";
|
|
import Text from "./porter/Text";
|
|
|
import Spacer from "./porter/Spacer";
|
|
import Spacer from "./porter/Spacer";
|
|
@@ -58,7 +66,7 @@ type Props = RouteComponentProps & {
|
|
|
clusterId?: number;
|
|
clusterId?: number;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
|
|
|
|
+const ProvisionerSettingsOld: React.FC<Props> = (props) => {
|
|
|
const {
|
|
const {
|
|
|
user,
|
|
user,
|
|
|
currentProject,
|
|
currentProject,
|
|
@@ -88,7 +96,7 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
} catch (err) {
|
|
} catch (err) {
|
|
|
console.log(err);
|
|
console.log(err);
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
const createCluster = async () => {
|
|
const createCluster = async () => {
|
|
|
markProvisioningStarted();
|
|
markProvisioningStarted();
|
|
@@ -127,11 +135,11 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
maxInstances: maxInstances || 10,
|
|
maxInstances: maxInstances || 10,
|
|
|
nodeGroupType: NodeGroupType.APPLICATION,
|
|
nodeGroupType: NodeGroupType.APPLICATION,
|
|
|
isStateful: false,
|
|
isStateful: false,
|
|
|
- })
|
|
|
|
|
- ]
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ }),
|
|
|
},
|
|
},
|
|
|
- })
|
|
|
|
|
|
|
+ }),
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
if (props.clusterId) {
|
|
if (props.clusterId) {
|
|
@@ -139,20 +147,15 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
|
- const res = await api.createContract(
|
|
|
|
|
- "<token>",
|
|
|
|
|
- data,
|
|
|
|
|
- { project_id: currentProject.id }
|
|
|
|
|
- );
|
|
|
|
|
|
|
+ const res = await api.createContract("<token>", data, {
|
|
|
|
|
+ project_id: currentProject.id,
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
// Only refresh and set clusters on initial create
|
|
// Only refresh and set clusters on initial create
|
|
|
if (!props.clusterId) {
|
|
if (!props.clusterId) {
|
|
|
setShouldRefreshClusters(true);
|
|
setShouldRefreshClusters(true);
|
|
|
- api.getClusters(
|
|
|
|
|
- "<token>",
|
|
|
|
|
- {},
|
|
|
|
|
- { id: currentProject.id },
|
|
|
|
|
- )
|
|
|
|
|
|
|
+ api
|
|
|
|
|
+ .getClusters("<token>", {}, { id: currentProject.id })
|
|
|
.then(({ data }) => {
|
|
.then(({ data }) => {
|
|
|
data.forEach((cluster: ClusterType) => {
|
|
data.forEach((cluster: ClusterType) => {
|
|
|
if (cluster.id === res.data.contract_revision?.cluster_id) {
|
|
if (cluster.id === res.data.contract_revision?.cluster_id) {
|
|
@@ -172,16 +175,19 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
} catch (err) {
|
|
} catch (err) {
|
|
|
console.log(err);
|
|
console.log(err);
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
setIsReadOnly(
|
|
setIsReadOnly(
|
|
|
- props.clusterId && (
|
|
|
|
|
- currentCluster.status === "UPDATING" ||
|
|
|
|
|
- currentCluster.status === "UPDATING_UNAVAILABLE"
|
|
|
|
|
- )
|
|
|
|
|
|
|
+ props.clusterId &&
|
|
|
|
|
+ (currentCluster.status === "UPDATING" ||
|
|
|
|
|
+ currentCluster.status === "UPDATING_UNAVAILABLE")
|
|
|
|
|
+ );
|
|
|
|
|
+ setClusterName(
|
|
|
|
|
+ `${currentProject.name}-cluster-${Math.random()
|
|
|
|
|
+ .toString(36)
|
|
|
|
|
+ .substring(2, 8)}`
|
|
|
);
|
|
);
|
|
|
- setClusterName(`${currentProject.name}-cluster`);
|
|
|
|
|
}, []);
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
@@ -203,7 +209,6 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
}, [props.selectedClusterVersion]);
|
|
}, [props.selectedClusterVersion]);
|
|
|
|
|
|
|
|
const renderForm = () => {
|
|
const renderForm = () => {
|
|
|
-
|
|
|
|
|
// Render simplified form if initial create
|
|
// Render simplified form if initial create
|
|
|
if (!props.clusterId) {
|
|
if (!props.clusterId) {
|
|
|
return (
|
|
return (
|
|
@@ -211,7 +216,8 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
<Text size={16}>Select an AWS region</Text>
|
|
<Text size={16}>Select an AWS region</Text>
|
|
|
<Spacer y={1} />
|
|
<Spacer y={1} />
|
|
|
<Text color="helper">
|
|
<Text color="helper">
|
|
|
- Porter will automatically provision your infrastructure in the specified region.
|
|
|
|
|
|
|
+ Porter will automatically provision your infrastructure in the
|
|
|
|
|
+ specified region.
|
|
|
</Text>
|
|
</Text>
|
|
|
<Spacer height="10px" />
|
|
<Spacer height="10px" />
|
|
|
<SelectRow
|
|
<SelectRow
|
|
@@ -225,7 +231,7 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
label="📍 AWS region"
|
|
label="📍 AWS region"
|
|
|
/>
|
|
/>
|
|
|
</>
|
|
</>
|
|
|
- )
|
|
|
|
|
|
|
+ );
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// If settings, update full form
|
|
// If settings, update full form
|
|
@@ -242,72 +248,66 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
|
|
|
setActiveValue={setAwsRegion}
|
|
setActiveValue={setAwsRegion}
|
|
|
label="📍 AWS region"
|
|
label="📍 AWS region"
|
|
|
/>
|
|
/>
|
|
|
- {
|
|
|
|
|
- user?.isPorterUser && (
|
|
|
|
|
- <Heading>
|
|
|
|
|
- <ExpandHeader
|
|
|
|
|
- onClick={() => setIsExpanded(!isExpanded)}
|
|
|
|
|
- isExpanded={isExpanded}
|
|
|
|
|
- >
|
|
|
|
|
- <i className="material-icons">arrow_drop_down</i>
|
|
|
|
|
- Advanced settings
|
|
|
|
|
- </ExpandHeader>
|
|
|
|
|
- </Heading>
|
|
|
|
|
- )
|
|
|
|
|
- }
|
|
|
|
|
- {
|
|
|
|
|
- isExpanded && (
|
|
|
|
|
- <>
|
|
|
|
|
- <SelectRow
|
|
|
|
|
- options={clusterVersionOptions}
|
|
|
|
|
- width="350px"
|
|
|
|
|
- disabled={isReadOnly}
|
|
|
|
|
- value={clusterVersion}
|
|
|
|
|
- scrollBuffer={true}
|
|
|
|
|
- dropdownMaxHeight="240px"
|
|
|
|
|
- setActiveValue={setClusterVersion}
|
|
|
|
|
- label="Cluster version"
|
|
|
|
|
- />
|
|
|
|
|
- <SelectRow
|
|
|
|
|
- options={machineTypeOptions}
|
|
|
|
|
- width="350px"
|
|
|
|
|
- disabled={isReadOnly}
|
|
|
|
|
- value={machineType}
|
|
|
|
|
- scrollBuffer={true}
|
|
|
|
|
- dropdownMaxHeight="240px"
|
|
|
|
|
- setActiveValue={setMachineType}
|
|
|
|
|
- label="Machine type"
|
|
|
|
|
- />
|
|
|
|
|
- <InputRow
|
|
|
|
|
- width="350px"
|
|
|
|
|
- type="number"
|
|
|
|
|
- disabled={isReadOnly}
|
|
|
|
|
- value={maxInstances}
|
|
|
|
|
- setValue={(x: number) => setMaxInstances(x)}
|
|
|
|
|
- label="Maximum number of application EC2 instances"
|
|
|
|
|
- placeholder="ex: 1"
|
|
|
|
|
- />
|
|
|
|
|
- <InputRow
|
|
|
|
|
- width="350px"
|
|
|
|
|
- type="string"
|
|
|
|
|
- disabled={isReadOnly}
|
|
|
|
|
- value={cidrRange}
|
|
|
|
|
- setValue={(x: string) => setCidrRange(x)}
|
|
|
|
|
- label="VPC CIDR range"
|
|
|
|
|
- placeholder="ex: 10.78.0.0/16"
|
|
|
|
|
- />
|
|
|
|
|
- </>
|
|
|
|
|
- )
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ {user?.isPorterUser && (
|
|
|
|
|
+ <Heading>
|
|
|
|
|
+ <ExpandHeader
|
|
|
|
|
+ onClick={() => setIsExpanded(!isExpanded)}
|
|
|
|
|
+ isExpanded={isExpanded}
|
|
|
|
|
+ >
|
|
|
|
|
+ <i className="material-icons">arrow_drop_down</i>
|
|
|
|
|
+ Advanced settings
|
|
|
|
|
+ </ExpandHeader>
|
|
|
|
|
+ </Heading>
|
|
|
|
|
+ )}
|
|
|
|
|
+ {isExpanded && (
|
|
|
|
|
+ <>
|
|
|
|
|
+ <SelectRow
|
|
|
|
|
+ options={clusterVersionOptions}
|
|
|
|
|
+ width="350px"
|
|
|
|
|
+ disabled={isReadOnly}
|
|
|
|
|
+ value={clusterVersion}
|
|
|
|
|
+ scrollBuffer={true}
|
|
|
|
|
+ dropdownMaxHeight="240px"
|
|
|
|
|
+ setActiveValue={setClusterVersion}
|
|
|
|
|
+ label="Cluster version"
|
|
|
|
|
+ />
|
|
|
|
|
+ <SelectRow
|
|
|
|
|
+ options={machineTypeOptions}
|
|
|
|
|
+ width="350px"
|
|
|
|
|
+ disabled={isReadOnly}
|
|
|
|
|
+ value={machineType}
|
|
|
|
|
+ scrollBuffer={true}
|
|
|
|
|
+ dropdownMaxHeight="240px"
|
|
|
|
|
+ setActiveValue={setMachineType}
|
|
|
|
|
+ label="Machine type"
|
|
|
|
|
+ />
|
|
|
|
|
+ <InputRow
|
|
|
|
|
+ width="350px"
|
|
|
|
|
+ type="number"
|
|
|
|
|
+ disabled={isReadOnly}
|
|
|
|
|
+ value={maxInstances}
|
|
|
|
|
+ setValue={(x: number) => setMaxInstances(x)}
|
|
|
|
|
+ label="Maximum number of application EC2 instances"
|
|
|
|
|
+ placeholder="ex: 1"
|
|
|
|
|
+ />
|
|
|
|
|
+ <InputRow
|
|
|
|
|
+ width="350px"
|
|
|
|
|
+ type="string"
|
|
|
|
|
+ disabled={isReadOnly}
|
|
|
|
|
+ value={cidrRange}
|
|
|
|
|
+ setValue={(x: string) => setCidrRange(x)}
|
|
|
|
|
+ label="VPC CIDR range"
|
|
|
|
|
+ placeholder="ex: 10.78.0.0/16"
|
|
|
|
|
+ />
|
|
|
|
|
+ </>
|
|
|
|
|
+ )}
|
|
|
</>
|
|
</>
|
|
|
- )
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ );
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
- <StyledForm>
|
|
|
|
|
- {renderForm()}
|
|
|
|
|
- </StyledForm>
|
|
|
|
|
|
|
+ <StyledForm>{renderForm()}</StyledForm>
|
|
|
<SaveButton
|
|
<SaveButton
|
|
|
disabled={(!clusterName && true) || isReadOnly}
|
|
disabled={(!clusterName && true) || isReadOnly}
|
|
|
onClick={createCluster}
|
|
onClick={createCluster}
|
|
@@ -329,7 +329,8 @@ const ExpandHeader = styled.div<{ isExpanded: boolean }>`
|
|
|
> i {
|
|
> i {
|
|
|
margin-right: 7px;
|
|
margin-right: 7px;
|
|
|
margin-left: -7px;
|
|
margin-left: -7px;
|
|
|
- transform: ${(props) => props.isExpanded ? "rotate(0deg)" : "rotate(-90deg)"};
|
|
|
|
|
|
|
+ transform: ${(props) =>
|
|
|
|
|
+ props.isExpanded ? "rotate(0deg)" : "rotate(-90deg)"};
|
|
|
}
|
|
}
|
|
|
`;
|
|
`;
|
|
|
|
|
|
|
@@ -341,4 +342,4 @@ const StyledForm = styled.div`
|
|
|
border: 1px solid #494b4f;
|
|
border: 1px solid #494b4f;
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
margin-bottom: 30px;
|
|
margin-bottom: 30px;
|
|
|
-`;
|
|
|
|
|
|
|
+`;
|