ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/containers/Heatmap/util.js

@@ -1,7 +1,6 @@
-const CRIT = {r: 255, g: 4, b: 0};
-const WARN = {r: 255, g: 219, b: 77};
-const OK = {r: 59, g: 201, b: 53};
-
+const CRIT = { r: 255, g: 4, b: 0 };
+const WARN = { r: 255, g: 219, b: 77 };
+const OK = { r: 59, g: 201, b: 53 };
 export const COLORS_RANGE_SIZE = 500;
 export const LIMITED_METRICS = {
     CPU: {
@@ -27,35 +26,27 @@ export const LIMITED_METRICS = {
         min: 0,
     },
 };
-
 const cToHex = (c) => {
     const hex = c.toString(16);
     return hex.length === 1 ? `0${hex}` : hex;
 };
-const rgbToHex = ({r, g, b}) => {
+const rgbToHex = ({ r, g, b }) => {
     return `#${cToHex(r)}${cToHex(g)}${cToHex(b)}`;
 };
-
 export const getRangeBetweenColors = (range, color1, color2) => {
     if (range === 1) {
         return [color1];
     }
-
     if (range === 2) {
         return [color1, color2];
     }
-
     const redDiff = color1.r - color2.r;
     const redStep = redDiff / (range - 1);
-
     const greenDiff = color1.g - color2.g;
     const greenStep = greenDiff / (range - 1);
-
     const blueDiff = color1.b - color2.b;
     const blueStep = blueDiff / (range - 1);
-
     const colors = [];
-
     for (let i = 0; i < range; i++) {
         colors.push({
             r: Math.round(color1.r - redStep * i),
@@ -63,46 +54,38 @@ export const getRangeBetweenColors = (range, color1, color2) => {
             b: Math.round(color1.b - blueStep * i),
         });
     }
-
     return colors.map((color) => rgbToHex(color));
 };
 export const getColorRange = (range) => {
     const halfRange = Math.floor(range / 2);
     const range1 = range % 2 === 0 ? halfRange : halfRange + 1;
     const range2 = halfRange + 1;
-
     const firstInterval = getRangeBetweenColors(range1, OK, WARN);
     const secondInterval = getRangeBetweenColors(range2, WARN, CRIT);
-
     const colorsRange = [...firstInterval, ...secondInterval.slice(1)];
-
     return colorsRange;
 };
 export const getColorIndex = (value, min, max) => {
     if (max === 0) {
         return 0;
-    } else {
+    }
+    else {
         return Math.round(((value - min) / (max - min)) * (COLORS_RANGE_SIZE - 1));
     }
 };
-
 export const getCurrentMetricLimits = (metric, tablets) => {
     const limits = new Set();
     const limitedMetric = LIMITED_METRICS[metric] || {};
-
     tablets.forEach((tablet) => {
         limits.add(Number(tablet.metrics[metric]));
     });
-
     if (Number.isInteger(limitedMetric.min)) {
         limits.add(limitedMetric.min);
     }
     if (Number.isInteger(limitedMetric.max)) {
         limits.add(limitedMetric.max);
     }
-
     const sortedLimits = Array.from(limits.values()).sort((a, b) => a - b);
-
     return {
         min: sortedLimits[0],
         max: sortedLimits[sortedLimits.length - 1],

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

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

package/dist/containers/Node/Node.js

@@ -0,0 +1,99 @@
+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 { useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet-async';
+import { Tabs } from '@gravity-ui/uikit';
+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 { FullNodeViewer } from '../../components/FullNodeViewer/FullNodeViewer';
+import { getNodeInfo, resetNode } from '../../store/reducers/node/node';
+import routes, { createHref, parseQuery } from '../../routes';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { AutoFetcher } from '../../utils/autofetcher';
+import { useTypedSelector } from '../../utils/hooks';
+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 dispatch = useDispatch();
+    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(() => {
+        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);
+        const actualNodeTabs = nodePages.map((page) => {
+            return Object.assign(Object.assign({}, page), { title: page.name });
+        });
+        let actualActiveTab = actualNodeTabs.find(({ id }) => id === activeTab);
+        if (!actualActiveTab) {
+            actualActiveTab = actualNodeTabs[0];
+        }
+        return { activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs };
+    }, [activeTab, node]);
+    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', {
+            tenantName,
+            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 }) })));
+    };
+    const renderTabContent = () => {
+        switch (activeTabVerified.id) {
+            case STORAGE: {
+                return (_jsx("div", Object.assign({ className: b('storage') }, { children: _jsx(StorageWrapper, { nodeId: nodeId, parentContainer: container.current }) })));
+            }
+            case TABLETS: {
+                return _jsx(Tablets, { nodeId: nodeId, className: b('node-page-wrapper') });
+            }
+            case OVERVIEW: {
+                return _jsx(FullNodeViewer, { node: node, className: b('overview-wrapper') });
+            }
+            case STRUCTURE: {
+                return _jsx(NodeStructure, { className: b('node-page-wrapper'), nodeId: nodeId });
+            }
+            default:
+                return false;
+        }
+    };
+    if (loading && !wasLoaded) {
+        return _jsx(Loader, { size: "l" });
+    }
+    else if (error) {
+        return _jsx("div", { children: error.statusText });
+    }
+    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 _jsx("div", Object.assign({ className: "error" }, { children: "no node data" }));
+    }
+}
+export default Node;

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

