Update loading bar to update loading bar state on a 1 minute interval (#2837)

dashboard/src/components/CopyToClipboard.tsx

@@ -10,6 +10,7 @@ type PropsType = {
   onError?: (e: ClipboardJS.Event) => void;
   wrapperProps?: any;
   as?: any;
+  children: JSX.Element[];
 };
 
 type StateType = {

dashboard/src/components/ProvisionerSettings.tsx

@@ -56,7 +56,7 @@ const clusterVersionOptions = [
 type Props = RouteComponentProps & {
   selectedClusterVersion?: Contract;
   credentialId: string;
-  AWSAccountID: string;
+  AWSAccountID?: string;
   clusterId?: number;
 };
 

dashboard/src/components/porter/LoadingBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 type Props = {
@@ -22,7 +22,7 @@ const LoadingBar: React.FC<Props> = ({
         return color;
     }
   };
-  
+
   return (
     <StyledLoadingBar>
       <LoadingFill
@@ -52,15 +52,17 @@ const movingGradient = keyframes`
   }
 `;
 
-const LoadingFill = styled.div<{ 
+const LoadingFill = styled.div<{
   percent: string;
   color?: string;
 }>`
   width: ${props => props.percent};
-  background: ${props => props.color || "linear-gradient(to right, #8ce1ff, #616FEE)"};
+  background: ${props =>
+    props.color || "linear-gradient(to right, #8ce1ff, #616FEE)"};
   height: 100%;
   background-size: 250% 100%;
   animation: ${movingGradient} 2s infinite;
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
-`;
+  transition: width 0.5s ease-in-out;
+`;

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

@@ -345,99 +345,6 @@ const Br = styled.div`
   height: 35px;
 `;
 
-const RevisionHeader = styled.div`
-  color: ${(props: { showRevisions: boolean; isCurrent: boolean }) =>
-    props.isCurrent ? "#ffffff66" : "#f5cb42"};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 40px;
-  font-size: 13px;
-  width: 100%;
-  padding-left: 15px;
-  cursor: pointer;
-  :hover {
-    background: ${props => props.showRevisions && "#ffffff18"};
-    > div > i {
-      background: ${props => props.showRevisions && "#ffffff22"};
-    }
-  }
-  border-radius: 5px;
-  background: #26292e;
-  border: 1px solid #494b4f;
-  margin-top: 25px;
-  margin-bottom: 22px;
-
-  > div > i {
-    margin-left: 12px;
-    font-size: 20px;
-    cursor: pointer;
-    border-radius: 20px;
-    background: ${(props: { showRevisions: boolean; isCurrent: boolean }) =>
-      props.showRevisions ? "#ffffff18" : ""};
-    transform: ${(props: { showRevisions: boolean; isCurrent: boolean }) =>
-      props.showRevisions ? "rotate(180deg)" : ""};
-  }
-`;
-
-const Revision = styled.div`
-  color: #ffffff;
-  margin-left: 5px;
-`;
-
-const RevisionPreview = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const DashboardIcon = styled.div`
-  height: 35px;
-  min-width: 35px;
-  width: 35px;
-  border-radius: 5px;
-  margin-right: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #676c7c;
-  border: 2px solid #8e94aa;
-  > i {
-    font-size: 18px;
-  }
-`;
-
-const TopRow = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Description = styled.div`
-  color: #8b949f;
-  margin-top: 13px;
-  margin-left: 2px;
-  font-size: 13px;
-`;
-
-const InfoLabel = styled.div`
-  width: 72px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  color: #8b949f;
-  font-size: 13px;
-  > i {
-    color: #8b949f;
-    font-size: 18px;
-    margin-right: 5px;
-  }
-`;
-
-const InfoSection = styled.div`
-  margin-top: -20px;
-  font-size: 13px;
-  margin-bottom: 25px;
-`;
-
 const Url = styled.a`
   font-size: 13px;
   user-select: text;
@@ -462,12 +369,3 @@ const Bolded = styled.span`
   margin-right: 6px;
   white-space: nowrap;
 `;
-
-const FormWrapper = styled.div<{ showSave?: boolean }>`
-  width: 100%;
-  margin-top: 35px;
-  border-radius: 5px;
-  background: #26292e;
-  border: 1px solid #494b4f;
-  padding: 30px;
-`;

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

@@ -3,24 +3,24 @@ import styled from "styled-components";
 
 import aws from "assets/aws.png";
 import api from "shared/api";
-import loading from "assets/loading.gif";
 
 import { Context } from "shared/Context";
-import ExpandableSection from "components/porter/ExpandableSection";
 import LoadingBar from "components/porter/LoadingBar";
 import Spacer from "components/porter/Spacer";
-import Helper from "components/form-components/Helper";
 import Text from "components/porter/Text";
+import Button from "components/porter/Button";
 
 type Props = {
   provisionFailureReason: string;
 };
 
+const PROVISIONING_STATUS_POLL_INTERVAL = 60 * 1000; // poll every minute
+
 const ProvisionerStatus: React.FC<Props> = ({
   provisionFailureReason,
 }) => {
   const { currentProject, currentCluster } = useContext(Context);
-  const [progress, setProgress] = useState(1);
+  const [progress, setProgress] = useState(0);
 
   // Continuously poll provisioning status
   const pollProvisioningStatus = async () => {
@@ -33,27 +33,27 @@ const ProvisionerStatus: React.FC<Props> = ({
           cluster_id: currentCluster.id,
         }
       );
-      const { status } = res.data;
-      switch (status) {
-        case status["BOOTSTRAP_READY"]:
-          setProgress(2);
-          break;
-        case status["CONTROL_PLANE_READY"]:
-          setProgress(3);
-          break;
-        case status["INFRASTRUCTURE_READY"]:
-          setProgress(4);
-          break;
-        default:
-          setProgress(1);
+      const { is_control_plane_ready, is_infrastructure_ready, status } = res.data;
+      let progress = 1;
+      if (is_control_plane_ready) {
+        progress += 1
+      }
+      if (is_infrastructure_ready) {
+        progress += 1
+      }
+      if (status === 'Provisioned') {
+        progress += 1
       }
+      setProgress(progress);
     } catch (err) {
       console.log(err);
     }
   };
 
   useEffect(() => {
-    pollProvisioningStatus(); 
+    const intervalId = setInterval(pollProvisioningStatus, PROVISIONING_STATUS_POLL_INTERVAL);
+    pollProvisioningStatus();
+    return () => clearInterval(intervalId);
   }, []);
 
   return (
@@ -65,9 +65,9 @@ const ProvisionerStatus: React.FC<Props> = ({
         </Flex>
         <Spacer height="18px" />
         <LoadingBar
-          color={provisionFailureReason && "failed"}
+          color={provisionFailureReason ? "failed" : undefined}
           completed={progress} 
-          total={5} 
+          total={4} 
         />
         <Spacer height="18px" />
         <Text color="#aaaabb">
@@ -110,18 +110,6 @@ const Icon = styled.img`
   margin-bottom: -1px;
 `;
 
-const Img = styled.img`
-  height: 15px;
-  margin-right: 7px;
-`;
-
-const Status = styled.div`
-  color: #aaaabb;
-  display: flex;
-  align-items: center;
-  margin-left: 15px;
-`;
-
 const StyledProvisionerStatus = styled.div`
   border-radius: 5px;
   background: #26292e;