ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/components/TabletsStatistic/TabletsStatistic.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Link } from 'react-router-dom';
+import routes, { createHref } from '../../routes';
+import { cn } from '../../utils/cn';
 import { getTabletLabel } from '../../utils/constants';
 import { mapTabletStateToColorState } from '../../utils/tablet';
-import routes, { createHref } from '../../routes';
 import './TabletsStatistic.scss';
 const b = cn('tablets-statistic');
 const prepareTablets = (tablets) => {
@@ -29,8 +29,8 @@ export const TabletsStatistic = ({ tablets = [], path, nodeIds, backend }) => {
         });
         const label = `${item.label}: ${item.count}`;
         const className = b('tablet', { state: (_a = item.state) === null || _a === void 0 ? void 0 : _a.toLowerCase() });
-        return backend ? (_jsx("a", Object.assign({ href: tabletsPath, className: className }, { children: label }), index)) : (_jsx(Link, Object.assign({ to: tabletsPath, className: className }, { children: label }), index));
+        return backend ? (_jsx("a", { href: tabletsPath, className: className, children: label }, index)) : (_jsx(Link, { to: tabletsPath, className: className, children: label }, index));
     };
     const preparedTablets = prepareTablets(tablets);
-    return _jsx("div", Object.assign({ className: b() }, { children: preparedTablets.map(renderTabletInfo) }));
+    return _jsx("div", { className: b(), children: preparedTablets.map(renderTabletInfo) });
 };

package/dist/components/Tag/Tag.d.ts

@@ -4,5 +4,5 @@ interface TagProps {
     text: string;
     type?: TagType;
 }
-export declare const Tag: ({ text, type }: TagProps) => JSX.Element;
+export declare const Tag: ({ text, type }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tag/Tag.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import './Tag.scss';
 const b = cn('tag');
 export const Tag = ({ text, type }) => {
-    return _jsx("div", Object.assign({ className: b({ type }) }, { children: text }));
+    return _jsx("div", { className: b({ type }), children: text });
 };

package/dist/components/Tags/Tags.d.ts

@@ -1,9 +1,9 @@
-import { TagType } from '../Tag';
+import type { TagType } from '../Tag';
 import './Tags.scss';
 interface TagsProps {
     tags: string[];
     tagsType?: TagType;
     className?: string;
 }
-export declare const Tags: ({ tags, tagsType, className }: TagsProps) => JSX.Element;
+export declare const Tags: ({ tags, tagsType, className }: TagsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tags/Tags.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import { Tag } from '../Tag';
 import './Tags.scss';
 const b = cn('tags');
 export const Tags = ({ tags, tagsType, className = '' }) => {
-    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: tags &&
-            tags.map((tag, tagIndex) => _jsx(Tag, { text: tag, type: tagsType }, tagIndex)) })));
+    return (_jsx("div", { className: b(null, className), children: tags &&
+            tags.map((tag, tagIndex) => _jsx(Tag, { text: tag, type: tagsType }, tagIndex)) }));
 };

package/dist/components/TimeFrameSelector/TimeFrameSelector.d.ts

@@ -1,9 +1,9 @@
-import { type TimeFrame } from '../../utils/timeframes';
+import type { TimeFrame } from '../../utils/timeframes';
 import './TimeFrameSelector.scss';
 interface TimeFrameSelectorProps {
     value: TimeFrame;
     onChange: (value: TimeFrame) => void;
     className?: string;
 }
-export declare const TimeFrameSelector: ({ value, onChange, className }: TimeFrameSelectorProps) => JSX.Element;
+export declare const TimeFrameSelector: ({ value, onChange, className }: TimeFrameSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TimeFrameSelector/TimeFrameSelector.js

@@ -5,7 +5,7 @@ import { TIMEFRAMES } from '../../utils/timeframes';
 import './TimeFrameSelector.scss';
 const b = cn('ydb-timeframe-selector');
 export const TimeFrameSelector = ({ value, onChange, className }) => {
-    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: Object.keys(TIMEFRAMES).map((timeFrame) => {
-            return (_jsx(Button, Object.assign({ view: "flat", selected: value === timeFrame, onClick: () => onChange(timeFrame) }, { children: timeFrame }), timeFrame));
-        }) })));
+    return (_jsx("div", { className: b(null, className), children: Object.keys(TIMEFRAMES).map((timeFrame) => {
+            return (_jsx(Button, { view: "flat", selected: value === timeFrame, onClick: () => onChange(timeFrame), children: timeFrame }, timeFrame));
+        }) }));
 };

