fix(VDiskPage): display params in 2 columns, change order

src/components/VDiskInfo/VDiskInfo.scss

@@ -1,4 +1,8 @@
 .ydb-vdisk-info {
+    &__info {
+        width: 500px;
+    }
+
     &__title {
         display: flex;
         flex-direction: row;

src/components/VDiskInfo/VDiskInfo.tsx

@@ -12,7 +12,6 @@ import type {PreparedVDisk} from '../../utils/disks/types';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {bytesToSpeed} from '../../utils/utils';
 import {InfoViewer} from '../InfoViewer';
-import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
@@ -23,18 +22,21 @@ import './VDiskInfo.scss';
 
 const b = cn('ydb-vdisk-info');
 
-interface VDiskInfoProps<T extends PreparedVDisk> extends Omit<InfoViewerProps, 'info'> {
+interface VDiskInfoProps<T extends PreparedVDisk> {
     data?: T;
     withVDiskPageLink?: boolean;
     withTitle?: boolean;
+    className?: string;
+    wrap?: true;
 }
 
 // eslint-disable-next-line complexity
 export function VDiskInfo<T extends PreparedVDisk>({
     data,
     withVDiskPageLink,
     withTitle,
-    ...infoViewerProps
+    className,
+    wrap,
 }: VDiskInfoProps<T>) {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
 
@@ -59,22 +61,19 @@ export function VDiskInfo<T extends PreparedVDisk>({
         NodeId,
     } = data || {};
 
-    const vdiskInfo = [];
+    const leftColumn = [];
 
-    if (valueIsDefined(VDiskSlotId)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId});
-    }
     if (valueIsDefined(StoragePoolName)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('pool-name'), value: StoragePoolName});
+        leftColumn.push({label: vDiskInfoKeyset('pool-name'), value: StoragePoolName});
     }
     if (valueIsDefined(VDiskState)) {
-        vdiskInfo.push({
+        leftColumn.push({
             label: vDiskInfoKeyset('state-status'),
             value: VDiskState,
         });
     }
     if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
-        vdiskInfo.push({
+        leftColumn.push({
             label: vDiskInfoKeyset('size'),
             value: (
                 <ProgressViewer
@@ -86,67 +85,74 @@ export function VDiskInfo<T extends PreparedVDisk>({
             ),
         });
     }
-    if (valueIsDefined(Kind)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('kind'), value: Kind});
-    }
-    if (valueIsDefined(Guid)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('guid'), value: Guid});
-    }
-    if (valueIsDefined(IncarnationGuid)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('incarnation-guid'), value: IncarnationGuid});
-    }
-    if (valueIsDefined(InstanceGuid)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('instance-guid'), value: InstanceGuid});
-    }
-    if (valueIsDefined(Replicated)) {
-        vdiskInfo.push({
-            label: vDiskInfoKeyset('replication-status'),
-            value: Replicated ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
-        });
-    }
     if (valueIsDefined(DiskSpace)) {
-        vdiskInfo.push({
+        leftColumn.push({
             label: vDiskInfoKeyset('space-status'),
             value: <StatusIcon status={DiskSpace} />,
         });
     }
+    if (valueIsDefined(FrontQueues)) {
+        leftColumn.push({
+            label: vDiskInfoKeyset('front-queues'),
+            value: <StatusIcon status={FrontQueues} />,
+        });
+    }
     if (valueIsDefined(SatisfactionRank?.FreshRank?.Flag)) {
-        vdiskInfo.push({
+        leftColumn.push({
             label: vDiskInfoKeyset('fresh-rank-satisfaction'),
             value: <StatusIcon status={SatisfactionRank?.FreshRank?.Flag} />,
         });
     }
     if (valueIsDefined(SatisfactionRank?.LevelRank?.Flag)) {
-        vdiskInfo.push({
+        leftColumn.push({
             label: vDiskInfoKeyset('level-rank-satisfaction'),
             value: <StatusIcon status={SatisfactionRank?.LevelRank?.Flag} />,
         });
     }
-    if (valueIsDefined(FrontQueues)) {
-        vdiskInfo.push({
-            label: vDiskInfoKeyset('front-queues'),
-            value: <StatusIcon status={FrontQueues} />,
-        });
-    }
-    if (valueIsDefined(HasUnreadableBlobs)) {
-        vdiskInfo.push({
-            label: vDiskInfoKeyset('has-unreadable-blobs'),
-            value: HasUnreadableBlobs ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
-        });
-    }
     if (valueIsDefined(ReadThroughput)) {
-        vdiskInfo.push({
+        leftColumn.push({
             label: vDiskInfoKeyset('read-throughput'),
             value: bytesToSpeed(ReadThroughput),
         });
     }
     if (valueIsDefined(WriteThroughput)) {
-        vdiskInfo.push({
+        leftColumn.push({
             label: vDiskInfoKeyset('write-throughput'),
             value: bytesToSpeed(WriteThroughput),
         });
     }
 
+    const rightColumn = [];
+
+    if (valueIsDefined(Replicated)) {
+        rightColumn.push({
+            label: vDiskInfoKeyset('replication-status'),
+            value: Replicated ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
+        });
+    }
+    if (valueIsDefined(VDiskSlotId)) {
+        rightColumn.push({label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId});
+    }
+
+    if (valueIsDefined(Kind)) {
+        rightColumn.push({label: vDiskInfoKeyset('kind'), value: Kind});
+    }
+    if (valueIsDefined(Guid)) {
+        rightColumn.push({label: vDiskInfoKeyset('guid'), value: Guid});
+    }
+    if (valueIsDefined(IncarnationGuid)) {
+        rightColumn.push({label: vDiskInfoKeyset('incarnation-guid'), value: IncarnationGuid});
+    }
+    if (valueIsDefined(InstanceGuid)) {
+        rightColumn.push({label: vDiskInfoKeyset('instance-guid'), value: InstanceGuid});
+    }
+    if (valueIsDefined(HasUnreadableBlobs)) {
+        rightColumn.push({
+            label: vDiskInfoKeyset('has-unreadable-blobs'),
+            value: HasUnreadableBlobs ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
+        });
+    }
+
     const diskParamsDefined =
         valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId);
 
@@ -186,7 +192,7 @@ export function VDiskInfo<T extends PreparedVDisk>({
         }
 
         if (links.length) {
-            vdiskInfo.push({
+            rightColumn.push({
                 label: vDiskInfoKeyset('links'),
                 value: (
                     <Flex wrap="wrap" gap={2}>
@@ -199,7 +205,19 @@ export function VDiskInfo<T extends PreparedVDisk>({
 
     const title = data && withTitle ? <VDiskTitle data={data} /> : null;
 
-    return <InfoViewer info={vdiskInfo} title={title} {...infoViewerProps} />;
+    // Component is used both on vdisk page and in popups
+    // Display in two columns on page (row + wrap) and in one column in popups (column + nowrap)
+    return (
+        <Flex className={className} gap={2} direction={wrap ? 'row' : 'column'} wrap={wrap}>
+            <InfoViewer
+                title={title}
+                info={leftColumn}
+                renderEmptyState={() => null}
+                className={b('info')}
+            />
+            <InfoViewer info={rightColumn} renderEmptyState={() => null} className={b('info')} />
+        </Flex>
+    );
 }
 
 interface VDiskTitleProps<T extends PreparedVDisk> {

src/containers/VDiskPage/VDiskPage.tsx

@@ -182,7 +182,7 @@ export function VDiskPage() {
     };
 
     const renderInfo = () => {
-        return <VDiskInfo data={vDiskData} className={vDiskPageCn('info')} />;
+        return <VDiskInfo data={vDiskData} className={vDiskPageCn('info')} wrap />;
     };
 
     const renderStorageInfo = () => {
@@ -211,7 +211,7 @@ export function VDiskPage() {
 
     const renderContent = () => {
         if (loading) {
-            return <InfoViewerSkeleton rows={20} />;
+            return <InfoViewerSkeleton rows={9} />;
         }
 
         return (