feat(VDisk): show VDisk donors inside popup

ValeraS · ValeraS · commit 29e38e2fbfaa · 2024-10-08T10:52:26.000+02:00
diff --git a/src/components/VDisk/VDisk.scss b/src/components/VDisk/VDisk.scss
@@ -2,6 +2,8 @@
     border-radius: 4px; // to match interactive area with disk shape
 
     &__content {
+        display: block;
+
         border-radius: 4px; // to match interactive area with disk shape
     }
 }
diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx
@@ -1,17 +1,13 @@
 import React from 'react';
 
-import {STRUCTURE} from '../../containers/Node/NodePages';
-import routes, {createHref, getVDiskPagePath} from '../../routes';
-import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
-import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
-import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
-import {isFullVDiskData} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
 import {DiskStateProgressBar} from '../DiskStateProgressBar/DiskStateProgressBar';
 import {InternalLink} from '../InternalLink';
 import {VDiskPopup} from '../VDiskPopup/VDiskPopup';
 
+import {getVDiskLink} from './utils';
+
 import './VDisk.scss';
 
 const b = cn('ydb-vdisk-component');
@@ -35,10 +31,6 @@ export const VDisk = ({
     onHidePopup,
     progressBarClassName,
 }: VDiskProps) => {
-    const isFullData = isFullVDiskData(data);
-
-    const diskPagesAvailable = useDiskPagesAvailable();
-
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
 
     const anchor = React.useRef(null);
@@ -53,25 +45,7 @@ export const VDisk = ({
         onHidePopup?.();
     };
 
-    let vDiskPath: string | undefined;
-
-    if (
-        diskPagesAvailable &&
-        valueIsDefined(data.VDiskSlotId) &&
-        valueIsDefined(data.PDiskId) &&
-        valueIsDefined(data.NodeId)
-    ) {
-        vDiskPath = getVDiskPagePath(data.VDiskSlotId, data.PDiskId, data.NodeId);
-    } else if (valueIsDefined(data.NodeId) && isFullData) {
-        vDiskPath = createHref(
-            routes.node,
-            {id: data.NodeId, activeTab: STRUCTURE},
-            {
-                pdiskId: data.PDiskId,
-                vdiskId: stringifyVdiskId(data.VDiskId),
-            },
-        );
-    }
+    const vDiskPath = getVDiskLink(data);
 
     return (
         <React.Fragment>
diff --git a/src/components/VDisk/VDiskWithDonorsStack.tsx b/src/components/VDisk/VDiskWithDonorsStack.tsx
@@ -18,12 +18,12 @@ export function VDiskWithDonorsStack({
     stackClassName,
     ...restProps
 }: VDiskWithDonorsStackProps) {
-    const donors = data?.Donors;
+    const {Donors: donors, ...restData} = data || {};
 
     const content =
         donors && donors.length > 0 ? (
             <Stack className={stackClassName}>
-                <VDisk data={data} {...restProps} />
+                <VDisk data={restData} {...restProps} />
                 {donors.map((donor) => {
                     const isFullData = isFullVDiskData(donor);
 
diff --git a/src/components/VDisk/utils.ts b/src/components/VDisk/utils.ts
@@ -0,0 +1,32 @@
+import {STRUCTURE} from '../../containers/Node/NodePages';
+import routes, {createHref, getVDiskPagePath} from '../../routes';
+import type {TVDiskStateInfo, TVSlotId} from '../../types/api/vdisk';
+import {valueIsDefined} from '../../utils';
+import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
+import {isFullVDiskData} from '../../utils/disks/helpers';
+
+export function getVDiskLink(data: TVDiskStateInfo | TVSlotId) {
+    let vDiskPath: string | undefined;
+
+    const isFullData = isFullVDiskData(data);
+    const VDiskSlotId = isFullData ? data.VDiskSlotId : data.VSlotId;
+
+    if (
+        valueIsDefined(VDiskSlotId) &&
+        valueIsDefined(data.PDiskId) &&
+        valueIsDefined(data.NodeId)
+    ) {
+        vDiskPath = getVDiskPagePath(VDiskSlotId, data.PDiskId, data.NodeId);
+    } else if (valueIsDefined(data.NodeId) && isFullVDiskData(data)) {
+        vDiskPath = createHref(
+            routes.node,
+            {id: data.NodeId, activeTab: STRUCTURE},
+            {
+                pdiskId: data.PDiskId,
+                vdiskId: stringifyVdiskId(data.VDiskId),
+            },
+        );
+    }
+
+    return vDiskPath;
+}
diff --git a/src/components/VDiskPopup/VDiskPopup.tsx b/src/components/VDiskPopup/VDiskPopup.tsx
@@ -16,7 +16,9 @@ import {useTypedSelector} from '../../utils/hooks';
 import {bytesToGB, bytesToSpeed} from '../../utils/utils';
 import type {InfoViewerItem} from '../InfoViewer';
 import {InfoViewer} from '../InfoViewer';
+import {InternalLink} from '../InternalLink';
 import {preparePDiskData} from '../PDiskPopup/PDiskPopup';
+import {getVDiskLink} from '../VDisk/utils';
 
 import './VDiskPopup.scss';
 
@@ -148,6 +150,30 @@ export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
         [data, nodeHost, isFullData],
     );
 
+    const donorsInfo: InfoViewerItem[] = [];
+    if ('Donors' in data && data.Donors) {
+        const donors = data.Donors;
+        for (const donor of donors) {
+            const isFullDonorData = isFullVDiskData(donor);
+            donorsInfo.push({
+                label: 'VDisk',
+                value: (
+                    <InternalLink to={getVDiskLink(donor)}>
+                        {stringifyVdiskId(
+                            isFullDonorData
+                                ? donor.VDiskId
+                                : {
+                                      NodeId: donor.NodeId,
+                                      PDiskId: donor.PDiskId,
+                                      VSlotId: donor.VSlotId,
+                                  },
+                        )}
+                    </InternalLink>
+                ),
+            });
+        }
+    }
+
     return (
         <Popup
             contentClassName={b()}
@@ -161,6 +187,7 @@ export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
             {data.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
             <InfoViewer title="VDisk" info={vdiskInfo} size="s" />
             {pdiskInfo && <InfoViewer title="PDisk" info={pdiskInfo} size="s" />}
+            {donorsInfo.length > 0 && <InfoViewer title="Donors" info={donorsInfo} size="s" />}
         </Popup>
     );
 };
diff --git a/src/containers/Storage/Disks/Disks.tsx b/src/containers/Storage/Disks/Disks.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
+import {VDisk} from '../../../components/VDisk/VDisk';
 import {cn} from '../../../utils/cn';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskId} from '../../../utils/disks/helpers';
@@ -73,7 +73,7 @@ function VDiskItem({vDisk, highlightedVDisk, inactive, setHighlightedVDisk}: Dis
             }}
             className={b('vdisk-item')}
         >
-            <VDiskWithDonorsStack
+            <VDisk
                 data={vDiskToShow}
                 compact
                 inactive={inactive}
diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx
@@ -3,9 +3,8 @@ import React from 'react';
 import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
 import {InternalLink} from '../../../components/InternalLink';
 import {PDiskPopup} from '../../../components/PDiskPopup/PDiskPopup';
-import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
+import {VDisk} from '../../../components/VDisk/VDisk';
 import routes, {createHref, getPDiskPagePath} from '../../../routes';
-import {useDiskPagesAvailable} from '../../../store/reducers/capabilities/hooks';
 import {valueIsDefined} from '../../../utils';
 import {cn} from '../../../utils/cn';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
@@ -41,8 +40,6 @@ export const PDisk = ({
 }: PDiskProps) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
 
-    const diskPagesAvailable = useDiskPagesAvailable();
-
     const anchor = React.useRef(null);
 
     const {NodeId, PDiskId} = data;
@@ -76,10 +73,9 @@ export const PDisk = ({
                                 flexGrow: Number(vdisk.AllocatedSize) || 1,
                             }}
                         >
-                            <VDiskWithDonorsStack
+                            <VDisk
                                 data={vdisk}
                                 inactive={!isVdiskActive(vdisk, viewContext)}
-                                stackClassName={b('donors-stack')}
                                 compact
                             />
                         </div>
@@ -95,7 +91,7 @@ export const PDisk = ({
         pDiskPath = createHref(routes.node, {id: NodeId, activeTab: STRUCTURE}, {pdiskId: PDiskId});
     }
 
-    if (pDiskIdsDefined && diskPagesAvailable) {
+    if (pDiskIdsDefined) {
         pDiskPath = getPDiskPagePath(PDiskId, NodeId);
     }
 
diff --git a/src/utils/disks/calculateVDiskSeverity.ts b/src/utils/disks/calculateVDiskSeverity.ts
@@ -13,7 +13,7 @@ export function calculateVDiskSeverity(vDisk: TVDiskStateInfo) {
         return NOT_AVAILABLE_SEVERITY;
     }
 
-    const {DiskSpace, VDiskState, FrontQueues, Replicated, DonorMode} = vDisk;
+    const {DiskSpace, VDiskState, FrontQueues, Replicated} = vDisk;
 
     // if the disk is not available, this determines its status severity regardless of other features
     if (!VDiskState) {
@@ -30,8 +30,7 @@ export function calculateVDiskSeverity(vDisk: TVDiskStateInfo) {
     let severity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
 
     // donors are always in the not replicated state since they are leftovers
-    // painting them blue is useless
-    if (!Replicated && !DonorMode && severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Green) {
+    if (!Replicated && severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Green) {
         severity = DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue;
     }
 

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,8 @@`
`2`	`2`	`border-radius: 4px; // to match interactive area with disk shape`
`3`	`3`
`4`	`4`	`&__content {`
	`5`	`+ display: block;`
	`6`	`+`
`5`	`7`	`border-radius: 4px; // to match interactive area with disk shape`
`6`	`8`	`}`
`7`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ export function calculateVDiskSeverity(vDisk: TVDiskStateInfo) {`
`13`	`13`	`return NOT_AVAILABLE_SEVERITY;`
`14`	`14`	`}`
`15`	`15`
`16`		`- const {DiskSpace, VDiskState, FrontQueues, Replicated, DonorMode} = vDisk;`
	`16`	`+ const {DiskSpace, VDiskState, FrontQueues, Replicated} = vDisk;`
`17`	`17`
`18`	`18`	`// if the disk is not available, this determines its status severity regardless of other features`
`19`	`19`	`if (!VDiskState) {`
`@@ -30,8 +30,7 @@ export function calculateVDiskSeverity(vDisk: TVDiskStateInfo) {`
`30`	`30`	`let severity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);`
`31`	`31`
`32`	`32`	`// donors are always in the not replicated state since they are leftovers`
`33`		`- // painting them blue is useless`
`34`		`- if (!Replicated && !DonorMode && severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Green) {`
	`33`	`+ if (!Replicated && severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Green) {`
`35`	`34`	`severity = DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue;`
`36`	`35`	`}`
`37`	`36`