Skip to content

Commit 694dce9

Browse files
RohitRaj011RohitRaj011
committed
feat: NodeListSearchFilter - move K8s version to GroupedFilterSelectPicker
1 parent 3780546 commit 694dce9

File tree

5 files changed

+51
-58
lines changed

5 files changed

+51
-58
lines changed

‎src/components/ResourceBrowser/Constants.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -325,11 +325,6 @@ export const NODE_LIST_HEADERS_TO_KEY_MAP: Record<(typeof NODE_LIST_HEADERS)[num
325325
unschedulable: 'unschedulable',
326326
} as const
327327

328-
export const DEFAULT_NODE_K8S_VERSION = {
329-
label: 'K8s version: Any',
330-
value: 'K8s version: Any',
331-
}
332-
333328
export const NODE_SEARCH_KEYS_TO_OBJECT_KEYS: Record<
334329
NODE_SEARCH_KEYS,
335330
(typeof NODE_LIST_HEADERS_TO_KEY_MAP)[keyof typeof NODE_LIST_HEADERS_TO_KEY_MAP]

‎src/components/ResourceBrowser/ResourceBrowser.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
.resource-list-container {
6767
.node-listing-search-container {
6868
display: grid;
69-
grid-template-columns: 1fr auto 160px 1px 180px;
69+
grid-template-columns: 1fr auto 1px 180px;
7070
column-gap: 8px;
7171
}
7272

‎src/components/ResourceBrowser/ResourceList/NodeListSearchFilter.tsx

Lines changed: 37 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,14 @@ import { parse as parseQueryString, ParsedQuery, stringify as stringifyQueryStri
2121
import {
2222
FilterChips,
2323
GroupedFilterSelectPicker,
24-
OptionType,
2524
SearchBar,
26-
SelectPicker,
2725
useAsync,
2826
useRegisterShortcut,
2927
} from '@devtron-labs/devtron-fe-common-lib'
3028

3129
import { getClusterCapacity } from '@Components/ClusterNodes/clusterNodes.service'
3230

33-
import { DEFAULT_NODE_K8S_VERSION, NODE_K8S_VERSION_FILTER_KEY } from '../Constants'
31+
import { NODE_K8S_VERSION_FILTER_KEY } from '../Constants'
3432
import { ClusterDetailBaseParams, NODE_SEARCH_KEYS, NodeListSearchFilterType } from '../Types'
3533
import ColumnSelector from './ColumnSelector'
3634
import {
@@ -75,7 +73,10 @@ const NodeListSearchFilter = ({
7573
}, [])
7674

7775
// CONSTANTS
78-
const isNodeSearchFilterApplied = searchParams[NODE_SEARCH_KEYS.LABEL] || searchParams[NODE_SEARCH_KEYS.NODE_GROUP]
76+
const isNodeSearchFilterApplied =
77+
searchParams[NODE_SEARCH_KEYS.LABEL] ||
78+
searchParams[NODE_SEARCH_KEYS.NODE_GROUP] ||
79+
searchParams[NODE_K8S_VERSION_FILTER_KEY]
7980

8081
// ASYNC CALLS
8182
const [nodeK8sVersionsLoading, nodeK8sVersionOptions, nodeK8sVersionsError, refetchNodeK8sVersions] =
@@ -84,34 +85,26 @@ const NodeListSearchFilter = ({
8485
result: { nodeK8sVersions: versions },
8586
} = await getClusterCapacity(clusterId)
8687

87-
return [
88-
DEFAULT_NODE_K8S_VERSION,
89-
...(versions?.map((version) => ({
90-
label: `K8s version: ${version}`,
91-
value: version,
92-
})) || []),
93-
]
88+
return (versions || []).map((version) => ({
89+
label: version,
90+
value: version,
91+
}))
9492
}, [clusterId])
9593

9694
// CONFIGS
97-
const selectedK8sNodeVersion = searchParams[NODE_K8S_VERSION_FILTER_KEY] ?? ''
98-
99-
const selectedK8sVersionOption = useMemo(
100-
() =>
101-
nodeK8sVersionOptions?.find((option) => option.value === selectedK8sNodeVersion) ??
102-
DEFAULT_NODE_K8S_VERSION,
103-
[nodeK8sVersionOptions, selectedK8sNodeVersion],
104-
)
105-
10695
const { nodeGroups, labels } = useMemo(() => getNodeSearchKeysOptionsList(rows), [JSON.stringify(rows)])
10796

10897
const appliedFilters = useMemo(() => {
10998
const nodeGroupMap = new Set(((searchParams[NODE_SEARCH_KEYS.NODE_GROUP] as string) || '').split(','))
11099
const labelMap = new Set(((searchParams[NODE_SEARCH_KEYS.LABEL] as string) || '').split(','))
100+
const k8sNodeVersionMap = new Set(((searchParams[NODE_K8S_VERSION_FILTER_KEY] as string) || '').split(','))
111101

112102
return {
113103
[NODE_SEARCH_KEYS.NODE_GROUP]: nodeGroups.filter(({ value }) => nodeGroupMap.has(value)),
114104
[NODE_SEARCH_KEYS.LABEL]: labels.filter(({ value }) => labelMap.has(value)),
105+
[NODE_K8S_VERSION_FILTER_KEY]: (nodeK8sVersionOptions || []).filter(({ value }) =>
106+
k8sNodeVersionMap.has(value),
107+
),
115108
}
116109
}, [searchParams])
117110

@@ -127,28 +120,15 @@ const NodeListSearchFilter = ({
127120
push(`?${finalQueryString}`)
128121
}
129122

130-
const handleApplyNodeK8sVersion = (option: OptionType) => {
131-
handleQueryParamsUpdate((queryObject) => {
132-
const finalQueryObject = structuredClone(queryObject)
133-
134-
if (option.value === DEFAULT_NODE_K8S_VERSION.value) {
135-
delete finalQueryObject[NODE_K8S_VERSION_FILTER_KEY]
136-
} else {
137-
finalQueryObject[NODE_K8S_VERSION_FILTER_KEY] = option.value
138-
}
139-
140-
return finalQueryObject
141-
})
142-
}
143-
144123
const handleSearchInputKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
145124
if (e.key === 'Escape' || e.key === 'Esc') {
146125
searchInputRef.current?.blur()
147126
}
148127
}
149128

150129
const handleSearchFilterChange =
151-
(nodeSearchKey: NODE_SEARCH_KEYS) => (filtersToApply: NodeSearchListOptionType[]) => {
130+
(nodeSearchKey: NODE_SEARCH_KEYS | typeof NODE_K8S_VERSION_FILTER_KEY) =>
131+
(filtersToApply: NodeSearchListOptionType[]) => {
152132
handleQueryParamsUpdate((queryObject) => {
153133
const updatedQueryObject = structuredClone(queryObject)
154134

@@ -188,6 +168,8 @@ const NodeListSearchFilter = ({
188168
delete updatedQueryObject[keyValue]
189169
})
190170

171+
delete updatedQueryObject[NODE_K8S_VERSION_FILTER_KEY]
172+
191173
return updatedQueryObject
192174
})
193175
}
@@ -196,7 +178,9 @@ const NodeListSearchFilter = ({
196178

197179
return (
198180
<>
199-
<div className="node-listing-search-container pt-16 px-20 dc__zi-5">
181+
<div
182+
className={`node-listing-search-container pt-16 px-20 dc__zi-5 ${!isNodeSearchFilterApplied ? 'pb-12' : ''}`}
183+
>
200184
<SearchBar
201185
initialSearchText={searchKey}
202186
handleSearchChange={handleSearch}
@@ -208,7 +192,7 @@ const NodeListSearchFilter = ({
208192
}}
209193
/>
210194

211-
<GroupedFilterSelectPicker<NODE_SEARCH_KEYS>
195+
<GroupedFilterSelectPicker<NODE_SEARCH_KEYS | typeof NODE_K8S_VERSION_FILTER_KEY>
212196
filterSelectPickerPropsMap={{
213197
[NODE_SEARCH_KEYS.NODE_GROUP]: {
214198
inputId: 'node-search-filter-node-groups',
@@ -230,23 +214,25 @@ const NodeListSearchFilter = ({
230214
isDisabled: false,
231215
isLoading: false,
232216
},
217+
[NODE_K8S_VERSION_FILTER_KEY]: {
218+
inputId: 'k8s-version-select',
219+
placeholder: NODE_SEARCH_KEY_PLACEHOLDER[NODE_K8S_VERSION_FILTER_KEY],
220+
options: [{ label: 'K8s version', options: nodeK8sVersionOptions || [] }],
221+
getOptionValue,
222+
appliedFilterOptions: appliedFilters[NODE_K8S_VERSION_FILTER_KEY],
223+
handleApplyFilter: handleSearchFilterChange(NODE_K8S_VERSION_FILTER_KEY),
224+
isDisabled: false,
225+
isLoading: nodeK8sVersionsLoading,
226+
optionListError: nodeK8sVersionsError,
227+
reloadOptionList: refetchNodeK8sVersions,
228+
},
233229
}}
234230
id="node-list-search-filter"
235231
options={NODE_LIST_SEARCH_FILTER_OPTIONS}
236232
isFilterApplied={isNodeSearchFilterApplied}
237233
width={150}
238234
/>
239235

240-
<SelectPicker
241-
inputId="k8s-version-select"
242-
optionListError={nodeK8sVersionsError}
243-
reloadOptionList={refetchNodeK8sVersions}
244-
isLoading={nodeK8sVersionsLoading}
245-
options={nodeK8sVersionOptions ?? []}
246-
onChange={handleApplyNodeK8sVersion}
247-
value={selectedK8sVersionOption}
248-
/>
249-
250236
<div className="dc__border-left h-20 mt-6" />
251237

252238
{allColumns.length ? (
@@ -261,13 +247,16 @@ const NodeListSearchFilter = ({
261247
<div className="shimmer h-32" />
262248
)}
263249
</div>
264-
<FilterChips<Partial<Record<NODE_SEARCH_KEYS, string[]>>>
250+
<FilterChips<Partial<Record<NODE_SEARCH_KEYS | typeof NODE_K8S_VERSION_FILTER_KEY, string[]>>>
265251
className="px-20 pb-12"
266252
filterConfig={{
267253
[NODE_SEARCH_KEYS.NODE_GROUP]: appliedFilters[NODE_SEARCH_KEYS.NODE_GROUP].map(
268254
({ value }) => value,
269255
),
270256
[NODE_SEARCH_KEYS.LABEL]: appliedFilters[NODE_SEARCH_KEYS.LABEL].map(({ value }) => value),
257+
[NODE_K8S_VERSION_FILTER_KEY]: appliedFilters[NODE_K8S_VERSION_FILTER_KEY].map(
258+
({ value }) => value,
259+
),
271260
}}
272261
onRemoveFilter={handleRemoveFilter}
273262
clearFilters={handleClearFilters}

‎src/components/ResourceBrowser/ResourceList/constants.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66

77
import { CLUSTER_NODE_ACTIONS_LABELS } from '@Components/ClusterNodes/constants'
88

9+
import { NODE_K8S_VERSION_FILTER_KEY } from '../Constants'
910
import { NODE_SEARCH_KEYS } from '../Types'
1011

1112
export const getNodeActions = (unschedulable: boolean): ActionMenuItemType<NodeActionMenuOptionIdEnum>[] => [
@@ -42,21 +43,29 @@ export const getNodeActions = (unschedulable: boolean): ActionMenuItemType<NodeA
4243
},
4344
]
4445

45-
export const NODE_LIST_SEARCH_FILTER_OPTIONS: GroupedFilterSelectPickerProps<NODE_SEARCH_KEYS>['options'] = [
46+
export const NODE_LIST_SEARCH_FILTER_OPTIONS: GroupedFilterSelectPickerProps<
47+
NODE_SEARCH_KEYS | typeof NODE_K8S_VERSION_FILTER_KEY
48+
>['options'] = [
4649
{
4750
items: [
4851
{ id: NODE_SEARCH_KEYS.LABEL, label: 'Label' },
4952
{ id: NODE_SEARCH_KEYS.NODE_GROUP, label: 'Node Groups' },
53+
{ id: NODE_K8S_VERSION_FILTER_KEY, label: 'K8s Version' },
5054
],
5155
},
5256
]
5357

54-
export const NODE_SEARCH_KEY_TO_LABEL_PREFIX_MAP: Record<NODE_SEARCH_KEYS, string> = {
58+
export const NODE_SEARCH_KEY_TO_LABEL_PREFIX_MAP: Record<
59+
NODE_SEARCH_KEYS | typeof NODE_K8S_VERSION_FILTER_KEY,
60+
string
61+
> = {
5562
[NODE_SEARCH_KEYS.NODE_GROUP]: 'Node group',
5663
[NODE_SEARCH_KEYS.LABEL]: 'Label',
64+
[NODE_K8S_VERSION_FILTER_KEY]: 'K8s version',
5765
}
5866

59-
export const NODE_SEARCH_KEY_PLACEHOLDER: Record<NODE_SEARCH_KEYS, string> = {
67+
export const NODE_SEARCH_KEY_PLACEHOLDER: Record<NODE_SEARCH_KEYS | typeof NODE_K8S_VERSION_FILTER_KEY, string> = {
6068
[NODE_SEARCH_KEYS.LABEL]: 'Search by key=value Eg. environment=production, tier=frontend',
6169
[NODE_SEARCH_KEYS.NODE_GROUP]: 'Search by node group name Eg. mainnode',
70+
[NODE_K8S_VERSION_FILTER_KEY]: 'Select K8s version',
6271
}

‎src/components/ResourceBrowser/ResourceList/utils.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ export const dynamicSort = (property: string) => (valueA: unknown, valueB: unkno
265265
export const isItemASearchMatchForNodeListing = (item: Record<string, any>, searchParams: Record<string, any>) => {
266266
const isK8sVersionFilterAppliedAndMatchFound =
267267
!searchParams[NODE_K8S_VERSION_FILTER_KEY] ||
268-
item[NODE_K8S_VERSION_FILTER_KEY] === searchParams[NODE_K8S_VERSION_FILTER_KEY]
268+
searchParams[NODE_K8S_VERSION_FILTER_KEY].includes(item[NODE_K8S_VERSION_FILTER_KEY])
269269

270270
if (!isK8sVersionFilterAppliedAndMatchFound) {
271271
return false

0 commit comments

Comments
 (0)