Skip to content

Commit a5ccc34

Browse files
Elessar1802Elessar1802
committed
fix: make RB route based
1 parent 6fa5a02 commit a5ccc34

25 files changed

+277
-233
lines changed

‎src/components/ClusterNodes/ClusterOverview.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,24 +37,25 @@ import {
3737
ClusterDescriptionResponse,
3838
ClusterCapacityResponse,
3939
} from './types'
40-
import { getURLBasedOnSidebarGVK } from '@Components/ResourceBrowser/Utils'
4140
import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
4241
import { getClusterCapacity, getClusterDetails, updateClusterShortDescription } from './clusterNodes.service'
4342
import GenericDescription from '../common/Description/GenericDescription'
4443
import { defaultClusterNote, defaultClusterShortDescription } from './constants'
4544
import { Moment12HourFormat, URLS } from '../../config'
4645
import {
46+
DUMMY_RESOURCE_GVK_VERSION,
4747
K8S_EMPTY_GROUP,
48+
RESOURCE_BROWSER_ROUTES,
4849
SIDEBAR_KEYS,
4950
TARGET_K8S_VERSION_SEARCH_KEY,
5051
UPGRADE_CLUSTER_CONSTANTS,
5152
} from '../ResourceBrowser/Constants'
5253
import { unauthorizedInfoText } from '../ResourceBrowser/ResourceList/ClusterSelector'
53-
import { ReactComponent as ClusterOverviewIcon } from '../../assets/icons/cluster-overview.svg'
5454
import { MAX_LENGTH_350 } from '../../config/constantMessaging'
5555
import ConnectingToClusterState from '../ResourceBrowser/ResourceList/ConnectingToClusterState'
5656
import { importComponentFromFELibrary } from '../common'
5757
import { getUpgradeCompatibilityTippyConfig } from '@Components/ResourceBrowser/ResourceList/utils'
58+
import { ClusterDetailBaseParams } from '@Components/ResourceBrowser/Types'
5859

5960
const Catalog = importComponentFromFELibrary('Catalog', null, 'function')
6061
const MigrateClusterVersionInfoBar = importComponentFromFELibrary('MigrateClusterVersionInfoBar', null, 'function')
@@ -92,10 +93,7 @@ const tippyForMetricsApi = () => {
9293
}
9394

9495
function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
95-
const { clusterId, namespace } = useParams<{
96-
clusterId: string
97-
namespace: string
98-
}>()
96+
const { clusterId } = useParams<ClusterDetailBaseParams>()
9997
const [errorMsg, setErrorMsg] = useState('')
10098

