fix(VDiskPage): display params in 2 columns

Author: artemmufazalov

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,27 @@ export function VDiskInfo<T extends PreparedVDisk>({
         NodeId,
     } = data || {};
 
-    const vdiskInfo = [];
+    const generalInfo = [];
+    const statuses = [];
+    const stats = [];
+    const additionalParams = [];
 
     if (valueIsDefined(VDiskSlotId)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId});
+        generalInfo.push({label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId});
     }
     if (valueIsDefined(StoragePoolName)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('pool-name'), value: StoragePoolName});
+        generalInfo.push({label: vDiskInfoKeyset('pool-name'), value: StoragePoolName});
     }
+
     if (valueIsDefined(VDiskState)) {
-        vdiskInfo.push({
+        statuses.push({
             label: vDiskInfoKeyset('state-status'),
             value: VDiskState,
         });
     }
+
     if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
-        vdiskInfo.push({
+        stats.push({
             label: vDiskInfoKeyset('size'),
             value: (
                 <ProgressViewer
@@ -87,61 +94,62 @@ export function VDiskInfo<T extends PreparedVDisk>({
         });
     }
     if (valueIsDefined(Kind)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('kind'), value: Kind});
+        generalInfo.push({label: vDiskInfoKeyset('kind'), value: Kind});
     }
     if (valueIsDefined(Guid)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('guid'), value: Guid});
+        generalInfo.push({label: vDiskInfoKeyset('guid'), value: Guid});
     }
     if (valueIsDefined(IncarnationGuid)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('incarnation-guid'), value: IncarnationGuid});
+        generalInfo.push({label: vDiskInfoKeyset('incarnation-guid'), value: IncarnationGuid});
     }
     if (valueIsDefined(InstanceGuid)) {
-        vdiskInfo.push({label: vDiskInfoKeyset('instance-guid'), value: InstanceGuid});
+        generalInfo.push({label: vDiskInfoKeyset('instance-guid'), value: InstanceGuid});
     }
+
     if (valueIsDefined(Replicated)) {
-        vdiskInfo.push({
+        statuses.push({
             label: vDiskInfoKeyset('replication-status'),
             value: Replicated ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
         });
     }
     if (valueIsDefined(DiskSpace)) {
-        vdiskInfo.push({
+        statuses.push({
             label: vDiskInfoKeyset('space-status'),
             value: <StatusIcon status={DiskSpace} />,
         });
     }
     if (valueIsDefined(SatisfactionRank?.FreshRank?.Flag)) {
-        vdiskInfo.push({
+        statuses.push({
             label: vDiskInfoKeyset('fresh-rank-satisfaction'),
             value: <StatusIcon status={SatisfactionRank?.FreshRank?.Flag} />,
         });
     }
     if (valueIsDefined(SatisfactionRank?.LevelRank?.Flag)) {
-        vdiskInfo.push({
+        statuses.push({
             label: vDiskInfoKeyset('level-rank-satisfaction'),
             value: <StatusIcon status={SatisfactionRank?.LevelRank?.Flag} />,
         });
     }
     if (valueIsDefined(FrontQueues)) {
-        vdiskInfo.push({
+        statuses.push({
             label: vDiskInfoKeyset('front-queues'),
             value: <StatusIcon status={FrontQueues} />,
         });
     }
     if (valueIsDefined(HasUnreadableBlobs)) {
-        vdiskInfo.push({
+        statuses.push({
             label: vDiskInfoKeyset('has-unreadable-blobs'),
             value: HasUnreadableBlobs ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
         });
     }
     if (valueIsDefined(ReadThroughput)) {
-        vdiskInfo.push({
+        stats.push({
             label: vDiskInfoKeyset('read-throughput'),
             value: bytesToSpeed(ReadThroughput),
         });
     }
     if (valueIsDefined(WriteThroughput)) {
-        vdiskInfo.push({
+        stats.push({
             label: vDiskInfoKeyset('write-throughput'),
             value: bytesToSpeed(WriteThroughput),
         });
@@ -186,7 +194,7 @@ export function VDiskInfo<T extends PreparedVDisk>({
         }
 
         if (links.length) {
-            vdiskInfo.push({
+            additionalParams.push({
                 label: vDiskInfoKeyset('links'),
                 value: (
                     <Flex wrap="wrap" gap={2}>
@@ -199,7 +207,20 @@ 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}>
+            <Flex direction="column" gap={2} width={500}>
+                <InfoViewer title={title} info={generalInfo} renderEmptyState={() => null} />
+                <InfoViewer info={stats} renderEmptyState={() => null} />
+            </Flex>
+            <Flex direction="column" gap={2} width={500}>
+                <InfoViewer info={statuses} renderEmptyState={() => null} />
+                <InfoViewer info={additionalParams} renderEmptyState={() => null} />
+            </Flex>
+        </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 (