package/dist/components/TimeFrameSelector/TimeFrameSelector.scss

@@ -1,5 +1,4 @@
 .ydb-timeframe-selector {
     display: flex;
-
     gap: 2px;
 }

package/dist/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.d.ts

@@ -3,5 +3,5 @@ import './NodeEndpointsTooltipContent.scss';
 interface NodeEdpointsTooltipProps {
     data?: TSystemStateInfo;
 }
-export declare const NodeEndpointsTooltipContent: ({ data }: NodeEdpointsTooltipProps) => JSX.Element;
+export declare const NodeEndpointsTooltipContent: ({ data }: NodeEdpointsTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
+import { cn } from '../../../utils/cn';
 import { InfoViewer } from '../../InfoViewer';
 import './NodeEndpointsTooltipContent.scss';
-const b = block('ydb-node-endpoints-tooltip-content');
+const b = cn('ydb-node-endpoints-tooltip-content');
 export const NodeEndpointsTooltipContent = ({ data }) => {
     const info = [];
     if (data === null || data === void 0 ? void 0 : data.Rack) {

package/dist/components/TooltipsContent/PoolTooltipContent/PoolTooltipContent.d.ts

@@ -3,5 +3,5 @@ interface PoolTooltipContentProps {
     data?: TPoolStats;
     className?: string;
 }
-export declare const PoolTooltipContent: ({ data, className }: PoolTooltipContentProps) => JSX.Element;
+export declare const PoolTooltipContent: ({ data, className }: PoolTooltipContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.d.ts

@@ -3,5 +3,5 @@ interface TabletTooltipContentProps {
     data?: TTabletStateInfo;
     className?: string;
 }
-export declare const TabletTooltipContent: ({ data, className }: TabletTooltipContentProps) => JSX.Element;
+export declare const TabletTooltipContent: ({ data, className }: TabletTooltipContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TruncatedQuery/TruncatedQuery.d.ts

@@ -3,9 +3,9 @@ interface TruncatedQueryProps {
     value?: string;
     maxQueryHeight?: number;
 }
-export declare const TruncatedQuery: ({ value, maxQueryHeight }: TruncatedQueryProps) => JSX.Element;
+export declare const TruncatedQuery: ({ value, maxQueryHeight }: TruncatedQueryProps) => import("react/jsx-runtime").JSX.Element;
 interface OneLineQueryWithPopoverProps {
     value?: string;
 }
-export declare const OneLineQueryWithPopover: ({ value }: OneLineQueryWithPopoverProps) => JSX.Element;
+export declare const OneLineQueryWithPopover: ({ value }: OneLineQueryWithPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TruncatedQuery/TruncatedQuery.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../utils/cn';
 import { CellWithPopover } from '../CellWithPopover/CellWithPopover';
 import './TruncatedQuery.scss';
 const b = cn('kv-truncated-query');
@@ -9,10 +10,10 @@ export const TruncatedQuery = ({ value = '', maxQueryHeight = 6 }) => {
     if (truncated) {
         const content = lines.slice(0, maxQueryHeight).join('\n');
         const message = '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
-        return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: b() }, { children: content })), _jsx("span", Object.assign({ className: b('message', { color: 'secondary' }) }, { children: message }))] }));
+        return (_jsxs(React.Fragment, { children: [_jsx("span", { className: b(), children: content }), _jsx("span", { className: b('message', { color: 'secondary' }), children: message })] }));
     }
-    return _jsx(_Fragment, { children: value });
+    return _jsx(React.Fragment, { children: value });
 };
 export const OneLineQueryWithPopover = ({ value = '' }) => {
-    return (_jsx(CellWithPopover, Object.assign({ contentClassName: b('popover-content'), content: value }, { children: value })));
+    return (_jsx(CellWithPopover, { contentClassName: b('popover-content'), content: value, children: value }));
 };

