fix: relative path usage fixes

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -62,7 +62,7 @@ function ConnectToDBDialog({
         tenantApi.useGetTenantInfoQuery(params);
     const endpoint = endpointFromProps ?? tenantData?.ControlPlane?.endpoint;
 
-    const snippet = getSnippetCode(activeTab, {database, endpoint});
+    const snippet = getSnippetCode(activeTab, {database: tenantData?.Name, endpoint});
     const docsLink = getDocsLink(activeTab);
 
     return (

src/components/ShardsTable/columns.tsx

@@ -18,9 +18,9 @@ export const getPathColumn: GetShardsColumn = ({schemaPath = ''}) => {
         name: TOP_SHARDS_COLUMNS_IDS.Path,
         header: TOP_SHARDS_COLUMNS_TITLES.Path,
         render: ({row}) => {
-            // row.RelativePath - relative schema path
+            // row.RelativePath - relative schema path without start slash
             return (
-                <LinkToSchemaObject path={schemaPath + row.RelativePath}>
+                <LinkToSchemaObject path={`${schemaPath}/${row.RelativePath}`}>
                     {row.RelativePath}
                 </LinkToSchemaObject>
             );

src/containers/Header/Header.tsx

@@ -56,6 +56,7 @@ function Header() {
     const {title: clusterTitle} = useClusterBaseInfo();
 
     const database = useDatabaseFromQuery();
+
     const clusterName = useClusterNameFromQuery();
 
     const location = useLocation();

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -50,7 +50,7 @@ interface DiagnosticsProps {
 const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
-    const {path, database, type, subType} = useCurrentSchema();
+    const {path, database, type, subType, databaseFullPath} = useCurrentSchema();
     const containerRef = React.useRef<HTMLDivElement>(null);
     const dispatch = useTypedDispatch();
     const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
@@ -59,8 +59,6 @@ function Diagnostics(props: DiagnosticsProps) {
 
     const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
 
-    const tenantName = isDatabaseEntityType(type) ? path : database;
-
     const {controlPlane, databaseType} = useTenantBaseInfo(isDatabaseEntityType(type) ? path : '');
 
     const hasFeatureFlags = useFeatureFlagsAvailable();
@@ -93,27 +91,33 @@ function Diagnostics(props: DiagnosticsProps) {
                 return (
                     <DetailedOverview
                         type={type}
-                        tenantName={tenantName}
+                        tenantName={database}
                         path={path}
                         additionalTenantProps={props.additionalTenantProps}
                         additionalNodesProps={props.additionalNodesProps}
                     />
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
-                return <SchemaViewer path={path} tenantName={tenantName} type={type} extended />;
+                return <SchemaViewer path={path} tenantName={database} type={type} extended />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
-                return <TopQueries tenantName={tenantName} />;
+                return <TopQueries tenantName={database} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
-                return <TopShards tenantName={tenantName} path={path} />;
+                return (
+                    <TopShards
+                        tenantName={database}
+                        path={path}
+                        databaseFullPath={databaseFullPath}
+                    />
+                );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
                 return (
                     <Nodes
                         path={path}
-                        database={tenantName}
+                        database={database}
                         additionalNodesProps={props.additionalNodesProps}
                         scrollContainerRef={containerRef}
                     />
@@ -124,56 +128,56 @@ function Diagnostics(props: DiagnosticsProps) {
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
                 return (
-                    <Tablets scrollContainerRef={containerRef} path={path} database={tenantName} />
+                    <Tablets scrollContainerRef={containerRef} path={path} database={database} />
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
-                return <PaginatedStorage database={tenantName} scrollContainerRef={containerRef} />;
+                return <PaginatedStorage database={database} scrollContainerRef={containerRef} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.network: {
                 return (
                     <NetworkWrapper
                         path={path}
-                        database={tenantName}
+                        database={database}
                         additionalNodesProps={props.additionalNodesProps}
                         scrollContainerRef={containerRef}
                     />
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
-                return <Describe path={path} database={tenantName} />;
+                return <Describe path={path} database={database} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
-                return <HotKeys path={path} database={tenantName} />;
+                return <HotKeys path={path} database={database} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
-                return <Heatmap path={path} database={tenantName} />;
+                return <Heatmap path={path} database={database} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
-                return <Consumers path={path} database={tenantName} type={type} />;
+                return <Consumers path={path} database={database} type={type} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
-                return <Partitions path={path} database={tenantName} />;
+                return <Partitions path={path} database={database} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topicData: {
                 return (
                     <TopicData
                         key={path}
                         path={path}
-                        database={tenantName}
+                        database={database}
                         scrollContainerRef={containerRef}
                     />
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.configs: {
-                return <Configs database={tenantName} />;
+                return <Configs database={database} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.operations: {
-                return <Operations database={tenantName} scrollContainerRef={containerRef} />;
+                return <Operations database={database} scrollContainerRef={containerRef} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.backups: {
                 return uiFactory.renderBackups?.({
-                    database: tenantName,
+                    database,
                     scrollContainerRef: containerRef,
                 });
             }
@@ -208,7 +212,7 @@ function Diagnostics(props: DiagnosticsProps) {
 
     useScrollPosition(
         containerRef,
-        `tenant-diagnostics-${tenantName}-${activeTab?.id}`,
+        `tenant-diagnostics-${database}-${activeTab?.id}`,
         activeTab?.id === TENANT_DIAGNOSTICS_TABS_IDS.overview,
     );
 

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx

@@ -18,11 +18,17 @@ import {cpuDashboardConfig} from './cpuDashboardConfig';
 
 interface TenantCpuProps {
     tenantName: string;
+    databaseFullPath?: string;
     additionalNodesProps?: AdditionalNodesProps;
     databaseType?: ETenantType;
 }
 
-export function TenantCpu({tenantName, additionalNodesProps, databaseType}: TenantCpuProps) {
+export function TenantCpu({
+    tenantName,
+    additionalNodesProps,
+    databaseType,
+    databaseFullPath,
+}: TenantCpuProps) {
     const dispatch = useTypedDispatch();
     const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
 
@@ -58,7 +64,11 @@ export function TenantCpu({tenantName, additionalNodesProps, databaseType}: Tena
                 </>
             )}
             <StatsWrapper title={i18n('title_top-shards')} allEntitiesLink={topShardsLink}>
-                <TopShards tenantName={tenantName} path={tenantName} />
+                <TopShards
+                    tenantName={tenantName}
+                    path={tenantName}
+                    databaseFullPath={databaseFullPath}
+                />
             </StatsWrapper>
             <StatsWrapper
                 title={i18n('title_top-queries')}

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.tsx

@@ -10,15 +10,23 @@ const columnsIds: TopShardsColumnId[] = ['TabletId', 'Path', 'CPUCores'];
 interface TopShardsProps {
     tenantName: string;
     path: string;
+    databaseFullPath?: string;
 }
 
-export const TopShards = ({tenantName, path}: TopShardsProps) => {
+export const TopShards = ({tenantName, path, databaseFullPath = tenantName}: TopShardsProps) => {
     const ShardsTable = useComponent('ShardsTable');
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
+    let normalizedPath = path;
+    if (tenantName !== databaseFullPath) {
+        //tenantName may be database full path or database id. If it is database id, we must remove it from object's path and add database full path instead
+        const shrinkedPath = path.startsWith(tenantName) ? path.slice(tenantName.length) : path;
+        normalizedPath = databaseFullPath + shrinkedPath;
+    }
+
     const {currentData, isFetching, error} = topShardsApi.useGetTopShardsQuery(
-        {database: tenantName, path},
+        {database: tenantName, path: normalizedPath, databaseFullPath},
         {pollingInterval: autoRefreshInterval},
     );
 

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -143,6 +143,7 @@ export function TenantOverview({
                         tenantName={tenantName}
                         additionalNodesProps={additionalNodesProps}
                         databaseType={Type}
+                        databaseFullPath={Name}
                     />
                 );
             }

src/containers/Tenant/Diagnostics/TopShards/TopShards.tsx

@@ -42,9 +42,10 @@ function fillDateRangeFor(value: ShardsWorkloadFilters) {
 interface TopShardsProps {
     tenantName: string;
     path: string;
+    databaseFullPath: string;
 }
 
-export const TopShards = ({tenantName, path}: TopShardsProps) => {
+export const TopShards = ({tenantName, path, databaseFullPath}: TopShardsProps) => {
     const ShardsTable = useComponent('ShardsTable');
 
     const dispatch = useTypedDispatch();
@@ -71,16 +72,25 @@ export const TopShards = ({tenantName, path}: TopShardsProps) => {
 
     const {tableSort, handleTableSort, backendSort} = useTopShardSort();
 
+    let normalizedPath = path;
+
+    if (tenantName !== databaseFullPath) {
+        //tenantName may be database full path or database id. If it is database id, we must remove it from object's path and add database full path instead
+        const shrinkedPath = path.startsWith(tenantName) ? path.slice(tenantName.length) : path;
+        normalizedPath = databaseFullPath + shrinkedPath;
+    }
+
     const {
         currentData: result,
         isFetching,
         error,
     } = shardApi.useSendShardQueryQuery(
         {
             database: tenantName,
-            path: path,
+            path: normalizedPath,
             sortOrder: backendSort,
             filters,
+            databaseFullPath,
         },
         {pollingInterval: autoRefreshInterval},
     );

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -11,7 +11,6 @@ import {
 } from '@gravity-ui/uikit';
 import qs from 'qs';
 import {useLocation} from 'react-router-dom';
-import {StringParam, useQueryParam} from 'use-query-params';
 
 import {AsyncReplicationState} from '../../../components/AsyncReplicationState';
 import {toFormattedSize} from '../../../components/FormattedBytes/utils';
@@ -37,6 +36,7 @@ import {EntityTitle} from '../EntityTitle/EntityTitle';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
 import {useCurrentSchema} from '../TenantContext';
 import {TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups, getTenantPath} from '../TenantPages';
+import {useTenantQueryParams} from '../useTenantQueryParams';
 import {getSummaryControls} from '../utils/controls';
 import {
     PaneVisibilityActionTypes,
@@ -76,9 +76,10 @@ export function ObjectSummary({
     onExpandSummary,
     isCollapsed,
 }: ObjectSummaryProps) {
-    const {path, database: tenantName, type, subType} = useCurrentSchema();
+    const {path, database, type, subType, databaseFullPath} = useCurrentSchema();
+
     const dispatch = useTypedDispatch();
-    const [, setCurrentPath] = useQueryParam('schema', StringParam);
+    const {handleSchemaChange} = useTenantQueryParams();
     const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = React.useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED),
         undefined,
@@ -97,7 +98,7 @@ export function ObjectSummary({
 
     const {currentData: currentObjectData} = overviewApi.useGetOverviewQuery({
         path,
-        database: tenantName,
+        database,
     });
     const currentSchemaData = currentObjectData?.PathDescription?.Self;
 
@@ -366,7 +367,7 @@ export function ObjectSummary({
     const renderTabContent = () => {
         switch (summaryTab) {
             case TENANT_SUMMARY_TABS_IDS.schema: {
-                return <SchemaViewer type={type} path={path} tenantName={tenantName} />;
+                return <SchemaViewer type={type} path={path} tenantName={database} />;
             }
             default: {
                 return renderObjectOverview();
@@ -385,7 +386,7 @@ export function ObjectSummary({
         dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.clear);
     };
 
-    const relativePath = transformPath(path, tenantName);
+    const relativePath = transformPath(path, database, databaseFullPath);
 
     const renderCommonInfoControls = () => {
         const showPreview = isTableType(type) && !isIndexTableType(subType);
@@ -394,7 +395,7 @@ export function ObjectSummary({
                 {showPreview &&
                     getSummaryControls(
                         dispatch,
-                        {setActivePath: setCurrentPath},
+                        {setActivePath: handleSchemaChange},
                         'm',
                     )(path, 'preview')}
                 <ClipboardButton
@@ -447,7 +448,11 @@ export function ObjectSummary({
                             minSize={[200, 52]}
                             collapsedSizes={[100, 0]}
                         >
-                            <ObjectTree tenantName={tenantName} path={path} />
+                            <ObjectTree
+                                tenantName={database}
+                                path={path}
+                                databaseFullPath={databaseFullPath}
+                            />
                             <div className={b('info')}>
                                 <div className={b('sticky-top')}>
                                     <div className={b('info-header')}>

src/containers/Tenant/ObjectSummary/ObjectTree.tsx

@@ -1,14 +1,14 @@
-import {StringParam, useQueryParam} from 'use-query-params';
-
 import {Loader} from '../../../components/Loader';
 import {useGetSchemaQuery} from '../../../store/reducers/schema/schema';
+import {useTenantQueryParams} from '../useTenantQueryParams';
 
 import {SchemaTree} from './SchemaTree/SchemaTree';
 import i18n from './i18n';
 import {b} from './shared';
 
 interface ObjectTreeProps {
     tenantName: string;
+    databaseFullPath: string;
     path?: string;
 }
 
@@ -20,14 +20,14 @@ function prepareSchemaRootName(name: string | undefined, fallback: string): stri
     return fallback.startsWith('/') ? fallback : `/${fallback}`;
 }
 
-export function ObjectTree({tenantName, path}: ObjectTreeProps) {
+export function ObjectTree({tenantName, path, databaseFullPath}: ObjectTreeProps) {
     const {data: tenantData = {}, isLoading} = useGetSchemaQuery({
         path: tenantName,
         database: tenantName,
     });
     const pathData = tenantData?.PathDescription?.Self;
 
-    const [, setCurrentPath] = useQueryParam('schema', StringParam);
+    const {handleSchemaChange} = useTenantQueryParams();
 
     if (!pathData && isLoading) {
         // If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
@@ -44,13 +44,14 @@ export function ObjectTree({tenantName, path}: ObjectTreeProps) {
             <div className={b('tree')}>
                 {pathData ? (
                     <SchemaTree
+                        databaseFullPath={databaseFullPath}
                         rootPath={tenantName}
                         // for the root pathData.Name contains the same string as tenantName,
                         // ensure it has the leading slash
                         rootName={prepareSchemaRootName(pathData.Name, tenantName)}
                         rootType={pathData.PathType}
                         currentPath={path}
-                        onActivePathUpdate={setCurrentPath}
+                        onActivePathUpdate={handleSchemaChange}
                     />
                 ) : null}
             </div>