ydb-embedded-ui 4.5.1 → 4.5.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.1...v4.5.2) (2023-06-06)
+
+
+### Bug Fixes
+
+* **Versions:** enable table dynamic render ([#416](https://github.com/ydb-platform/ydb-embedded-ui/issues/416)) ([3c877ea](https://github.com/ydb-platform/ydb-embedded-ui/commit/3c877ea88a0c4036213b38099676f473cf3ac2d6))
+
 ## [4.5.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.0...v4.5.1) (2023-06-02)
 
 

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
 import ProgressViewer from '../ProgressViewer/ProgressViewer';
-import PoolUsage from '../PoolUsage/PoolUsage';
+import {PoolUsage} from '../PoolUsage/PoolUsage';
 
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
 import {calcUptime} from '../../utils';

package/dist/components/PoolUsage/PoolUsage.scss

@@ -1,4 +1,4 @@
-.pool-usage {
+.ydb-pool-usage {
     font-size: var(--yc-text-body-2-font-size);
     line-height: var(--yc-text-body-2-line-height);
     &__info {

package/dist/components/PoolUsage/PoolUsage.tsx

@@ -0,0 +1,50 @@
+import block from 'bem-cn-lite';
+
+import type {TPoolStats} from '../../types/api/nodes';
+
+import './PoolUsage.scss';
+
+const b = block('ydb-pool-usage');
+
+const getLineType = (fillWidth: number) => {
+    let fillColor = 'green';
+    if (fillWidth > 60 && fillWidth <= 80) {
+        fillColor = 'yellow';
+    } else if (fillWidth > 80) {
+        fillColor = 'red';
+    }
+
+    return fillColor;
+};
+
+interface PoolUsageProps {
+    data?: TPoolStats;
+}
+
+export const PoolUsage = ({data: pool = {}}: PoolUsageProps) => {
+    const {Threads, Name = 'Unknown', Usage = 0} = pool;
+    const dataExist = Usage && Threads;
+
+    const value = Math.floor(Usage * 100);
+    const fillWidth = value > 100 ? 100 : value;
+
+    return (
+        <div className={b()}>
+            <div className={b('info')}>
+                <div className={b('pool-name')}>{Name}</div>
+                {dataExist && (
+                    <div className={b('value')}>
+                        <div className={b('percents')}>{value < 1 ? '<1' : value}%</div>
+                        <div className={b('threads')}>(×{Threads})</div>
+                    </div>
+                )}
+            </div>
+            <div className={b('visual')}>
+                <div
+                    className={b('usage-line', {type: getLineType(fillWidth)})}
+                    style={{width: `${fillWidth}%`}}
+                />
+            </div>
+        </div>
+    );
+};

package/dist/containers/Node/Node.tsx

@@ -15,7 +15,7 @@ import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
-import {getNodeInfo, resetNode} from '../../store/reducers/node';
+import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {setHeader} from '../../store/reducers/header';
 import {AutoFetcher} from '../../utils/autofetcher';

package/dist/containers/Node/NodeStructure/NodeStructure.tsx

@@ -1,16 +1,19 @@
 import {useEffect, useRef, useMemo} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import url from 'url';
 import _ from 'lodash';
 
 import cn from 'bem-cn-lite';
 
-import {PDisk} from './Pdisk';
 import {Loader} from '../.././../components/Loader';
 
-import {getNodeStructure, selectNodeStructure} from '../../../store/reducers/node';
+import {getNodeStructure} from '../../../store/reducers/node/node';
+import {selectNodeStructure} from '../../../store/reducers/node/selectors';
 
 import {AutoFetcher} from '../../../utils/autofetcher';
+import {useTypedSelector} from '../../../utils/hooks';
+
+import {PDisk} from './Pdisk';
 
 import './NodeStructure.scss';
 
@@ -32,20 +35,19 @@ interface NodeStructureProps {
 
 const autofetcher = new AutoFetcher();
 
-function NodeStructure(props: NodeStructureProps) {
+function NodeStructure({nodeId, className, additionalNodesInfo}: NodeStructureProps) {
     const dispatch = useDispatch();
 
-    const nodeStructure: any = useSelector(selectNodeStructure);
+    const nodeStructure = useTypedSelector(selectNodeStructure);
 
-    const loadingStructure = useSelector((state: any) => state.node.loadingStructure);
-    const wasLoadedStructure = useSelector((state: any) => state.node.wasLoadedStructure);
-    const nodeData = useSelector((state: any) => state.node?.data?.SystemStateInfo?.[0]);
+    const {loadingStructure, wasLoadedStructure} = useTypedSelector((state) => state.node);
+    const nodeData = useTypedSelector((state) => state.node?.data?.SystemStateInfo?.[0]);
 
     const nodeHref = useMemo(() => {
-        return props.additionalNodesInfo?.getNodeRef
-            ? props.additionalNodesInfo.getNodeRef(nodeData)
+        return additionalNodesInfo?.getNodeRef
+            ? additionalNodesInfo.getNodeRef(nodeData)
             : undefined;
-    }, [nodeData, props.additionalNodesInfo]);
+    }, [nodeData, additionalNodesInfo]);
 
     const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
         window.location.href,
@@ -71,16 +73,16 @@ function NodeStructure(props: NodeStructureProps) {
     }, []);
 
     useEffect(() => {
-        dispatch(getNodeStructure(props.nodeId));
+        dispatch(getNodeStructure(nodeId));
         autofetcher.start();
-        autofetcher.fetch(() => dispatch(getNodeStructure(props.nodeId)));
+        autofetcher.fetch(() => dispatch(getNodeStructure(nodeId)));
 
         return () => {
             scrolled.current = false;
             isReady.current = false;
             autofetcher.stop();
         };
-    }, [props.nodeId, dispatch]);
+    }, [nodeId, dispatch]);
 
     useEffect(() => {
         if (!_.isEmpty(nodeStructure) && scrollContainer) {
@@ -98,9 +100,9 @@ function NodeStructure(props: NodeStructureProps) {
 
             if (vdiskIdFromUrl) {
                 const vDisks = nodeStructure[pdiskIdFromUrl as string]?.vDisks;
-                const vDisk = vDisks?.find((el: any) => el.id === vdiskIdFromUrl);
+                const vDisk = vDisks?.find((el) => el.id === vdiskIdFromUrl);
                 const dataTable = vDisk ? document.querySelector('.data-table') : undefined;
-                const order = vDisk?.order;
+                const order = vDisk?.order || 0;
 
                 if (dataTable) {
                     scrollToVdisk += (dataTable as HTMLElement).offsetTop + 40 * order;
@@ -147,7 +149,7 @@ function NodeStructure(props: NodeStructureProps) {
 
     return (
         <div className={b()} ref={scrollContainerRef}>
-            <div className={props.className}>{renderContent()}</div>
+            <div className={className}>{renderContent()}</div>
         </div>
     );
 }

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -12,7 +12,7 @@ import {Icon} from '../../../../components/Icon';
 import {ProblemFilter} from '../../../../components/ProblemFilter';
 import {Illustration} from '../../../../components/Illustration';
 
-import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network';
+import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network/network';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
 import {changeFilter, ProblemFilterValues} from '../../../../store/reducers/settings/settings';
 import {AutoFetcher} from '../../../../utils/autofetcher';
@@ -361,7 +361,7 @@ class Network extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-    const {wasLoaded, loading, data: netWorkInfo} = state.network;
+    const {wasLoaded, loading, data: netWorkInfo = {}} = state.network;
     const {autorefresh} = state.schema;
     return {
         netWorkInfo,

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -6,7 +6,7 @@ import {Loader} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
-import PoolUsage from '../../../../components/PoolUsage/PoolUsage';
+import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
 import {Tablet} from '../../../../components/Tablet';
 
 import {getTenantInfo} from '../../../../store/reducers/tenant/tenant';

package/dist/containers/Tenant/Tenant.tsx

@@ -11,7 +11,7 @@ import {useTypedSelector} from '../../utils/hooks';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {setHeader} from '../../store/reducers/header';
 import {disableAutorefresh, getSchema, resetLoadingState} from '../../store/reducers/schema';
-import {getSchemaAcl} from '../../store/reducers/schemaAcl';
+import {getSchemaAcl} from '../../store/reducers/schemaAcl/schemaAcl';
 import {getTenantInfo, clearTenant} from '../../store/reducers/tenant/tenant';
 
 import SplitPane from '../../components/SplitPane';

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -17,6 +17,7 @@
         z-index: 0;
 
         overflow-x: auto;
+        overflow-y: hidden;
 
         margin-right: $margin-size;
         margin-left: $margin-size;

package/dist/containers/Versions/NodesTable/NodesTable.tsx

@@ -2,6 +2,7 @@ import DataTable, {Column} from '@gravity-ui/react-data-table';
 
 import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
 import {isUnavailableNode} from '../../../utils/nodes';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {formatBytes} from '../../../utils';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
@@ -112,9 +113,7 @@ export const NodesTable = ({nodes}: NodesTableProps) => {
             theme="yandex-cloud"
             data={nodes}
             columns={columns}
-            settings={{
-                displayIndices: false,
-            }}
+            settings={DEFAULT_TABLE_SETTINGS}
         />
     );
 };

package/dist/services/api.ts

@@ -99,8 +99,8 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             filter,
             nodeId,
         }: {
-            tenant: string;
-            filter: string;
+            tenant?: string;
+            filter?: string;
             nodeId: string;
         },
         {concurrentId}: AxiosOptions = {},

package/dist/store/reducers/index.ts

@@ -5,13 +5,13 @@ import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
 import storage from './storage';
-import node from './node';
+import node from './node/node';
 import tooltip from './tooltip';
 import tablets from './tablets';
 import heatmap from './heatmap';
 import schema from './schema';
 import host from './host';
-import network from './network';
+import network from './network/network';
 import tenants from './tenants/tenants';
 import tablet from './tablet';
 import topic from './topic';
@@ -23,7 +23,7 @@ import settings from './settings/settings';
 import preview from './preview';
 import nodesList from './nodesList';
 import describe from './describe';
-import schemaAcl from './schemaAcl';
+import schemaAcl from './schemaAcl/schemaAcl';
 import executeTopQueries from './executeTopQueries';
 import healthcheckInfo from './healthcheckInfo';
 import shardsWorkload from './shardsWorkload';

package/dist/store/reducers/{network.js → network/network.ts}

@@ -1,20 +1,23 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
+import {Reducer} from 'redux';
 
-const FETCH_ALL_NODES_NETWORK = createRequestActionTypes(
-    'ALL_NODES_NETWORK',
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {NetworkAction, NetworkState} from './types';
+
+export const FETCH_ALL_NODES_NETWORK = createRequestActionTypes(
+    'network',
     'FETCH_ALL_NODES_NETWORK',
 );
 
 const SET_DATA_WAS_NOT_LOADED = 'network/SET_DATA_WAS_NOT_LOADED';
 
 const initialState = {
-    data: {},
     loading: false,
     wasLoaded: false,
 };
 
-const network = (state = initialState, action) => {
+const network: Reducer<NetworkState, NetworkAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_ALL_NODES_NETWORK.REQUEST: {
             return {
@@ -53,10 +56,10 @@ const network = (state = initialState, action) => {
 export const setDataWasNotLoaded = () => {
     return {
         type: SET_DATA_WAS_NOT_LOADED,
-    };
+    } as const;
 };
 
-export const getNetworkInfo = (tenant) => {
+export const getNetworkInfo = (tenant: string) => {
     return createApiRequest({
         request: window.api.getNetwork(tenant),
         actions: FETCH_ALL_NODES_NETWORK,

package/dist/store/reducers/network/types.ts

@@ -0,0 +1,16 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {TNetInfo} from '../../../types/api/netInfo';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_ALL_NODES_NETWORK, setDataWasNotLoaded} from './network';
+
+export interface NetworkState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: TNetInfo;
+    error?: IResponseError;
+}
+
+export type NetworkAction =
+    | ApiRequestAction<typeof FETCH_ALL_NODES_NETWORK, TNetInfo, IResponseError>
+    | ReturnType<typeof setDataWasNotLoaded>;

package/dist/store/reducers/node/node.ts

@@ -0,0 +1,102 @@
+import {Reducer} from 'redux';
+
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {NodeAction, NodeState} from './types';
+
+export const FETCH_NODE = createRequestActionTypes('node', 'FETCH_NODE');
+export const FETCH_NODE_STRUCTURE = createRequestActionTypes('node', 'FETCH_NODE_STRUCTURE');
+
+const RESET_NODE = 'node/RESET_NODE';
+
+const initialState = {
+    data: {},
+    loading: true,
+    wasLoaded: false,
+    nodeStructure: {},
+    loadingStructure: true,
+    wasLoadedStructure: false,
+};
+
+const node: Reducer<NodeState, NodeAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_NODE.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_NODE.SUCCESS: {
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_NODE.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        case FETCH_NODE_STRUCTURE.REQUEST: {
+            return {
+                ...state,
+                loadingStructure: true,
+            };
+        }
+        case FETCH_NODE_STRUCTURE.SUCCESS: {
+            return {
+                ...state,
+                nodeStructure: action.data,
+                loadingStructure: false,
+                wasLoadedStructure: true,
+                errorStructure: undefined,
+            };
+        }
+        case FETCH_NODE_STRUCTURE.FAILURE: {
+            return {
+                ...state,
+                errorStructure: action.error,
+                loadingStructure: false,
+            };
+        }
+        case RESET_NODE: {
+            return {
+                ...state,
+                data: {},
+                wasLoaded: false,
+                nodeStructure: {},
+                wasLoadedStructure: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export const getNodeInfo = (id: string) => {
+    return createApiRequest({
+        request: window.api.getNodeInfo(id),
+        actions: FETCH_NODE,
+    });
+};
+
+export const getNodeStructure = (nodeId: string) => {
+    return createApiRequest({
+        request: window.api.getStorageInfo({nodeId}, {concurrentId: 'getNodeStructure'}),
+        actions: FETCH_NODE_STRUCTURE,
+    });
+};
+
+export function resetNode() {
+    return {
+        type: RESET_NODE,
+    } as const;
+}
+
+export default node;

package/dist/store/reducers/node/selectors.ts

@@ -0,0 +1,59 @@
+import type {Selector} from 'reselect';
+import {createSelector} from 'reselect';
+
+import {stringifyVdiskId} from '../../../utils';
+
+import type {
+    NodeStateSlice,
+    PreparedNodeStructure,
+    PreparedStructureVDisk,
+    RawNodeStructure,
+} from './types';
+
+const selectNodeId = (state: NodeStateSlice) => state.node?.data?.SystemStateInfo?.[0].NodeId;
+
+const selectRawNodeStructure = (state: NodeStateSlice) => state.node?.nodeStructure;
+
+export const selectNodeStructure: Selector<NodeStateSlice, PreparedNodeStructure> = createSelector(
+    [selectNodeId, selectRawNodeStructure],
+    (nodeId, storageInfo) => {
+        const pools = storageInfo?.StoragePools;
+        const structure: RawNodeStructure = {};
+
+        pools?.forEach((pool) => {
+            const groups = pool.Groups;
+            groups?.forEach((group) => {
+                const vDisks = group.VDisks?.filter((el) => el.NodeId === nodeId);
+                vDisks?.forEach((vd) => {
+                    const vDiskId = stringifyVdiskId(vd.VDiskId);
+                    const pDiskId = vd.PDisk?.PDiskId;
+                    if (!structure[String(pDiskId)]) {
+                        structure[String(pDiskId)] = {vDisks: {}, ...vd.PDisk};
+                    }
+                    structure[String(pDiskId)].vDisks[vDiskId] = {
+                        ...vd,
+                        // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
+                        StoragePoolName: pool.Name,
+                    };
+                });
+            });
+        });
+
+        const structureWithVdisksArray = Object.keys(structure).reduce<PreparedNodeStructure>(
+            (preparedStructure, el) => {
+                const vDisks = structure[el].vDisks;
+                const vDisksArray = Object.keys(vDisks).reduce<PreparedStructureVDisk[]>(
+                    (acc, key, index) => {
+                        acc.push({...vDisks[key], id: key, order: index});
+                        return acc;
+                    },
+                    [],
+                );
+                preparedStructure[el] = {...structure[el], vDisks: vDisksArray};
+                return preparedStructure;
+            },
+            {},
+        );
+        return structureWithVdisksArray;
+    },
+);

package/dist/store/reducers/node/types.ts

@@ -0,0 +1,44 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {TPDiskStateInfo} from '../../../types/api/pdisk';
+import type {TStorageInfo} from '../../../types/api/storage';
+import type {TEvSystemStateResponse} from '../../../types/api/systemState';
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_NODE, FETCH_NODE_STRUCTURE, resetNode} from './node';
+
+interface RawStructurePDisk extends TPDiskStateInfo {
+    vDisks: Record<string, TVDiskStateInfo>;
+}
+
+export type RawNodeStructure = Record<string, RawStructurePDisk>;
+
+export interface PreparedStructureVDisk extends TVDiskStateInfo {
+    id: string;
+    order: number;
+}
+
+export interface PreparedStructurePDisk extends TPDiskStateInfo {
+    vDisks: PreparedStructureVDisk[];
+}
+
+export type PreparedNodeStructure = Record<string, PreparedStructurePDisk>;
+
+export interface NodeState {
+    data: TEvSystemStateResponse;
+    loading: boolean;
+    wasLoaded: boolean;
+
+    nodeStructure: TStorageInfo;
+    loadingStructure: boolean;
+    wasLoadedStructure: boolean;
+}
+
+export type NodeAction =
+    | ApiRequestAction<typeof FETCH_NODE, TEvSystemStateResponse, IResponseError>
+    | ApiRequestAction<typeof FETCH_NODE_STRUCTURE, TStorageInfo, IResponseError>
+    | ReturnType<typeof resetNode>;
+
+export interface NodeStateSlice {
+    node: NodeState;
+}

package/dist/store/reducers/{schemaAcl.js → schemaAcl/schemaAcl.ts}

@@ -1,10 +1,18 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
-import _ from 'lodash';
+import type {Reducer} from 'redux';
 
-const FETCH_SCHEMA_ACL = createRequestActionTypes('schemaAcl', 'FETCH_SCHEMA_ACL');
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
 
-const schemaAcl = function z(state = {loading: false, wasLoaded: false, acl: undefined}, action) {
+import type {SchemaAclAction, SchemaAclState} from './types';
+
+export const FETCH_SCHEMA_ACL = createRequestActionTypes('schemaAcl', 'FETCH_SCHEMA_ACL');
+
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+};
+
+const schemaAcl: Reducer<SchemaAclState, SchemaAclAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_SCHEMA_ACL.REQUEST: {
             return {
@@ -13,13 +21,16 @@ const schemaAcl = function z(state = {loading: false, wasLoaded: false, acl: und
             };
         }
         case FETCH_SCHEMA_ACL.SUCCESS: {
+            const acl = action.data.Common?.ACL;
+            const owner = action.data.Common?.Owner;
+
             return {
                 ...state,
-                error: undefined,
-                acl: _.get(action.data, 'Common.ACL'),
-                owner: _.get(action.data, 'Common.Owner'),
+                acl,
+                owner,
                 loading: false,
                 wasLoaded: true,
+                error: undefined,
             };
         }
         case FETCH_SCHEMA_ACL.FAILURE: {
@@ -34,7 +45,7 @@ const schemaAcl = function z(state = {loading: false, wasLoaded: false, acl: und
     }
 };
 
-export function getSchemaAcl({path}) {
+export function getSchemaAcl({path}: {path: string}) {
     return createApiRequest({
         request: window.api.getSchemaAcl({path}),
         actions: FETCH_SCHEMA_ACL,

package/dist/store/reducers/schemaAcl/types.ts

@@ -0,0 +1,15 @@
+import type {TACE, TMetaInfo} from '../../../types/api/acl';
+import type {IResponseError} from '../../../types/api/error';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_SCHEMA_ACL} from './schemaAcl';
+
+export interface SchemaAclState {
+    loading: boolean
+    wasLoaded: boolean
+    acl?: TACE[]
+    owner?: string
+    error?: IResponseError
+}
+
+export type SchemaAclAction = ApiRequestAction<typeof FETCH_SCHEMA_ACL, TMetaInfo, IResponseError>;

package/dist/types/api/acl.ts

@@ -16,7 +16,7 @@ export interface TMetaCommonInfo {
     ACL?: TACE[];
 }
 
-interface TACE {
+export interface TACE {
     AccessType: string;
     AccessRights?: string[];
     Subject: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "files": [
     "dist"
   ],

package/dist/components/PoolUsage/PoolUsage.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import './PoolUsage.scss';
-import PropTypes from 'prop-types';
-const b = cn('pool-usage');
-
-const formatUsage = (usage) => (typeof usage === 'undefined' ? '' : Math.floor(usage * 100));
-const getLineType = (fillWidth) => {
-    let fillColor = 'green';
-    if (fillWidth > 60 && fillWidth <= 80) {
-        fillColor = 'yellow';
-    } else if (fillWidth > 80) {
-        fillColor = 'red';
-    }
-
-    return fillColor;
-};
-export class PoolUsage extends React.Component {
-    static propTypes = {
-        data: PropTypes.object.isRequired,
-    };
-
-    render() {
-        const {data: pool = {}} = this.props;
-
-        const {Threads, Name = 'Unknown', Usage} = pool;
-        const dataExist = Usage && Threads;
-
-        const value = formatUsage(pool.Usage);
-        const fillWidth = value > 100 ? 100 : value;
-
-        return (
-            <div className={b()}>
-                <div className={b('info')}>
-                    <div className={b('pool-name')}>{Name}</div>
-                    {dataExist && (
-                        <div className={b('value')}>
-                            <div className={b('percents')}>{value < 1 ? '<1' : value}%</div>
-                            <div className={b('threads')}>(×{Threads})</div>
-                        </div>
-                    )}
-                </div>
-                <div className={b('visual')}>
-                    <div
-                        className={b('usage-line', {type: getLineType(fillWidth)})}
-                        style={{width: `${fillWidth}%`}}
-                    />
-                </div>
-            </div>
-        );
-    }
-}
-
-export default PoolUsage;

package/dist/store/reducers/node.js

@@ -1,141 +0,0 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
-import {stringifyVdiskId} from '../../utils';
-import {createSelector} from 'reselect';
-
-const FETCH_NODE = createRequestActionTypes('node', 'FETCH_NODE');
-const FETCH_NODE_STRUCTURE = createRequestActionTypes('node', 'FETCH_NODE_STRUCTURE');
-const RESET_NODE = 'node/RESET_NODE';
-
-const node = (
-    state = {
-        data: {},
-        loading: true,
-        wasLoaded: false,
-        nodeStructure: {},
-        loadingStructure: true,
-        wasLoadedStructure: false,
-    },
-    action,
-) => {
-    switch (action.type) {
-        case FETCH_NODE.REQUEST: {
-            return {
-                ...state,
-                loading: true,
-            };
-        }
-        case FETCH_NODE.SUCCESS: {
-            return {
-                ...state,
-                data: action.data,
-                loading: false,
-                wasLoaded: true,
-                error: undefined,
-            };
-        }
-        case FETCH_NODE.FAILURE: {
-            return {
-                ...state,
-                error: action.error,
-                loading: false,
-            };
-        }
-        case FETCH_NODE_STRUCTURE.REQUEST: {
-            return {
-                ...state,
-                loadingStructure: true,
-            };
-        }
-        case FETCH_NODE_STRUCTURE.SUCCESS: {
-            return {
-                ...state,
-                nodeStructure: action.data,
-                loadingStructure: false,
-                wasLoadedStructure: true,
-                errorStructure: undefined,
-            };
-        }
-        case FETCH_NODE_STRUCTURE.FAILURE: {
-            return {
-                ...state,
-                errorStructure: action.error,
-                loadingStructure: false,
-            };
-        }
-        case RESET_NODE: {
-            return {
-                ...state,
-                data: {},
-                wasLoaded: false,
-                nodeStructure: {},
-                wasLoadedStructure: false,
-            };
-        }
-        default:
-            return state;
-    }
-};
-
-export const getNodeInfo = (id) => {
-    return createApiRequest({
-        request: window.api.getNodeInfo(id),
-        actions: FETCH_NODE,
-    });
-};
-
-export const getNodeStructure = (nodeId) => {
-    return createApiRequest({
-        request: window.api.getStorageInfo({nodeId}, {concurrentId: 'getNodeStructure'}),
-        actions: FETCH_NODE_STRUCTURE,
-    });
-};
-
-export function resetNode() {
-    return {
-        type: RESET_NODE,
-    };
-}
-
-const getNodeId = (state) => state.node?.data?.SystemStateInfo?.[0].NodeId;
-
-const getRawNodeStructure = (state) => state.node?.nodeStructure;
-
-export const selectNodeStructure = createSelector(
-    [getNodeId, getRawNodeStructure],
-    (nodeId, rawNodeStructure) => {
-        const pools = rawNodeStructure?.StoragePools;
-        const structure = {};
-        pools?.forEach((pool) => {
-            const groups = pool.Groups;
-            groups?.forEach((group) => {
-                const vDisks = group.VDisks?.filter((el) => el.NodeId === nodeId);
-                vDisks?.forEach((vd) => {
-                    const vDiskId = stringifyVdiskId(vd.VDiskId);
-                    const pDiskId = vd.PDisk?.PDiskId;
-                    if (!structure[String(pDiskId)]) {
-                        structure[String(pDiskId)] = {vDisks: {}, ...vd.PDisk};
-                    }
-                    structure[String(pDiskId)].vDisks[vDiskId] = {
-                        ...vd,
-                        // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
-                        StoragePoolName: pool.Name,
-                    };
-                });
-            });
-        });
-
-        const structureWithVdisksArray = Object.keys(structure).reduce((acc, el) => {
-            const vDisks = structure[el].vDisks;
-            const vDisksArray = Object.keys(vDisks).reduce((acc, key, index) => {
-                acc.push({...vDisks[key], id: key, order: index});
-                return acc;
-            }, []);
-            acc[el] = {...structure[el], vDisks: vDisksArray};
-            return acc;
-        }, {});
-        return structureWithVdisksArray;
-    },
-);
-
-export default node;