Skip to content

Commit bd775a6

Browse files
shivani170shivani170
committed
chore: code refactoring
1 parent 6d15e13 commit bd775a6

File tree

9 files changed

+155
-118
lines changed

9 files changed

+155
-118
lines changed

‎src/components/ClusterNodes/ClusterList.tsx renamed to ‎src/components/ClusterNodes/ClusterList/ClusterList.tsx

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import {
77
useUrlFilters,
88
} from '@devtron-labs/devtron-fe-common-lib'
99

10-
import { ClusterListRow } from './ClusterListRow'
11-
import { ClusterMapListSortableKeys, ClusterMapListSortableTitle } from './constants'
10+
import { ClusterMapListSortableKeys, ClusterMapListSortableTitle } from '../constants'
11+
import { parseSearchParams } from '../utils'
12+
import ClusterListRow from './ClusterListRow'
1213
import { ClusterListTypes } from './types'
13-
import { parseSearchParams } from './utils'
1414

15-
export const ClusterList = ({
15+
const ClusterList = ({
1616
filteredList,
1717
clusterListLoader,
1818
showKubeConfigModal,
@@ -52,14 +52,18 @@ export const ClusterList = ({
5252
))}
5353
</div>
5454
{filteredList.map((clusterData) => (
55-
<ClusterListRow
56-
clusterData={clusterData}
57-
clusterListLoader={clusterListLoader}
58-
showKubeConfigModal={showKubeConfigModal}
59-
onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
60-
setSelectedClusterName={setSelectedClusterName}
61-
/>
55+
<React.Fragment key={clusterData.id}>
56+
<ClusterListRow
57+
clusterData={clusterData}
58+
clusterListLoader={clusterListLoader}
59+
showKubeConfigModal={showKubeConfigModal}
60+
onChangeShowKubeConfigModal={onChangeShowKubeConfigModal}
61+
setSelectedClusterName={setSelectedClusterName}
62+
/>
63+
</React.Fragment>
6264
))}
6365
</div>
6466
)
6567
}
68+
69+
export default ClusterList

‎src/components/ClusterNodes/ClusterListRow.tsx renamed to ‎src/components/ClusterNodes/ClusterList/ClusterListRow.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ import { importComponentFromFELibrary } from '@Components/common'
2424
import { K8S_EMPTY_GROUP, SIDEBAR_KEYS } from '@Components/ResourceBrowser/Constants'
2525
import { AppDetailsTabs } from '@Components/v2/appDetails/appDetails.store'
2626

27-
import { ClusterMapInitialStatus } from './ClusterMapInitialStatus'
28-
import { CLUSTER_PROD_TYPE } from './constants'
27+
import { ClusterMapInitialStatus } from '../ClusterMapInitialStatus'
28+
import { CLUSTER_PROD_TYPE } from '../constants'
2929
import { ClusterListRowTypes } from './types'
3030

3131
const CompareClusterButton = importComponentFromFELibrary('CompareClusterButton', null, 'function')
3232
const ClusterStatusCell = importComponentFromFELibrary('ClusterStatus', null, 'function')
3333
const KubeConfigButton = importComponentFromFELibrary('KubeConfigButton', null, 'function')
3434

35-
export const ClusterListRow = ({
35+
const ClusterListRow = ({
3636
clusterData,
3737
clusterListLoader,
3838
onChangeShowKubeConfigModal,
@@ -175,3 +175,5 @@ export const ClusterListRow = ({
175175
</div>
176176
)
177177
}
178+
179+
export default ClusterListRow

‎src/components/ClusterNodes/ClusterList/ClusterListView.tsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { useMemo } from 'react'
2+
3+
import {
4+
BulkSelectionIdentifiersType,
5+
BulkSelectionProvider,
6+
ClusterDetail,
7+
ClusterFiltersType,
8+
SearchBar,
9+
SelectAllDialogStatus,
10+
useUrlFilters,
11+
} from '@devtron-labs/devtron-fe-common-lib'
12+
13+
import { importComponentFromFELibrary } from '@Components/common'
14+
15+
import { ClusterMapListSortableKeys, ClusterStatusByFilter } from '../constants'
16+
import { getSortedClusterList, parseSearchParams } from '../utils'
17+
import ClusterSelectionBody from './ClusterSelectionBody'
18+
import { ClusterViewType } from './types'
19+
20+
const ClusterFilters = importComponentFromFELibrary('ClusterFilters', null, 'function')
21+
22+
const ClusterListView = (props: ClusterViewType) => {
23+
const { searchKey, clusterFilter, updateSearchParams, handleSearch, sortBy, sortOrder } = useUrlFilters<
24+
ClusterMapListSortableKeys,
25+
{ clusterFilter: ClusterFiltersType }
26+
>({
27+
parseSearchParams,
28+
initialSortKey: ClusterMapListSortableKeys.CLUSTER_NAME,
29+
})
30+
const { clusterOptions, initialLoading } = props
31+
32+
const setClusterFilter = (_clusterFilter: ClusterFiltersType) => {
33+
updateSearchParams({ clusterFilter: _clusterFilter })
34+
}
35+
36+
const filteredList: ClusterDetail[] = useMemo(() => {
37+
const loweredSearchKey = searchKey.toLowerCase()
38+
const updatedClusterOptions = [...clusterOptions]
39+
// Sort the cluster list based on the selected sorting key
40+
getSortedClusterList(updatedClusterOptions, sortBy, sortOrder)
41+
42+
// Filter the cluster list based on the search key and cluster filter
43+
return updatedClusterOptions.filter((option) => {
44+
const filterCondition =
45+
clusterFilter === ClusterFiltersType.ALL_CLUSTERS ||
46+
!option.status ||
47+
option.status === ClusterStatusByFilter[clusterFilter]
48+
49+
return (!searchKey || option.name.toLowerCase().includes(loweredSearchKey)) && filterCondition
50+
})
51+
}, [searchKey, clusterOptions, `${clusterFilter}`, sortBy, sortOrder])
52+
53+
const handleFilterKeyPress = (value: string) => {
54+
handleSearch(value)
55+
}
56+
57+
const allOnThisPageIdentifiers = useMemo(
58+
() =>
59+
filteredList?.reduce((acc, cluster) => {
60+
acc[cluster.name] = cluster
61+
return acc
62+
}, {} as ClusterDetail) ?? {},
63+
[clusterOptions],
64+
)
65+
66+
const getSelectAllDialogStatus = () => SelectAllDialogStatus.CLOSED
67+
68+
return (
69+
<BulkSelectionProvider<BulkSelectionIdentifiersType<ClusterDetail>>
70+
identifiers={allOnThisPageIdentifiers}
71+
getSelectAllDialogStatus={getSelectAllDialogStatus}
72+
>
73+
<div className="flex dc__gap-12 dc__content-space">
74+
<SearchBar
75+
initialSearchText={searchKey}
76+
handleEnter={handleFilterKeyPress}
77+
containerClassName="w-250-imp"
78+
inputProps={{
79+
placeholder: 'Search clusters',
80+
autoFocus: true,
81+
disabled: initialLoading,
82+
}}
83+
/>
84+
{ClusterFilters && <ClusterFilters clusterFilter={clusterFilter} setClusterFilter={setClusterFilter} />}
85+
</div>
86+
<ClusterSelectionBody {...props} filteredList={filteredList} />
87+
</BulkSelectionProvider>
88+
)
89+
}
90+
91+
export default ClusterListView

‎src/components/ClusterNodes/ClusterSelectionList.tsx renamed to ‎src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx

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

17-
import React, { useMemo, useRef, useState } from 'react'
17+
import React, { useRef, useState } from 'react'
1818
import dayjs, { Dayjs } from 'dayjs'
1919

2020
import {
2121
BulkSelectionEvents,
2222
BulkSelectionIdentifiersType,
23-
BulkSelectionProvider,
2423
ClusterDetail,
2524
ClusterFiltersType,
2625
GenericEmptyState,
27-
SearchBar,
28-
SelectAllDialogStatus,
2926
useBulkSelection,
3027
useUrlFilters,
3128
} from '@devtron-labs/devtron-fe-common-lib'
@@ -35,65 +32,42 @@ import { importComponentFromFELibrary } from '@Components/common'
3532
import Timer from '@Components/common/DynamicTabs/DynamicTabs.timer'
3633
import { AddClusterButton } from '@Components/ResourceBrowser/PageHeader.buttons'
3734

38-
import { ClusterSelectionType } from '../ResourceBrowser/Types'
39-
import { ClusterList } from './ClusterList'
40-
import ClusterNodeEmptyState from './ClusterNodeEmptyStates'
41-
import { ClusterMapListSortableKeys, ClusterStatusByFilter } from './constants'
42-
import { getSortedClusterList, parseSearchParams } from './utils'
35+
import ClusterNodeEmptyState from '../ClusterNodeEmptyStates'
36+
import { ClusterMapListSortableKeys } from '../constants'
37+
import { parseSearchParams } from '../utils'
38+
import ClusterList from './ClusterList'
39+
import { ClusterSelectionBodyTypes } from './types'
4340

44-
import './clusterNodes.scss'
41+
import '../clusterNodes.scss'
4542

4643
const ClusterMap = importComponentFromFELibrary('ClusterMap', null, 'function')
47-
const ClusterFilters = importComponentFromFELibrary('ClusterFilters', null, 'function')
4844
const ClusterBulkSelectionActionWidget = importComponentFromFELibrary(
4945
'ClusterBulkSelectionActionWidget',
5046
null,
5147
'function',
5248
)
5349
const KubeConfigModal = importComponentFromFELibrary('KubeConfigModal', null, 'function')
5450

55-
const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
51+
const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
5652
clusterOptions,
5753
clusterListLoader,
58-
initialLoading,
5954
refreshData,
55+
filteredList,
6056
}) => {
6157
const parentRef = useRef<HTMLDivElement>(null)
6258

6359
const [lastSyncTime, setLastSyncTime] = useState<Dayjs>(dayjs())
6460
const [showKubeConfigModal, setKubeConfigModal] = useState(false)
6561
const [selectedClusterName, setSelectedClusterName] = useState('')
6662

67-
const { searchKey, clusterFilter, updateSearchParams, handleSearch, clearFilters, sortBy, sortOrder } =
68-
useUrlFilters<ClusterMapListSortableKeys, { clusterFilter: ClusterFiltersType }>({
69-
parseSearchParams,
70-
initialSortKey: ClusterMapListSortableKeys.CLUSTER_NAME,
71-
})
63+
const { clearFilters } = useUrlFilters<ClusterMapListSortableKeys, { clusterFilter: ClusterFiltersType }>({
64+
parseSearchParams,
65+
initialSortKey: ClusterMapListSortableKeys.CLUSTER_NAME,
66+
})
7267

7368
const { handleBulkSelection, isBulkSelectionApplied, getSelectedIdentifiersCount } =
7469
useBulkSelection<BulkSelectionIdentifiersType<ClusterDetail>>()
7570

76-
const filteredList: ClusterDetail[] = useMemo(() => {
77-
const loweredSearchKey = searchKey.toLowerCase()
78-
const updatedClusterOptions = [...clusterOptions]
79-
// Sort the cluster list based on the selected sorting key
80-
getSortedClusterList(updatedClusterOptions, sortBy, sortOrder)
81-
82-
// Filter the cluster list based on the search key and cluster filter
83-
return updatedClusterOptions.filter((option) => {
84-
const filterCondition =
85-
clusterFilter === ClusterFiltersType.ALL_CLUSTERS ||
86-
!option.status ||
87-
option.status === ClusterStatusByFilter[clusterFilter]
88-
89-
return (!searchKey || option.name.toLowerCase().includes(loweredSearchKey)) && filterCondition
90-
})
91-
}, [searchKey, clusterOptions, `${clusterFilter}`, sortBy, sortOrder])
92-
93-
const handleFilterKeyPress = (value: string) => {
94-
handleSearch(value)
95-
}
96-
9771
const handleClearBulkSelection = () => {
9872
handleBulkSelection({
9973
action: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
@@ -106,10 +80,6 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
10680
handleClearBulkSelection()
10781
}
10882

109-
const setClusterFilter = (_clusterFilter: ClusterFiltersType) => {
110-
updateSearchParams({ clusterFilter: _clusterFilter })
111-
}
112-
11383
if (!clusterOptions.length) {
11484
return (
11585
<GenericEmptyState
@@ -132,21 +102,6 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
132102
const renderClusterList = () => (
133103
<div className="cluster-list-main-container flex-grow-1 flexbox-col bg__primary dc__overflow-auto">
134104
<div className="flexbox dc__content-space pl-20 pr-20 pt-16 pb-16 dc__zi-4">
135-
<div className="flex dc__gap-12">
136-
<SearchBar
137-
initialSearchText={searchKey}
138-
handleEnter={handleFilterKeyPress}
139-
containerClassName="w-250-imp"
140-
inputProps={{
141-
placeholder: 'Search clusters',
142-
autoFocus: true,
143-
disabled: initialLoading,
144-
}}
145-
/>
146-
{ClusterFilters && (
147-
<ClusterFilters clusterFilter={clusterFilter} setClusterFilter={setClusterFilter} />
148-
)}
149-
</div>
150105
<div className="fs-13 flex">
151106
{clusterListLoader ? (
152107
<span className="dc__loading-dots mr-20">Syncing</span>
@@ -177,7 +132,7 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
177132
isProportional
178133
/>
179134
)}
180-
{!filteredList.length ? (
135+
{!filteredList?.length ? (
181136
<div className="flex-grow-1">
182137
<ClusterNodeEmptyState actionHandler={clearFilters} />
183138
</div>
@@ -222,27 +177,4 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
222177
)
223178
}
224179

225-
const BaseClusterList = (props: ClusterSelectionType) => {
226-
const { clusterOptions } = props
227-
const allOnThisPageIdentifiers = useMemo(
228-
() =>
229-
clusterOptions?.reduce((acc, cluster) => {
230-
acc[cluster.name] = cluster
231-
return acc
232-
}, {} as ClusterDetail) ?? {},
233-
[clusterOptions],
234-
)
235-
236-
const getSelectAllDialogStatus = () => SelectAllDialogStatus.CLOSED
237-
238-
return (
239-
<BulkSelectionProvider<BulkSelectionIdentifiersType<ClusterDetail>>
240-
identifiers={allOnThisPageIdentifiers}
241-
getSelectAllDialogStatus={getSelectAllDialogStatus}
242-
>
243-
<ClusterSelectionList {...props} />
244-
</BulkSelectionProvider>
245-
)
246-
}
247-
248-
export default BaseClusterList
180+
export default ClusterSelectionBody

‎src/components/ClusterNodes/ClusterList/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { default as ClusterList } from './ClusterList'
2+
export { default as ClusterListRow } from './ClusterListRow'
3+
export { default as ClusterListView } from './ClusterListView'
4+
export { default as ClusterSelectionBody } from './ClusterSelectionBody'

‎src/components/ClusterNodes/ClusterList/types.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ClusterDetail } from '@devtron-labs/devtron-fe-common-lib'
2+
3+
export interface ClusterViewType {
4+
clusterOptions: ClusterDetail[]
5+
clusterListLoader: boolean
6+
initialLoading: boolean
7+
refreshData: () => void
8+
}
9+
10+
export interface ClusterListTypes {
11+
filteredList: ClusterDetail[]
12+
clusterListLoader: boolean
13+
showKubeConfigModal: boolean
14+
onChangeShowKubeConfigModal: () => void
15+
setSelectedClusterName: React.Dispatch<React.SetStateAction<string>>
16+
}
17+
export interface ClusterListRowTypes extends Omit<ClusterListTypes, 'filteredList'> {
18+
clusterData: ClusterDetail
19+
}
20+
21+
export interface ClusterSelectionBodyTypes extends ClusterViewType {
22+
filteredList: ClusterDetail[]
23+
}

‎src/components/ClusterNodes/types.ts

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -293,14 +293,3 @@ export interface ClusterOverviewProps {
293293
export interface ClusterMapInitialStatusType {
294294
errorInNodeListing: string
295295
}
296-
297-
export interface ClusterListTypes {
298-
filteredList: ClusterDetail[]
299-
clusterListLoader: boolean
300-
showKubeConfigModal: boolean
301-
onChangeShowKubeConfigModal: () => void
302-
setSelectedClusterName: React.Dispatch<React.SetStateAction<string>>
303-
}
304-
export interface ClusterListRowTypes extends Omit<ClusterListTypes, 'filteredList'> {
305-
clusterData: ClusterDetail
306-
}

‎src/components/ResourceBrowser/ResourceBrowser.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ import {
2727
} from '@devtron-labs/devtron-fe-common-lib'
2828

2929
import { DEFAULT_CLUSTER_ID } from '@Components/cluster/cluster.type'
30+
import { ClusterListView } from '@Components/ClusterNodes/ClusterList'
3031

3132
import { getClusterList, getClusterListMin } from '../ClusterNodes/clusterNodes.service'
32-
import BaseClusterList from '../ClusterNodes/ClusterSelectionList'
3333
import { sortObjectArrayAlphabetically } from '../common'
3434
import { AddClusterButton } from './PageHeader.buttons'
3535

@@ -71,7 +71,7 @@ const ResourceBrowser: React.FC = () => {
7171
}
7272

7373
return (
74-
<BaseClusterList
74+
<ClusterListView
7575
clusterOptions={sortedClusterList}
7676
clusterListLoader={detailClusterListLoading}
7777
initialLoading={initialLoading}

0 commit comments

Comments
 (0)