From 62da923f43d828b170ab5fafb4ebfba47c417c21 Mon Sep 17 00:00:00 2001 From: jusrhee Date: Thu, 21 Sep 2023 15:33:57 -0400 Subject: [PATCH] removed mui (#3555) Co-authored-by: Justin Rhee Co-authored-by: Soham Dessai Co-authored-by: sdess09 <37374498+sdess09@users.noreply.github.com> --- dashboard/src/assets/check.png | Bin 0 -> 341 bytes .../src/components/CloudFormationForm.tsx | 346 +++++++++--------- dashboard/src/components/PreflightChecks.tsx | 66 ++-- .../src/components/ProvisionerSettings.tsx | 1 + .../src/components/porter/VerticalSteps.tsx | 84 +++-- dashboard/src/shared/util.ts | 7 +- 6 files changed, 276 insertions(+), 228 deletions(-) create mode 100644 dashboard/src/assets/check.png diff --git a/dashboard/src/assets/check.png b/dashboard/src/assets/check.png new file mode 100644 index 0000000000000000000000000000000000000000..d23bba6d287c428be19869cbefca7372d7c9b680 GIT binary patch literal 341 zcmeAS@N?(olHy`uVBq!ia0vp^%0Mi|!3HF4*F3cWQk(@Ik;M!QiWVTu=sL|X0Vv2= z9OUlAutKF>SEf-=qES%h;T~@TrAF1OP@6oMDxR*@<~=q+0bQf{fud%_3P8phverSZ+>EK zqqsr9W2eE&L+6ftWy?SDL`Q?oqw&P{Cv_5^99=IkZB*DO7WB;f-+xE;6(P?=xt1Ke zcjB{_gyLVWC5{<(3amx0Ycl?FN!uy>s`dWOpTe|CG$5PpCc~yyABVGSCz!)dMy4|s kHdrmmVtb|WDf*VQ%AC7(Uha*@fxc$&boFyt=akR{0D>BS=l}o! literal 0 HcmV?d00001 diff --git a/dashboard/src/components/CloudFormationForm.tsx b/dashboard/src/components/CloudFormationForm.tsx index 116a0dc37e..1b36a28aa4 100644 --- a/dashboard/src/components/CloudFormationForm.tsx +++ b/dashboard/src/components/CloudFormationForm.tsx @@ -15,10 +15,11 @@ import Button from "./porter/Button"; import Link from "./porter/Link"; import Container from "./porter/Container"; import Step from "./porter/Step"; -import { Box, Step as MuiStep, StepContent, StepLabel, Stepper, ThemeProvider, Typography, createTheme } from "@material-ui/core"; import { useQuery } from "@tanstack/react-query"; import Modal from "./porter/Modal"; import theme from "shared/themes/midnight"; +import VerticalSteps from "./porter/VerticalSteps"; +import PreflightChecks from "./PreflightChecks"; type Props = { goBack: () => void; @@ -26,36 +27,6 @@ type Props = { switchToCredentialFlow: () => void; }; -const stepperTheme = createTheme({ - palette: { - background: { - paper: 'none', - }, - text: { - primary: '#DFDFE1', - secondary: '#aaaabb', - }, - action: { - active: '#001E3C', - }, - }, - typography: { - fontFamily: "Work Sans, sans-serif", - }, - overrides: { - MuiStepIcon: { - root: { - '&$completed': { - color: theme.button, - }, - '&$active': { - color: theme.button, - }, - }, - }, - }, -}); - const CloudFormationForm: React.FC = ({ goBack, proceed, @@ -65,6 +36,7 @@ const CloudFormationForm: React.FC = ({ const [currentStep, setCurrentStep] = useState(0); const [hasClickedCloudformationButton, setHasClickedCloudformationButton] = useState(false); const [showNeedHelpModal, setShowNeedHelpModal] = useState(false); + const [preflightData, setPreflightData] = useState(undefined); const { currentProject, user } = useContext(Context); const markStepStarted = async ( @@ -116,10 +88,17 @@ const CloudFormationForm: React.FC = ({ id: currentProject.id, } ); + setPreflightData({ + "Msg": { + "preflight_checks": { + cloudFormation: {}, + } + } + }) return true; }, { - enabled: currentStep === 2, + enabled: currentStep === 3, retry: (failureCount, err) => { // if they've waited over 35 seconds notify us on slack. Cloudformation stack should only take around 20-25 seconds to create if (failureCount === 7 && hasClickedCloudformationButton) { @@ -203,6 +182,7 @@ const CloudFormationForm: React.FC = ({ } const directToCloudFormation = () => { + setCurrentStep(3) const externalId = getExternalId(); let trustArn = process.env.TRUST_ARN ? process.env.TRUST_ARN : "arn:aws:iam::108458755588:role/CAPIManagement"; const cloudformation_url = `https://console.aws.amazon.com/cloudformation/home?#/stacks/create/review?templateURL=https://porter-role.s3.us-east-2.amazonaws.com/cloudformation-policy.json&stackName=PorterRole¶m_ExternalIdParameter=${externalId}¶m_TrustArnParameter=${trustArn}` @@ -216,150 +196,168 @@ const CloudFormationForm: React.FC = ({ <> Grant Porter permissions to create infrastructure in your AWS account by following 3 simple steps. - - - - Log in to your AWS Account. - - Return to Porter after successful login. - - - - - - - - - - - - - Enter your AWS Account ID. - - Make sure this is the ID of the account you are currently logged into and would like to provision resources in. - - - 👤 AWS account ID - { - window.open("https://us-east-1.console.aws.amazon.com/billing/home?region=us-east-1#/account", "_blank") - }} - > - help_outline - - - } - value={AWSAccountID} - setValue={handleAWSAccountIDChange} - placeholder="ex: 915037676314" - error={awsAccountIdInputError} - /> - - - - - - - - - - This grants Porter permissions to create infrastructure in your account.}>Create an AWS Cloudformation Stack. - - Clicking the button below will take you to the AWS CloudFormation console. Return to Porter after clicking 'Create stack' in the bottom right corner. - - - - - - - - Once the CloudFormation stack has status{" "} - - CREATE_COMPLETE - , you may proceed. - - - This may take 1 - 2 minutes. - - - - - - - - setShowNeedHelpModal(true)}> + + Log in to your AWS account + + + Return to Porter after successful login. + + + + + + + + + , + <> + Enter your AWS account ID + + + Make sure this is the ID of the account you are currently logged into and would like to provision resources in. + + + + 👤 AWS account ID + { + window.open("https://us-east-1.console.aws.amazon.com/billing/home?region=us-east-1#/account", "_blank") + }} + > + help_outline + + + } + value={AWSAccountID} + setValue={handleAWSAccountIDChange} + placeholder="ex: 915037676314" + error={awsAccountIdInputError} + /> + + + + + + + , + <> + Create an AWS CloudFormation stack + + + This grants Porter permissions to create infrastructure in your account. + + + + Clicking the button below will take you to the AWS CloudFormation console. Return to Porter after clicking 'Create stack' in the bottom right corner. + + + + + + + + + + + + + , + <> + Check permissions + + + Checking if Porter can access AWS account with ID {AWSAccountID}. This can take up to a minute. setShowNeedHelpModal(true)}> Need help? - - - {showNeedHelpModal && - setShowNeedHelpModal(false)} width={"800px"}> - Granting Porter access to AWS - - - Porter needs access to your AWS account in order to create infrastructure. You can grant Porter access to AWS by following these steps: - - - - - Create an AWS account - - - if you don't already have one. - - - - Once you are logged in to your AWS account, - - - copy your account ID - . - - - Fill in your account ID on Porter and select "Grant permissions". - - After being redirected to AWS CloudFormation, select "Create stack" on the bottom right. - - The stack will start to create. Refresh until the stack status has changed from "CREATE_IN_PROGRESS" to "CREATE_COMPLETE": - - - - - - Return to Porter and select "Continue". - - If you continue to see issues, email support. - - } - - + + + + + + + + + + , + ]} + /> + {showNeedHelpModal && + setShowNeedHelpModal(false)} width={"800px"}> + Granting Porter access to AWS + + + Porter needs access to your AWS account in order to create infrastructure. You can grant Porter access to AWS by following these steps: + + + + + Create an AWS account + + + if you don't already have one. + + + + Once you are logged in to your AWS account, + + + copy your account ID + . + + + Fill in your account ID on Porter and select "Grant permissions". + + After being redirected to AWS CloudFormation, select "Create stack" on the bottom right. + + The stack will start to create. Refresh until the stack status has changed from "CREATE_IN_PROGRESS" to "CREATE_COMPLETE": + + + + + + Return to Porter and select "Continue". + + If you continue to see issues, email support. + + } ); } diff --git a/dashboard/src/components/PreflightChecks.tsx b/dashboard/src/components/PreflightChecks.tsx index b5d5132138..09f049767d 100644 --- a/dashboard/src/components/PreflightChecks.tsx +++ b/dashboard/src/components/PreflightChecks.tsx @@ -91,33 +91,45 @@ const PreflightChecks: React.FC = (props) => { ); }; return ( - - Cluster provision check - - - Porter checks that the account has the right permissions and resources to provision a cluster. - - - { - props.error ? - props.provider === 'AWS' ? - : - <> - - - - Check to see if billing is enabled on your account - - - - : - Object.keys(currentMessageConst).map((checkKey) => ( - - )) - } - - ); + props.provider === 'DEFAULT' ? + + {Object.keys(currentMessageConst).map((checkKey) => ( + + ))} + + : + + ( + + + Cluster provision check + + + Porter checks that the account has the right permissions and resources to provision a cluster. + + + { + props.error ? + props.provider === 'AWS' ? + : + <> + + + + Check to see if billing is enabled on your account + + + + : + Object.keys(currentMessageConst).map((checkKey) => ( + + )) + + } + + ) + ) }; @@ -131,7 +143,7 @@ const AppearingDiv = styled.div<{ color?: string }>` display: flex; flex-direction: column; color: ${(props) => props.color || "#ffffff44"}; - margin-left: 10px; + @keyframes floatIn { from { opacity: 0; diff --git a/dashboard/src/components/ProvisionerSettings.tsx b/dashboard/src/components/ProvisionerSettings.tsx index 61bddbbbf6..83594d295f 100644 --- a/dashboard/src/components/ProvisionerSettings.tsx +++ b/dashboard/src/components/ProvisionerSettings.tsx @@ -1013,6 +1013,7 @@ const ProvisionerSettings: React.FC = (props) => { Preflight checks for the account didn't pass. Please fix the issues and retry. + < Button // disabled={isDisabled()} disabled={isLoading} diff --git a/dashboard/src/components/porter/VerticalSteps.tsx b/dashboard/src/components/porter/VerticalSteps.tsx index b68be7fbdd..4b01613fe5 100644 --- a/dashboard/src/components/porter/VerticalSteps.tsx +++ b/dashboard/src/components/porter/VerticalSteps.tsx @@ -1,39 +1,54 @@ import React, { useEffect, useState } from "react"; import styled from "styled-components"; +import AnimateHeight from "react-animate-height"; +import Button from "./Button"; +import Spacer from "./Spacer"; +import Container from "./Container"; + +import check from "assets/check.png"; type Props = { steps: React.ReactNode[]; currentStep: number; + onlyShowCurrentStep?: boolean; }; const VerticalSteps: React.FC = ({ steps, currentStep, + onlyShowCurrentStep, }) => { const [isExpanded, setIsExpanded] = useState(false); return ( + {steps.map((step, i) => { return ( - - { - (i !== steps.length - 1) && ( - - ) - } - - {i+1} - - - {step} - { - i > currentStep && ( + + {i === steps.length - 1 && ( + + )} + {onlyShowCurrentStep && i < currentStep ? ( + + ) : ( + + {i+1} + + )} + + + {step} + {i > currentStep && ( - ) - } - - + )} + + + ); })} @@ -42,6 +57,33 @@ const VerticalSteps: React.FC = ({ export default VerticalSteps; +const LineCover = styled.div` + width: 10px; + height: 100%; + position: absolute; + left: -4px; + top: 0; + background: #121212; +`; + +const Relative = styled.div` + position: relative; +`; + +const Check = styled.img` + height: 26px; + border-radius: 50%; + position: absolute; + left: -8px; + top: -2px; + opacity: 1; + display: flex; + justify-content: center; + align-items: center; + background: #121212; + padding: 8px; +`; + const Number = styled.div` font-size: 12px; color: #fff; @@ -57,14 +99,13 @@ const ReadOnlyOverlay = styled.div` `; const Line = styled.div<{ - isActive: boolean; + isActive?: boolean; }>` width: 1px; - height: calc(100% + 35px); + height: calc(100% - 10px); background: #414141; position: absolute; left: 4px; - top: 8px; opacity: 1; `; @@ -91,7 +132,7 @@ const OpacityWrapper = styled.div<{ opacity: ${props => props.isActive ? 1 : 0.5}; `; -const StepWrapper = styled.div<{ +const StepWrapper = styled(AnimateHeight)<{ isLast: boolean; }>` padding-left: 30px; @@ -101,4 +142,5 @@ const StepWrapper = styled.div<{ const StyledVerticalSteps = styled.div<{ }>` + position: relative; `; \ No newline at end of file diff --git a/dashboard/src/shared/util.ts b/dashboard/src/shared/util.ts index e88a6799b2..c14efd3f36 100644 --- a/dashboard/src/shared/util.ts +++ b/dashboard/src/shared/util.ts @@ -13,12 +13,7 @@ export function valueExists(value: T | null | undefined): value is T { export const PREFLIGHT_MESSAGE_CONST = { - "apiEnabled": "APIs enabled on service account", - "cidrAvailability": "CIDR availability", - "eip": "Elastic IP availability", - "natGateway": "NAT Gateway availability", - "vpc": "VPC availability", - "vcpus": "vCPUs availability", + "cloudFormation": "CloudFormation stack created", } export const PREFLIGHT_MESSAGE_CONST_AWS = {