Skip to content

Commit da59fcd

Browse files
RaubzeugRaubzeug
committed
feat(ObjectSummary): add link to Schema in Diagnostics
1 parent f0742ab commit da59fcd

File tree

9 files changed

+179
-93
lines changed

9 files changed

+179
-93
lines changed

‎src/containers/Tenant/Diagnostics/DiagnosticsPages.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,9 @@ export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, tablets
9898
export const TOPIC_PAGES = [overview, consumers, partitions, nodes, tablets, describe];
9999

100100
export const EXTERNAL_DATA_SOURCE_PAGES = [overview, describe];
101-
export const EXTERNAL_TABLE_PAGES = [overview, describe];
101+
export const EXTERNAL_TABLE_PAGES = [overview, schema, describe];
102102

103-
export const VIEW_PAGES = [overview, describe];
103+
export const VIEW_PAGES = [overview, schema, describe];
104104

105105
// verbose mapping to guarantee correct tabs for new path types
106106
// TS will error when a new type is added but not mapped here

‎src/containers/Tenant/ObjectSummary/ObjectSummary.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../../../styles/mixins.scss';
22

3-
.object-summary {
3+
.ydb-object-summary {
44
position: relative;
55

66
display: flex;
@@ -64,14 +64,13 @@
6464
padding: 8px 12px 16px;
6565
}
6666

67-
&__tab {
68-
margin-right: 40px;
67+
&__tabs-inner {
68+
--g-tabs-border-width: 0;
69+
box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
70+
}
6971

72+
&__tab {
7073
text-decoration: none;
71-
72-
&:first-letter {
73-
text-transform: uppercase;
74-
}
7574
}
7675

7776
&__info {

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

Lines changed: 51 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import {HelpPopover} from '@gravity-ui/components';
4-
import {Tabs} from '@gravity-ui/uikit';
4+
import {Flex, Tabs} from '@gravity-ui/uikit';
55
import qs from 'qs';
66
import {Link, useLocation} from 'react-router-dom';
77
import {StringParam, useQueryParam} from 'use-query-params';
@@ -12,14 +12,12 @@ import {toFormattedSize} from '../../../components/FormattedBytes/utils';
1212
import {InfoViewer} from '../../../components/InfoViewer/InfoViewer';
1313
import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
1414
import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
15-
import {Loader} from '../../../components/Loader';
1615
import SplitPane from '../../../components/SplitPane';
1716
import routes, {createExternalUILink, createHref} from '../../../routes';
1817
import {useGetSchemaQuery} from '../../../store/reducers/schema/schema';
1918
import {TENANT_SUMMARY_TABS_IDS} from '../../../store/reducers/tenant/constants';
2019
import {setSummaryTab} from '../../../store/reducers/tenant/tenant';
2120
import {EPathSubType, EPathType} from '../../../types/api/schema';
22-
import {cn} from '../../../utils/cn';
2321
import {
2422
DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
2523
DEFAULT_SIZE_TENANT_SUMMARY_KEY,
@@ -32,10 +30,8 @@ import {
3230
import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
3331
import {Acl} from '../Acl/Acl';
3432
import {EntityTitle} from '../EntityTitle/EntityTitle';
35-
import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
3633
import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
3734
import {TENANT_INFO_TABS, TENANT_SCHEMA_TAB, TenantTabsGroups} from '../TenantPages';
38-
import i18n from '../i18n';
3935
import {getSummaryControls} from '../utils/controls';
4036
import {
4137
PaneVisibilityActionTypes,
@@ -44,12 +40,14 @@ import {
4440
} from '../utils/paneVisibilityToggleHelpers';
4541
import {isIndexTableType, isTableType} from '../utils/schema';
4642

43+
import {ObjectTree} from './ObjectTree';
44+
import {SchemaActions} from './SchemaActions';
45+
import i18n from './i18n';
46+
import {b} from './shared';
4747
import {transformPath} from './transformPath';
4848

4949
import './ObjectSummary.scss';
5050

51-
const b = cn('object-summary');
52-
5351
const getTenantCommonInfoState = () => {
5452
const collapsed = Boolean(localStorage.getItem(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED));
5553

@@ -113,24 +111,31 @@ export function ObjectSummary({
113111

114112
return (
115113
<div className={b('tabs')}>
116-
<Tabs
117-
size="l"
118-
items={tabsItems}
119-
activeTab={summaryTab}
120-
wrapTo={({id}, node) => {
121-
const path = createHref(routes.tenant, undefined, {
122-
...queryParams,
123-
name: tenantName,
124-
[TenantTabsGroups.summaryTab]: id,
125-
});
126-
return (
127-
<Link to={path} key={id} className={b('tab')}>
128-
{node}
129-
</Link>
130-
);
131-
}}
132-
allowNotSelected
133-
/>
114+
<Flex
115+
className={b('tabs-inner')}
116+
justifyContent="space-between"
117+
alignItems="center"
118+
>
119+
<Tabs
120+
size="l"
121+
items={tabsItems}
122+
activeTab={summaryTab}
123+
wrapTo={({id}, node) => {
124+
const path = createHref(routes.tenant, undefined, {
125+
...queryParams,
126+
name: tenantName,
127+
[TenantTabsGroups.summaryTab]: id,
128+
});
129+
return (
130+
<Link to={path} key={id} className={b('tab')}>
131+
{node}
132+
</Link>
133+
);
134+
}}
135+
allowNotSelected
136+
/>
137+
{summaryTab === TENANT_SUMMARY_TABS_IDS.schema && <SchemaActions />}
138+
</Flex>
134139
</div>
135140
);
136141
};
@@ -143,21 +148,21 @@ export function ObjectSummary({
143148

144149
const overview: InfoViewerItem[] = [];
145150

146-
overview.push({label: i18n('summary.type'), value: PathType?.replace(/^EPathType/, '')});
151+
overview.push({label: i18n('field_type'), value: PathType?.replace(/^EPathType/, '')});
147152

148153
if (PathSubType !== EPathSubType.EPathSubTypeEmpty) {
149154
overview.push({
150-
label: i18n('summary.subtype'),
155+
label: i18n('field_subtype'),
151156
value: PathSubType?.replace(/^EPathSubType/, ''),
152157
});
153158
}
154159

155-
overview.push({label: i18n('summary.id'), value: PathId});
160+
overview.push({label: i18n('field_id'), value: PathId});
156161

157-
overview.push({label: i18n('summary.version'), value: PathVersion});
162+
overview.push({label: i18n('field_version'), value: PathVersion});
158163

159164
overview.push({
160-
label: i18n('summary.created'),
165+
label: i18n('field_created'),
161166
value: formatDateTime(CreateStep),
162167
});
163168

@@ -168,11 +173,11 @@ export function ObjectSummary({
168173

169174
overview.push(
170175
{
171-
label: i18n('summary.data-size'),
176+
label: i18n('field_data-size'),
172177
value: toFormattedSize(DataSize),
173178
},
174179
{
175-
label: i18n('summary.row-count'),
180+
label: i18n('field_row-count'),
176181
value: formatNumber(RowCount),
177182
},
178183
);
@@ -182,11 +187,11 @@ export function ObjectSummary({
182187

183188
const getDatabaseOverview = () => [
184189
{
185-
label: i18n('summary.paths'),
190+
label: i18n('field_paths'),
186191
value: PathDescription?.DomainDescription?.PathsInside,
187192
},
188193
{
189-
label: i18n('summary.shards'),
194+
label: i18n('field_shards'),
190195
value: PathDescription?.DomainDescription?.ShardsInside,
191196
},
192197
];
@@ -196,7 +201,7 @@ export function ObjectSummary({
196201
[EPathType.EPathTypeDir]: undefined,
197202
[EPathType.EPathTypeTable]: () => [
198203
{
199-
label: i18n('summary.partitions'),
204+
label: i18n('field_partitions'),
200205
value: PathDescription?.TablePartitions?.length,
201206
},
202207
],
@@ -205,13 +210,13 @@ export function ObjectSummary({
205210
[EPathType.EPathTypeExtSubDomain]: getDatabaseOverview,
206211
[EPathType.EPathTypeColumnStore]: () => [
207212
{
208-
label: i18n('summary.partitions'),
213+
label: i18n('field_partitions'),
209214
value: PathDescription?.ColumnStoreDescription?.ColumnShards?.length,
210215
},
211216
],
212217
[EPathType.EPathTypeColumnTable]: () => [
213218
{
214-
label: i18n('summary.partitions'),
219+
label: i18n('field_partitions'),
215220
value: PathDescription?.ColumnTableDescription?.Sharding?.ColumnShards?.length,
216221
},
217222
],
@@ -220,11 +225,11 @@ export function ObjectSummary({
220225

221226
return [
222227
{
223-
label: i18n('summary.mode'),
228+
label: i18n('field_mode'),
224229
value: Mode?.replace(/^ECdcStreamMode/, ''),
225230
},
226231
{
227-
label: i18n('summary.format'),
232+
label: i18n('field_format'),
228233
value: Format?.replace(/^ECdcStreamFormat/, ''),
229234
},
230235
];
@@ -235,11 +240,11 @@ export function ObjectSummary({
235240

236241
return [
237242
{
238-
label: i18n('summary.partitions'),
243+
label: i18n('field_partitions'),
239244
value: pqGroup?.Partitions?.length,
240245
},
241246
{
242-
label: i18n('summary.retention'),
247+
label: i18n('field_retention'),
243248
value: value && formatSecondsToHours(value),
244249
},
245250
];
@@ -256,9 +261,9 @@ export function ObjectSummary({
256261
const dataSourceName = DataSourcePath?.match(/([^/]*)\/*$/)?.[1] || '';
257262

258263
return [
259-
{label: i18n('summary.source-type'), value: SourceType},
264+
{label: i18n('field_source-type'), value: SourceType},
260265
{
261-
label: i18n('summary.data-source'),
266+
label: i18n('field_data-source'),
262267
value: DataSourcePath && (
263268
<span title={DataSourcePath}>
264269
<LinkWithIcon title={dataSourceName || ''} url={pathToDataSource} />
@@ -269,7 +274,7 @@ export function ObjectSummary({
269274
},
270275
[EPathType.EPathTypeExternalDataSource]: () => [
271276
{
272-
label: i18n('summary.source-type'),
277+
label: i18n('field_source-type'),
273278
value: PathDescription?.ExternalDataSourceDescription?.SourceType,
274279
},
275280
],
@@ -283,7 +288,7 @@ export function ObjectSummary({
283288

284289
return [
285290
{
286-
label: i18n('summary.state'),
291+
label: i18n('field_state'),
287292
value: <AsyncReplicationState state={state} />,
288293
},
289294
];
@@ -336,7 +341,7 @@ export function ObjectSummary({
336341
<ClipboardButton
337342
text={path}
338343
view="flat-secondary"
339-
title={i18n('summary.copySchemaPath')}
344+
title={i18n('action_copySchemaPath')}
340345
/>
341346
<PaneVisibilityToggleButtons
342347
onCollapse={onCollapseInfoHandler}
@@ -411,41 +416,3 @@ export function ObjectSummary({
411416

412417
return renderContent();
413418
}
414-
415-
function ObjectTree({tenantName, path}: {tenantName: string; path?: string}) {
416-
const {data: tenantData = {}, isLoading} = useGetSchemaQuery({
417-
path: tenantName,
418-
database: tenantName,
419-
});
420-
const pathData = tenantData?.PathDescription?.Self;
421-
422-
const [, setCurrentPath] = useQueryParam('schema', StringParam);
423-
424-
if (!pathData && isLoading) {
425-
// If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
426-
return (
427-
<div>
428-
<Loader />
429-
</div>
430-
);
431-
}
432-
433-
return (
434-
<div className={b('tree-wrapper')}>
435-
<div className={b('tree-header')}>{i18n('summary.navigation')}</div>
436-
<div className={b('tree')}>
437-
{pathData ? (
438-
<SchemaTree
439-
rootPath={tenantName}
440-
// for the root pathData.Name contains the same string as tenantName,
441-
// but without the leading slash
442-
rootName={pathData.Name || tenantName}
443-
rootType={pathData.PathType}
444-
currentPath={path}
445-
onActivePathUpdate={setCurrentPath}
446-
/>
447-
) : null}
448-
</div>
449-
</div>
450-
);
451-
}

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {StringParam, useQueryParam} from 'use-query-params';
2+
3+
import {Loader} from '../../../components/Loader';
4+
import {useGetSchemaQuery} from '../../../store/reducers/schema/schema';
5+
import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
6+
7+
import i18n from './i18n';
8+
import {b} from './shared';
9+
10+
interface ObjectTreeProps {
11+
tenantName: string;
12+
path?: string;
13+
}
14+
15+
export function ObjectTree({tenantName, path}: ObjectTreeProps) {
16+
const {data: tenantData = {}, isLoading} = useGetSchemaQuery({
17+
path: tenantName,
18+
database: tenantName,
19+
});
20+
const pathData = tenantData?.PathDescription?.Self;
21+
22+
const [, setCurrentPath] = useQueryParam('schema', StringParam);
23+
24+
if (!pathData && isLoading) {
25+
// If Loader isn't wrapped with div, SplitPane doesn't calculate panes height correctly
26+
return (
27+
<div>
28+
<Loader />
29+
</div>
30+
);
31+
}
32+
33+
return (
34+
<div className={b('tree-wrapper')}>
35+
<div className={b('tree-header')}>{i18n('title_navigation')}</div>
36+
<div className={b('tree')}>
37+
{pathData ? (
38+
<SchemaTree
39+
rootPath={tenantName}
40+
// for the root pathData.Name contains the same string as tenantName,
41+
// but without the leading slash
42+
rootName={pathData.Name || tenantName}
43+
rootType={pathData.PathType}
44+
currentPath={path}
45+
onActivePathUpdate={setCurrentPath}
46+
/>
47+
) : null}
48+
</div>
49+
</div>
50+
);
51+
}

0 commit comments

Comments
 (0)