@@ -0,0 +1,10 @@
+import { Query } from '../../routes';
+export declare const STORAGE = "storage";
+export declare const TABLETS = "tablets";
+export declare const OVERVIEW = "overview";
+export declare const STRUCTURE = "structure";
+export declare const NODE_PAGES: {
+    id: string;
+    name: string;
+}[];
+export declare function getDefaultNodePath(nodeId: string | number, query?: Query): string;

package/dist/containers/Node/NodePages.js

@@ -0,0 +1,29 @@
+import routes, { createHref } from '../../routes';
+export const STORAGE = 'storage';
+export const TABLETS = 'tablets';
+export const OVERVIEW = 'overview';
+export const STRUCTURE = 'structure';
+export const NODE_PAGES = [
+    {
+        id: OVERVIEW,
+        name: 'Overview',
+    },
+    {
+        id: STORAGE,
+        name: 'Storage',
+    },
+    {
+        id: STRUCTURE,
+        name: 'Structure',
+    },
+    {
+        id: TABLETS,
+        name: 'Tablets',
+    },
+];
+export function getDefaultNodePath(nodeId, query = {}) {
+    return createHref(routes.node, {
+        id: nodeId,
+        activeTab: OVERVIEW,
+    }, query);
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './NodeStructure.scss';
+export declare function valueIsDefined<T>(value: T | null | undefined): value is T;
+interface NodeStructureProps {
+    nodeId: string;
+    className?: string;
+}
+declare function NodeStructure({ nodeId, className }: NodeStructureProps): JSX.Element;
+export default NodeStructure;

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import url from 'url';
+import { isEmpty } from 'lodash/fp';
+import cn from 'bem-cn-lite';
+import { Loader } from '../.././../components/Loader';
+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';
+const b = cn('kv-node-structure');
+export function valueIsDefined(value) {
+    return value !== null && value !== undefined;
+}
+function generateId({ type, id }) {
+    return `${type}-${id}`;
+}
+const autofetcher = new AutoFetcher();
+function NodeStructure({ nodeId, className }) {
+    const dispatch = useDispatch();
+    const nodeStructure = useTypedSelector(selectNodeStructure);
+    const { loadingStructure, wasLoadedStructure } = useTypedSelector((state) => state.node);
+    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(() => {
+        var _a;
+        if (isReady.current && !scrolled.current && scrollContainerRef.current) {
+            const element = document.getElementById(generateId({ type: 'pdisk', id: pdiskIdFromUrl }));
+            let scrollToVdisk = 0;
+            if (vdiskIdFromUrl) {
+                const vDisks = (_a = nodeStructure[pdiskIdFromUrl]) === null || _a === void 0 ? void 0 : _a.vDisks;
+                const vDisk = vDisks === null || vDisks === void 0 ? void 0 : vDisks.find((el) => el.id === vdiskIdFromUrl);
+                const dataTable = vDisk ? document.querySelector('.data-table') : undefined;
+                const order = (vDisk === null || vDisk === void 0 ? void 0 : vDisk.order) || 0;
+                if (dataTable) {
+                    scrollToVdisk += dataTable.offsetTop + 40 * order;
+                }
+            }
+            if (element) {
+                scrollContainerRef.current.scrollTo({
+                    behavior: 'smooth',
+                    // should subtract 20 to avoid sticking the element to tabs
+                    top: scrollToVdisk ? scrollToVdisk : element.offsetTop,
+                });
+                scrolled.current = true;
+            }
+        }
+    }, [nodeStructure, pdiskIdFromUrl, vdiskIdFromUrl]);
+    const renderStub = () => {
+        return 'There is no information about node structure.';
+    };
+    const renderStructure = () => {
+        const pDisksIds = Object.keys(nodeStructure);
+        return pDisksIds.length > 0
+            ? pDisksIds.map((pDiskId) => (_jsx(PDisk, { data: nodeStructure[pDiskId], id: generateId({ type: 'pdisk', id: pDiskId }), unfolded: pdiskIdFromUrl === pDiskId, selectedVdiskId: vdiskIdFromUrl, nodeId: nodeId }, pDiskId)))
+            : renderStub();
+    };
+    const renderContent = () => {
+        if (loadingStructure && !wasLoadedStructure) {
+            return _jsx(Loader, { size: "m" });
+        }
+        return renderStructure();
+    };
+    return (_jsx("div", Object.assign({ className: b(), ref: scrollContainerRef }, { children: _jsx("div", Object.assign({ className: className }, { children: renderContent() })) })));
+}
+export default NodeStructure;

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface PDiskTitleBadgeProps {
+    label?: string;
+    value: ReactNode;
+    className?: string;
+}
+export declare function PDiskTitleBadge({ label, value, className }: PDiskTitleBadgeProps): JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import cn from 'bem-cn-lite';
+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 }))] })));
+}

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

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

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

