Instance type change (#3695)

Co-authored-by: Trevor Shim <trevorshim@Trevors-MacBook-Air.local>

dashboard/src/components/ProvisionerSettings.tsx

@@ -91,10 +91,6 @@ const machineTypeOptions = [
   { value: "g4dn.xlarge", label: "g4dn.xlarge" },
 ];
 
-const clusterVersionOptions = [
-  { value: "v1.24.0", label: "1.24.0" },
-];
-
 const defaultCidrVpc = "10.78.0.0/16"
 const defaultCidrServices = "172.20.0.0/16"
 
@@ -140,7 +136,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
   >([]);
   const [cidrRangeVPC, setCidrRangeVPC] = useState(defaultCidrVpc);
   const [cidrRangeServices, setCidrRangeServices] = useState(defaultCidrServices);
-  const [clusterVersion, setClusterVersion] = useState("v1.24.0");
+  const [clusterVersion, setClusterVersion] = useState("v1.27.0");
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string>(undefined);
   const [isClicked, setIsClicked] = useState(false);
@@ -299,7 +295,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
           case: "eksKind",
           value: new EKS({
             clusterName,
-            clusterVersion: clusterVersion || "v1.24.0",
+            clusterVersion: clusterVersion || "v1.27.0",
             cidrRange: cidrRangeVPC || defaultCidrVpc, // deprecated in favour of network.cidrRangeVPC: can be removed after december 2023
             region: awsRegion,
             loadBalancer: loadBalancerObj,
@@ -413,11 +409,12 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
         setErrorMessage(DEFAULT_ERROR_MESSAGE);
       }
       markStepStarted("provisioning-failed", errMessage);
-    } finally {
+      
+      // enable edit again only in the case of an error
+      setIsClicked(false);
       setIsReadOnly(false);
+    } finally {
       setIsLoading(false);
-
-      setIsClicked(false);
     }
   };
 
@@ -436,7 +433,6 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
 
   useEffect(() => {
     const contract = props.selectedClusterVersion as any;
-
     if (contract?.cluster) {
       let eksValues: EKS = contract.cluster?.eksKind as EKS;
       if (eksValues == null) {
@@ -577,14 +573,15 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
           isExpanded && (
             <>
               {user?.isPorterUser && (
-                <Select
-                  options={clusterVersionOptions}
-                  width="350px"
-                  disabled={isReadOnly}
-                  value={clusterVersion}
-                  setValue={setClusterVersion}
-                  label="Cluster version"
-                />
+                <Input
+                width="350px"
+                type="string"
+                value={clusterVersion}
+                disabled={true}
+                setValue={(x: string) => setCidrRangeServices(x)}
+                label="Cluster version (only shown to porter.run emails)"
+              />
+
               )}
               <Spacer y={1} />
               <Select
@@ -632,7 +629,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
                 width="350px"
                 type="string"
                 value={cidrRangeVPC}
-                disabled={!user.isPorterUser}
+                disabled={props.clusterId}
                 setValue={(x: string) => setCidrRangeVPC(x)}
                 label="CIDR range for AWS VPC"
                 placeholder="ex: 10.78.0.0/16"
@@ -642,7 +639,7 @@ const ProvisionerSettings: React.FC<Props> = (props) => {
                 width="350px"
                 type="string"
                 value={cidrRangeServices}
-                disabled={!user.isPorterUser}
+                disabled={props.clusterId}
                 setValue={(x: string) => setCidrRangeServices(x)}
                 label="CIDR range for Kubernetes internal services"
                 placeholder="ex: 172.20.0.0/16"

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

@@ -357,7 +357,7 @@ const ClusterSettings: React.FC<Props> = (props) => {
         {/* Disabled this field due to https://discord.com/channels/542888846271184896/856554532972134420/1042497537912864788 */}
         {/* {renameClusterSection}
         <DarkMatter /> */}
-        <Heading>Delete cluster</Heading>
+        <Heading>Delete Infrastructure</Heading>
         {helperText}
         <Button
           disabled={

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

@@ -18,9 +18,10 @@ type Props = {
 
 const PROVISIONING_STATUS_POLL_INTERVAL = 60 * 1000; // poll every minute
 
-const ProvisionerStatus: React.FC<Props> = ({ provisionFailureReason }) => {
+const ProvisionerStatus: React.FC<Props> = ( props ) => {
   const { currentProject, currentCluster } = useContext(Context);
   const [progress, setProgress] = useState<number>(1);
+  const [provisionType, setProvisionType] = useState("CREATE");
 
   // Continuously poll provisioning status and cluster status
   const pollProvisioningAndClusterStatus = async () => {
@@ -79,6 +80,25 @@ const ProvisionerStatus: React.FC<Props> = ({ provisionFailureReason }) => {
     return () => clearInterval(intervalId);
   }, []);
 
+  useEffect(() => {
+    // check if this is create or update operation
+    // TODO: CCP should distinguish between create vs update.
+    api
+    .getContracts("<token>", {}, { project_id: currentProject.id })
+    .then(({ data }) => {
+      const filtered_data = data.filter((x: any) => {
+        return x.cluster_id === currentCluster.id;
+      });
+
+      if (filtered_data.length > 1) {
+        setProvisionType("UPDATE");
+      }
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+  })
+
   return (
     <StyledProvisionerStatus>
       <HeaderSection>
@@ -99,18 +119,20 @@ const ProvisionerStatus: React.FC<Props> = ({ provisionFailureReason }) => {
         </Flex>
         <Spacer height="18px" />
         <LoadingBar
-          color={provisionFailureReason ? "failed" : undefined}
+          color={props?.provisionFailureReason ? "failed" : undefined}
           completed={progress}
           total={5}
         />
         <Spacer height="18px" />
         <Text color="#aaaabb">
-          Setup can take up to 20 minutes. You can close this window and come
-          back later.
+          {
+            provisionType == "UPDATE" ? "Updating your infrastructure may take up to 30 minutes and will not incur any downtime for your applications. You can still deploy and manage your applications while the update is in effect.":
+            "Setup can take up to 20 minutes. You can close this window and come back later."
+          }
         </Text>
       </HeaderSection>
-      {provisionFailureReason && (
-        <DummyLogs>Error: {provisionFailureReason}</DummyLogs>
+      {props?.provisionFailureReason && (
+        <DummyLogs>Error: {props?.provisionFailureReason}</DummyLogs>
       )}
     </StyledProvisionerStatus>
   );

dashboard/src/main/home/modals/UpdateClusterModal.tsx

@@ -97,14 +97,14 @@ class UpdateClusterModal extends Component<PropsType, StateType> {
   };
 
   renderWarning = () => {
-    let { currentCluster } = this.context;
-    if (!currentCluster?.infra_id || !currentCluster.service) {
-      return (
-        <Warning highlight={true}>
-          ⚠️ Deleting the cluster will only detach this cluster from your project. To delete resources you must do so manually.
-        </Warning>
-      );
-    }
+    // let { currentCluster } = this.context;
+    // if (!currentCluster?.infra_id || !currentCluster.service) {
+    //   return (
+    //     <Warning highlight={true}>
+    //       ⚠️ Deleting the cluster will only detach this cluster from your project. To delete resources you must do so manually.
+    //     </Warning>
+    //   );
+    // }
 
     return (
       <Warning highlight={true}>