ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React from 'react';
+import throttle from 'lodash/throttle';
 import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import _ from 'lodash';
-import { basename as appBasename } from '../../../store/index';
 import routes, { createHref } from '../../../routes';
+import { basename as appBasename } from '../../../store/index';
+import { cn } from '../../../utils/cn';
 const b = cn('heatmap');
 const defaultDimensions = { width: 0, height: 0 };
 const TABLET_SIZE = 10;
 const TABLET_PADDING = 2;
 export const HeatmapCanvas = (props) => {
-    const [dimensions, setDimensions] = useState(defaultDimensions);
+    const [dimensions, setDimensions] = React.useState(defaultDimensions);
     const { tablets } = props;
-    const canvasRef = useRef(null);
-    const containerRef = useRef(null);
+    const canvasRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     function drawTablet(ctx) {
         return (tablet, index) => {
             const { columnsCount } = dimensions;
@@ -23,13 +23,13 @@ export const HeatmapCanvas = (props) => {
             ctx.fillRect(rectX, rectY, TABLET_SIZE, TABLET_SIZE);
         };
     }
-    useEffect(() => {
+    React.useEffect(() => {
         const canvas = canvasRef.current;
         const ctx = canvas.getContext('2d');
         ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
         tablets.map(drawTablet(ctx));
     });
-    useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         const container = containerRef.current;
         if (container) {
             const width = container.offsetWidth - 15;
@@ -100,7 +100,7 @@ export const HeatmapCanvas = (props) => {
             props.hideTooltip();
         }, 40);
     };
-    const _onCanvasMouseMove = _.throttle((x, y) => {
+    const _onCanvasMouseMove = throttle((x, y) => {
         //this is needed to force ReduxPopup rerender
         const event = new CustomEvent('scroll');
         window.dispatchEvent(event);
@@ -123,12 +123,11 @@ export const HeatmapCanvas = (props) => {
             props.hideTooltip();
         }
     }, 20);
-    return (_jsx("div", Object.assign({ ref: containerRef, className: b('canvas-container'), onMouseLeave: _onCanvasMouseLeave }, { children: _jsx("canvas", { ref: canvasRef, width: dimensions.width, height: dimensions.height, onClick: _onCanvasClick, onMouseMove: (e) => _onCanvasMouseMove(e.clientX, e.clientY) }) })));
+    return (_jsx("div", { ref: containerRef, className: b('canvas-container'), onMouseLeave: _onCanvasMouseLeave, children: _jsx("canvas", { ref: canvasRef, width: dimensions.width, height: dimensions.height, onClick: _onCanvasClick, onMouseMove: (e) => _onCanvasMouseMove(e.clientX, e.clientY) }) }));
 };
 HeatmapCanvas.propTypes = {
     tablets: PropTypes.array,
     parentRef: PropTypes.object,
     showTooltip: PropTypes.func,
     hideTooltip: PropTypes.func,
-    currentMetric: PropTypes.string,
 };

package/dist/containers/Heatmap/Histogram/Histogram.d.ts

@@ -1,10 +1,10 @@
-export function Histogram(props: any): JSX.Element;
+export function Histogram(props: any): import("react/jsx-runtime").JSX.Element;
 export namespace Histogram {
     namespace propTypes {
-        const tablets: PropTypes.Requireable<any[]>;
-        const currentMetric: PropTypes.Requireable<string>;
-        const showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-        const hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        let tablets: PropTypes.Requireable<any[]>;
+        let currentMetric: PropTypes.Requireable<string>;
+        let showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        let hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';

package/dist/containers/Heatmap/Histogram/Histogram.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import { getColorRange, getCurrentMetricLimits } from '../util';
+import { cn } from '../../../utils/cn';
 import { formatNumber } from '../../../utils/dataFormatters/dataFormatters';
+import { getColorRange, getCurrentMetricLimits } from '../util';
 import './Histogram.scss';
 const b = cn('histogram');
 const HistogramBar = (props) => {
-    const barRef = useRef();
+    const barRef = React.useRef();
     const { data = {}, maxCount } = props;
     const { count, leftBound, rightBound, color } = data;
     const height = (count / maxCount) * 100;
@@ -54,7 +54,7 @@ export const Histogram = (props) => {
     const renderHistogramItem = (item, index) => {
         return (_jsx(HistogramBar, { data: item, maxCount: maxCount, showTooltip: props.showTooltip, hideTooltip: props.hideTooltip }, index));
     };
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('chart') }, { children: [Boolean(max) && histogramRange.map(renderHistogramItem), _jsx("div", Object.assign({ className: b('x-min') }, { children: formatNumber(min) })), _jsx("div", Object.assign({ className: b('x-max') }, { children: formatNumber(max) })), _jsx("div", Object.assign({ className: b('y-min') }, { children: "0" })), _jsx("div", Object.assign({ className: b('y-max') }, { children: formatNumber(maxCount) }))] })) })));
+    return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('chart'), children: [Boolean(max) && histogramRange.map(renderHistogramItem), _jsx("div", { className: b('x-min'), children: formatNumber(min) }), _jsx("div", { className: b('x-max'), children: formatNumber(max) }), _jsx("div", { className: b('y-min'), children: "0" }), _jsx("div", { className: b('y-max'), children: formatNumber(maxCount) })] }) }));
 };
 Histogram.propTypes = {
     tablets: PropTypes.array,

package/dist/containers/Heatmap/util.d.ts

@@ -1,33 +1,33 @@
 export const COLORS_RANGE_SIZE: 500;
 export namespace LIMITED_METRICS {
     namespace CPU {
-        const min: number;
-        const max: number;
+        let min: number;
+        let max: number;
     }
     namespace Network {
-        const min_1: number;
+        let min_1: number;
         export { min_1 as min };
-        const max_1: number;
+        let max_1: number;
         export { max_1 as max };
     }
     namespace Storage {
-        const min_2: number;
+        let min_2: number;
         export { min_2 as min };
-        const max_2: number;
+        let max_2: number;
         export { max_2 as max };
     }
     namespace DataSize {
-        const min_3: number;
+        let min_3: number;
         export { min_3 as min };
-        const max_3: number;
+        let max_3: number;
         export { max_3 as max };
     }
     namespace RowCount {
-        const min_4: number;
+        let min_4: number;
         export { min_4 as min };
     }
     namespace IndexSize {
-        const min_5: number;
+        let min_5: number;
         export { min_5 as min };
     }
 }

package/dist/containers/Node/Node.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { AdditionalNodesProps } from '../../types/additionalProps';
 import './Node.scss';
 export declare const STORAGE_ROLE = "Storage";
@@ -6,5 +5,5 @@ interface NodeProps {
     additionalNodesProps?: AdditionalNodesProps;
     className?: string;
 }
-declare function Node(props: NodeProps): JSX.Element;
+declare function Node(props: NodeProps): import("react/jsx-runtime").JSX.Element;
 export default Node;

package/dist/containers/Node/Node.js

@@ -1,36 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from 'react';
-import { useLocation, useRouteMatch } from 'react-router';
-import cn from 'bem-cn-lite';
-import { Helmet } from 'react-helmet-async';
+import React from 'react';
 import { Tabs } from '@gravity-ui/uikit';
+import { Helmet } from 'react-helmet-async';
+import { useLocation, useRouteMatch } from 'react-router';
 import { Link } from 'react-router-dom';
-import { TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE } from './NodePages';
-import { Tablets } from '../Tablets';
-import { StorageWrapper } from '../Storage/StorageWrapper';
-import NodeStructure from './NodeStructure/NodeStructure';
-import { Loader } from '../../components/Loader';
 import { BasicNodeViewer } from '../../components/BasicNodeViewer';
+import { ResponseError } from '../../components/Errors/ResponseError';
 import { FullNodeViewer } from '../../components/FullNodeViewer/FullNodeViewer';
-import { getNodeInfo, resetNode } from '../../store/reducers/node/node';
+import { Loader } from '../../components/Loader';
 import routes, { createHref, parseQuery } from '../../routes';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { AutoFetcher } from '../../utils/autofetcher';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
+import { nodeApi } from '../../store/reducers/node/node';
+import { cn } from '../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL } from '../../utils/constants';
+import { useTypedDispatch } from '../../utils/hooks';
+import { StorageWrapper } from '../Storage/StorageWrapper';
+import { Tablets } from '../Tablets';
+import { NODE_PAGES, OVERVIEW, STORAGE, STRUCTURE, TABLETS } from './NodePages';
+import NodeStructure from './NodeStructure/NodeStructure';
 import './Node.scss';
 const b = cn('node');
 export const STORAGE_ROLE = 'Storage';
-const autofetcher = new AutoFetcher();
 function Node(props) {
     var _a;
-    const container = useRef(null);
+    const container = React.useRef(null);
     const dispatch = useTypedDispatch();
     const location = useLocation();
-    const { loading, wasLoaded, error, data: node } = useTypedSelector((state) => state.node);
     const match = (_a = useRouteMatch(routes.node)) !== null && _a !== void 0 ? _a : Object.create(null);
     const { id: nodeId, activeTab } = match.params;
     const { tenantName: tenantNameFromQuery } = parseQuery(location);
-    const { activeTabVerified, nodeTabs } = useMemo(() => {
+    const { currentData, isFetching, error } = nodeApi.useGetNodeInfoQuery({ nodeId }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
+    const loading = isFetching && currentData === undefined;
+    const node = currentData;
+    const { activeTabVerified, nodeTabs } = React.useMemo(() => {
         var _a;
         const hasStorage = (_a = node === null || node === void 0 ? void 0 : node.Roles) === null || _a === void 0 ? void 0 : _a.find((el) => el === STORAGE_ROLE);
         const nodePages = hasStorage ? NODE_PAGES : NODE_PAGES.filter((el) => el.id !== STORAGE);
@@ -43,7 +45,7 @@ function Node(props) {
         }
         return { activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs };
     }, [activeTab, node]);
-    useEffect(() => {
+    React.useEffect(() => {
         var _a;
         const tenantName = ((_a = node === null || node === void 0 ? void 0 : node.Tenants) === null || _a === void 0 ? void 0 : _a[0]) || (tenantNameFromQuery === null || tenantNameFromQuery === void 0 ? void 0 : tenantNameFromQuery.toString());
         dispatch(setHeaderBreadcrumbs('node', {
@@ -51,23 +53,13 @@ function Node(props) {
             nodeId,
         }));
     }, [dispatch, node, nodeId, tenantNameFromQuery]);
-    useEffect(() => {
-        const fetchData = () => dispatch(getNodeInfo(nodeId));
-        fetchData();
-        autofetcher.start();
-        autofetcher.fetch(() => fetchData());
-        return () => {
-            autofetcher.stop();
-            dispatch(resetNode());
-        };
-    }, [dispatch, nodeId]);
     const renderTabs = () => {
-        return (_jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", items: nodeTabs, activeTab: activeTabVerified.id, wrapTo: ({ id }, tabNode) => (_jsx(Link, Object.assign({ to: createHref(routes.node, { id: nodeId, activeTab: id }), className: b('tab') }, { children: tabNode }), id)), allowNotSelected: true }) })));
+        return (_jsx("div", { className: b('tabs'), children: _jsx(Tabs, { size: "l", items: nodeTabs, activeTab: activeTabVerified.id, wrapTo: ({ id }, tabNode) => (_jsx(Link, { to: createHref(routes.node, { id: nodeId, activeTab: id }), className: b('tab'), children: tabNode }, id)), allowNotSelected: true }) }));
     };
     const renderTabContent = () => {
         switch (activeTabVerified.id) {
             case STORAGE: {
-                return (_jsx("div", Object.assign({ className: b('storage') }, { children: _jsx(StorageWrapper, { nodeId: nodeId, parentContainer: container.current }) })));
+                return (_jsx("div", { className: b('storage'), children: _jsx(StorageWrapper, { nodeId: nodeId, parentContainer: container.current }) }));
             }
             case TABLETS: {
                 return _jsx(Tablets, { nodeId: nodeId, className: b('node-page-wrapper') });
@@ -82,17 +74,17 @@ function Node(props) {
                 return false;
         }
     };
-    if (loading && !wasLoaded) {
+    if (loading) {
         return _jsx(Loader, { size: "l" });
     }
     else if (error) {
-        return _jsx("div", { children: error.statusText });
+        return _jsx(ResponseError, { error: error });
     }
     else {
         if (node) {
-            return (_jsxs("div", Object.assign({ className: b(null, props.className), ref: container }, { children: [_jsx(Helmet, Object.assign({ titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring` }, { children: _jsx("title", { children: activeTabVerified.title }) })), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), renderTabs(), _jsx("div", Object.assign({ className: b('content') }, { children: renderTabContent() }))] })));
+            return (_jsxs("div", { className: b(null, props.className), ref: container, children: [_jsx(Helmet, { titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring`, children: _jsx("title", { children: activeTabVerified.title }) }), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), renderTabs(), _jsx("div", { className: b('content'), children: renderTabContent() })] }));
         }
-        return _jsx("div", Object.assign({ className: "error" }, { children: "no node data" }));
+        return _jsx("div", { className: "error", children: "no node data" });
     }
 }
 export default Node;

package/dist/containers/Node/NodePages.d.ts

@@ -1,4 +1,4 @@
-import { Query } from '../../routes';
+import type { Query } from '../../routes';
 export declare const STORAGE = "storage";
 export declare const TABLETS = "tablets";
 export declare const OVERVIEW = "overview";

package/dist/containers/Node/NodeStructure/NodeStructure.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import './NodeStructure.scss';
 interface NodeStructureProps {
     nodeId: string;
     className?: string;
 }
-declare function NodeStructure({ nodeId, className }: NodeStructureProps): JSX.Element;
+declare function NodeStructure({ nodeId, className }: NodeStructureProps): import("react/jsx-runtime").JSX.Element;
 export default NodeStructure;

package/dist/containers/Node/NodeStructure/NodeStructure.js

@@ -1,46 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
 import url from 'url';
-import { isEmpty } from 'lodash/fp';
-import cn from 'bem-cn-lite';
+import React from 'react';
+import isEmpty from 'lodash/isEmpty';
 import { Loader } from '../.././../components/Loader';
-import { getNodeStructure } from '../../../store/reducers/node/node';
+import { ResponseError } from '../../../components/Errors/ResponseError';
+import { nodeApi } from '../../../store/reducers/node/node';
 import { selectNodeStructure } from '../../../store/reducers/node/selectors';
-import { AutoFetcher } from '../../../utils/autofetcher';
-import { useTypedSelector, useTypedDispatch } from '../../../utils/hooks';
+import { cn } from '../../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL } from '../../../utils/constants';
+import { useTypedSelector } from '../../../utils/hooks';
 import { PDisk } from './Pdisk';
 import './NodeStructure.scss';
 const b = cn('kv-node-structure');
 function generateId({ type, id }) {
     return `${type}-${id}`;
 }
-const autofetcher = new AutoFetcher();
 function NodeStructure({ nodeId, className }) {
-    const dispatch = useTypedDispatch();
-    const nodeStructure = useTypedSelector(selectNodeStructure);
-    const { loadingStructure, wasLoadedStructure } = useTypedSelector((state) => state.node);
+    const nodeStructure = useTypedSelector((state) => selectNodeStructure(state, nodeId));
+    const { currentData, isFetching, error } = nodeApi.useGetNodeStructureQuery({ nodeId }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
+    const loadingStructure = isFetching && currentData === undefined;
     const { pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl } = url.parse(window.location.href, true).query;
-    const scrollContainerRef = useRef(null);
-    const isReady = useRef(false);
-    const scrolled = useRef(false);
-    useEffect(() => {
-        dispatch(getNodeStructure(nodeId));
-        autofetcher.start();
-        autofetcher.fetch(() => dispatch(getNodeStructure(nodeId)));
-        return () => {
-            scrolled.current = false;
-            isReady.current = false;
-            autofetcher.stop();
-        };
-    }, [nodeId, dispatch]);
-    useEffect(() => {
-        if (!isEmpty(nodeStructure) && scrollContainerRef.current) {
-            isReady.current = true;
-        }
-    }, [nodeStructure]);
-    useEffect(() => {
+    const scrollContainerRef = React.useRef(null);
+    const scrolled = React.useRef(false);
+    React.useEffect(() => {
         var _a;
-        if (isReady.current && !scrolled.current && scrollContainerRef.current) {
+        if (!isEmpty(nodeStructure) && !scrolled.current && scrollContainerRef.current) {
             const element = document.getElementById(generateId({ type: 'pdisk', id: pdiskIdFromUrl }));
             let scrollToVdisk = 0;
             if (vdiskIdFromUrl) {
@@ -72,11 +56,14 @@ function NodeStructure({ nodeId, className }) {
             : renderStub();
     };
     const renderContent = () => {
-        if (loadingStructure && !wasLoadedStructure) {
+        if (loadingStructure) {
             return _jsx(Loader, { size: "m" });
         }
+        if (error) {
+            return _jsx(ResponseError, { error: error });
+        }
         return renderStructure();
     };
-    return (_jsx("div", Object.assign({ className: b(), ref: scrollContainerRef }, { children: _jsx("div", Object.assign({ className: className }, { children: renderContent() })) })));
+    return (_jsx("div", { className: b(), ref: scrollContainerRef, children: _jsx("div", { className: className, children: renderContent() }) }));
 }
 export default NodeStructure;

package/dist/containers/Node/NodeStructure/PDiskTitleBadge.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 interface PDiskTitleBadgeProps {
     label?: string;
-    value: ReactNode;
+    value: React.ReactNode;
     className?: string;
 }
-export declare function PDiskTitleBadge({ label, value, className }: PDiskTitleBadgeProps): JSX.Element;
+export declare function PDiskTitleBadge({ label, value, className }: PDiskTitleBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Node/NodeStructure/PDiskTitleBadge.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../../utils/cn';
 const b = cn('kv-node-structure');
 export function PDiskTitleBadge({ label, value, className }) {
-    return (_jsxs("span", Object.assign({ className: b('pdisk-title-item', className) }, { children: [label && _jsxs("span", Object.assign({ className: b('pdisk-title-item-label') }, { children: [label, ":"] })), _jsx("span", Object.assign({ className: b('pdisk-title-item-value') }, { children: value }))] })));
+    return (_jsxs("span", { className: b('pdisk-title-item', className), children: [label && _jsxs("span", { className: b('pdisk-title-item-label'), children: [label, ":"] }), _jsx("span", { className: b('pdisk-title-item-value'), children: value })] }));
 }

package/dist/containers/Node/NodeStructure/Pdisk.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PreparedStructurePDisk } from '../../../store/reducers/node/types';
 interface PDiskProps {
     data: PreparedStructurePDisk;
@@ -7,5 +6,5 @@ interface PDiskProps {
     selectedVdiskId?: string;
     nodeId: string | number;
 }
-export declare function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFromProps, }: PDiskProps): JSX.Element;
+export declare function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFromProps, }: PDiskProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Node/NodeStructure/Pdisk.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import cn from 'bem-cn-lite';
-import { isEmpty } from 'lodash/fp';
-import { ArrowToggle, Button, Popover } from '@gravity-ui/uikit';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
+import { ArrowToggle, Button, Popover } from '@gravity-ui/uikit';
+import isEmpty from 'lodash/isEmpty';
+import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
+import { Icon } from '../../../components/Icon';
+import { PDiskInfo } from '../../../components/PDiskInfo/PDiskInfo';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
 import { EFlag } from '../../../types/api/enums';
 import { EVDiskState } from '../../../types/api/vdisk';
-import { formatStorageValuesToGb } from '../../../utils/dataFormatters/dataFormatters';
-import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
 import { valueIsDefined } from '../../../utils';
+import { cn } from '../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
+import { formatStorageValuesToGb } from '../../../utils/dataFormatters/dataFormatters';
 import { createVDiskDeveloperUILink } from '../../../utils/developerUI/developerUI';
-import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
-import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
-import { Icon } from '../../../components/Icon';
-import { PDiskInfo } from '../../../components/PDiskInfo/PDiskInfo';
 import i18n from '../i18n';
-import { Vdisk } from './Vdisk';
 import { PDiskTitleBadge } from './PDiskTitleBadge';
+import { Vdisk } from './Vdisk';
 const b = cn('kv-node-structure');
 var VDiskTableColumnsIds;
 (function (VDiskTableColumnsIds) {
@@ -49,7 +49,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
                         vDiskSlotId,
                     });
                 }
-                return (_jsxs("div", Object.assign({ className: b('vdisk-id', { selected: row.id === selectedVdiskId }) }, { children: [_jsx("span", { children: vDiskSlotId }), vdiskInternalViewerLink && (_jsx(Button, Object.assign({ size: "s", className: b('external-button', { hidden: true }), href: vdiskInternalViewerLink, target: "_blank", title: i18n('vdisk.developer-ui-button-title') }, { children: _jsx(Icon, { name: "external" }) })))] })));
+                return (_jsxs("div", { className: b('vdisk-id', { selected: row.id === selectedVdiskId }), children: [_jsx("span", { children: vDiskSlotId }), vdiskInternalViewerLink && (_jsx(Button, { size: "s", className: b('external-button', { hidden: true }), href: vdiskInternalViewerLink, target: "_blank", title: i18n('vdisk.developer-ui-button-title'), children: _jsx(Icon, { name: "external" }) }))] }));
             },
             align: DataTable.LEFT,
         },
@@ -78,9 +78,9 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
             width: 70,
             render: ({ row }) => {
-                return (_jsx(Popover, Object.assign({ placement: ['right'], content: _jsx(Vdisk, Object.assign({}, row)), tooltipContentClassName: b('vdisk-details') }, { children: _jsx(Button, Object.assign({ view: "flat-secondary", className: b('vdisk-details-button', {
+                return (_jsx(Popover, { placement: ['right'], content: _jsx(Vdisk, { data: row }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
                             selected: row.id === selectedVdiskId,
-                        }) }, { children: _jsx(Icon, { name: "information", viewBox: "0 0 512 512", height: 16, width: 16 }) })) })));
+                        }), children: _jsx(Icon, { name: "information", viewBox: "0 0 512 512", height: 16, width: 16 }) }) }));
             },
             sortable: false,
         },
@@ -88,7 +88,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
     return columns;
 }
 export function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFromProps, }) {
-    const [unfolded, setUnfolded] = useState(unfoldedFromProps !== null && unfoldedFromProps !== void 0 ? unfoldedFromProps : false);
+    const [unfolded, setUnfolded] = React.useState(unfoldedFromProps !== null && unfoldedFromProps !== void 0 ? unfoldedFromProps : false);
     const { TotalSize = 0, AvailableSize = 0, Device, PDiskId, Type, vDisks } = data;
     const total = Number(TotalSize);
     const available = Number(AvailableSize);
@@ -107,7 +107,7 @@ export function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFro
         if (isEmpty(data)) {
             return _jsx("div", { children: "No information about PDisk" });
         }
-        return (_jsxs("div", { children: [_jsx(PDiskInfo, { pDisk: data, nodeId: nodeId, className: b('pdisk-details') }), _jsxs("div", Object.assign({ className: b('vdisks-container') }, { children: [_jsx("div", Object.assign({ className: b('vdisks-header') }, { children: "VDisks" })), renderVDisks()] }))] }));
+        return (_jsxs("div", { children: [_jsx(PDiskInfo, { pDisk: data, nodeId: nodeId, className: b('pdisk-details') }), _jsxs("div", { className: b('vdisks-container'), children: [_jsx("div", { className: b('vdisks-header'), children: "VDisks" }), renderVDisks()] })] }));
     };
-    return (_jsxs("div", Object.assign({ className: b('pdisk'), id: id }, { children: [_jsxs("div", Object.assign({ className: b('pdisk-header') }, { children: [_jsxs("div", Object.assign({ className: b('pdisk-title-wrapper') }, { children: [_jsx(EntityStatus, { status: Device }), _jsx(PDiskTitleBadge, { label: "PDiskID", value: PDiskId, className: b('pdisk-title-id') }), _jsx(PDiskTitleBadge, { value: Type, className: b('pdisk-title-type') }), _jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true, className: b('pdisk-title-size') }), _jsx(PDiskTitleBadge, { label: "VDisks", value: vDisks.length })] })), _jsx(Button, Object.assign({ onClick: unfolded ? onClosePDiskDetails : onOpenPDiskDetails, view: "flat-secondary" }, { children: _jsx(ArrowToggle, { direction: unfolded ? 'top' : 'bottom' }) }))] })), unfolded && renderPDiskDetails()] })));
+    return (_jsxs("div", { className: b('pdisk'), id: id, children: [_jsxs("div", { className: b('pdisk-header'), children: [_jsxs("div", { className: b('pdisk-title-wrapper'), children: [_jsx(EntityStatus, { status: Device }), _jsx(PDiskTitleBadge, { label: "PDiskID", value: PDiskId, className: b('pdisk-title-id') }), _jsx(PDiskTitleBadge, { value: Type, className: b('pdisk-title-type') }), _jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true, className: b('pdisk-title-size') }), _jsx(PDiskTitleBadge, { label: "VDisks", value: vDisks.length })] }), _jsx(Button, { onClick: unfolded ? onClosePDiskDetails : onOpenPDiskDetails, view: "flat-secondary", children: _jsx(ArrowToggle, { direction: unfolded ? 'top' : 'bottom' }) })] }), unfolded && renderPDiskDetails()] }));
 }

package/dist/containers/Node/NodeStructure/Vdisk.d.ts

@@ -1,3 +1,6 @@
-/// <reference types="react" />
-import { type TVDiskStateInfo } from '../../../types/api/vdisk';
-export declare function Vdisk({ AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskId, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, }: TVDiskStateInfo): JSX.Element;
+import type { PreparedStructureVDisk } from '../../../store/reducers/node/types';
+interface VDiskProps {
+    data: PreparedStructureVDisk;
+}
+export declare function Vdisk({ data }: VDiskProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Node/NodeStructure/Vdisk.js

@@ -1,86 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import cn from 'bem-cn-lite';
-import { EVDiskState } from '../../../types/api/vdisk';
-import { EFlag } from '../../../types/api/enums';
-import { formatStorageValuesToGb, stringifyVdiskId, } from '../../../utils/dataFormatters/dataFormatters';
-import { bytesToGB, bytesToSpeed } from '../../../utils/utils';
-import { valueIsDefined } from '../../../utils';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
-import InfoViewer from '../../../components/InfoViewer/InfoViewer';
-import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { VDiskInfo } from '../../../components/VDiskInfo/VDiskInfo';
+import { EFlag } from '../../../types/api/enums';
+import { EVDiskState } from '../../../types/api/vdisk';
+import { cn } from '../../../utils/cn';
+import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
 const b = cn('kv-node-structure');
-export function Vdisk({ AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskId, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, }) {
-    var _a, _b, _c, _d;
-    const vdiskInfo = [];
-    if (valueIsDefined(VDiskSlotId)) {
-        vdiskInfo.push({ label: 'VDisk Slot Id', value: VDiskSlotId });
-    }
-    if (valueIsDefined(Guid)) {
-        vdiskInfo.push({ label: 'GUID', value: Guid });
-    }
-    if (valueIsDefined(Kind)) {
-        vdiskInfo.push({ label: 'Kind', value: Kind });
-    }
-    if (valueIsDefined(VDiskState)) {
-        vdiskInfo.push({
-            label: 'VDisk State',
-            value: VDiskState,
-        });
-    }
-    if (valueIsDefined(DiskSpace)) {
-        vdiskInfo.push({
-            label: 'Disk Space',
-            value: _jsx(EntityStatus, { status: DiskSpace }),
-        });
-    }
-    if (valueIsDefined((_a = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.FreshRank) === null || _a === void 0 ? void 0 : _a.Flag)) {
-        vdiskInfo.push({
-            label: 'Fresh Rank Satisfaction',
-            value: _jsx(EntityStatus, { status: (_b = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.FreshRank) === null || _b === void 0 ? void 0 : _b.Flag }),
-        });
-    }
-    if (valueIsDefined((_c = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.LevelRank) === null || _c === void 0 ? void 0 : _c.Flag)) {
-        vdiskInfo.push({
-            label: 'Level Rank Satisfaction',
-            value: _jsx(EntityStatus, { status: (_d = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.LevelRank) === null || _d === void 0 ? void 0 : _d.Flag }),
-        });
-    }
-    vdiskInfo.push({ label: 'Replicated', value: Replicated ? 'Yes' : 'No' });
-    vdiskInfo.push({ label: 'Allocated Size', value: bytesToGB(AllocatedSize) });
-    vdiskInfo.push({ label: 'Available Size', value: bytesToGB(AvailableSize) });
-    if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
-        vdiskInfo.push({
-            label: 'Size',
-            value: (_jsx(ProgressViewer, { value: AllocatedSize, capacity: Number(AllocatedSize) + Number(AvailableSize), formatValues: formatStorageValuesToGb, colorizeProgress: true })),
-        });
-    }
-    vdiskInfo.push({
-        label: 'Has Unreadable Blobs',
-        value: HasUnreadableBlobs ? 'Yes' : 'No',
-    });
-    if (valueIsDefined(IncarnationGuid)) {
-        vdiskInfo.push({ label: 'Incarnation GUID', value: IncarnationGuid });
-    }
-    if (valueIsDefined(InstanceGuid)) {
-        vdiskInfo.push({ label: 'Instance GUID', value: InstanceGuid });
-    }
-    if (valueIsDefined(FrontQueues)) {
-        vdiskInfo.push({
-            label: 'Front Queues',
-            value: _jsx(EntityStatus, { status: FrontQueues }),
-        });
-    }
-    if (valueIsDefined(StoragePoolName)) {
-        vdiskInfo.push({ label: 'Storage Pool Name', value: StoragePoolName });
-    }
-    vdiskInfo.push({
-        label: 'Read Throughput',
-        value: bytesToSpeed(ReadThroughput),
-    });
-    vdiskInfo.push({
-        label: 'Write Throughput',
-        value: bytesToSpeed(WriteThroughput),
-    });
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx("span", Object.assign({ className: b('title') }, { children: "VDisk " })), _jsx(EntityStatus, { status: VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red, name: stringifyVdiskId(VDiskId) })] })), _jsx("div", Object.assign({ className: b('column') }, { children: _jsx(InfoViewer, { className: b('section'), info: vdiskInfo }) }))] }));
+export function Vdisk({ data }) {
+    const { VDiskState, VDiskId } = data;
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('row'), children: [_jsx("span", { className: b('title'), children: "VDisk " }), _jsx(EntityStatus, { status: VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red, name: stringifyVdiskId(VDiskId) })] }), _jsx("div", { className: b('column'), children: _jsx(VDiskInfo, { className: b('section'), data: data }) })] }));
 }

package/dist/containers/Nodes/Nodes.d.ts

@@ -4,5 +4,5 @@ interface NodesProps {
     path?: string;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare const Nodes: ({ path, additionalNodesProps }: NodesProps) => JSX.Element;
+export declare const Nodes: ({ path, additionalNodesProps }: NodesProps) => import("react/jsx-runtime").JSX.Element;
 export {};