dummy provisioner status

dashboard/src/components/Boilerplate.tsx

@@ -1,16 +1,18 @@
-import React, { Component } from "react";
-import styled from "styled-components";
+import React, { useState } from "react";
 
-type PropsType = {};
+import styled from "styled-components";
 
-type StateType = {};
+type Props = {
+};
 
-export default class Boilerplate extends Component<PropsType, StateType> {
-  state = {};
+export const Boilerplate: React.FC<Props> = (props) => {
+  const [someState, setSomeState] = useState("");
 
-  render() {
-    return <StyledBoilerplate>boilerplate</StyledBoilerplate>;
-  }
-}
+  return (
+    <StyledBoilerplate>
+    </StyledBoilerplate>
+  );
+};
 
-const StyledBoilerplate = styled.div``;
+const StyledBoilerplate = styled.div`
+`;

dashboard/src/components/Breadcrumb.tsx

@@ -0,0 +1,41 @@
+import { Steps } from "main/home/onboarding/types";
+import React, { useState } from "react";
+
+import styled from "styled-components";
+
+type Props = {
+  currentStep: string;
+  steps: { value: string, label: string }[];
+  onClickStep: (step: string) => void;
+};
+
+const Breadcrumb: React.FC<Props> = ({ currentStep, steps, onClickStep }) => {
+  return (
+    <StyledBreadcrumb>
+      {steps.map((step: { value: string, label: string }, i: number) => {
+        return (
+          <>
+          <Crumb
+            bold={currentStep === step.value}
+            onClick={() => onClickStep(step.value)}
+          >
+            {step.label}
+          </Crumb>
+          {i !== steps.length - 1 && " > "}
+          </>
+        );
+      })}
+    </StyledBreadcrumb>
+  );
+};
+
+export default Breadcrumb;
+
+const StyledBreadcrumb = styled.div`
+`;
+
+const Crumb = styled.span<{ bold: boolean }>`
+  font-weight: ${(props) => (props.bold ? "600" : "normal")};
+  font-size: 13px;
+  cursor: pointer;
+`;

dashboard/src/components/ProvisionerStatus.tsx

@@ -0,0 +1,165 @@
+import { Steps } from "main/home/onboarding/types";
+import React, { useState } from "react";
+
+import loading from "assets/loading.gif";
+
+import styled from "styled-components";
+
+type Props = {
+};
+
+const ProvisionerStatus: React.FC<Props> = () => {
+
+  const renderStatus = (status: string) => {
+    if (status === "successful") {
+      return (
+        <StatusIcon successful={true}>
+          <i className="material-icons">done</i>
+        </StatusIcon>
+      );
+    } else if (status === "loading") {
+      return (
+        <StatusIcon>
+          <LoadingGif src={loading} />
+        </StatusIcon>
+      );
+    } else if (status === "error") {
+      return (
+        <StatusIcon>
+          <i className="material-icons">error_outline</i>
+        </StatusIcon>
+      );
+    }
+  };
+
+  return (
+    <StyledProvisionerStatus>
+      <InfraWrapper>
+        <InfraObject>
+          <InfraHeader>
+            {renderStatus("successful")}
+            Elastic Kubernetes Service (EKS)
+          </InfraHeader>
+          <LoadingBar>
+            <LoadingFill status="successful" width="100%" />
+          </LoadingBar>
+        </InfraObject>
+      </InfraWrapper>
+      <InfraWrapper>
+        <InfraObject>
+          <InfraHeader>
+            {renderStatus("loading")}
+            Elastic Kubernetes Service (EKS)
+          </InfraHeader>
+          <LoadingBar>
+            <LoadingFill status="loading" width="90%" />
+          </LoadingBar>
+        </InfraObject>
+      </InfraWrapper>
+      <InfraWrapper>
+        <InfraObject>
+          <InfraHeader>
+            {renderStatus("error")}
+            Elastic Container Registry (ECR)
+          </InfraHeader>
+          <LoadingBar>
+            <LoadingFill status="error" width="10%" />
+          </LoadingBar>
+        </InfraObject>
+        <ExpandedError>
+          422 validation error: autoscaling failed because sometimes infrastructure is a bit mysterious and hard to predict.
+        </ExpandedError>
+      </InfraWrapper>
+    </StyledProvisionerStatus>
+  );
+};
+
+export default ProvisionerStatus;
+
+const ExpandedError = styled.div`
+  background: #ffffff22;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  padding: 15px;
+  font-size: 13px;
+  font-family: monospace;
+`;
+
+const LoadingFill = styled.div<{ width: string, status: string }>`
+  width: ${props => props.width};
+  background: ${props => props.status === "successful" ? "rgb(56, 168, 138)" : (
+    props.status === "error" ? "#fcba03" : "linear-gradient(to right, #8ce1ff, #616FEE)"
+  )};
+  height: 100%;
+  background-size: 250% 100%;
+  animation: moving-gradient 2s infinite;
+  animation-timing-function: ease-in-out;
+  animation-direction: alternate;
+
+  @keyframes moving-gradient {
+    0% {
+        background-position: left bottom;
+    }
+
+    100% {
+        background-position: right bottom;
+    }
+  }​
+`;
+
+const StatusIcon = styled.div<{ successful?: boolean }>`
+  display: flex;
+  align-items: center;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #ffffff55;
+  max-width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  > i {
+    font-size: 18px;
+    margin-right: 10px;
+    float: left;
+    color: ${props => props.successful ? "rgb(56, 168, 138)" : "#fcba03"};
+  }
+`;
+
+const LoadingGif = styled.img`
+  width: 15px;
+  height: 15px;
+  margin-right: 9px;
+  margin-bottom: 0px;
+`;
+
+const StyledProvisionerStatus = styled.div`
+  margin-top: 25px;
+`;
+
+const LoadingBar = styled.div`
+  width: 100%;
+  background: #ffffff22;
+  border: 100px;
+  margin: 15px 0 0;
+  height: 18px;
+  overflow: hidden;
+  border-radius: 100px;
+`;
+
+const InfraObject = styled.div`
+  background: #ffffff22;
+  padding: 15px 15px 17px;
+  border: 1px solid #aaaabb;
+  border-radius: 5px;
+`;
+
+const InfraWrapper = styled.div`
+  margin-bottom: 10px;
+`;
+
+const InfraHeader = styled.div`
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+`;

