ydb-embedded-ui 5.2.0 → 5.3.0

package/dist/containers/Clusters/useSelectedColumns.d.ts

@@ -1,6 +1,6 @@
 import { type Column } from '@gravity-ui/react-data-table';
 import { type TableColumnSetupItem } from '@gravity-ui/uikit/build/esm/components/Table/hoc/withTableSettings/withTableSettings';
-export declare const useSelectedColumns: <T>(columns: Column<T>[], storageKey: string, columnsTitles: Record<string, string>, defaultColumnsIds: string[], requiredColumnsIds?: string[] | undefined) => {
+export declare const useSelectedColumns: <T>(columns: Column<T>[], storageKey: string, columnsTitles: Record<string, string>, defaultColumnsIds: string[], requiredColumnsIds?: string[]) => {
     columnsToShow: Column<T>[];
     columnsToSelect: TableColumnSetupItem[];
     setColumns: (value: TableColumnSetupItem[]) => void;

package/dist/containers/Header/Header.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router';
-import { useDispatch } from 'react-redux';
 import block from 'bem-cn-lite';
 import { Breadcrumbs } from '@gravity-ui/uikit';
-import { ExternalLinkWithIcon } from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
+import { LinkWithIcon } from '../../components/LinkWithIcon/LinkWithIcon';
 import { backend, customBackend } from '../../store';
 import { getClusterInfo } from '../../store/reducers/cluster/cluster';
-import { useTypedSelector } from '../../utils/hooks';
+import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import { DEVELOPER_UI_TITLE } from '../../utils/constants';
 import { parseQuery } from '../../routes';
 import { getBreadcrumbs } from './breadcrumbs';
@@ -21,7 +20,7 @@ const getInternalLink = (singleClusterMode) => {
 };
 function Header({ mainPage }) {
     var _a;
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const history = useHistory();
     const location = useLocation();
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
@@ -58,7 +57,7 @@ function Header({ mainPage }) {
                                 return text;
                             }
                             return (_jsxs("span", Object.assign({ className: b('breadcrumb') }, { children: [_jsx("div", Object.assign({ className: b('breadcrumb__icon') }, { children: icon })), text] })));
-                        } }) }), _jsx(ExternalLinkWithIcon, { title: DEVELOPER_UI_TITLE, url: getInternalLink(singleClusterMode) })] })));
+                        } }) }), _jsx(LinkWithIcon, { title: DEVELOPER_UI_TITLE, url: getInternalLink(singleClusterMode) })] })));
     };
     return renderHeader();
 }

package/dist/containers/Header/breadcrumbs.js

@@ -2,11 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { NodesRight as ClusterIcon, Database as DatabaseIcon, Cpu as ComputeNodeIcon, HardDrive as StorageNodeIcon, } from '@gravity-ui/icons';
 import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, } from '../../store/reducers/tenant/constants';
 import { TabletIcon } from '../../components/TabletIcon/TabletIcon';
-import routes, { createHref } from '../../routes';
+import routes, { createHref, getPDiskPagePath } from '../../routes';
 import { CLUSTER_DEFAULT_TITLE, getTabletLabel } from '../../utils/constants';
 import { getClusterPath } from '../Cluster/utils';
 import { TenantTabsGroups, getTenantPath } from '../Tenant/TenantPages';
 import { getDefaultNodePath } from '../Node/NodePages';
+import { headerKeyset } from './i18n';
 const prepareTenantName = (tenantName) => {
     return tenantName.startsWith('/') ? tenantName.slice(1) : tenantName;
 };
@@ -22,7 +23,7 @@ const getClusterBreadcrumbs = (options, query = {}) => {
 };
 const getTenantBreadcrumbs = (options, query = {}) => {
     const { tenantName } = options;
-    const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
+    const text = tenantName ? prepareTenantName(tenantName) : headerKeyset('breadcrumbs.tenant');
     const link = tenantName ? getTenantPath(Object.assign(Object.assign({}, query), { name: tenantName })) : undefined;
     return [...getClusterBreadcrumbs(options, query), { text, link, icon: _jsx(DatabaseIcon, {}) }];
 };
