fix: refactor relative paths support (#2877)

Author: Raubzeug

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -56,7 +56,7 @@ function ConnectToDBDialog({
     // Since there is no ControlPlane data in this case
     const shouldRequestTenantData = database && !endpointFromProps && !singleClusterMode;
     const params = shouldRequestTenantData
-        ? {path: database, clusterName, isMetaDatabasesAvailable}
+        ? {database, clusterName, isMetaDatabasesAvailable}
         : skipToken;
     const {currentData: tenantData, isLoading: isTenantDataLoading} =
         tenantApi.useGetTenantInfoQuery(params);

src/components/NetworkTable/NetworkTable.tsx

@@ -11,11 +11,12 @@ import {
 
 type NetworkWrapperProps = Pick<
     NodesProps,
-    'path' | 'scrollContainerRef' | 'additionalNodesProps' | 'database'
+    'path' | 'scrollContainerRef' | 'additionalNodesProps' | 'database' | 'databaseFullPath'
 >;
 
 export function NetworkTable({
     database,
+    databaseFullPath,
     path,
     scrollContainerRef,
     additionalNodesProps,
@@ -24,11 +25,12 @@ export function NetworkTable({
         <Nodes
             path={path}
             database={database}
+            databaseFullPath={databaseFullPath}
             scrollContainerRef={scrollContainerRef}
             withPeerRoleFilter={Boolean(database)}
             additionalNodesProps={additionalNodesProps}
             columns={getNetworkTableNodesColumns({
-                database: database,
+                database,
                 getNodeRef: additionalNodesProps?.getNodeRef,
             })}
             defaultColumnsIds={NETWORK_DEFAULT_NODES_COLUMNS}

src/components/QueriesActivityBar/QueriesActivityBar.tsx

@@ -6,12 +6,12 @@ import {useQueriesActivityData} from './useQueriesActivityData';
 import './QueriesActivityBar.scss';
 
 interface QueriesActivityBarProps {
-    tenantName: string;
+    database: string;
 }
 
-export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
+export function QueriesActivityBar({database}: QueriesActivityBarProps) {
     const {runningQueriesCount, uniqueApplications, uniqueUsers, qps, latency, areChartsAvailable} =
-        useQueriesActivityData(tenantName);
+        useQueriesActivityData(database);
 
     // Show skeleton while determining chart availability
     if (areChartsAvailable === null) {
@@ -32,7 +32,7 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
     // Render expandable mode when charts are available
     return (
         <QueriesActivityExpandable
-            tenantName={tenantName}
+            database={database}
             runningQueriesCount={runningQueriesCount}
             uniqueApplications={uniqueApplications}
             uniqueUsers={uniqueUsers}

src/components/QueriesActivityBar/QueriesActivityCharts.tsx

@@ -11,7 +11,7 @@ import type {ChartDataStatus} from '../MetricChart/types';
 const b = cn('queries-activity-bar');
 
 interface QueriesActivityChartsProps {
-    tenantName: string;
+    database: string;
     expanded: boolean;
     onChartDataStatusChange?: (status: ChartDataStatus) => void;
 }
@@ -21,7 +21,7 @@ const QUERIES_PER_SECOND_CHART_HEIGHT = 292;
 const QUERIES_LATENCIES_CHART_HEIGHT = 292 + LEGEND_HEIGHT;
 
 export function QueriesActivityCharts({
-    tenantName,
+    database,
     expanded,
     onChartDataStatusChange,
 }: QueriesActivityChartsProps) {
@@ -76,7 +76,7 @@ export function QueriesActivityCharts({
         >
             <Flex direction="column" gap={3} grow basis={0} minWidth={0}>
                 <MetricChart
-                    database={tenantName}
+                    database={database}
                     metrics={queriesChartConfig.metrics}
                     autorefresh={shouldRefresh}
                     height={QUERIES_PER_SECOND_CHART_HEIGHT}
@@ -89,7 +89,7 @@ export function QueriesActivityCharts({
 
             <Flex direction="column" gap={3} grow basis={0} minWidth={0}>
                 <MetricChart
-                    database={tenantName}
+                    database={database}
                     metrics={latenciesChartConfig.metrics}
                     autorefresh={shouldRefresh}
                     height={QUERIES_LATENCIES_CHART_HEIGHT}

src/components/QueriesActivityBar/QueriesActivityExpandable.tsx

@@ -18,7 +18,7 @@ import './QueriesActivityBar.scss';
 const b = cn('queries-activity-bar');
 
 interface QueriesActivityExpandableProps {
-    tenantName: string;
+    database: string;
     runningQueriesCount: number;
     uniqueApplications: number;
     uniqueUsers: number;
@@ -37,7 +37,7 @@ interface QueriesActivityExpandableProps {
 }
 
 export function QueriesActivityExpandable({
-    tenantName,
+    database,
     runningQueriesCount,
     uniqueApplications,
     uniqueUsers,
@@ -155,7 +155,7 @@ export function QueriesActivityExpandable({
                         </Flex>
                     </Flex>
                 )}
-                <QueriesActivityCharts tenantName={tenantName} expanded={expanded} />
+                <QueriesActivityCharts database={database} expanded={expanded} />
             </Card>
         </div>
     );

src/components/QueriesActivityBar/useQueriesActivityData.ts

@@ -23,18 +23,18 @@ interface UseQueriesActivityDataResult {
     areChartsAvailable: boolean | null; // null = loading, boolean = result
 }
 
-export function useQueriesActivityData(tenantName: string): UseQueriesActivityDataResult {
+export function useQueriesActivityData(database: string): UseQueriesActivityDataResult {
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const shouldRefresh = autoRefreshInterval;
 
     // Respect GraphShardExists if explicitly false for the specific tenant
-    const graphShardExists = useTypedSelector((state) => selectGraphShardExists(state, tenantName));
+    const graphShardExists = useTypedSelector((state) => selectGraphShardExists(state, database));
     const skipCharts = graphShardExists === false;
 
     const {data: runningQueriesData} = topQueriesApi.useGetRunningQueriesQuery(
         {
-            database: tenantName,
+            database,
             filters: {},
         },
         {pollingInterval: shouldRefresh},
@@ -46,7 +46,7 @@ export function useQueriesActivityData(tenantName: string): UseQueriesActivityDa
         isError: queriesError,
     } = chartApi.useGetChartDataQuery(
         {
-            database: tenantName,
+            database,
             metrics: [{target: 'queries.requests'}],
             timeFrame: QUERIES_TIME_FRAME,
             maxDataPoints: 30,
@@ -56,7 +56,7 @@ export function useQueriesActivityData(tenantName: string): UseQueriesActivityDa
 
     const {data: latencyData} = chartApi.useGetChartDataQuery(
         {
-            database: tenantName,
+            database,
             metrics: [{target: 'queries.latencies.p99'}],
             timeFrame: LATENCIES_TIME_FRAME,
             maxDataPoints: 30,

src/components/ShardsTable/ShardsTable.tsx

@@ -13,14 +13,14 @@ export interface ShardsTableProps
     extends Omit<ResizeableDataTableProps<KeyValueRow>, 'columnsWidthLSKey' | 'columns'> {
     columnsIds: TopShardsColumnId[];
     database: string;
+    databaseFullPath: string;
     overrideColumns?: ShardsColumn[];
-    schemaPath?: string;
 }
 
 export function ShardsTable({
     columnsIds,
-    schemaPath,
     database,
+    databaseFullPath,
     overrideColumns = [],
     ...props
 }: ShardsTableProps) {
@@ -33,14 +33,14 @@ export function ShardsTable({
                     return overridedColumn;
                 }
 
-                const column = shardsColumnIdToGetColumn[id]({database, schemaPath});
+                const column = shardsColumnIdToGetColumn[id]({database, databaseFullPath});
 
                 return {
                     ...column,
                     sortable: isSortableTopShardsColumn(column.name),
                 };
             });
-    }, [columnsIds, database, overrideColumns, schemaPath]);
+    }, [columnsIds, database, overrideColumns, databaseFullPath]);
 
     return (
         <ResizeableDataTable

src/components/ShardsTable/columns.tsx

@@ -13,14 +13,14 @@ import {TOP_SHARDS_COLUMNS_IDS, TOP_SHARDS_COLUMNS_TITLES} from './constants';
 import type {GetShardsColumn} from './types';
 import {prepareDateTimeValue} from './utils';
 
-export const getPathColumn: GetShardsColumn = ({schemaPath = ''}) => {
+export const getPathColumn: GetShardsColumn = ({databaseFullPath = ''}) => {
     return {
         name: TOP_SHARDS_COLUMNS_IDS.Path,
         header: TOP_SHARDS_COLUMNS_TITLES.Path,
         render: ({row}) => {
             // row.RelativePath - relative schema path without start slash
             return (
-                <LinkToSchemaObject path={`${schemaPath}/${row.RelativePath}`}>
+                <LinkToSchemaObject path={`${databaseFullPath}/${row.RelativePath}`}>
                     {row.RelativePath}
                 </LinkToSchemaObject>
             );

src/components/ShardsTable/types.ts

@@ -4,4 +4,7 @@ import type {KeyValueRow} from '../../types/api/query';
 
 export type ShardsColumn = Column<KeyValueRow>;
 
-export type GetShardsColumn = (params: {database: string; schemaPath?: string}) => ShardsColumn;
+export type GetShardsColumn = (params: {
+    database: string;
+    databaseFullPath?: string;
+}) => ShardsColumn;

src/components/VDisk/VDisk.tsx

@@ -37,7 +37,7 @@ export const VDisk = ({
 }: VDiskProps) => {
     const database = useDatabaseFromQuery();
     const vDiskPath = getVDiskLink(data, {
-        database: database,
+        database,
     });
 
     return (