dashboard/src/main/home/onboarding/Onboarding.tsx

@@ -57,7 +57,7 @@ const Onboarding = () => {
             registry_connection_id: odata.registry_connection_id,
           }
         );
-        console.log(response);
+        //console.log(response);
         if (response.data) {
           registry_connection_data = response.data;
         }

dashboard/src/main/home/onboarding/Routes.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Route, Switch } from "react-router";
+import { Redirect } from "react-router-dom";
 import { OFState } from "./state";
 import ConnectRegistryWrapper from "./steps/ConnectRegistry/ConnectRegistryWrapper";
 import ConnectSource from "./steps/ConnectSource";

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

@@ -35,8 +35,9 @@ export type FlowType = {
 };
 
 const flow: FlowType = {
-  initial: "new_project",
+  initial: "connect_source",
   steps: {
+    /*
     new_project: {
       url: "/onboarding/new-project",
       on: {
@@ -48,6 +49,7 @@ const flow: FlowType = {
         },
       },
     },
+    */
     connect_source: {
       url: "/onboarding/source",
       on: {

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

@@ -73,7 +73,7 @@ const ConnectRegistry: React.FC<{
         />
       ) : (
         <NextStep
-          text="Skip step"
+          text="Continue"
           disabled={false}
           onClick={() => onSkip()}
           status={""}

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

@@ -1,4 +1,5 @@
 import { ConnectedRegistryConfig } from "main/home/onboarding/state/StateHandler";
+import Breadcrumb from "components/Breadcrumb";
 import {
   SkipRegistryConnection,
   SupportedProviders,
@@ -95,13 +96,15 @@ const FormFlowWrapper: React.FC<Props> = ({
 
   return (
     <FormWrapper>
-      <Breadcrumb>
-        <Text bold={currentStep === "credentials"}>Credentials</Text>
-        {" > "}
-        <Text bold={currentStep === "settings"}>Settings</Text>
-        {" > "}
-        <Text bold={currentStep === "test_connection"}>Test Connection</Text>
-      </Breadcrumb>
+      <Breadcrumb 
+        currentStep={currentStep}
+        steps={[
+          { value: "credentials", label: "Credentials" },
+          { value: "settings", label: "Settings" },
+          { value: "test_connection", label: "Test Connection" },
+        ]}
+        onClickStep={(step: string) => alert(step)}
+      />
       {CurrentForm}
     </FormWrapper>
   );
@@ -116,11 +119,3 @@ const FormWrapper = styled.div`
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 `;
-
-const Text = styled.span<{ bold: boolean }>`
-  font-weight: ${(props) => (props.bold ? "600" : "normal")};
-`;
-
-const Breadcrumb = styled.div`
-  font-size: 13px;
-`;

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

@@ -69,64 +69,58 @@ const ConnectSource: React.FC<{
 
   return (
     <div>
-      <FadeWrapper>
-        <TitleSection>Getting Started</TitleSection>
-      </FadeWrapper>
-      <FadeWrapper delay="0.5s">
-        <Subtitle>Step 1 of 3 - Connect to GitHub</Subtitle>
-      </FadeWrapper>
-      <SlideWrapper delay="1.0s">
-        <Helper>
-          To deploy applications from your repo, you need to connect a Github
-          account.
-        </Helper>
-        {!isLoading && (!accountData || !accountData?.accounts?.length) && (
-          <>
-            <ConnectToGithubButton
-              href={`/api/integrations/github-app/install?redirect_uri=${encoded_redirect_uri}`}
-            >
-              <GitHubIcon src={github} /> Connect to GitHub
-            </ConnectToGithubButton>
-            <Helper>
-              No thanks, I want to deploy from a
-              <A onClick={() => nextStep("docker")}>Docker registry</A>.
-            </Helper>
-          </>
-        )}
-        {!isLoading && accountData?.accounts.length && (
-          <>
-            <List>
-              {accountData?.accounts.map((name, i) => {
-                return (
-                  <Row
-                    key={i}
-                    isLastItem={i === accountData.accounts.length - 1}
-                  >
-                    <i className="material-icons">bookmark</i>
-                    {name}
-                  </Row>
-                );
-              })}
-            </List>
-            <br />
-            Don't see the right repos?{" "}
-            <A href={"/api/integrations/github-app/install"}>
-              Install Porter in more repositories
-            </A>
-            <NextStep
-              text="Continue"
-              disabled={false}
-              onClick={() => nextStep("github")}
-              status={""}
-              makeFlush={true}
-              clearPosition={true}
-              statusPosition="right"
-              saveText=""
-              successText="Project created successfully!"
-            />
-          </>
-        )}
-      </SlideWrapper>
+      <TitleSection>Getting Started</TitleSection>
+      <Subtitle>Step 1 of 3 - Connect to GitHub</Subtitle>
+      <Helper>
+        To deploy applications from your repo, you need to connect a Github
+        account.
+      </Helper>
+      {!isLoading && (!accountData || !accountData?.accounts?.length) && (
+        <>
+          <ConnectToGithubButton
+            href={`/api/integrations/github-app/install?redirect_uri=${encoded_redirect_uri}`}
+          >
+            <GitHubIcon src={github} /> Connect to GitHub
+          </ConnectToGithubButton>
+          <Helper>
+            No thanks, I want to deploy from a
+            <A onClick={() => nextStep("docker")}>Docker registry</A>.
+          </Helper>
+        </>
+      )}
+      {!isLoading && accountData?.accounts.length && (
+        <>
+          <List>
+            {accountData?.accounts.map((name, i) => {
+              return (
+                <Row
+                  key={i}
+                  isLastItem={i === accountData.accounts.length - 1}
+                >
+                  <i className="material-icons">bookmark</i>
+                  {name}
+                </Row>
+              );
+            })}
+          </List>
+          <br />
+          Don't see the right repos?{" "}
+          <A href={"/api/integrations/github-app/install"}>
+            Install Porter in more repositories
+          </A>
+          <NextStep
+            text="Continue"
+            disabled={false}
+            onClick={() => nextStep("github")}
+            status={""}
+            makeFlush={true}
+            clearPosition={true}
+            statusPosition="right"
+            saveText=""
+            successText="Project created successfully!"
+          />
+        </>
+      )}
     </div>
   );
 };

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

@@ -5,6 +5,7 @@ import React from "react";
 import { useParams } from "react-router";
 import styled from "styled-components";
 import ProviderSelector from "../../components/ProviderSelector";
+import ProvisionerStatus from "components/ProvisionerStatus";
 
 import FormFlowWrapper from "./forms/FormFlow";
 import ConnectExternalCluster from "./forms/_ConnectExternalCluster";
@@ -58,6 +59,10 @@ const ProvisionResources: React.FC<Props> = ({
         Porter automatically creates a cluster and registry in your cloud to run
         applications.
       </Helper>
+
+      <ProvisionerStatus />
+
+      {/*
       {provider ? (
         provider !== "external" ? (
           <FormFlowWrapper
@@ -80,6 +85,7 @@ const ProvisionResources: React.FC<Props> = ({
           />
         </>
       )}
+      */}
     </div>
   );
 };