fix(Storage): get nodes hosts from /nodelist

Author: artemmufazalov

src/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -3,6 +3,8 @@ import cn from 'bem-cn-lite';
 
 import {Popup, PopupProps} from '@gravity-ui/uikit';
 
+import type {NodesMap} from '../../../types/store/nodesList';
+
 import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
@@ -17,12 +19,7 @@ const b = cn('pdisk-storage-popup');
 
 const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
 
-export type NodesHosts = {
-    // NodeId => Host
-    [nodeId: number]: string;
-}
-
-export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesHosts) => {
+export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesMap) => {
     const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = data;
 
     const pdiskData: InfoViewerItem[] = [
@@ -35,8 +32,8 @@ export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesHosts) => {
         pdiskData.push({label: 'Node Id', value: NodeId});
     }
 
-    if (nodes && NodeId && nodes[NodeId]) {
-        pdiskData.push({label: 'Host', value: nodes[NodeId]});
+    if (nodes && NodeId && nodes.get(NodeId)) {
+        pdiskData.push({label: 'Host', value: nodes.get(NodeId)});
     }
 
     if (Path) {
@@ -61,7 +58,7 @@ export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesHosts) => {
 
 interface PDiskPopupProps extends PopupProps {
     data: TPDiskStateInfo;
-    nodes?: NodesHosts;
+    nodes?: NodesMap;
 }
 
 export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {

src/containers/Storage/Storage.js

@@ -22,7 +22,6 @@ import {
     setVisibleEntities,
     setStorageFilter,
     setUsageFilter,
-    getNodesObject,
     StorageTypes,
     setStorageType,
     setNodesUptimeFilter,
@@ -32,7 +31,7 @@ import {
     getStorageNodesCount,
     getUsageFilterOptions,
 } from '../../store/reducers/storage';
-import {getNodesList} from '../../store/reducers/nodesList';
+import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
 import StorageGroups from './StorageGroups/StorageGroups';
 import StorageNodes from './StorageNodes/StorageNodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
@@ -345,7 +344,7 @@ function mapStateToProps(state) {
         flatListStorageEntities: getFilteredEntities(state),
         groupsCount: getStoragePoolsGroupsCount(state),
         autorefresh: state.schema.autorefresh,
-        nodes: getNodesObject(state),
+        nodes: selectNodesMap(state),
         nodesCount: getStorageNodesCount(state),
         loading,
         wasLoaded,

src/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -3,6 +3,8 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
+import type {NodesMap} from '../../../types/store/nodesList';
+
 import shieldIcon from '../../../assets/icons/shield.svg';
 
 import {Stack} from '../../../components/Stack/Stack';
@@ -45,7 +47,7 @@ type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
 interface StorageGroupsProps {
     data: any;
-    nodes: any;
+    nodes: NodesMap;
     tableSettings: Settings;
     visibleEntities: keyof typeof VisibleEntities;
     onShowAll?: VoidFunction;

src/containers/Storage/VDisk/VDisk.tsx

@@ -1,6 +1,8 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
+import type {NodesMap} from '../../../types/store/nodesList';
+
 import {InternalLink} from '../../../components/InternalLink';
 
 import routes, {createHref} from '../../../routes';
@@ -12,7 +14,6 @@ import {isFullVDiskData} from '../../../utils/storage';
 import {STRUCTURE} from '../../Node/NodePages';
 
 import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
-import type {NodesHosts} from '../PDiskPopup';
 import {VDiskPopup} from '../VDiskPopup';
 
 import type {IUnavailableDonor} from '../utils/types';
@@ -50,7 +51,7 @@ const getColorSeverity = (color?: EFlag) => {
 interface VDiskProps {
     data?: TVDiskStateInfo | IUnavailableDonor;
     poolName?: string;
-    nodes?: NodesHosts;
+    nodes?: NodesMap;
     compact?: boolean;
 }
 

src/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -3,6 +3,8 @@ import cn from 'bem-cn-lite';
 
 import {Label, Popup, PopupProps} from '@gravity-ui/uikit';
 
+import type {NodesMap} from '../../../types/store/nodesList';
+
 import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
@@ -13,7 +15,7 @@ import {isFullVDiskData} from '../../../utils/storage';
 
 import type {IUnavailableDonor} from '../utils/types';
 
-import {NodesHosts, preparePDiskData} from '../PDiskPopup';
+import {preparePDiskData} from '../PDiskPopup';
 
 import './VDiskPopup.scss';
 
@@ -128,7 +130,7 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
 interface VDiskPopupProps extends PopupProps {
     data: TVDiskStateInfo | IUnavailableDonor;
     poolName?: string;
-    nodes?: NodesHosts;
+    nodes?: NodesMap;
 }
 
 export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) => {

src/store/reducers/nodesList.ts

@@ -1,6 +1,11 @@
 import type {Reducer} from 'redux';
 
-import type {NodesListState, NodesListAction} from '../../types/store/nodesList';
+import type {
+    NodesListState,
+    NodesListAction,
+    NodesListRootStateSlice,
+    NodesMap,
+} from '../../types/store/nodesList';
 import '../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
@@ -39,13 +44,17 @@ const nodesList: Reducer<NodesListState, NodesListAction> = (state = initialStat
 
 export function getNodesList() {
     return createApiRequest({
-        request: window.api.getNodeInfo(),
+        request: window.api.getNodesList(),
         actions: FETCH_NODES_LIST,
-        dataHandler: (data) => {
-            const {SystemStateInfo: nodes = []} = data;
-            return nodes;
-        },
     });
 }
 
+export const selectNodesMap = (state: NodesListRootStateSlice) =>
+    state.nodesList.data?.reduce<NodesMap>((nodesMap, node) => {
+        if (node.Id && node.Host) {
+            nodesMap.set(node.Id, node.Host);
+        }
+        return nodesMap;
+    }, new Map());
+
 export default nodesList;

src/store/reducers/storage.js

@@ -204,15 +204,6 @@ export const getUsageFilter = (state) => state.storage.usageFilter;
 export const getVisibleEntities = (state) => state.storage.visible;
 export const getNodesUptimeFilter = (state) => state.storage.nodesUptimeFilter;
 export const getStorageType = (state) => state.storage.type;
-export const getNodesObject = (state) =>
-    _.reduce(
-        state.nodesList?.data,
-        (acc, el) => {
-            acc[el.NodeId] = el.Host;
-            return acc;
-        },
-        {},
-    );
 
 const FLAGS_POINTS = {
     Green: 1,

src/types/store/nodesList.ts

@@ -2,17 +2,23 @@ import {FETCH_NODES_LIST} from '../../store/reducers/nodesList';
 
 import type {ApiRequestAction} from '../../store/utils';
 import type {IResponseError} from '../api/error';
-import type {TSystemStateInfo} from '../api/nodes';
+import type {TEvNodesInfo} from '../api/nodesList';
 
 export interface NodesListState {
     loading: boolean;
     wasLoaded: boolean;
-    data?: TSystemStateInfo[];
+    data?: TEvNodesInfo;
     error?: IResponseError;
 }
 
 export type NodesListAction = ApiRequestAction<
     typeof FETCH_NODES_LIST,
-    TSystemStateInfo[],
+    TEvNodesInfo,
     IResponseError
 >;
+
+export type NodesMap = Map<number, string>;
+
+export interface NodesListRootStateSlice {
+    nodesList: NodesListState;
+}