fix: small sixes

Author: Raubzeug

src/containers/VDiskPage/VDiskPage.scss

@@ -30,6 +30,6 @@
     }
 
     &__tablets-content {
-        margin-top: 16px;
+        margin-top: var(--g-spacing-4);
     }
 }

src/containers/VDiskPage/VDiskTablets/VDiskTablets.scss

@@ -1,9 +0,0 @@
-.ydb-vdisk-tablets {
-    &__error {
-        padding: 16px;
-
-        text-align: center;
-
-        color: var(--g-color-text-danger);
-    }
-}

src/containers/VDiskPage/VDiskTablets/VDiskTablets.tsx

@@ -1,29 +1,23 @@
 import React from 'react';
 
-import type {Column} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
 import {skipToken} from '@reduxjs/toolkit/query';
 
+import {PageError} from '../../../components/Errors/PageError/PageError';
 import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable';
 import {vDiskApi} from '../../../store/reducers/vdisk/vdisk';
 import type {VDiskBlobIndexItem} from '../../../types/api/vdiskBlobIndex';
-import {cn} from '../../../utils/cn';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {useAutoRefreshInterval} from '../../../utils/hooks';
-
-import {getColumns} from './columns';
+import {safeParseNumber} from '../../../utils/utils';
 import {vDiskPageKeyset} from '../i18n';
 
-import './VDiskTablets.scss';
+import {getColumns} from './columns';
 
-const vDiskTabletsCn = cn('ydb-vdisk-tablets');
 const VDISK_TABLETS_COLUMNS_WIDTH_LS_KEY = 'vdiskTabletsColumnsWidth';
 
-const TABLE_SETTINGS = {
-    displayIndices: false,
-    highlightRows: true,
-    stickyHead: DataTable.MOVING,
-};
+const columns = getColumns();
 
 interface VDiskTabletsProps {
     nodeId?: string | number;
@@ -57,20 +51,20 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
         // Transform the nested structure into flat table rows
         const flatData: VDiskBlobIndexItem[] = [];
 
-        stat.tablets.forEach((tablet: any) => {
+        stat.tablets.forEach((tablet) => {
             const tabletId = tablet.tablet_id;
             if (!tabletId || !Array.isArray(tablet.channels)) {
                 return; // Skip tablets without ID or channels
             }
 
-            tablet.channels.forEach((channel: any, channelIndex: number) => {
+            tablet.channels.forEach((channel, channelIndex) => {
                 // Only include channels that have count and data_size
                 if (channel.count && channel.data_size) {
                     flatData.push({
                         TabletId: tabletId,
                         ChannelId: channelIndex,
-                        Count: parseInt(channel.count, 10) || 0,
-                        Size: parseInt(channel.data_size, 10) || 0,
+                        Count: safeParseNumber(channel.count),
+                        Size: safeParseNumber(channel.data_size),
                     });
                 }
             });
@@ -79,27 +73,21 @@ export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTab
         return flatData;
     }, [currentData]);
 
-    const columns = React.useMemo(() => getColumns(), []);
-
     if (error) {
-        return (
-            <div className={vDiskTabletsCn('error', className)}>
-                Error loading tablet statistics
-            </div>
-        );
+        return <PageError error={error} position="left" size="s" />;
     }
 
     if (loading) {
         return <InfoViewerSkeleton rows={5} />;
     }
 
     return (
-        <div className={vDiskTabletsCn(null, className)}>
+        <div className={className}>
             <ResizeableDataTable
                 columnsWidthLSKey={VDISK_TABLETS_COLUMNS_WIDTH_LS_KEY}
                 data={tableData}
                 columns={columns}
-                settings={TABLE_SETTINGS}
+                settings={DEFAULT_TABLE_SETTINGS}
                 loading={loading}
                 initialSortOrder={{
                     columnId: vDiskPageKeyset('size'),

src/containers/VDiskPage/VDiskTablets/columns.tsx

@@ -1,10 +1,13 @@
 import type {Column} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
+import {isNil} from 'lodash';
 
 import {InternalLink} from '../../../components/InternalLink/InternalLink';
 import {getTabletPagePath} from '../../../routes';
 import type {VDiskBlobIndexItem} from '../../../types/api/vdiskBlobIndex';
-import {formatBytes} from '../../../utils/dataFormatters/dataFormatters';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../utils/constants';
+import {formatBytes, formatNumber} from '../../../utils/dataFormatters/dataFormatters';
+import {safeParseNumber} from '../../../utils/utils';
 import {vDiskPageKeyset} from '../i18n';
 
 export function getColumns(): Column<VDiskBlobIndexItem>[] {
@@ -14,30 +17,40 @@ export function getColumns(): Column<VDiskBlobIndexItem>[] {
             render: ({row}) => {
                 const tabletId = row.TabletId;
                 if (!tabletId) {
-                    return <span>-</span>;
+                    return EMPTY_DATA_PLACEHOLDER;
                 }
-                return <InternalLink to={getTabletPagePath(String(tabletId))}>{tabletId}</InternalLink>;
+                return (
+                    <InternalLink to={getTabletPagePath(String(tabletId))}>{tabletId}</InternalLink>
+                );
             },
-            width: 150,
+            width: 220,
         },
         {
             name: vDiskPageKeyset('channel-id'),
             align: DataTable.RIGHT,
-            render: ({row}) => row.ChannelId ?? '-',
-            width: 100,
+            render: ({row}) => row.ChannelId ?? EMPTY_DATA_PLACEHOLDER,
+            width: 130,
         },
         {
             name: vDiskPageKeyset('count'),
             align: DataTable.RIGHT,
-            render: ({row}) => row.Count ?? '-',
+            render: ({row}) => {
+                if (isNil(row.Count)) {
+                    return EMPTY_DATA_PLACEHOLDER;
+                }
+                return formatNumber(row.Count);
+            },
             width: 100,
         },
         {
             name: vDiskPageKeyset('size'),
             align: DataTable.RIGHT,
             render: ({row}) => {
                 const size = row.Size;
-                const numericSize = Number(size) || 0;
+                if (isNil(size)) {
+                    return EMPTY_DATA_PLACEHOLDER;
+                }
+                const numericSize = safeParseNumber(size);
                 return formatBytes(numericSize);
             },
             width: 120,