diff --git a/src/components/VDiskInfo/VDiskInfo.scss b/src/components/VDiskInfo/VDiskInfo.scss index d4c249097..321e5c063 100644 --- a/src/components/VDiskInfo/VDiskInfo.scss +++ b/src/components/VDiskInfo/VDiskInfo.scss @@ -1,4 +1,8 @@ .ydb-vdisk-info { + &__info { + width: 500px; + } + &__title { display: flex; flex-direction: row; diff --git a/src/components/VDiskInfo/VDiskInfo.tsx b/src/components/VDiskInfo/VDiskInfo.tsx index ad2a82615..3013b521b 100644 --- a/src/components/VDiskInfo/VDiskInfo.tsx +++ b/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,10 +22,12 @@ import './VDiskInfo.scss'; const b = cn('ydb-vdisk-info'); -interface VDiskInfoProps extends Omit { +interface VDiskInfoProps { data?: T; withVDiskPageLink?: boolean; withTitle?: boolean; + className?: string; + wrap?: true; } // eslint-disable-next-line complexity @@ -34,7 +35,8 @@ export function VDiskInfo({ data, withVDiskPageLink, withTitle, - ...infoViewerProps + className, + wrap, }: VDiskInfoProps) { const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges(); @@ -59,22 +61,19 @@ export function VDiskInfo({ 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: ( ({ ), }); } - 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: , }); } + if (valueIsDefined(FrontQueues)) { + leftColumn.push({ + label: vDiskInfoKeyset('front-queues'), + value: , + }); + } if (valueIsDefined(SatisfactionRank?.FreshRank?.Flag)) { - vdiskInfo.push({ + leftColumn.push({ label: vDiskInfoKeyset('fresh-rank-satisfaction'), value: , }); } if (valueIsDefined(SatisfactionRank?.LevelRank?.Flag)) { - vdiskInfo.push({ + leftColumn.push({ label: vDiskInfoKeyset('level-rank-satisfaction'), value: , }); } - if (valueIsDefined(FrontQueues)) { - vdiskInfo.push({ - label: vDiskInfoKeyset('front-queues'), - value: , - }); - } - 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({ } if (links.length) { - vdiskInfo.push({ + rightColumn.push({ label: vDiskInfoKeyset('links'), value: ( @@ -199,7 +205,19 @@ export function VDiskInfo({ const title = data && withTitle ? : null; - return ; + // 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 ( + + null} + className={b('info')} + /> + null} className={b('info')} /> + + ); } interface VDiskTitleProps { diff --git a/src/containers/VDiskPage/VDiskPage.tsx b/src/containers/VDiskPage/VDiskPage.tsx index e35a3efe9..c9371c001 100644 --- a/src/containers/VDiskPage/VDiskPage.tsx +++ b/src/containers/VDiskPage/VDiskPage.tsx @@ -182,7 +182,7 @@ export function VDiskPage() { }; const renderInfo = () => { - return ; + return ; }; const renderStorageInfo = () => { @@ -211,7 +211,7 @@ export function VDiskPage() { const renderContent = () => { if (loading) { - return ; + return ; } return (