Skip to content

Commit 340a8bc

Browse files
Elessar1802Elessar1802
committed
fix: retain filters
1 parent 00e7ddb commit 340a8bc

13 files changed

+216
-167
lines changed

‎src/components/ResourceBrowser/Constants.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,3 +402,12 @@ export const RESOURCE_BROWSER_ROUTES = {
402402
} as const
403403

404404
export const DUMMY_RESOURCE_GVK_VERSION = 'v1'
405+
406+
export const ResourceBrowserRouteToTabIdMap: Partial<
407+
Record<(typeof RESOURCE_BROWSER_ROUTES)[keyof typeof RESOURCE_BROWSER_ROUTES], ResourceBrowserTabsId | string>
408+
> = {
409+
'/resource-browser/:clusterId/:kind/:group/:version': ResourceBrowserTabsId.k8s_Resources,
410+
'/resource-browser/:clusterId/overview': ResourceBrowserTabsId.cluster_overview,
411+
'/resource-browser/:clusterId/monitoring-dashboard': MONITORING_DASHBOARD_TAB_ID,
412+
'/resource-browser/:clusterId/terminal': ResourceBrowserTabsId.terminal,
413+
}

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
import { useEffect } from 'react'
22
import { useLocation } from 'react-router-dom'
33

4-
import { noop } from '@devtron-labs/devtron-fe-common-lib/dist'
5-
64
import { ResourceBrowserTabsId } from '../Constants'
75
import { AdminTerminalDummyProps } from './types'
86

