Skip to content

Commit a369455

Browse files
Elessar1802Elessar1802
committed
fix: column selector & others
1 parent 03969d0 commit a369455

File tree

6 files changed

+69
-30
lines changed

6 files changed

+69
-30
lines changed

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

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

17-
import { useMemo, useRef, useState } from 'react'
17+
import { useEffect, useMemo, useRef, useState } from 'react'
1818
import { MultiValue, SelectInstance } from 'react-select'
1919

2020
import {
@@ -45,10 +45,12 @@ const ColumnSelector = ({ setVisibleColumns, visibleColumns, allColumns }: Colum
4545
}))
4646
}, [])
4747

48+
const getSelectedColumns = () =>
49+
columnOptions.filter((option) => visibleColumns.find(({ label }) => label === option.label))
50+
4851
const [isMenuOpen, setIsMenuOpen] = useState(false)
49-
const [selectedColumns, setSelectedColumns] = useState<MultiValue<SelectPickerOptionType<TableColumnType>>>(() =>
50-
columnOptions.filter((option) => visibleColumns.find(({ label }) => label === option.label)),
51-
)
52+
const [selectedColumns, setSelectedColumns] =
53+
useState<MultiValue<SelectPickerOptionType<TableColumnType>>>(getSelectedColumns)
5254

5355
const selectRef = useRef<SelectInstance<SelectPickerOptionType<TableColumnType>, true>>(null)
5456

@@ -58,6 +60,10 @@ const ColumnSelector = ({ setVisibleColumns, visibleColumns, allColumns }: Colum
5860
selectRef.current?.focus()
5961
}
6062

