Skip to content

Commit e4e0213

Browse files
Elessar1802Elessar1802
committed
feat: route based RB
1 parent 492a2a3 commit e4e0213

18 files changed

+315
-361
lines changed

‎src/components/ClusterNodes/ClusterOverview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
392392
const upgradeClusterLowerCaseKind = SIDEBAR_KEYS.upgradeClusterGVK.Kind.toLowerCase()
393393

394394
const URL = getUrlWithSearchParams(
395-
getURLBasedOnSidebarGVK(SIDEBAR_KEYS.upgradeClusterGVK.Kind, clusterId, namespace),
395+
`${URLS.RESOURCE_BROWSER}/${clusterId}/cluster-upgrade`,
396396
{ [TARGET_K8S_VERSION_SEARCH_KEY]: selectedVersion },
397397
)
398398

‎src/components/ClusterNodes/ClusterTerminal.tsx

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

36+
import { ResourceListURLParams } from '@Components/ResourceBrowser/ResourceList/types'
37+
3638
import { BUSYBOX_LINK, DEFAULT_CONTAINER_NAME, NETSHOOT_LINK, shellTypes } from '../../config/constants'
3739
import { getClusterTerminalParamsData } from '../cluster/cluster.util'
3840
import { clusterImageDescription, convertToOptionsList } from '../common'
39-
import { URLParams } from '../ResourceBrowser/Types'
4041
import { AppDetailsTabs } from '../v2/appDetails/appDetails.store'
4142
import {
4243
EditModeType,
@@ -83,7 +84,7 @@ const ClusterTerminal = ({
8384
taints,
8485
updateTerminalTabUrl,
8586
}: ClusterTerminalType) => {
86-
const { nodeType } = useParams<URLParams>()
87+
const { kind } = useParams<ResourceListURLParams>()
8788
const { replace } = useHistory()
8889
const location = useLocation()
8990
const queryParams = new URLSearchParams(location.search)
@@ -154,11 +155,7 @@ const ClusterTerminal = ({
154155
}
155156

156157
useEffect(() => {
157-
if (
158-
nodeType !== AppDetailsTabs.terminal ||
159-
queryParamsData.selectedNode.value === selectedNodeName.value ||
160-
!update
161-
) {
158+
if (kind !== 'terminal' || queryParamsData.selectedNode.value === selectedNodeName.value || !update) {
162159
return
163160
}
164161
/* NOTE: update selectedNodeName */
@@ -184,7 +181,7 @@ const ClusterTerminal = ({
184181
queryParams.set('shell', selectedTerminalType.value)
185182
queryParams.set('node', selectedNodeName.value)
186183
updateTerminalTabUrl(queryParams.toString())
187-
if (nodeType === AppDetailsTabs.terminal) {
184+
if (kind === AppDetailsTabs.terminal) {
188185
replace({ search: queryParams.toString() })
189186
}
190187
}, [selectedNodeName.value, selectedNamespace.value, selectedImage.value, selectedTerminalType.value])
@@ -1014,7 +1011,7 @@ const ClusterTerminal = ({
10141011
renderConnectionStrip: renderStripMessage(),
10151012
setSocketConnection,
10161013
socketConnection,
1017-
isTerminalTab: selectedTabIndex === 0 && nodeType === AppDetailsTabs.terminal,
1014+
isTerminalTab: selectedTabIndex === 0 && kind === 'terminal',
10181015
sessionId,
10191016
registerLinkMatcher: renderRegisterLinkMatcher,
10201017
},

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

Lines changed: 9 additions & 4 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, URLParams } from './Types'
34+
import { GetResourceDataType, NodeRowDetail, ResourceBrowserDetailBaseParams } from './Types'
3535
import { parseNodeList } from './Utils'
3636

3737
export const getClusterList = async (): Promise<ClusterListResponse> => {
@@ -61,9 +61,14 @@ export const getNodeList = (
6161
clusterId: string,
6262
abortControllerRef: RefObject<AbortController>,
6363
): Promise<ResponseType<NodeRowDetail[]>> =>
64-
get(getUrlWithSearchParams<keyof URLParams>(Routes.NODE_LIST, { clusterId: Number(clusterId) }), {
65-
abortControllerRef,
66-
})
64+
get(
65+
getUrlWithSearchParams<keyof ResourceBrowserDetailBaseParams>(Routes.NODE_LIST, {
66+
clusterId: Number(clusterId),
67+
}),
68+
{
69+
abortControllerRef,
70+
},
71+
)
6772

6873
export const getResourceData = async ({
6974
selectedResource,

‎src/components/ResourceBrowser/ResourceBrowserRouter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const ResourceBrowserRouter: React.FC = () => {
3333

3434
return (
3535
<Switch>
36-
<Route path={`${path}/:clusterId/:namespace/:nodeType/:group/:node?`}>
36+
<Route path={`${path}/:clusterId`}>
3737
<ResourceList />
3838
</Route>
3939

‎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, URLParams } from '../Types'
27+
import { AdminTerminalProps, ResourceBrowserDetailBaseParams } from '../Types'
2828

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

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

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,13 @@ const BaseResourceListContent = ({
360360
return `f-${statusPostfix} ${isNodeListing ? 'dc__capitalize' : ''}`
361361
}
362362

363-
const handleResourceClick = (e) => onResourceClick(e, shouldOverrideSelectedResourceKind)
363+
const handleResourceClick =
364+
onResourceClick ??
365+
((e) => {
366+
const { name, namespace, kind, group: _group } = e.currentTarget.dataset
367+
368+
push(`${URLS.RESOURCE_BROWSER}/${clusterId}/${namespace}/${kind}/${_group}/v1/${name}`)
369+
})
364370

365371
const handleNodeClick = (e) => {
366372
const { name } = e.currentTarget.dataset
@@ -422,8 +428,9 @@ const BaseResourceListContent = ({
422428
type="button"
423429
className={`dc__unset-button-styles dc__align-left dc__truncate ${!shouldShowRedirectionAndActions ? 'cursor-default' : ''}`}
424430
data-name={resourceData.name}
425-
data-namespace={resourceData.namespace}
426-
data-kind={resourceData.kind}
431+
data-namespace={resourceData.namespace || ALL_NAMESPACE_OPTION.value}
432+
data-kind={selectedResource.gvk.Kind}
433+
data-group={selectedResource.gvk.Group || K8S_EMPTY_GROUP}
427434
onClick={shouldShowRedirectionAndActions ? handleResourceClick : null}
428435
aria-label={`Select ${resourceData.name}`}
429436
>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import CouldNotConnectImg from '../../../assets/img/app-not-deployed.svg'
2121
import { URLS } from '../../../config'
2222
import { StyledProgressBar } from '../../common/formFields/Widgets/Widgets'
2323
import { CONNECTION_TIMEOUT_TIME, TAKING_LONGER_TO_CONNECT, TRYING_TO_CONNECT } from '../Constants'
24-
import { ConnectingToClusterStateProps, URLParams } from '../Types'
24+
import { ConnectingToClusterStateProps, ResourceBrowserDetailBaseParams } from '../Types'
2525

2626
const ConnectingToClusterState: React.FC<ConnectingToClusterStateProps> = ({
2727
loader,
@@ -31,7 +31,7 @@ const ConnectingToClusterState: React.FC<ConnectingToClusterStateProps> = ({
3131
requestAbortController,
3232
}) => {
3333
const { replace } = useHistory()
34-
const { clusterId } = useParams<URLParams>()
34+
const { clusterId } = useParams<ResourceBrowserDetailBaseParams>()
3535
const [infoText, setInfoText] = useState(TRYING_TO_CONNECT)
3636
const [showCancel, setShowCancel] = useState(false)
3737
const [resetProgress, setResetProgress] = useState(false)

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,10 @@ import { getPodRestartRBACPayload } from '@Components/v2/appDetails/k8Resource/n
3030
import { importComponentFromFELibrary } from '../../common/helpers/Helpers'
3131
import { SIDEBAR_KEYS } from '../Constants'
3232
import { getResourceData } from '../ResourceBrowser.service'
33-
import { K8SResourceListType, URLParams } from '../Types'
33+
import { K8SResourceListType } from '../Types'
3434
import { removeDefaultForStorageClass, sortEventListData } from '../Utils'
3535
import BaseResourceList from './BaseResourceList'
36+
import { ResourceListURLParams } from './types'
3637

3738
const PodRestart = importComponentFromFELibrary('PodRestart')
3839
const getFilterOptionsFromSearchParams = importComponentFromFELibrary(
@@ -49,13 +50,12 @@ export const K8SResourceList = ({
4950
isOpen,
5051
updateK8sResourceTab,
5152
setWidgetEventDetails,
52-
handleResourceClick,
5353
clusterName,
5454
lowercaseKindToResourceGroupMap,
5555
}: K8SResourceListType) => {
5656
// HOOKS
5757
const location = useLocation()
58-
const { clusterId, nodeType, group } = useParams<URLParams>()
58+
const { clusterId, kind, group } = useParams<ResourceListURLParams>()
5959

6060
// STATES
6161
const [selectedNamespace, setSelectedNamespace] = useState(ALL_NAMESPACE_OPTION)
@@ -126,13 +126,12 @@ export const K8SResourceList = ({
126126
isOpen={isOpen}
127127
renderRefreshBar={renderRefreshBar}
128128
updateK8sResourceTab={updateK8sResourceTab}
129-
nodeType={nodeType}
129+
nodeType={kind}
130130
group={group}
131131
addTab={addTab}
132132
hideBulkSelection={!getFilterOptionsFromSearchParams} // NOTE: hideBulkSelection if fe-lib not linked
133133
setWidgetEventDetails={setWidgetEventDetails}
134134
lowercaseKindToResourceGroupMap={lowercaseKindToResourceGroupMap}
135-
handleResourceClick={handleResourceClick}
136135
>
137136
{PodRestart && <PodRestart rbacPayload={getPodRestartRBACPayload()} />}
138137
</BaseResourceList>

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

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

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

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

22+
import { K8S_EMPTY_GROUP, ResourceBrowserTabsId } from '../Constants'
2223
import { getResourceGroupList } from '../ResourceBrowser.service'
23-
import { K8SResourceTabComponentProps, URLParams } from '../Types'
24+
import { K8SResourceTabComponentProps } from '../Types'
2425
import ConnectingToClusterState from './ConnectingToClusterState'
2526
import { K8SResourceList } from './K8SResourceList'
2627
import Sidebar from './Sidebar'
28+
import { ResourceListURLParams } from './types'
2729

2830
const K8SResourceTabComponent = ({
29-
selectedResource,
30-
setSelectedResource,
31+
markTabActiveById,
3132
selectedCluster,
3233
renderRefreshBar,
3334
addTab,
3435
isOpen,
3536
updateK8sResourceTab,
3637
updateK8sResourceTabLastSyncMoment,
3738
setWidgetEventDetails,
38-
handleResourceClick,
3939
clusterName,
4040
lowercaseKindToResourceGroupMap,
4141
}: K8SResourceTabComponentProps) => {
42-
const { clusterId } = useParams<URLParams>()
42+
const { clusterId, kind, group } = useParams<ResourceListURLParams>()
4343

4444
const abortControllerRef = useRef(new AbortController())
4545

46+
useEffect(() => {
47+
markTabActiveById(ResourceBrowserTabsId.k8s_Resources).catch(noop)
48+
}, [])
49+
50+
const selectedResource = useMemo(
51+
() => lowercaseKindToResourceGroupMap?.[`${group === K8S_EMPTY_GROUP ? '' : group}-${kind}`.toLowerCase()],
52+
[lowercaseKindToResourceGroupMap, kind, group],
53+
)
54+
4655
const [loading, k8SObjectMap, error, reload] = useAsync(
4756
() =>
4857
abortPreviousRequests(
@@ -75,7 +84,6 @@ const K8SResourceTabComponent = ({
7584
<Sidebar
7685
apiResources={k8SObjectMap?.result.apiResources || null}
7786
selectedResource={selectedResource}
78-
setSelectedResource={setSelectedResource}
7987
isOpen={isOpen}
8088
updateK8sResourceTab={updateK8sResourceTab}
8189
updateK8sResourceTabLastSyncMoment={updateK8sResourceTabLastSyncMoment}
@@ -89,7 +97,6 @@ const K8SResourceTabComponent = ({
8997
renderRefreshBar={renderRefreshBar}
9098
updateK8sResourceTab={updateK8sResourceTab}
9199
setWidgetEventDetails={setWidgetEventDetails}
92-
handleResourceClick={handleResourceClick}
93100
lowercaseKindToResourceGroupMap={lowercaseKindToResourceGroupMap}
94101
/>
95102
</div>

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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'
5+
6+
import { UpdateTabUrlParamsType } from '@Components/common/DynamicTabs/types'
7+
import NodeDetailComponent from '@Components/v2/appDetails/k8Resource/nodeDetail/NodeDetail.component'
8+
9+
import { NodeDetailComponentWrapperProps, ResourceDetailURLParams } from './types'
10+
11+
const NodeDetailComponentWrapper = ({
12+
getTabId,
13+
removeTabByIdentifier,
14+
logSearchTerms,
15+
loadingResources,
16+
setLogSearchTerms,
17+
lowercaseKindToResourceGroupMap,
18+
updateTabUrl,
19+
clusterName,
20+
markTabActiveById,
21+
addTab,
22+
}: NodeDetailComponentWrapperProps) => {
23+
const { url } = useRouteMatch()
24+
const { version, kind, group, name, namespace } = useParams<ResourceDetailURLParams>()
25+
26+
// TODO: need to ensure that it matches
27+
const id = getTabId(`${group}-${version}-${namespace}`, name, kind)
28+
29+
useEffect(() => {
30+
markTabActiveById(id)
31+
.then((wasFound) => {
32+
if (!wasFound) {
33+
addTab({
34+
idPrefix: `${group}-${version}-${namespace}`,
35+
name,
36+
kind,
37+
url,
38+
}).catch(noop)
39+
}
40+
})
41+
.catch(noop)
42+
}, [])
43+
44+
const updateTabUrlHandler = ({ url: _url, dynamicTitle, retainSearchParams }: Omit<UpdateTabUrlParamsType, 'id'>) =>
45+
updateTabUrl({ id, url: _url, dynamicTitle, retainSearchParams })
46+
47+
const removeTabByIdentifierHandler = () => removeTabByIdentifier(id)
48+
49+
return (
50+
<div className="flexbox-col flex-grow-1 dc__overflow-hidden">
51+
<NodeDetailComponent
52+
loadingResources={loadingResources}
53+
isResourceBrowserView
54+
lowercaseKindToResourceGroupMap={lowercaseKindToResourceGroupMap}
55+
logSearchTerms={logSearchTerms}
56+
setLogSearchTerms={setLogSearchTerms}
57+
removeTabByIdentifier={removeTabByIdentifierHandler}
58+
updateTabUrl={updateTabUrlHandler}
59+
clusterName={clusterName}
60+
/>
61+
</div>
62+
)
63+
}
64+
65+
export default NodeDetailComponentWrapper

0 commit comments

Comments
 (0)