[POR-1072] Fix Bugs on Infra Settings (#2868)

* Infra Reload and Delete bugs

* Remove Comments

---------

Co-authored-by: Soham Dessai <sohamdessai@sohams-mbp.mynetworksettings.com>

dashboard/src/components/ProvisionerSettings.tsx

@@ -104,7 +104,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
   };
 
   const getStatus = () => {
-    if (isReadOnly) {
+    if (isReadOnly && props.provisionerError == "") {
       return "Provisioning is still in progress...";
     } else if (errorMessage) {
       return (
@@ -239,7 +239,11 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
         (currentCluster.status === "UPDATING" ||
           currentCluster.status === "UPDATING_UNAVAILABLE")
     );
-    setClusterName(`${currentProject.name}-cluster`);
+    setClusterName(
+      ` ${currentProject.name}-cluster-${Math.random()
+        .toString(36)
+        .substring(2, 8)}`
+    );
   }, []);
 
   useEffect(() => {
@@ -362,7 +366,9 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
       <StyledForm>{renderForm()}</StyledForm>
       <Button
         disabled={
-          (!clusterName && true) || isReadOnly || props.provisionerError == ""
+          (!clusterName && true) ||
+          (isReadOnly && props.provisionerError == "") ||
+          props.provisionerError == ""
         }
         onClick={createCluster}
         status={getStatus()}

dashboard/src/components/ProvisionerSettingsOld.tsx

@@ -12,7 +12,15 @@ import Heading from "components/form-components/Heading";
 import Helper from "components/form-components/Helper";
 import InputRow from "./form-components/InputRow";
 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 Text from "./porter/Text";
 import Spacer from "./porter/Spacer";
@@ -58,7 +66,7 @@ type Props = RouteComponentProps & {
   clusterId?: number;
 };
 
-const ProvisionerSettingsOld: React.FC<Props> = props => {
+const ProvisionerSettingsOld: React.FC<Props> = (props) => {
   const {
     user,
     currentProject,
@@ -88,7 +96,7 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
     } catch (err) {
       console.log(err);
     }
-  }
+  };
 
   const createCluster = async () => {
     markProvisioningStarted();
@@ -127,11 +135,11 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
                 maxInstances: maxInstances || 10,
                 nodeGroupType: NodeGroupType.APPLICATION,
                 isStateful: false,
-              })
-            ]
-          })
+              }),
+            ],
+          }),
         },
