Merge pull request #2748 from porter-dev/staging

merge capi state ping and credential -> arn changes

dashboard/src/components/CredentialsForm.tsx

@@ -37,7 +37,7 @@ const CredentialsForm: React.FC<Props> = ({
   const [isLoading, setIsLoading] = useState(true);
   const [awsAccessKeyID, setAWSAccessKeyID] = useState("");
   const [awsSecretAccessKey, setAWSSecretAccessKey] = useState("");
-  const [selectedCredentials, setSelectedCredentials] = useState<AWSCredential>(null);
+  const [selectedCredentials, setSelectedCredentials] = useState(null);
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [createStatus, setCreateStatus] = useState("");
 
@@ -128,7 +128,7 @@ const CredentialsForm: React.FC<Props> = ({
           <Br height="34px" />
           <SaveButton
             disabled={!selectedCredentials && true}
-            onClick={() => proceed(selectedCredentials.id)}
+            onClick={() => proceed(selectedCredentials.aws_arn)}
             clearPosition
             text="Continue"
           />
@@ -340,4 +340,4 @@ const StyledForm = styled.div`
   border: 1px solid #494b4f;
   font-size: 13px;
   margin-bottom: 30px;
-`;
+`;

dashboard/src/components/porter/Button.tsx

@@ -8,6 +8,7 @@ type Props = {
   onClick: () => void;
   disabled?: boolean;
   status?: string;
+  helperText?: string;
   loadingText?: string;
   successText?: string;
   width?: string;
@@ -19,6 +20,7 @@ const Button: React.FC<Props> = ({
   onClick,
   disabled,
   status,
+  helperText,
   loadingText,
   successText,
   width,
@@ -40,6 +42,10 @@ const Button: React.FC<Props> = ({
             {loadingText || "Updating . . ."}
           </StatusWrapper>
         );
+      case "":
+        return helperText && (
+          <StatusWrapper success={false}>{helperText}</StatusWrapper>
+        )   
       default:
         return (
           <StatusWrapper success={false}>
@@ -60,7 +66,7 @@ const Button: React.FC<Props> = ({
       >
         <Text>{children}</Text>
       </StyledButton>
-      {status && renderStatus()}
+      {(helperText || status) && renderStatus()}
     </Wrapper>
   );
 };
@@ -89,6 +95,7 @@ const StatusWrapper = styled.div<{
   success?: boolean;
 }>`
   display: flex;
+  line-height: 1.5;
   align-items: center;
   font-family: "Work Sans", sans-serif;
   font-size: 13px;

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

@@ -124,6 +124,7 @@ const ClusterSettingsModal: React.FC<Props> = ({
         onClick={renameCluster}
         disabled={clusterName === ""}
         status={status}
+        helperText="Note: The vanity name for your cluster will not change the cluster's name in your cloud provider."
       >
         Save
       </Button>

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

@@ -32,7 +32,7 @@ var tabOptions: {
 }[] = [{ label: "Additional settings", value: "settings" }];
 
 export const Dashboard: React.FunctionComponent = () => {
-  const [currentTab, setCurrentTab] = useState<TabEnum>("nodes");
+  const [currentTab, setCurrentTab] = useState<TabEnum>("settings");
   const [currentTabOptions, setCurrentTabOptions] = useState(tabOptions);
   const [isAuthorized] = useAuth();
   const location = useLocation();

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

@@ -25,7 +25,7 @@ const ProvisionerStatus: React.FC<Props> = ({
   // Continuously poll provisioning status
   const pollProvisioningStatus = async () => {
     try {
-      const res = await api.getClusterStatus(
+      const res = await api.getClusterState(
         "<token>",
         {},
         {
@@ -47,9 +47,15 @@ const ProvisionerStatus: React.FC<Props> = ({
         default:
           setProgress(1);
       }
-    } catch (error) {}
+    } catch (err) {
+      console.log(err);
+    }
   };
 
+  useEffect(() => {
+    pollProvisioningStatus(); 
+  }, []);
+
   return (
     <StyledProvisionerStatus>
       <HeaderSection>

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -27,7 +27,6 @@ const ClusterList: React.FC<Props> = ({}) => {
       { id: currentProject.id },
     )
       .then(({ data }) => {
-        console.log(data);
         setClusters(data);
         setIsLoading(false);
       })

dashboard/src/shared/api.tsx

@@ -932,6 +932,13 @@ const deleteContract = baseApi<
   return `/api/projects/${project_id}/contracts/${revision_id}`;
 });
 
+const getClusterState = baseApi<
+  {},
+  { project_id: number, cluster_id: number }
+>("GET", ({ project_id, cluster_id }) => {
+  return `/api/projects/${project_id}/clusters/${cluster_id}/state`;
+});
+
 const provisionInfra = baseApi<
   {
     kind: string;
@@ -2504,6 +2511,7 @@ export default {
   getPodByName,
   getMatchingPods,
   getAllReleasePods,
+  getClusterState,
   getMetrics,
   getNamespaces,
   getNGINXIngresses,