@@ -38,7 +39,9 @@ const getNodeBreadcrumbs = (options, query = {}) => {
     else {
         breadcrumbs = getTenantBreadcrumbs(options, newQuery);
     }
-    const text = nodeId ? `Node ${nodeId}` : 'Node';
+    const text = nodeId
+        ? `${headerKeyset('breadcrumbs.node')} ${nodeId}`
+        : headerKeyset('breadcrumbs.node');
     const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
     const icon = isStorageNode ? _jsx(StorageNodeIcon, {}) : _jsx(ComputeNodeIcon, {});
     breadcrumbs.push({
@@ -48,6 +51,23 @@ const getNodeBreadcrumbs = (options, query = {}) => {
     });
     return breadcrumbs;
 };
+const getPDiskBreadcrumbs = (options, query = {}) => {
+    const { nodeId, pDiskId } = options;
+    const breadcrumbs = getNodeBreadcrumbs({
+        // PDisks relate to storage Nodes, they don't have tenant name
+        tenantName: undefined,
+        nodeId: nodeId,
+    });
+    const text = pDiskId
+        ? `${headerKeyset('breadcrumbs.pDisk')} ${pDiskId}`
+        : headerKeyset('breadcrumbs.pDisk');
+    const link = pDiskId && nodeId ? getPDiskPagePath(pDiskId, nodeId, query) : undefined;
+    breadcrumbs.push({
+        text,
+        link,
+    });
+    return breadcrumbs;
+};
 const getTabletsBreadcrubms = (options, query = {}) => {
     const { tenantName, nodeIds } = options;
     const newQuery = Object.assign(Object.assign({}, query), { [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics, [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets });
@@ -60,14 +80,14 @@ const getTabletsBreadcrubms = (options, query = {}) => {
         breadcrumbs = getClusterBreadcrumbs(options, query);
     }
     const link = createHref(routes.tabletsFilters, undefined, Object.assign(Object.assign({}, query), { nodeIds, path: tenantName }));
-    breadcrumbs.push({ text: 'Tablets', link });
+    breadcrumbs.push({ text: headerKeyset('breadcrumbs.tablets'), link });
     return breadcrumbs;
 };
 const getTabletBreadcrubms = (options, query = {}) => {
     const { tabletId, tabletType } = options;
     const breadcrumbs = getTabletsBreadcrubms(options, query);
     breadcrumbs.push({
-        text: tabletId || 'Tablet',
+        text: tabletId || headerKeyset('breadcrumbs.tablet'),
         icon: _jsx(TabletIcon, { text: getTabletLabel(tabletType) }),
     });
     return breadcrumbs;
@@ -83,6 +103,9 @@ export const getBreadcrumbs = (page, options, rawBreadcrumbs = [], query = {}) =
         case 'node': {
             return [...rawBreadcrumbs, ...getNodeBreadcrumbs(options, query)];
         }
+        case 'pDisk': {
+            return [...rawBreadcrumbs, ...getPDiskBreadcrumbs(options, query)];
+        }
         case 'tablets': {
             return [...rawBreadcrumbs, ...getTabletsBreadcrubms(options, query)];
         }

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

@@ -0,0 +1,7 @@
+{
+    "breadcrumbs.tenant": "Tenant",
+    "breadcrumbs.node": "Node",
+    "breadcrumbs.pDisk": "PDisk",
+    "breadcrumbs.tablet": "Tablet",
+    "breadcrumbs.tablets": "Tablets"
+}

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

@@ -0,0 +1 @@
+export declare const headerKeyset: (key: "breadcrumbs.tenant" | "breadcrumbs.node" | "breadcrumbs.pDisk" | "breadcrumbs.tablet" | "breadcrumbs.tablets", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-header';
+export const headerKeyset = registerKeysets(COMPONENT, { en });

package/dist/containers/Heatmap/Heatmap.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
 import cn from 'bem-cn-lite';
 import { Checkbox, Select } from '@gravity-ui/uikit';
 import { getTabletsInfo, setHeatmapOptions } from '../../store/reducers/heatmap';
 import { showTooltip, hideTooltip } from '../../store/reducers/tooltip';
 import { formatNumber } from '../../utils/dataFormatters/dataFormatters';
-import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
+import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import { Loader } from '../../components/Loader';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits } from './util';
@@ -16,7 +15,7 @@ import './Heatmap.scss';
 const b = cn('heatmap');
 const COLORS_RANGE = getColorRange(COLORS_RANGE_SIZE);
 export const Heatmap = ({ path }) => {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const itemsContainer = React.createRef();
     const { autorefresh } = useTypedSelector((state) => state.schema);
     const { loading, wasLoaded, error, sort, heatmap, metrics, currentMetric, data: tablets = [], } = useTypedSelector((state) => state.heatmap);
@@ -42,7 +41,7 @@ export const Heatmap = ({ path }) => {
         dispatch(showTooltip(...args));
     };
     const onHideTooltip = () => {
-        dispatch(hideTooltip);
+        dispatch(hideTooltip());
     };
     const handleMetricChange = (value) => {
         dispatch(setHeatmapOptions({

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

@@ -19,7 +19,7 @@ export const HeatmapCanvas = (props) => {
             const { columnsCount } = dimensions;
             const rectX = (index % columnsCount) * (TABLET_SIZE + TABLET_PADDING);
             const rectY = Math.floor(index / columnsCount) * (TABLET_SIZE + TABLET_PADDING);
-            ctx.fillStyle = tablet.color || 'gray';
+            ctx.fillStyle = tablet.color || 'grey';
             ctx.fillRect(rectX, rectY, TABLET_SIZE, TABLET_SIZE);
         };
     }

package/dist/containers/Node/Node.js

@@ -2,7 +2,6 @@ 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';
@@ -17,7 +16,7 @@ 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 { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import './Node.scss';
 const b = cn('node');
 export const STORAGE_ROLE = 'Storage';
@@ -25,7 +24,7 @@ const autofetcher = new AutoFetcher();
 function Node(props) {
     var _a;
     const container = useRef(null);
-    const dispatch = useDispatch();
+    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);

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

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

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

@@ -1,6 +1,5 @@
 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';
@@ -8,19 +7,16 @@ 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 { useTypedSelector, useTypedDispatch } 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 dispatch = useTypedDispatch();
     const nodeStructure = useTypedSelector(selectNodeStructure);
     const { loadingStructure, wasLoadedStructure } = useTypedSelector((state) => state.node);
     const { pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl } = url.parse(window.location.href, true).query;

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

@@ -4,19 +4,18 @@ 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 { EFlag } from '../../../types/api/enums';
 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 { valueIsDefined } from '../../../utils';
+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 { valueIsDefined } from './NodeStructure';
 import { PDiskTitleBadge } from './PDiskTitleBadge';
 const b = cn('kv-node-structure');
 var VDiskTableColumnsIds;
@@ -59,7 +58,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.VDiskState],
             width: 70,
             render: ({ row }) => {
-                return (_jsx(EntityStatus, { status: row.VDiskState === EVDiskState.OK ? 'green' : 'red' }));
+                return (_jsx(EntityStatus, { status: row.VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red }));
             },
             sortAccessor: (row) => (row.VDiskState === EVDiskState.OK ? 1 : 0),
             align: DataTable.CENTER,
@@ -90,7 +89,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
 }
 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 { TotalSize = 0, AvailableSize = 0, Device, PDiskId, Type, vDisks } = data;
     const total = Number(TotalSize);
     const available = Number(AvailableSize);
     const onOpenPDiskDetails = () => {
@@ -108,62 +107,7 @@ export function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFro
         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", { 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", 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()] })));
+    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()] })));
 }

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { TVDiskStateInfo } from '../../../types/api/vdisk';
+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