@@ -0,0 +1,169 @@
+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 DataTable from '@gravity-ui/react-data-table';
+import { EVDiskState } from '../../../types/api/vdisk';
+import { bytesToGB } from '../../../utils/utils';
+import { formatStorageValuesToGb } from '../../../utils/dataFormatters/dataFormatters';
+import { getPDiskType } from '../../../utils/pdisk';
+import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
+import { createPDiskDeveloperUILink, createVDiskDeveloperUILink, } from '../../../utils/developerUI/developerUI';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { Icon } from '../../../components/Icon';
+import i18n from '../i18n';
+import { Vdisk } from './Vdisk';
+import { valueIsDefined } from './NodeStructure';
+import { PDiskTitleBadge } from './PDiskTitleBadge';
+const b = cn('kv-node-structure');
+var VDiskTableColumnsIds;
+(function (VDiskTableColumnsIds) {
+    VDiskTableColumnsIds["slotId"] = "VDiskSlotId";
+    VDiskTableColumnsIds["VDiskState"] = "VDiskState";
+    VDiskTableColumnsIds["Size"] = "Size";
+    VDiskTableColumnsIds["Info"] = "Info";
+})(VDiskTableColumnsIds || (VDiskTableColumnsIds = {}));
+const vDiskTableColumnsNames = {
+    VDiskSlotId: 'Slot id',
+    VDiskState: 'Status',
+    Size: 'Size',
+    Info: '',
+};
+function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
+    const columns = [
+        {
+            name: VDiskTableColumnsIds.slotId,
+            header: vDiskTableColumnsNames[VDiskTableColumnsIds.slotId],
+            width: 100,
+            render: ({ row }) => {
+                const vDiskSlotId = row.VDiskSlotId;
+                let vdiskInternalViewerLink = null;
+                if (valueIsDefined(nodeId) &&
+                    valueIsDefined(pDiskId) &&
+                    valueIsDefined(vDiskSlotId)) {
+                    vdiskInternalViewerLink = createVDiskDeveloperUILink({
+                        nodeId,
+                        pDiskId,
+                        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" }) })))] })));
+            },
+            align: DataTable.LEFT,
+        },
+        {
+            name: VDiskTableColumnsIds.VDiskState,
+            header: vDiskTableColumnsNames[VDiskTableColumnsIds.VDiskState],
+            width: 70,
+            render: ({ row }) => {
+                return (_jsx(EntityStatus, { status: row.VDiskState === EVDiskState.OK ? 'green' : 'red' }));
+            },
+            sortAccessor: (row) => (row.VDiskState === EVDiskState.OK ? 1 : 0),
+            align: DataTable.CENTER,
+        },
+        {
+            name: VDiskTableColumnsIds.Size,
+            header: vDiskTableColumnsNames[VDiskTableColumnsIds.Size],
+            width: 100,
+            render: ({ row }) => {
+                return (_jsx(ProgressViewer, { value: row.AllocatedSize, capacity: Number(row.AllocatedSize) + Number(row.AvailableSize), formatValues: formatStorageValuesToGb, colorizeProgress: true }));
+            },
+            sortAccessor: (row) => Number(row.AllocatedSize),
+            align: DataTable.CENTER,
+        },
+        {
+            name: VDiskTableColumnsIds.Info,
+            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', {
+                            selected: row.id === selectedVdiskId,
+                        }) }, { children: _jsx(Icon, { name: "information", viewBox: "0 0 512 512", height: 16, width: 16 }) })) })));
+            },
+            sortable: false,
+        },
+    ];
+    return columns;
+}
+export function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFromProps, }) {
+    const [unfolded, setUnfolded] = useState(unfoldedFromProps !== null && unfoldedFromProps !== void 0 ? unfoldedFromProps : false);
+    const { TotalSize = 0, AvailableSize = 0, Device, Guid, PDiskId, Path, Realtime, State, Category, SerialNumber, vDisks, } = data;
+    const total = Number(TotalSize);
+    const available = Number(AvailableSize);
+    const onOpenPDiskDetails = () => {
+        setUnfolded(true);
+    };
+    const onClosePDiskDetails = () => {
+        setUnfolded(false);
+    };
+    const renderVDisks = () => {
+        return (_jsx(DataTable, { theme: "yandex-cloud", data: vDisks, columns: getColumns({ nodeId, pDiskId: PDiskId, selectedVdiskId }), settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), rowClassName: (row) => {
+                return row.id === selectedVdiskId ? b('selected-vdisk') : '';
+            } }));
+    };
+    const renderPDiskDetails = () => {
+        if (isEmpty(data)) {
+            return _jsx("div", { children: "No information about PDisk" });
+        }
+        let pDiskInternalViewerLink = null;
+        if (valueIsDefined(PDiskId) && valueIsDefined(nodeId)) {
+            pDiskInternalViewerLink = createPDiskDeveloperUILink({
+                nodeId,
+                pDiskId: PDiskId,
+            });
+        }
+        const pdiskInfo = [
+            {
+                label: 'PDisk Id',
+                value: (_jsxs("div", Object.assign({ className: b('pdisk-id') }, { children: [PDiskId, pDiskInternalViewerLink && (_jsx(Button, Object.assign({ size: "s", className: b('external-button'), href: pDiskInternalViewerLink, target: "_blank", view: "flat-secondary", title: i18n('pdisk.developer-ui-button-title') }, { children: _jsx(Icon, { name: "external" }) })))] }))),
+            },
+        ];
+        if (valueIsDefined(Path)) {
+            pdiskInfo.push({ label: 'Path', value: Path });
+        }
+        if (valueIsDefined(Guid)) {
+            pdiskInfo.push({ label: 'GUID', value: Guid });
+        }
+        if (valueIsDefined(Category)) {
+            pdiskInfo.push({ label: 'Category', value: Category });
+            pdiskInfo.push({ label: 'Type', value: getPDiskType(data) });
+        }
+        pdiskInfo.push({
+            label: 'Allocated Size',
+            value: bytesToGB(total - available),
+        });
+        pdiskInfo.push({
+            label: 'Available Size',
+            value: bytesToGB(available),
+        });
+        if (total >= 0 && available >= 0) {
+            pdiskInfo.push({
+                label: 'Size',
+                value: (_jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true, className: b('size') })),
+            });
+        }
+        if (valueIsDefined(State)) {
+            pdiskInfo.push({ label: 'State', value: State });
+        }
+        if (valueIsDefined(Device)) {
+            pdiskInfo.push({
+                label: 'Device',
+                value: _jsx(EntityStatus, { status: Device }),
+            });
+        }
+        if (valueIsDefined(Realtime)) {
+            pdiskInfo.push({
+                label: 'Realtime',
+                value: _jsx(EntityStatus, { status: Realtime }),
+            });
+        }
+        if (valueIsDefined(SerialNumber)) {
+            pdiskInfo.push({ label: 'SerialNumber', value: SerialNumber });
+        }
+        return (_jsxs("div", { children: [_jsx(InfoViewer, { className: b('pdisk-details'), info: pdiskInfo }), _jsxs("div", Object.assign({ className: b('vdisks-container') }, { children: [_jsx("div", Object.assign({ 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: getPDiskType(data), 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()] })));
+}

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

@@ -0,0 +1,3 @@
+/// <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;

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'bem-cn-lite';
+import { formatStorageValuesToGb, stringifyVdiskId, } from '../../../utils/dataFormatters/dataFormatters';
+import { bytesToGB, bytesToSpeed } from '../../../utils/utils';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { valueIsDefined } from './NodeStructure';
+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 === 'OK' ? 'green' : 'red', name: stringifyVdiskId(VDiskId) })] })), _jsx("div", Object.assign({ className: b('column') }, { children: _jsx(InfoViewer, { className: b('section'), info: vdiskInfo }) }))] }));
+}

package/dist/containers/Node/i18n/en.json

@@ -1,4 +1,4 @@
 {
-  "pdisk.developer-ui-button-title": "PDisk Developer UI page",
-  "vdisk.developer-ui-button-title": "VDisk Developer UI page"
+    "pdisk.developer-ui-button-title": "PDisk Developer UI page",
+    "vdisk.developer-ui-button-title": "VDisk Developer UI page"
 }

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "pdisk.developer-ui-button-title" | "vdisk.developer-ui-button-title", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/Node/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-node-page';
+export default registerKeysets(COMPONENT, { en, ru });