Skip to content

Commit b587538

Browse files
Elessar1802Elessar1802
authored
Merge pull request #2631 from devtron-labs/feature/create-cluster
feature: add EKS create cluster
2 parents 960e5a7 + 54d7a9f commit b587538

File tree

64 files changed

+2399
-1536
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+2399
-1536
lines changed

‎.eslintignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ src/components/CIPipelineN/ciPipeline.utils.tsx
5252
src/components/ClusterNodes/ClusterEvents.tsx
5353
src/components/ClusterNodes/ClusterManifest.tsx
5454
src/components/ClusterNodes/ClusterNodeEmptyStates.tsx
55-
src/components/ClusterNodes/ClusterOverview.tsx
5655
src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
5756
src/components/ClusterNodes/NodeActions/NodeActionsMenu.tsx
5857
src/components/ClusterNodes/NodeActions/validationRules.ts
@@ -208,7 +207,6 @@ src/components/ciPipeline/ciPipeline.service.ts
208207
src/components/ciPipeline/validationRules.ts
209208
src/components/cluster/Cluster.tsx
210209
src/components/cluster/ClusterComponentModal.tsx
211-
src/components/cluster/ClusterForm.tsx
212210
src/components/cluster/ClusterInfoStepsModal.tsx
213211
src/components/cluster/ClusterInstallStatus.tsx
214212
src/components/cluster/UseNameListDropdown.tsx

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.13.0-pre-3",
7+
"@devtron-labs/devtron-fe-common-lib": "1.13.0-pre-4",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/constants.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { EnterpriseTag, OverrideMergeStrategyType, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
17+
import { Icon, OverrideMergeStrategyType, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
1818

1919
import { importComponentFromFELibrary } from '@Components/common'
2020

@@ -37,7 +37,11 @@ export const MERGE_STRATEGY_OPTIONS: SelectPickerOptionType[] = [
3737
label: (
3838
<div className="flexbox dc__gap-8">
3939
<span>Patch</span>
40-
{!isFELibAvailable && <EnterpriseTag />}
40+
{!isFELibAvailable && (
41+
<div className="dc__fill-available-space dc__w-fit-content h-20">
42+
<Icon name="ic-enterprise-tag" size={null} color={null} />
43+
</div>
44+
)}
4145
</div>
4246
),
4347
description: 'Override values for specific keys',

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
*/
1616

1717
import { useEffect, useState } from 'react'
18+
import { generatePath } from 'react-router-dom'
1819

1920
import {
2021
Button,
@@ -32,6 +33,7 @@ import {
3233
TagType,
3334
ToastManager,
3435
ToastVariantType,
36+
Tooltip,
3537
useForm,
3638
UseFormSubmitHandler,
3739
} from '@devtron-labs/devtron-fe-common-lib'
@@ -45,6 +47,7 @@ import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from '@Components/cluster/cons
4547
import { importComponentFromFELibrary } from '@Components/common'
4648
import { URLS } from '@Config/routes'
4749

50+
import { CreateClusterTypeEnum } from '../CreateCluster/types'
4851
import { EnvironmentDeleteComponent } from '../EnvironmentDeleteComponent'
4952
import { clusterEnvironmentDrawerFormValidationSchema } from './schema'
5053
import { ClusterEnvironmentDrawerFormProps, ClusterEnvironmentDrawerProps, ClusterNamespacesDTO } from './types'
@@ -61,12 +64,12 @@ export const ClusterEnvironmentDrawer = ({
6164
namespace,
6265
id,
6366
clusterId,
64-
prometheusEndpoint,
6567
isProduction,
6668
description,
6769
reload,
6870
hideClusterDrawer,
6971
isVirtual,
72+
clusterName,
7073
}: ClusterEnvironmentDrawerProps) => {
7174
// STATES
7275
// Manages the loading state for create and update actions
@@ -89,6 +92,8 @@ export const ClusterEnvironmentDrawer = ({
8992
error: null,
9093
})
9194

95+
const addEnvironmentHeaderText = `Add Environment in '${clusterName}'`
96+
9297
/**
9398
* Fetches the list of namespaces from the cluster and updates the state accordingly. \
9499
* Optionally sets namespace labels after the fetch is complete.
@@ -169,7 +174,6 @@ export const ClusterEnvironmentDrawer = ({
169174
clusterId,
170175
id,
171176
namespaceLabels: namespaceLabels.labels,
172-
prometheusEndpoint,
173177
resourceVersion: namespaceLabels.resourceVersion,
174178
isVirtual,
175179
})
@@ -248,7 +252,6 @@ export const ClusterEnvironmentDrawer = ({
248252
data,
249253
clusterId,
250254
id,
251-
prometheusEndpoint,
252255
isVirtual,
253256
})
254257
await deleteEnvironment(payload)
@@ -259,7 +262,9 @@ export const ClusterEnvironmentDrawer = ({
259262
<Button
260263
dataTestId="add_cluster_button"
261264
linkProps={{
262-
to: URLS.GLOBAL_CONFIG_CREATE_CLUSTER,
265+
to: generatePath(URLS.GLOBAL_CONFIG_CREATE_CLUSTER, {
266+
type: CreateClusterTypeEnum.CONNECT_CLUSTER,
267+
}),
263268
}}
264269
component={ButtonComponentType.link}
265270
startIcon={<ICAdd />}
@@ -400,7 +405,12 @@ export const ClusterEnvironmentDrawer = ({
400405
<Drawer position="right" width="800px" onEscape={hideClusterDrawer} onClose={hideClusterDrawer}>
401406
<div className="h-100 bg__primary flexbox-col" onClick={stopPropagation}>
402407
<div className="flexbox dc__align-items-center dc__content-space dc__border-bottom bg__primary py-12 px-20">
403-
<h3 className="m-0 fs-16 fw-6 lh-1-43">{id ? 'Edit Environment' : 'Add Environment'}</h3>
408+
{/* NOTE: only in case of add environment, can we have truncation */}
409+
<Tooltip content={addEnvironmentHeaderText}>
410+
<h3 className="m-0 fs-16 fw-6 lh-1-43 dc__truncate">
411+
{id ? 'Edit Environment' : addEnvironmentHeaderText}
412+
</h3>
413+
</Tooltip>
404414
<button
405415
type="button"
406416
aria-label="close-btn"

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ export interface ClusterEnvironmentDrawerFormProps {
2626
export interface ClusterEnvironmentDrawerProps extends ClusterEnvironmentDrawerFormProps {
2727
id: string
2828
clusterId: number
29-
prometheusEndpoint: string
3029
reload: () => void
3130
hideClusterDrawer: () => void
3231
isVirtual: boolean
32+
clusterName: string
3333
}
3434

3535
export type GetClusterEnvironmentUpdatePayloadType = Pick<
3636
ClusterEnvironmentDrawerProps,
37-
'clusterId' | 'id' | 'prometheusEndpoint' | 'isVirtual'
37+
'clusterId' | 'id' | 'isVirtual'
3838
> &
3939
Partial<Pick<ClusterNamespacesDTO, 'resourceVersion'>> & {
4040
data: ClusterEnvironmentDrawerFormProps

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/utils.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { ClusterNamespacesDTO, GetClusterEnvironmentUpdatePayloadType } from './
1919
export const getClusterEnvironmentUpdatePayload = ({
2020
id,
2121
data,
22-
prometheusEndpoint,
2322
clusterId,
2423
namespaceLabels,
2524
resourceVersion,
@@ -38,7 +37,6 @@ export const getClusterEnvironmentUpdatePayload = ({
3837
id,
3938
environment_name: data.environmentName,
4039
cluster_id: clusterId,
41-
prometheus_endpoint: prometheusEndpoint,
4240
namespace: data.namespace || '',
4341
active: true,
4442
default: data.isProduction,

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/CreateCluster.component.tsx

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { useState } from 'react'
2+
import { generatePath, Prompt, Redirect, useHistory, useParams } from 'react-router-dom'
3+
4+
import {
5+
Button,
6+
ButtonComponentType,
7+
ButtonStyleType,
8+
ButtonVariantType,
9+
ComponentSizeType,
10+
DEFAULT_ROUTE_PROMPT_MESSAGE,
11+
Drawer,
12+
stopPropagation,
13+
} from '@devtron-labs/devtron-fe-common-lib'
14+
15+
import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
16+
import ClusterForm from '@Components/cluster/ClusterForm'
17+
import { importComponentFromFELibrary } from '@Components/common'
18+
import { URLS } from '@Config/routes'
19+
import EnterpriseTrialDialog from '@Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/EnterpriseTrialDialog'
20+
21+
import FooterComponent from './FooterComponent'
22+
import Sidebar from './Sidebar'
23+
import { CreateClusterParams, CreateClusterProps, CreateClusterTypeEnum } from './types'
24+
25+
import './styles.scss'
26+
27+
const CreateClusterForm = importComponentFromFELibrary(
28+
'CreateClusterForm',
29+
() => (
30+
<EnterpriseTrialDialog
31+
featureTitle="EKS Cluster"
32+
featureDescription="With Devtron, you can effortlessly create an Amazon EKS cluster."
33+
/>
34+
),
35+
'function',
36+
)
37+
const VirtualClusterForm = importComponentFromFELibrary(
38+
'VirtualClusterForm',
39+
() => (
40+
<EnterpriseTrialDialog
41+
featureTitle="Isolated Cluster"
42+
featureDescription="An isolated cluster in Devtron is an air-gapped Kubernetes cluster with restricted network access."
43+
/>
44+
),
45+
'function',
46+
)
47+
48+
const CreateCluster = ({ handleReloadClusterList, handleRedirectOnModalClose }: CreateClusterProps) => {
49+
const { type } = useParams<CreateClusterParams>()
50+
51+
const [apiCallInProgress, setApiCallInProgress] = useState(false)
52+
53+
const { push } = useHistory()
54+
55+
const handleRedirectToClusterList = () => {
56+
push(URLS.GLOBAL_CONFIG_CLUSTER)
57+
handleReloadClusterList()
58+
}
59+
60+
const handleModalClose = handleRedirectOnModalClose ?? handleRedirectToClusterList
61+
62+
const handleRedirectToClusterInstallationStatus = (installationId: string) => {
63+
push(generatePath(URLS.RESOURCE_BROWSER_INSTALLATION_CLUSTER, { installationId }))
64+
}
65+
66+
const renderContent = () => {
67+
switch (type) {
68+
case CreateClusterTypeEnum.CONNECT_CLUSTER:
69+
return (
70+
<ClusterForm
71+
handleCloseCreateClusterForm={handleModalClose}
72+
reload={handleReloadClusterList}
73+
handleModalClose={handleModalClose}
74+
FooterComponent={FooterComponent}
75+
/>
76+
)
77+
case CreateClusterTypeEnum.CREATE_EKS_CLUSTER:
78+
return (
79+
<CreateClusterForm
80+
apiCallInProgress={apiCallInProgress}
81+
setApiCallInProgress={setApiCallInProgress}
82+
handleModalClose={handleModalClose}
83+
handleRedirectToClusterInstallationStatus={handleRedirectToClusterInstallationStatus}
84+
FooterComponent={FooterComponent}
85+
/>
86+
)
87+
case CreateClusterTypeEnum.ADD_ISOLATED_CLUSTER:
88+
return (
89+
<VirtualClusterForm
90+
newClusterFormProps={{ apiCallInProgress, setApiCallInProgress, FooterComponent }}
91+
handleModalClose={handleModalClose}
92+
reload={handleReloadClusterList}
93+
/>
94+
)
95+
default:
96+
return <Redirect to={URLS.GLOBAL_CONFIG_CLUSTER} />
97+
}
98+
}
99+
100+
return (
101+
<Drawer position="right" width="1024px" onEscape={handleModalClose} onClose={handleModalClose}>
102+
<div
103+
className="bg__primary h-100 cn-9 w-100 flexbox-col dc__overflow-hidden p-0 create-cluster"
104+
onClick={stopPropagation}
105+
>
106+
<header className="px-20 py-12 lh-24 flexbox dc__content-space dc__align-items-center dc__border-bottom">
107+
<h3 className="m-0 fs-16 fw-6 lh-1-43 dc__first-letter-capitalize">New Cluster</h3>
108+
109+
<Button
110+
icon={<ICClose />}
111+
dataTestId="close-create-cluster-modal-button"
112+
component={ButtonComponentType.button}
113+
style={ButtonStyleType.negativeGrey}
114+
size={ComponentSizeType.xs}
115+
variant={ButtonVariantType.borderLess}
116+
ariaLabel="Close new cluster drawer"
117+
showTooltip={apiCallInProgress}
118+
tooltipProps={{
119+
content: DEFAULT_ROUTE_PROMPT_MESSAGE,
120+
}}
121+
disabled={apiCallInProgress}
122+
onClick={handleModalClose}
123+
showAriaLabelInTippy={false}
124+
/>
125+
</header>
126+
127+
<div className="flexbox flex-grow-1 dc__overflow-hidden create-cluster__body">
128+
<Sidebar />
129+
130+
<div className="bg__tertiary flex-grow-1 flexbox-col dc__overflow-auto p-20 dc__gap-16">
131+
{renderContent()}
132+
</div>
133+
</div>
134+
135+
<Prompt when={apiCallInProgress} message={DEFAULT_ROUTE_PROMPT_MESSAGE} />
136+
</div>
137+
</Drawer>
138+
)
139+
}
140+
141+
export default CreateCluster

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/EnterpriseTrialDialog.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {
2+
Button,
3+
ComponentSizeType,
4+
DOCUMENTATION,
5+
getHandleOpenURL,
6+
Icon,
7+
TESTIMONIAL_CARD_DATA,
8+
TestimonialContent,
9+
} from '@devtron-labs/devtron-fe-common-lib'
10+
11+
import { EnterpriseTrialDialogProps } from './types'
12+
13+
const EnterpriseTrialDialog = ({ featureTitle, featureDescription }: EnterpriseTrialDialogProps) => {
14+
const testimonialCount = TESTIMONIAL_CARD_DATA.length
15+
const randomNumber = Math.round(Math.random() * testimonialCount) % testimonialCount
16+
const testimonialConfig = TESTIMONIAL_CARD_DATA[randomNumber]
17+
18+
return (
19+
<div className="flexbox-col br-16 border__primary dc__overflow-hidden enterprise-trial-dialog">
20+
<div className="p-24 flexbox-col dc__gap-16 border__secondary--bottom">
21+
<Icon name="ic-enterprise-tag" size={null} color={null} />
22+
<div className="flexbox-col dc__gap-8 ">
23+
<span className="fs-24 fw-7 lh-1-5 cn-9 font-merriweather">{featureTitle}</span>
24+
<span className="fs-16 fw-4 lh-1-5">{featureDescription}</span>
25+
</div>
26+
</div>
27+
<div className="p-24 flexbox-col dc__gap-24">
28+
<div className="flex dc__content-space">
29+
<span className="fs-16 fw-6 lh-1-5 cn-9">Unlock Devtron&apos;s Full Potential</span>
30+
<Button
31+
dataTestId="get-free-trial"
32+
text="Get free trial"
33+
endIcon={<Icon name="ic-arrow-right" color={null} />}
34+
onClick={getHandleOpenURL(DOCUMENTATION.ENTERPRISE_LICENSE)}
35+
size={ComponentSizeType.medium}
36+
/>
37+
</div>
38+
<div className="p-24 flexbox dc__gap-12 br-8 border__primary bg__primary">
39+
<div className="flexbox-col dc__align-items-center h-100 dc__gap-8">
40+
<Icon name="ic-quote" color="N900" />
41+
<div className="border__primary--left w-1 flex-grow-1" />
42+
</div>
43+
<div className="flexbox-col dc__gap-20">
44+
<TestimonialContent {...testimonialConfig} />
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
)
50+
}
51+
52+
export default EnterpriseTrialDialog

0 commit comments

Comments
 (0)