diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.scss b/src/containers/Tenant/ObjectSummary/ObjectSummary.scss
index 01439d7db2..f364d1cda9 100644
--- a/src/containers/Tenant/ObjectSummary/ObjectSummary.scss
+++ b/src/containers/Tenant/ObjectSummary/ObjectSummary.scss
@@ -144,4 +144,11 @@
background-color: transparent;
}
}
+ &__overview-title {
+ @include info-viewer-title();
+ }
+ &__overview-item-content {
+ text-align: end;
+ white-space: nowrap;
+ }
}
diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx
index 6786bad418..6e82fce557 100644
--- a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx
+++ b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx
@@ -1,6 +1,7 @@
import React from 'react';
-import {HelpPopover} from '@gravity-ui/components';
+import {DefinitionList, HelpPopover} from '@gravity-ui/components';
+import type {DefinitionListSingleItem} from '@gravity-ui/components/build/esm/components/DefinitionList/types';
import {Flex, Tabs} from '@gravity-ui/uikit';
import qs from 'qs';
import {Link, useLocation} from 'react-router-dom';
@@ -9,8 +10,6 @@ import {StringParam, useQueryParam} from 'use-query-params';
import {AsyncReplicationState} from '../../../components/AsyncReplicationState';
import {ClipboardButton} from '../../../components/ClipboardButton';
import {toFormattedSize} from '../../../components/FormattedBytes/utils';
-import {InfoViewer} from '../../../components/InfoViewer/InfoViewer';
-import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
import SplitPane from '../../../components/SplitPane';
import routes, {createExternalUILink, createHref} from '../../../routes';
@@ -156,28 +155,28 @@ export function ObjectSummary({
}
const {CreateStep, PathType, PathSubType, PathId, PathVersion} = currentSchemaData;
- const overview: InfoViewerItem[] = [];
+ const overview: DefinitionListSingleItem[] = [];
const normalizedType = isDomain(path, PathType)
? 'Domain'
: PathType?.replace(/^EPathType/, '');
- overview.push({label: i18n('field_type'), value: normalizedType});
+ overview.push({name: i18n('field_type'), content: normalizedType});
if (PathSubType !== EPathSubType.EPathSubTypeEmpty) {
overview.push({
- label: i18n('field_subtype'),
- value: PathSubType?.replace(/^EPathSubType/, ''),
+ name: i18n('field_subtype'),
+ content: PathSubType?.replace(/^EPathSubType/, ''),
});
}
- overview.push({label: i18n('field_id'), value: PathId});
+ overview.push({name: i18n('field_id'), content: PathId});
- overview.push({label: i18n('field_version'), value: PathVersion});
+ overview.push({name: i18n('field_version'), content: PathVersion});
overview.push({
- label: i18n('field_created'),
- value: formatDateTime(CreateStep),
+ name: i18n('field_created'),
+ content: formatDateTime(CreateStep),
});
const {PathDescription} = currentObjectData;
@@ -187,18 +186,16 @@ export function ObjectSummary({
overview.push(
{
- label: i18n('field_data-size'),
- value: toFormattedSize(DataSize),
+ name: i18n('field_data-size'),
+ content: toFormattedSize(DataSize),
},
{
- label: i18n('field_row-count'),
- value: formatNumber(RowCount),
+ name: i18n('field_row-count'),
+ content: formatNumber(RowCount),
},
);
}
- const title = ;
-
const getDatabaseOverview = () => {
const {PathsInside, ShardsInside, PathsLimit, ShardsLimit} =
PathDescription?.DomainDescription ?? {};
@@ -215,23 +212,26 @@ export function ObjectSummary({
return [
{
- label: i18n('field_paths'),
- value: paths,
+ name: i18n('field_paths'),
+ content: paths,
},
{
- label: i18n('field_shards'),
- value: shards,
+ name: i18n('field_shards'),
+ content: shards,
},
];
};
- const getPathTypeOverview: Record InfoViewerItem[]) | undefined> = {
+ const getPathTypeOverview: Record<
+ EPathType,
+ (() => DefinitionListSingleItem[]) | undefined
+ > = {
[EPathType.EPathTypeInvalid]: undefined,
[EPathType.EPathTypeDir]: undefined,
[EPathType.EPathTypeTable]: () => [
{
- label: i18n('field_partitions'),
- value: PathDescription?.TablePartitions?.length,
+ name: i18n('field_partitions'),
+ content: PathDescription?.TablePartitions?.length,
},
],
[EPathType.EPathTypeSubDomain]: getDatabaseOverview,
@@ -239,14 +239,15 @@ export function ObjectSummary({
[EPathType.EPathTypeExtSubDomain]: getDatabaseOverview,
[EPathType.EPathTypeColumnStore]: () => [
{
- label: i18n('field_partitions'),
- value: PathDescription?.ColumnStoreDescription?.ColumnShards?.length,
+ name: i18n('field_partitions'),
+ content: PathDescription?.ColumnStoreDescription?.ColumnShards?.length,
},
],
[EPathType.EPathTypeColumnTable]: () => [
{
- label: i18n('field_partitions'),
- value: PathDescription?.ColumnTableDescription?.Sharding?.ColumnShards?.length,
+ name: i18n('field_partitions'),
+ content:
+ PathDescription?.ColumnTableDescription?.Sharding?.ColumnShards?.length,
},
],
[EPathType.EPathTypeCdcStream]: () => {
@@ -254,12 +255,12 @@ export function ObjectSummary({
return [
{
- label: i18n('field_mode'),
- value: Mode?.replace(/^ECdcStreamMode/, ''),
+ name: i18n('field_mode'),
+ content: Mode?.replace(/^ECdcStreamMode/, ''),
},
{
- label: i18n('field_format'),
- value: Format?.replace(/^ECdcStreamFormat/, ''),
+ name: i18n('field_format'),
+ content: Format?.replace(/^ECdcStreamFormat/, ''),
},
];
},
@@ -269,12 +270,12 @@ export function ObjectSummary({
return [
{
- label: i18n('field_partitions'),
- value: pqGroup?.Partitions?.length,
+ name: i18n('field_partitions'),
+ content: pqGroup?.Partitions?.length,
},
{
- label: i18n('field_retention'),
- value: value && formatSecondsToHours(value),
+ name: i18n('field_retention'),
+ content: value && formatSecondsToHours(value),
},
];
},
@@ -290,10 +291,10 @@ export function ObjectSummary({
const dataSourceName = DataSourcePath?.match(/([^/]*)\/*$/)?.[1] || '';
return [
- {label: i18n('field_source-type'), value: SourceType},
+ {name: i18n('field_source-type'), content: SourceType},
{
- label: i18n('field_data-source'),
- value: DataSourcePath && (
+ name: i18n('field_data-source'),
+ content: DataSourcePath && (
@@ -303,8 +304,8 @@ export function ObjectSummary({
},
[EPathType.EPathTypeExternalDataSource]: () => [
{
- label: i18n('field_source-type'),
- value: PathDescription?.ExternalDataSourceDescription?.SourceType,
+ name: i18n('field_source-type'),
+ content: PathDescription?.ExternalDataSourceDescription?.SourceType,
},
],
[EPathType.EPathTypeView]: undefined,
@@ -317,8 +318,8 @@ export function ObjectSummary({
return [
{
- label: i18n('field_state'),
- value: ,
+ name: i18n('field_state'),
+ content: ,
},
];
},
@@ -329,7 +330,21 @@ export function ObjectSummary({
// filter all empty values in according this requirement
// https://github.com/ydb-platform/ydb-embedded-ui/issues/906
- return i.value)} />;
+ const listItems = overview
+ .filter((i) => i.content)
+ .map((el) => ({
+ ...el,
+ content: {el.content}
,
+ multilineName: true,
+ }));
+ return (
+
+
+
+
+
+
+ );
};
const renderTabContent = () => {