Merge branch 'nico/new-onboarding-flow' of https://github.com/porter-dev/porter into nico/new-onboarding-flow

dashboard/src/components/ProvisionerStatus.tsx

@@ -11,24 +11,24 @@ type Props = {
 };
 
 export interface TFModule {
-  id: number
-  kind: string
-  status: string
-  created_at: string
-  global_errors?: TFResourceError[]
+  id: number;
+  kind: string;
+  status: string;
+  created_at: string;
+  global_errors?: TFResourceError[];
   // optional resources, if not created
-  resources?: TFResource[]
+  resources?: TFResource[];
 }
 
 export interface TFResourceError {
-  errored_out: boolean
-  error_context?: string
+  errored_out: boolean;
+  error_context?: string;
 }
 
 export interface TFResource {
-  addr: string,
-  provisioned: boolean,
-  errored: TFResourceError,
+  addr: string;
+  provisioned: boolean;
+  errored: TFResourceError;
 }
 
 const nameMap: { [key: string]: string } = {
@@ -74,8 +74,8 @@ const ProvisionerStatus: React.FC<Props> = ({ modules }) => {
   };
 
   const renderModules = () => {
-    return modules.map(val => {
-      console.log(val)
+    return modules.map((val) => {
+      console.log(val);
       const totalResources = val.resources?.length;
       const provisionedResources = val.resources?.filter((resource) => {
         return resource.provisioned;
@@ -84,39 +84,43 @@ const ProvisionerStatus: React.FC<Props> = ({ modules }) => {
       let errors: string[] = [];
 
       if (val.status == "destroyed") {
-        errors.push("Note: this infrastructure was automatically destroyed.")
+        errors.push("Note: this infrastructure was automatically destroyed.");
       }
 
-      let hasError = val.resources?.filter((resource) => {
-        if (resource.errored?.errored_out) {
-          errors.push(resource.errored?.error_context)
-        }
+      let hasError =
+        val.resources?.filter((resource) => {
+          if (resource.errored?.errored_out) {
+            errors.push(resource.errored?.error_context);
+          }
 
-        return resource.errored?.errored_out
-      }).length > 0
+          return resource.errored?.errored_out;
+        }).length > 0;
 
       if (val.global_errors) {
         for (let globalErr of val.global_errors) {
-          errors.push("Global error: " + globalErr.error_context)
-          hasError = true
+          errors.push("Global error: " + globalErr.error_context);
+          hasError = true;
         }
       }
 
-      const width = 100 * (provisionedResources / (totalResources * 1.0)) || 0
+      const width =
+        val.status == "created"
+          ? 100
+          : 100 * (provisionedResources / (totalResources * 1.0)) || 0;
 
       let error = null;
 
       if (hasError) {
         error = errors.map((error, index) => {
-          return <ExpandedError key={index}>{error}</ExpandedError>
-        })
-      } 
+          return <ExpandedError key={index}>{error}</ExpandedError>;
+        });
+      }
       let loadingFill;
       let status;
 
       if (hasError || val.status == "destroyed") {
-        loadingFill = <LoadingFill status="error" width={width + "%"} />
-        status = renderStatus("error")
+        loadingFill = <LoadingFill status="error" width={width + "%"} />;
+        status = renderStatus("error");
       } else if (width == 100) {
         loadingFill = <LoadingFill status="successful" width={width + "%"} />;
         status = renderStatus("successful");
@@ -129,28 +133,22 @@ const ProvisionerStatus: React.FC<Props> = ({ modules }) => {
         <InfraObject key={val.id}>
           <InfraHeader>
             <Flex>
-            {status}
-            {
-              integrationList[val.kind] && <Icon src={integrationList[val.kind].icon} />
-            }
-            {nameMap[val.kind]}
+              {status}
+              {integrationList[val.kind] && (
+                <Icon src={integrationList[val.kind].icon} />
+              )}
+              {nameMap[val.kind]}
             </Flex>
             <Timestamp>Started {readableDate(val.created_at)}</Timestamp>
           </InfraHeader>
           <LoadingBar>{loadingFill}</LoadingBar>
-          <ErrorWrapper>
-            {error}
-          </ErrorWrapper>
+          <ErrorWrapper>{error}</ErrorWrapper>
         </InfraObject>
       );
     });
   };
 
-  return (
-    <StyledProvisionerStatus>
-      {renderModules()}
-    </StyledProvisionerStatus>
-  );
+  return <StyledProvisionerStatus>{renderModules()}</StyledProvisionerStatus>;
 };
 
 export default ProvisionerStatus;

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -106,11 +106,13 @@ class Dashboard extends Component<PropsType, StateType> {
 
   renderTabContents = () => {
     if (this.currentTab() === "provisioner") {
-      return <SharedStatus 
-        filter={[]} 
-        project_id={this.props.projectId} 
-        nextFormStep={() => null} 
-      />
+      return (
+        <SharedStatus
+          filter={[]}
+          project_id={this.props.projectId}
+          setInfraStatus={(val: string) => null}
+        />
+      );
     } else if (this.currentTab() === "create-cluster") {
       let helperText = "Create a cluster to link to this project";
       let helperIcon = "info";

dashboard/src/main/home/onboarding/state/StateHandler.ts

@@ -51,6 +51,7 @@ export const StateHandler = proxy({
   connected_source: null,
   connected_registry: null,
   provision_resources: null,
+  current_error: null,
   actions: {
     restoreState: (prevState: any) => {
       StateHandler.project = prevState.project;
@@ -123,5 +124,8 @@ export const StateHandler = proxy({
     clearResourceProvisioningProvider: () => {
       StateHandler.provision_resources.provider = "";
     },
+    saveCurrentError: (data: any) => {
+      StateHandler.current_error = data;
+    },
   },
 });

dashboard/src/main/home/onboarding/state/StepHandler.ts

@@ -165,6 +165,11 @@ const flow: FlowType = {
             continue: "clean_up",
             go_back: "provision_resources.credentials",
           },
+          execute: {
+            on: {
+              go_back: "saveCurrentError",
+            },
+          },
         },
       },
     },

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_DORegistryForm.tsx

@@ -1,5 +1,6 @@
 import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
+import Loading from "components/Loading";
 import SaveButton from "components/SaveButton";
 import RegistryImageList from "main/home/onboarding/components/RegistryImageList";
 import { OFState } from "main/home/onboarding/state";
@@ -11,6 +12,16 @@ import api from "shared/api";
 import styled from "styled-components";
 import { useSnapshot } from "valtio";
 
+const readableDate = (s: string) => {
+  const ts = new Date(s);
+  const date = ts.toLocaleDateString();
+  const time = ts.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return `${time} on ${date}`;
+};
+
 /**
  * This will redirect to DO, and we should pass the redirection URI to be /onboarding/registry?provider=do
  *
@@ -23,36 +34,78 @@ export const CredentialsForm: React.FC<{
   nextFormStep: (data: Partial<DORegistryConfig>) => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
-  const location = useLocation();
+  const snap = useSnapshot(OFState);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [connectedAccount, setConnectedAccount] = useState(null);
+
   useEffect(() => {
-    api
-      .getOAuthIds("<token>", {}, { project_id: project?.id })
-      .then((res) => {
-        let tgtIntegration = res.data.find((integration: any) => {
-          return integration.client === "do";
-        });
+    api.getOAuthIds("<token>", {}, { project_id: project?.id }).then((res) => {
+      let integrations = res.data.filter((integration: any) => {
+        return integration.client === "do";
+      });
 
-        if (tgtIntegration) {
-          nextFormStep({
-            credentials: {
-              id: tgtIntegration.id,
-            },
-          });
+      if (Array.isArray(integrations) && integrations.length) {
+        // Sort decendant
+        integrations.sort((a, b) => b.id - a.id);
+        let lastUsed = integrations.find((i) => {
+          i.id === snap.StateHandler?.provision_resources?.credentials?.id;
+        });
+        if (!lastUsed) {
+          lastUsed = integrations[0];
         }
-      })
-      .catch(console.log);
+        setConnectedAccount(lastUsed);
+      }
+      setIsLoading(false);
+    });
   }, []);
 
+  const submit = (integrationId: number) => {
+    nextFormStep({
+      credentials: {
+        id: integrationId,
+      },
+    });
+  };
+
   const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
 
   const encoded_redirect_uri = encodeURIComponent(url);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
-    <ConnectDigitalOceanButton
-      target={"_blank"}
-      href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
-    >
-      Sign in to Digital Ocean
-    </ConnectDigitalOceanButton>
+    <>
+      {connectedAccount !== null && (
+        <div>
+          <div>Connected account: {connectedAccount.client}</div>
+          <div>Connected at: {readableDate(connectedAccount.created_at)}</div>
+        </div>
+      )}
+      <ConnectDigitalOceanButton
+        target={"_blank"}
+        href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
+      >
+        {connectedAccount !== null
+          ? "Connect another account"
+          : "Sign In to Digital Ocean"}
+      </ConnectDigitalOceanButton>
+
+      <Br />
+      {connectedAccount !== null && (
+        <SaveButton
+          text="Continue with connected account"
+          disabled={false}
+          onClick={() => submit(connectedAccount.id)}
+          makeFlush={true}
+          clearPosition={true}
+          status={""}
+          statusPosition={"right"}
+        />
+      )}
+    </>
   );
 };
 

dashboard/src/main/home/onboarding/steps/ProvisionResources/ProvisionResources.tsx

@@ -1,7 +1,7 @@
 import Helper from "components/form-components/Helper";
 import SaveButton from "components/SaveButton";
 import TitleSection from "components/TitleSection";
-import React from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router";
 import styled from "styled-components";
 import ProviderSelector, {
@@ -28,7 +28,7 @@ type Props = {
   onSaveSettings: (settings: any) => void;
   onSuccess: () => void;
   onSkip: () => void;
-  goBack: () => void;
+  goBack: (data?: any) => void;
 };
 
 const ProvisionResources: React.FC<Props> = ({
@@ -44,6 +44,58 @@ const ProvisionResources: React.FC<Props> = ({
   goBack,
 }) => {
   const { step } = useParams<{ step: any }>();
+  const [infraStatus, setInfraStatus] = useState<{
+    hasError: boolean;
+    description?: string;
+  }>(null);
+
+  const renderSaveButton = () => {
+    if (infraStatus && !infraStatus.hasError) {
+      return (
+        <>
+          <Br height="15px" />
+          <SaveButton
+            text="Continue"
+            disabled={false}
+            onClick={onSuccess}
+            makeFlush={true}
+            clearPosition={true}
+            statusPosition="right"
+            saveText=""
+          />
+        </>
+      );
+    } else if (infraStatus) {
+      return (
+        <>
+          <Br height="15px" />
+          <SaveButton
+            text="Resolve Errors"
+            status="Encountered errors while provisioning."
+            disabled={false}
+            onClick={() => goBack(infraStatus.description)}
+            makeFlush={true}
+            clearPosition={true}
+            statusPosition="right"
+            saveText=""
+          />
+        </>
+      );
+    }
+  };
+
+  const getFilterOpts = (): string[] => {
+    switch (provider) {
+      case "aws":
+        return ["eks", "ecr"];
+      case "gcp":
+        return ["gke", "gcr"];
+      case "do":
+        return ["doks", "docr"];
+    }
+
+    return [];
+  };
 
   const Content = () => {
     switch (step) {
@@ -64,24 +116,12 @@ const ProvisionResources: React.FC<Props> = ({
           <>
             <SharedStatus
               project_id={project?.id}
-              filter={[]}
-              nextFormStep={onSuccess}
-              goBack={goBack}
+              filter={getFilterOpts()}
+              setInfraStatus={setInfraStatus}
             />
             <Br />
-            <Helper>
-              Note: Provisioning can take up to 15 minutes.
-            </Helper>
-            <Br height="15px" />
-            <SaveButton
-              text="Continue"
-              disabled={false}
-              onClick={() => alert("continue")}
-              makeFlush={true}
-              clearPosition={true}
-              statusPosition="right"
-              saveText=""
-            />
+            <Helper>Note: Provisioning can take up to 15 minutes.</Helper>
+            {renderSaveButton()}
           </>
         );
       case "connect_own_cluster":
@@ -149,7 +189,7 @@ export default ProvisionResources;
 
 const Br = styled.div<{ height?: string }>`
   width: 100%;
-  height: ${props => props.height || "1px"};
+  height: ${(props) => props.height || "1px"};
   margin-top: -3px;
 `;
 

dashboard/src/main/home/onboarding/steps/ProvisionResources/ProvisionResourcesWrapper.tsx

@@ -22,7 +22,7 @@ const ProvisionResourcesWrapper = () => {
       onSuccess={() => OFState.actions.nextStep("continue")}
       onSkip={() => OFState.actions.nextStep("skip")}
       enable_go_back={snap.StepHandler.canGoBack && !snap.StepHandler.isSubFlow}
-      goBack={() => OFState.actions.nextStep("go_back")}
+      goBack={(data: any) => OFState.actions.nextStep("go_back", data)}
     />
   );
 };

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/SharedStatus.tsx

@@ -8,11 +8,10 @@ import api from "shared/api";
 import { useWebsockets } from "shared/hooks/useWebsockets";
 
 export const SharedStatus: React.FC<{
-  nextFormStep: () => void;
+  setInfraStatus: (status: { hasError: boolean; description?: string }) => void;
   project_id: number;
   filter: string[];
-  goBack?: any;
-}> = ({ nextFormStep, project_id, filter, goBack }) => {
+}> = ({ setInfraStatus, project_id, filter }) => {
   const {
     newWebsocket,
     openWebsocket,
@@ -48,8 +47,8 @@ export const SharedStatus: React.FC<{
     for (let addedResource of addedResources) {
       // if exists, update state to provisioned
       if (resourceAddrMap.has(addedResource.addr)) {
-        let currResource = resources[resourceAddrMap.get(addedResource.addr)]
-        addedResource.errored = currResource.errored
+        let currResource = resources[resourceAddrMap.get(addedResource.addr)];
+        addedResource.errored = currResource.errored;
         resources[resourceAddrMap.get(addedResource.addr)] = addedResource;
       } else {
         resources.push(addedResource);
@@ -81,6 +80,73 @@ export const SharedStatus: React.FC<{
     setTFModules([...tfModules]);
   };
 
+  useEffect(() => {
+    // recompute tf module state each time, to see if infra is ready
+    if (tfModules.length > 0) {
+      // see if all tf modules are in a "created" state
+      if (
+        tfModules.filter((val) => val.status == "created").length ==
+        tfModules.length
+      ) {
+        setInfraStatus({
+          hasError: false,
+        });
+        return;
+      }
+
+      if (
+        tfModules.filter((val) => val.status == "error").length ==
+        tfModules.length
+      ) {
+        setInfraStatus({
+          hasError: true,
+        });
+        return;
+      }
+
+      // otherwise, check that all resources in each module are provisioned. Each module
+      // must have more than one resource
+      let numModulesSuccessful = 0;
+      let numModulesErrored = 0;
+
+      for (let tfModule of tfModules) {
+        if (tfModule.status == "created") {
+          numModulesSuccessful++;
+        } else if (tfModule.status == "error") {
+          numModulesErrored++;
+        } else {
+          let resLength = tfModule.resources?.length;
+          if (resLength > 0) {
+            numModulesSuccessful +=
+              tfModule.resources.filter((resource) => resource.provisioned)
+                .length == resLength
+                ? 1
+                : 0;
+
+            numModulesErrored +=
+              tfModule.resources.filter(
+                (resource) => resource.errored?.errored_out
+              ).length > 0
+                ? 1
+                : 0;
+          }
+        }
+      }
+
+      if (numModulesSuccessful == tfModules.length) {
+        setInfraStatus({
+          hasError: false,
+        });
+      } else if (numModulesErrored + numModulesSuccessful == tfModules.length) {
+        // otherwise, if all modules are either in an error state or successful,
+        // set the status to error
+        setInfraStatus({
+          hasError: true,
+        });
+      }
+    }
+  }, [tfModules]);
+
   const setupInfraWebsocket = (
     websocketID: string,
     module: TFModule,
@@ -132,6 +198,10 @@ export const SharedStatus: React.FC<{
                   });
                 }
               }
+            case "change_summary":
+              if (streamValData.changes.add != 0) {
+                updateDesiredState(index, module);
+              }
             default:
           }
         }
@@ -153,26 +223,79 @@ export const SharedStatus: React.FC<{
     openWebsocket(websocketID);
   };
 
+  const mergeCurrentAndDesired = (
+    index: number,
+    desired: any,
+    currentMap: Map<string, string>
+  ) => {
+    // map desired state to list of resources
+    var addedResources: TFResource[] = desired?.map((val: any) => {
+      return {
+        addr: val?.addr,
+        provisioned: currentMap.has(val?.addr),
+        errored: {
+          errored_out: val?.errored?.errored_out,
+          error_context: val?.errored?.error_context,
+        },
+      };
+    });
+
+    updateTFModules(index, addedResources, [], []);
+  };
+
+  const updateDesiredState = (index: number, val: TFModule) => {
+    api
+      .getInfraDesired(
+        "<token>",
+        {},
+        { project_id: project_id, infra_id: val?.id }
+      )
+      .then((resDesired) => {
+        api
+          .getInfraCurrent(
+            "<token>",
+            {},
+            { project_id: project_id, infra_id: val?.id }
+          )
+          .then((resCurrent) => {
+            var desired = resDesired.data;
+            var current = resCurrent.data;
+
+            // convert current state to a lookup table
+            var currentMap: Map<string, string> = new Map();
+
+            current?.resources?.forEach((val: any) => {
+              currentMap.set(val?.type + "." + val?.name, "");
+            });
+
+            mergeCurrentAndDesired(index, desired, currentMap);
+          })
+          .catch((err) => {
+            var desired = resDesired.data;
+            var currentMap: Map<string, string> = new Map();
+
+            // merge with empty current map
+            mergeCurrentAndDesired(index, desired, currentMap);
+          });
+      })
+      .catch((err) => console.log(err));
+  };
+
   useEffect(() => {
     api.getInfra("<token>", {}, { project_id: project_id }).then((res) => {
-      var matchedInfras : Map<string, any> = new Map()
-        var numCreated = 0
-  
-        res.data.forEach((infra : any) => {
-          // if filter list is empty, add infra automatically
-          if (filter.length == 0) {
-            matchedInfras.set(infra.kind + "-" + infra.id, infra)
-          } else if (filter.includes(infra.kind) && matchedInfras.get(infra.Kind)?.id || 0 < infra.id) {
-            matchedInfras.set(infra.kind, infra)
-          }
-
-          numCreated += infra?.status == "created" ? 1 : 0
-        })
-          
-        // if all created, call next form step
-        if (numCreated == res.data.length) {
-          nextFormStep()
+      var matchedInfras: Map<string, any> = new Map();
+
+      res.data.forEach((infra: any) => {
+        // if filter list is empty, add infra automatically
+        if (filter.length == 0) {
+          matchedInfras.set(infra.kind + "-" + infra.id, infra);
+        } else if (
+          (filter.includes(infra.kind) && matchedInfras.get(infra.Kind)?.id) ||
+          0 < infra.id
+        ) {
+          matchedInfras.set(infra.kind, infra);
         }
+      });
 
       // query for desired and current state, and convert to tf module
       matchedInfras.forEach((infra: any) => {
@@ -190,59 +313,18 @@ export const SharedStatus: React.FC<{
 
       tfModules.forEach((val, index) => {
         if (val?.status != "created" && val?.status != "destroyed") {
-          api
-            .getInfraDesired(
-              "<token>",
-              {},
-              { project_id: project_id, infra_id: val?.id }
-            )
-            .then((resDesired) => {
-              api
-                .getInfraCurrent(
-                  "<token>",
-                  {},
-                  { project_id: project_id, infra_id: val?.id }
-                )
-                .then((resCurrent) => {
-                  var desired = resDesired.data;
-                  var current = resCurrent.data;
-
-                  // convert current state to a lookup table
-                  var currentMap: Map<string, string> = new Map();
-
-                  current?.resources?.forEach((val: any) => {
-                    currentMap.set(val?.type + "." + val?.name, "");
-                  });
-
-                  // map desired state to list of resources
-                  var addedResources: TFResource[] = desired?.map((val: any) => {
-                    return {
-                      addr: val?.addr,
-                      provisioned: currentMap.has(val?.addr),
-                      errored: {
-                        errored_out: val?.errored?.errored_out,
-                        error_context: val?.errored?.error_context,
-                      },
-                    };
-                  });
-
-                  updateTFModules(index, addedResources, [], [])
-                })
-                .catch((err) => console.log(err));
-            })
-            .catch((err) => console.log(err));
+          updateDesiredState(index, val);
+          setupInfraWebsocket(val.id + "", val, index);
         }
-      })
-
-      tfModules.forEach((val, index) => {
-        setupInfraWebsocket(val.id + "", val, index);
       });
     });
 
     return closeAllWebsockets;
   }, []);
 
-  let sortedModules = tfModules.sort((a, b) => b.id < a.id ? -1 : b.id > a.id ? 1 : 0)
+  let sortedModules = tfModules.sort((a, b) =>
+    b.id < a.id ? -1 : b.id > a.id ? 1 : 0
+  );
 
   return (
     <>

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_AWSProvisionerForm.tsx

@@ -177,6 +177,22 @@ export const SettingsForm: React.FC<{
     console.error(error);
   };
 
+  const hasRegistryProvisioned = (
+    infras: { kind: string; status: string }[]
+  ) => {
+    return !!infras.find(
+      (i) => ["docr", "gcr", "ecr"].includes(i.kind) && i.status === "created"
+    );
+  };
+
+  const hasClusterProvisioned = (
+    infras: { kind: string; status: string }[]
+  ) => {
+    return !!infras.find(
+      (i) => ["doks", "gks", "eks"].includes(i.kind) && i.status === "created"
+    );
+  };
+
   const provisionECR = async (awsIntegrationId: number) => {
     console.log("Started provision ECR");
 
@@ -222,16 +238,33 @@ export const SettingsForm: React.FC<{
       setButtonStatus(validation.error);
       return;
     }
+
+    let infras = [];
+
+    try {
+      infras = await api
+        .getInfra("<token>", {}, { project_id: project?.id })
+        .then((res) => res?.data);
+    } catch (error) {
+      setButtonStatus("Something went wrong, try again later");
+      return;
+    }
+
     const integrationId = snap.StateHandler.provision_resources.credentials.id;
+
     let registryProvisionResponse = null;
     let clusterProvisionResponse = null;
 
     const shouldProvisionECR = snap.StateHandler.connected_registry.skip;
 
     if (shouldProvisionECR) {
-      registryProvisionResponse = await provisionECR(integrationId);
+      if (!hasRegistryProvisioned(infras)) {
+        registryProvisionResponse = await provisionECR(integrationId);
+      }
+    }
+    if (!hasClusterProvisioned(infras)) {
+      clusterProvisionResponse = await provisionEKS(integrationId);
     }
-    clusterProvisionResponse = await provisionEKS(integrationId);
 
     nextFormStep({
       settings: {
@@ -279,19 +312,6 @@ export const SettingsForm: React.FC<{
   );
 };
 
-export const Status: React.FC<{
-  nextFormStep: () => void;
-  project: any;
-}> = ({ nextFormStep, project }) => {
-  return (
-    <SharedStatus
-      nextFormStep={nextFormStep}
-      project_id={project?.id}
-      filter={["eks", "ecr"]}
-    />
-  );
-};
-
 const Br = styled.div`
   width: 100%;
   height: 15px;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_DOProvisionerForm.tsx

@@ -14,6 +14,7 @@ import styled from "styled-components";
 import { useSnapshot } from "valtio";
 import { useWebsockets } from "shared/hooks/useWebsockets";
 import { SharedStatus } from "./SharedStatus";
+import Loading from "components/Loading";
 
 const tierOptions = [
   { value: "basic", label: "Basic" },
@@ -33,6 +34,16 @@ const regionOptions = [
   { value: "tor1", label: "Toronto 1" },
 ];
 
+const readableDate = (s: string) => {
+  const ts = new Date(s);
+  const date = ts.toLocaleDateString();
+  const time = ts.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return `${time} on ${date}`;
+};
+
 /**
  * This will redirect to DO, and we should pass the redirection URI to be /onboarding/provision?provider=do
  *
@@ -45,34 +56,77 @@ export const CredentialsForm: React.FC<{
   nextFormStep: (data: Partial<DOProvisionerConfig>) => void;
   project: any;
 }> = ({ nextFormStep, project }) => {
+  const snap = useSnapshot(OFState);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [connectedAccount, setConnectedAccount] = useState(null);
+
   useEffect(() => {
     api.getOAuthIds("<token>", {}, { project_id: project?.id }).then((res) => {
-      let tgtIntegration = res.data.find((integration: any) => {
+      let integrations = res.data.filter((integration: any) => {
         return integration.client === "do";
       });
 
-      if (tgtIntegration) {
-        nextFormStep({
-          credentials: {
-            id: tgtIntegration.id,
-          },
+      if (Array.isArray(integrations) && integrations.length) {
+        // Sort decendant
+        integrations.sort((a, b) => b.id - a.id);
+        let lastUsed = integrations.find((i) => {
+          i.id === snap.StateHandler?.provision_resources?.credentials?.id;
         });
+        if (!lastUsed) {
+          lastUsed = integrations[0];
+        }
+        setConnectedAccount(lastUsed);
       }
+      setIsLoading(false);
     });
   }, []);
 
+  const submit = (integrationId: number) => {
+    nextFormStep({
+      credentials: {
+        id: integrationId,
+      },
+    });
+  };
+
   const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
 
   const encoded_redirect_uri = encodeURIComponent(url);
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <>
+      {connectedAccount !== null && (
+        <div>
+          <div>Connected account: {connectedAccount.client}</div>
+          <div>Connected at: {readableDate(connectedAccount.created_at)}</div>
+        </div>
+      )}
       <ConnectDigitalOceanButton
         target={"_blank"}
         href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
       >
-        Sign In to Digital Ocean
+        {connectedAccount !== null
+          ? "Connect another account"
+          : "Sign In to Digital Ocean"}
       </ConnectDigitalOceanButton>
+
+      <Br />
+      {connectedAccount !== null && (
+        <SaveButton
+          text="Continue with connected account"
+          disabled={false}
+          onClick={() => submit(connectedAccount.id)}
+          makeFlush={true}
+          clearPosition={true}
+          status={""}
+          statusPosition={"right"}
+        />
+      )}
     </>
   );
 };
@@ -110,6 +164,22 @@ export const SettingsForm: React.FC<{
     console.error(error);
   };
 
+  const hasRegistryProvisioned = (
+    infras: { kind: string; status: string }[]
+  ) => {
+    return !!infras.find(
+      (i) => ["docr", "gcr", "ecr"].includes(i.kind) && i.status === "created"
+    );
+  };
+
+  const hasClusterProvisioned = (
+    infras: { kind: string; status: string }[]
+  ) => {
+    return !!infras.find(
+      (i) => ["doks", "gks", "eks"].includes(i.kind) && i.status === "created"
+    );
+  };
+
   const provisionDOCR = async (integrationId: number, tier: string) => {
     console.log("Provisioning DOCR...");
     try {
@@ -165,18 +235,34 @@ export const SettingsForm: React.FC<{
       setButtonStatus(validation.error);
       return;
     }
+
+    let infras = [];
+    try {
+      infras = await api
+        .getInfra("<token>", {}, { project_id: project?.id })
+        .then((res) => res?.data);
+    } catch (error) {
+      setButtonStatus("Something went wrong, try again later");
+      return;
+    }
+
     const integrationId = snap.StateHandler.provision_resources.credentials.id;
     let registryProvisionResponse = null;
     let clusterProvisionResponse = null;
 
     if (snap.StateHandler.connected_registry.skip) {
-      registryProvisionResponse = await provisionDOCR(integrationId, tier);
+      if (!hasRegistryProvisioned(infras)) {
+        registryProvisionResponse = await provisionDOCR(integrationId, tier);
+      }
+    }
+
+    if (!hasClusterProvisioned(infras)) {
+      clusterProvisionResponse = await provisionDOKS(
+        integrationId,
+        region,
+        clusterName
+      );
     }
-    clusterProvisionResponse = await provisionDOKS(
-      integrationId,
-      region,
-      clusterName
-    );
 
     nextFormStep({
       settings: {
@@ -235,19 +321,6 @@ export const SettingsForm: React.FC<{
   );
 };
 
-export const Status: React.FC<{
-  nextFormStep: () => void;
-  project: any;
-}> = ({ nextFormStep, project }) => {
-  return (
-    <SharedStatus
-      nextFormStep={nextFormStep}
-      project_id={project?.id}
-      filter={["doks", "docr"]}
-    />
-  );
-};
-
 const Br = styled.div`
   width: 100%;
   height: 15px;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_GCPProvisionerForm.tsx

@@ -161,6 +161,22 @@ export const SettingsForm: React.FC<{
     return { hasError: false, error: "" };
   };
 
+  const hasRegistryProvisioned = (
+    infras: { kind: string; status: string }[]
+  ) => {
+    return !!infras.find(
+      (i) => ["docr", "gcr", "ecr"].includes(i.kind) && i.status === "created"
+    );
+  };
+
+  const hasClusterProvisioned = (
+    infras: { kind: string; status: string }[]
+  ) => {
+    return !!infras.find(
+      (i) => ["doks", "gks", "eks"].includes(i.kind) && i.status === "created"
+    );
+  };
+
   const catchError = (error: any) => {
     console.error(error);
   };
@@ -168,20 +184,36 @@ export const SettingsForm: React.FC<{
   const submit = async () => {
     const validation = validate();
 
+    setButtonStatus("loading");
+
     if (validation.hasError) {
       setButtonStatus(validation.error);
       return;
     }
 
-    setButtonStatus("loading");
+    let infras = [];
+
+    try {
+      infras = await api
+        .getInfra("<token>", {}, { project_id: project?.id })
+        .then((res) => res?.data);
+    } catch (error) {
+      setButtonStatus("Something went wrong, try again later");
+      return;
+    }
+
     const integrationId = snap.StateHandler.provision_resources.credentials.id;
 
     let registryProvisionResponse = null;
     let clusterProvisionResponse = null;
     if (snap.StateHandler.connected_registry.skip) {
-      registryProvisionResponse = await provisionGCR(integrationId);
+      if (!hasRegistryProvisioned(infras)) {
+        registryProvisionResponse = await provisionGCR(integrationId);
+      }
+    }
+    if (!hasClusterProvisioned(infras)) {
+      clusterProvisionResponse = await provisionGKE(integrationId);
     }
-    clusterProvisionResponse = await provisionGKE(integrationId);
 
     nextFormStep({
       settings: {
@@ -192,27 +224,29 @@ export const SettingsForm: React.FC<{
     });
   };
 
-  const provisionGCR = (id: number) => {
+  const provisionGCR = async (id: number) => {
     console.log("Provisioning GCR");
 
-    return api
-      .createGCR(
+    try {
+      const res = await api.createGCR(
         "<token>",
         {
           gcp_integration_id: id,
           issuer_email: snap.StateHandler.user_email,
         },
         { project_id: project.id }
-      )
-      .then((res) => res?.data)
-      .catch(catchError);
+      );
+      return res?.data;
+    } catch (error) {
+      return catchError(error);
+    }
   };
 
-  const provisionGKE = (id: number) => {
+  const provisionGKE = async (id: number) => {
     console.log("Provisioning GKE");
 
-    return api
-      .createGKE(
+    try {
+      const res = await api.createGKE(
         "<token>",
         {
           gke_name: clusterName,
@@ -220,9 +254,11 @@ export const SettingsForm: React.FC<{
           issuer_email: snap.StateHandler.user_email,
         },
         { project_id: project.id }
-      )
-      .then((res) => res?.data)
-      .catch(catchError);
+      );
+      return res?.data;
+    } catch (error) {
+      return catchError(error);
+    }
   };
 
   return (
@@ -252,19 +288,6 @@ export const SettingsForm: React.FC<{
   );
 };
 
-export const Status: React.FC<{
-  nextFormStep: () => void;
-  project: any;
-}> = ({ nextFormStep, project }) => {
-  return (
-    <SharedStatus
-      nextFormStep={nextFormStep}
-      project_id={project?.id}
-      filter={["gke", "gcr"]}
-    />
-  );
-};
-
 const Br = styled.div`
   width: 100%;
   height: 15px;

dashboard/src/main/home/onboarding/types.ts

@@ -13,7 +13,7 @@ export type AWSRegistryConfig = {
   skip: false;
   provider: "aws";
   credentials: {
-    id: string;
+    id: number;
   };
   settings: {
     registry_connection_id: number;
@@ -25,7 +25,7 @@ export type GCPRegistryConfig = {
   skip: false;
   provider: "gcp";
   credentials: {
-    id: string;
+    id: number;
   };
   settings: {
     registry_connection_id: number;
@@ -38,7 +38,7 @@ export type DORegistryConfig = {
   skip: false;
   provider: "do";
   credentials: {
-    id: string;
+    id: number;
   };
   settings: {
     registry_connection_id: number;

internal/kubernetes/provisioner/global_stream.go

@@ -106,9 +106,13 @@ func GlobalStreamListener(
 
 		// parse messages from the global stream
 		for _, msg := range xstreams[0].Messages {
+			fmt.Println("GOT REDIS GLOBAL MSG", msg, msg.Values["id"], msg.Values["status"])
+
 			// parse the id to identify the infra
 			kind, projID, infraID, err := models.ParseUniqueName(fmt.Sprintf("%v", msg.Values["id"]))
 
+			fmt.Println("PARSED DATA IS", kind, projID, infraID, err)
+
 			if fmt.Sprintf("%v", msg.Values["status"]) == "created" {
 				infra, err := repo.Infra().ReadInfra(projID, infraID)