package/dist/components/UptimeFIlter/UptimeFilter.d.ts

@@ -4,5 +4,5 @@ interface UptimeFilterProps {
     onChange: (value: NodesUptimeFilterValues) => void;
     className?: string;
 }
-export declare const UptimeFilter: ({ value, onChange, className }: UptimeFilterProps) => JSX.Element;
+export declare const UptimeFilter: ({ value, onChange, className }: UptimeFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UptimeFIlter/UptimeFilter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RadioButton } from '@gravity-ui/uikit';
-import { NodesUptimeFilterValues, NodesUptimeFilterTitles } from '../../utils/nodes';
+import { NodesUptimeFilterTitles, NodesUptimeFilterValues } from '../../utils/nodes';
 export const UptimeFilter = ({ value, onChange, className }) => {
-    return (_jsxs(RadioButton, Object.assign({ value: value, onUpdate: onChange, className: className }, { children: [_jsx(RadioButton.Option, Object.assign({ value: NodesUptimeFilterValues.All }, { children: NodesUptimeFilterTitles[NodesUptimeFilterValues.All] })), _jsx(RadioButton.Option, Object.assign({ value: NodesUptimeFilterValues.SmallUptime }, { children: NodesUptimeFilterTitles[NodesUptimeFilterValues.SmallUptime] }))] })));
+    return (_jsxs(RadioButton, { value: value, onUpdate: onChange, className: className, children: [_jsx(RadioButton.Option, { value: NodesUptimeFilterValues.All, children: NodesUptimeFilterTitles[NodesUptimeFilterValues.All] }), _jsx(RadioButton.Option, { value: NodesUptimeFilterValues.SmallUptime, children: NodesUptimeFilterTitles[NodesUptimeFilterValues.SmallUptime] })] }));
 };

package/dist/components/UsageLabel/UsageLabel.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { type LabelProps } from '@gravity-ui/uikit';
+import type { LabelProps } from '@gravity-ui/uikit';
 import './UsageLabel.scss';
 interface UsageLabelProps extends Omit<LabelProps, 'value'> {
     value: number | string;
     overloadThreshold?: number;
 }
-export declare function UsageLabel({ value, overloadThreshold, theme, ...props }: UsageLabelProps): JSX.Element;
+export declare function UsageLabel({ value, overloadThreshold, theme, ...props }: UsageLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UsageLabel/UsageLabel.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Label } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import './UsageLabel.scss';
 const b = cn('ydb-usage-label');
 export function UsageLabel(_a) {

package/dist/components/User/StaffCard.d.ts

@@ -5,4 +5,4 @@ export interface StaffCardProps {
         ref?: React.Ref<HTMLElement>;
     };
 }
-export declare function StaffCard({ children }: StaffCardProps): JSX.Element;
+export declare function StaffCard({ children }: StaffCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/User/User.d.ts

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

package/dist/components/User/User.js

@@ -5,5 +5,5 @@ import './User.scss';
 const b = cn('kv-user');
 export function UserCard({ login, className }) {
     const StaffCard = useComponent('StaffCard');
-    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: _jsx(StaffCard, Object.assign({ login: login }, { children: _jsx("div", Object.assign({ className: b('name') }, { children: login })) })) })));
+    return (_jsx("div", { className: b(null, className), children: _jsx(StaffCard, { login: login, children: _jsx("div", { className: b('name'), children: login }) }) }));
 }

package/dist/{containers/Storage → components}/VDisk/VDisk.d.ts

@@ -1,10 +1,10 @@
-import type { NodesMap } from '../../../types/store/nodesList';
-import type { PreparedVDisk } from '../../../utils/disks/types';
+import type { NodesMap } from '../../types/store/nodesList';
+import type { PreparedVDisk } from '../../utils/disks/types';
 import './VDisk.scss';
 interface VDiskProps {
     data?: PreparedVDisk;
     nodes?: NodesMap;
     compact?: boolean;
 }
