Skip to content

feat: dim vdisks on the node page that are not on the selected node #1369

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 1, 2024
Merged

feat: dim vdisks on the node page that are not on the selected node #1369

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
3f472ec
feat: dim vdisks on the node page that are not on the selected node
astandrik Sep 27, 2024
b437c1c
fix: review fixes and rebase on main
astandrik Oct 1, 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
17 changes: 10 additions & 7 deletions src/components/PDiskPopup/PDiskPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import React from 'react';
import type {PopupProps} from '@gravity-ui/uikit';
import {Popup} from '@gravity-ui/uikit';

import {selectNodeHostsMap} from '../../store/reducers/nodesList';
import {EFlag} from '../../types/api/enums';
import type {NodesMap} from '../../types/store/nodesList';
import {valueIsDefined} from '../../utils';
import {cn} from '../../utils/cn';
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
import {getPDiskId} from '../../utils/disks/helpers';
import type {PreparedPDisk} from '../../utils/disks/types';
import {useTypedSelector} from '../../utils/hooks';
import {bytesToGB} from '../../utils/utils';
import type {InfoViewerItem} from '../InfoViewer';
import {InfoViewer} from '../InfoViewer';
Expand All @@ -19,7 +21,7 @@ const b = cn('pdisk-storage-popup');

const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];

