feat: add VDisk page

src/components/DiskPageTitle/DiskPageTitle.scss

@@ -0,0 +1,17 @@
+@import '../../styles/mixins.scss';
+
+.ydb-disk-page-title {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: baseline;
+
+    text-wrap: nowrap;
+
+    @include header-2-typography();
+
+    &__prefix {
+        margin-right: 6px;
+
+        color: var(--g-color-text-secondary);
+    }
+}

src/components/DiskPageTitle/DiskPageTitle.tsx

@@ -0,0 +1,26 @@
+import type {ReactNode} from 'react';
+
+import type {EFlag} from '../../types/api/enums';
+import {cn} from '../../utils/cn';
+import {StatusIcon} from '../StatusIcon/StatusIcon';
+
+import './DiskPageTitle.scss';
+
+const b = cn('ydb-disk-page-title');
+
+interface DiskPageTitleProps {
+    entityName: ReactNode;
+    status: EFlag;
+    id: ReactNode;
+    className?: string;
+}
+
+export function DiskPageTitle({entityName, status, id, className}: DiskPageTitleProps) {
+    return (
+        <div className={b(null, className)}>
+            <span className={b('prefix')}>{entityName}</span>
+            <StatusIcon status={status} size="s" />
+            {id}
+        </div>
+    );
+}

src/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx → src/components/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 
-import {INVERTED_DISKS_KEY} from '../../../utils/constants';
-import {useSetting} from '../../../utils/hooks';
-import {getSeverityColor} from '../../../utils/disks/helpers';
+import {INVERTED_DISKS_KEY} from '../../utils/constants';
+import {useSetting} from '../../utils/hooks';
+import {getSeverityColor} from '../../utils/disks/helpers';
 
 import './DiskStateProgressBar.scss';
 

src/components/GroupInfo/GroupInfo.tsx

@@ -0,0 +1,47 @@
+import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
+import {valueIsDefined} from '../../utils';
+import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
+
+import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
+import {InfoViewer} from '../InfoViewer';
+import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+import {groupInfoKeyset} from './i18n';
+
+interface GroupInfoProps<T extends Partial<PreparedStorageGroup>>
+    extends Omit<InfoViewerProps, 'info'> {
+    data: T;
+}
+
+export function GroupInfo<T extends Partial<PreparedStorageGroup>>({
+    data,
+    ...infoViewerProps
+}: GroupInfoProps<T>) {
+    const {GroupID, PoolName, Used, Limit, ErasureSpecies} = data;
+
+    const groupInfo = [];
+
+    if (valueIsDefined(GroupID)) {
+        groupInfo.push({label: groupInfoKeyset('group-id'), value: GroupID});
+    }
+    if (valueIsDefined(PoolName)) {
+        groupInfo.push({label: groupInfoKeyset('pool-name'), value: PoolName});
+    }
+    if (valueIsDefined(ErasureSpecies)) {
+        groupInfo.push({label: groupInfoKeyset('erasure'), value: ErasureSpecies});
+    }
+    if (Number(Used) >= 0 && Number(Limit) >= 0) {
+        groupInfo.push({
+            label: groupInfoKeyset('size'),
+            value: (
+                <ProgressViewer
+                    value={Used}
+                    capacity={Limit}
+                    formatValues={formatStorageValuesToGb}
+                    colorizeProgress={true}
+                />
+            ),
+        });
+    }
+
+    return <InfoViewer info={groupInfo} {...infoViewerProps} />;
+}

src/components/GroupInfo/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "group-id": "Group ID",
+  "pool-name": "Storage Pool Name",
+  "size": "Size",
+  "erasure": "Erasure"
+}

src/components/GroupInfo/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-group-info';
+
+export const groupInfoKeyset = registerKeysets(COMPONENT, {en});

src/containers/Storage/PDiskPopup/PDiskPopup.tsx → src/components/PDiskPopup/PDiskPopup.tsx

@@ -3,14 +3,14 @@ import cn from 'bem-cn-lite';
 
 import {Popup, PopupProps} from '@gravity-ui/uikit';
 
-import type {NodesMap} from '../../../types/store/nodesList';
+import type {NodesMap} from '../../types/store/nodesList';
+import {EFlag} from '../../types/api/enums';
+import type {PreparedPDisk} from '../../utils/disks/types';
+import {getPDiskId} from '../../utils/dataFormatters/dataFormatters';
+import {bytesToGB} from '../../utils/utils';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 
-import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
-
-import {EFlag} from '../../../types/api/enums';
-import type {PreparedPDisk} from '../../../utils/disks/types';
-import {getPDiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {bytesToGB} from '../../../utils/utils';
+import {InfoViewer, InfoViewerItem} from '../InfoViewer';
 
 import './PDiskPopup.scss';
 
@@ -22,7 +22,7 @@ export const preparePDiskData = (data: PreparedPDisk, nodes?: NodesMap) => {
     const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Type, Device} = data;
 
     const pdiskData: InfoViewerItem[] = [
-        {label: 'PDisk', value: getPDiskId({NodeId, PDiskId}) || '-'},
+        {label: 'PDisk', value: getPDiskId({NodeId, PDiskId}) || EMPTY_DATA_PLACEHOLDER},
         {label: 'State', value: State || 'not available'},
         {label: 'Type', value: Type || 'unknown'},
     ];

src/components/PageMeta/PageMeta.scss

@@ -4,7 +4,16 @@
     display: flex;
     flex-flow: row nowrap;
 
+    height: var(--g-text-body-2-line-height);
+
+    text-wrap: nowrap;
+
     color: var(--g-color-text-primary);
 
     @include body-2-typography();
+
+    &__skeleton {
+        width: 80%;
+        height: 80%;
+    }
 }