-export declare const VDisk: ({ data, nodes, compact }: VDiskProps) => JSX.Element;
+export declare const VDisk: ({ data, nodes, compact }: VDiskProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VDisk/VDisk.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { STRUCTURE } from '../../containers/Node/NodePages';
+import routes, { createHref } from '../../routes';
+import { cn } from '../../utils/cn';
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { isFullVDiskData } from '../../utils/disks/helpers';
+import { DiskStateProgressBar } from '../DiskStateProgressBar/DiskStateProgressBar';
+import { InternalLink } from '../InternalLink';
+import { VDiskPopup } from '../VDiskPopup/VDiskPopup';
+import './VDisk.scss';
+const b = cn('ydb-vdisk-component');
+export const VDisk = ({ data = {}, nodes, compact }) => {
+    var _a, _b;
+    const isFullData = isFullVDiskData(data);
+    const [isPopupVisible, setIsPopupVisible] = React.useState(false);
+    const anchor = React.useRef(null);
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx(VDiskPopup, { data: data, nodes: nodes, anchorRef: anchor, open: isPopupVisible }), _jsx("div", { className: b(), ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup, children: data.NodeId && isFullData ? (_jsx(InternalLink, { to: createHref(routes.node, { id: data.NodeId, activeTab: STRUCTURE }, {
+                        pdiskId: (_a = data.PDiskId) !== null && _a !== void 0 ? _a : (_b = data.PDisk) === null || _b === void 0 ? void 0 : _b.PDiskId,
+                        vdiskId: stringifyVdiskId(data.VDiskId),
+                    }), className: b('content'), children: _jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact }) })) : (_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact })) })] }));
+};

package/dist/{containers/Storage → components}/VDisk/VDisk.scss

