ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/containers/Node/Node.js

@@ -0,0 +1,101 @@
+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 { 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 { clusterTabsIds } from '../Cluster/utils';
+import './Node.scss';
+const b = cn('node');
+export const STORAGE_ROLE = 'Storage';
+const autofetcher = new AutoFetcher();
+function Node(props) {
+    var _a, _b;
+    const container = useRef(null);
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const { loading, wasLoaded, error, data } = useTypedSelector((state) => state.node);
+    const node = (_a = data === null || data === void 0 ? void 0 : data.SystemStateInfo) === null || _a === void 0 ? void 0 : _a[0];
+    const match = (_b = useRouteMatch(routes.node)) !== null && _b !== void 0 ? _b : 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);
+        let actualActiveTab = activeTab;
+        if (!hasStorage && activeTab === STORAGE) {
+            actualActiveTab = OVERVIEW;
+        }
+        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 });
+        });
+        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', {
+            clusterTab: clusterTabsIds.nodes,
+            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, 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 (activeTab) {
+            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(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,26 @@
+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: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

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

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-node-page';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

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

@@ -1,4 +1,4 @@
 {
-  "pdisk.developer-ui-button-title": "Страница PDisk в Developer UI",
-  "vdisk.developer-ui-button-title": "Страница VDisk в Developer UI"
+    "pdisk.developer-ui-button-title": "Страница PDisk в Developer UI",
+    "vdisk.developer-ui-button-title": "Страница VDisk в Developer UI"
 }

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

@@ -0,0 +1,8 @@
+import type { AdditionalNodesProps } from '../../types/additionalProps';
+import './Nodes.scss';
+interface NodesProps {
+    path?: string;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+export declare const Nodes: ({ path, additionalNodesProps }: NodesProps) => JSX.Element;
+export {};

package/dist/containers/Nodes/Nodes.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import cn from 'bem-cn-lite';
+import { useDispatch } from 'react-redux';
+import DataTable from '@gravity-ui/react-data-table';
+import { ASCENDING } from '@gravity-ui/react-data-table/build/esm/lib/constants';
+import { AccessDenied } from '../../components/Errors/403';
+import { Illustration } from '../../components/Illustration';
+import { Search } from '../../components/Search';
+import { ProblemFilter } from '../../components/ProblemFilter';
+import { UptimeFilter } from '../../components/UptimeFIlter';
+import { EntitiesCount } from '../../components/EntitiesCount';
+import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import { ResponseError } from '../../components/Errors/ResponseError';
+import { DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY } from '../../utils/constants';
+import { useAutofetcher, useSetting, useTypedSelector, useTableSort } from '../../utils/hooks';
+import { isSortableNodesProperty, isUnavailableNode, NodesUptimeFilterValues, } from '../../utils/nodes';
+import { getNodes, setNodesUptimeFilter, setSearchValue, resetNodesState, getComputeNodes, setDataWasNotLoaded, setSort, } from '../../store/reducers/nodes/nodes';
+import { selectFilteredNodes } from '../../store/reducers/nodes/selectors';
+import { changeFilter, ProblemFilterValues } from '../../store/reducers/settings/settings';
+import { getNodesColumns } from './getNodesColumns';
+import './Nodes.scss';
+import i18n from './i18n';
+const b = cn('ydb-nodes');
+export const Nodes = ({ path, additionalNodesProps = {} }) => {
+    const dispatch = useDispatch();
+    const isClusterNodes = !path;
+    // Since Nodes component is used in several places,
+    // we need to reset filters, searchValue and loading state
+    // in nodes reducer when path changes
+    useEffect(() => {
+        dispatch(resetNodesState());
+    }, [dispatch, path]);
+    const { wasLoaded, loading, error, nodesUptimeFilter, searchValue, sortOrder = ASCENDING, sortValue = 'NodeId', totalNodes, } = useTypedSelector((state) => state.nodes);
+    const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const nodes = useTypedSelector(selectFilteredNodes);
+    const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
+    const fetchNodes = useCallback((isBackground) => {
+        if (!isBackground) {
+            dispatch(setDataWasNotLoaded());
+        }
+        // If there is no path, it's cluster Nodes tab
+        if (path && !useNodesEndpoint) {
+            dispatch(getComputeNodes({ path }));
+        }
+        else {
+            dispatch(getNodes({ path }));
+        }
+    }, [dispatch, path, useNodesEndpoint]);
+    useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
+    const [sort, handleSort] = useTableSort({ sortValue, sortOrder }, (sortParams) => dispatch(setSort(sortParams)));
+    const handleSearchQueryChange = (value) => {
+        dispatch(setSearchValue(value));
+    };
+    const handleProblemFilterChange = (value) => {
+        dispatch(changeFilter(value));
+    };
+    const handleUptimeFilterChange = (value) => {
+        dispatch(setNodesUptimeFilter(value));
+    };
+    const renderControls = () => {
+        return (_jsxs(_Fragment, { children: [_jsx(Search, { onChange: handleSearchQueryChange, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(UptimeFilter, { value: nodesUptimeFilter, onChange: handleUptimeFilterChange }), _jsx(EntitiesCount, { total: totalNodes, current: (nodes === null || nodes === void 0 ? void 0 : nodes.length) || 0, label: 'Nodes', loading: loading && !wasLoaded })] }));
+    };
+    const renderTable = () => {
+        const rawColumns = getNodesColumns({
+            getNodeRef: additionalNodesProps.getNodeRef,
+        });
+        const columns = rawColumns.map((column) => {
+            return Object.assign(Object.assign({}, column), { sortable: isSortableNodesProperty(column.name) });
+        });
+        if (nodes && nodes.length === 0) {
+            if (problemFilter !== ProblemFilterValues.ALL ||
+                nodesUptimeFilter !== NodesUptimeFilterValues.All) {
+                return _jsx(Illustration, { name: "thumbsUp", width: "200" });
+            }
+        }
+        return (_jsx(DataTable, { theme: "yandex-cloud", data: nodes || [], columns: columns, settings: DEFAULT_TABLE_SETTINGS, sortOrder: sort, onSort: handleSort, emptyDataMessage: i18n('empty.default'), rowClassName: (row) => b('node', { unavailable: isUnavailableNode(row) }) }));
+    };
+    if (error) {
+        if (error.status === 403) {
+            return _jsx(AccessDenied, {});
+        }
+        return _jsx(ResponseError, { error: error });
+    }
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, Object.assign({ loading: loading && !wasLoaded, className: b('table') }, { children: renderTable() }))] }));
+};