ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/components/InfoViewer/schemaInfo/TableIndexInfo.d.ts

@@ -2,5 +2,5 @@ import type { TEvDescribeSchemeResult } from '../../../types/api/schema';
 interface TableIndexInfoProps {
     data?: TEvDescribeSchemeResult;
 }
-export declare const TableIndexInfo: ({ data }: TableIndexInfoProps) => JSX.Element;
+export declare const TableIndexInfo: ({ data }: TableIndexInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfoViewer/schemaInfo/TableIndexInfo.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { InfoViewer } from '..';
 import { getEntityName } from '../../../containers/Tenant/utils';
 import { formatTableIndexItem } from '../formatters';
-import { InfoViewer } from '..';
 const DISPLAYED_FIELDS = new Set([
     'Type',
     'State',
@@ -13,7 +13,7 @@ export const TableIndexInfo = ({ data }) => {
     var _a;
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
     if (!data) {
-        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+        return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }
     const TableIndex = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.TableIndex;
     const info = [];

package/dist/components/InfoViewer/schemaOverview/CDCStreamOverview.d.ts

@@ -2,5 +2,5 @@ import type { TEvDescribeSchemeResult } from '../../../types/api/schema';
 interface CDCStreamOverviewProps {
     data?: TEvDescribeSchemeResult;
 }
-export declare const CDCStreamOverview: ({ data }: CDCStreamOverviewProps) => JSX.Element;
+export declare const CDCStreamOverview: ({ data }: CDCStreamOverviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfoViewer/schemaOverview/CDCStreamOverview.js

@@ -1,21 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { InfoViewer } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { InfoViewer, formatObject } from '..';
 import { formatCdcStreamItem, formatCommonItem } from '../formatters';
-const DISPLAYED_FIELDS = new Set(['Mode', 'Format']);
 export const CDCStreamOverview = ({ data }) => {
     var _a, _b, _c, _d, _e;
     if (!data) {
-        return _jsx("div", Object.assign({ className: "error" }, { children: "No CDC Stream data" }));
+        return _jsx("div", { className: "error", children: "No CDC Stream data" });
     }
     const TableIndex = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.CdcStreamDescription;
     const info = [];
     info.push(formatCommonItem('PathType', (_c = (_b = data.PathDescription) === null || _b === void 0 ? void 0 : _b.Self) === null || _c === void 0 ? void 0 : _c.PathType));
     info.push(formatCommonItem('CreateStep', (_e = (_d = data.PathDescription) === null || _d === void 0 ? void 0 : _d.Self) === null || _e === void 0 ? void 0 : _e.CreateStep));
-    let key;
-    for (key in TableIndex) {
-        if (DISPLAYED_FIELDS.has(key)) {
-            info.push(formatCdcStreamItem(key, TableIndex === null || TableIndex === void 0 ? void 0 : TableIndex[key]));
-        }
-    }
-    return _jsx(_Fragment, { children: info.length ? _jsx(InfoViewer, { info: info }) : _jsx(_Fragment, { children: "Empty" }) });
+    const { Mode, Format } = TableIndex || {};
+    info.push(...formatObject(formatCdcStreamItem, { Mode, Format }));
+    return (_jsx(React.Fragment, { children: info.length ? _jsx(InfoViewer, { info: info }) : 'Empty' }));
 };

package/dist/components/InfoViewer/schemaOverview/PersQueueGroupOverview.d.ts

@@ -2,5 +2,5 @@ import type { TEvDescribeSchemeResult } from '../../../types/api/schema';
 interface PersQueueGroupOverviewProps {
     data?: TEvDescribeSchemeResult;
 }
-export declare const PersQueueGroupOverview: ({ data }: PersQueueGroupOverviewProps) => JSX.Element;
+export declare const PersQueueGroupOverview: ({ data }: PersQueueGroupOverviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfoViewer/schemaOverview/PersQueueGroupOverview.js

@@ -1,16 +1,20 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { formatCommonItem, formatPQGroupItem } from '../formatters';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { InfoViewer } from '..';
+import { formatCommonItem, formatPQGroupItem } from '../formatters';
 export const PersQueueGroupOverview = ({ data }) => {
     var _a, _b, _c, _d, _e;
     if (!data) {
-        return _jsx("div", Object.assign({ className: "error" }, { children: "No PersQueueGroup data" }));
+        return _jsx("div", { className: "error", children: "No PersQueueGroup data" });
     }
     const pqGroup = (_a = data.PathDescription) === null || _a === void 0 ? void 0 : _a.PersQueueGroup;
     const info = [];
     info.push(formatCommonItem('PathType', (_c = (_b = data.PathDescription) === null || _b === void 0 ? void 0 : _b.Self) === null || _c === void 0 ? void 0 : _c.PathType));
     info.push(formatCommonItem('CreateStep', (_e = (_d = data.PathDescription) === null || _d === void 0 ? void 0 : _d.Self) === null || _e === void 0 ? void 0 : _e.CreateStep));
+    //@ts-expect-error
     info.push(formatPQGroupItem('Partitions', (pqGroup === null || pqGroup === void 0 ? void 0 : pqGroup.Partitions) || []));
-    info.push(formatPQGroupItem('PQTabletConfig', (pqGroup === null || pqGroup === void 0 ? void 0 : pqGroup.PQTabletConfig) || { PartitionConfig: { LifetimeSeconds: 0 } }));
-    return _jsx(_Fragment, { children: info.length ? _jsx(InfoViewer, { info: info }) : _jsx(_Fragment, { children: "Empty" }) });
+    info.push(
+    //@ts-expect-error
+    formatPQGroupItem('PQTabletConfig', (pqGroup === null || pqGroup === void 0 ? void 0 : pqGroup.PQTabletConfig) || { PartitionConfig: { LifetimeSeconds: 0 } }));
+    return (_jsx(React.Fragment, { children: info.length ? _jsx(InfoViewer, { info: info }) : 'Empty' }));
 };

package/dist/components/InfoViewer/utils.d.ts

@@ -1,19 +1,19 @@
-import type { ReactNode } from 'react';
-import { InfoViewerItem } from './InfoViewer';
+import type React from 'react';
+import type { InfoViewerItem } from './InfoViewer';
 type LabelMap<T> = {
     [label in keyof T]?: string;
 };
 type ValueFormatters<T> = {
-    [label in keyof T]?: (value: T[label]) => ReactNode;
+    [label in keyof T]?: (value: T[label]) => React.ReactNode;
 };
 interface CreateInfoFormatterOptions<Shape> {
     values?: ValueFormatters<Shape>;
     labels?: LabelMap<Shape>;
-    defaultValueFormatter?: (value: Shape[keyof Shape]) => ReactNode;
+    defaultValueFormatter?: (value: Shape[keyof Shape]) => React.ReactNode;
 }
 export declare function createInfoFormatter<Shape extends Record<string, any>>({ values: valueFormatters, labels: labelMap, defaultValueFormatter, }: CreateInfoFormatterOptions<Shape>): <Key extends keyof Shape>(label: Key, value: Shape[Key]) => {
     label: keyof Shape | NonNullable<LabelMap<Shape>[keyof Shape]>;
-    value: {} | Shape[Key] | null | undefined;
+    value: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Shape[Key] | null | undefined;
 };
-export declare const formatObject: <Shape extends Record<string, any>>(formatter: <Key extends keyof Shape>(value: Key, label: Shape[Key]) => InfoViewerItem, obj?: Partial<Shape> | undefined) => InfoViewerItem[];
+export declare const formatObject: <Shape extends Record<string, any>>(formatter: <Key extends keyof Shape>(value: Key, label: Shape[Key]) => InfoViewerItem, obj?: Partial<Shape>) => InfoViewerItem[];
 export {};

package/dist/components/InfoViewerSkeleton/InfoViewerSkeleton.d.ts

@@ -3,5 +3,5 @@ interface InfoViewerSkeletonProps {
     className?: string;
     rows?: number;
 }
-export declare const InfoViewerSkeleton: ({ rows, className }: InfoViewerSkeletonProps) => JSX.Element;
+export declare const InfoViewerSkeleton: ({ rows, className }: InfoViewerSkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfoViewerSkeleton/InfoViewerSkeleton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
 import { Skeleton } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import './InfoViewerSkeleton.scss';
-const b = block('ydb-info-viewer-skeleton');
-const SkeletonLabel = () => (_jsxs("div", Object.assign({ className: b('label') }, { children: [_jsx(Skeleton, { className: b('label__text') }), _jsx("div", { className: b('label__dots') })] })));
-export const InfoViewerSkeleton = ({ rows = 8, className }) => (_jsx("div", Object.assign({ className: b(null, className) }, { children: [...new Array(rows)].map((_, index) => (_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx(SkeletonLabel, {}), _jsx(Skeleton, { className: b('value') })] }), `skeleton-row-${index}`))) })));
+const b = cn('ydb-info-viewer-skeleton');
+const SkeletonLabel = () => (_jsxs("div", { className: b('label'), children: [_jsx(Skeleton, { className: b('label__text') }), _jsx("div", { className: b('label__dots') })] }));
+export const InfoViewerSkeleton = ({ rows = 8, className }) => (_jsx("div", { className: b(null, className), children: [...new Array(rows)].map((_, index) => (_jsxs("div", { className: b('row'), children: [_jsx(SkeletonLabel, {}), _jsx(Skeleton, { className: b('value') })] }, `skeleton-row-${index}`))) }));

package/dist/components/InfoViewerSkeleton/InfoViewerSkeleton.scss

@@ -9,7 +9,7 @@
 
         min-height: var(--g-text-body-2-font-size);
 
-        .yc-skeleton {
+        .g-skeleton {
             min-height: var(--g-text-body-2-font-size);
         }
     }

package/dist/components/InternalLink/InternalLink.d.ts

@@ -1,6 +1,6 @@
-import { LinkProps } from 'react-router-dom';
+import type { LinkProps } from 'react-router-dom';
 interface InternalLinkProps extends Omit<LinkProps, 'to'> {
     to?: LinkProps['to'];
 }
-export declare const InternalLink: ({ className, to, onClick, ...props }: InternalLinkProps) => JSX.Element;
+export declare const InternalLink: ({ className, to, onClick, ...props }: InternalLinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InternalLink/InternalLink.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from 'react-router-dom';
-import cn from 'bem-cn-lite';
-const bLink = cn('yc-link');
+import { cn } from '../../utils/cn';
+const bLink = cn('g-link');
 export const InternalLink = (_a) => {
     var { className, to, onClick } = _a, props = __rest(_a, ["className", "to", "onClick"]);
-    return to ? (_jsx(Link, Object.assign({ to: to, onClick: onClick, className: bLink({ view: 'normal' }, className) }, props))) : (_jsx("span", Object.assign({ className: className, onClick: onClick }, { children: props.children })));
+    return to ? (_jsx(Link, Object.assign({ to: to, onClick: onClick, className: bLink({ view: 'normal' }, className) }, props))) : (_jsx("span", { className: className, onClick: onClick, children: props.children }));
 };

package/dist/components/LabelWithPopover/LabelWithPopover.d.ts

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 interface LabelWithPopoverProps {
-    text: ReactNode;
-    popoverContent: ReactNode;
+    text: React.ReactNode;
+    popoverContent: React.ReactNode;
     className?: string;
     contentClassName?: string;
 }
-export declare const LabelWithPopover: ({ text, popoverContent, className, contentClassName, }: LabelWithPopoverProps) => JSX.Element;
+export declare const LabelWithPopover: ({ text, popoverContent, className, contentClassName, }: LabelWithPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LabelWithPopover/LabelWithPopover.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpPopover } from '@gravity-ui/components';
-export const LabelWithPopover = ({ text, popoverContent, className, contentClassName, }) => (_jsxs("div", Object.assign({ className: className }, { children: [text, '\u00a0', _jsx(HelpPopover, { content: popoverContent, contentClassName: contentClassName })] })));
+export const LabelWithPopover = ({ text, popoverContent, className, contentClassName, }) => (_jsxs("div", { className: className, children: [text, '\u00a0', _jsx(HelpPopover, { content: popoverContent, contentClassName: contentClassName })] }));

package/dist/components/LagImages/LagImages.d.ts

@@ -1,2 +1,2 @@
-export declare const WriteLagImage: () => JSX.Element;
-export declare const ReadLagImage: () => JSX.Element;
+export declare const WriteLagImage: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReadLagImage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/LagImages/LagImages.js

@@ -7,8 +7,8 @@ const READ_FILL = '#ADE8F5';
 const WRITE_FILL = '#f5be9d';
 const DashArc = ({ width, height, transform }) => (_jsx("path", { d: `M-${width / 2} 0 c0 -${height}, ${width} -${height}, ${width} 0`, fill: "none", strokeDasharray: "4,6", stroke: "#28f", strokeWidth: "1.6", transform: transform }));
 const ArrowLine = ({ width }) => (_jsx("path", { fill: "none", strokeWidth: "2", d: `M0 0 h${width} l-10 -5 m0 10 l10 -5` }));
-const WriteLag = () => (_jsxs("g", Object.assign({ fill: "var(--g-color-text-primary)", fontSize: "12" }, { children: [_jsx("g", Object.assign({ transform: `translate(0, ${HEIGHT / 2})`, stroke: WRITE_FILL }, { children: _jsx(ArrowLine, { width: STICK_SPACE * 2.9 }) })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE / 2}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 1.7}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE * 1.4, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write idle time" })) }))] }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${0}, ${HEIGHT / 2})` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: WRITE_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "create time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE}, ${HEIGHT / 2})` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: WRITE_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write time" })) }))] })), _jsx("g", Object.assign({ transform: `translate(${2.4 * STICK_SPACE}, ${HEIGHT / 2})` }, { children: _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "now" })) })) }))] }))] })));
-const ReadLag = () => (_jsxs("g", Object.assign({ fill: "var(--g-color-text-primary)", fontSize: "12" }, { children: [_jsx("g", Object.assign({ transform: `translate(0, ${HEIGHT / 2})`, stroke: READ_FILL }, { children: _jsx(ArrowLine, { width: WIDTH }) })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, 0)` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 1.5}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE / 2}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write lag" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE * 2.6}, ${HEIGHT / 2})` }, { children: [_jsx(DashArc, { width: STICK_SPACE * 1.3, height: 15 }), _jsx("text", Object.assign({ x: "0", y: "-15", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read idle time" })) }))] }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_START}, ${HEIGHT / 2})` }, { children: [_jsxs("g", Object.assign({ transform: `translate(${0}, 0)` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "create time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${STICK_SPACE}, 0)` }, { children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "write time" })) }))] })), _jsxs("g", Object.assign({ transform: `translate(${2 * STICK_SPACE}, 0)` }, { children: [_jsx("use", { x: "-2", y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "read time" })) }))] })), _jsx("g", Object.assign({ transform: `translate(${3.2 * STICK_SPACE}, 0)` }, { children: _jsx("text", Object.assign({ x: "0", y: "20", textAnchor: "middle" }, { children: _jsx("tspan", Object.assign({ x: "0", dy: "0" }, { children: "now" })) })) }))] }))] })));
-const DashPattern = ({ id, fill }) => (_jsx("pattern", Object.assign({ id: id, x: "0", y: "0", width: "8", height: "8", patternUnits: "userSpaceOnUse" }, { children: _jsx("path", { d: "M0 5L5 0H8L0 8V5M5 8L8 5V8Z", fill: fill }) })));
-export const WriteLagImage = () => (_jsxs("svg", Object.assign({ className: "paint", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: WIDTH, height: HEIGHT }, { children: [_jsxs("defs", { children: [_jsx("g", Object.assign({ id: "check" }, { children: _jsx("path", { d: "M0 3 v14", strokeWidth: "2" }) })), _jsx(DashPattern, { id: "latest-read", fill: READ_FILL }), _jsx(DashPattern, { id: "latest-write", fill: WRITE_FILL })] }), _jsx(WriteLag, {})] })));
-export const ReadLagImage = () => (_jsxs("svg", Object.assign({ className: "paint", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: WIDTH, height: HEIGHT }, { children: [_jsxs("defs", { children: [_jsx("g", Object.assign({ id: "check" }, { children: _jsx("path", { d: "M0 3 v14", strokeWidth: "2" }) })), _jsx(DashPattern, { id: "latest-read", fill: READ_FILL }), _jsx(DashPattern, { id: "latest-write", fill: WRITE_FILL })] }), _jsx(ReadLag, {})] })));
+const WriteLag = () => (_jsxs("g", { fill: "var(--g-color-text-primary)", fontSize: "12", children: [_jsx("g", { transform: `translate(0, ${HEIGHT / 2})`, stroke: WRITE_FILL, children: _jsx(ArrowLine, { width: STICK_SPACE * 2.9 }) }), _jsxs("g", { transform: `translate(${STICK_START}, 0)`, children: [_jsxs("g", { transform: `translate(${STICK_SPACE / 2}, ${HEIGHT / 2})`, children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", { x: "0", y: "-15", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "write lag" }) })] }), _jsxs("g", { transform: `translate(${STICK_SPACE * 1.7}, ${HEIGHT / 2})`, children: [_jsx(DashArc, { width: STICK_SPACE * 1.4, height: 15 }), _jsx("text", { x: "0", y: "-15", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "write idle time" }) })] })] }), _jsxs("g", { transform: `translate(${STICK_START}, 0)`, children: [_jsxs("g", { transform: `translate(${0}, ${HEIGHT / 2})`, children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: WRITE_FILL }), _jsx("text", { x: "0", y: "20", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "create time" }) })] }), _jsxs("g", { transform: `translate(${STICK_SPACE}, ${HEIGHT / 2})`, children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: WRITE_FILL }), _jsx("text", { x: "0", y: "20", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "write time" }) })] }), _jsx("g", { transform: `translate(${2.4 * STICK_SPACE}, ${HEIGHT / 2})`, children: _jsx("text", { x: "0", y: "20", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "now" }) }) })] })] }));
+const ReadLag = () => (_jsxs("g", { fill: "var(--g-color-text-primary)", fontSize: "12", children: [_jsx("g", { transform: `translate(0, ${HEIGHT / 2})`, stroke: READ_FILL, children: _jsx(ArrowLine, { width: WIDTH }) }), _jsxs("g", { transform: `translate(${STICK_START}, 0)`, children: [_jsxs("g", { transform: `translate(${STICK_SPACE * 1.5}, ${HEIGHT / 2})`, children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", { x: "0", y: "-15", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "read lag" }) })] }), _jsxs("g", { transform: `translate(${STICK_SPACE / 2}, ${HEIGHT / 2})`, children: [_jsx(DashArc, { width: STICK_SPACE, height: 15 }), _jsx("text", { x: "0", y: "-15", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "write lag" }) })] }), _jsxs("g", { transform: `translate(${STICK_SPACE * 2.6}, ${HEIGHT / 2})`, children: [_jsx(DashArc, { width: STICK_SPACE * 1.3, height: 15 }), _jsx("text", { x: "0", y: "-15", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "read idle time" }) })] })] }), _jsxs("g", { transform: `translate(${STICK_START}, ${HEIGHT / 2})`, children: [_jsxs("g", { transform: `translate(${0}, 0)`, children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", { x: "0", y: "20", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "create time" }) })] }), _jsxs("g", { transform: `translate(${STICK_SPACE}, 0)`, children: [_jsx("use", { y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", { x: "0", y: "20", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "write time" }) })] }), _jsxs("g", { transform: `translate(${2 * STICK_SPACE}, 0)`, children: [_jsx("use", { x: "-2", y: "-10", xlinkHref: "#check", stroke: READ_FILL }), _jsx("text", { x: "0", y: "20", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "read time" }) })] }), _jsx("g", { transform: `translate(${3.2 * STICK_SPACE}, 0)`, children: _jsx("text", { x: "0", y: "20", textAnchor: "middle", children: _jsx("tspan", { x: "0", dy: "0", children: "now" }) }) })] })] }));
+const DashPattern = ({ id, fill }) => (_jsx("pattern", { id: id, x: "0", y: "0", width: "8", height: "8", patternUnits: "userSpaceOnUse", children: _jsx("path", { d: "M0 5L5 0H8L0 8V5M5 8L8 5V8Z", fill: fill }) }));
+export const WriteLagImage = () => (_jsxs("svg", { className: "paint", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: WIDTH, height: HEIGHT, children: [_jsxs("defs", { children: [_jsx("g", { id: "check", children: _jsx("path", { d: "M0 3 v14", strokeWidth: "2" }) }), _jsx(DashPattern, { id: "latest-read", fill: READ_FILL }), _jsx(DashPattern, { id: "latest-write", fill: WRITE_FILL })] }), _jsx(WriteLag, {})] }));
+export const ReadLagImage = () => (_jsxs("svg", { className: "paint", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: WIDTH, height: HEIGHT, children: [_jsxs("defs", { children: [_jsx("g", { id: "check", children: _jsx("path", { d: "M0 3 v14", strokeWidth: "2" }) }), _jsx(DashPattern, { id: "latest-read", fill: READ_FILL }), _jsx(DashPattern, { id: "latest-write", fill: WRITE_FILL })] }), _jsx(ReadLag, {})] }));

package/dist/components/LagPopoverContent/LagPopoverContent.d.ts

@@ -3,5 +3,5 @@ interface LagPopoverContentProps {
     text: string;
     type: 'read' | 'write';
 }
-export declare const LagPopoverContent: ({ text, type }: LagPopoverContentProps) => JSX.Element;
+export declare const LagPopoverContent: ({ text, type }: LagPopoverContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LagPopoverContent/LagPopoverContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import { ReadLagImage, WriteLagImage } from '../LagImages';
 import './LagPopoverContent.scss';
-const b = block('ydb-lag-popover-content');
-export const LagPopoverContent = ({ text, type }) => (_jsxs("div", Object.assign({ className: b({ type }) }, { children: [_jsx("div", Object.assign({ className: b('text') }, { children: text })), _jsx("div", { children: type === 'read' ? _jsx(ReadLagImage, {}) : _jsx(WriteLagImage, {}) })] })));
+const b = cn('ydb-lag-popover-content');
+export const LagPopoverContent = ({ text, type }) => (_jsxs("div", { className: b({ type }), children: [_jsx("div", { className: b('text'), children: text }), _jsx("div", { children: type === 'read' ? _jsx(ReadLagImage, {}) : _jsx(WriteLagImage, {}) })] }));

package/dist/components/LinkToSchemaObject/LinkToSchemaObject.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
+import type { LinkProps } from '@gravity-ui/uikit';
 import type { Location } from 'history';
-import { type LinkProps } from '@gravity-ui/uikit';
-interface LinkToSchemaObjectProps extends LinkProps {
+interface LinkToSchemaObjectProps extends Omit<LinkProps, 'href'> {
     path: string;
     location: Location;
 }
-export declare function LinkToSchemaObject({ path, location, ...props }: LinkToSchemaObjectProps): JSX.Element;
+export declare function LinkToSchemaObject({ path, location, ...props }: LinkToSchemaObjectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LinkToSchemaObject/LinkToSchemaObject.js

@@ -6,5 +6,5 @@ export function LinkToSchemaObject(_a) {
     var { path, location } = _a, props = __rest(_a, ["path", "location"]);
     const queryParams = parseQuery(location);
     const pathToSchemaObject = createExternalUILink(Object.assign(Object.assign({}, queryParams), { schema: path }));
-    return _jsx(Link, Object.assign({ view: "normal", href: pathToSchemaObject }, props));
+    return _jsx(Link, Object.assign({ view: "normal" }, props, { href: pathToSchemaObject }));
 }

package/dist/components/LinkWithIcon/LinkWithIcon.d.ts

@@ -4,5 +4,5 @@ interface ExternalLinkWithIconProps {
     url: string;
     external?: boolean;
 }
-export declare const LinkWithIcon: ({ title, url, external }: ExternalLinkWithIconProps) => JSX.Element;
+export declare const LinkWithIcon: ({ title, url, external }: ExternalLinkWithIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/LinkWithIcon/LinkWithIcon.js

@@ -1,14 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
-import { Link } from '@gravity-ui/uikit';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
+import { Link } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import { InternalLink } from '../InternalLink';
 import './LinkWithIcon.scss';
-const b = block('ydb-link-with-icon');
+const b = cn('ydb-link-with-icon');
 export const LinkWithIcon = ({ title, url, external = true }) => {
-    const linkContent = (_jsxs(_Fragment, { children: [title, '\u00a0', _jsx(ArrowUpRightFromSquare, {})] }));
+    const linkContent = (_jsxs(React.Fragment, { children: [title, '\u00a0', _jsx(ArrowUpRightFromSquare, {})] }));
     if (external) {
-        return (_jsx(Link, Object.assign({ href: url, target: "_blank", className: b() }, { children: linkContent })));
+        return (_jsx(Link, { href: url, target: "_blank", className: b(), children: linkContent }));
     }
-    return (_jsx(InternalLink, Object.assign({ to: url, className: b() }, { children: linkContent })));
+    return (_jsx(InternalLink, { to: url, className: b(), children: linkContent }));
 };

package/dist/components/Loader/Loader.d.ts

@@ -1,8 +1,8 @@
-import { LoaderSize } from '@gravity-ui/uikit';
+import type { LoaderSize } from '@gravity-ui/uikit';
 import './Loader.scss';
 interface LoaderProps {
     size?: LoaderSize;
     className?: string;
 }
-export declare const Loader: ({ size, className }: LoaderProps) => JSX.Element;
+export declare const Loader: ({ size, className }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Loader/Loader.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Loader as KitLoader } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import './Loader.scss';
 const b = cn('ydb-loader');
 export const Loader = ({ size = 'm', className }) => {
-    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: _jsx(KitLoader, { size: size }) })));
+    return (_jsx("div", { className: b(null, className), children: _jsx(KitLoader, { size: size }) }));
 };

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

@@ -6,7 +6,7 @@ interface DiagnosticsChartProps {
     title?: string;
     metrics: MetricDescription[];
     timeFrame?: TimeFrame;
-    autorefresh?: boolean;
+    autorefresh?: number;
     height?: number;
     width?: number;
     chartOptions?: ChartOptions;
@@ -18,5 +18,5 @@ interface DiagnosticsChartProps {
      */
     isChartVisible?: boolean;
 }
-export declare const MetricChart: ({ database, title, metrics, timeFrame, autorefresh, width, height, chartOptions, onChartDataStatusChange, isChartVisible, }: DiagnosticsChartProps) => JSX.Element;
+export declare const MetricChart: ({ database, title, metrics, timeFrame, autorefresh, width, height, chartOptions, onChartDataStatusChange, isChartVisible, }: DiagnosticsChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MetricChart/MetricChart.js

@@ -1,22 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useReducer, useRef } from 'react';
-import { YagrPlugin } from '@gravity-ui/chartkit/yagr';
+import React from 'react';
 import ChartKit, { settings } from '@gravity-ui/chartkit';
-import { useAutofetcher } from '../../utils/hooks';
+import { YagrPlugin } from '@gravity-ui/chartkit/yagr';
 import { cn } from '../../utils/cn';
-import { Loader } from '../Loader';
 import { ResponseError } from '../Errors/ResponseError';
-import { convertResponse } from './convertReponse';
-import { getDefaultDataFormatter } from './getDefaultDataFormatter';
-import { getChartData } from './getChartData';
-import { chartReducer, initialChartState, setChartData, setChartDataLoading, setChartDataWasNotLoaded, setChartError, } from './reducer';
+import { Loader } from '../Loader';
 import { colorToRGBA, colors } from './colors';
-import i18n from './i18n';
+import { getDefaultDataFormatter } from './getDefaultDataFormatter';
+import { chartApi } from './reducer';
 import './MetricChart.scss';
 const b = cn('ydb-metric-chart');
 settings.set({ plugins: [YagrPlugin] });
 const prepareWidgetData = (data, options = {}) => {
-    const { dataType } = options;
+    const { dataType, scaleRange } = options;
     const defaultDataFormatter = getDefaultDataFormatter(dataType);
     const isDataEmpty = !data.metrics.length;
     const graphs = data.metrics.map((metric, index) => {
@@ -46,6 +42,7 @@ const prepareWidgetData = (data, options = {}) => {
                 },
                 series: {
                     type: 'area',
+                    spanGaps: true,
                     lineWidth: 1.5,
                 },
                 select: {
@@ -56,6 +53,8 @@ const prepareWidgetData = (data, options = {}) => {
                 y: {
                     type: 'linear',
                     range: 'nice',
+                    min: (scaleRange === null || scaleRange === void 0 ? void 0 : scaleRange.min) || 0,
+                    max: scaleRange === null || scaleRange === void 0 ? void 0 : scaleRange.max,
                 },
             },
             axes: {
@@ -72,81 +71,34 @@ const prepareWidgetData = (data, options = {}) => {
         },
     };
 };
+const emptyChartData = { timeline: [], metrics: [] };
 export const MetricChart = ({ database, title, metrics, timeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, }) => {
-    const mounted = useRef(false);
-    useEffect(() => {
-        mounted.current = true;
-        return () => {
-            mounted.current = false;
-        };
-    }, []);
-    const [{ loading, wasLoaded, data, error }, dispatch] = useReducer(chartReducer, initialChartState);
-    useEffect(() => {
-        if (error) {
-            return onChartDataStatusChange === null || onChartDataStatusChange === void 0 ? void 0 : onChartDataStatusChange('error');
-        }
-        if (loading && !wasLoaded) {
-            return onChartDataStatusChange === null || onChartDataStatusChange === void 0 ? void 0 : onChartDataStatusChange('loading');
-        }
-        if (!loading && wasLoaded) {
-            return onChartDataStatusChange === null || onChartDataStatusChange === void 0 ? void 0 : onChartDataStatusChange('success');
-        }
-        return undefined;
-    }, [loading, wasLoaded, error, onChartDataStatusChange]);
-    const fetchChartData = useCallback(async (isBackground) => {
-        dispatch(setChartDataLoading());
-        if (!isBackground) {
-            dispatch(setChartDataWasNotLoaded());
-        }
-        try {
-            // maxDataPoints param is calculated based on width
-            // should be width > maxDataPoints to prevent points that cannot be selected
-            // more px per dataPoint - easier to select, less - chart is smoother
-            const response = await getChartData({
-                database,
-                metrics,
-                timeFrame,
-                maxDataPoints: width / 2,
-            });
-            // Hack to prevent setting value to state, if component unmounted
-            if (!mounted.current) {
-                return;
-            }
-            // Response could be a plain html for ydb versions without charts support
-            // Or there could be an error in response with 200 status code
-            // It happens when request is OK, but chart data cannot be returned due to some reason
-            // Example: charts are not enabled in the DB ('GraphShard is not enabled' error)
-            if (Array.isArray(response)) {
-                const preparedData = convertResponse(response, metrics);
-                dispatch(setChartData(preparedData));
-            }
-            else {
-                const err = {
-                    statusText: typeof response === 'string' ? i18n('not-supported') : response.error,
-                };
-                throw err;
-            }
-        }
-        catch (err) {
-            if (!mounted.current) {
-                return;
-            }
-            dispatch(setChartError(err));
-        }
-    }, [database, metrics, timeFrame, width]);
-    useAutofetcher(fetchChartData, [fetchChartData], autorefresh);
-    const convertedData = prepareWidgetData(data, chartOptions);
+    const { currentData, error, isFetching, status } = chartApi.useGetChartDataQuery(
+    // maxDataPoints param is calculated based on width
+    // should be width > maxDataPoints to prevent points that cannot be selected
+    // more px per dataPoint - easier to select, less - chart is smoother
+    {
+        database,
+        metrics,
+        timeFrame,
+        maxDataPoints: width / 2,
+    }, { pollingInterval: autorefresh });
+    const loading = isFetching && !currentData;
+    React.useEffect(() => {
+        return onChartDataStatusChange === null || onChartDataStatusChange === void 0 ? void 0 : onChartDataStatusChange(status === 'fulfilled' ? 'success' : 'loading');
+    }, [status, onChartDataStatusChange]);
+    const convertedData = prepareWidgetData(currentData || emptyChartData, chartOptions);
     const renderContent = () => {
-        if (loading && !wasLoaded) {
+        if (loading) {
             return _jsx(Loader, {});
         }
         if (!isChartVisible) {
             return null;
         }
-        return (_jsxs("div", Object.assign({ className: b('chart') }, { children: [_jsx(ChartKit, { type: "yagr", data: convertedData }), error && _jsx(ResponseError, { className: b('error'), error: error })] })));
+        return (_jsxs("div", { className: b('chart'), children: [_jsx(ChartKit, { type: "yagr", data: convertedData }), error ? _jsx(ResponseError, { className: b('error'), error: error }) : null] }));
     };
-    return (_jsxs("div", Object.assign({ className: b(null), style: {
+    return (_jsxs("div", { className: b(null), style: {
             height,
             width,
-        } }, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: title })), renderContent()] })));
+        }, children: [_jsx("div", { className: b('title'), children: title }), renderContent()] }));
 };

package/dist/components/MetricChart/colors.js

@@ -1,15 +1,15 @@
 import { colord } from 'colord';
 // Grafana classic palette
 export const colors = [
-    '#7EB26D',
-    '#EAB839',
-    '#6ED0E0',
-    '#EF843C',
-    '#E24D42',
-    '#1F78C1',
-    '#BA43A9',
-    '#705DA0',
-    '#508642',
+    '#7EB26D', // 0: pale green
+    '#EAB839', // 1: mustard
+    '#6ED0E0', // 2: light blue
+    '#EF843C', // 3: orange
+    '#E24D42', // 4: red
+    '#1F78C1', // 5: ocean
+    '#BA43A9', // 6: purple
+    '#705DA0', // 7: violet
+    '#508642', // 8: dark green
     '#CCA300', // 9: dark sand
 ];
 export function colorToRGBA(initialColor, opacity) {

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

@@ -1,10 +1,11 @@
-import { type TimeFrame } from '../../utils/timeframes';
+import type { TimeFrame } from '../../utils/timeframes';
 import type { MetricDescription } from './types';
-interface GetChartDataParams {
+export interface GetChartDataParams {
     database: string;
     metrics: MetricDescription[];
     timeFrame: TimeFrame;
     maxDataPoints: number;
 }
-export declare const getChartData: ({ database, metrics, timeFrame, maxDataPoints, }: GetChartDataParams) => Promise<import("../../types/api/render").JsonRenderResponse>;
-export {};
+export declare const getChartData: ({ database, metrics, timeFrame, maxDataPoints }: GetChartDataParams, { signal }?: {
+    signal?: AbortSignal | undefined;
+}) => Promise<import("../../types/api/render").JsonRenderResponse>;

package/dist/components/MetricChart/getChartData.js

@@ -1,7 +1,7 @@
 import { TIMEFRAMES } from '../../utils/timeframes';
-export const getChartData = async ({ database, metrics, timeFrame, maxDataPoints, }) => {
+export const getChartData = async ({ database, metrics, timeFrame, maxDataPoints }, { signal } = {}) => {
     const targetString = metrics.map((metric) => `target=${metric.target}`).join('&');
     const until = Math.round(Date.now() / 1000);
     const from = until - TIMEFRAMES[timeFrame];
-    return window.api.getChartData({ target: targetString, from, until, maxDataPoints, database }, { concurrentId: `getChartData|${targetString}` });
+    return window.api.getChartData({ target: targetString, from, until, maxDataPoints, database }, { signal });
 };

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

@@ -1,26 +1,4 @@
-import type { IResponseError } from '../../types/api/error';
-import type { PreparedMetricsData } from './types';
-export declare const setChartDataLoading: () => {
-    readonly type: "chart/FETCH_CHART_DATA_REQUEST";
-};
-export declare const setChartData: (data: PreparedMetricsData) => {
-    readonly data: PreparedMetricsData;
-    readonly type: "chart/FETCH_CHART_DATA_SUCCESS";
-};
-export declare const setChartError: (error: IResponseError) => {
-    readonly error: IResponseError<unknown>;
-    readonly type: "chart/FETCH_CHART_DATA_FAILURE";
-};
-export declare const setChartDataWasNotLoaded: () => {
-    readonly type: "chart/SET_DATA_WAS_NOT_LOADED";
-};
-type ChartAction = ReturnType<typeof setChartDataLoading> | ReturnType<typeof setChartData> | ReturnType<typeof setChartError> | ReturnType<typeof setChartDataWasNotLoaded>;
-interface ChartState {
-    loading: boolean;
-    wasLoaded: boolean;
-    data: PreparedMetricsData;
-    error: IResponseError | undefined;
-}
-export declare const initialChartState: ChartState;
-export declare const chartReducer: (state: ChartState, action: ChartAction) => ChartState;
-export {};
+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/dist/query/react").reactHooksModuleName>;