Skip to content

Commit 10c5353

Browse files
RaubzeugRaubzeug
committed
fix: relative path usage fixes
1 parent 1a0d0a5 commit 10c5353

File tree

12 files changed

+129
-59
lines changed

12 files changed

+129
-59
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: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ interface DiagnosticsProps {
4949
const b = cn('kv-tenant-diagnostics');
5050

5151
function Diagnostics(props: DiagnosticsProps) {
52-
const {path, database, type, subType} = useCurrentSchema();
52+
const {path, database, type, subType, databaseFullPath} = useCurrentSchema();
5353
const containerRef = React.useRef<HTMLDivElement>(null);
5454
const dispatch = useTypedDispatch();
5555
const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
@@ -58,9 +58,7 @@ function Diagnostics(props: DiagnosticsProps) {
5858

5959
const getDiagnosticsPageLink = useDiagnosticsPageLinkGetter();
6060

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

6563
const hasFeatureFlags = useFeatureFlagsAvailable();
6664
const hasTopicData = useTopicDataAvailable();
@@ -91,27 +89,33 @@ function Diagnostics(props: DiagnosticsProps) {
9189
return (
9290
<DetailedOverview
9391
type={type}
94-
tenantName={tenantName}
92+
tenantName={database}
9593
path={path}
9694
additionalTenantProps={props.additionalTenantProps}
9795
additionalNodesProps={props.additionalNodesProps}
9896
/>
9997
);
10098
}
10199
case TENANT_DIAGNOSTICS_TABS_IDS.schema: {
102-
return <SchemaViewer path={path} tenantName={tenantName} type={type} extended />;
100+
return <SchemaViewer path={path} tenantName={database} type={type} extended />;
103101
}
104102
case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
105-
return <TopQueries tenantName={tenantName} />;
103+
return <TopQueries tenantName={database} />;
106104
}
107105
case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
108-
return <TopShards tenantName={tenantName} path={path} />;
106+
return (
107+
<TopShards
108+
tenantName={database}
109+
path={path}
110+
databaseFullPath={databaseFullPath}
111+
/>
112+
);
109113
}
110114
case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
111115
return (
112116
<Nodes
113117
path={path}
114-
database={tenantName}
118+
database={database}
115119
additionalNodesProps={props.additionalNodesProps}
116120
scrollContainerRef={containerRef}
117121
/>
@@ -122,56 +126,56 @@ function Diagnostics(props: DiagnosticsProps) {
122126
}
123127
case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
124128
return (
125-
<Tablets scrollContainerRef={containerRef} path={path} database={tenantName} />
129+
<Tablets scrollContainerRef={containerRef} path={path} database={database} />
126130
);
127131
}
128132
case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
129-
return <PaginatedStorage database={tenantName} scrollContainerRef={containerRef} />;
133+
return <PaginatedStorage database={database} scrollContainerRef={containerRef} />;
130134
}
131135
case TENANT_DIAGNOSTICS_TABS_IDS.network: {
132136
return (
133137
<NetworkWrapper
134138
path={path}
135-
database={tenantName}
139+
database={database}
136140
additionalNodesProps={props.additionalNodesProps}
137141
scrollContainerRef={containerRef}
138142
/>
139143
);
140144
}
141145
case TENANT_DIAGNOSTICS_TABS_IDS.describe: {
142-
return <Describe path={path} database={tenantName} />;
146+
return <Describe path={path} database={database} />;
143147
}
144148
case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
145-
return <HotKeys path={path} database={tenantName} />;
149+
return <HotKeys path={path} database={database} />;
146150
}
147151
case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
148-
return <Heatmap path={path} database={tenantName} />;
152+
return <Heatmap path={path} database={database} />;
149153
}
150154
case TENANT_DIAGNOSTICS_TABS_IDS.consumers: {
151-
return <Consumers path={path} database={tenantName} type={type} />;
155+
return <Consumers path={path} database={database} type={type} />;
152156
}
153157
case TENANT_DIAGNOSTICS_TABS_IDS.partitions: {
154-
return <Partitions path={path} database={tenantName} />;
158+
return <Partitions path={path} database={database} />;
155159
}
156160
case TENANT_DIAGNOSTICS_TABS_IDS.topicData: {
157161
return (
158162
<TopicData
159163
key={path}
160164
path={path}
161-
database={tenantName}
165+
database={database}
162166
scrollContainerRef={containerRef}
163167
/>
164168
);
165169
}
166170
case TENANT_DIAGNOSTICS_TABS_IDS.configs: {
167-
return <Configs database={tenantName} />;
171+
return <Configs database={database} />;
168172
}
169173
case TENANT_DIAGNOSTICS_TABS_IDS.operations: {
170-
return <Operations database={tenantName} scrollContainerRef={containerRef} />;
174+
return <Operations database={database} scrollContainerRef={containerRef} />;
171175
}
172176
case TENANT_DIAGNOSTICS_TABS_IDS.backups: {
173177
return uiFactory.renderBackups?.({
174-
database: tenantName,
178+
database,
175179
scrollContainerRef: containerRef,
176180
});
177181
}
@@ -206,7 +210,7 @@ function Diagnostics(props: DiagnosticsProps) {
206210

207211
useScrollPosition(
208212
containerRef,
209-
`tenant-diagnostics-${tenantName}-${activeTab?.id}`,
213+
`tenant-diagnostics-${database}-${activeTab?.id}`,
210214
activeTab?.id === TENANT_DIAGNOSTICS_TABS_IDS.overview,
211215
);
212216

‎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)