-      })
+      }),
     });
 
     if (props.clusterId) {
@@ -139,20 +147,15 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
     }
 
     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
       if (!props.clusterId) {
         setShouldRefreshClusters(true);
-        api.getClusters(
-          "<token>",
-          {},
-          { id: currentProject.id },
-        )
+        api
+          .getClusters("<token>", {}, { id: currentProject.id })
           .then(({ data }) => {
             data.forEach((cluster: ClusterType) => {
               if (cluster.id === res.data.contract_revision?.cluster_id) {
@@ -172,16 +175,19 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
     } catch (err) {
       console.log(err);
     }
-  }
+  };
 
   useEffect(() => {
     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(() => {
@@ -203,7 +209,6 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
   }, [props.selectedClusterVersion]);
 
   const renderForm = () => {
-
     // Render simplified form if initial create
     if (!props.clusterId) {
       return (
@@ -211,7 +216,8 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
           <Text size={16}>Select an AWS region</Text>
           <Spacer y={1} />
           <Text color="helper">
-            Porter will automatically provision your infrastructure in the specified region.
+            Porter will automatically provision your infrastructure in the
+            specified region.
           </Text>
           <Spacer height="10px" />
           <SelectRow
@@ -225,7 +231,7 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
             label="📍 AWS region"
           />
         </>
-      )
+      );
     }
 
     // If settings, update full form
@@ -242,72 +248,66 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
           setActiveValue={setAwsRegion}
           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 (
     <>
-      <StyledForm>
-        {renderForm()}
-      </StyledForm>
+      <StyledForm>{renderForm()}</StyledForm>
       <SaveButton
         disabled={(!clusterName && true) || isReadOnly}
         onClick={createCluster}
@@ -329,7 +329,8 @@ const ExpandHeader = styled.div<{ isExpanded: boolean }>`
   > i {
     margin-right: 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;
   font-size: 13px;
   margin-bottom: 30px;
-`;
+`;

dashboard/src/main/home/cluster-dashboard/dashboard/ClusterSettings.tsx

@@ -360,6 +360,10 @@ const ClusterSettings: React.FC<Props> = (props) => {
         <Heading>Delete cluster</Heading>
         {helperText}
         <Button
+          disabled={
+            currentCluster.status == "UPDATING_UNAVAILABLE" ||
+            currentCluster.status == "UPDATING"
+          }
           color="#b91133"
           onClick={() => setCurrentModal("UpdateClusterModal")}
         >

dashboard/src/main/home/cluster-dashboard/dashboard/ProvisionerStatus.tsx

@@ -16,33 +16,50 @@ type Props = {
 
 const PROVISIONING_STATUS_POLL_INTERVAL = 60 * 1000; // poll every minute
 
-const ProvisionerStatus: React.FC<Props> = ({
-  provisionFailureReason,
-}) => {
+const ProvisionerStatus: React.FC<Props> = ({ provisionFailureReason }) => {
   const { currentProject, currentCluster } = useContext(Context);
   const [progress, setProgress] = useState(1);
 
-  // Continuously poll provisioning status
-  const pollProvisioningStatus = async () => {
+  // Continuously poll provisioning status and cluster status
+  const pollProvisioningAndClusterStatus = async () => {
     try {
-      const res = await api.getClusterState(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          cluster_id: currentCluster.id,
-        }
-      );
-      const { is_control_plane_ready, is_infrastructure_ready, phase } = res.data;
+      const [resState, resStatus] = await Promise.all([
+        api.getClusterState(
+          "<token>",
+          {},
+          {
+            project_id: currentProject.id,
+            cluster_id: currentCluster.id,
+          }
+        ),
+        api.getCluster(
+          "<token>",
+          {},
+          {
+            project_id: currentProject.id,
+            cluster_id: currentCluster.id,
+          }
+        ),
+      ]);
+
+      const {
+        is_control_plane_ready,
+        is_infrastructure_ready,
+        phase,
+      } = resState.data;
+      const status = resStatus.data.status;
       let progress = 1;
       if (is_control_plane_ready) {
-        progress += 1
+        progress += 1;
       }
       if (is_infrastructure_ready) {
-        progress += 1
+        progress += 1;
+      }
+      if (phase === "Provisioned") {
+        progress += 1;
       }
-      if (phase === 'Provisioned') {
-        progress += 1
+      if (status === "READY") {
+        window.location.reload();
       }
       setProgress(progress);
     } catch (err) {
@@ -51,8 +68,11 @@ const ProvisionerStatus: React.FC<Props> = ({
   };
 
   useEffect(() => {
-    const intervalId = setInterval(pollProvisioningStatus, PROVISIONING_STATUS_POLL_INTERVAL);
-    pollProvisioningStatus();
+    const intervalId = setInterval(
+      pollProvisioningAndClusterStatus,
+      PROVISIONING_STATUS_POLL_INTERVAL
+    );
+    pollProvisioningAndClusterStatus();
     return () => clearInterval(intervalId);
   }, []);
 
@@ -66,19 +86,18 @@ const ProvisionerStatus: React.FC<Props> = ({
         <Spacer height="18px" />
         <LoadingBar
           color={provisionFailureReason ? "failed" : undefined}
-          completed={progress} 
-          total={4} 
+          completed={progress}
+          total={4}
         />
         <Spacer height="18px" />
         <Text color="#aaaabb">
-          Setup can take up to 20 minutes. You can close this window and come back later. 
+          Setup can take up to 20 minutes. You can close this window and come
+          back later.
         </Text>
       </HeaderSection>
-      {
-        provisionFailureReason && (
-          <DummyLogs>Error: {provisionFailureReason}</DummyLogs>
-        )
-      }
+      {provisionFailureReason && (
+        <DummyLogs>Error: {provisionFailureReason}</DummyLogs>
+      )}
     </StyledProvisionerStatus>
   );
 };
@@ -117,4 +136,4 @@ const StyledProvisionerStatus = styled.div`
   font-size: 13px;
   width: 100%;
   overflow: hidden;
-`;
+`;

dashboard/src/main/home/dashboard/ClusterSection.tsx

@@ -10,8 +10,7 @@ import ClusterList from "./ClusterList";
 import TitleSection from "components/TitleSection";
 import Spacer from "components/porter/Spacer";
 
-type Props = {
-};
+type Props = {};
 
 const ClusterSection = (props: Props) => {
   const { usage, currentCluster } = useContext(Context);
@@ -84,7 +83,8 @@ const ClusterSection = (props: Props) => {
         </TitleSection>
         <Spacer y={1} />
         <Banner>
-          You have currently provisioned {usage?.current.cluster || "0"} out of {usage?.limit.clusters || "0"} clusters for this project.
+          You have currently provisioned {usage?.current.cluster || "0"} out of{" "}
+          {usage?.limit.clusters || "0"} clusters for this project.
         </Banner>
         <Br />
         <ProvisionerFlow />
@@ -93,11 +93,11 @@ const ClusterSection = (props: Props) => {
   }
   return (
     <>
-      {(usage?.current.cluster > 1 || !currentCluster) && (
-        <Button onClick={() => setCurrentStep("cloud")}>
-          <i className="material-icons">add</i> Create a cluster
-        </Button>
-      )}
+      {/* {(usage?.current.cluster > 1 || !currentCluster) && ( */}
+      <Button onClick={() => setCurrentStep("cloud")}>
+        <i className="material-icons">add</i> Create a cluster
+      </Button>
+      {/* )} */}
       <ClusterList />
     </>
   );
@@ -107,7 +107,7 @@ export default ClusterSection;
 
 const Br = styled.div<{ height?: string }>`
   width: 100%;
-  height: ${props => props.height || "30px"};
+  height: ${(props) => props.height || "30px"};
 `;
 
 const ClusterIcon = styled.div`
@@ -173,4 +173,4 @@ const Button = styled.div`
     margin-right: 5px;
     justify-content: center;
   }
-`;
+`;