export const preparePDiskData = (data: PreparedPDisk, nodes?: NodesMap) => {
export const preparePDiskData = (data: PreparedPDisk, nodeHost?: string) => {
const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Type, Device} = data;

const pdiskData: InfoViewerItem[] = [
Expand All @@ -35,8 +37,8 @@ export const preparePDiskData = (data: PreparedPDisk, nodes?: NodesMap) => {
pdiskData.push({label: 'Node Id', value: NodeId});
}

if (nodes && NodeId && nodes.get(NodeId)) {
pdiskData.push({label: 'Host', value: nodes.get(NodeId)});
if (nodeHost) {
pdiskData.push({label: 'Host', value: nodeHost});
}

if (Path) {
Expand All @@ -61,11 +63,12 @@ export const preparePDiskData = (data: PreparedPDisk, nodes?: NodesMap) => {

interface PDiskPopupProps extends PopupProps {
data: PreparedPDisk;
nodes?: NodesMap;
}

export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {
const info = React.useMemo(() => preparePDiskData(data, nodes), [data, nodes]);
export const PDiskPopup = ({data, ...props}: PDiskPopupProps) => {
const nodeHostsMap = useTypedSelector(selectNodeHostsMap);
const nodeHost = valueIsDefined(data.NodeId) ? nodeHostsMap?.get(data.NodeId) : undefined;
const info = React.useMemo(() => preparePDiskData(data, nodeHost), [data, nodeHost]);

return (
<Popup
Expand Down
10 changes: 1 addition & 9 deletions src/components/VDisk/VDisk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React from 'react';
import {STRUCTURE} from '../../containers/Node/NodePages';
import routes, {createHref, getVDiskPagePath} from '../../routes';
import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
import type {NodesMap} from '../../types/store/nodesList';
import {valueIsDefined} from '../../utils';
import {cn} from '../../utils/cn';
import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
Expand All @@ -19,7 +18,6 @@ const b = cn('ydb-vdisk-component');

export interface VDiskProps {
data?: PreparedVDisk;
nodes?: NodesMap;
compact?: boolean;
inactive?: boolean;
showPopup?: boolean;
Expand All @@ -30,7 +28,6 @@ export interface VDiskProps {

export const VDisk = ({
data = {},
nodes,
compact,
inactive,
showPopup,
Expand Down Expand Up @@ -94,12 +91,7 @@ export const VDisk = ({
/>
</InternalLink>
</div>
<VDiskPopup
data={data}
nodes={nodes}
anchorRef={anchor}
open={isPopupVisible || showPopup}
/>
<VDiskPopup data={data} anchorRef={anchor} open={isPopupVisible || showPopup} />
</React.Fragment>
);
};
14 changes: 9 additions & 5 deletions src/components/VDiskPopup/VDiskPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@ import React from 'react';
import type {PopupProps} from '@gravity-ui/uikit';
import {Label, Popup} from '@gravity-ui/uikit';

import {selectNodeHostsMap} from '../../store/reducers/nodesList';
import {EFlag} from '../../types/api/enums';
import type {TVDiskStateInfo} from '../../types/api/vdisk';
import type {NodesMap} from '../../types/store/nodesList';
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 {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';
Expand Down Expand Up @@ -129,19 +131,21 @@ const prepareVDiskData = (data: TVDiskStateInfo) => {

interface VDiskPopupProps extends PopupProps {
data: TVDiskStateInfo | UnavailableDonor;
nodes?: NodesMap;
}

export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
const isFullData = isFullVDiskData(data);

const vdiskInfo = React.useMemo(
() => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)),
[data, isFullData],
);

const nodeHostsMap = useTypedSelector(selectNodeHostsMap);
const nodeHost = valueIsDefined(data.NodeId) ? nodeHostsMap?.get(data.NodeId) : undefined;
const pdiskInfo = React.useMemo(
() => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes),
[data, nodes, isFullData],
() => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodeHost),
[data, nodeHost, isFullData],
);

return (
Expand Down
52 changes: 24 additions & 28 deletions src/containers/Storage/Disks/Disks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
import React from 'react';

import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
import type {NodesMap} from '../../../types/store/nodesList';
import {cn} from '../../../utils/cn';
import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
import {getPDiskId} from '../../../utils/disks/helpers';
import type {PreparedVDisk} from '../../../utils/disks/types';
import {PDisk} from '../PDisk';
import {isVdiskActive} from '../utils';
import type {VDiskViewContext} from '../utils';

import './Disks.scss';

const b = cn('ydb-storage-disks');

interface DisksProps {
vDisks?: PreparedVDisk[];
nodes?: NodesMap;
viewContext?: VDiskViewContext;
}

export function Disks({vDisks = [], nodes}: DisksProps) {
export function Disks({vDisks = [], viewContext}: DisksProps) {
const [highlightedVDisk, setHighlightedVDisk] = React.useState<string | undefined>();

if (!vDisks.length) {
Expand All @@ -27,44 +28,39 @@ export function Disks({vDisks = [], nodes}: DisksProps) {
return (
<div className={b(null)}>
<div className={b('vdisks-wrapper')}>
{vDisks?.map((vDisk) => {
return (
<VDiskItem
key={stringifyVdiskId(vDisk.VDiskId)}
vDisk={vDisk}
nodes={nodes}
highlightedVDisk={highlightedVDisk}
setHighlightedVDisk={setHighlightedVDisk}
/>
);
})}
{vDisks?.map((vDisk) => (
<VDiskItem
key={stringifyVdiskId(vDisk.VDiskId)}
vDisk={vDisk}
inactive={!isVdiskActive(vDisk, viewContext)}
highlightedVDisk={highlightedVDisk}
setHighlightedVDisk={setHighlightedVDisk}
/>
))}
Comment on lines +31 to +39
Copy link
Member

@artemmufazalov artemmufazalov Sep 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

We are both currently working on storage. Please, don't make such changes, if you don't really need them, so there will be less conflict to resolve

</div>

<div className={b('pdisks-wrapper')}>
{vDisks?.map((vDisk) => {
return (
<PDiskItem
key={getPDiskId(vDisk.NodeId, vDisk?.PDisk?.PDiskId)}
vDisk={vDisk}
nodes={nodes}
highlightedVDisk={highlightedVDisk}
setHighlightedVDisk={setHighlightedVDisk}
/>
);
})}
{vDisks?.map((vDisk) => (
<PDiskItem
key={getPDiskId(vDisk.NodeId, vDisk?.PDisk?.PDiskId)}
vDisk={vDisk}
highlightedVDisk={highlightedVDisk}
setHighlightedVDisk={setHighlightedVDisk}
/>
))}
</div>
</div>
);
}

interface DisksItemProps {
nodes?: NodesMap;
vDisk: PreparedVDisk;
inactive?: boolean;
highlightedVDisk: string | undefined;
setHighlightedVDisk: (id: string | undefined) => void;
}

function VDiskItem({nodes, vDisk, highlightedVDisk, setHighlightedVDisk}: DisksItemProps) {
function VDiskItem({vDisk, highlightedVDisk, inactive, setHighlightedVDisk}: DisksItemProps) {
// Do not show PDisk popup for VDisk
const vDiskToShow = {...vDisk, PDisk: undefined};

Expand All @@ -79,8 +75,8 @@ function VDiskItem({nodes, vDisk, highlightedVDisk, setHighlightedVDisk}: DisksI
>
<VDiskWithDonorsStack
data={vDiskToShow}
nodes={nodes}
compact
inactive={inactive}
showPopup={highlightedVDisk === vDiskId}
onShowPopup={() => setHighlightedVDisk(vDiskId)}
onHidePopup={() => setHighlightedVDisk(undefined)}
Expand Down
18 changes: 6 additions & 12 deletions src/containers/Storage/PDisk/PDisk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import {PDiskPopup} from '../../../components/PDiskPopup/PDiskPopup';
import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
import routes, {createHref, getPDiskPagePath} from '../../../routes';
import {useDiskPagesAvailable} from '../../../store/reducers/capabilities/hooks';
import {selectNodesMap} from '../../../store/reducers/nodesList';
import {valueIsDefined} from '../../../utils';
import {cn} from '../../../utils/cn';
import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
import {useTypedSelector} from '../../../utils/hooks';
import {STRUCTURE} from '../../Node/NodePages';
import {isVdiskActive} from '../utils';
import type {VDiskViewContext} from '../utils';

import './PDisk.scss';

Expand All @@ -21,27 +21,26 @@ const b = cn('pdisk-storage');
interface PDiskProps {
data?: PreparedPDisk;
vDisks?: PreparedVDisk[];
inactiveVdisks?: PreparedVDisk[];
showPopup?: boolean;
onShowPopup?: VoidFunction;
onHidePopup?: VoidFunction;
className?: string;
progressBarClassName?: string;
viewContext?: VDiskViewContext;
}

export const PDisk = ({
data = {},
vDisks,
inactiveVdisks,
showPopup,
onShowPopup,
onHidePopup,
className,
progressBarClassName,
viewContext,
}: PDiskProps) => {
const [isPopupVisible, setIsPopupVisible] = React.useState(false);

const nodes = useTypedSelector(selectNodesMap);
const diskPagesAvailable = useDiskPagesAvailable();

const anchor = React.useRef(null);
Expand Down Expand Up @@ -79,7 +78,7 @@ export const PDisk = ({
>
<VDiskWithDonorsStack
data={vdisk}
inactive={inactiveVdisks?.includes(vdisk)}
inactive={!isVdiskActive(vdisk, viewContext)}
stackClassName={b('donors-stack')}
compact
/>
Expand Down Expand Up @@ -118,12 +117,7 @@ export const PDisk = ({
<div className={b('media-type')}>{data.Type}</div>
</InternalLink>
</div>
<PDiskPopup
data={data}
nodes={nodes}
anchorRef={anchor}
open={isPopupVisible || showPopup}
/>
<PDiskPopup data={data} anchorRef={anchor} open={isPopupVisible || showPopup} />
</React.Fragment>
);
};
12 changes: 8 additions & 4 deletions src/containers/Storage/PaginatedStorageGroups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,10 @@ export function PaginatedStorageGroups(props: PaginatedStorageProps) {
function StorageGroupsComponent({database, nodeId, parentContainer}: PaginatedStorageProps) {
const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();

const {columnsToShow, columnsToSelect, setColumns} =
useStorageGroupsSelectedColumns(visibleEntities);
const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
visibleEntities,
nodeId,
});

const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
return (
Expand Down Expand Up @@ -89,8 +91,10 @@ function GroupedStorageGroupsComponent({database, groupId, nodeId}: PaginatedSto
const {searchValue, storageGroupsGroupByParam, visibleEntities, handleShowAllGroups} =
useStorageQueryParams();

const {columnsToShow, columnsToSelect, setColumns} =
useStorageGroupsSelectedColumns(visibleEntities);
const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
visibleEntities,
nodeId,
});

const {currentData, isFetching, error} = storageApi.useGetStorageGroupsInfoQuery(
{
Expand Down
2 changes: 1 addition & 1 deletion src/containers/Storage/Storage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
columnsToShow: storageGroupsColumnsToShow,
columnsToSelect: storageGroupsColumnsToSelect,
setColumns: setStorageGroupsSelectedColumns,
} = useStorageGroupsSelectedColumns(visibleEntities);
} = useStorageGroupsSelectedColumns({visibleEntities, nodeId: nodeId?.toString()});

const nodesQuery = storageApi.useGetStorageNodesInfoQuery(
{
Expand Down
Loading
Loading