ydb-embedded-ui 6.10.3 → 6.12.0

package/dist/components/EntityStatus/EntityStatus.scss

@@ -10,14 +10,14 @@
     @include body-2-typography();
 
     &__icon {
-        margin-right: 8px;
+        margin-right: var(--g-spacing-2);
     }
 
     &__clipboard-button {
         display: flex;
         flex-shrink: 0;
 
-        margin-left: 8px;
+        margin-left: var(--g-spacing-2);
 
         opacity: 0;
         color: var(--g-color-text-secondary);
@@ -28,6 +28,10 @@
         }
     }
 
+    &__additional-controls {
+        margin-left: var(--g-spacing-1);
+    }
+
     &__label {
         margin-right: 2px;
 

package/dist/components/MetricChart/reducer.d.ts

@@ -1,4 +1,4 @@
 import type { GetChartDataParams } from './getChartData';
 export declare const chartApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, {
-    getChartData: import("@reduxjs/toolkit/query").QueryDefinition<GetChartDataParams, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All", import("./types").PreparedMetricsData | undefined, "api">;
-}, "api", "All", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
+    getChartData: import("@reduxjs/toolkit/query").QueryDefinition<GetChartDataParams, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All" | "PDiskData", import("./types").PreparedMetricsData | undefined, "api">;
+}, "api", "All" | "PDiskData", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;

package/dist/components/MonacoEditor/MonacoEditor.js

@@ -1,7 +1,5 @@
 import { lazyComponent } from '../../utils/lazyComponent';
 export const MonacoEditor = lazyComponent(async () => {
     const Editor = (await import('react-monaco-editor')).default;
-    const { registerLanguages } = await import('../../utils/monaco');
-    registerLanguages();
     return { Editor };
 }, 'Editor');

package/dist/components/NodeHostWrapper/NodeHostWrapper.d.ts

@@ -1,6 +1,5 @@
 import type { NodesPreparedEntity } from '../../store/reducers/nodes/types';
 import type { NodeAddress } from '../../types/additionalProps';
-import './NodeHostWrapper.scss';
 interface NodeHostWrapperProps {
     node: NodesPreparedEntity;
     getNodeRef?: (node?: NodeAddress) => string | null;

package/dist/components/NodeHostWrapper/NodeHostWrapper.js

@@ -1,25 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
-import { Button, Icon, PopoverBehavior } from '@gravity-ui/uikit';
+import { PopoverBehavior } from '@gravity-ui/uikit';
 import { getDefaultNodePath } from '../../containers/Node/NodePages';
-import { cn } from '../../utils/cn';
+import { createDeveloperUILinkWithNodeId } from '../../utils/developerUI/developerUI';
 import { isUnavailableNode } from '../../utils/nodes';
 import { CellWithPopover } from '../CellWithPopover/CellWithPopover';
+import { DeveloperUILinkButton } from '../DeveloperUILinkButton/DeveloperUILinkButton';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
 import { NodeEndpointsTooltipContent } from '../TooltipsContent';
-import './NodeHostWrapper.scss';
-const b = cn('ydb-node-host-wrapper');
 export const NodeHostWrapper = ({ node, getNodeRef }) => {
     if (!node.Host) {
         return _jsx("span", { children: "\u2014" });
     }
     const isNodeAvailable = !isUnavailableNode(node);
-    const nodeRef = isNodeAvailable && getNodeRef ? getNodeRef(node) + 'internal' : undefined;
+    let nodeHref;
+    if (getNodeRef) {
+        nodeHref = getNodeRef(node) + 'internal';
+    }
+    else if (node.NodeId) {
+        nodeHref = createDeveloperUILinkWithNodeId(node.NodeId) + 'internal';
+    }
     const nodePath = isNodeAvailable
         ? getDefaultNodePath(node.NodeId, {
             tenantName: node.TenantName,
         })
         : undefined;
-    const additionalControls = nodeRef ? (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) })) : null;
+    const additionalControls = nodeHref ? _jsx(DeveloperUILinkButton, { href: nodeHref }) : null;
     return (_jsx(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: _jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, additionalControls: additionalControls }) }));
 };

package/dist/components/PDiskInfo/PDiskInfo.d.ts

@@ -1,10 +1,13 @@
 import type { PreparedPDisk } from '../../utils/disks/types';
-import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
 import './PDiskInfo.scss';