@@ -1,4 +1,4 @@
-.vdisk-storage {
+.ydb-vdisk-component {
     border-radius: 4px; // to match interactive area with disk shape
 
     &__content {

package/dist/components/VDisk/VDiskWithDonorsStack.d.ts

@@ -0,0 +1,11 @@
+import type { NodesMap } from '../../types/store/nodesList';
+import type { PreparedVDisk } from '../../utils/disks/types';
+interface VDiskWithDonorsStackProps {
+    data?: PreparedVDisk;
+    nodes?: NodesMap;
+    compact?: boolean;
+    className?: string;
+    stackClassName?: string;
+}
+export declare function VDiskWithDonorsStack({ data, nodes, compact, className, stackClassName, }: VDiskWithDonorsStackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/VDisk/VDiskWithDonorsStack.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { isFullVDiskData } from '../../utils/disks/helpers';
+import { Stack } from '../Stack/Stack';
+import { VDisk } from './VDisk';
+export function VDiskWithDonorsStack({ data, nodes, compact, className, stackClassName, }) {
+    const donors = data === null || data === void 0 ? void 0 : data.Donors;
+    const content = donors && donors.length > 0 ? (_jsxs(Stack, { className: stackClassName, children: [_jsx(VDisk, { data: data, nodes: nodes, compact: compact }), donors.map((donor) => {
+                const isFullData = isFullVDiskData(donor);
+                // donor and acceptor are always in the same group
+                return (_jsx(VDisk, { data: donor, nodes: nodes, compact: compact }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
+            })] })) : (_jsx(VDisk, { data: data, nodes: nodes, compact: compact }));
+    return _jsx("div", { className: className, children: content });
+}

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

@@ -0,0 +1,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;
+    isVDiskPage?: boolean;
+}
+export declare function VDiskInfo<T extends PreparedVDisk>({ data, isVDiskPage, ...infoViewerProps }: VDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/VDiskInfo/VDiskInfo.js

@@ -0,0 +1,113 @@
+import { __rest } from "tslib";
+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 { createVDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
+import { bytesToSpeed } from '../../utils/utils';
+import { EntityStatus } from '../EntityStatus/EntityStatus';
+import { InfoViewer } from '../InfoViewer';
+import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
+import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
+import { vDiskInfoKeyset } from './i18n';
+import './VDiskInfo.scss';
+const b = cn('ydb-vdisk-info');
+// eslint-disable-next-line complexity
+export function VDiskInfo(_a) {
+    var _b, _c, _d, _e;
+    var { data, isVDiskPage = false } = _a, infoViewerProps = __rest(_a, ["data", "isVDiskPage"]);
+    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 });
+    }
+    if (valueIsDefined(StoragePoolName)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('pool-name'), value: StoragePoolName });
+    }
+    if (valueIsDefined(VDiskState)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('state-status'),
+            value: VDiskState,
+        });
+    }
+    if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('size'),
+            value: (_jsx(ProgressViewer, { value: AllocatedSize, capacity: Number(AllocatedSize) + Number(AvailableSize), formatValues: formatStorageValuesToGb, colorizeProgress: true })),
+        });
+    }
+    if (valueIsDefined(Kind)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('kind'), value: Kind });
+    }
+    if (valueIsDefined(Guid)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('guid'), value: Guid });
+    }
+    if (valueIsDefined(IncarnationGuid)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('incarnation-guid'), value: IncarnationGuid });
+    }
+    if (valueIsDefined(InstanceGuid)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('instance-guid'), value: InstanceGuid });
+    }
+    if (valueIsDefined(Replicated)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('replication-status'),
+            value: Replicated ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
+        });
+    }
+    if (valueIsDefined(DiskSpace)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('space-status'),
+            value: _jsx(EntityStatus, { status: DiskSpace }),
+        });
+    }
+    if (valueIsDefined((_b = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.FreshRank) === null || _b === void 0 ? void 0 : _b.Flag)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('fresh-rank-satisfaction'),
+            value: _jsx(EntityStatus, { status: (_c = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.FreshRank) === null || _c === void 0 ? void 0 : _c.Flag }),
+        });
+    }
+    if (valueIsDefined((_d = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.LevelRank) === null || _d === void 0 ? void 0 : _d.Flag)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('level-rank-satisfaction'),
+            value: _jsx(EntityStatus, { status: (_e = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.LevelRank) === null || _e === void 0 ? void 0 : _e.Flag }),
+        });
+    }
+    if (valueIsDefined(FrontQueues)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('front-queues'),
+            value: _jsx(EntityStatus, { status: FrontQueues }),
+        });
+    }
+    if (valueIsDefined(HasUnreadableBlobs)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('has-unreadable-blobs'),
+            value: HasUnreadableBlobs ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
+        });
+    }
+    if (valueIsDefined(ReadThroughput)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('read-throughput'),
+            value: bytesToSpeed(ReadThroughput),
+        });
+    }
+    if (valueIsDefined(WriteThroughput)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('write-throughput'),
+            value: bytesToSpeed(WriteThroughput),
+        });
+    }
+    if (valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId)) {
+        const vDiskPagePath = getVDiskPagePath(VDiskSlotId, PDiskId, NodeId);
+        const vDiskInternalViewerPath = createVDiskDeveloperUILink({
+            nodeId: NodeId,
+            pDiskId: PDiskId,
+            vDiskSlotId: VDiskSlotId,
+        });
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('links'),
+            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, Object.assign({ info: vdiskInfo }, infoViewerProps));
+}

package/dist/components/VDiskInfo/VDiskInfo.scss

@@ -0,0 +1,7 @@
+.ydb-vdisk-info {
+    &__links {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 12px;
+    }
+}

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

@@ -0,0 +1,23 @@
+{
+    "slot-id": "VDisk Slot Id",
+    "pool-name": "Storage Pool Name",
+    "kind": "Kind",
+    "guid": "GUID",
+    "incarnation-guid": "Incarnation GUID",
+    "instance-guid": "Instance GUID",
+    "replication-status": "Replicated",
+    "state-status": "VDisk State",
+    "space-status": "Disk Space",
+    "fresh-rank-satisfaction": "Fresh Rank Satisfaction",
+    "level-rank-satisfaction": "Level Rank Satisfaction",
+    "front-queues": "Front Queues",
+    "has-unreadable-blobs": "Has Unreadable Blobs",
+    "size": "Size",
+    "read-throughput": "Read Throughput",
+    "write-throughput": "Write Throughput",
+    "links": "Links",
+    "vdisk-page": "VDisk Page",
+    "developer-ui": "Developer UI",
+    "yes": "Yes",
+    "no": "No"
+}

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

