fix(Overview): format & group table info in overview

Author: ariser

src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -60,20 +60,21 @@ function DetailedOverview(props: DetailedOverviewProps) {
         const isTenant = tenantName === currentSchemaPath;
         return (
             <div className={b()}>
-                <div className={b('section')}>
-                    {!isTenant && (
-                        <Overview type={type} tenantName={tenantName} />
-                    )}
-                    {isTenant && <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo}/>}
-                </div>
-                {isTenant && (
-                    <div className={b('section')}>
-                        <Healthcheck
-                            tenant={tenantName}
-                            preview={true}
-                            showMoreHandler={openModalHandler}
-                        />
-                    </div>
+                {isTenant ? (
+                    <>
+                        <div className={b('section')}>
+                            <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo} />
+                        </div>
+                        <div className={b('section')}>
+                            <Healthcheck
+                                tenant={tenantName}
+                                preview={true}
+                                showMoreHandler={openModalHandler}
+                            />
+                        </div>
+                    </>
+                ) : (
+                    <Overview type={type} tenantName={tenantName} />
                 )}
             </div>
         );

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

@@ -3,63 +3,153 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import './SchemaInfoViewer.scss';
 
-import {formatCPU, formatBytes} from '../../../../utils';
+import {formatCPU, formatBytes, formatNumber, formatBps} from '../../../../utils';
 
-import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
+import {InfoViewer, createInfoFormatter} from '../../../../components/InfoViewer';
 
 const b = cn('schema-info-viewer');
 
+const formatTabletMetricsItem = createInfoFormatter({
+    values: {
+        CPU: formatCPU,
+        Memory: formatBytes,
+        Storage: formatBytes,
+        Network: formatBps,
+        ReadThroughput: formatBps,
+        WriteThroughput: formatBps,
+    },
+    defaultValueFormatter: formatNumber,
+});
+
+const formatTableStatsItem = createInfoFormatter({
+    values: {
+        DataSize: formatBytes,
+        IndexSize: formatBytes,
+        LastAccessTime: (value) => value > 0 ? new Date(Number(value)).toUTCString() : 'N/A',
+        LastUpdateTime: (value) => value > 0 ? new Date(Number(value)).toUTCString() : 'N/A',
+    },
+    defaultValueFormatter: formatNumber,
+});
+
+const formatTableStats = (fields) => Object.entries(fields)
+    .map(([label, value]) => formatTableStatsItem(label, value))
+    .filter(({value}) => Boolean(value));
+
 class SchemaInfoViewer extends React.Component {
     static propTypes = {
         data: PropTypes.object.isRequired,
     };
-    formatTabletMetricsValue = (key, value) => {
-        if (key === 'CPU') {
-            return formatCPU(value);
-        } else if (key === 'Memory' || key === 'Storage') {
-            return formatBytes(value);
-        } else {
-            return value;
+
+    renderItem(itemData, title) {
+        if (!Array.isArray(itemData) || !itemData.length) {
+            return null;
         }
-    };
+
+        return (
+            <div className={b('item')}>
+                <InfoViewer
+                    title={title}
+                    info={itemData}
+                />
+            </div>
+        );
+    }
+
+    renderContent(data) {
+        const {PathDescription = {}} = data;
+        const {TableStats = {}, TabletMetrics = {}} = PathDescription;
+        const {
+            PartCount,
+            RowCount,
+            DataSize,
+            IndexSize,
+
+            LastAccessTime,
+            LastUpdateTime,
+
+            ImmediateTxCompleted,
+            PlannedTxCompleted,
+            TxRejectedByOverload,
+            TxRejectedBySpace,
+            TxCompleteLagMsec,
+            InFlightTxCount,
+
+            RowUpdates,
+            RowDeletes,
+            RowReads,
+            RangeReads,
+            RangeReadRows,
+
+            ...restTableStats
+        } = TableStats;
+
+        const tableStatsInfo = [
+            formatTableStats({
+                PartCount,
+                RowCount,
+                DataSize,
+                IndexSize,
+            }),
+            formatTableStats({
+                LastAccessTime,
+                LastUpdateTime,
+            }),
+            formatTableStats({
+                ImmediateTxCompleted,
+                PlannedTxCompleted,
+                TxRejectedByOverload,
+                TxRejectedBySpace,
+                TxCompleteLagMsec,
+                InFlightTxCount,
+            }),
+            formatTableStats({
+                RowUpdates,
+                RowDeletes,
+                RowReads,
+                RangeReads,
+                RangeReadRows,
+            }),
+            formatTableStats(restTableStats),
+        ];
+
+        const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
+            formatTabletMetricsItem(key, TabletMetrics[key])
+        );
+
+        if ([
+            tabletMetricsInfo,
+            tableStatsInfo.flat(),
+        ].flat().length === 0) {
+            return (
+                <div className={b('item')}>Empty</div>
+            );
+        }
+
+        return (
+            <div className={b('row')}>
+                {tabletMetricsInfo.length > 0 ? (
+                    <div className={b('col')}>
+                        {this.renderItem(tabletMetricsInfo, 'Tablet Metrics')}
+                    </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;
 
         if (data) {
-            const {PathDescription = {}} = data;
-            const {TableStats = {}, TabletMetrics = {}} = PathDescription;
-            const {PartCount, ...restTableStats} = TableStats;
-
-            const priorityInfo = [{
-                label: 'PartCount',
-                value: PartCount,
-            }].filter(({value}) => value !== undefined);
-
-            const tableStatsInfo = Object.keys(restTableStats).map((key) => ({
-                label: key,
-                value: TableStats[key].toString(),
-            }));
-
-            const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) => ({
-                label: key,
-                value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
-            }));
-
-            const generalInfo = [
-                ...priorityInfo,
-                ...tabletMetricsInfo,
-                ...tableStatsInfo,
-            ];
- 
             return (
                 <div className={b()}>
-                    <div className={b('item')}>
-                        {generalInfo.length ? (
-                            <InfoViewer info={generalInfo}></InfoViewer>
-                        ) : (
-                            <div>Empty</div>
-                        )}
-                    </div>
+                    {this.renderContent(data)}
                 </div>
             );
         } else {

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

@@ -1,6 +1,24 @@
 .schema-info-viewer {
     overflow: auto;
 
+    &__row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    &__col {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        & + & {
+            margin-left: 50px;
+        }
+    }
+
     &__item {
         margin-bottom: 20px;
 

src/types/api/schema.ts

@@ -16,7 +16,7 @@ export interface TEvDescribeSchemeResult {
     PathOwnerId?: string;
 }
 
-enum EStatus  {
+enum EStatus {
     StatusSuccess = 'StatusSuccess',
     StatusAccepted = 'StatusAccepted',
     StatusPathDoesNotExist = 'StatusPathDoesNotExist',
@@ -48,7 +48,7 @@ interface TPathDescription {
 
     // for table
     Table?: unknown;
-    TableStats?: unknown;
+    TableStats?: TTableStats;
     TabletMetrics?: unknown;
     TablePartitions?: unknown[];
 
@@ -82,6 +82,82 @@ interface TDirEntry {
     Version?: TPathVersion;
 }
 
+interface TTableStats {
+    /** uint64 */
+    DataSize?: string;
+    /** uint64 */
+    RowCount?: string;
+    /** uint64 */
+    IndexSize?: string;
+    /** uint64 */
+    InMemSize?: string;
+
+    /**
+     * uint64
+     * unix time in millisec
+     */
+    LastAccessTime?: string;
+    /**
+     * uint64
+     * unix time in millisec
+     */
+    LastUpdateTime?: string;
+
+    RowCountHistogram?: THistogram;
+    DataSizeHistogram?: THistogram;
+
+    /** uint64 */
+    ImmediateTxCompleted?: string;
+    /** uint64 */
+    PlannedTxCompleted?: string;
+    /** uint64 */
+    TxRejectedByOverload?: string;
+    /** uint64 */
+    TxRejectedBySpace?: string;
+    /** uint64 */
+    TxCompleteLagMsec?: string;
+    /** uint64 */
+    InFlightTxCount?: string;
+
+    /** uint64 */
+    RowUpdates?: string;
+    /** uint64 */
+    RowDeletes?: string;
+    /** uint64 */
+    RowReads?: string;
+    /** uint64 */
+    RangeReads?: string;
+    /** uint64 */
+    RangeReadRows?: string;
+
+    /** uint64 */
+    PartCount?: string;
+
+    KeyAccessSample?: THistogram;
+
+    /** uint64 */
+    SearchHeight?: string;
+
+    /**
+     * uint64
+     * seconds since epoch
+     */
+    LastFullCompactionTs?: string;
+
+    // i.e. this shard lent to other shards
+    HasLoanedParts?: boolean;
+}
+
+interface THistogram {
+    Buckets?: THistogramBucket[];
+}
+
+interface THistogramBucket {
+    Key?: string;
+    /** uint64 */
+    Value?: string;
+}
+
 export interface TIndexDescription {
     Name?: string;
     /** uint64 */
@@ -111,7 +187,7 @@ export enum EPathType {
 
     EPathTypeSubDomain = 'EPathTypeSubDomain',
 
-    EPathTypeTableIndex = 'EPathTypeTableIndex', 
+    EPathTypeTableIndex = 'EPathTypeTableIndex',
     EPathTypeExtSubDomain = 'EPathTypeExtSubDomain',
 
     EPathTypeColumnStore = 'EPathTypeColumnStore',

src/utils/index.js

@@ -12,6 +12,8 @@ export const formatBytes = (bytes) => {
     return numeral(bytes).format('0 ib').replace('i', '');
 };
 
+export const formatBps = (bytes) => formatBytes(bytes) + '/s';
+
 export const formatBytesToGigabyte = (bytes) => {
     return `${Math.floor(bytes / GIGABYTE)} GB`;
 };