Skip to content

feat(VDisk): show VDisk donors inside popup #1422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 10, 2024
Merged

feat(VDisk): show VDisk donors inside popup #1422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
384b61d
feat(VDisk): show VDisk donors inside popup
ValeraS Oct 8, 2024
0f72dea
fix: tests
ValeraS Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/VDisk/VDisk.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
31 changes: 3 additions & 28 deletions src/components/VDisk/VDisk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +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 {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');
Expand All @@ -34,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);
Expand All @@ -52,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: data.StringifiedId,
},
);
}
const vDiskPath = getVDiskLink(data);

return (
<React.Fragment>
Expand Down
4 changes: 2 additions & 2 deletions src/components/VDisk/VDiskWithDonorsStack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
32 changes: 32 additions & 0 deletions src/components/VDisk/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
28 changes: 28 additions & 0 deletions src/components/VDiskPopup/VDiskPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,16 @@ import {EFlag} from '../../types/api/enums';
import {valueIsDefined} from '../../utils';
import {cn} from '../../utils/cn';
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
import {isFullVDiskData} from '../../utils/disks/helpers';
import type {PreparedVDisk, UnavailableDonor} from '../../utils/disks/types';
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';

Expand Down Expand Up @@ -146,6 +149,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>
),
});
}
}
Comment on lines +153 to +174
Copy link
Member

@artemmufazalov artemmufazalov Oct 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This link cannot be selected.

There is an issue for this, you should do it to make it work: #1360. Probably in another PR

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's fixed here: #1435


return (
<Popup
contentClassName={b()}
Expand All @@ -159,6 +186,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>
);
};
4 changes: 2 additions & 2 deletions src/containers/Storage/Disks/Disks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {getPDiskId} from '../../../utils/disks/helpers';
import type {PreparedVDisk} from '../../../utils/disks/types';
Expand Down Expand Up @@ -72,7 +72,7 @@ function VDiskItem({vDisk, highlightedVDisk, inactive, setHighlightedVDisk}: Dis
}}
className={b('vdisk-item')}
>
<VDiskWithDonorsStack
<VDisk
data={vDiskToShow}
compact
inactive={inactive}
Expand Down
10 changes: 3 additions & 7 deletions src/containers/Storage/PDisk/PDisk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
Expand Down Expand Up @@ -40,8 +39,6 @@ export const PDisk = ({
}: PDiskProps) => {
const [isPopupVisible, setIsPopupVisible] = React.useState(false);

const diskPagesAvailable = useDiskPagesAvailable();

const anchor = React.useRef(null);

const {NodeId, PDiskId} = data;
Expand Down Expand Up @@ -75,10 +72,9 @@ export const PDisk = ({
flexGrow: Number(vdisk.AllocatedSize) || 1,
}}
>
<VDiskWithDonorsStack
<VDisk
data={vdisk}
inactive={!isVdiskActive(vdisk, viewContext)}
stackClassName={b('donors-stack')}
compact
/>
</div>
Expand All @@ -94,7 +90,7 @@ export const PDisk = ({
pDiskPath = createHref(routes.node, {id: NodeId, activeTab: STRUCTURE}, {pdiskId: PDiskId});
}

if (pDiskIdsDefined && diskPagesAvailable) {
if (pDiskIdsDefined) {
pDiskPath = getPDiskPagePath(PDiskId, NodeId);
}

Expand Down
3 changes: 1 addition & 2 deletions src/utils/disks/__test__/calculateVDiskSeverity.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,7 @@ describe('VDisk state', () => {
DonorMode: true,
});

expect(severity1).not.toEqual(DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue);
expect(severity1).toEqual(DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Green);
expect(severity1).toEqual(DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue);
expect(severity2).toEqual(DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Yellow);
expect(severity3).toEqual(DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Red);
});
Expand Down
5 changes: 2 additions & 3 deletions src/utils/disks/calculateVDiskSeverity.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
}

Expand Down
Loading