Skip to content

Commit 403131c

Browse files
arunjaindevarunjaindev
authored
Merge pull request #2848 from devtron-labs/fix/cluster-env
fix: uat changes
2 parents a9c1c72 + 62d00ab commit 403131c

File tree

13 files changed

+220
-137
lines changed

13 files changed

+220
-137
lines changed

‎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: 62 additions & 21 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,
@@ -39,6 +40,27 @@ import EditClusterDrawerContent from './EditClusterDrawerContent'
3940
const HibernationRulesModal = importComponentFromFELibrary('HibernationRulesModal', null, 'function')
4041
const VirtualClusterForm = importComponentFromFELibrary('VirtualClusterForm', null, 'function')
4142

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+
4264
export const ClusterListCellComponent: FunctionComponent<
4365
TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>
4466
> = ({
@@ -83,6 +105,9 @@ export const ClusterListCellComponent: FunctionComponent<
83105
})
84106
break
85107
case 'delete-cluster':
108+
if (clusterId === DEFAULT_CLUSTER_ID) {
109+
break
110+
}
86111
push({
87112
pathname: generatePath(`${URLS.GLOBAL_CONFIG_CLUSTER}/${URLS.DELETE_CLUSTER}/:clusterId`, {
88113
clusterId,
@@ -95,18 +120,12 @@ export const ClusterListCellComponent: FunctionComponent<
95120
}
96121
}
97122

98-
const statusColor = getBulletColorAccToStatus(status)
99-
100123
switch (field) {
101124
case ClusterListFields.ICON:
102125
return (
103-
<span className="flex py-8 dc__position-rel dc__overflow-hidden">
104-
<Icon name="ic-bg-cluster" color={null} size={24} />
105-
<span
106-
className={`dc__position-abs icon-dim-10 dc__border-radius-50-per dc__right-2--neg dc__bottom-7 ${statusColor}`}
107-
style={{ border: '2px solid var(--N0)' }}
108-
/>
109-
</span>
126+
<div className="flex left py-10">
127+
<ClusterIconWithStatus clusterStatus={status} isVirtualCluster={isVirtualCluster} />
128+
</div>
110129
)
111130
case ClusterListFields.CLUSTER_NAME:
112131
return (
@@ -115,27 +134,37 @@ export const ClusterListCellComponent: FunctionComponent<
115134
selectedTab: ClusterEnvTabs.ENVIRONMENTS,
116135
clusterId,
117136
})}
118-
className="flex left py-8 dc__truncate"
137+
className="flex left py-10"
119138
>
120-
{clusterName}
139+
<Tooltip content={clusterName}>
140+
<span className="dc__truncate">{clusterName}</span>
141+
</Tooltip>
121142
</Link>
122143
)
123144
case ClusterListFields.CLUSTER_TYPE:
124-
return <span className="flex left py-8">{clusterType}</span>
145+
return <span className="flex left py-10">{clusterType}</span>
125146
case ClusterListFields.ENV_COUNT:
126-
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>
127148
case ClusterListFields.CLUSTER_CATEGORY:
128-
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+
)
129156
case ClusterListFields.SERVER_URL:
130157
return (
131-
<Tooltip content={serverUrl}>
132-
<span className="flex left py-8 dc__truncate">{serverUrl}</span>
133-
</Tooltip>
158+
<div className="flex left py-10">
159+
<Tooltip content={serverUrl}>
160+
<span className="dc__truncate">{serverUrl}</span>
161+
</Tooltip>
162+
</div>
134163
)
135164
case ClusterListFields.ACTIONS:
136165
return (
137166
<div className={isRowActive ? '' : 'dc__opacity-hover--child'}>
138-
<div className="flex dc__gap-8 py-8">
167+
<div className="flex dc__gap-8 py-10">
139168
<Button
140169
dataTestId={`add-env-${clusterId}`}
141170
ariaLabel={`add-env-${clusterId}`}
@@ -144,6 +173,10 @@ export const ClusterListCellComponent: FunctionComponent<
144173
variant={ButtonVariantType.borderLess}
145174
size={ComponentSizeType.xs}
146175
onClick={handleAddEnv}
176+
showTooltip
177+
tooltipProps={{
178+
content: 'Add Environment',
179+
}}
147180
/>
148181
<Button
149182
dataTestId={`edit-cluster-${clusterId}`}
@@ -154,6 +187,10 @@ export const ClusterListCellComponent: FunctionComponent<
154187
style={ButtonStyleType.neutral}
155188
size={ComponentSizeType.xs}
156189
onClick={handleEditCluster}
190+
showTooltip
191+
tooltipProps={{
192+
content: 'Edit Cluster',
193+
}}
157194
/>
158195
<ActionMenu
159196
id="cluster-actions-action-menu"
@@ -269,6 +306,7 @@ export const EditCluster = ({ clusterList, reloadClusterList, handleClose }: Edi
269306
handleModalClose={handleClose}
270307
reload={reloadClusterList}
271308
category={cluster.category}
309+
isProd={cluster.isProd}
272310
/>
273311
)
274312
}
@@ -296,9 +334,12 @@ export const DeleteCluster = ({ clusterList, reloadClusterList, handleClose }: E
296334
export const ClusterEnvLoader = () => (
297335
<>
298336
{Array.from({ length: 3 }).map((_, idx) => (
299-
// eslint-disable-next-line react/no-array-index-key
300-
<div key={idx} className="px-20 py-8 dc__grid environment-row dc__align-items-center">
301-
{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) => (
302343
// eslint-disable-next-line react/no-array-index-key
303344
<span key={index} className="shimmer" />
304345
))}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ const ClusterList = () => {
100100
handleSorting,
101101
} = useUrlFilters<EnvListSortableKeys, ClusterEnvFilterType>({
102102
parseSearchParams: parseClusterEnvSearchParams,
103+
initialSortKey: EnvListSortableKeys.ENV_NAME,
103104
})
104105

105106
const [clusterListLoading, clusterListResult, clusterListError, reloadClusterList] = useAsync(
@@ -194,7 +195,7 @@ const ClusterList = () => {
194195
{
195196
field: ClusterListFields.CLUSTER_CATEGORY,
196197
label: 'CATEGORY',
197-
size: { fixed: 100 },
198+
size: { fixed: 150 },
198199
isSortable: true,
199200
comparator: stringComparatorBySortOrder,
200201
CellComponent: ClusterListCellComponent,

0 commit comments

Comments
 (0)