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

…1369)
ydb-platform · Oct 1, 2024 · 446019f · 446019f
1 parent 93dd920
commit 446019f
Show file tree

Hide file tree

Showing 19 changed files with 141 additions and 135 deletions.
diff --git a/src/components/PDiskPopup/PDiskPopup.tsx b/src/components/PDiskPopup/PDiskPopup.tsx
@@ -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';
@@ -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[] = [
@@ -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) {
@@ -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

diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx
@@ -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';
@@ -19,7 +18,6 @@ const b = cn('ydb-vdisk-component');
 
 export interface VDiskProps {
     data?: PreparedVDisk;
-    nodes?: NodesMap;
     compact?: boolean;
     inactive?: boolean;
     showPopup?: boolean;
@@ -30,7 +28,6 @@ export interface VDiskProps {
 
 export const VDisk = ({
     data = {},
-    nodes,
     compact,
     inactive,
     showPopup,
@@ -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>
     );
 };
diff --git a/src/components/VDiskPopup/VDiskPopup.tsx b/src/components/VDiskPopup/VDiskPopup.tsx
@@ -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';
@@ -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 (

diff --git a/src/containers/Storage/Disks/Disks.tsx b/src/containers/Storage/Disks/Disks.tsx
@@ -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) {
@@ -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}
+                    />
+                ))}
             </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};
 
@@ -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)}

diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx
@@ -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';
 
@@ -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);
@@ -79,7 +78,7 @@ export const PDisk = ({
                         >
                             <VDiskWithDonorsStack
                                 data={vdisk}
-                                inactive={inactiveVdisks?.includes(vdisk)}
+                                inactive={!isVdiskActive(vdisk, viewContext)}
                                 stackClassName={b('donors-stack')}
                                 compact
                             />
@@ -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>
     );
 };
diff --git a/src/containers/Storage/PaginatedStorageGroups.tsx b/src/containers/Storage/PaginatedStorageGroups.tsx
@@ -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 (
@@ -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(
         {

diff --git a/src/containers/Storage/Storage.tsx b/src/containers/Storage/Storage.tsx
@@ -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(
         {