@@ -1,12 +1,14 @@
 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 EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import { valueIsDefined } from '../../../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;
@@ -80,5 +82,5 @@ export function Vdisk({ AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated,
         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 }) }))] }));
+    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 }) }))] }));
 }

package/dist/containers/Nodes/Nodes.js

@@ -1,7 +1,6 @@
 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';
@@ -13,7 +12,7 @@ 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 { useAutofetcher, useSetting, useTypedSelector, useTableSort, useTypedDispatch, } 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';
@@ -23,7 +22,7 @@ import './Nodes.scss';
 import i18n from './i18n';
 const b = cn('ydb-nodes');
 export const Nodes = ({ path, additionalNodesProps = {} }) => {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const isClusterNodes = !path;
     // Since Nodes component is used in several places,
     // we need to reset filters, searchValue and loading state

package/dist/containers/Nodes/NodesWrapper.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { USE_BACKEND_PARAMS_FOR_TABLES_KEY } from '../../utils/constants';
 import { useSetting } from '../../utils/hooks';

package/dist/containers/Nodes/getNodes.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { prepareNodesData } from '../../store/reducers/nodes/utils';
 const getConcurrentId = (limit, offset) => {
     return `getNodes|offset${offset}|limit${limit}`;

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

@@ -6,7 +6,7 @@ interface GetNodesColumnsProps {
     tabletsPath?: string;
     getNodeRef?: GetNodeRefFunc;
 }
-declare type NodesColumn = VirtualTableColumn<NodesPreparedEntity> & DataTableColumn<NodesPreparedEntity>;
+type NodesColumn = VirtualTableColumn<NodesPreparedEntity> & DataTableColumn<NodesPreparedEntity>;
 export declare function getNodesColumns({ tabletsPath, getNodeRef }: GetNodesColumnsProps): NodesColumn[];
 export declare function getTopNodesByLoadColumns(getNodeRef?: GetNodeRefFunc): DataTableColumn<NodesPreparedEntity>[];
 export declare function getTopNodesByCpuColumns(getNodeRef?: GetNodeRefFunc): DataTableColumn<NodesPreparedEntity>[];

package/dist/containers/PDisk/PDisk.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './PDisk.scss';
+export declare function PDisk(): JSX.Element;

package/dist/containers/PDisk/PDisk.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { StringParam, useQueryParams } from 'use-query-params';
+import { Helmet } from 'react-helmet-async';
+import { getPDiskData, getPDiskStorage, setPDiskDataWasNotLoaded, } from '../../store/reducers/pdisk/pdisk';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
+import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { getSeverityColor } from '../../utils/disks/helpers';
+import { PageMeta } from '../../components/PageMeta/PageMeta';
+import { StatusIcon } from '../../components/StatusIcon/StatusIcon';
+import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
+import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { PDiskGroups } from './PDiskGroups';
+import { pdiskPageCn } from './shared';
+import { pDiskPageKeyset } from './i18n';
+import './PDisk.scss';
+export function PDisk() {
+    const dispatch = useTypedDispatch();
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const { pDiskData, groupsData, pDiskLoading, pDiskWasLoaded, groupsLoading, groupsWasLoaded } = useTypedSelector((state) => state.pDisk);
+    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData;
+    const [{ nodeId, pDiskId }] = useQueryParams({
+        nodeId: StringParam,
+        pDiskId: StringParam,
+    });
+    useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('pDisk', { nodeId, pDiskId }));
+    }, [dispatch, nodeId, pDiskId]);
+    useEffect(() => {
+        dispatch(getNodesList());
+    }, [dispatch]);
+    const fetchData = useCallback((isBackground) => {
+        if (!isBackground) {
+            dispatch(setPDiskDataWasNotLoaded());
+        }
+        if (nodeId && pDiskId) {
+            dispatch(getPDiskData({ nodeId, pDiskId }));
+            dispatch(getPDiskStorage({ nodeId, pDiskId }));
+        }
+    }, [dispatch, nodeId, pDiskId]);
+    useAutofetcher(fetchData, [fetchData], true);
+    const renderHelmet = () => {
+        const pDiskPagePart = pDiskId
+            ? `${pDiskPageKeyset('pdisk')} ${pDiskId}`
+            : pDiskPageKeyset('pdisk');
+        const nodePagePart = NodeHost ? NodeHost : pDiskPageKeyset('node');
+        return (_jsx(Helmet, { titleTemplate: `%s - ${pDiskPagePart} — ${nodePagePart} — YDB Monitoring`, defaultTitle: `${pDiskPagePart} — ${nodePagePart} — YDB Monitoring` }));
+    };
+    const renderPageMeta = () => {
+        const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
+        const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
+        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
+    };
+    const renderPageTitle = () => {
+        return (_jsxs("div", Object.assign({ className: pdiskPageCn('title') }, { children: [_jsx("span", Object.assign({ className: pdiskPageCn('title__prefix') }, { children: pDiskPageKeyset('pdisk') })), _jsx(StatusIcon, { status: getSeverityColor(Severity), size: "s" }), pDiskId] })));
+    };
+    const renderInfo = () => {
+        if (pDiskLoading && !pDiskWasLoaded) {
+            return _jsx(InfoViewerSkeleton, { className: pdiskPageCn('info'), rows: 10 });
+        }
+        return (_jsx(PDiskInfo, { pDisk: pDiskData, nodeId: nodeId, className: pdiskPageCn('info'), isPDiskPage: true }));
+    };
+    const renderGroupsTable = () => {
+        return (_jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading && !groupsWasLoaded }));
+    };
+    return (_jsxs("div", Object.assign({ className: pdiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderInfo(), renderGroupsTable()] })));
+}

