fix(TableInfo): update column table info (#1056)

Author: artemmufazalov

src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json

@@ -1,5 +1,20 @@
 {
   "tableStats": "Table Stats",
   "tabletMetrics": "Tablet Metrics",
-  "partitionConfig": "Partition Config"
+  "partitionConfig": "Partition Config",
+
+  "label.ttl": "TTL for rows",
+  "value.ttl": "column: '{{columnName}}', expire after: {{expireTime}}",
+  "label.standalone": "Standalone",
+  "label.partitioning": "Partitioning",
+  "label.partitioning-by-size": "Partitioning by size",
+  "value.partitioning-by-size.enabled": "Enabled, split size: {{size}}",
+  "label.partitioning-by-load": "Partitioning by load",
+  "label.partitions-min": "Min number of partitions",
+  "label.partitions-max": "Max number of partitions",
+  "label.read-replicas": "Read replicas (followers)",
+  "label.bloom-filter": "Bloom filter",
+
+  "enabled": "Enabled",
+  "disabled": "Disabled"
 }

src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/index.ts

@@ -1,8 +1,7 @@
 import {registerKeysets} from '../../../../../../utils/i18n';
 
 import en from './en.json';
-import ru from './ru.json';
 
 const COMPONENT = 'ydb-diagnostics-overview-table-info';
 
-export default registerKeysets(COMPONENT, {ru, en});
+export default registerKeysets(COMPONENT, {en});

src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/ru.json

@@ -1,3 +1,6 @@
+import {Text} from '@gravity-ui/uikit';
+import omit from 'lodash/omit';
+
 import type {InfoViewerItem} from '../../../../../components/InfoViewer';
 import {formatObject} from '../../../../../components/InfoViewer';
 import {
@@ -17,6 +20,8 @@ import {EPathType} from '../../../../../types/api/schema';
 import {formatBytes, formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
 import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
 
+import i18n from './i18n';
+
 const isInStoreColumnTable = (table: TColumnTableDescription) => {
     // SchemaPresetId could be 0
     return table.SchemaPresetName && table.SchemaPresetId !== undefined;
@@ -25,14 +30,12 @@ const isInStoreColumnTable = (table: TColumnTableDescription) => {
 const prepareTTL = (ttl: TTTLSettings | TColumnDataLifeCycle) => {
     // ExpireAfterSeconds could be 0
     if (ttl.Enabled && ttl.Enabled.ColumnName && ttl.Enabled.ExpireAfterSeconds !== undefined) {
-        const value = `column: '${
-            ttl.Enabled.ColumnName
-        }', expire after: ${formatDurationToShortTimeFormat(
-            ttl.Enabled.ExpireAfterSeconds * 1000,
-            1,
-        )}`;
-
-        return {label: 'TTL for rows', value};
+        const value = i18n('value.ttl', {
+            columnName: ttl.Enabled.ColumnName,
+            expireTime: formatDurationToShortTimeFormat(ttl.Enabled.ExpireAfterSeconds * 1000, 1),
+        });
+
+        return {label: i18n('label.ttl'), value};
     }
     return undefined;
 };
@@ -41,12 +44,22 @@ function prepareColumnTableGeneralInfo(columnTable: TColumnTableDescription) {
     const columnTableGeneralInfo: InfoViewerItem[] = [];
 
     columnTableGeneralInfo.push({
-        label: 'Standalone',
+        label: i18n('label.standalone'),
         value: String(!isInStoreColumnTable(columnTable)),
     });
 
-    if (columnTable.Sharding && columnTable.Sharding.HashSharding) {
-        columnTableGeneralInfo.push({label: 'Sharding', value: 'hash'});
+    if (columnTable.Sharding?.HashSharding?.Columns) {
+        const columns = columnTable.Sharding.HashSharding.Columns.join(', ');
+        const content = `PARTITION BY HASH(${columns})`;
+
+        columnTableGeneralInfo.push({
+            label: i18n('label.partitioning'),
+            value: (
+                <Text variant="code-2" wordBreak="break-word">
+                    {content}
+                </Text>
+            ),
+        });
     }
 
     if (columnTable.TtlSettings) {
@@ -66,25 +79,27 @@ const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings?
 
     const partitioningBySize =
         PartitioningPolicy.SizeToSplit && Number(PartitioningPolicy.SizeToSplit) > 0
-            ? `Enabled, split size: ${formatBytes(PartitioningPolicy.SizeToSplit)}`
-            : 'Disabled';
+            ? i18n('value.partitioning-by-size.enabled', {
+                  size: formatBytes(PartitioningPolicy.SizeToSplit),
+              })
+            : i18n('disabled');
 
     const partitioningByLoad = PartitioningPolicy.SplitByLoadSettings?.Enabled
-        ? 'Enabled'
-        : 'Disabled';
+        ? i18n('enabled')
+        : i18n('disabled');
 
     generalTableInfo.push(
-        {label: 'Partitioning by size', value: partitioningBySize},
-        {label: 'Partitioning by load', value: partitioningByLoad},
+        {label: i18n('label.partitioning-by-size'), value: partitioningBySize},
+        {label: i18n('label.partitioning-by-load'), value: partitioningByLoad},
         {
-            label: 'Min number of partitions',
+            label: i18n('label.partitions-min'),
             value: formatNumber(PartitioningPolicy.MinPartitionsCount || 0),
         },
     );
 
     if (PartitioningPolicy.MaxPartitionsCount) {
         generalTableInfo.push({
-            label: 'Max number of partitions',
+            label: i18n('label.partitions-max'),
             value: formatNumber(PartitioningPolicy.MaxPartitionsCount),
         });
     }
@@ -101,7 +116,7 @@ const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings?
             readReplicasConfig = `ANY_AZ: ${FollowerCount}`;
         }
 
-        generalTableInfo.push({label: 'Read replicas (followers)', value: readReplicasConfig});
+        generalTableInfo.push({label: i18n('label.read-replicas'), value: readReplicasConfig});
     }
 
     if (TTLSettings) {
@@ -112,8 +127,8 @@ const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings?
     }
 
     generalTableInfo.push({
-        label: 'Bloom filter',
-        value: EnableFilterByKey ? 'Enabled' : 'Disabled',
+        label: i18n('label.bloom-filter'),
+        value: EnableFilterByKey ? i18n('enabled') : i18n('disabled'),
     });
 
     return generalTableInfo;
@@ -200,8 +215,15 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp
         }),
     ];
 
-    //@ts-expect-error
-    const tabletMetricsInfo = formatObject(formatTabletMetricsItem, TabletMetrics);
+    const tabletMetricsInfo = formatObject(
+        formatTabletMetricsItem,
+        omit(TabletMetrics, [
+            'GroupReadIops',
+            'GroupReadThroughput',
+            'GroupWriteIops',
+            'GroupWriteThroughput',
+        ]),
+    );
 
     let partitionConfigInfo: InfoViewerItem[] = [];
 

src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts renamed to src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx

@@ -9,6 +9,7 @@ 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';
@@ -28,7 +29,11 @@ import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
     DEFAULT_SIZE_TENANT_SUMMARY_KEY,
 } from '../../../utils/constants';
-import {formatDateTime, formatSecondsToHours} from '../../../utils/dataFormatters/dataFormatters';
+import {
+    formatDateTime,
+    formatNumber,
+    formatSecondsToHours,
+} from '../../../utils/dataFormatters/dataFormatters';
 import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
 import {Acl} from '../Acl/Acl';
 import {EntityTitle} from '../EntityTitle/EntityTitle';
@@ -154,11 +159,26 @@ export function ObjectSummary({
 
         overview.push({
             label: i18n('summary.created'),
-            value: formatDateTime(CreateStep, ''),
+            value: formatDateTime(CreateStep),
         });
 
         const {PathDescription} = currentObjectData;
 
+        if (PathDescription?.TableStats) {
+            const {DataSize, RowCount} = PathDescription.TableStats;
+
+            overview.push(
+                {
+                    label: i18n('summary.data-size'),
+                    value: toFormattedSize(DataSize),
+                },
+                {
+                    label: i18n('summary.row-count'),
+                    value: formatNumber(RowCount),
+                },
+            );
+        }
+
         const title = <EntityTitle data={PathDescription} />;
 
         const getDatabaseOverview = () => [

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -12,6 +12,8 @@
   "summary.id": "Id",
   "summary.version": "Version",
   "summary.created": "Created",
+  "summary.data-size": "Data size",
+  "summary.row-count": "Row count",
   "summary.partitions": "Partitions count",
   "summary.paths": "Paths",
   "summary.shards": "Shards",

src/containers/Tenant/i18n/en.json

@@ -68,7 +68,7 @@ const pathTypeToEntityName: Record<EPathType, string | undefined> = {
     [EPathType.EPathTypeTable]: 'Table',
     [EPathType.EPathTypeTableIndex]: 'Secondary Index',
     [EPathType.EPathTypeColumnStore]: 'Tablestore',
-    [EPathType.EPathTypeColumnTable]: 'Columntable',
+    [EPathType.EPathTypeColumnTable]: 'Column-oriented table',
     [EPathType.EPathTypeCdcStream]: 'Changefeed',
     [EPathType.EPathTypePersQueueGroup]: 'Topic',
 

src/containers/Tenant/utils/schema.ts

@@ -135,14 +135,10 @@ export const formatCPUWithLabel = (value?: number) => {
     return `${localizedCores} ${i18n('format-cpu.cores', {count: cores})}`;
 };
 
-export const formatDateTime = (value?: number | string, defaultValue = 'N/A') => {
-    if (!isNumeric(value)) {
-        return '';
-    }
-
+export const formatDateTime = (value?: number | string, defaultValue = '') => {
     const formattedData = dateTimeParse(Number(value))?.format('YYYY-MM-DD HH:mm');
 
-    return Number(value) > 0 && formattedData ? formattedData : defaultValue;
+    return formattedData ?? defaultValue;
 };
 
 export const calcUptimeInSeconds = (milliseconds: number | string) => {