Implement VDisk tablets feature with tab navigation

Co-authored-by: adameat <[email protected]>

Author: Copilot

src/containers/VDiskPage/VDiskPage.scss

@@ -12,7 +12,7 @@
     &__title,
     &__controls,
     &__info,
-    &__storage-title {
+    &__tabs {
         position: sticky;
         left: 0;
 
@@ -29,8 +29,7 @@
         gap: var(--g-spacing-2);
     }
 
-    &__storage-title {
-        margin-bottom: 0;
-        @include mixins.header-1-typography();
+    &__tablets-content {
+        margin-top: 16px;
     }
 }

src/containers/VDiskPage/VDiskPage.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 
 import {ArrowsOppositeToDots} from '@gravity-ui/icons';
-import {Icon} from '@gravity-ui/uikit';
+import {Icon, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
 import {StringParam, useQueryParams} from 'use-query-params';
+import {z} from 'zod';
 
 import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import {InternalLink} from '../../components/InternalLink/InternalLink';
 import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {VDiskInfo} from '../../components/VDiskInfo/VDiskInfo';
+import {getVDiskPagePath} from '../../routes';
 import {api} from '../../store/reducers/api';
 import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
@@ -25,26 +28,52 @@ import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
 
+import {VDiskTablets} from './VDiskTablets';
 import {vDiskPageKeyset} from './i18n';
 
 import './VDiskPage.scss';
 
 const vDiskPageCn = cn('ydb-vdisk-page');
 
+const VDISK_TABS_IDS = {
+    storage: 'storage',
+    tablets: 'tablets',
+} as const;
+
+const VDISK_PAGE_TABS = [
+    {
+        id: VDISK_TABS_IDS.storage,
+        get title() {
+            return vDiskPageKeyset('storage');
+        },
+    },
+    {
+        id: VDISK_TABS_IDS.tablets,
+        get title() {
+            return vDiskPageKeyset('tablets');
+        },
+    },
+];
+
+const vDiskTabSchema = z.nativeEnum(VDISK_TABS_IDS).catch(VDISK_TABS_IDS.storage);
+
 export function VDiskPage() {
     const dispatch = useTypedDispatch();
 
     const containerRef = React.useRef<HTMLDivElement>(null);
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const newDiskApiAvailable = useDiskPagesAvailable();
 
-    const [{nodeId, pDiskId, vDiskSlotId, vDiskId: vDiskIdParam}] = useQueryParams({
+    const [{nodeId, pDiskId, vDiskSlotId, vDiskId: vDiskIdParam, activeTab}] = useQueryParams({
         nodeId: StringParam,
         pDiskId: StringParam,
         vDiskSlotId: StringParam,
         vDiskId: StringParam,
+        activeTab: StringParam,
     });
 
+    const vDiskTab = vDiskTabSchema.parse(activeTab);
+
     React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('vDisk', {nodeId, pDiskId, vDiskSlotId}));
     }, [dispatch, nodeId, pDiskId, vDiskSlotId]);
@@ -185,24 +214,67 @@ export function VDiskPage() {
         return <VDiskInfo data={vDiskData} className={vDiskPageCn('info')} wrap />;
     };
 
+    const renderTabs = () => {
+        const vDiskParamsDefined =
+            valueIsDefined(nodeId) && valueIsDefined(pDiskId) && valueIsDefined(vDiskSlotId);
+
+        return (
+            <div className={vDiskPageCn('tabs')}>
+                <TabProvider value={vDiskTab}>
+                    <TabList size="l">
+                        {VDISK_PAGE_TABS.map(({id, title}) => {
+                            const path = vDiskParamsDefined
+                                ? getVDiskPagePath({nodeId, pDiskId, vDiskSlotId}, {activeTab: id})
+                                : undefined;
+                            return (
+                                <Tab key={id} value={id}>
+                                    <InternalLink as="tab" to={path}>
+                                        {title}
+                                    </InternalLink>
+                                </Tab>
+                            );
+                        })}
+                    </TabList>
+                </TabProvider>
+            </div>
+        );
+    };
+
+    const renderTabsContent = () => {
+        switch (vDiskTab) {
+            case 'storage': {
+                return renderStorageInfo();
+            }
+            case 'tablets': {
+                return (
+                    <VDiskTablets
+                        nodeId={nodeId ?? undefined}
+                        pDiskId={pDiskId ?? undefined}
+                        vDiskSlotId={vDiskSlotId ?? undefined}
+                        className={vDiskPageCn('tablets-content')}
+                    />
+                );
+            }
+            default:
+                return null;
+        }
+    };
+
     const renderStorageInfo = () => {
         if (valueIsDefined(GroupID) && valueIsDefined(nodeId)) {
             return (
-                <React.Fragment>
-                    <div className={vDiskPageCn('storage-title')}>{vDiskPageKeyset('storage')}</div>
-                    <PaginatedStorage
-                        groupId={GroupID}
-                        nodeId={nodeId}
-                        pDiskId={pDiskId ?? undefined}
-                        scrollContainerRef={containerRef}
-                        viewContext={{
-                            groupId: GroupID?.toString(),
-                            nodeId: nodeId?.toString(),
-                            pDiskId: pDiskId?.toString(),
-                            vDiskSlotId: vDiskSlotId?.toString(),
-                        }}
-                    />
-                </React.Fragment>
+                <PaginatedStorage
+                    groupId={GroupID}
+                    nodeId={nodeId}
+                    pDiskId={pDiskId ?? undefined}
+                    scrollContainerRef={containerRef}
+                    viewContext={{
+                        groupId: GroupID?.toString(),
+                        nodeId: nodeId?.toString(),
+                        pDiskId: pDiskId?.toString(),
+                        vDiskSlotId: vDiskSlotId?.toString(),
+                    }}
+                />
             );
         }
 
@@ -218,7 +290,8 @@ export function VDiskPage() {
             <React.Fragment>
                 {error ? <ResponseError error={error} /> : null}
                 {renderInfo()}
-                {renderStorageInfo()}
+                {renderTabs()}
+                {renderTabsContent()}
             </React.Fragment>
         );
     };

src/containers/VDiskPage/VDiskTablets/VDiskTablets.scss

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

src/containers/VDiskPage/VDiskTablets/VDiskTablets.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import {useTable} from '@gravity-ui/table';
+import {skipToken} from '@reduxjs/toolkit/query';
+
+import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import {Table} from '../../../components/Table/Table';
+import {vDiskApi} from '../../../store/reducers/vdisk/vdisk';
+import type {VDiskBlobIndexItem} from '../../../types/api/vdiskBlobIndex';
+import {cn} from '../../../utils/cn';
+import {useAutoRefreshInterval} from '../../../utils/hooks';
+
+import {getColumns} from './columns';
+
+import './VDiskTablets.scss';
+
+const vDiskTabletsCn = cn('ydb-vdisk-tablets');
+
+interface VDiskTabletsProps {
+    nodeId?: string | number;
+    pDiskId?: string | number;
+    vDiskSlotId?: string | number;
+    className?: string;
+}
+
+export function VDiskTablets({nodeId, pDiskId, vDiskSlotId, className}: VDiskTabletsProps) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+
+    const params = nodeId && pDiskId && vDiskSlotId ? {nodeId, pDiskId, vDiskSlotId} : skipToken;
+
+    const {currentData, isFetching, error} = vDiskApi.useGetVDiskBlobIndexStatQuery(params, {
+        pollingInterval: autoRefreshInterval,
+    });
+
+    const loading = isFetching && currentData === undefined;
+    const tableData: VDiskBlobIndexItem[] = currentData?.BlobIndexStat || [];
+
+    // Sort by size descending by default
+    const sortedData = React.useMemo(() => {
+        return [...tableData].sort((a, b) => {
+            const sizeA = Number(a.Size) || 0;
+            const sizeB = Number(b.Size) || 0;
+            return sizeB - sizeA;
+        });
+    }, [tableData]);
+
+    const columns = React.useMemo(() => getColumns(), []);
+
+    const table = useTable({
+        columns,
+        data: sortedData,
+    });
+
+    if (error) {
+        return (
+            <div className={vDiskTabletsCn('error', className)}>
+                Error loading tablet statistics
+            </div>
+        );
+    }
+
+    if (loading) {
+        return <InfoViewerSkeleton rows={5} />;
+    }
+
+    return (
+        <div className={vDiskTabletsCn(null, className)}>
+            <Table table={table} />
+        </div>
+    );
+}

src/containers/VDiskPage/VDiskTablets/columns.tsx

@@ -0,0 +1,66 @@
+import type {CellContext, ColumnDef} from '@tanstack/react-table';
+
+import {InternalLink} from '../../../components/InternalLink/InternalLink';
+import {ColumnHeader} from '../../../components/Table/Table';
+import {getTabletPagePath} from '../../../routes';
+import type {VDiskBlobIndexItem} from '../../../types/api/vdiskBlobIndex';
+import {cn} from '../../../utils/cn';
+import {formatBytes} from '../../../utils/dataFormatters/dataFormatters';
+import {vDiskPageKeyset} from '../i18n';
+
+const b = cn('ydb-vdisk-tablets');
+
+function TabletIdCell({getValue}: CellContext<VDiskBlobIndexItem, unknown>) {
+    const tabletId = getValue<string | number>();
+
+    if (!tabletId) {
+        return <span>-</span>;
+    }
+
+    return <InternalLink to={getTabletPagePath(String(tabletId))}>{tabletId}</InternalLink>;
+}
+
+function MetricsCell({getValue}: CellContext<VDiskBlobIndexItem, unknown>) {
+    const value = getValue<string | number>();
+    return <span className={b('metrics-cell')}>{value ?? '-'}</span>;
+}
+
+function SizeCell({getValue}: CellContext<VDiskBlobIndexItem, unknown>) {
+    const size = getValue<string | number>();
+    const numericSize = Number(size) || 0;
+    return <span className={b('size-cell')}>{formatBytes(numericSize)}</span>;
+}
+
+export function getColumns() {
+    const columns: ColumnDef<VDiskBlobIndexItem>[] = [
+        {
+            accessorKey: 'TabletId',
+            header: () => <ColumnHeader>{vDiskPageKeyset('tablet-id')}</ColumnHeader>,
+            size: 150,
+            cell: TabletIdCell,
+        },
+        {
+            accessorKey: 'ChannelId',
+            header: () => <ColumnHeader>{vDiskPageKeyset('channel-id')}</ColumnHeader>,
+            size: 100,
+            cell: MetricsCell,
+            meta: {align: 'right'},
+        },
+        {
+            accessorKey: 'Count',
+            header: () => <ColumnHeader>{vDiskPageKeyset('count')}</ColumnHeader>,
+            size: 100,
+            cell: MetricsCell,
+            meta: {align: 'right'},
+        },
+        {
+            accessorKey: 'Size',
+            header: () => <ColumnHeader>{vDiskPageKeyset('size')}</ColumnHeader>,
+            size: 120,
+            cell: SizeCell,
+            meta: {align: 'right'},
+        },
+    ];
+
+    return columns;
+}

src/containers/VDiskPage/VDiskTablets/index.ts

@@ -0,0 +1 @@
+export {VDiskTablets} from './VDiskTablets';

src/containers/VDiskPage/i18n/en.json

@@ -4,6 +4,12 @@
   "pdisk": "PDisk",
   "vdisk": "VDisk",
   "storage": "Storage",
+  "tablets": "Tablets",
+
+  "tablet-id": "Tablet ID",
+  "channel-id": "Channel ID",
+  "count": "Count",
+  "size": "Size",
 
   "evict-vdisk-button": "Evict VDisk",
   "force-evict-vdisk-button": "Evict anyway",

src/services/api/viewer.ts

@@ -34,6 +34,7 @@ import type {
 import type {TTenantInfo, TTenants} from '../../types/api/tenant';
 import type {DescribeTopicResult, TopicDataRequest, TopicDataResponse} from '../../types/api/topic';
 import type {TEvVDiskStateResponse} from '../../types/api/vdisk';
+import type {VDiskBlobIndexResponse} from '../../types/api/vdiskBlobIndex';
 import type {TUserToken} from '../../types/api/whoami';
 import type {TabletsApiRequestParams} from '../../types/store/tablets';
 import {BINARY_DATA_IN_PLAIN_TEXT_DISPLAY} from '../../utils/constants';
@@ -536,6 +537,29 @@ export class ViewerAPI extends BaseYdbAPI {
         );
     }
 
+    getVDiskBlobIndexStat(
+        {
+            vDiskSlotId,
+            pDiskId,
+            nodeId,
+        }: {
+            vDiskSlotId: string | number;
+            pDiskId: string | number;
+            nodeId: string | number;
+        },
+        {concurrentId, signal}: AxiosOptions = {},
+    ) {
+        return this.get<VDiskBlobIndexResponse>(
+            this.getPath('/vdisk/blobindexstat'),
+            {
+                node_id: nodeId,
+                pdisk_id: pDiskId,
+                vslot_id: vDiskSlotId,
+            },
+            {concurrentId, requestConfig: {signal}},
+        );
+    }
+
     getNodeWhiteboardPDiskInfo(
         {nodeId, pDiskId}: {nodeId: string | number; pDiskId: string | number},
         {concurrentId, signal}: AxiosOptions = {},

src/store/reducers/api.ts

@@ -18,6 +18,7 @@ export const api = createApi({
         'Tablet',
         'UserData',
         'VDiskData',
+        'VDiskBlobIndexStat',
         'AccessRights',
         'Backups',
         'BackupsSchedule',