package/dist/containers/PDisk/PDisk.scss

@@ -0,0 +1,41 @@
+@import '../../styles//mixins.scss';
+
+.ydb-pdisk-page {
+    position: relative;
+
+    display: flex;
+    overflow: auto;
+    flex-direction: column;
+
+    height: 100%;
+    padding-top: 20px;
+    padding-left: 20px;
+
+    gap: 20px;
+
+    &__meta,
+    &__title,
+    &__info,
+    &__groups-title {
+        position: sticky;
+        left: 0;
+    }
+
+    &__title {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: baseline;
+
+        @include header-2-typography();
+
+        &__prefix {
+            margin-right: 6px;
+
+            color: var(--g-color-text-secondary);
+        }
+    }
+
+    &__groups-title {
+        @include header-1-typography();
+    }
+}

package/dist/containers/PDisk/PDiskGroups.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { PreparedStorageGroup } from '../../store/reducers/storage/types';
+import type { NodesMap } from '../../types/store/nodesList';
+interface PDiskGroupsProps {
+    data: PreparedStorageGroup[];
+    nodesMap?: NodesMap;
+    loading?: boolean;
+}
+export declare function PDiskGroups({ data, nodesMap, loading }: PDiskGroupsProps): JSX.Element;
+export {};

package/dist/containers/PDisk/PDiskGroups.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import DataTable from '@gravity-ui/react-data-table';
+import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { getPDiskStorageColumns } from '../Storage/StorageGroups/getStorageGroupsColumns';
+import { pdiskPageCn } from './shared';
+import { pDiskPageKeyset } from './i18n';
+export function PDiskGroups({ data, nodesMap, loading }) {
+    const pDiskStorageColumns = useMemo(() => {
+        return getPDiskStorageColumns(nodesMap);
+    }, [nodesMap]);
+    const renderContent = () => {
+        if (loading) {
+            return _jsx(TableSkeleton, {});
+        }
+        return (_jsx(DataTable, { theme: "yandex-cloud", data: data, columns: pDiskStorageColumns, settings: DEFAULT_TABLE_SETTINGS }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: pdiskPageCn('groups-title') }, { children: pDiskPageKeyset('groups') })), _jsx("div", { children: renderContent() })] }));
+}

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

@@ -0,0 +1,6 @@
+{
+    "fqdn": "FQDN",
+    "pdisk": "PDisk",
+    "groups": "Groups",
+    "node": "Node"
+}

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

@@ -0,0 +1 @@
+export declare const pDiskPageKeyset: (key: "groups" | "node" | "pdisk" | "fqdn", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-pDisk-page';
+export const pDiskPageKeyset = registerKeysets(COMPONENT, { en });