fix(PDisk): show node host name in popup

Author: artemmufazalov

src/containers/Storage/Disks/Disks.tsx

@@ -90,7 +90,7 @@ function VDiskItem({nodes, vDisk, highlightedVDisk, setHighlightedVDisk}: DisksI
     );
 }
 
-function PDiskItem({vDisk, highlightedVDisk, setHighlightedVDisk}: DisksItemProps) {
+function PDiskItem({nodes, vDisk, highlightedVDisk, setHighlightedVDisk}: DisksItemProps) {
     const vDiskId = stringifyVdiskId(vDisk.VDiskId);
 
     if (!vDisk.PDisk) {
@@ -102,6 +102,7 @@ function PDiskItem({vDisk, highlightedVDisk, setHighlightedVDisk}: DisksItemProp
             className={b('pdisk-item')}
             progressBarClassName={b('pdisk-progress-bar')}
             data={vDisk.PDisk}
+            nodes={nodes}
             showPopup={highlightedVDisk === vDiskId}
             onShowPopup={() => setHighlightedVDisk(vDiskId)}
             onHidePopup={() => setHighlightedVDisk(undefined)}

src/containers/Storage/PDisk/PDisk.tsx

@@ -7,6 +7,7 @@ import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsSta
 import routes, {createHref, getPDiskPagePath} from '../../../routes';
 import {useDiskPagesAvailable} from '../../../store/reducers/capabilities/hooks';
 import type {TVDiskStateInfo} from '../../../types/api/vdisk';
+import type {NodesMap} from '../../../types/store/nodesList';
 import {valueIsDefined} from '../../../utils';
 import {cn} from '../../../utils/cn';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
@@ -20,6 +21,7 @@ const b = cn('pdisk-storage');
 interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: TVDiskStateInfo[];
+    nodes?: NodesMap;
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
@@ -30,6 +32,7 @@ interface PDiskProps {
 export const PDisk = ({
     data = {},
     vDisks,
+    nodes,
     showPopup,
     onShowPopup,
     onHidePopup,
@@ -113,7 +116,12 @@ export const PDisk = ({
                     <div className={b('media-type')}>{data.Type}</div>
                 </InternalLink>
             </div>
-            <PDiskPopup data={data} anchorRef={anchor} open={isPopupVisible || showPopup} />
+            <PDiskPopup
+                data={data}
+                nodes={nodes}
+                anchorRef={anchor}
+                open={isPopupVisible || showPopup}
+            />
         </React.Fragment>
     );
 };

src/containers/Storage/StorageNodes/columns/columns.tsx

@@ -1,7 +1,6 @@
 import DataTable from '@gravity-ui/react-data-table';
 
 import {NodeHostWrapper} from '../../../../components/NodeHostWrapper/NodeHostWrapper';
-import type {AdditionalNodesProps} from '../../../../types/additionalProps';
 import {cn} from '../../../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../../../utils/constants';
 import {isSortableNodesProperty} from '../../../../utils/nodes';
@@ -14,10 +13,11 @@ import './StorageNodesColumns.scss';
 
 const b = cn('ydb-storage-nodes-columns');
 
-const getStorageNodesColumns = (
-    additionalNodesProps: AdditionalNodesProps | undefined,
-    database?: string,
-) => {
+const getStorageNodesColumns = ({
+    additionalNodesProps,
+    database,
+    nodes,
+}: GetStorageNodesColumnsParams) => {
     const getNodeRef = additionalNodesProps?.getNodeRef;
 
     const columns: StorageNodesColumn[] = [
@@ -81,7 +81,7 @@ const getStorageNodesColumns = (
 
                             return (
                                 <div className={b('pdisks-item')} key={pDisk.PDiskId}>
-                                    <PDisk data={pDisk} vDisks={vDisks} />
+                                    <PDisk data={pDisk} vDisks={vDisks} nodes={nodes} />
                                 </div>
                             );
                         })}
@@ -98,11 +98,8 @@ const getStorageNodesColumns = (
     return columns;
 };
 
-export const getPreparedStorageNodesColumns = ({
-    additionalNodesProps,
-    database,
-}: GetStorageNodesColumnsParams) => {
-    const rawColumns = getStorageNodesColumns(additionalNodesProps, database);
+export const getPreparedStorageNodesColumns = (params: GetStorageNodesColumnsParams) => {
+    const rawColumns = getStorageNodesColumns(params);
 
     const sortableColumns = rawColumns.map((column) => ({
         ...column,

src/containers/Storage/StorageNodes/columns/hooks.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 
+import {selectNodesMap} from '../../../../store/reducers/nodesList';
 import {VISIBLE_ENTITIES} from '../../../../store/reducers/storage/constants';
+import {useTypedSelector} from '../../../../utils/hooks';
 import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 
 import {getPreparedStorageNodesColumns} from './columns';
@@ -18,9 +20,11 @@ export function useStorageNodesSelectedColumns({
     database,
     additionalNodesProps,
 }: GetStorageNodesColumnsParams) {
+    const nodes = useTypedSelector(selectNodesMap);
+
     const columns = React.useMemo(() => {
-        return getPreparedStorageNodesColumns({database, additionalNodesProps});
-    }, [database, additionalNodesProps]);
+        return getPreparedStorageNodesColumns({database, additionalNodesProps, nodes});
+    }, [database, additionalNodesProps, nodes]);
 
     const requiredColumns = React.useMemo(() => {
         if (visibleEntities === VISIBLE_ENTITIES.missing) {

src/containers/Storage/StorageNodes/columns/types.ts

@@ -3,6 +3,7 @@ import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
 import type {Column as PaginatedTableColumn} from '../../../../components/PaginatedTable';
 import type {PreparedStorageNode, VisibleEntities} from '../../../../store/reducers/storage/types';
 import type {AdditionalNodesProps} from '../../../../types/additionalProps';
+import type {NodesMap} from '../../../../types/store/nodesList';
 
 export type StorageNodesColumn = PaginatedTableColumn<PreparedStorageNode> &
     DataTableColumn<PreparedStorageNode>;
@@ -11,4 +12,5 @@ export interface GetStorageNodesColumnsParams {
     additionalNodesProps: AdditionalNodesProps | undefined;
     visibleEntities?: VisibleEntities;
     database?: string;
+    nodes?: NodesMap;
 }