9-
const AdminTerminalDummy = ({ markTabActiveById, updateTabUrl, clusterName, getTabById }: AdminTerminalDummyProps) => {
7+
const AdminTerminalDummy = ({ updateTabUrl, clusterName, getTabById }: AdminTerminalDummyProps) => {
108
const { pathname, search } = useLocation()
119

12-
useEffect(() => {
13-
markTabActiveById(ResourceBrowserTabsId.terminal).catch(noop)
14-
}, [])
15-
1610
useEffect(() => {
1711
const tab = getTabById(ResourceBrowserTabsId.terminal)
1812

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

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

17-
import { useEffect, useMemo } from 'react'
18-
import { useParams, useRouteMatch } from 'react-router-dom'
17+
import { useMemo } from 'react'
18+
import { useParams } from 'react-router-dom'
1919

2020
import {
2121
CollapsibleList,
2222
ErrorScreenManager,
2323
FiltersTypeEnum,
2424
GenericEmptyState,
2525
ImageType,
26-
noop,
2726
PaginationEnum,
2827
Progressing,
2928
Table,
@@ -36,12 +35,12 @@ import { ReactComponent as NoOffendingPipeline } from '@Images/no-offending-pipe
3635
import { importComponentFromFELibrary } from '@Components/common'
3736
import { URLS } from '@Config/routes'
3837

39-
import { SIDEBAR_KEYS, TARGET_K8S_VERSION_SEARCH_KEY, UPGRADE_CLUSTER_CONSTANTS } from '../Constants'
38+
import { TARGET_K8S_VERSION_SEARCH_KEY } from '../Constants'
4039
import { ClusterDetailBaseParams } from '../Types'
4140
import ClusterUpgradeCompatibilityInfoTableCellComponent from './ClusterUpgradeCompatibilityInfoTableCellComponent'
4241
import ClusterUpgradeCompatibilityInfoTableWrapper from './ClusterUpgradeCompatibilityInfoTableWrapper'
4342
import { ClusterUpgradeCompatibilityInfoProps } from './types'
44-
import { dynamicSort, getUpgradeCompatibilityTippyConfig } from './utils'
43+
import { dynamicSort } from './utils'
4544

4645
const useClusterUpgradeCompatibilityInfo = importComponentFromFELibrary(
4746
'useClusterUpgradeCompatibilityInfo',
@@ -52,16 +51,11 @@ const useClusterUpgradeCompatibilityInfo = importComponentFromFELibrary(
5251
const ClusterUpgradeCompatibilityInfo = ({
5352
updateTabUrl,
5453
clusterName,
55-
markTabActiveById,
56-
addTab,
57-
getTabId,
5854
lowercaseKindToResourceGroupMap,
5955
}: ClusterUpgradeCompatibilityInfoProps) => {
6056
const { clusterId } = useParams<ClusterDetailBaseParams>()
6157
const targetK8sVersion = useSearchString().queryParams.get(TARGET_K8S_VERSION_SEARCH_KEY)
6258

63-
const { url } = useRouteMatch()
64-
6559
const {
6660
isLoading,
6761
compatibilityInfoData,
@@ -76,29 +70,6 @@ const ClusterUpgradeCompatibilityInfo = ({
7670
updateTabUrl,
7771
})
7872

79-
useEffect(() => {
80-
const upgradeClusterLowerCaseKind = SIDEBAR_KEYS.upgradeClusterGVK.Kind.toLowerCase()
81-
82-
markTabActiveById(
83-
getTabId(UPGRADE_CLUSTER_CONSTANTS.ID_PREFIX, UPGRADE_CLUSTER_CONSTANTS.NAME, upgradeClusterLowerCaseKind),
84-
)
85-
.then((found) => {
86-
if (!found) {
87-
addTab({
88-
idPrefix: UPGRADE_CLUSTER_CONSTANTS.ID_PREFIX,
89-
kind: upgradeClusterLowerCaseKind,
90-
name: UPGRADE_CLUSTER_CONSTANTS.NAME,
91-
url,
92-
dynamicTitle: `${UPGRADE_CLUSTER_CONSTANTS.DYNAMIC_TITLE} to v${targetK8sVersion}`,
93-
tippyConfig: getUpgradeCompatibilityTippyConfig({
94-
targetK8sVersion,
95-
}),
96-
}).catch(noop)
97-
}
98-
})
99-
.catch(noop)
100-
}, [])
101-
10273
const { columns, rows } = useMemo(
10374
() => ({
10475
columns: resourceListForCurrentData.headers.map(

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { PropsWithChildren, ReactElement, useEffect } from 'react'
2+
import { useLocation, useParams, useRouteMatch } from 'react-router-dom'
3+
4+
import { logExceptionToSentry, noop } from '@devtron-labs/devtron-fe-common-lib'
5+
6+
import { RESOURCE_BROWSER_ROUTES, UPGRADE_CLUSTER_CONSTANTS } from '../Constants'
7+
import { DynamicTabComponentWrapperProps } from './types'
8+
import { getTabIdForTab, getTabIdParamsForPath, getUpgradeCompatibilityTippyConfig } from './utils'
9+
10+
export const DynamicTabComponentWrapper = ({
11+
updateTabUrl,
12+
markTabActiveById,
13+
getTabId,
14+
addTab,
15+
children,
16+
}: PropsWithChildren<DynamicTabComponentWrapperProps>) => {
17+
const { pathname, search } = useLocation()
18+
const { path } = useRouteMatch()
19+
const params = useParams<Record<string, string>>()
20+
21+
const tabId = getTabIdForTab(path, getTabId, params)
22+
23+
useEffect(() => {
24+
if (!tabId) {
25+
logExceptionToSentry(`Tab ID not found for path: ${path}`)
26+
return
27+
}
28+
29+
markTabActiveById(tabId)
30+
.then((found) => {
31+
if (!found && addTab) {
32+
const [idPrefix, name, kind] = getTabIdParamsForPath(path, params) || []
33+
const { targetK8sVersion = '' } = params
34+
addTab({
35+
idPrefix,
36+
name,
37+
kind,
38+
type: 'dynamic',
39+
url: `${pathname}${search}`,
40+
...(path === RESOURCE_BROWSER_ROUTES.CLUSTER_UPGRADE
41+
? {
42+
dynamicTitle: `${UPGRADE_CLUSTER_CONSTANTS.DYNAMIC_TITLE} to v${targetK8sVersion}`,
43+
tippyConfig: getUpgradeCompatibilityTippyConfig({
44+
targetK8sVersion,
45+
}),
46+
}
47+
: {}),
48+
}).catch(noop)
49+
}
50+
})
51+
.catch(noop)
52+
}, [])
53+
54+
useEffect(() => {
55+
if (!tabId) {
56+
logExceptionToSentry(`Tab ID not found for path: ${path}`)
57+
return
58+
}
59+
60+
updateTabUrl({ id: tabId, url: `${pathname}${search}` })
61+
}, [pathname, search])
62+
63+
return children as ReactElement
64+
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ const K8SResourceListViewWrapper = ({
6464
children,
6565
handleSearch,
6666
renderRefreshBar,
67-
updateK8sResourceTab,
6867
searchKey,
6968
selectedCluster,
7069
selectedNamespace,
@@ -94,7 +93,6 @@ const K8SResourceListViewWrapper = ({
9493
setSearchText={handleSearch}
9594
isSearchInputDisabled={false}
9695
renderRefreshBar={renderRefreshBar}
97-
updateK8sResourceTab={updateK8sResourceTab}
9896
areFiltersHidden={false}
9997
updateSearchParams={updateSearchParams}
10098
eventType={eventType}
@@ -165,6 +163,10 @@ export const K8SResourceList = ({
165163
[],
166164
)
167165

166+
useEffect(() => {
167+
updateK8sResourceTab({ url: `${location.pathname}${location.search}` })
168+
}, [location.pathname, location.search])
169+
168170
const columns: TableColumnType[] = useMemo(
169171
() =>
170172
resourceList?.headers.map(
@@ -268,7 +270,6 @@ export const K8SResourceList = ({
268270
filter={tableFilter}
269271
additionalProps={{
270272
renderRefreshBar,
271-
updateK8sResourceTab,
272273
selectedResource,
273274
selectedCluster,
274275
addTab,

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

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

17-
import { useEffect, useMemo, useRef } from 'react'
17+
import { useMemo, useRef } from 'react'
1818
import { useParams } from 'react-router-dom'
1919

20-
import { abortPreviousRequests, ErrorScreenManager, noop, useAsync } from '@devtron-labs/devtron-fe-common-lib'
20+
import { abortPreviousRequests, ErrorScreenManager, useAsync } from '@devtron-labs/devtron-fe-common-lib'
2121

22-
import { K8S_EMPTY_GROUP, ResourceBrowserTabsId } from '../Constants'
22+
import { K8S_EMPTY_GROUP } from '../Constants'
2323
import { getResourceGroupList } from '../ResourceBrowser.service'
2424
import { K8SResourceTabComponentProps } from '../Types'
2525
import Cache from './Cache'
@@ -29,7 +29,6 @@ import Sidebar from './Sidebar'
2929
import { K8sResourceListURLParams } from './types'
3030

3131
const K8SResourceTabComponent = ({
32-
markTabActiveById,
3332
selectedCluster,
3433
renderRefreshBar,
3534
addTab,
@@ -41,10 +40,6 @@ const K8SResourceTabComponent = ({
4140

4241
const abortControllerRef = useRef(new AbortController())
4342

44-
useEffect(() => {
45-
markTabActiveById(ResourceBrowserTabsId.k8s_Resources).catch(noop)
46-
}, [])
47-
4843
const selectedResource = useMemo(
4944
() => lowercaseKindToResourceGroupMap?.[`${group === K8S_EMPTY_GROUP ? '' : group}-${kind}`.toLowerCase()],
5045
[lowercaseKindToResourceGroupMap, kind, group],

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

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import { useEffect } from 'react'
2-
import { useParams, useRouteMatch } from 'react-router-dom'
3-
4-
import { noop } from '@devtron-labs/devtron-fe-common-lib/dist'
1+
import { useParams } from 'react-router-dom'
52

63
import { UpdateTabUrlParamsType } from '@Components/common/DynamicTabs/types'
74
import NodeDetailComponent from '@Components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component'
@@ -17,30 +14,12 @@ const NodeDetailComponentWrapper = ({
1714
lowercaseKindToResourceGroupMap,
1815
updateTabUrl,
1916
clusterName,
20-
markTabActiveById,
21-
addTab,
2217
}: NodeDetailComponentWrapperProps) => {
23-
const { url } = useRouteMatch()
2418
const { version, kind, group, name, namespace } = useParams<K8sResourceDetailURLParams>()
2519

2620
const ID_PREFIX = `${group}-${version}-${namespace}`
2721
const id = getTabId(ID_PREFIX, name, kind)
2822

29-
useEffect(() => {
30-
markTabActiveById(id)
31-
.then((wasFound) => {
32-
if (!wasFound) {
33-
addTab({
34-
idPrefix: ID_PREFIX,
35-
name,
36-
kind,
37-
url,
38-
}).catch(noop)
39-
}
40-
})
41-
.catch(noop)
42-
}, [])
43-
4423
const updateTabUrlHandler = ({ url: _url, dynamicTitle, retainSearchParams }: Omit<UpdateTabUrlParamsType, 'id'>) =>
4524
updateTabUrl({ id, url: _url, dynamicTitle, retainSearchParams })
4625

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

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import { useEffect } from 'react'
2-
import { useParams, useRouteMatch } from 'react-router-dom'
3-
4-
import { noop } from '@devtron-labs/devtron-fe-common-lib'
1+
import { useParams } from 'react-router-dom'
52

63
import NodeDetails from '@Components/ClusterNodes/NodeDetails'
74
import { ClusterListType } from '@Components/ClusterNodes/types'
@@ -12,36 +9,16 @@ import { NodeDetailURLParams } from './types'
129

1310
const NodeDetailWrapper = ({
1411
addTab,
15-
markTabActiveById,
1612
getTabId,
1713
updateTabUrl,
1814
lowercaseKindToResourceGroupMap,
19-
}: Omit<ClusterListType, 'updateTabUrl'> &
20-
Pick<UseTabsReturnType, 'addTab' | 'markTabActiveById' | 'getTabId' | 'updateTabUrl'>) => {
21-
const { url } = useRouteMatch()
15+
}: Omit<ClusterListType, 'updateTabUrl'> & Pick<UseTabsReturnType, 'addTab' | 'getTabId' | 'updateTabUrl'>) => {
2216
const { name } = useParams<NodeDetailURLParams>()
2317

2418
const id = getTabId(K8S_EMPTY_GROUP, name, 'node')
2519

2620
const updateTabUrlHandler: ClusterListType['updateTabUrl'] = (props) => updateTabUrl({ id, ...props })
2721

28-
useEffect(() => {
29-
// NOTE: when the component mounts, we select the tab as active
30-
// If the tab is not found, we add a new tab
31-
markTabActiveById(id)
32-
.then((wasFound) => {
33-
if (!wasFound) {
34-
addTab({
35-
idPrefix: K8S_EMPTY_GROUP,
36-
kind: 'node',
37-
name,
38-
url,
39-
}).catch(noop)
40-
}
41-
})
42-
.catch(noop)
43-
}, [])
44-
4522
return (
4623
<NodeDetails
4724
updateTabUrl={updateTabUrlHandler}

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ const ResourceFilterOptions = ({
5151
setSearchText,
5252
isSearchInputDisabled,
5353
renderRefreshBar,
54-
updateK8sResourceTab,
5554
areFiltersHidden = false,
5655
searchPlaceholder,
5756
eventType = 'warning',
@@ -129,7 +128,6 @@ const ResourceFilterOptions = ({
129128
const parsedUrlSearchParams = new URLSearchParams(location.search)
130129
parsedUrlSearchParams.set('namespace', selected.value)
131130
const url = `${URLS.RESOURCE_BROWSER}/${clusterId}/${selectedResource.gvk.Kind.toLowerCase()}/${group}/v1?${parsedUrlSearchParams.toString()}`
132-
updateK8sResourceTab({ url })
133131
replace(url)
134132
}
135133

@@ -195,7 +193,6 @@ const ResourceFilterOptions = ({
195193
{FilterButton && (
196194
<FilterButton
197195
clusterName={selectedCluster?.label || ''}
198-
updateTabUrl={updateK8sResourceTab}
199196
showModal={showFilterModal}
200197
handleShowFilterModal={handleShowFilterModal}
201198
handleCloseFilterModal={handleCloseFilterModal}

0 commit comments

Comments
 (0)