src/components/PageMeta/PageMeta.tsx

@@ -1,3 +1,4 @@
+import {Skeleton} from '@gravity-ui/uikit';
 import {cn} from '../../utils/cn';
 import './PageMeta.scss';
 
@@ -6,12 +7,17 @@ const b = cn('ydb-page-meta');
 interface PageMetaProps {
     items: (string | undefined)[];
     className?: string;
+    loading?: boolean;
 }
 
-export function PageMeta({items, className}: PageMetaProps) {
-    return (
-        <div className={b(null, className)}>
-            {items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0')}
-        </div>
-    );
+export function PageMeta({items, loading, className}: PageMetaProps) {
+    const renderContent = () => {
+        if (loading) {
+            return <Skeleton className={b('skeleton')} />;
+        }
+
+        return items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0');
+    };
+
+    return <div className={b(null, className)}>{renderContent()}</div>;
 }

src/components/Stack/Stack.scss

@@ -8,6 +8,8 @@
     position: relative;
 
     &__layer {
+        background: var(--g-color-base-background);
+
         transition: transform 0.1s ease-out;
 
         &:first-child {

src/containers/Storage/VDisk/VDisk.scss → src/components/VDisk/VDisk.scss

@@ -1,4 +1,4 @@
-.vdisk-storage {
+.ydb-vdisk-component {
     border-radius: 4px; // to match interactive area with disk shape
 
     &__content {

src/containers/Storage/VDisk/VDisk.tsx → src/components/VDisk/VDisk.tsx

@@ -1,23 +1,22 @@
 import React, {useState, useRef} from 'react';
 import cn from 'bem-cn-lite';
 
-import type {NodesMap} from '../../../types/store/nodesList';
+import type {NodesMap} from '../../types/store/nodesList';
 
-import {InternalLink} from '../../../components/InternalLink';
+import type {PreparedVDisk} from '../../utils/disks/types';
+import routes, {createHref} from '../../routes';
+import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
+import {isFullVDiskData} from '../../utils/disks/helpers';
 
-import type {PreparedVDisk} from '../../../utils/disks/types';
-import routes, {createHref} from '../../../routes';
-import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {isFullVDiskData} from '../../../utils/disks/helpers';
+import {STRUCTURE} from '../../containers/Node/NodePages';
 
-import {STRUCTURE} from '../../Node/NodePages';
-
-import {DiskStateProgressBar} from '../DiskStateProgressBar';
-import {VDiskPopup} from '../VDiskPopup';
+import {VDiskPopup} from '../VDiskPopup/VDiskPopup';
+import {DiskStateProgressBar} from '../DiskStateProgressBar/DiskStateProgressBar';
+import {InternalLink} from '../InternalLink';
 
 import './VDisk.scss';
 
-const b = cn('vdisk-storage');
+const b = cn('ydb-vdisk-component');
 
 interface VDiskProps {
     data?: PreparedVDisk;

src/components/VDisk/VDiskWithDonorsStack.tsx

@@ -0,0 +1,49 @@
+import type {NodesMap} from '../../types/store/nodesList';
+import type {PreparedVDisk} from '../../utils/disks/types';
+import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
+import {isFullVDiskData} from '../../utils/disks/helpers';
+
+import {Stack} from '../Stack/Stack';
+import {VDisk} from './VDisk';
+
+interface VDiskWithDonorsStackProps {
+    data?: PreparedVDisk;
+    nodes?: NodesMap;
+    compact?: boolean;
+    className?: string;
+    stackClassName?: string;
+}
+
+export function VDiskWithDonorsStack({
+    data,
+    nodes,
+    compact,
+    className,
+    stackClassName,
+}: VDiskWithDonorsStackProps) {
+    const donors = data?.Donors;
+
+    const content =
+        donors && donors.length > 0 ? (
+            <Stack className={stackClassName}>
+                <VDisk data={data} nodes={nodes} compact={compact} />
+                {donors.map((donor) => {
+                    const isFullData = isFullVDiskData(donor);
+
+                    // donor and acceptor are always in the same group
+                    return (
+                        <VDisk
+                            key={stringifyVdiskId(isFullData ? donor.VDiskId : donor)}
+                            data={donor}
+                            nodes={nodes}
+                            compact={compact}
+                        />
+                    );
+                })}
+            </Stack>
+        ) : (
+            <VDisk data={data} nodes={nodes} compact={compact} />
+        );
+
+    return <div className={className}>{content}</div>;
+}

src/components/VDiskInfo/VDiskInfo.scss

@@ -0,0 +1,8 @@
+.ydb-vdisk-info {
+    &__links {
+        display: flex;
+        flex-flow: row wrap;
+
+        gap: 12px;
+    }
+}