Skip to content

Commit bd0c9b7

Browse files
arunjaindevarunjaindev
authored
Merge pull request #2843 from devtron-labs/feat/cluster-map
feat: use cluster map from fe-common
2 parents 9260744 + 403131c commit bd0c9b7

File tree

23 files changed

+304
-187
lines changed

23 files changed

+304
-187
lines changed

‎.env

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ FEATURE_SWAP_TRAFFIC_ENABLE=false
6060
FEATURE_RB_SYNC_CLUSTER_ENABLE=true
6161
FEATURE_BULK_RESTART_WORKLOADS_FROM_RB=deployment,rollout,daemonset,statefulset
6262
FEATURE_DEFAULT_MERGE_STRATEGY=
63-
FEATURE_CLUSTER_MAP_ENABLE=true
6463
FEATURE_DEFAULT_LANDING_RB_ENABLE=false
6564
FEATURE_ACTION_AUDIOS_ENABLE=true
6665
FEATURE_APPLICATION_TEMPLATES_ENABLE=true

‎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.18.0-pre-0",
7+
"@devtron-labs/devtron-fe-common-lib": "1.18.0-pre-1",
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/DeploymentTemplate/DTChartSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const ChartSelectorDropdown = ({
120120
/>
121121
</div>
122122
</PopupMenu.Button>
123-
<PopupMenu.Body rootClassName="dc__overflow-auto mxh-350 w-400 dc__border br-4">
123+
<PopupMenu.Body noBackDrop rootClassName="dc__overflow-auto mxh-350 w-400 dc__border br-4">
124124
<>
125125
{customCharts.length > 0 && (
126126
<div

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

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const ClusterEnvironmentDrawer = ({
115115
)
116116

117117
// FORM METHODS
118-
const { data, errors, register, handleSubmit, trigger } = useForm<EnvironmentFormType>({
118+
const { data, errors, register, handleSubmit, trigger, reset } = useForm<EnvironmentFormType>({
119119
initialValues: {
120120
clusterId: clusterId ?? null,
121121
envName: envName ?? '',
@@ -138,6 +138,7 @@ export const ClusterEnvironmentDrawer = ({
138138
setIsSelectedClusterVirtual(clusterDetails[0].isVirtualCluster)
139139
setClusterNamespaces(INITIAL_NAMESPACES)
140140
setNamespaceLabels(INITIAL_NAMESPACE_LABELS)
141+
reset(data, { keepErrors: false })
141142
}
142143
}, [clusterDetails])
143144

@@ -321,7 +322,7 @@ export const ClusterEnvironmentDrawer = ({
321322
<div className="flexbox p-20 bg__secondary flex-grow-1 dc__overflow-auto">
322323
<div className="flexbox-col dc__gap-16 bg__primary br-12 p-20 flex-grow-1 dc__h-fit-content">
323324
<div className="flexbox dc__gap-8">
324-
<div className="w-200">
325+
<div className="w-250 dc__no-shrink">
325326
<SelectPicker
326327
inputId="create-env-select-cluster"
327328
label="Cluster"
@@ -342,6 +343,7 @@ export const ClusterEnvironmentDrawer = ({
342343
}
343344
error={errors.clusterId}
344345
size={ComponentSizeType.large}
346+
fullWidth
345347
/>
346348
</div>
347349
<span className="lh-36 fs-20 fw-4 cn-7 pt-26">/</span>
@@ -379,41 +381,39 @@ export const ClusterEnvironmentDrawer = ({
379381
autoFocus={!!envId}
380382
shouldTrim={false}
381383
/>
382-
{!isSelectedClusterVirtual && (
383-
<div className="flex left dc__gap-24 fs-13">
384-
<div className="dc__required-field cn-7">Type of Environment</div>
385-
<div className="flex left dc__gap-16">
386-
<label htmlFor="env-production-checkbox" className="flex cursor mb-0">
387-
<input
388-
id="env-production-checkbox"
389-
data-testid="production"
390-
type="radio"
391-
checked={data.isProduction}
392-
value="true"
393-
{...register('isProduction', {
394-
sanitizeFn: (value) => value === 'true',
395-
noTrim: true,
396-
})}
397-
/>
398-
<span className="ml-10 fw-4 mt-4">Production</span>
399-
</label>
400-
<label htmlFor="env-non-production-checkbox" className="flex cursor mb-0">
401-
<input
402-
id="env-non-production-checkbox"
403-
data-testid="nonProduction"
404-
type="radio"
405-
checked={!data.isProduction}
406-
value="false"
407-
{...register('isProduction', {
408-
sanitizeFn: (value) => value === 'true',
409-
noTrim: true,
410-
})}
411-
/>
412-
<span className="ml-10 fw-4 mt-4">Non - Production</span>
413-
</label>
414-
</div>
384+
<div className="flex left dc__gap-24 fs-13">
385+
<div className="dc__required-field cn-7">Type of Environment</div>
386+
<div className="flex left dc__gap-16">
387+
<label htmlFor="env-production-checkbox" className="flex cursor mb-0">
388+
<input
389+
id="env-production-checkbox"
390+
data-testid="production"
391+
type="radio"
392+
checked={data.isProduction}
393+
value="true"
394+
{...register('isProduction', {
395+
sanitizeFn: (value) => value === 'true',
396+
noTrim: true,
397+
})}
398+
/>
399+
<span className="ml-10 fw-4 mt-4">Production</span>
400+
</label>
401+
<label htmlFor="env-non-production-checkbox" className="flex cursor mb-0">
402+
<input
403+
id="env-non-production-checkbox"
404+
data-testid="nonProduction"
405+
type="radio"
406+
checked={!data.isProduction}
407+
value="false"
408+
{...register('isProduction', {
409+
sanitizeFn: (value) => value === 'true',
410+
noTrim: true,
411+
})}
412+
/>
413+
<span className="ml-10 fw-4 mt-4">Non - Production</span>
414+
</label>
415415
</div>
416-
)}
416+
</div>
417417
{AssignCategorySelect && (
418418
<div className="w-250">
419419
<AssignCategorySelect
@@ -480,7 +480,7 @@ export const ClusterEnvironmentDrawer = ({
480480
noValidate
481481
>
482482
<div className="flexbox dc__align-items-center dc__content-space dc__border-bottom bg__primary py-12 px-20">
483-
<h3 className="m-0 fs-16 fw-6 lh-1-43 dc__truncate">{envId ? 'Edit' : 'Create'} Environment</h3>
483+
<h3 className="m-0 fs-16 fw-6 lh-1-43 cn-9 dc__truncate">{envId ? 'Edit' : 'Add'} Environment</h3>
484484
<Button
485485
dataTestId="close-env-modal"
486486
ariaLabel="close-btn"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const getClusterEnvironmentUpdatePayload = ({
3636
cluster_id: data.clusterId,
3737
description: data.description || '',
3838
...(getCategoryPayload ? getCategoryPayload(data.category) : null),
39+
isProd: data.isProduction,
3940
}
4041
: {
4142
id: envId,

‎src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx

Lines changed: 64 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Button,
88
ButtonStyleType,
99
ButtonVariantType,
10+
ClusterStatusType,
1011
ComponentSizeType,
1112
Drawer,
1213
FiltersTypeEnum,
@@ -31,19 +32,41 @@ import {
3132
DEFAULT_CLUSTER_ID,
3233
EditDeleteClusterProps,
3334
} from './cluster.type'
35+
import { getBulletColorAccToStatus } from './cluster.util'
3436
import { ClusterEnvironmentDrawer } from './ClusterEnvironmentDrawer'
3537
import DeleteClusterConfirmationModal from './DeleteClusterConfirmationModal'
3638
import EditClusterDrawerContent from './EditClusterDrawerContent'
3739

3840
const HibernationRulesModal = importComponentFromFELibrary('HibernationRulesModal', null, 'function')
3941
const VirtualClusterForm = importComponentFromFELibrary('VirtualClusterForm', null, 'function')
4042

43+
export const ClusterIconWithStatus = ({
44+
clusterStatus,
45+
isVirtualCluster,
46+
}: {
47+
clusterStatus: ClusterStatusType
48+
isVirtualCluster: boolean
49+
}) => {
50+
const statusColor = getBulletColorAccToStatus(clusterStatus)
51+
return (
52+
<span className="dc__position-rel dc__overflow-hidden icon-dim-24">
53+
<Icon name="ic-bg-cluster" color={null} size={24} />
54+
{!isVirtualCluster && (
55+
<span
56+
className={`dc__position-abs dc__top-16 icon-dim-10 dc__border-radius-50-per dc__right-2--neg ${statusColor}`}
57+
style={{ border: '2px solid var(--N0)' }}
58+
/>
59+
)}
60+
</span>
61+
)
62+
}
63+
4164
export const ClusterListCellComponent: FunctionComponent<
4265
TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>
4366
> = ({
4467
field,
4568
row: {
46-
data: { clusterId, clusterName, clusterType, envCount, serverUrl, clusterCategory, isVirtualCluster },
69+
data: { clusterId, clusterName, clusterType, envCount, serverUrl, clusterCategory, isVirtualCluster, status },
4770
},
4871
isRowActive,
4972
}: TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>) => {
@@ -82,6 +105,9 @@ export const ClusterListCellComponent: FunctionComponent<
82105
})
83106
break
84107
case 'delete-cluster':
108+
if (clusterId === DEFAULT_CLUSTER_ID) {
109+
break
110+
}
85111
push({
86112
pathname: generatePath(`${URLS.GLOBAL_CONFIG_CLUSTER}/${URLS.DELETE_CLUSTER}/:clusterId`, {
87113
clusterId,
@@ -97,9 +123,9 @@ export const ClusterListCellComponent: FunctionComponent<
97123
switch (field) {
98124
case ClusterListFields.ICON:
99125
return (
100-
<span className="flex py-8">
101-
<Icon name="ic-bg-cluster" color={null} size={24} />
102-
</span>
126+
<div className="flex left py-10">
127+
<ClusterIconWithStatus clusterStatus={status} isVirtualCluster={isVirtualCluster} />
128+
</div>
103129
)
104130
case ClusterListFields.CLUSTER_NAME:
105131
return (
@@ -108,27 +134,37 @@ export const ClusterListCellComponent: FunctionComponent<
108134
selectedTab: ClusterEnvTabs.ENVIRONMENTS,
109135
clusterId,
110136
})}
111-
className="flex left py-8 dc__truncate"
137+
className="flex left py-10"
112138
>
113-
{clusterName}
139+
<Tooltip content={clusterName}>
140+
<span className="dc__truncate">{clusterName}</span>
141+
</Tooltip>
114142
</Link>
115143
)
116144
case ClusterListFields.CLUSTER_TYPE:
117-
return <span className="flex left py-8">{clusterType}</span>
145+
return <span className="flex left py-10">{clusterType}</span>
118146
case ClusterListFields.ENV_COUNT:
119-
return <span className="flex left py-8">{envCount ? `${envCount}` : 'No'} Environments</span>
147+
return <span className="flex left py-10">{envCount ? `${envCount}` : 'No'} Environments</span>
120148
case ClusterListFields.CLUSTER_CATEGORY:
121-
return <span className="flex left py-8 dc__truncate">{clusterCategory}</span>
149+
return (
150+
<div className="flex left py-10">
151+
<Tooltip content={clusterCategory}>
152+
<span className="dc__truncate">{clusterCategory}</span>
153+
</Tooltip>
154+
</div>
155+
)
122156
case ClusterListFields.SERVER_URL:
123157
return (
124-
<Tooltip content={serverUrl}>
125-
<span className="flex left py-8 dc__truncate">{serverUrl}</span>
126-
</Tooltip>
158+
<div className="flex left py-10">
159+
<Tooltip content={serverUrl}>
160+
<span className="dc__truncate">{serverUrl}</span>
161+
</Tooltip>
162+
</div>
127163
)
128164
case ClusterListFields.ACTIONS:
129165
return (
130166
<div className={isRowActive ? '' : 'dc__opacity-hover--child'}>
131-
<div className="flex dc__gap-8 py-8">
167+
<div className="flex dc__gap-8 py-10">
132168
<Button
133169
dataTestId={`add-env-${clusterId}`}
134170
ariaLabel={`add-env-${clusterId}`}
@@ -137,6 +173,10 @@ export const ClusterListCellComponent: FunctionComponent<
137173
variant={ButtonVariantType.borderLess}
138174
size={ComponentSizeType.xs}
139175
onClick={handleAddEnv}
176+
showTooltip
177+
tooltipProps={{
178+
content: 'Add Environment',
179+
}}
140180
/>
141181
<Button
142182
dataTestId={`edit-cluster-${clusterId}`}
@@ -147,6 +187,10 @@ export const ClusterListCellComponent: FunctionComponent<
147187
style={ButtonStyleType.neutral}
148188
size={ComponentSizeType.xs}
149189
onClick={handleEditCluster}
190+
showTooltip
191+
tooltipProps={{
192+
content: 'Edit Cluster',
193+
}}
150194
/>
151195
<ActionMenu
152196
id="cluster-actions-action-menu"
@@ -262,6 +306,7 @@ export const EditCluster = ({ clusterList, reloadClusterList, handleClose }: Edi
262306
handleModalClose={handleClose}
263307
reload={reloadClusterList}
264308
category={cluster.category}
309+
isProd={cluster.isProd}
265310
/>
266311
)
267312
}
@@ -289,9 +334,12 @@ export const DeleteCluster = ({ clusterList, reloadClusterList, handleClose }: E
289334
export const ClusterEnvLoader = () => (
290335
<>
291336
{Array.from({ length: 3 }).map((_, idx) => (
292-
// eslint-disable-next-line react/no-array-index-key
293-
<div key={idx} className="px-20 py-8 dc__grid environment-row dc__align-items-center">
294-
{Array.from({ length: 5 }).map((_, index) => (
337+
<div
338+
// eslint-disable-next-line react/no-array-index-key
339+
key={idx}
340+
className={`px-20 py-8 dc__grid environment-row ${VirtualClusterForm ? 'with-category' : ''} dc__align-items-center`}
341+
>
342+
{Array.from({ length: 5 }).map((_val, index) => (
295343
// eslint-disable-next-line react/no-array-index-key
296344
<span key={index} className="shimmer" />
297345
))}

0 commit comments

Comments
 (0)