Skip to content

Commit 446019f

Browse files
astandrikastandrik
authored
feat: dim vdisks on the node page that are not on the selected node (#1369)
1 parent 93dd920 commit 446019f

File tree

19 files changed

+141
-135
lines changed

19 files changed

+141
-135
lines changed

‎src/components/PDiskPopup/PDiskPopup.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import React from 'react';
33
import type {PopupProps} from '@gravity-ui/uikit';
44
import {Popup} from '@gravity-ui/uikit';
55

6+
import {selectNodeHostsMap} from '../../store/reducers/nodesList';
67
import {EFlag} from '../../types/api/enums';
7-
import type {NodesMap} from '../../types/store/nodesList';
8+
import {valueIsDefined} from '../../utils';
89
import {cn} from '../../utils/cn';
910
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
1011
import {getPDiskId} from '../../utils/disks/helpers';
1112
import type {PreparedPDisk} from '../../utils/disks/types';
13+
import {useTypedSelector} from '../../utils/hooks';
1214
import {bytesToGB} from '../../utils/utils';
1315
import type {InfoViewerItem} from '../InfoViewer';
1416
import {InfoViewer} from '../InfoViewer';
@@ -19,7 +21,7 @@ const b = cn('pdisk-storage-popup');
1921

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

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

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

38-
if (nodes && NodeId && nodes.get(NodeId)) {
39-
pdiskData.push({label: 'Host', value: nodes.get(NodeId)});
40+
if (nodeHost) {
41+
pdiskData.push({label: 'Host', value: nodeHost});
4042
}
4143

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

6264
interface PDiskPopupProps extends PopupProps {
6365
data: PreparedPDisk;
64-
nodes?: NodesMap;
6566
}
6667

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

7073
return (
7174
<Popup

‎src/components/VDisk/VDisk.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react';
33
import {STRUCTURE} from '../../containers/Node/NodePages';
44
import routes, {createHref, getVDiskPagePath} from '../../routes';
55
import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
6-
import type {NodesMap} from '../../types/store/nodesList';
76
import {valueIsDefined} from '../../utils';
87
import {cn} from '../../utils/cn';
98
import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
@@ -19,7 +18,6 @@ const b = cn('ydb-vdisk-component');
1918

2019
export interface VDiskProps {
2120
data?: PreparedVDisk;
22-
nodes?: NodesMap;
2321
compact?: boolean;
2422
inactive?: boolean;
2523
showPopup?: boolean;
@@ -30,7 +28,6 @@ export interface VDiskProps {
3028

3129
export const VDisk = ({
3230
data = {},
33-
nodes,
3431
compact,
3532
inactive,
3633
showPopup,
@@ -94,12 +91,7 @@ export const VDisk = ({
9491
/>
9592
</InternalLink>
9693
</div>
97-
<VDiskPopup
98-
data={data}
99-
nodes={nodes}
100-
anchorRef={anchor}
101-
open={isPopupVisible || showPopup}
102-
/>
94+
<VDiskPopup data={data} anchorRef={anchor} open={isPopupVisible || showPopup} />
10395
</React.Fragment>
10496
);
10597
};

‎src/components/VDiskPopup/VDiskPopup.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import React from 'react';
33
import type {PopupProps} from '@gravity-ui/uikit';
44
import {Label, Popup} from '@gravity-ui/uikit';
55

6+
import {selectNodeHostsMap} from '../../store/reducers/nodesList';
67
import {EFlag} from '../../types/api/enums';
78
import type {TVDiskStateInfo} from '../../types/api/vdisk';
8-
import type {NodesMap} from '../../types/store/nodesList';
9+
import {valueIsDefined} from '../../utils';
910
import {cn} from '../../utils/cn';
1011
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
1112
import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
1213
import {isFullVDiskData} from '../../utils/disks/helpers';
1314
import type {UnavailableDonor} from '../../utils/disks/types';
15+
import {useTypedSelector} from '../../utils/hooks';
1416
import {bytesToGB, bytesToSpeed} from '../../utils/utils';
1517
import type {InfoViewerItem} from '../InfoViewer';
1618
import {InfoViewer} from '../InfoViewer';
@@ -129,19 +131,21 @@ const prepareVDiskData = (data: TVDiskStateInfo) => {
129131

130132
interface VDiskPopupProps extends PopupProps {
131133
data: TVDiskStateInfo | UnavailableDonor;
132-
nodes?: NodesMap;
133134
}
134135

135-
export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
136+
export const VDiskPopup = ({data, ...props}: VDiskPopupProps) => {
136137
const isFullData = isFullVDiskData(data);
137138

138139
const vdiskInfo = React.useMemo(
139140
() => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)),
140141
[data, isFullData],
141142
);
143+
144+
const nodeHostsMap = useTypedSelector(selectNodeHostsMap);
145+
const nodeHost = valueIsDefined(data.NodeId) ? nodeHostsMap?.get(data.NodeId) : undefined;
142146
const pdiskInfo = React.useMemo(
143-
() => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes),
144-
[data, nodes, isFullData],
147+
() => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodeHost),
148+
[data, nodeHost, isFullData],
145149
);
146150

147151
return (

‎src/containers/Storage/Disks/Disks.tsx‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
import React from 'react';
22

33
import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
4-
import type {NodesMap} from '../../../types/store/nodesList';
54
import {cn} from '../../../utils/cn';
65
import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
76
import {getPDiskId} from '../../../utils/disks/helpers';
87
import type {PreparedVDisk} from '../../../utils/disks/types';
98
import {PDisk} from '../PDisk';
9+
import {isVdiskActive} from '../utils';
10+
import type {VDiskViewContext} from '../utils';
1011

1112
import './Disks.scss';
1213

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

1516
interface DisksProps {
1617
vDisks?: PreparedVDisk[];
17-
nodes?: NodesMap;
18+
viewContext?: VDiskViewContext;
1819
}
1920

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

2324
if (!vDisks.length) {
@@ -27,44 +28,39 @@ export function Disks({vDisks = [], nodes}: DisksProps) {
2728
return (
2829
<div className={b(null)}>
2930
<div className={b('vdisks-wrapper')}>
30-
{vDisks?.map((vDisk) => {
31-
return (
32-
<VDiskItem
33-
key={stringifyVdiskId(vDisk.VDiskId)}
34-
vDisk={vDisk}
35-
nodes={nodes}
36-
highlightedVDisk={highlightedVDisk}
37-
setHighlightedVDisk={setHighlightedVDisk}
38-
/>
39-
);
40-
})}
31+
{vDisks?.map((vDisk) => (
32+
<VDiskItem
33+
key={stringifyVdiskId(vDisk.VDiskId)}
34+
vDisk={vDisk}
35+
inactive={!isVdiskActive(vDisk, viewContext)}
36+
highlightedVDisk={highlightedVDisk}
37+
setHighlightedVDisk={setHighlightedVDisk}
38+
/>
39+
))}
4140
</div>
4241

4342
<div className={b('pdisks-wrapper')}>
44-
{vDisks?.map((vDisk) => {
45-
return (
46-
<PDiskItem
47-
key={getPDiskId(vDisk.NodeId, vDisk?.PDisk?.PDiskId)}
48-
vDisk={vDisk}
49-
nodes={nodes}
50-
highlightedVDisk={highlightedVDisk}
51-
setHighlightedVDisk={setHighlightedVDisk}
52-
/>
53-
);
54-
})}
43+
{vDisks?.map((vDisk) => (
44+
<PDiskItem
45+
key={getPDiskId(vDisk.NodeId, vDisk?.PDisk?.PDiskId)}
46+
vDisk={vDisk}
47+
highlightedVDisk={highlightedVDisk}
48+
setHighlightedVDisk={setHighlightedVDisk}
49+
/>
50+
))}
5551
</div>
5652
</div>
5753
);
5854
}
5955

6056
interface DisksItemProps {
61-
nodes?: NodesMap;
6257
vDisk: PreparedVDisk;
58+
inactive?: boolean;
6359
highlightedVDisk: string | undefined;
6460
setHighlightedVDisk: (id: string | undefined) => void;
6561
}
6662

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

@@ -79,8 +75,8 @@ function VDiskItem({nodes, vDisk, highlightedVDisk, setHighlightedVDisk}: DisksI
7975
>
8076
<VDiskWithDonorsStack
8177
data={vDiskToShow}
82-
nodes={nodes}
8378
compact
79+
inactive={inactive}
8480
showPopup={highlightedVDisk === vDiskId}
8581
onShowPopup={() => setHighlightedVDisk(vDiskId)}
8682
onHidePopup={() => setHighlightedVDisk(undefined)}

‎src/containers/Storage/PDisk/PDisk.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import {PDiskPopup} from '../../../components/PDiskPopup/PDiskPopup';
66
import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
77
import routes, {createHref, getPDiskPagePath} from '../../../routes';
88
import {useDiskPagesAvailable} from '../../../store/reducers/capabilities/hooks';
9-
import {selectNodesMap} from '../../../store/reducers/nodesList';
109
import {valueIsDefined} from '../../../utils';
1110
import {cn} from '../../../utils/cn';
1211
import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
1312
import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
14-
import {useTypedSelector} from '../../../utils/hooks';
1513
import {STRUCTURE} from '../../Node/NodePages';
14+
import {isVdiskActive} from '../utils';
15+
import type {VDiskViewContext} from '../utils';
1616

1717
import './PDisk.scss';
1818

@@ -21,27 +21,26 @@ const b = cn('pdisk-storage');
2121
interface PDiskProps {
2222
data?: PreparedPDisk;
2323
vDisks?: PreparedVDisk[];
24-
inactiveVdisks?: PreparedVDisk[];
2524
showPopup?: boolean;
2625
onShowPopup?: VoidFunction;
2726
onHidePopup?: VoidFunction;
2827
className?: string;
2928
progressBarClassName?: string;
29+
viewContext?: VDiskViewContext;
3030
}
3131

3232
export const PDisk = ({
3333
data = {},
3434
vDisks,
35-
inactiveVdisks,
3635
showPopup,
3736
onShowPopup,
3837
onHidePopup,
3938
className,
4039
progressBarClassName,
40+
viewContext,
4141
}: PDiskProps) => {
4242
const [isPopupVisible, setIsPopupVisible] = React.useState(false);
4343

44-
const nodes = useTypedSelector(selectNodesMap);
4544
const diskPagesAvailable = useDiskPagesAvailable();
4645

4746
const anchor = React.useRef(null);
@@ -79,7 +78,7 @@ export const PDisk = ({
7978
>
8079
<VDiskWithDonorsStack
8180
data={vdisk}
82-
inactive={inactiveVdisks?.includes(vdisk)}
81+
inactive={!isVdiskActive(vdisk, viewContext)}
8382
stackClassName={b('donors-stack')}
8483
compact
8584
/>
@@ -118,12 +117,7 @@ export const PDisk = ({
118117
<div className={b('media-type')}>{data.Type}</div>
119118
</InternalLink>
120119
</div>
121-
<PDiskPopup
122-
data={data}
123-
nodes={nodes}
124-
anchorRef={anchor}
125-
open={isPopupVisible || showPopup}
126-
/>
120+
<PDiskPopup data={data} anchorRef={anchor} open={isPopupVisible || showPopup} />
127121
</React.Fragment>
128122
);
129123
};

‎src/containers/Storage/PaginatedStorageGroups.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,10 @@ export function PaginatedStorageGroups(props: PaginatedStorageProps) {
5252
function StorageGroupsComponent({database, nodeId, parentContainer}: PaginatedStorageProps) {
5353
const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams();
5454

55-
const {columnsToShow, columnsToSelect, setColumns} =
56-
useStorageGroupsSelectedColumns(visibleEntities);
55+
const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
56+
visibleEntities,
57+
nodeId,
58+
});
5759

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

92-
const {columnsToShow, columnsToSelect, setColumns} =
93-
useStorageGroupsSelectedColumns(visibleEntities);
94+
const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({
95+
visibleEntities,
96+
nodeId,
97+
});
9498

9599
const {currentData, isFetching, error} = storageApi.useGetStorageGroupsInfoQuery(
96100
{

‎src/containers/Storage/Storage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
8383
columnsToShow: storageGroupsColumnsToShow,
8484
columnsToSelect: storageGroupsColumnsToSelect,
8585
setColumns: setStorageGroupsSelectedColumns,
86-
} = useStorageGroupsSelectedColumns(visibleEntities);
86+
} = useStorageGroupsSelectedColumns({visibleEntities, nodeId: nodeId?.toString()});
8787

8888
const nodesQuery = storageApi.useGetStorageNodesInfoQuery(
8989
{

0 commit comments

Comments
 (0)