Merge pull request #508 from porter-dev/beta.3.separate-provisioner-tab

Fix duplicate cluster names for provisioner

dashboard/src/main/home/provisioner/AWSFormSection.tsx

@@ -28,6 +28,8 @@ type StateType = {
   awsMachineType: string;
   awsAccessId: string;
   awsSecretKey: string;
+  clusterName: string;
+  clusterNameSet: boolean;
   selectedInfras: { value: string; label: string }[];
   buttonStatus: string;
   provisionConfirmed: boolean;
@@ -77,6 +79,8 @@ class AWSFormSection extends Component<PropsType, StateType> {
     awsMachineType: "t2.medium",
     awsAccessId: "",
     awsSecretKey: "",
+    clusterName: "",
+    clusterNameSet: false,
     selectedInfras: [...provisionOptions],
     buttonStatus: "",
     provisionConfirmed: false,
@@ -85,6 +89,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
   componentDidMount = () => {
     let { infras } = this.props;
     let { selectedInfras } = this.state;
+    this.setClusterNameIfNotSet()
 
     if (infras) {
       // From the dashboard, only uncheck and disable if "creating" or "created"
@@ -101,22 +106,38 @@ class AWSFormSection extends Component<PropsType, StateType> {
     }
   };
 
+  componentDidUpdate = (prevProps : PropsType, prevState : StateType) => {
+    if (prevProps.projectName != this.props.projectName) {
+      this.setClusterNameIfNotSet()
+    }
+  }
+
+  setClusterNameIfNotSet = () => {
+    let projectName = this.props.projectName || this.context.currentProject?.name
+
+    if (!this.state.clusterNameSet && !this.state.clusterName.includes(`${projectName}-cluster`)) {
+      this.setState({
+        clusterName: `${projectName}-cluster-${Math.random().toString(36).substring(2, 8)}`
+      })
+    }
+  }
+
   checkFormDisabled = () => {
     if (!this.state.provisionConfirmed) {
       return true;
     }
 
-    let { awsRegion, awsAccessId, awsSecretKey, selectedInfras } = this.state;
+    let { awsRegion, awsAccessId, awsSecretKey, selectedInfras, clusterName } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
       return (
         !isAlphanumeric(projectName) ||
-        !(awsAccessId !== "" && awsSecretKey !== "" && awsRegion !== "") ||
+        !(awsAccessId !== "" && awsSecretKey !== "" && awsRegion !== "" && clusterName !== "") ||
         selectedInfras.length === 0
       );
     } else {
       return (
-        !(awsAccessId !== "" && awsSecretKey !== "" && awsRegion !== "") ||
+        !(awsAccessId !== "" && awsSecretKey !== "" && awsRegion !== "" && clusterName !== "") ||
         selectedInfras.length === 0
       );
     }
@@ -188,11 +209,9 @@ class AWSFormSection extends Component<PropsType, StateType> {
   };
 
   provisionEKS = () => {
-    console.log("Provisioning EKS");
-    let { awsAccessId, awsSecretKey, awsRegion, awsMachineType } = this.state;
+    let { awsAccessId, awsSecretKey, awsRegion, awsMachineType, clusterName } = this.state;
     let { currentProject } = this.context;
 
-    let clusterName = `${currentProject.name}-cluster`;
     api
       .createAWSIntegration(
         "<token>",
@@ -266,6 +285,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
       !this.state.awsAccessId ||
       !this.state.awsSecretKey ||
       !this.state.provisionConfirmed ||
+      !this.state.clusterName ||
       this.props.projectName === ""
     ) {
       return "Required fields missing";
@@ -273,6 +293,22 @@ class AWSFormSection extends Component<PropsType, StateType> {
     return this.state.buttonStatus;
   };
 
+  renderClusterNameSection = () => {
+    let { selectedInfras, clusterName } = this.state;
+
+    if (selectedInfras.length == 2 ||  (selectedInfras.length == 1 && selectedInfras[0].value === "eks")) {
+      return <InputRow
+        type="text"
+        value={clusterName}
+        setValue={(x: string) => this.setState({ clusterName: x, clusterNameSet: true })}
+        label="Cluster Name"
+        placeholder="ex: porter-cluster"
+        width="100%"
+        isRequired={true}
+      />
+    }
+  }
+
   render() {
     let { setSelectedProvisioner } = this.props;
     let {
@@ -345,6 +381,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
               this.setState({ selectedInfras: x });
             }}
           />
+          {this.renderClusterNameSection()}
           <Helper>
             By default, Porter creates a cluster with three t2.medium instances
             (2vCPUs and 4GB RAM each). AWS will bill you for any provisioned

dashboard/src/main/home/provisioner/DOFormSection.tsx

@@ -7,6 +7,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { InfraType } from "shared/types";
 
+import InputRow from "components/values-form/InputRow";
 import CheckboxRow from "components/values-form/CheckboxRow";
 import SelectRow from "components/values-form/SelectRow";
 import Helper from "components/values-form/Helper";
@@ -25,6 +26,8 @@ type StateType = {
   selectedInfras: { value: string; label: string }[];
   subscriptionTier: string;
   doRegion: string;
+  clusterName: string;
+  clusterNameSet: boolean;
   provisionConfirmed: boolean;
 };
 
@@ -57,12 +60,15 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     selectedInfras: [...provisionOptions],
     subscriptionTier: "basic",
     doRegion: "nyc1",
+    clusterName: "",
+    clusterNameSet: false,
     provisionConfirmed: false,
   };
 
   componentDidMount = () => {
     let { infras } = this.props;
     let { selectedInfras } = this.state;
+    this.setClusterNameIfNotSet()
 
     if (infras) {
       // From the dashboard, only uncheck and disable if "creating" or "created"
@@ -79,17 +85,33 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     }
   };
 
+  componentDidUpdate = (prevProps : PropsType, prevState : StateType) => {
+    if (prevProps.projectName != this.props.projectName) {
+      this.setClusterNameIfNotSet()
+    }
+  }
+
+  setClusterNameIfNotSet = () => {
+    let projectName = this.props.projectName || this.context.currentProject?.name
+
+    if (!this.state.clusterNameSet && !this.state.clusterName.includes(`${projectName}-cluster`)) {
+      this.setState({
+        clusterName: `${projectName}-cluster-${Math.random().toString(36).substring(2, 8)}`
+      })
+    }
+  }
+
   checkFormDisabled = () => {
     if (!this.state.provisionConfirmed) {
       return true;
     }
 
-    let { selectedInfras } = this.state;
+    let { selectedInfras, clusterName } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
-      return !isAlphanumeric(projectName) || selectedInfras.length === 0;
+      return !isAlphanumeric(projectName) || selectedInfras.length === 0 || !clusterName;
     } else {
-      return selectedInfras.length === 0;
+      return selectedInfras.length === 0 || !clusterName;
     }
   };
 
@@ -156,11 +178,27 @@ export default class DOFormSection extends Component<PropsType, StateType> {
         return "Project name contains illegal characters";
       }
     }
-    if (!this.state.provisionConfirmed || this.props.projectName === "") {
+    if (!this.state.provisionConfirmed || this.props.projectName === "" || !this.state.clusterName) {
       return "Required fields missing";
     }
   };
 
+  renderClusterNameSection = () => {
+    let { selectedInfras, clusterName } = this.state;
+
+    if (selectedInfras.length == 2 ||  (selectedInfras.length == 1 && selectedInfras[0].value === "eks")) {
+      return <InputRow
+        type="text"
+        value={clusterName}
+        setValue={(x: string) => this.setState({ clusterName: x, clusterNameSet: true })}
+        label="Cluster Name"
+        placeholder="ex: porter-cluster"
+        width="100%"
+        isRequired={true}
+      />
+    }
+  }
+
   render() {
     let { setSelectedProvisioner } = this.props;
     let { selectedInfras, subscriptionTier, doRegion } = this.state;
@@ -202,6 +240,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
               this.setState({ selectedInfras: x });
             }}
           />
+          {this.renderClusterNameSection()}
           <Helper>
             By default, Porter creates a cluster with three Standard (2vCPUs /
             2GB RAM) droplets. DigitalOcean will bill you for any provisioned

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -27,6 +27,8 @@ type StateType = {
   gcpRegion: string;
   gcpProjectId: string;
   gcpKeyData: string;
+  clusterName: string;
+  clusterNameSet: boolean;
   selectedInfras: { value: string; label: string }[];
   buttonStatus: string;
   provisionConfirmed: boolean;
@@ -69,6 +71,8 @@ class GCPFormSection extends Component<PropsType, StateType> {
     gcpRegion: "us-east1",
     gcpProjectId: "",
     gcpKeyData: "",
+    clusterName: "",
+    clusterNameSet: false,
     selectedInfras: [...provisionOptions],
     buttonStatus: "",
     provisionConfirmed: false,
@@ -77,6 +81,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
   componentDidMount = () => {
     let { infras } = this.props;
     let { selectedInfras } = this.state;
+    this.setClusterNameIfNotSet()
 
     if (infras) {
       // From the dashboard, only uncheck and disable if "creating" or "created"
@@ -93,22 +98,38 @@ class GCPFormSection extends Component<PropsType, StateType> {
     }
   };
 
+  componentDidUpdate = (prevProps : PropsType, prevState : StateType) => {
+    if (prevProps.projectName != this.props.projectName) {
+      this.setClusterNameIfNotSet()
+    }
+  }
+
+  setClusterNameIfNotSet = () => {
+    let projectName = this.props.projectName || this.context.currentProject?.name
+
+    if (!this.state.clusterNameSet && !this.state.clusterName.includes(`${projectName}-cluster`)) {
+      this.setState({
+        clusterName: `${projectName}-cluster-${Math.random().toString(36).substring(2, 8)}`
+      })
+    }
+  }
+
   checkFormDisabled = () => {
     if (!this.state.provisionConfirmed) {
       return true;
     }
 
-    let { gcpRegion, gcpProjectId, gcpKeyData, selectedInfras } = this.state;
+    let { gcpRegion, gcpProjectId, gcpKeyData, selectedInfras, clusterName } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
       return (
         !isAlphanumeric(projectName) ||
-        !(gcpProjectId !== "" && gcpKeyData !== "" && gcpRegion !== "") ||
+        !(gcpProjectId !== "" && gcpKeyData !== "" && gcpRegion !== "" && clusterName !== "") ||
         selectedInfras.length === 0
       );
     } else {
       return (
-        !(gcpProjectId !== "" && gcpKeyData !== "" && gcpRegion !== "") ||
+        !(gcpProjectId !== "" && gcpKeyData !== "" && gcpRegion !== "" && clusterName !== "") ||
         selectedInfras.length === 0
       );
     }
@@ -243,6 +264,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
       !this.state.gcpProjectId ||
       !this.state.gcpKeyData ||
       !this.state.provisionConfirmed ||
+      !this.state.clusterName ||
       this.props.projectName === ""
     ) {
       return "Required fields missing";
@@ -250,6 +272,22 @@ class GCPFormSection extends Component<PropsType, StateType> {
     return this.state.buttonStatus;
   };
 
+  renderClusterNameSection = () => {
+    let { selectedInfras, clusterName } = this.state;
+
+    if (selectedInfras.length == 2 ||  (selectedInfras.length == 1 && selectedInfras[0].value === "eks")) {
+      return <InputRow
+        type="text"
+        value={clusterName}
+        setValue={(x: string) => this.setState({ clusterName: x, clusterNameSet: true })}
+        label="Cluster Name"
+        placeholder="ex: porter-cluster"
+        width="100%"
+        isRequired={true}
+      />
+    }
+  }
+
   render() {
     let { setSelectedProvisioner } = this.props;
     let { gcpRegion, gcpProjectId, gcpKeyData, selectedInfras } = this.state;
@@ -308,6 +346,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
               this.setState({ selectedInfras: x });
             }}
           />
+          {this.renderClusterNameSection()}
           <Helper>
             By default, Porter creates a cluster with three e2-medium instances
             (2vCPUs and 4GB RAM each). Google Cloud will bill you for any