Skip to content

Commit 794c6a9

Browse files
RaubzeugRaubzeug
committed
fix: relative path usage fixes
1 parent aa861e2 commit 794c6a9

File tree

12 files changed

+128
-58
lines changed

12 files changed

+128
-58
lines changed

‎src/containers/Header/Header.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ function Header() {
5656
const {title: clusterTitle} = useClusterBaseInfo();
5757

5858
const database = useDatabaseFromQuery();
59+
5960
const clusterName = useClusterNameFromQuery();
6061

6162
const location = useLocation();
@@ -116,7 +117,10 @@ function Header() {
116117

117118
if (isDatabasePage && database) {
118119
elements.push(
119-
<Button view={'flat'} onClick={() => getConnectToDBDialog({database})}>
120+
<Button
121+
view={'flat'}
122+
onClick={() => getConnectToDBDialog({database: databaseData?.Name || database})}
123+
>
120124
<Icon data={PlugConnection} />
121125
{headerKeyset('connect')}
122126
</Button>,

‎src/containers/Tenant/Diagnostics/Diagnostics.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ interface DiagnosticsProps {
5050
const b = cn('kv-tenant-diagnostics');
5151

5252
function Diagnostics(props: DiagnosticsProps) {
53-
const {path, database, type, subType} = useCurrentSchema();
53+
const {path, database, type, subType, databaseFullPath} = useCurrentSchema();
5454
const containerRef = React.useRef<HTMLDivElement>(null);
5555
const dispatch = useTypedDispatch();
5656
const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
@@ -59,8 +59,6 @@ function Diagnostics(props: DiagnosticsProps) {
5959

6060
const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
6161

62-
const tenantName = isDatabaseEntityType(type) ? path : database;
63-
6462
const {controlPlane, databaseType} = useTenantBaseInfo(isDatabaseEntityType(type) ? path : '');
6563

6664
const hasFeatureFlags = useFeatureFlagsAvailable();
@@ -93,27 +91,33 @@ function Diagnostics(props: DiagnosticsProps) {
9391
return (
9492
<DetailedOverview
9593
type={type}
96-
tenantName={tenantName}
94+
tenantName={database}
9795
path={path}
9896
additionalTenantProps={props.additionalTenantProps}
9997
additionalNodesProps={props.additionalNodesProps}
10098
/>
10199
);
102100
}
103101
case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
104-
return <SchemaViewer path={path} tenantName={tenantName} type={type} extended />;
102+
return <SchemaViewer path={path} tenantName={database} type={type} extended />;
105103
}
106104
case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
107-
return <TopQueries tenantName={tenantName} />;
105+
return <TopQueries tenantName={database} />;
108106
}
109107
case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
110-
return <TopShards tenantName={tenantName} path={path} />;
108+
return (
109+
<TopShards
110+
tenantName={database}
111+
path={path}
112+
databaseFullPath={databaseFullPath}
113+
/>
114+
);
111115
}
112116
case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
113117
return (
114118
<Nodes
115119
path={path}
116-
database={tenantName}
120+
database={database}
117121
additionalNodesProps={props.additionalNodesProps}
118122
scrollContainerRef={containerRef}
119123
/>
@@ -124,56 +128,56 @@ function Diagnostics(props: DiagnosticsProps) {
124128
}
125129
case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
126130
return (
127-
<Tablets scrollContainerRef={containerRef} path={path} database={tenantName} />
131+
<Tablets scrollContainerRef={containerRef} path={path} database={database} />
128132
);
129133
}
130134
case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
131-
return <PaginatedStorage database={tenantName} scrollContainerRef={containerRef} />;
135+
return <PaginatedStorage database={database} scrollContainerRef={containerRef} />;
132136
}
133137
case TENANT_DIAGNOSTICS_TABS_IDS.network: {
134138
return (
135139
<NetworkWrapper
136140
path={path}
137-
database={tenantName}
141+
database={database}
138142
additionalNodesProps={props.additionalNodesProps}
139143
scrollContainerRef={containerRef}
140144
/>
141145
);
142146
}
143147
case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
144-
return <Describe path={path} database={tenantName} />;
148+
return <Describe path={path} database={database} />;
145149
}
146150
case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
147-
return <HotKeys path={path} database={tenantName} />;
151+
return <HotKeys path={path} database={database} />;
148152
}
149153
case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
150-
return <Heatmap path={path} database={tenantName} />;
154+
return <Heatmap path={path} database={database} />;
151155
}
152156
case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
153-
return <Consumers path={path} database={tenantName} type={type} />;
157+
return <Consumers path={path} database={database} type={type} />;
154158
}
155159
case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
156-
return <Partitions path={path} database={tenantName} />;
160+
return <Partitions path={path} database={database} />;
157161
}
158162
case TENANT_DIAGNOSTICS_TABS_IDS.topicData: {
159163
return (
160164
<TopicData
161165
key={path}
162166
path={path}
163-
database={tenantName}
167+
database={database}
164168
scrollContainerRef={containerRef}
165169
/>
166170
);
167171
}
168172
case TENANT_DIAGNOSTICS_TABS_IDS.configs: {
169-
return <Configs database={tenantName} />;
173+
return <Configs database={database} />;
170174
}
171175
case TENANT_DIAGNOSTICS_TABS_IDS.operations: {
172-
return <Operations database={tenantName} scrollContainerRef={containerRef} />;
176+
return <Operations database={database} scrollContainerRef={containerRef} />;
173177
}
174178
case TENANT_DIAGNOSTICS_TABS_IDS.backups: {
175179
return uiFactory.renderBackups?.({
176-
database: tenantName,
180+
database,
177181
scrollContainerRef: containerRef,
178182
});
179183
}
@@ -208,7 +212,7 @@ function Diagnostics(props: DiagnosticsProps) {
208212

209213
useScrollPosition(
210214
containerRef,
211-
`tenant-diagnostics-${tenantName}-${activeTab?.id}`,
215+
`tenant-diagnostics-${database}-${activeTab?.id}`,
212216
activeTab?.id === TENANT_DIAGNOSTICS_TABS_IDS.overview,
213217
);
214218

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,10 @@ function fillDateRangeFor(value: ShardsWorkloadFilters) {
4242
interface TopShardsProps {
4343
tenantName: string;
4444
path: string;
45+
databaseFullPath: string;
4546
}
4647

47-
export const TopShards = ({tenantName, path}: TopShardsProps) => {
48+
export const TopShards = ({tenantName, path, databaseFullPath}: TopShardsProps) => {
4849
const ShardsTable = useComponent('ShardsTable');
4950

5051
const dispatch = useTypedDispatch();
@@ -71,16 +72,24 @@ export const TopShards = ({tenantName, path}: TopShardsProps) => {
7172

7273
const {tableSort, handleTableSort, backendSort} = useTopShardSort();
7374

75+
let normalizedPath = path;
76+
77+
if (tenantName !== databaseFullPath) {
78+
const shrinkedPath = path.startsWith(tenantName) ? path.slice(tenantName.length) : path;
79+
normalizedPath = databaseFullPath + shrinkedPath;
80+
}
81+
7482
const {
7583
currentData: result,
7684
isFetching,
7785
error,
7886
} = shardApi.useSendShardQueryQuery(
7987
{
8088
database: tenantName,
81-
path: path,
89+
path: normalizedPath,
8290
sortOrder: backendSort,
8391
filters,
92+
databaseFullPath,
8493
},
8594
{pollingInterval: autoRefreshInterval},
8695
);

‎src/containers/Tenant/ObjectSummary/ObjectSummary.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
} from '@gravity-ui/uikit';
1212
import qs from 'qs';
1313
import {useLocation} from 'react-router-dom';
14-
import {StringParam, useQueryParam} from 'use-query-params';
1514

1615
import {AsyncReplicationState} from '../../../components/AsyncReplicationState';
1716
import {toFormattedSize} from '../../../components/FormattedBytes/utils';
@@ -37,6 +36,7 @@ import {EntityTitle} from '../EntityTitle/EntityTitle';
3736
import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
3837
import {useCurrentSchema} from '../TenantContext';
3938
import {TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups, getTenantPath} from '../TenantPages';
39+
import {useTenantQueryParams} from '../useTenantQueryParams';
4040
import {getSummaryControls} from '../utils/controls';
4141
import {
4242
PaneVisibilityActionTypes,
@@ -76,9 +76,10 @@ export function ObjectSummary({
7676
onExpandSummary,
7777
isCollapsed,
7878
}: ObjectSummaryProps) {
79-
const {path, database: tenantName, type, subType} = useCurrentSchema();
79+
const {path, database, type, subType, databaseFullPath} = useCurrentSchema();
80+
8081
const dispatch = useTypedDispatch();
81-
const [, setCurrentPath] = useQueryParam('schema', StringParam);
82+
const {handleSchemaChange} = useTenantQueryParams();
8283
const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = React.useReducer(
8384
paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED),
8485
undefined,
@@ -97,7 +98,7 @@ export function ObjectSummary({
9798

9899
const {currentData: currentObjectData} = overviewApi.useGetOverviewQuery({
99100
path,
100-
database: tenantName,
101+
database,
101102
});
102103
const currentSchemaData = currentObjectData?.PathDescription?.Self;
103104

@@ -366,7 +367,7 @@ export function ObjectSummary({
366367
const renderTabContent = () => {
367368
switch (summaryTab) {
368369
case TENANT_SUMMARY_TABS_IDS.schema: {
369-
return <SchemaViewer type={type} path={path} tenantName={tenantName} />;
370+
return <SchemaViewer type={type} path={path} tenantName={database} />;
370371
}
371372
default: {
372373
return renderObjectOverview();
@@ -385,7 +386,7 @@ export function ObjectSummary({
385386
dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.clear);
386387
};
387388

388-
const relativePath = transformPath(path, tenantName);
389+
const relativePath = transformPath(path, database, databaseFullPath);
389390

390391
const renderCommonInfoControls = () => {
391392
const showPreview = isTableType(type) && !isIndexTableType(subType);
@@ -394,7 +395,7 @@ export function ObjectSummary({
394395
{showPreview &&
395396
getSummaryControls(
396397
dispatch,
397-
{setActivePath: setCurrentPath},
398+
{setActivePath: handleSchemaChange},
398399
'm',
399400
)(path, 'preview')}
400401
<ClipboardButton
@@ -447,7 +448,11 @@ export function ObjectSummary({
447448
minSize={[200, 52]}
448449
collapsedSizes={[100, 0]}
449450
>
450-
<ObjectTree tenantName={tenantName} path={path} />
451+
<ObjectTree
452+
tenantName={database}
453+
path={path}
454+
databaseFullPath={databaseFullPath}
455+
/>
451456
<div className={b('info')}>
452457
<div className={b('sticky-top')}>
453458
<div className={b('info-header')}>

‎src/containers/Tenant/ObjectSummary/ObjectTree.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import {StringParam, useQueryParam} from 'use-query-params';
2-
31
import {Loader} from '../../../components/Loader';
42
import {useGetSchemaQuery} from '../../../store/reducers/schema/schema';
3+
import {useTenantQueryParams} from '../useTenantQueryParams';
54

65
import {SchemaTree} from './SchemaTree/SchemaTree';
76
import i18n from './i18n';
87
import {b} from './shared';
98

109
interface ObjectTreeProps {
1110
tenantName: string;
11+
databaseFullPath: string;
1212
path?: string;
1313
}
1414

@@ -20,14 +20,14 @@ function prepareSchemaRootName(name: string | undefined, fallback: string): stri
2020
return fallback.startsWith('/') ? fallback : `/${fallback}`;
2121
}
2222

23-
export function ObjectTree({tenantName, path}: ObjectTreeProps) {
23+
export function ObjectTree({tenantName, path, databaseFullPath}: ObjectTreeProps) {
2424
const {data: tenantData = {}, isLoading} = useGetSchemaQuery({
2525
path: tenantName,
2626
database: tenantName,
2727
});
2828
const pathData = tenantData?.PathDescription?.Self;
2929

30-
const [, setCurrentPath] = useQueryParam('schema', StringParam);
30+
const {handleSchemaChange} = useTenantQueryParams();
3131

3232
if (!pathData && isLoading) {
3333
// If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
@@ -44,13 +44,14 @@ export function ObjectTree({tenantName, path}: ObjectTreeProps) {
4444
<div className={b('tree')}>
4545
{pathData ? (
4646
<SchemaTree
47+
databaseFullPath={databaseFullPath}
4748
rootPath={tenantName}
4849
// for the root pathData.Name contains the same string as tenantName,
4950
// ensure it has the leading slash
5051
rootName={prepareSchemaRootName(pathData.Name, tenantName)}
5152
rootType={pathData.PathType}
5253
currentPath={path}
53-
onActivePathUpdate={setCurrentPath}
54+
onActivePathUpdate={handleSchemaChange}
5455
/>
5556
) : null}
5657
</div>

‎src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,12 @@ interface SchemaTreeProps {
3535
rootType?: EPathType;
3636
currentPath?: string;
3737
onActivePathUpdate: (path: string) => void;
38+
databaseFullPath: string;
3839
}
3940

4041
export function SchemaTree(props: SchemaTreeProps) {
4142
const createDirectoryFeatureAvailable = useCreateDirectoryFeatureAvailable();
42-
const {rootPath, rootName, rootType, currentPath, onActivePathUpdate} = props;
43+
const {rootPath, rootName, rootType, currentPath, onActivePathUpdate, databaseFullPath} = props;
4344
const dispatch = useTypedDispatch();
4445
const input = useTypedSelector(selectUserInput);
4546
const isDirty = useTypedSelector(selectIsDirty);
@@ -137,6 +138,7 @@ export function SchemaTree(props: SchemaTreeProps) {
137138
getConnectToDBDialog,
138139
schemaData: actionsSchemaData,
139140
isSchemaDataLoading: isActionsDataFetching,
141+
databaseFullPath,
140142
},
141143
rootPath,
142144
);
@@ -149,6 +151,7 @@ export function SchemaTree(props: SchemaTreeProps) {
149151
isDirty,
150152
onActivePathUpdate,
151153
rootPath,
154+
databaseFullPath,
152155
]);
153156

154157
return (

‎src/containers/Tenant/ObjectSummary/transformPath.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import {EPathType} from '../../../types/api/schema';
22

3-
export function transformPath(path: string, dbName: string): string {
3+
/**
4+
* Transforms an absolute database object path to a relative path from the specified database.
5+
* @param path - source path to the database object
6+
* @param dbName - database name to make path relative to
7+
* @param databaseFullPath - full database path (defaults to dbName)
8+
* @returns transformed relative path
9+
*/
10+
export function transformPath(path: string, dbName: string, databaseFullPath = dbName): string {
411
// Normalize the path and dbName by removing leading/trailing slashes
512
const normalizedPath = path.replace(/^\/+|\/+$/g, '');
613
const normalizedDbName = dbName.replace(/^\/+|\/+$/g, '');
14+
const normalizedDbFullPath = databaseFullPath.replace(/^\/+|\/+$/g, '');
715

816
if (!normalizedPath.startsWith(normalizedDbName)) {
917
return normalizedPath || '/';
1018
}
1119
if (normalizedPath === normalizedDbName) {
12-
return `/${normalizedPath}`;
20+
return `/${normalizedDbFullPath}`;
1321
}
1422

1523
let result = normalizedPath.slice(normalizedDbName.length);

0 commit comments

Comments
 (0)