diff --git a/components/clusterDetails/clusterDetails.stories.tsx b/components/clusterDetails/clusterDetails.stories.tsx new file mode 100644 index 00000000..f4593dc3 --- /dev/null +++ b/components/clusterDetails/clusterDetails.stories.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { Story } from '@storybook/react'; + +import ClusterDetails from '.'; + +import { ClusterInfo } from '../clusterTable/clusterTable'; +import { ClusterStatus, ClusterType } from '../../types/provision'; +import { InstallationType } from '../../types/redux'; + +export default { + title: 'Components/ClusterDetails', + component: ClusterDetails, +}; + +const cluster: ClusterInfo = { + clusterName: 'kuberfirst-mgmt2', + type: ClusterType.MANAGEMENT, + cloudProvider: InstallationType.AWS, + cloudRegion: 'ap-southeast-1', + creationDate: '05 Apr 2023, 12:24:56', + adminEmail: 'admin@mycompany.com', + gitProvider: 'Github', + domainName: 'yourdomain.com', + gitUser: 'Eleanor Carroll', + status: ClusterStatus.PROVISIONED, + nodes: 2, + instanceSize: '8 CPU Cores / 64 GB RAM / 120 GB NvME storage / 8 TB Data Transfer', +}; + +const DefaultTemplate: Story = (args) => ; + +export const Default = DefaultTemplate.bind({}); diff --git a/components/clusterDetails/clusterDetails.styled.ts b/components/clusterDetails/clusterDetails.styled.ts index b0e832f6..93d6bfcc 100644 --- a/components/clusterDetails/clusterDetails.styled.ts +++ b/components/clusterDetails/clusterDetails.styled.ts @@ -1,33 +1,36 @@ import styled from 'styled-components'; +import { styled as muiStyled, typographyClasses } from '@mui/material'; import ColumnComponent from '../column'; import RowComponent from '../row'; - -export const Container = styled.div``; - -export const Header = styled.div` - display: flex; - justify-content: space-between; - padding: 24px; - - & svg { - cursor: pointer; - } -`; +import Typography from '../typography'; +import { EXCLUSIVE_PLUM, VOLCANIC_SAND } from '../../constants/colors'; export const Content = styled.div` display: flex; flex-direction: column; gap: 32px; - padding: 24px; `; export const Column = styled(ColumnComponent)` gap: 8px; justify-content: space-between; - width: 100%; `; export const Row = styled(RowComponent)` - width: 100%; + gap: 156px; `; + +export const StyledLabel = muiStyled(Typography)(() => ({ + [`&.${typographyClasses.root}`]: { + color: EXCLUSIVE_PLUM, + width: '196px', + }, +})); + +export const StyledValue = muiStyled(Typography)(() => ({ + [`&.${typographyClasses.root}`]: { + color: VOLCANIC_SAND, + width: '196px', + }, +})); diff --git a/components/clusterDetails/index.tsx b/components/clusterDetails/index.tsx index 4e7df985..f5678148 100644 --- a/components/clusterDetails/index.tsx +++ b/components/clusterDetails/index.tsx @@ -1,125 +1,88 @@ -import React, { FunctionComponent } from 'react'; -import { Box, Divider } from '@mui/material'; -import CloseIcon from '@mui/icons-material/Close'; +import React, { ComponentPropsWithoutRef, FunctionComponent } from 'react'; import moment from 'moment'; -import Typography from '../../components/typography'; -import NextLink from '../../components/nextLink'; -import { BISCAY, EXCLUSIVE_PLUM, SALTBOX_BLUE, VOLCANIC_SAND } from '../../constants/colors'; -import { Cluster } from '../../types/provision'; +import { ClusterInfo } from '../clusterTable/clusterTable'; -import { Content, Column, Header, Row } from './clusterDetails.styled'; +import { Content, Column, Row, StyledLabel, StyledValue } from './clusterDetails.styled'; -export interface ClusterDetailsProps { - cluster: Cluster; - onClose: () => void; +export interface ClusterDetailsProps extends ComponentPropsWithoutRef<'div'> { + cluster: ClusterInfo; } -const ClusterDetails: FunctionComponent = ({ cluster, onClose }) => { +const ClusterDetails: FunctionComponent = ({ cluster, ...rest }) => { const { adminEmail, cloudProvider, cloudRegion, - clusterName, creationDate, domainName, gitProvider, gitUser, + nodes, + instanceSize, } = cluster; return ( - -
- - Cluster Details - - -
- - - - - - Cluster name - - - {clusterName} - - - - - - - GIT provider - - - {gitProvider} - - - - - Cloud provider - - - {cloudProvider} - - - - - - - Created - - - {moment(new Date(creationDate as string)).format('DD MMM YYYY, HH:mm:ss')} - - - - - Created by - - - {gitUser} - - - - - - - Cluster domain name - - - {domainName} - - - - - Cloud region - - - {cloudRegion} - - - - - - - Alerts email - - - {adminEmail} - - - - - Console url - - - {`kubefirst.${domainName}`} - - - - - + + {/* Top Row */} + + + Cluster domain name + {domainName} + + + Alerts email + {adminEmail} + + + + {/* Second Row */} + + + Created + + {moment(new Date(creationDate as string)).format('DD MMM YYYY, HH:mm:ss')} + + + + Created by + {gitUser} + + + + {/* Third Row */} + + + GIT provider + {gitProvider} + + + Cloud provider + {cloudProvider} + + + + {/* Fourth Row */} + + + Cloud region + {cloudRegion} + + + Number of nodes + {nodes} + + + + {/* Fifth Row */} + + + Instance size + + {instanceSize} + + + + ); }; diff --git a/components/clusterTable/clusterTable.stories.tsx b/components/clusterTable/clusterTable.stories.tsx index ce009c6a..8f9805e4 100644 --- a/components/clusterTable/clusterTable.stories.tsx +++ b/components/clusterTable/clusterTable.stories.tsx @@ -20,6 +20,9 @@ const clusters: ClusterInfo[] = [ creationDate: '05 Apr 2023, 12:24:56', gitUser: 'Eleanor Carroll', status: ClusterStatus.PROVISIONED, + adminEmail: 'admin@mycompany.com', + gitProvider: 'Github', + domainName: 'yourdomain.com', nodes: 2, }, { @@ -31,6 +34,9 @@ const clusters: ClusterInfo[] = [ creationDate: '05 Apr 2023, 12:24:56', gitUser: 'Eleanor Carroll', status: ClusterStatus.ERROR, + adminEmail: 'admin@mycompany.com', + gitProvider: 'Github', + domainName: 'yourdomain.com', }, { clusterName: 'kuberfirst-mgmt2', @@ -41,6 +47,9 @@ const clusters: ClusterInfo[] = [ creationDate: '05 Apr 2023, 12:24:56', gitUser: 'Eleanor Carroll', status: ClusterStatus.DELETING, + adminEmail: 'admin@mycompany.com', + gitProvider: 'Github', + domainName: 'yourdomain.com', }, { clusterName: 'kuberfirst-mgmt2', @@ -51,6 +60,9 @@ const clusters: ClusterInfo[] = [ creationDate: '05 Apr 2023, 12:24:56', gitUser: 'Eleanor Carroll', status: ClusterStatus.PROVISIONED, + adminEmail: 'admin@mycompany.com', + gitProvider: 'Github', + domainName: 'yourdomain.com', }, { clusterName: 'kuberfirst-mgmt2', @@ -61,6 +73,9 @@ const clusters: ClusterInfo[] = [ creationDate: '05 Apr 2023, 12:24:56', gitUser: 'Eleanor Carroll', status: ClusterStatus.PROVISIONED, + adminEmail: 'admin@mycompany.com', + gitProvider: 'Github', + domainName: 'yourdomain.com', }, ]; diff --git a/components/clusterTable/clusterTable.tsx b/components/clusterTable/clusterTable.tsx index 67b639fc..e1797143 100644 --- a/components/clusterTable/clusterTable.tsx +++ b/components/clusterTable/clusterTable.tsx @@ -39,9 +39,19 @@ const CLOUD_LOGO_OPTIONS: Record = { export type ClusterInfo = Pick< Cluster, - 'clusterName' | 'type' | 'cloudProvider' | 'cloudRegion' | 'creationDate' | 'gitUser' | 'status' + | 'clusterName' + | 'type' + | 'domainName' + | 'gitProvider' + | 'cloudProvider' + | 'cloudRegion' + | 'creationDate' + | 'gitUser' + | 'status' + | 'adminEmail' > & { nodes?: number; + instanceSize?: string; }; const ClusterRow: FunctionComponent = ({ diff --git a/containers/clusterForms/clusterCreation/clusterCreation.stories.tsx b/containers/clusterForms/clusterCreation/clusterCreation.stories.tsx new file mode 100644 index 00000000..fa3610b6 --- /dev/null +++ b/containers/clusterForms/clusterCreation/clusterCreation.stories.tsx @@ -0,0 +1,34 @@ +import React, { useRef } from 'react'; +import { Story } from '@storybook/react'; +import { FormProvider, useForm } from 'react-hook-form'; + +import ClusterCreationForm, { ClusterConfig } from '.'; + +export default { + title: 'Forms/ClusterCreationForm', + component: ClusterCreationForm, +}; + +const DefaultTemplate: Story = () => { + const methods = useForm(); + + const formRef = useRef(null); + + const handleClick = () => { + if (formRef.current) { + formRef.current.requestSubmit(); + } + }; + + return ( + + console.log('the form values =>', config)} + /> + + + ); +}; + +export const Default = DefaultTemplate.bind({}); diff --git a/containers/clusterForms/clusterCreation/clusterCreation.styled.ts b/containers/clusterForms/clusterCreation/clusterCreation.styled.ts new file mode 100644 index 00000000..c386e692 --- /dev/null +++ b/containers/clusterForms/clusterCreation/clusterCreation.styled.ts @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +export const Form = styled.form` + display: flex; + flex-direction: column; + gap: 32px; +`; diff --git a/containers/clusterForms/clusterCreation/index.tsx b/containers/clusterForms/clusterCreation/index.tsx new file mode 100644 index 00000000..8a056177 --- /dev/null +++ b/containers/clusterForms/clusterCreation/index.tsx @@ -0,0 +1,123 @@ +import React, { ComponentPropsWithRef, forwardRef, useState } from 'react'; +import { useFormContext } from 'react-hook-form'; + +import ControlledAutocomplete from '../../../components/controlledFields/AutoComplete'; +import ControlledTextField from '../../../components/controlledFields/TextField'; +import { useAppDispatch, useAppSelector } from '../../../redux/store'; +import { getCloudDomains } from '../../../redux/thunks/api.thunk'; +import ControlledSelect from '../../../components/controlledFields/Select'; +import NumberInput from '../../../components/numberInput'; +import Row from '../../../components/row'; +import Button from '../../../components/button'; +import { Form } from './clusterCreation.styled'; + +export type ClusterConfig = { + clusterName?: string; + domainName?: string; + cloudRegion?: string; + instanceSize?: string; + nodeCount?: number; +}; + +const minNodeCount = 1; + +interface ClusterCreationFormProps extends ComponentPropsWithRef<'form'> { + onFormSubmit: (config: ClusterConfig) => void; +} + +const ClusterCreationForm = forwardRef( + function ClusterCreationForm({ onFormSubmit, ...rest }, ref) { + const dispatch = useAppDispatch(); + const { cloudDomains, cloudRegions, values } = useAppSelector(({ api, installation }) => ({ + cloudDomains: api.cloudDomains, + cloudRegions: api.cloudRegions, + values: installation.values, + })); + + const handleRegionOnSelect = async (region: string) => { + dispatch(getCloudDomains(region)); + }; + + const formatDomains = (domains: Array) => { + return domains.map((domain) => { + const formattedDomain = domain[domain.length - 1].includes('.') + ? domain.substring(0, domain.length - 1) + : domain; + return { label: formattedDomain, value: formattedDomain }; + }); + }; + + const [value, setValue] = useState(minNodeCount); + + const { control, register, handleSubmit } = useFormContext(); + + return ( +
+ + + + + + ({ label: region, value: region }))} + onChange={handleRegionOnSelect} + /> + + setValue((curVal) => curVal + 1)} + onDecrease={() => setValue((curVal) => (curVal === minNodeCount ? curVal : curVal - 1))} + inputProps={{ + value, + type: 'number', + ...register('nodeCount', { required: true }), + required: true, + min: minNodeCount, + }} + /> + {/* TODO: ADD Advanced options */} + + ); + }, +); + +export default ClusterCreationForm; diff --git a/containers/clusterForms/finalForm/finalForm.stories.tsx b/containers/clusterForms/finalForm/finalForm.stories.tsx deleted file mode 100644 index 7d1c5717..00000000 --- a/containers/clusterForms/finalForm/finalForm.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { Story } from '@storybook/react'; -import { FormProvider, useForm } from 'react-hook-form'; - -import FinalForm, { ClusterConfig } from '.'; - -export default { - title: 'Forms/FinalForm', - component: FinalForm, -}; - -const DefaultTemplate: Story = (args) => { - const methods = useForm(); - - return ( - -
console.log('the form values =>', values))} - style={{ display: 'flex', flexDirection: 'column', gap: '32px' }} - > - - - -
- ); -}; - -export const Default = DefaultTemplate.bind({}); diff --git a/containers/clusterForms/finalForm/index.tsx b/containers/clusterForms/finalForm/index.tsx deleted file mode 100644 index 0caba8f0..00000000 --- a/containers/clusterForms/finalForm/index.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React, { FunctionComponent, useState } from 'react'; -import { useFormContext } from 'react-hook-form'; - -import ControlledAutocomplete from '../../../components/controlledFields/AutoComplete'; -import ControlledTextField from '../../../components/controlledFields/TextField'; -import { useAppDispatch, useAppSelector } from '../../../redux/store'; -import { getCloudDomains } from '../../../redux/thunks/api.thunk'; -import ControlledSelect from '../../../components/controlledFields/Select'; -import NumberInput from '../../../components/numberInput'; -import Row from '../../../components/row'; -import Button from '../../../components/button'; - -export type ClusterConfig = { - clusterName?: string; - domainName?: string; - cloudRegion?: string; - instanceSize?: string; - nodeCount?: number; -}; - -const minNodeCount = 1; - -const FinalForm: FunctionComponent = () => { - const dispatch = useAppDispatch(); - const { cloudDomains, cloudRegions, values } = useAppSelector(({ api, installation }) => ({ - cloudDomains: api.cloudDomains, - cloudRegions: api.cloudRegions, - values: installation.values, - })); - - const handleRegionOnSelect = async (region: string) => { - dispatch(getCloudDomains(region)); - }; - - const formatDomains = (domains: Array) => { - return domains.map((domain) => { - const formattedDomain = domain[domain.length - 1].includes('.') - ? domain.substring(0, domain.length - 1) - : domain; - return { label: formattedDomain, value: formattedDomain }; - }); - }; - - const [value, setValue] = useState(minNodeCount); - - const { control, register } = useFormContext(); - - return ( - <> - - - - - - ({ label: region, value: region }))} - onChange={handleRegionOnSelect} - /> - - setValue((curVal) => curVal + 1)} - onDecrease={() => setValue((curVal) => (curVal === minNodeCount ? curVal : curVal - 1))} - inputProps={{ - value, - type: 'number', - ...register('nodeCount', { required: true }), - required: true, - min: minNodeCount, - }} - /> - {/* TODO: ADD Advanced options */} - - ); -}; - -export default FinalForm; diff --git a/containers/clusterManagement/clusterManagement.styled.ts b/containers/clusterManagement/clusterManagement.styled.ts index 1576086e..63280fc2 100644 --- a/containers/clusterManagement/clusterManagement.styled.ts +++ b/containers/clusterManagement/clusterManagement.styled.ts @@ -5,21 +5,6 @@ import Typography from '../../components/typography'; import Column from '../../components/column'; import Row from '../../components/row'; -export const CloseButton = styled.button` - border: none; - background-color: transparent; - cursor: pointer; -`; - -export const ClusterMenuFooter = styled(Row)` - justify-content: flex-end; - gap: 16px; - padding-right: 24px; - align-items: center; - height: 88px; - border-top: 1px solid #e2e8f0; -`; - export const Container = styled(Column)` flex: 1; margin: 0 auto; @@ -36,18 +21,6 @@ export const Description = styled(Typography)` margin-top: 8px; `; -export const FinalFormContainer = styled(Column)` - gap: 32px; - padding: 23px; - flex: 1; -`; - -export const Form = styled.form` - display: flex; - flex-direction: column; - flex: 1; -`; - export const Header = styled(Row)` color: ${({ theme }) => theme.colors.volcanicSand}; height: 70px; @@ -61,9 +34,3 @@ export const LearnMoreLink = styled(Link)` color: ${({ theme }) => theme.colors.primary}; text-decoration: none; `; - -export const MenuHeader = styled(Header)` - padding: 0 24px; - border-bottom: 1px solid #e2e8f0; - border-top: none; -`; diff --git a/containers/clusterManagement/createClusterFlow/createClusterFlow.styled.ts b/containers/clusterManagement/createClusterFlow/createClusterFlow.styled.ts new file mode 100644 index 00000000..4a24d74a --- /dev/null +++ b/containers/clusterManagement/createClusterFlow/createClusterFlow.styled.ts @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +import Row from '../../../components/row'; + +export const CloseButton = styled.button` + border: none; + background-color: transparent; + cursor: pointer; +`; + +export const ClusterMenuFooter = styled(Row)<{ reverseButtonOrder?: boolean }>` + flex-direction: ${({ reverseButtonOrder }) => (reverseButtonOrder ? 'row-reverse' : 'row')}; + justify-content: ${({ reverseButtonOrder }) => + reverseButtonOrder ? 'space-between' : 'flex-end'}; + gap: 16px; + padding: 0 24px; + align-items: center; + height: 88px; + border-top: 1px solid #e2e8f0; +`; + +export const MenuHeader = styled(Row)` + color: ${({ theme }) => theme.colors.volcanicSand}; + height: 70px; + justify-content: space-between; + align-items: center; + background-color: white; + padding: 0 24px; + border-bottom: 1px solid #e2e8f0; +`; diff --git a/containers/clusterManagement/createClusterFlow/index.tsx b/containers/clusterManagement/createClusterFlow/index.tsx new file mode 100644 index 00000000..3da63a13 --- /dev/null +++ b/containers/clusterManagement/createClusterFlow/index.tsx @@ -0,0 +1,107 @@ +import React, { FunctionComponent, useCallback, useRef, useState } from 'react'; +import CloseIcon from '@mui/icons-material/Close'; +import { FormProvider, useForm } from 'react-hook-form'; + +import Typography from '../../../components/typography'; +import Button from '../../../components/button'; +import { SALTBOX_BLUE } from '../../../constants/colors'; +import Column from '../../../components/column'; +import LinearProgress from '../../../components/linearProgress'; +import ClusterCreationForm, { + ClusterConfig, +} from '../../../containers/clusterForms/clusterCreation'; +import TerminalLogs from '../../../containers/terminalLogs'; +import ClusterDetails from '../../../components/clusterDetails'; +import { ClusterInfo } from '../../../components/clusterTable/clusterTable'; + +import { CloseButton, ClusterMenuFooter, MenuHeader } from './createClusterFlow.styled'; + +enum CLUSTER_MANAGEMENT_STEP { + CREATE, + PROVISION, + DETAILS, +} + +const actionButtonText: Record = { + [CLUSTER_MANAGEMENT_STEP.CREATE]: 'Create cluster', + [CLUSTER_MANAGEMENT_STEP.PROVISION]: 'View cluster details', + [CLUSTER_MANAGEMENT_STEP.DETAILS]: 'Delete Cluster', +}; + +interface CreateClusterFlowProps { + onMenuClose: () => void; + cluster?: ClusterInfo; +} + +export const CreateClusterFlow: FunctionComponent = ({ + cluster, + onMenuClose, +}) => { + const [workloadClusterStep, setWorkloadClusterStep] = useState( + CLUSTER_MANAGEMENT_STEP.CREATE, + ); + + const methods = useForm(); + + const formRef = useRef(null); + + const handleMenuClose = useCallback(() => { + onMenuClose(); + setWorkloadClusterStep((curStep) => + curStep === CLUSTER_MANAGEMENT_STEP.PROVISION ? curStep : CLUSTER_MANAGEMENT_STEP.CREATE, + ); + }, [onMenuClose, setWorkloadClusterStep]); + + const handleClick = useCallback(() => { + setWorkloadClusterStep((curStep) => + curStep === CLUSTER_MANAGEMENT_STEP.DETAILS ? curStep : curStep + 1, + ); + }, [setWorkloadClusterStep]); + + const showingClusterDetails = workloadClusterStep === CLUSTER_MANAGEMENT_STEP.DETAILS; + + return ( + <> + + + {showingClusterDetails ? cluster?.clusterName : 'Create workload cluster'} + + + + + + + {workloadClusterStep === CLUSTER_MANAGEMENT_STEP.CREATE && ( + + console.log('the values =>', config)} + ref={formRef} + style={{ height: '100%', marginTop: '32px' }} + /> + + )} + {workloadClusterStep === CLUSTER_MANAGEMENT_STEP.PROVISION && ( + + + + + )} + {workloadClusterStep === CLUSTER_MANAGEMENT_STEP.DETAILS && cluster && ( + + )} + + + + + + + ); +}; diff --git a/containers/clusterManagement/index.tsx b/containers/clusterManagement/index.tsx index 3efa2c36..f7dad9a4 100644 --- a/containers/clusterManagement/index.tsx +++ b/containers/clusterManagement/index.tsx @@ -1,8 +1,6 @@ import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'; import { Box, Snackbar, Tabs } from '@mui/material'; import { useRouter } from 'next/router'; -import { FormProvider, useForm } from 'react-hook-form'; -import Image from 'next/image'; import Button from '../../components/button'; import Typography from '../../components/typography'; @@ -16,27 +14,13 @@ import Drawer from '../../components/drawer'; import { Row } from '../../types'; import useModal from '../../hooks/useModal'; import DeleteCluster from '../deleteCluster'; - -import { - CloseButton, - ClusterMenuFooter, - Container, - Content, - FinalFormContainer, - Form, - Header, - MenuHeader, -} from './clusterManagement.styled'; - -import { getClusterManagementColumns, getClusterState } from './columnDefinition'; - -import FinalForm, { ClusterConfig } from '../../containers/clusterForms/finalForm'; import TabPanel, { Tab, a11yProps } from '../../components/tab'; import { BISCAY, SALTBOX_BLUE } from '../../constants/colors'; import { Flow } from '../../components/flow'; -import closeImageSrc from '../../assets/close.svg'; -import Column from '../../components/column'; import { ClusterTable } from '../../components/clusterTable/clusterTable'; +import { CreateClusterFlow } from './createClusterFlow'; + +import { Container, Content, Header } from './clusterManagement.styled'; enum MANAGEMENT_TABS { LIST_VIEW = 0, @@ -75,14 +59,14 @@ const ClusterManagement: FunctionComponent = () => { } }; - const handleDeleteCluster = () => { - dispatch(deleteCluster({ clusterName: selectedCluster?.clusterName })).unwrap(); + const handleDeleteCluster = async () => { + await dispatch(deleteCluster({ clusterName: selectedCluster?.clusterName })).unwrap(); handleGetClusters(); closeDeleteModal(); }; - const handleCreateCluster = async () => { - await dispatch(resetInstallState()); + const handleCreateCluster = () => { + dispatch(resetInstallState()); push('/provision'); }; @@ -125,8 +109,6 @@ const ClusterManagement: FunctionComponent = () => { setActiveTab(newValue); }; - const methods = useForm(); - return (
@@ -177,37 +159,16 @@ const ClusterManagement: FunctionComponent = () => { open={isDetailsPanelOpen} anchor="right" hideBackdrop - sx={{ top: '20px' }} PaperProps={{ - sx: { top: '65px', boxShadow: '0px 2px 4px rgba(100, 116, 139, 0.16)', width: '684px' }, + sx: { + top: '65px', + boxShadow: '0px 2px 4px rgba(100, 116, 139, 0.16)', + width: '684px', + height: 'calc(100% - 65px)', + }, }} - onClose={closeDetailsPanel} > - - Create workload cluster - - close - - - - -
console.log('the form values =>', values))} - > - - - - - - - -
- - + { state.loading = true; }) - .addCase(createCluster.fulfilled, (state, { payload }: PayloadAction) => { + .addCase(createCluster.fulfilled, (state, { payload }) => { state.loading = false; - state.status = payload.status as ClusterStatus; + state.status = payload.status; state.isProvisioning = true; }) .addCase(createCluster.rejected, (state) => { diff --git a/redux/thunks/api.thunk.ts b/redux/thunks/api.thunk.ts index 5475c922..76e7be62 100644 --- a/redux/thunks/api.thunk.ts +++ b/redux/thunks/api.thunk.ts @@ -91,7 +91,7 @@ export const createCluster = createAsyncThunk< ...values?.vultr_auth, }, }; - const res = await axios.post('/api/proxy', { + const res = await axios.post('/api/proxy', { url: `/cluster/${values?.clusterName || 'kubefirst'}`, body: params, }); diff --git a/types/provision/index.ts b/types/provision/index.ts index e9a96166..3034f44f 100644 --- a/types/provision/index.ts +++ b/types/provision/index.ts @@ -10,6 +10,20 @@ import { import { Row } from '../'; import { InstallValues, InstallationType } from '../redux'; +export enum ClusterStatus { + DELETED = 'deleted', + DELETING = 'deleting', + ERROR = 'error', + PROVISIONED = 'provisioned', + PROVISIONING = 'provisioning', +} + +export enum ClusterType { + MANAGEMENT = 'mgmt', + WORKLOAD = 'workload', + DRAFT = 'draft', +} + export interface FormFlowProps { currentStep: number; control: Control; @@ -30,14 +44,14 @@ export interface ClusterRequestProps { export interface ClusterResponse { _id: string; creation_timestamp: string; - status: string; + status: ClusterStatus; in_progress: boolean; cluster_name: string; - cloud_provider: string; + cloud_provider: InstallationType; cloud_region: string; domain_name: string; cluster_id: string; - cluster_type: string; + cluster_type: ClusterType.MANAGEMENT | ClusterType.WORKLOAD; alerts_email: string; git_provider: string; git_owner: string; @@ -63,20 +77,6 @@ export interface ClusterResponse { users_terraform_apply_check: boolean; } -export enum ClusterStatus { - DELETED = 'deleted', - DELETING = 'deleting', - ERROR = 'error', - PROVISIONED = 'provisioned', - PROVISIONING = 'provisioning', -} - -export enum ClusterType { - MANAGEMENT = 'mgmt', - WORKLOAD = 'workload', - DRAFT = 'draft', -} - export interface Cluster extends Row { adminEmail: string; clusterName: string;