10199
const [descriptionData, setDescriptionData] = useState<DescriptionDataType>({
@@ -258,11 +256,11 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
258256
const setCustomFilter = (errorType: ERROR_TYPE, filterText: string): void => {
259257
const queryParam = errorType === ERROR_TYPE.VERSION_ERROR ? 'k8sversion' : 'name'
260258
const newUrl =
261-
`${generatePath(path, {
259+
`${generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_LIST, {
262260
clusterId,
263-
namespace,
264-
nodeType: SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase(),
261+
kind: 'node',
265262
group: K8S_EMPTY_GROUP,
263+
version: DUMMY_RESOURCE_GVK_VERSION,
266264
})}?` + `${queryParam}=${encodeURIComponent(filterText)}`
267265
history.push(newUrl)
268266
}
@@ -392,7 +390,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
392390
const upgradeClusterLowerCaseKind = SIDEBAR_KEYS.upgradeClusterGVK.Kind.toLowerCase()
393391

394392
const URL = getUrlWithSearchParams(
395-
`${URLS.RESOURCE_BROWSER}/${clusterId}/cluster-upgrade`,
393+
generatePath(RESOURCE_BROWSER_ROUTES.CLUSTER_UPGRADE, { clusterId }),
396394
{ [TARGET_K8S_VERSION_SEARCH_KEY]: selectedVersion },
397395
)
398396

‎src/components/ClusterNodes/ClusterTerminal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import {
3333
TabProps,
3434
} from '@devtron-labs/devtron-fe-common-lib'
3535

36-
import { ResourceListURLParams } from '@Components/ResourceBrowser/ResourceList/types'
36+
import { K8sResourceListURLParams } from '@Components/ResourceBrowser/ResourceList/types'
3737

3838
import { BUSYBOX_LINK, DEFAULT_CONTAINER_NAME, NETSHOOT_LINK, shellTypes } from '../../config/constants'
3939
import { getClusterTerminalParamsData } from '../cluster/cluster.util'
@@ -84,7 +84,7 @@ const ClusterTerminal = ({
8484
taints,
8585
updateTerminalTabUrl,
8686
}: ClusterTerminalType) => {
87-
const { kind } = useParams<ResourceListURLParams>()
87+
const { kind } = useParams<K8sResourceListURLParams>()
8888
const { replace } = useHistory()
8989
const location = useLocation()
9090
const queryParams = new URLSearchParams(location.search)

‎src/components/ClusterNodes/NodeDetails.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ import './clusterNodes.scss'
8080
import ResourceBrowserActionMenu from '../ResourceBrowser/ResourceList/ResourceBrowserActionMenu'
8181

8282
const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }: ClusterListType) => {
83-
const { clusterId, node } = useParams<{ clusterId: string; nodeType: string; node: string }>()
83+
const { clusterId, name } = useParams<{ clusterId: string; nodeType: string; name: string }>()
8484
const [loader, setLoader] = useState(true)
8585
const [apiInProgress, setApiInProgress] = useState(false)
8686
const [isReviewState, setIsReviewStates] = useState(false)
@@ -112,7 +112,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
112112
const getData = (_patchdata: jsonpatch.Operation[]) => {
113113
setLoader(true)
114114
setErrorResponseCode(null)
115-
getNodeCapacity(clusterId, node)
115+
getNodeCapacity(clusterId, name)
116116
.then((response: NodeDetailResponse) => {
117117
if (response.result) {
118118
setSortedPodList(response.result.pods?.sort((a, b) => a['name'].localeCompare(b['name'])))
@@ -150,7 +150,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
150150

151151
useEffect(() => {
152152
getData(patchData)
153-
}, [node])
153+
}, [name])
154154

155155
useEffect(() => {
156156
if (queryParams.has('tab')) {
@@ -181,7 +181,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
181181

182182
const changeNodeTab = (e): void => {
183183
const _tabIndex = Number(e.currentTarget.dataset.tabIndex)
184-
if (node !== AUTO_SELECT.value) {
184+
if (name !== AUTO_SELECT.value) {
185185
let _searchParam = '?tab='
186186
if (_tabIndex === 0) {
187187
_searchParam += NODE_DETAILS_TABS.summary.toLowerCase()
@@ -863,13 +863,13 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
863863
const parsedManifest = YAML.parse(modifiedManifest)
864864
const requestData: UpdateNodeRequestBody = {
865865
clusterId: +clusterId,
866-
name: node,
866+
name: name,
867867
manifestPatch: JSON.stringify(parsedManifest),
868868
version: nodeDetail.version,
869869
kind: nodeDetail.kind,
870870
}
871871
setApiInProgress(true)
872-
updateNodeManifest(clusterId, node, requestData)
872+
updateNodeManifest(clusterId, name, requestData)
873873
.then((response: NodeDetailResponse) => {
874874
setApiInProgress(false)
875875
if (response.result) {
@@ -1059,7 +1059,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
10591059
{renderTabs()}
10601060
{showCordonNodeDialog && (
10611061
<CordonNodeModal
1062-
name={node}
1062+
name={name}
10631063
version={nodeDetail.version}
10641064
kind={nodeDetail.kind}
10651065
unschedulable={nodeDetail.unschedulable}
@@ -1068,15 +1068,15 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
10681068
)}
10691069
{showDrainNodeDialog && (
10701070
<DrainNodeModal
1071-
name={node}
1071+
name={name}
10721072
version={nodeDetail.version}
10731073
kind={nodeDetail.kind}
10741074
closePopup={hideDrainNodeModal}
10751075
/>
10761076
)}
10771077
{showDeleteNodeDialog && (
10781078
<DeleteNodeModal
1079-
name={node}
1079+
name={name}
10801080
version={nodeDetail.version}
10811081
kind={nodeDetail.kind}
10821082
closePopup={hideDeleteNodeModal}
@@ -1085,7 +1085,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
10851085
)}
10861086
{showEditTaints && (
10871087
<EditTaintsModal
1088-
name={node}
1088+
name={name}
10891089
version={nodeDetail.version}
10901090
kind={nodeDetail.kind}
10911091
taints={nodeDetail.taints}

‎src/components/ResourceBrowser/Constants.ts

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

17-
import { NO_MATCHING_RESULT, Nodes } from '@devtron-labs/devtron-fe-common-lib'
17+
import { NO_MATCHING_RESULT, Nodes, URLS } from '@devtron-labs/devtron-fe-common-lib'
1818

1919
import ICArrowUpCircle from '@Icons/ic-arrow-up-circle.svg'
2020

@@ -392,3 +392,15 @@ export const AI_BUTTON_CONFIG_MAP: Record<string, ShowAIButtonConfig> = Object.f
392392
excludeValues: new Set(['Approved,Issued']),
393393
},
394394
})
395+
396+
export const RESOURCE_BROWSER_ROUTES = {
397+
OVERVIEW: `${URLS.RESOURCE_BROWSER}/:clusterId/overview`,
398+
MONITORING_DASHBOARD: `${URLS.RESOURCE_BROWSER}/:clusterId/monitoring-dashboard`,
399+
TERMINAL: `${URLS.RESOURCE_BROWSER}/:clusterId/terminal`,
400+
CLUSTER_UPGRADE: `${URLS.RESOURCE_BROWSER}/:clusterId/cluster-upgrade`,
401+
NODE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/node/:name`,
402+
K8S_RESOURCE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/:namespace/:kind/:group/:version/:name`,
403+
K8S_RESOURCE_LIST: `${URLS.RESOURCE_BROWSER}/:clusterId/:kind/:group/:version`,
404+
} as const
405+
406+
export const DUMMY_RESOURCE_GVK_VERSION = 'v1'

‎src/components/ResourceBrowser/ResourceBrowser.service.tsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
import { Routes } from '../../config'
3232
import { ClusterListResponse } from '../../services/service.types'
3333
import { SIDEBAR_KEYS } from './Constants'
34-
import { GetResourceDataType, NodeRowDetail, ResourceBrowserDetailBaseParams } from './Types'
34+
import { ClusterDetailBaseParams, GetResourceDataType, NodeRowDetail } from './Types'
3535
import { parseNodeList } from './Utils'
3636

3737
export const getClusterList = async (): Promise<ClusterListResponse> => {
@@ -62,14 +62,25 @@ export const getNodeList = (
6262
abortControllerRef: RefObject<AbortController>,
6363
): Promise<ResponseType<NodeRowDetail[]>> =>
6464
get(
65-
getUrlWithSearchParams<keyof ResourceBrowserDetailBaseParams>(Routes.NODE_LIST, {
65+
getUrlWithSearchParams<keyof ClusterDetailBaseParams>(Routes.NODE_LIST, {
6666
clusterId: Number(clusterId),
6767
}),
6868
{
6969
abortControllerRef,
7070
},
7171
)
7272

73+
const cacheRepository: Record<string, any> = {}
74+
75+
export const cacheResult = async <T = any,>(name: string, promiseCallback: () => Promise<T>) => {
76+
if (cacheRepository[name]) {
77+
return cacheRepository[name] as T
78+
}
79+
const response = await promiseCallback()
80+
cacheRepository[name] = response
81+
return response
82+
}
83+
7384
export const getResourceData = async ({
7485
selectedResource,
7586
selectedNamespace,
@@ -85,7 +96,7 @@ export const getResourceData = async ({
8596
}
8697

8798
return await getK8sResourceList(
88-
getK8sResourceListPayload(clusterId, selectedNamespace.value.toLowerCase(), selectedResource, filters),
99+
getK8sResourceListPayload(clusterId, selectedNamespace.toLowerCase(), selectedResource, filters),
89100
abortControllerRef.current.signal,
90101
)
91102
} catch (err) {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@ import { createTaintsList } from '../../cluster/cluster.util'
2424
import { clusterNamespaceList, getClusterCapacity } from '../../ClusterNodes/clusterNodes.service'
2525
import ClusterTerminal from '../../ClusterNodes/ClusterTerminal'
2626
import { createGroupSelectList, filterImageList } from '../../common'
27-
import { AdminTerminalProps, ResourceBrowserDetailBaseParams } from '../Types'
27+
import { AdminTerminalProps, ClusterDetailBaseParams } from '../Types'
2828

2929
const AdminTerminal: React.FC<AdminTerminalProps> = ({ updateTerminalTabUrl }: AdminTerminalProps) => {
30-
const { clusterId } = useParams<ResourceBrowserDetailBaseParams>()
30+
const { clusterId } = useParams<ClusterDetailBaseParams>()
3131

3232
const [loading, data, error] = useAsync(
3333
() =>

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import { useEffect, useMemo, useRef, useState } from 'react'
18-
import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
18+
import { generatePath, useHistory, useLocation } from 'react-router-dom'
1919
import DOMPurify from 'dompurify'
2020
import { getAIAnalyticsEvents } from 'src/Shared'
2121

@@ -60,12 +60,14 @@ import { importComponentFromFELibrary } from '../../common/helpers/Helpers'
6060
import {
6161
AI_BUTTON_CONFIG_MAP,
6262
DEFAULT_K8SLIST_PAGE_SIZE,
63+
DUMMY_RESOURCE_GVK_VERSION,
6364
K8S_EMPTY_GROUP,
6465
MANDATORY_NODE_LIST_HEADERS,
6566
NODE_K8S_VERSION_FILTER_KEY,
6667
NODE_LIST_HEADERS,
6768
NODE_LIST_HEADERS_TO_KEY_MAP,
6869
NODE_SEARCH_KEYS_TO_OBJECT_KEYS,
70+
RESOURCE_BROWSER_ROUTES,
6971
RESOURCE_EMPTY_PAGE_STATE,
7072
RESOURCE_LIST_EMPTY_STATE,
7173
RESOURCE_PAGE_SIZE_OPTIONS,
@@ -95,9 +97,7 @@ const BaseResourceListContent = ({
9597
selectedResource,
9698
reloadResourceListData,
9799
selectedNamespace,
98-
setSelectedNamespace,
99100
selectedCluster,
100-
isOpen,
101101
renderRefreshBar,
102102
updateK8sResourceTab,
103103
children,
@@ -130,7 +130,6 @@ const BaseResourceListContent = ({
130130

131131
const location = useLocation()
132132
const { replace, push } = useHistory()
133-
const { url } = useRouteMatch()
134133

135134
const { searchParams } = useSearchString()
136135

@@ -277,18 +276,14 @@ const BaseResourceListContent = ({
277276
}, [nodeType])
278277

279278
useEffect(() => {
280-
if (!isOpen) {
281-
return
282-
}
283-
284279
if (!resourceList) {
285280
setFilteredResourceList(null)
286281
return
287282
}
288283

289284
handleFilterChanges(searchText)
290285
setResourceListOffset(0)
291-
}, [resourceList, sortBy, sortOrder, location.search, isOpen])
286+
}, [resourceList, sortBy, sortOrder, location.search])
292287

293288
const getHandleCheckedForId = (resourceData: K8sResourceDetailDataType) => () => {
294289
const { id } = resourceData as Record<'id', string>
@@ -348,12 +343,11 @@ const BaseResourceListContent = ({
348343
}
349344

350345
const emptyStateActionHandler = () => {
351-
const pathname = `${URLS.RESOURCE_BROWSER}/${clusterId}/${ALL_NAMESPACE_OPTION.value}/${selectedResource.gvk.Kind.toLowerCase()}/${group}`
346+
const pathname = `${URLS.RESOURCE_BROWSER}/${clusterId}/${selectedResource.gvk.Kind.toLowerCase()}/${group}/v1`
352347
updateK8sResourceTab({ url: pathname, dynamicTitle: '', retainSearchParams: false })
353348
push(pathname)
354349
setFilteredResourceList(resourceList?.data ?? null)
355350
setResourceListOffset(0)
356-
setSelectedNamespace(ALL_NAMESPACE_OPTION)
357351
setLastTimeStringSinceClearAllFilters(new Date().toISOString())
358352
}
359353

@@ -375,12 +369,20 @@ const BaseResourceListContent = ({
375369
((e) => {
376370
const { name, namespace, kind, group: _group } = e.currentTarget.dataset
377371

378-
push(`${URLS.RESOURCE_BROWSER}/${clusterId}/${namespace}/${kind}/${_group}/v1/${name}`)
372+
const path = generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_DETAIL, {
373+
clusterId,
374+
namespace,
375+
kind: kind.toLowerCase(),
376+
group: _group,
377+
version: DUMMY_RESOURCE_GVK_VERSION,
378+
name,
379+
})
380+
push(path)
379381
})
380382

381383
const handleNodeClick = (e) => {
382384
const { name } = e.currentTarget.dataset
383-
const _url = `${url.split('/').slice(0, -2).join('/')}/node/${K8S_EMPTY_GROUP}/${name}`
385+
const _url = generatePath(RESOURCE_BROWSER_ROUTES.NODE_DETAIL, { clusterId, name })
384386
addTab({ idPrefix: K8S_EMPTY_GROUP, kind: 'node', name, url: _url })
385387
.then(() => push(_url))
386388
.catch(noop)
@@ -408,6 +410,8 @@ const BaseResourceListContent = ({
408410
const isNodeUnschedulable = isNodeListing && !!resourceData.unschedulable
409411
const isNodeListingAndNodeHasErrors = isNodeListing && !!resourceData[NODE_LIST_HEADERS_TO_KEY_MAP.errors]
410412

413+
const nameFieldCallback = isNodeListing ? handleNodeClick : handleResourceClick
414+
411415
return (
412416
<div
413417
// Added id as the name is not always unique
@@ -446,7 +450,7 @@ const BaseResourceListContent = ({
446450
data-namespace={resourceData.namespace || ALL_NAMESPACE_OPTION.value}
447451
data-kind={selectedResource.gvk.Kind}
448452
data-group={selectedResource.gvk.Group || K8S_EMPTY_GROUP}
449-
onClick={shouldShowRedirectionAndActions ? handleResourceClick : null}
453+
onClick={shouldShowRedirectionAndActions ? nameFieldCallback : null}
450454
aria-label={`Select ${resourceData.name}`}
451455
>
452456
<span
@@ -595,8 +599,7 @@ const BaseResourceListContent = ({
595599
return <GenericFilterEmptyState />
596600
}
597601

598-
const isFilterApplied =
599-
searchText || location.search || selectedNamespace.value !== ALL_NAMESPACE_OPTION.value
602+
const isFilterApplied = searchText || location.search || selectedNamespace !== ALL_NAMESPACE_OPTION.value
600603

601604
return isFilterApplied ? (
602605
<ResourceListEmptyState
@@ -683,17 +686,14 @@ const BaseResourceListContent = ({
683686
visibleColumns={visibleColumns}
684687
setVisibleColumns={setVisibleColumns}
685688
searchParams={searchParams}
686-
isOpen={isOpen}
687689
/>
688690
) : (
689691
<ResourceFilterOptions
690692
key={`${selectedResource?.gvk.Kind}-${selectedResource?.gvk.Group}`}
691693
selectedResource={selectedResource}
692694
selectedNamespace={selectedNamespace}
693-
setSelectedNamespace={setSelectedNamespace}
694695
selectedCluster={selectedCluster}
695696
searchText={searchText}
696-
isOpen={isOpen}
697697
resourceList={resourceList}
698698
setSearchText={setSearchText}
699699
isSearchInputDisabled={isLoading}

0 commit comments

Comments
 (0)