@@ -0,0 +1 @@
+export declare const vDiskInfoKeyset: (key: "size" | "kind" | "links" | "yes" | "no" | "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 | undefined) => string;

package/dist/components/VDiskInfo/i18n/index.js

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

package/dist/components/VDiskPopup/VDiskPopup.d.ts

@@ -0,0 +1,11 @@
+import type { PopupProps } from '@gravity-ui/uikit';
+import type { TVDiskStateInfo } from '../../types/api/vdisk';
+import type { NodesMap } from '../../types/store/nodesList';
+import type { UnavailableDonor } from '../../utils/disks/types';
+import './VDiskPopup.scss';
+interface VDiskPopupProps extends PopupProps {
+    data: TVDiskStateInfo | UnavailableDonor;
+    nodes?: NodesMap;
+}
+export declare const VDiskPopup: ({ data, nodes, ...props }: VDiskPopupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/{containers/Storage → components}/VDiskPopup/VDiskPopup.js

@@ -1,14 +1,15 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { Label, Popup } from '@gravity-ui/uikit';
-import { InfoViewer } from '../../../components/InfoViewer';
-import { EFlag } from '../../../types/api/enums';
-import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
-import { bytesToGB, bytesToSpeed } from '../../../utils/utils';
-import { isFullVDiskData } from '../../../utils/disks/helpers';
-import { preparePDiskData } from '../PDiskPopup';
+import { EFlag } from '../../types/api/enums';
+import { cn } from '../../utils/cn';
+import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { isFullVDiskData } from '../../utils/disks/helpers';
+import { bytesToGB, bytesToSpeed } from '../../utils/utils';
+import { InfoViewer } from '../InfoViewer';
+import { preparePDiskData } from '../PDiskPopup/PDiskPopup';
 import './VDiskPopup.scss';
 const b = cn('vdisk-storage-popup');
 const prepareUnavailableVDiskData = (data) => {
@@ -17,7 +18,7 @@ const prepareUnavailableVDiskData = (data) => {
     if (StoragePoolName) {
         vdiskData.push({ label: 'StoragePool', value: StoragePoolName });
     }
-    vdiskData.push({ label: 'NodeId', value: NodeId !== null && NodeId !== void 0 ? NodeId : '–' }, { label: 'PDiskId', value: PDiskId !== null && PDiskId !== void 0 ? PDiskId : '–' }, { label: 'VSlotId', value: VSlotId !== null && VSlotId !== void 0 ? VSlotId : '–' });
+    vdiskData.push({ label: 'NodeId', value: NodeId !== null && NodeId !== void 0 ? NodeId : EMPTY_DATA_PLACEHOLDER }, { label: 'PDiskId', value: PDiskId !== null && PDiskId !== void 0 ? PDiskId : EMPTY_DATA_PLACEHOLDER }, { label: 'VSlotId', value: VSlotId !== null && VSlotId !== void 0 ? VSlotId : EMPTY_DATA_PLACEHOLDER });
     return vdiskData;
 };
 const prepareVDiskData = (data) => {
@@ -86,10 +87,10 @@ const prepareVDiskData = (data) => {
 export const VDiskPopup = (_a) => {
     var { data, nodes } = _a, props = __rest(_a, ["data", "nodes"]);
     const isFullData = isFullVDiskData(data);
-    const vdiskInfo = useMemo(() => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)), [data, isFullData]);
-    const pdiskInfo = useMemo(() => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes), [data, nodes, isFullData]);
+    const vdiskInfo = React.useMemo(() => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)), [data, isFullData]);
+    const pdiskInfo = React.useMemo(() => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes), [data, nodes, isFullData]);
     return (_jsxs(Popup, Object.assign({ contentClassName: b(), placement: ['top', 'bottom'], 
         // bigger offset for easier switching to neighbour nodes
         // matches the default offset for popup with arrow out of a sense of beauty
-        offset: [0, 12] }, props, { children: [data.DonorMode && _jsx(Label, Object.assign({ className: b('donor-label') }, { children: "Donor" })), _jsx(InfoViewer, { title: "VDisk", info: vdiskInfo, size: "s" }), pdiskInfo && _jsx(InfoViewer, { title: "PDisk", info: pdiskInfo, size: "s" })] })));
+        offset: [0, 12] }, props, { children: [data.DonorMode && _jsx(Label, { className: b('donor-label'), children: "Donor" }), _jsx(InfoViewer, { title: "VDisk", info: vdiskInfo, size: "s" }), pdiskInfo && _jsx(InfoViewer, { title: "PDisk", info: pdiskInfo, size: "s" })] })));
 };