63+
useEffect(() => {
64+
setSelectedColumns(getSelectedColumns())
65+
}, [allColumns])
66+
6167
const handleMenuClose = () => {
6268
setIsMenuOpen(false)
6369
resetTriggerAutoClickTimestamp()

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ const K8SResourceListViewWrapper = ({
9898
filteredRows={filteredRows}
9999
/>
100100
)}
101+
101102
{children}
102103
</div>
103104
)
@@ -217,7 +218,7 @@ export const K8SResourceList = ({
217218
if (isEventListing) {
218219
return (
219220
(row.data.type as string)?.toLowerCase() ===
220-
((filterData as unknown as K8sResourceListFilterType).eventType ?? 'warning') && isSearchMatch
221+
((filterData as unknown as K8sResourceListFilterType).eventType || 'warning') && isSearchMatch
221222
)
222223
}
223224

@@ -234,7 +235,7 @@ export const K8SResourceList = ({
234235

235236
return (
236237
<Table
237-
key={JSON.stringify(selectedResource)}
238+
// key={JSON.stringify(selectedResource)}
238239
loading={resourceListLoader || !resourceList}
239240
columns={columns}
240241
rows={rows}

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

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -248,9 +248,11 @@ const ResourceList = () => {
248248
() =>
249249
tabs.reduce(
250250
(acc, tab) => {
251-
acc[tab.id] = {
252-
reload: refreshData,
253-
showTimeSinceLastSync: tab.id === ResourceBrowserTabsId.k8s_Resources,
251+
if (tab.id === ResourceBrowserTabsId.k8s_Resources) {
252+
acc[tab.id] = {
253+
reload: refreshData,
254+
showTimeSinceLastSync: true,
255+
}
254256
}
255257

256258
return acc
@@ -375,7 +377,11 @@ const ResourceList = () => {
375377
/>
376378
<Route path={RESOURCE_BROWSER_ROUTES.OVERVIEW} exact>
377379
<DynamicTabComponentWrapper type="fixed" {...DynamicTabComponentWrapperBaseProps}>
378-
<ClusterOverview selectedCluster={selectedCluster} addTab={addTab} />
380+
<ClusterOverview
381+
selectedCluster={selectedCluster}
382+
addTab={addTab}
383+
key={getTabById(ResourceBrowserTabsId.cluster_overview).componentKey}
384+
/>
379385
</DynamicTabComponentWrapper>
380386
</Route>
381387
<Route path={RESOURCE_BROWSER_ROUTES.MONITORING_DASHBOARD} exact>
@@ -393,6 +399,17 @@ const ResourceList = () => {
393399
/>
394400
</DynamicTabComponentWrapper>
395401
</Route>
402+
<Route path={RESOURCE_BROWSER_ROUTES.RESOURCE_RECOMMENDER} exact>
403+
<DynamicTabComponentWrapper type="fixed" {...DynamicTabComponentWrapperBaseProps}>
404+
<ResourceRecommender
405+
// key={getTabById(RESOURCE_RECOMMENDER_TAB_ID).componentKey}
406+
getBaseResourceListProps={getResourceRecommenderBaseResourceListProps}
407+
ResourceRecommenderTableCellComponent={ResourceRecommenderTableCellComponent}
408+
ResourceRecommenderTableViewWrapper={ResourceRecommenderTableViewWrapper}
409+
dynamicSort={dynamicSort}
410+
/>
411+
</DynamicTabComponentWrapper>
412+
</Route>
396413
<Route path={RESOURCE_BROWSER_ROUTES.CLUSTER_UPGRADE} exact>
397414
<DynamicTabComponentWrapper type="dynamic" {...DynamicTabComponentWrapperBaseProps} addTab={addTab}>
398415
<ClusterUpgradeCompatibilityInfo
@@ -450,16 +467,6 @@ const ResourceList = () => {
450467
/>
451468
</DynamicTabComponentWrapper>
452469
</Route>
453-
<Route path={RESOURCE_BROWSER_ROUTES.RESOURCE_RECOMMENDER} exact>
454-
<DynamicTabComponentWrapper type="dynamic" {...DynamicTabComponentWrapperBaseProps} addTab={addTab}>
455-
<ResourceRecommender
456-
getBaseResourceListProps={getResourceRecommenderBaseResourceListProps}
457-
ResourceRecommenderTableCellComponent={ResourceRecommenderTableCellComponent}
458-
ResourceRecommenderTableViewWrapper={ResourceRecommenderTableViewWrapper}
459-
dynamicSort={dynamicSort}
460-
/>
461-
</DynamicTabComponentWrapper>
462-
</Route>
463470

464471
{renderTerminal()}
465472
</>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { MouseEvent, useEffect, useRef, useState } from 'react'
1+
import { MouseEvent, useEffect, useState } from 'react'
22
import { generatePath, useHistory, useParams } from 'react-router-dom'
33
import DOMPurify from 'dompurify'
44

@@ -25,7 +25,7 @@ import {
2525
RESOURCE_ACTION_MENU,
2626
RESOURCE_BROWSER_ROUTES,
2727
} from '../Constants'
28-
import { ClusterDetailBaseParams } from '../Types'
28+
import { ClusterDetailBaseParams, ResourceFilterOptionsProps } from '../Types'
2929

3030
const ApplyResourceRecommendationModal = importComponentFromFELibrary(
3131
'ApplyResourceRecommendationModal',
@@ -34,9 +34,10 @@ const ApplyResourceRecommendationModal = importComponentFromFELibrary(
3434
)
3535
const ResourceRecommendationChip = importComponentFromFELibrary('ResourceRecommendationChip', null, 'function')
3636

37-
interface ResourceRecommenderTableCellComponentProps extends TableCellComponentProps<FiltersTypeEnum.URL> {
37+
interface ResourceRecommenderTableCellComponentProps
38+
extends TableCellComponentProps<FiltersTypeEnum.URL>,
39+
Pick<ResourceFilterOptionsProps, 'resourceRecommenderConfig'> {
3840
handleReloadDataAfterBulkOperation: () => void
39-
showAbsoluteValuesInResourceRecommender: boolean
4041
}
4142

4243
const ResourceRecommenderTableCellComponent = ({
@@ -45,11 +46,10 @@ const ResourceRecommenderTableCellComponent = ({
4546
filterData: { searchKey: searchText },
4647
signals,
4748
handleReloadDataAfterBulkOperation,
48-
showAbsoluteValuesInResourceRecommender,
49+
resourceRecommenderConfig: { showAbsoluteValuesInResourceRecommender },
4950
}: ResourceRecommenderTableCellComponentProps) => {
5051
const { push } = useHistory()
5152
const { clusterId } = useParams<ClusterDetailBaseParams>()
52-
const nameButtonRef = useRef<HTMLButtonElement>(null)
5353
const [applyResourceRecommendationConfig, setApplyResourceRecommendationConfig] = useState<any>(null)
5454

5555
const handleResourceClick = (e: MouseEvent<HTMLButtonElement>) => {
@@ -76,7 +76,7 @@ const ResourceRecommenderTableCellComponent = ({
7676
useEffect(() => {
7777
const handleEnterPressed = ({ detail: { activeRowData } }) => {
7878
if (activeRowData.id === id) {
79-
nameButtonRef.current?.click()
79+
setApplyResourceRecommendationConfig(activeRowData.data)
8080
}
8181
}
8282

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

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,35 @@ export const ResourceRecommenderTableViewWrapper = ({
1212
children,
1313
resourceListError,
1414
reloadResourceListData,
15-
...props
15+
searchKey,
16+
handleSearch,
17+
filteredRows,
18+
isResourceListLoading,
19+
selectedResource,
20+
gvkFilterConfig,
21+
updateSearchParams,
22+
selectedNamespace,
23+
selectedCluster,
24+
resourceRecommenderConfig,
25+
selectedKindGVKFilter,
26+
selectedAPIVersionGVKFilter,
1627
}: ResourceRecommenderTableViewWrapperProps) => (
1728
<div className="resource-list-container flexbox-col flex-grow-1 border__primary--left dc__overflow-hidden">
18-
<ResourceFilterOptions searchPlaceholder="Search" {...props} />
29+
<ResourceFilterOptions
30+
searchText={searchKey}
31+
setSearchText={handleSearch}
32+
searchPlaceholder="Search"
33+
filteredRows={filteredRows}
34+
isResourceListLoading={isResourceListLoading}
35+
selectedResource={selectedResource}
36+
gvkFilterConfig={gvkFilterConfig}
37+
updateSearchParams={updateSearchParams}
38+
selectedNamespace={selectedNamespace}
39+
selectedCluster={selectedCluster}
40+
resourceRecommenderConfig={resourceRecommenderConfig}
41+
selectedKindGVKFilter={selectedKindGVKFilter}
42+
selectedAPIVersionGVKFilter={selectedAPIVersionGVKFilter}
43+
/>
1944

2045
{resourceListError ? (
2146
<ErrorScreenManager

‎src/components/ResourceBrowser/Types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export interface ClusterOptionType extends OptionType {
9393

9494
export interface ResourceFilterOptionsProps
9595
extends Pick<TableViewWrapperProps<FiltersTypeEnum.URL>, 'updateSearchParams' | 'filteredRows'>,
96-
Pick<K8sResourceListFilterType, 'eventType'> {
96+
Partial<Pick<K8sResourceListFilterType, 'eventType'>> {
9797
selectedResource: ApiResourceGroupType
9898
selectedCluster?: ClusterOptionType
9999
selectedNamespace?: string

0 commit comments

Comments
 (0)