feat: add VDisk page (#773)

Author: artemmufazalov

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.scss renamed to src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -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/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx renamed to src/components/DiskStateProgressBar/DiskStateProgressBar.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/GroupInfo.tsx

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

src/components/GroupInfo/i18n/en.json

@@ -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/components/GroupInfo/i18n/index.ts

@@ -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/containers/Storage/PDiskPopup/PDiskPopup.scss renamed to src/components/PDiskPopup/PDiskPopup.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%;
+    }
 }