-interface PDiskInfoProps<T extends PreparedPDisk> extends Omit<InfoViewerProps, 'info'> {
-    pDisk: T;
+interface GetPDiskInfoOptions<T extends PreparedPDisk> {
+    pDisk?: T;
     nodeId?: number | string | null;
     isPDiskPage?: boolean;
+    isUserAllowedToMakeChanges?: boolean;
 }
-export declare function PDiskInfo<T extends PreparedPDisk>({ pDisk, nodeId, isPDiskPage, ...infoViewerProps }: PDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
+interface PDiskInfoProps<T extends PreparedPDisk> extends GetPDiskInfoOptions<T> {
+    className?: string;
+}
+export declare function PDiskInfo<T extends PreparedPDisk>({ pDisk, nodeId, isPDiskPage, className, }: PDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PDiskInfo/PDiskInfo.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getPDiskPagePath } from '../../routes';
 import { valueIsDefined } from '../../utils';
+import { formatBytes } from '../../utils/bytesParsers';
 import { cn } from '../../utils/cn';
-import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
 import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
 import { createPDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
+import { useTypedSelector } from '../../utils/hooks';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
 import { InfoViewer } from '../InfoViewer/InfoViewer';
 import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
@@ -12,58 +13,104 @@ import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
 import { pDiskInfoKeyset } from './i18n';
 import './PDiskInfo.scss';
 const b = cn('ydb-pdisk-info');
-export function PDiskInfo({ pDisk, nodeId, isPDiskPage = false, ...infoViewerProps }) {
-    const { PDiskId, Path, Guid, Category, Type, Device, Realtime, State, SerialNumber, TotalSize, AvailableSize, } = pDisk;
-    const total = Number(TotalSize);
-    const available = Number(AvailableSize);
-    const pdiskInfo = [];
+// eslint-disable-next-line complexity
+function getPDiskInfo({ pDisk, nodeId, isPDiskPage = false, isUserAllowedToMakeChanges, }) {
+    const { PDiskId, Path, Guid, Category, Type, Device, Realtime, State, SerialNumber, TotalSize, AllocatedSize, DecommitStatus, StatusV2, NumActiveSlots, ExpectedSlotCount, LogUsedSize, LogTotalSize, SystemSize, SharedWithOs, } = pDisk || {};
+    const generalInfo = [];
+    if (valueIsDefined(DecommitStatus)) {
+        generalInfo.push({
+            label: pDiskInfoKeyset('decomission-status'),
+            value: DecommitStatus.replace('DECOMMIT_', ''),
+        });
+    }
+    if (valueIsDefined(Category)) {
+        generalInfo.push({ label: pDiskInfoKeyset('type'), value: Type });
+    }
     if (valueIsDefined(Path)) {
-        pdiskInfo.push({ label: pDiskInfoKeyset('path'), value: Path });
+        generalInfo.push({ label: pDiskInfoKeyset('path'), value: Path });
     }
     if (valueIsDefined(Guid)) {
-        pdiskInfo.push({ label: pDiskInfoKeyset('guid'), value: Guid });
+        generalInfo.push({ label: pDiskInfoKeyset('guid'), value: Guid });
     }
-    if (valueIsDefined(Category)) {
-        pdiskInfo.push({ label: pDiskInfoKeyset('category'), value: Category });
-        pdiskInfo.push({ label: pDiskInfoKeyset('type'), value: Type });
+    // SerialNumber could be an empty string ""
+    if (SerialNumber) {
+        generalInfo.push({
+            label: pDiskInfoKeyset('serial-number'),
+            value: SerialNumber,
+        });
     }
-    if (total >= 0 && available >= 0) {
-        pdiskInfo.push({
-            label: pDiskInfoKeyset('size'),
-            value: (_jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
+    if (valueIsDefined(SharedWithOs)) {
+        generalInfo.push({
+            label: pDiskInfoKeyset('shared-with-os'),
+            value: pDiskInfoKeyset('yes'),
         });
     }
+    const statusInfo = [];
+    if (valueIsDefined(StatusV2)) {
+        statusInfo.push({ label: pDiskInfoKeyset('drive-status'), value: StatusV2 });
+    }
     if (valueIsDefined(State)) {
-        pdiskInfo.push({ label: pDiskInfoKeyset('state'), value: State });
+        statusInfo.push({ label: pDiskInfoKeyset('state'), value: State });
     }
     if (valueIsDefined(Device)) {
-        pdiskInfo.push({
+        statusInfo.push({
             label: pDiskInfoKeyset('device'),
             value: _jsx(EntityStatus, { status: Device }),
         });
     }
     if (valueIsDefined(Realtime)) {
-        pdiskInfo.push({
+        statusInfo.push({
             label: pDiskInfoKeyset('realtime'),
             value: _jsx(EntityStatus, { status: Realtime }),
         });
     }
-    if (valueIsDefined(SerialNumber)) {
-        pdiskInfo.push({
-            label: pDiskInfoKeyset('serial-number'),
-            value: SerialNumber || EMPTY_DATA_PLACEHOLDER,
+    const spaceInfo = [];
+    spaceInfo.push({
+        label: pDiskInfoKeyset('space'),
+        value: (_jsx(ProgressViewer, { value: AllocatedSize, capacity: TotalSize, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
+    });
+    if (valueIsDefined(NumActiveSlots) && valueIsDefined(ExpectedSlotCount)) {
+        spaceInfo.push({
+            label: pDiskInfoKeyset('slots'),
+            value: _jsx(ProgressViewer, { value: NumActiveSlots, capacity: ExpectedSlotCount }),
+        });
+    }
+    if (valueIsDefined(LogUsedSize) && valueIsDefined(LogTotalSize)) {
+        spaceInfo.push({
+            label: pDiskInfoKeyset('log-size'),
+            value: (_jsx(ProgressViewer, { value: LogUsedSize, capacity: LogTotalSize, formatValues: formatStorageValuesToGb })),
         });
     }
-    if (valueIsDefined(PDiskId) && valueIsDefined(nodeId)) {
+    if (valueIsDefined(SystemSize)) {
+        spaceInfo.push({
+            label: pDiskInfoKeyset('system-size'),
+            value: formatBytes({ value: SystemSize }),
+        });
+    }
+    const additionalInfo = [];
+    const shouldDisplayLinks = (!isPDiskPage || isUserAllowedToMakeChanges) &&
+        valueIsDefined(PDiskId) &&
+        valueIsDefined(nodeId);
+    if (shouldDisplayLinks) {
         const pDiskPagePath = getPDiskPagePath(PDiskId, nodeId);
         const pDiskInternalViewerPath = createPDiskDeveloperUILink({
             nodeId,
             pDiskId: PDiskId,
         });
-        pdiskInfo.push({
+        additionalInfo.push({
             label: pDiskInfoKeyset('links'),
-            value: (_jsxs("span", { className: b('links'), children: [!isPDiskPage && (_jsx(LinkWithIcon, { title: pDiskInfoKeyset('pdisk-page'), url: pDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: pDiskInfoKeyset('developer-ui'), url: pDiskInternalViewerPath })] })),
+            value: (_jsxs("span", { className: b('links'), children: [!isPDiskPage && (_jsx(LinkWithIcon, { title: pDiskInfoKeyset('pdisk-page'), url: pDiskPagePath, external: false })), isUserAllowedToMakeChanges && (_jsx(LinkWithIcon, { title: pDiskInfoKeyset('developer-ui'), url: pDiskInternalViewerPath }))] })),
         });
     }
-    return _jsx(InfoViewer, { info: pdiskInfo, ...infoViewerProps });
+    return [generalInfo, statusInfo, spaceInfo, additionalInfo];
+}
+export function PDiskInfo({ pDisk, nodeId, isPDiskPage = false, className, }) {
+    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
+    const [generalInfo, statusInfo, spaceInfo, additionalInfo] = getPDiskInfo({
+        pDisk,
+        nodeId,
+        isPDiskPage,
+        isUserAllowedToMakeChanges,
+    });
+    return (_jsxs("div", { className: b('wrapper', className), children: [_jsxs("div", { className: b('col'), children: [_jsx(InfoViewer, { info: generalInfo, renderEmptyState: () => null }), _jsx(InfoViewer, { info: spaceInfo, renderEmptyState: () => null })] }), _jsxs("div", { className: b('col'), children: [_jsx(InfoViewer, { info: statusInfo, renderEmptyState: () => null }), _jsx(InfoViewer, { info: additionalInfo, renderEmptyState: () => null })] })] }));
 }

package/dist/components/PDiskInfo/PDiskInfo.scss

@@ -1,7 +1,21 @@
 .ydb-pdisk-info {
+    &__wrapper {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 7px;
+    }
+
+    &__col {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+
+        width: 500px;
+    }
+
     &__links {
         display: flex;
         flex-flow: row wrap;
-        gap: 12px;
+        gap: var(--g-spacing-2);
     }
 }

package/dist/components/PDiskInfo/i18n/en.json

@@ -1,14 +1,20 @@
 {
+    "decomission-status": "Decomission Status",
+    "type": "Type",
     "path": "Path",
     "guid": "GUID",
-    "category": "Category",
-    "type": "Type",
-    "size": "Size",
+    "serial-number": "Serial Number",
+    "shared-with-os": "SharedWithOs",
+    "drive-status": "Drive Status",
     "state": "State",
     "device": "Device",
     "realtime": "Realtime",
-    "serial-number": "SerialNumber",
+    "space": "Space",
+    "slots": "Slots",
+    "log-size": "Log Size",
+    "system-size": "System Size",
     "links": "Links",
     "developer-ui": "Developer UI",
-    "pdisk-page": "PDisk page"
+    "pdisk-page": "PDisk page",
+    "yes": "Yes"
 }

package/dist/components/PDiskInfo/i18n/index.d.ts

@@ -1 +1 @@
-export declare const pDiskInfoKeyset: (key: "path" | "type" | "size" | "state" | "links" | "guid" | "category" | "device" | "realtime" | "serial-number" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params) => string;
+export declare const pDiskInfoKeyset: (key: "path" | "space" | "type" | "state" | "yes" | "links" | "decomission-status" | "guid" | "serial-number" | "shared-with-os" | "drive-status" | "device" | "realtime" | "slots" | "log-size" | "system-size" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params) => string;

package/dist/components/PDiskPopup/PDiskPopup.js

@@ -2,9 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Popup } from '@gravity-ui/uikit';
 import { EFlag } from '../../types/api/enums';
+import { valueIsDefined } from '../../utils';
 import { cn } from '../../utils/cn';
 import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
-import { getPDiskId } from '../../utils/dataFormatters/dataFormatters';
+import { getPDiskId } from '../../utils/disks/helpers';
 import { bytesToGB } from '../../utils/utils';
 import { InfoViewer } from '../InfoViewer';
 import './PDiskPopup.scss';
@@ -13,7 +14,12 @@ const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
 export const preparePDiskData = (data, nodes) => {
     const { AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Type, Device } = data;
     const pdiskData = [
-        { label: 'PDisk', value: getPDiskId({ NodeId, PDiskId }) || EMPTY_DATA_PLACEHOLDER },
+        {
+            label: 'PDisk',
+            value: valueIsDefined(NodeId) && valueIsDefined(PDiskId)
+                ? getPDiskId(NodeId, PDiskId)
+                : EMPTY_DATA_PLACEHOLDER,
+        },
         { label: 'State', value: State || 'not available' },
         { label: 'Type', value: Type || 'unknown' },
     ];

package/dist/components/VDiskInfo/VDiskInfo.d.ts

@@ -2,8 +2,9 @@ import type { PreparedVDisk } from '../../utils/disks/types';
 import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
 import './VDiskInfo.scss';
 interface VDiskInfoProps<T extends PreparedVDisk> extends Omit<InfoViewerProps, 'info'> {
-    data: T;
+    data?: T;
     isVDiskPage?: boolean;
+    withTitle?: boolean;
 }
-export declare function VDiskInfo<T extends PreparedVDisk>({ data, isVDiskPage, ...infoViewerProps }: VDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function VDiskInfo<T extends PreparedVDisk>({ data, isVDiskPage, withTitle, ...infoViewerProps }: VDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VDiskInfo/VDiskInfo.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getVDiskPagePath } from '../../routes';
 import { valueIsDefined } from '../../utils';
 import { cn } from '../../utils/cn';
-import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
+import { formatStorageValuesToGb, stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
 import { createVDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
+import { getSeverityColor } from '../../utils/disks/helpers';
 import { bytesToSpeed } from '../../utils/utils';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
 import { InfoViewer } from '../InfoViewer';
@@ -13,9 +14,9 @@ import { vDiskInfoKeyset } from './i18n';
 import './VDiskInfo.scss';
 const b = cn('ydb-vdisk-info');
 // eslint-disable-next-line complexity
-export function VDiskInfo({ data, isVDiskPage = false, ...infoViewerProps }) {
+export function VDiskInfo({ data, isVDiskPage, withTitle, ...infoViewerProps }) {
     var _a, _b, _c, _d;
-    const { AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, PDiskId, NodeId, } = data;
+    const { AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, PDiskId, NodeId, } = data || {};
     const vdiskInfo = [];
     if (valueIsDefined(VDiskSlotId)) {
         vdiskInfo.push({ label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId });
@@ -107,5 +108,9 @@ export function VDiskInfo({ data, isVDiskPage = false, ...infoViewerProps }) {
             value: (_jsxs("span", { className: b('links'), children: [!isVDiskPage && (_jsx(LinkWithIcon, { title: vDiskInfoKeyset('vdisk-page'), url: vDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: vDiskInfoKeyset('developer-ui'), url: vDiskInternalViewerPath })] })),
         });
     }
-    return _jsx(InfoViewer, { info: vdiskInfo, ...infoViewerProps });
+    const title = data && withTitle ? _jsx(VDiskTitle, { data: data }) : null;
+    return _jsx(InfoViewer, { info: vdiskInfo, title: title, ...infoViewerProps });
+}
+function VDiskTitle({ data }) {
+    return (_jsxs("div", { className: b('title'), children: [vDiskInfoKeyset('vdiks-title'), _jsx(EntityStatus, { status: getSeverityColor(data.Severity), name: stringifyVdiskId(data.VDiskId) })] }));
 }

package/dist/components/VDiskInfo/VDiskInfo.scss

@@ -2,6 +2,12 @@
     &__links {
         display: flex;
         flex-flow: row wrap;
-        gap: 12px;
+        gap: var(--g-spacing-2);
+    }
+
+    &__title {
+        display: flex;
+        flex-direction: row;
+        gap: var(--g-spacing-2);
     }
 }

package/dist/components/VDiskInfo/i18n/en.json

@@ -19,5 +19,6 @@
     "vdisk-page": "VDisk Page",
     "developer-ui": "Developer UI",
     "yes": "Yes",
-    "no": "No"
+    "no": "No",
+    "vdiks-title": "VDisk"
 }

package/dist/components/VDiskInfo/i18n/index.d.ts

@@ -1 +1 @@
-export declare const vDiskInfoKeyset: (key: "size" | "kind" | "yes" | "no" | "links" | "pool-name" | "guid" | "developer-ui" | "slot-id" | "incarnation-guid" | "instance-guid" | "replication-status" | "state-status" | "space-status" | "fresh-rank-satisfaction" | "level-rank-satisfaction" | "front-queues" | "has-unreadable-blobs" | "read-throughput" | "write-throughput" | "vdisk-page", params?: import("@gravity-ui/i18n").Params) => string;
+export declare const vDiskInfoKeyset: (key: "size" | "kind" | "yes" | "no" | "links" | "pool-name" | "guid" | "developer-ui" | "slot-id" | "incarnation-guid" | "instance-guid" | "replication-status" | "state-status" | "space-status" | "fresh-rank-satisfaction" | "level-rank-satisfaction" | "front-queues" | "has-unreadable-blobs" | "read-throughput" | "write-throughput" | "vdisk-page" | "vdiks-title", params?: import("@gravity-ui/i18n").Params) => string;

package/dist/containers/Cluster/Cluster.scss

@@ -28,15 +28,12 @@
     }
 
     &__tabs {
-        --g-tabs-border-width: 0;
-
         position: sticky;
         left: 0;
 
         display: flex;
         justify-content: space-between;
         align-items: center;
-
-        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
+        @include tabs-wrapper-styles();
     }
 }

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -44,7 +44,7 @@
     &__links {
         display: flex;
         flex-flow: row wrap;
-        gap: 12px;
+        gap: var(--g-spacing-2);
     }
 
     &__storage-groups-stats {

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

@@ -1,6 +1,7 @@
 import './Heatmap.scss';
 interface HeatmapProps {
+    database: string;
     path: string;
 }
-export declare const Heatmap: ({ path }: HeatmapProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heatmap: ({ path, database }: HeatmapProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Heatmap/Heatmap.js

@@ -14,11 +14,11 @@ import { COLORS_RANGE_SIZE, getColorIndex, getColorRange, getCurrentMetricLimits
 import './Heatmap.scss';
 const b = cn('heatmap');
 const COLORS_RANGE = getColorRange(COLORS_RANGE_SIZE);
-export const Heatmap = ({ path }) => {
+export const Heatmap = ({ path, database }) => {
     const dispatch = useTypedDispatch();
     const itemsContainer = React.createRef();
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const { currentData, isFetching, error } = heatmapApi.useGetHeatmapTabletsInfoQuery({ path }, { pollingInterval: autoRefreshInterval });
+    const { currentData, isFetching, error } = heatmapApi.useGetHeatmapTabletsInfoQuery({ path, database }, { pollingInterval: autoRefreshInterval });
     const loading = isFetching && currentData === undefined;
     const { tablets = [], metrics } = currentData || {};
     const { sort, heatmap, currentMetric } = useTypedSelector((state) => state.heatmap);

package/dist/containers/Node/Node.scss

@@ -23,15 +23,12 @@
     }
 
     &__tabs {
-        --g-tabs-border-width: 0;
-
         display: flex;
         justify-content: space-between;
         align-items: center;
 
         padding: 0 20px;
-
-        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
+        @include tabs-wrapper-styles();
     }
 
     &__tab {

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -142,26 +142,6 @@
     &__selected-vdisk {
         animation: onSelectedVdiskAnimation 4s;
     }
-
-    &__row {
-        display: flex;
-    }
-
-    &__column {
-        display: flex;
-        flex-direction: column;
-
-        margin-bottom: 15px;
-    }
-
-    &__title {
-        margin-right: 16px;
-
-        font-weight: 500;
-        text-transform: uppercase;
-
-        @include body-2-typography();
-    }
 }
 
 @keyframes onSelectedVdiskAnimation {

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

@@ -7,6 +7,7 @@ import isEmpty from 'lodash/isEmpty';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 import { PDiskInfo } from '../../../components/PDiskInfo/PDiskInfo';
 import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { VDiskInfo } from '../../../components/VDiskInfo/VDiskInfo';
 import { EFlag } from '../../../types/api/enums';
 import { EVDiskState } from '../../../types/api/vdisk';
 import { valueIsDefined } from '../../../utils';
@@ -16,7 +17,6 @@ import { formatStorageValuesToGb } from '../../../utils/dataFormatters/dataForma
 import { createVDiskDeveloperUILink } from '../../../utils/developerUI/developerUI';
 import i18n from '../i18n';
 import { PDiskTitleBadge } from './PDiskTitleBadge';
-import { Vdisk } from './Vdisk';
 const b = cn('kv-node-structure');
 var VDiskTableColumnsIds;
 (function (VDiskTableColumnsIds) {
@@ -78,7 +78,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
             width: 70,
             render: ({ row }) => {
-                return (_jsx(Popover, { placement: ['right'], content: _jsx(Vdisk, { data: row }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
+                return (_jsx(Popover, { placement: ['right'], content: _jsx(VDiskInfo, { data: row, withTitle: true }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
                             selected: row.id === selectedVdiskId,
                         }), children: _jsx(Icon, { data: CircleInfoFill, size: 18 }) }) }));
             },

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

@@ -0,0 +1,6 @@
+interface PDiskGroupsProps {
+    nodeId: string | number;
+    pDiskId: string | number;
+}
+export declare function PDiskGroups({ pDiskId, nodeId }: PDiskGroupsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/PDiskPage/PDiskGroups/PDiskGroups.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableSkeleton } from '../../../components/TableSkeleton/TableSkeleton';
+import { selectNodesMap } from '../../../store/reducers/nodesList';
+import { pDiskApi } from '../../../store/reducers/pdisk/pdisk';
+import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
+import { useAutoRefreshInterval, useTypedSelector } from '../../../utils/hooks';
+import { STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, getPDiskStorageColumns, } from '../../Storage/StorageGroups/getStorageGroupsColumns';
+export function PDiskGroups({ pDiskId, nodeId }) {
+    var _a;
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const pDiskStorageQuery = pDiskApi.useGetStorageInfoQuery({ pDiskId, nodeId }, { pollingInterval: autoRefreshInterval });
+    const loading = pDiskStorageQuery.isFetching && pDiskStorageQuery.currentData === undefined;
+    const data = (_a = pDiskStorageQuery.currentData) !== null && _a !== void 0 ? _a : [];
+    const pDiskStorageColumns = React.useMemo(() => {
+        return getPDiskStorageColumns(nodesMap);
+    }, [nodesMap]);
+    if (loading) {
+        return _jsx(TableSkeleton, {});
+    }
+    return (_jsx(ResizeableDataTable, { columnsWidthLSKey: STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, data: data, columns: pDiskStorageColumns, settings: DEFAULT_TABLE_SETTINGS }));
+}