package/dist/components/VirtualTable/TableChunk.d.ts

@@ -1,4 +1,4 @@
-import type { Column, Chunk, GetRowClassName } from './types';
+import type { Chunk, Column, GetRowClassName } from './types';
 interface TableChunkProps<T> {
     id: number;
     chunkSize: number;
@@ -8,5 +8,5 @@ interface TableChunkProps<T> {
     observer: IntersectionObserver;
     getRowClassName?: GetRowClassName<T>;
 }
-export declare const TableChunk: <T>({ id, chunkSize, rowHeight, columns, chunkData, observer, getRowClassName, }: TableChunkProps<T>) => JSX.Element;
+export declare const TableChunk: <T>({ id, chunkSize, rowHeight, columns, chunkData, observer, getRowClassName, }: TableChunkProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VirtualTable/TableChunk.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, memo } from 'react';
+import React from 'react';
 import { getArray } from '../../utils';
 import { LoadingTableRow, TableRow } from './TableRow';
 // With original memo generic types are lost
-const typedMemo = memo;
+const typedMemo = React.memo;
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
 export const TableChunk = typedMemo(function TableChunk({ id, chunkSize, rowHeight, columns, chunkData, observer, getRowClassName, }) {
     var _a;
-    const ref = useRef(null);
-    useEffect(() => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
         const el = ref.current;
         if (el) {
             observer.observe(el);
@@ -39,5 +39,5 @@ export const TableChunk = typedMemo(function TableChunk({ id, chunkSize, rowHeig
             return (_jsx(TableRow, { index: index, row: data, columns: columns, height: rowHeight, getRowClassName: getRowClassName }, index));
         });
     };
-    return (_jsx("tbody", Object.assign({ ref: ref, id: id.toString(), style: { height: `${chunkHeight}px` } }, { children: renderContent() })));
+    return (_jsx("tbody", { ref: ref, id: id.toString(), style: { height: `${chunkHeight}px` }, children: renderContent() }));
 });

package/dist/components/VirtualTable/TableHead.d.ts

@@ -2,6 +2,7 @@ import type { HandleTableColumnsResize } from '../../utils/hooks/useTableResize'
 import type { Column, OnSort, SortOrderType } from './types';
 interface TableHeadCellProps<T> {
     column: Column<T>;
+    resizeable?: boolean;
     sortOrder?: SortOrderType;
     defaultSortOrder: SortOrderType;
     onSort?: (columnName: string) => void;
@@ -9,7 +10,7 @@ interface TableHeadCellProps<T> {
     onCellMount?: (element: Element) => void;
     onCellUnMount?: (element: Element) => void;
 }
-export declare const TableHeadCell: <T>({ column, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }: TableHeadCellProps<T>) => JSX.Element;
+export declare const TableHeadCell: <T>({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }: TableHeadCellProps<T>) => import("react/jsx-runtime").JSX.Element;
 interface TableHeadProps<T> {
     columns: Column<T>[];
     onSort?: OnSort;
@@ -17,5 +18,5 @@ interface TableHeadProps<T> {
     defaultSortOrder?: SortOrderType;
     rowHeight?: number;
 }
-export declare const TableHead: <T>({ columns, onSort, onColumnsResize, defaultSortOrder, rowHeight, }: TableHeadProps<T>) => JSX.Element;
+export declare const TableHead: <T>({ columns, onSort, onColumnsResize, defaultSortOrder, rowHeight, }: TableHeadProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};