feat: table in RB

.storybook/preview.tsx

@@ -59,6 +59,8 @@ const preview: Preview = {
                     <div id="animated-dialog-backdrop" />
                     <div id="visible-modal" />
 
+                    <div id="visible-modal" />
+
                     <BaseConfirmationModal />
                 </ConfirmationModalProvider>
             </ThemeProvider>

package.json

@@ -63,7 +63,7 @@
         "test:ci": "jest --watchAll=false --ci --json --coverage --testLocationInResults --outputFile=report.json",
         "jest": "jest",
         "lint-staged": "lint-staged",
-        "storybook": "IS_STORYBOOK=true storybook dev -p 6006",
+        "storybook": "IS_STORYBOOK=true GENERATE_SOURCEMAP=true storybook dev -p 6006",
         "build-storybook": "IS_STORYBOOK=true storybook build",
         "postinstall": "patch-package"
     },

src/components/ClusterNodes/ClusterList/ClusterListRow.tsx

@@ -1,7 +1,6 @@
-import { Link } from 'react-router-dom'
+import { generatePath, Link } from 'react-router-dom'
 
 import {
-    ALL_NAMESPACE_OPTION,
     BulkSelectionIdentifiersType,
     Button,
     ButtonComponentType,
@@ -19,10 +18,8 @@ import {
 
 import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg'
 import { importComponentFromFELibrary } from '@Components/common'
-import { K8S_EMPTY_GROUP } from '@Components/ResourceBrowser/Constants'
+import { RESOURCE_BROWSER_ROUTES } from '@Components/ResourceBrowser/Constants'
 import { getClusterChangeRedirectionUrl } from '@Components/ResourceBrowser/Utils'
-import { AppDetailsTabs } from '@Components/v2/appDetails/appDetails.store'
-import { URLS } from '@Config/routes'
 
 import { ClusterMapInitialStatus } from '../ClusterMapInitialStatus'
 import { CLUSTER_PROD_TYPE } from '../constants'
@@ -65,8 +62,6 @@ const ClusterListRow = ({
 
     const isIdentifierSelected = !!bulkSelectionState[clusterData.name]
 
-    // TODO: @Elessar1802 will be replacing all terminal url with new utils
-
     const isClusterInCreationPhase = !!clusterData.installationId && !clusterData.id
 
     const clusterLinkURL = getClusterChangeRedirectionUrl(
@@ -113,7 +108,9 @@ const ClusterListRow = ({
                                     variant={ButtonVariantType.borderLess}
                                     component={ButtonComponentType.link}
                                     linkProps={{
-                                        to: `${URLS.RESOURCE_BROWSER}/${clusterData.id}/${ALL_NAMESPACE_OPTION.value}/${AppDetailsTabs.terminal}/${K8S_EMPTY_GROUP}`,
+                                        to: generatePath(RESOURCE_BROWSER_ROUTES.TERMINAL, {
+                                            clusterId: clusterData.id,
+                                        }),
                                     }}
                                 />
                             )}

src/components/ClusterNodes/ClusterOverview.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react'
-import { generatePath, useHistory, useParams, useRouteMatch } from 'react-router-dom'
+import { generatePath, useHistory, useParams } from 'react-router-dom'
 
 import {
     EditableTextArea,
@@ -34,7 +34,7 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { getUpgradeCompatibilityTippyConfig } from '@Components/ResourceBrowser/ResourceList/utils'
-import { getURLBasedOnSidebarGVK } from '@Components/ResourceBrowser/Utils'
+import { ClusterDetailBaseParams } from '@Components/ResourceBrowser/Types'
 import { getAvailableCharts } from '@Services/service'
 
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
@@ -43,7 +43,9 @@ import { MAX_LENGTH_350 } from '../../config/constantMessaging'
 import { importComponentFromFELibrary } from '../common'
 import GenericDescription from '../common/Description/GenericDescription'
 import {
+    DUMMY_RESOURCE_GVK_VERSION,
     K8S_EMPTY_GROUP,
+    RESOURCE_BROWSER_ROUTES,
     SIDEBAR_KEYS,
     TARGET_K8S_VERSION_SEARCH_KEY,
     UPGRADE_CLUSTER_CONSTANTS,
@@ -115,13 +117,9 @@ const LoadingMetricCard = () => (
 )
 
 function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
-    const { clusterId, namespace } = useParams<{
-        clusterId: string
-        namespace: string
-    }>()
+    const { clusterId } = useParams<ClusterDetailBaseParams>()
 
     const history = useHistory()
-    const { path } = useRouteMatch()
     const [clusterConfig, setClusterConfig] = useState<InstallationClusterConfigType | null>(null)
 
     const requestAbortControllerRef = useRef(new AbortController())
@@ -212,11 +210,11 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
 
     const setCustomFilter = (errorType: ERROR_TYPE, filterText: string): void => {
         const queryParam = errorType === ERROR_TYPE.VERSION_ERROR ? 'k8sversion' : 'name'
-        const newUrl = `${generatePath(path, {
+        const newUrl = `${generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_LIST, {
             clusterId,
-            namespace,
-            nodeType: SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase(),
+            kind: 'node',
             group: K8S_EMPTY_GROUP,
+            version: DUMMY_RESOURCE_GVK_VERSION,
         })}?${queryParam}=${encodeURIComponent(filterText)}`
         history.push(newUrl)
     }
@@ -343,10 +341,9 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
     const handleOpenScanClusterTab = (selectedVersion: string) => {
         const upgradeClusterLowerCaseKind = SIDEBAR_KEYS.upgradeClusterGVK.Kind.toLowerCase()
 
-        const URL = getUrlWithSearchParams(
-            getURLBasedOnSidebarGVK(SIDEBAR_KEYS.upgradeClusterGVK.Kind, clusterId, namespace),
-            { [TARGET_K8S_VERSION_SEARCH_KEY]: selectedVersion },
-        )
+        const URL = getUrlWithSearchParams(generatePath(RESOURCE_BROWSER_ROUTES.CLUSTER_UPGRADE, { clusterId }), {
+            [TARGET_K8S_VERSION_SEARCH_KEY]: selectedVersion,
+        })
 
         addTab({
             idPrefix: UPGRADE_CLUSTER_CONSTANTS.ID_PREFIX,

src/components/ClusterNodes/ClusterTerminal.tsx

@@ -33,10 +33,11 @@ import {
     TabProps,
 } from '@devtron-labs/devtron-fe-common-lib'
 
+import { K8sResourceListURLParams } from '@Components/ResourceBrowser/ResourceList/types'
+
 import { BUSYBOX_LINK, DEFAULT_CONTAINER_NAME, NETSHOOT_LINK, shellTypes } from '../../config/constants'
 import { getClusterTerminalParamsData } from '../cluster/cluster.util'
 import { clusterImageDescription, convertToOptionsList } from '../common'
-import { URLParams } from '../ResourceBrowser/Types'
 import { AppDetailsTabs } from '../v2/appDetails/appDetails.store'
 import {
     EditModeType,
@@ -83,7 +84,7 @@ const ClusterTerminal = ({
     taints,
     updateTerminalTabUrl,
 }: ClusterTerminalType) => {
-    const { nodeType } = useParams<URLParams>()
+    const { kind } = useParams<K8sResourceListURLParams>()
     const { replace } = useHistory()
     const location = useLocation()
     const queryParams = new URLSearchParams(location.search)
@@ -154,11 +155,7 @@ const ClusterTerminal = ({
     }
 
     useEffect(() => {
-        if (
-            nodeType !== AppDetailsTabs.terminal ||
-            queryParamsData.selectedNode.value === selectedNodeName.value ||
-            !update
-        ) {
+        if (kind !== 'terminal' || queryParamsData.selectedNode.value === selectedNodeName.value || !update) {
             return
         }
         /* NOTE: update selectedNodeName */
@@ -184,7 +181,7 @@ const ClusterTerminal = ({
         queryParams.set('shell', selectedTerminalType.value)
         queryParams.set('node', selectedNodeName.value)
         updateTerminalTabUrl(queryParams.toString())
-        if (nodeType === AppDetailsTabs.terminal) {
+        if (kind === AppDetailsTabs.terminal) {
             replace({ search: queryParams.toString() })
         }
     }, [selectedNodeName.value, selectedNamespace.value, selectedImage.value, selectedTerminalType.value])
@@ -1018,7 +1015,7 @@ const ClusterTerminal = ({
                 renderConnectionStrip: renderStripMessage(),
                 setSocketConnection,
                 socketConnection,
-                isTerminalTab: selectedTabIndex === 0 && nodeType === AppDetailsTabs.terminal,
+                isTerminalTab: selectedTabIndex === 0 && kind === 'terminal',
                 sessionId,
                 registerLinkMatcher: renderRegisterLinkMatcher,
             },

src/components/ClusterNodes/NodeDetails.tsx

@@ -80,7 +80,7 @@ import './clusterNodes.scss'
 import ResourceBrowserActionMenu from '../ResourceBrowser/ResourceList/ResourceBrowserActionMenu'
 
 const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }: ClusterListType) => {
-    const { clusterId, node } = useParams<{ clusterId: string; nodeType: string; node: string }>()
+    const { clusterId, name } = useParams<{ clusterId: string; nodeType: string; name: string }>()
     const [loader, setLoader] = useState(true)
     const [apiInProgress, setApiInProgress] = useState(false)
     const [isReviewState, setIsReviewStates] = useState(false)
@@ -112,7 +112,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
     const getData = (_patchdata: jsonpatch.Operation[]) => {
         setLoader(true)
         setErrorResponseCode(null)
-        getNodeCapacity(clusterId, node)
+        getNodeCapacity(clusterId, name)
             .then((response: NodeDetailResponse) => {
                 if (response.result) {
                     setSortedPodList(response.result.pods?.sort((a, b) => a['name'].localeCompare(b['name'])))
@@ -150,7 +150,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
 
     useEffect(() => {
         getData(patchData)
-    }, [node])
+    }, [name])
 
     useEffect(() => {
         if (queryParams.has('tab')) {
@@ -181,7 +181,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
 
     const changeNodeTab = (e): void => {
         const _tabIndex = Number(e.currentTarget.dataset.tabIndex)
-        if (node !== AUTO_SELECT.value) {
+        if (name !== AUTO_SELECT.value) {
             let _searchParam = '?tab='
             if (_tabIndex === 0) {
                 _searchParam += NODE_DETAILS_TABS.summary.toLowerCase()
@@ -863,13 +863,13 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
             const parsedManifest = YAML.parse(modifiedManifest)
             const requestData: UpdateNodeRequestBody = {
                 clusterId: +clusterId,
-                name: node,
+                name: name,
                 manifestPatch: JSON.stringify(parsedManifest),
                 version: nodeDetail.version,
                 kind: nodeDetail.kind,
             }
             setApiInProgress(true)
-            updateNodeManifest(clusterId, node, requestData)
+            updateNodeManifest(clusterId, name, requestData)
                 .then((response: NodeDetailResponse) => {
                     setApiInProgress(false)
                     if (response.result) {
@@ -1059,7 +1059,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                     {renderTabs()}
                     {showCordonNodeDialog && (
                         <CordonNodeModal
-                            name={node}
+                            name={name}
                             version={nodeDetail.version}
                             kind={nodeDetail.kind}
                             unschedulable={nodeDetail.unschedulable}
@@ -1068,15 +1068,15 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                     )}
                     {showDrainNodeDialog && (
                         <DrainNodeModal
-                            name={node}
+                            name={name}
                             version={nodeDetail.version}
                             kind={nodeDetail.kind}
                             closePopup={hideDrainNodeModal}
                         />
                     )}
                     {showDeleteNodeDialog && (
                         <DeleteNodeModal
-                            name={node}
+                            name={name}
                             version={nodeDetail.version}
                             kind={nodeDetail.kind}
                             closePopup={hideDeleteNodeModal}
@@ -1085,7 +1085,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                     )}
                     {showEditTaints && (
                         <EditTaintsModal
-                            name={node}
+                            name={name}
                             version={nodeDetail.version}
                             kind={nodeDetail.kind}
                             taints={nodeDetail.taints}

src/components/ResourceBrowser/Constants.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { NO_MATCHING_RESULT, Nodes } from '@devtron-labs/devtron-fe-common-lib'
+import { NO_MATCHING_RESULT, Nodes, URLS } from '@devtron-labs/devtron-fe-common-lib'
 
 import ICArrowUpCircle from '@Icons/ic-arrow-up-circle.svg'
 
@@ -351,8 +351,6 @@ export const NODE_SEARCH_KEYS_TO_OBJECT_KEYS: Record<
 
 export const LOCAL_STORAGE_EXISTS = !!(Storage && localStorage)
 
-export const LOCAL_STORAGE_KEY_FOR_APPLIED_COLUMNS = 'appliedColumns'
-
 export const NODE_K8S_VERSION_FILTER_KEY = 'k8sVersion'
 
 export const MONITORING_DASHBOARD_TAB_ID = 'monitoring_dashboard'
@@ -392,3 +390,15 @@ export const AI_BUTTON_CONFIG_MAP: Record<string, ShowAIButtonConfig> = Object.f
         excludeValues: new Set(['Approved,Issued']),
     },
 })
+
+export const RESOURCE_BROWSER_ROUTES = {
+    OVERVIEW: `${URLS.RESOURCE_BROWSER}/:clusterId/overview`,
+    MONITORING_DASHBOARD: `${URLS.RESOURCE_BROWSER}/:clusterId/monitoring-dashboard`,
+    TERMINAL: `${URLS.RESOURCE_BROWSER}/:clusterId/terminal`,
+    CLUSTER_UPGRADE: `${URLS.RESOURCE_BROWSER}/:clusterId/cluster-upgrade`,
+    NODE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/node/:name`,
+    K8S_RESOURCE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/:namespace/:kind/:group/:version/:name`,
+    K8S_RESOURCE_LIST: `${URLS.RESOURCE_BROWSER}/:clusterId/:kind/:group/:version`,
+} as const
+
+export const DUMMY_RESOURCE_GVK_VERSION = 'v1'

src/components/ResourceBrowser/ResourceBrowser.service.tsx

@@ -39,8 +39,8 @@ import {
 
 import { Routes } from '../../config'
 import { SIDEBAR_KEYS } from './Constants'
-import { GetResourceDataType, NodeRowDetail, URLParams } from './Types'
-import { parseNodeList } from './Utils'
+import { ClusterDetailBaseParams, GetResourceDataType, NodeRowDetail } from './Types'
+import { parseNodeList, removeDefaultForStorageClass } from './Utils'
 
 export const namespaceListByClusterId = async (clusterId: string) => {
     const response = await get<string[]>(`${Routes.CLUSTER_NAMESPACE}/${clusterId}`)
@@ -60,9 +60,14 @@ export const getNodeList = (
     clusterId: string,
     abortControllerRef: RefObject<AbortController>,
 ): Promise<ResponseType<NodeRowDetail[]>> =>
-    get(getUrlWithSearchParams<keyof URLParams>(Routes.NODE_LIST, { clusterId: Number(clusterId) }), {
-        abortControllerRef,
-    })
+    get(
+        getUrlWithSearchParams<keyof ClusterDetailBaseParams>(Routes.NODE_LIST, {
+            clusterId: Number(clusterId),
+        }),
+        {
+            abortControllerRef,
+        },
+    )
 
 export const getResourceData = async ({
     selectedResource,
@@ -71,18 +76,20 @@ export const getResourceData = async ({
     filters,
     abortControllerRef,
 }: GetResourceDataType) => {
+    const idPrefix = `${clusterId}${JSON.stringify(selectedResource)}${JSON.stringify(filters)}${selectedNamespace}`
+
     try {
         if (selectedResource.gvk.Kind === SIDEBAR_KEYS.nodeGVK.Kind) {
             const response = await getNodeList(clusterId, abortControllerRef)
 
-            return parseNodeList(response)
+            return parseNodeList(response, idPrefix)
         }
 
         const isNamespaceList = selectedResource.gvk.Kind.toLowerCase() === Nodes.Namespace.toLowerCase()
 
         const [k8sResponse, namespaceListResponse] = await Promise.allSettled([
             getK8sResourceList(
-                getK8sResourceListPayload(clusterId, selectedNamespace.value.toLowerCase(), selectedResource, filters),
+                getK8sResourceListPayload(clusterId, selectedNamespace.toLowerCase(), selectedResource, filters),
                 abortControllerRef.current.signal,
             ),
             isNamespaceList ? getNamespaceListMin(clusterId, abortControllerRef) : null,
@@ -107,19 +114,31 @@ export const getResourceData = async ({
             )
 
             return {
-                ...response,
-                result: {
-                    ...response.result,
-                    headers: [...response.result.headers, 'environment'],
-                    data: response.result.data.map((data) => ({
-                        ...data,
-                        environment: namespaceToEnvironmentMap[data.name as string],
-                    })),
-                },
+                headers: [...response.result.headers, 'environment'],
+                data: response.result.data.map((data, index) => ({
+                    ...data,
+                    environment: namespaceToEnvironmentMap[data.name as string],
+                    id: `${idPrefix}${index}`,
+                })),
             }
         }
 
-        return response
+        if (!response) {
+            return null
+        }
+
+        const data =
+            selectedResource.gvk.Kind === Nodes.StorageClass
+                ? removeDefaultForStorageClass(response.result.data)
+                : response.result.data
+
+        return {
+            ...response.result,
+            data: data.map((entry, index) => ({
+                ...entry,
+                id: `${idPrefix}${index}`,
+            })),
+        }
     } catch (err) {
         if (!getIsRequestAborted(err)) {
             showError(err)