fix(SchemaOverview): display entity name

Author: artemmufazalov

src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -12,7 +12,10 @@ import {
     PersQueueGroupInfo,
 } from '../../../../components/InfoViewer/schemaInfo';
 
-import {EPathType, TColumnTableDescription} from '../../../../types/api/schema';
+import {
+    EPathType,
+    TEvDescribeSchemeResult,
+} from '../../../../types/api/schema';
 import {
     isEntityWithMergedImplementation,
     isColumnEntityType,
@@ -34,8 +37,9 @@ import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 
 import './Overview.scss';
 
-function prepareOlapTableGeneral(tableData: TColumnTableDescription = {}, olapStats?: any[]) {
-    const {ColumnShardCount} = tableData;
+function prepareOlapTableGeneral(item?: TEvDescribeSchemeResult, olapStats?: any[]) {
+    const tableData = item?.PathDescription?.ColumnTableDescription;
+
     const Bytes = olapStats?.reduce((acc, el) => {
         acc += parseInt(el.Bytes) || 0;
         return acc;
@@ -51,8 +55,9 @@ function prepareOlapTableGeneral(tableData: TColumnTableDescription = {}, olapSt
 
     return {
         PathDescription: {
+            Self: item?.PathDescription?.Self,
             TableStats: {
-                ColumnShardCount,
+                ColumnShardCount: tableData?.ColumnShardCount,
                 Bytes: Bytes?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
                 Rows: Rows?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
                 Parts: tabletIds?.size ?? 0,
@@ -130,15 +135,12 @@ function Overview({type, tenantName, className}: OverviewProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    const tableSchema =
-        currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
-
     const schemaData = useMemo(() => {
         return isTableType(type) && isColumnEntityType(type)
             ? // process data for ColumnTable
-              prepareOlapTableGeneral(tableSchema, olapStats)
+              prepareOlapTableGeneral(currentItem, olapStats)
             : currentItem;
-    }, [type, tableSchema, olapStats, currentItem]);
+    }, [type, olapStats, currentItem]);
 
     const renderLoader = () => {
         return (

src/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import './SchemaInfoViewer.scss';
 
 import {formatCPU, formatBytes, formatNumber, formatBps, formatDateTime} from '../../../../utils';
 
 import {InfoViewer, createInfoFormatter} from '../../../../components/InfoViewer';
 
+import {getEntityName} from '../../utils';
+
+import './SchemaInfoViewer.scss';
+
 const b = cn('schema-info-viewer');
 
 const formatTabletMetricsItem = createInfoFormatter({
@@ -68,6 +71,8 @@ class SchemaInfoViewer extends React.Component {
 
     renderContent(data) {
         const {PathDescription = {}} = data;
+        const entityName = getEntityName(PathDescription);
+
         const {
             TableStats = {},
             TabletMetrics = {},
@@ -99,13 +104,15 @@ class SchemaInfoViewer extends React.Component {
         } = TableStats;
         const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
 
+        const generalTableInfo = formatTableStats({
+            PartCount,
+            RowCount,
+            DataSize,
+            IndexSize,
+            ...restTableStats,
+        });
+
         const tableStatsInfo = [
-            formatTableStats({
-                PartCount,
-                RowCount,
-                DataSize,
-                IndexSize,
-            }),
             formatTableStats({
                 LastAccessTime,
                 LastUpdateTime,
@@ -125,7 +132,6 @@ class SchemaInfoViewer extends React.Component {
                 RangeReads,
                 RangeReadRows,
             }),
-            formatTableStats(restTableStats),
         ];
 
         const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
@@ -151,36 +157,43 @@ class SchemaInfoViewer extends React.Component {
             );
         }
 
-        if ([tabletMetricsInfo, partitionConfigInfo, tableStatsInfo.flat()].flat().length === 0) {
-            return <div className={b('item')}>Empty</div>;
+        if (
+            [generalTableInfo, tabletMetricsInfo, partitionConfigInfo, tableStatsInfo.flat()].flat()
+                .length === 0
+        ) {
+            return <div className={b('title')}>{entityName}</div>;
         }
 
         return (
-            <div className={b('row')}>
-                {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
+            <div>
+                <div>{this.renderItem(generalTableInfo, entityName)}</div>
+                <div className={b('row')}>
+                    {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
+                        <div className={b('col')}>
+                            {this.renderItem(tabletMetricsInfo, 'Tablet Metrics')}
+                            {this.renderItem(partitionConfigInfo, 'Partition Config')}
+                        </div>
+                    ) : null}
                     <div className={b('col')}>
-                        {this.renderItem(tabletMetricsInfo, 'Tablet Metrics')}
-                        {this.renderItem(partitionConfigInfo, 'Partition Config')}
+                        {tableStatsInfo.map((info, index) => (
+                            <React.Fragment key={index}>
+                                {this.renderItem(info, index === 0 ? 'Table Stats' : undefined)}
+                            </React.Fragment>
+                        ))}
                     </div>
-                ) : null}
-                <div className={b('col')}>
-                    {tableStatsInfo.map((info, index) => (
-                        <React.Fragment key={index}>
-                            {this.renderItem(info, index === 0 ? 'Table Stats' : undefined)}
-                        </React.Fragment>
-                    ))}
                 </div>
             </div>
         );
     }
 
     render() {
         const {data} = this.props;
+        const entityName = getEntityName(data?.PathDescription);
 
         if (data) {
             return <div className={b()}>{this.renderContent(data)}</div>;
         } else {
-            return <div className="error">no schema data</div>;
+            return <div className="error">No {entityName} data</div>;
         }
     }
 }

src/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.scss

@@ -26,4 +26,12 @@
             grid-template-columns: minmax(max-content, 280px);
         }
     }
+
+    &__title {
+        margin: 15px 0 10px;
+
+        font-size: var(--yc-text-body-2-font-size);
+        font-weight: 600;
+        line-height: var(--yc-text-body-2-line-height);
+    }
 }