ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/components/MetricChart/reducer.js

@@ -1,58 +1,32 @@
-import { createRequestActionTypes } from '../../store/utils';
-const FETCH_CHART_DATA = createRequestActionTypes('chart', 'FETCH_CHART_DATA');
-const SET_CHART_DATA_WAS_NOT_LOADED = 'chart/SET_DATA_WAS_NOT_LOADED';
-export const setChartDataLoading = () => {
-    return {
-        type: FETCH_CHART_DATA.REQUEST,
-    };
-};
-export const setChartData = (data) => {
-    return {
-        data,
-        type: FETCH_CHART_DATA.SUCCESS,
-    };
-};
-export const setChartError = (error) => {
-    return {
-        error,
-        type: FETCH_CHART_DATA.FAILURE,
-    };
-};
-export const setChartDataWasNotLoaded = () => {
-    return {
-        type: SET_CHART_DATA_WAS_NOT_LOADED,
-    };
-};
-export const initialChartState = {
-    // Set chart initial state as loading, in order not to mount and unmount component in between requests
-    // as it leads to memory leak errors in console (not proper useEffect cleanups in chart component itself)
-    // TODO: possible fix (check needed): chart component is always present, but display: none for chart while loading
-    loading: true,
-    wasLoaded: false,
-    data: { timeline: [], metrics: [] },
-    error: undefined,
-};
-export const chartReducer = (state, action) => {
-    var _a;
-    switch (action.type) {
-        case FETCH_CHART_DATA.REQUEST: {
-            return Object.assign(Object.assign({}, state), { loading: true });
-        }
-        case FETCH_CHART_DATA.SUCCESS: {
-            return Object.assign(Object.assign({}, state), { loading: false, wasLoaded: true, error: undefined, data: action.data });
-        }
-        case FETCH_CHART_DATA.FAILURE: {
-            if ((_a = action.error) === null || _a === void 0 ? void 0 : _a.isCancelled) {
-                return state;
-            }
-            return Object.assign(Object.assign({}, state), { error: action.error, 
-                // Clear data, so error will be displayed with empty chart
-                data: { timeline: [], metrics: [] }, loading: false, wasLoaded: true });
-        }
-        case SET_CHART_DATA_WAS_NOT_LOADED: {
-            return Object.assign(Object.assign({}, state), { wasLoaded: false });
-        }
-        default:
-            return state;
-    }
-};
+import { api } from '../../store/reducers/api';
+import { convertResponse } from './convertResponse';
+import { getChartData } from './getChartData';
+import i18n from './i18n';
+export const chartApi = api.injectEndpoints({
+    endpoints: (builder) => ({
+        getChartData: builder.query({
+            queryFn: async (params, { signal }) => {
+                try {
+                    const response = await getChartData(params, { signal });
+                    // 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, params.metrics);
+                        return { data: preparedData };
+                    }
+                    return {
+                        error: new Error(typeof response === 'string' ? i18n('not-supported') : response.error),
+                    };
+                }
+                catch (error) {
+                    return { error };
+                }
+            },
+            providesTags: ['All'],
+            keepUnusedDataFor: 0,
+        }),
+    }),
+    overrideExisting: 'throw',
+});

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

@@ -19,6 +19,10 @@ export type ChartValue = number | string | null;
 export type ChartDataType = 'ms' | 'size' | 'percent';
 export interface ChartOptions {
     dataType?: ChartDataType;
+    scaleRange?: {
+        min?: number;
+        max?: number;
+    };
 }
 export type ChartDataStatus = 'loading' | 'success' | 'error';
 export type OnChartDataStatusChange = (newStatus: ChartDataStatus) => void;

package/dist/components/MonacoEditor/MonacoEditor.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MonacoEditor: import("react").ForwardRefExoticComponent<import("react-monaco-editor").MonacoEditorProps & import("react").RefAttributes<typeof import("react-monaco-editor").default>>;

package/dist/components/MonacoEditor/MonacoEditor.js

@@ -0,0 +1,7 @@
+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/MonitoringButton/MonitoringButton.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import './MonitoringButton.scss';
 interface MonitoringButtonProps {
     className?: string;
     visible?: boolean;
     href: string;
 }
-export declare function MonitoringButton({ href, visible, className }: MonitoringButtonProps): JSX.Element;
+export declare function MonitoringButton({ href, visible, className }: MonitoringButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MonitoringButton/MonitoringButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Button } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import { Icon } from '../Icon';
 import './MonitoringButton.scss';
 const b = cn('kv-monitoring-button');
 export function MonitoringButton({ href, visible = false, className }) {
-    return (_jsx(Button, Object.assign({ href: href, target: "_blank", className: b({ visible }, className), size: "s", title: "Monitoring dashboard" }, { children: _jsx(Icon, { name: "monitoring", viewBox: "0 0 16 16", width: 16, height: 16 }) })));
+    return (_jsx(Button, { href: href, target: "_blank", className: b({ visible }, className), size: "s", title: "Monitoring dashboard", children: _jsx(Icon, { name: "monitoring", viewBox: "0 0 16 16", width: 16, height: 16 }) }));
 }

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

@@ -5,5 +5,5 @@ interface NodeHostWrapperProps {
     node: NodesPreparedEntity;
     getNodeRef?: (node?: NodeAddress) => string | null;
 }
-export declare const NodeHostWrapper: ({ node, getNodeRef }: NodeHostWrapperProps) => JSX.Element;
+export declare const NodeHostWrapper: ({ node, getNodeRef }: NodeHostWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NodeHostWrapper/NodeHostWrapper.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
 import { Button, PopoverBehavior } from '@gravity-ui/uikit';
 import { getDefaultNodePath } from '../../containers/Node/NodePages';
+import { cn } from '../../utils/cn';
 import { isUnavailableNode } from '../../utils/nodes';
+import { CellWithPopover } from '../CellWithPopover/CellWithPopover';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
-import { NodeEndpointsTooltipContent } from '../TooltipsContent';
 import { Icon } from '../Icon';
-import { CellWithPopover } from '../CellWithPopover/CellWithPopover';
+import { NodeEndpointsTooltipContent } from '../TooltipsContent';
 import './NodeHostWrapper.scss';
-const b = block('ydb-node-host-wrapper');
+const b = cn('ydb-node-host-wrapper');
 export const NodeHostWrapper = ({ node, getNodeRef }) => {
     if (!node.Host) {
         return _jsx("span", { children: "\u2014" });
@@ -20,5 +20,5 @@ export const NodeHostWrapper = ({ node, getNodeRef }) => {
             tenantName: node.TenantName,
         })
         : undefined;
-    return (_jsx(CellWithPopover, Object.assign({ disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate }, { children: _jsxs("div", Object.assign({ className: b('host-wrapper') }, { children: [_jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, className: b('host') }), nodeRef && (_jsx(Button, Object.assign({ size: "s", href: nodeRef, className: b('external-button'), target: "_blank" }, { children: _jsx(Icon, { name: "external" }) })))] })) })));
+    return (_jsx(CellWithPopover, { disabled: !isNodeAvailable, content: _jsx(NodeEndpointsTooltipContent, { data: node }), placement: ['top', 'bottom'], behavior: PopoverBehavior.Immediate, children: _jsxs("div", { className: b('host-wrapper'), children: [_jsx(EntityStatus, { name: node.Host, status: node.SystemState, path: nodePath, hasClipboardButton: true, className: b('host') }), nodeRef && (_jsx(Button, { size: "s", href: nodeRef, className: b('external-button'), target: "_blank", children: _jsx(Icon, { name: "external" }) }))] }) }));
 };

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

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

package/dist/components/PDiskInfo/PDiskInfo.js

@@ -1,13 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
-import { cn } from '../../utils/cn';
-import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
+import { getPDiskPagePath } from '../../routes';
 import { valueIsDefined } from '../../utils';
+import { cn } from '../../utils/cn';
 import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
-import { getPDiskPagePath } from '../../routes';
-import { InfoViewer } from '../InfoViewer/InfoViewer';
+import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
+import { createPDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
+import { InfoViewer } from '../InfoViewer/InfoViewer';
 import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
 import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
 import { pDiskInfoKeyset } from './i18n';
@@ -64,7 +64,7 @@ export function PDiskInfo(_a) {
         });
         pdiskInfo.push({
             label: pDiskInfoKeyset('links'),
-            value: (_jsxs("span", Object.assign({ 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 })), _jsx(LinkWithIcon, { title: pDiskInfoKeyset('developer-ui'), url: pDiskInternalViewerPath })] })),
         });
     }
     return _jsx(InfoViewer, Object.assign({ info: pdiskInfo }, infoViewerProps));

package/dist/components/PDiskInfo/PDiskInfo.scss

@@ -2,7 +2,6 @@
     &__links {
         display: flex;
         flex-flow: row wrap;
-
         gap: 12px;
     }
 }

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

@@ -1 +1 @@
-export declare const pDiskInfoKeyset: (key: "path" | "type" | "state" | "size" | "links" | "guid" | "category" | "device" | "realtime" | "serial-number" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const pDiskInfoKeyset: (key: "type" | "path" | "size" | "links" | "state" | "guid" | "category" | "device" | "realtime" | "serial-number" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

@@ -1,12 +1,12 @@
-import { PopupProps } from '@gravity-ui/uikit';
-import type { NodesMap } from '../../../types/store/nodesList';
-import { InfoViewerItem } from '../../../components/InfoViewer';
-import type { PreparedPDisk } from '../../../utils/disks/types';
+import type { PopupProps } from '@gravity-ui/uikit';
+import type { NodesMap } from '../../types/store/nodesList';
+import type { PreparedPDisk } from '../../utils/disks/types';
+import type { InfoViewerItem } from '../InfoViewer';
 import './PDiskPopup.scss';
 export declare const preparePDiskData: (data: PreparedPDisk, nodes?: NodesMap) => InfoViewerItem[];
 interface PDiskPopupProps extends PopupProps {
     data: PreparedPDisk;
     nodes?: NodesMap;
 }
-export declare const PDiskPopup: ({ data, nodes, ...props }: PDiskPopupProps) => JSX.Element;
+export declare const PDiskPopup: ({ data, nodes, ...props }: PDiskPopupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,19 +1,20 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { Popup } from '@gravity-ui/uikit';
-import { InfoViewer } from '../../../components/InfoViewer';
-import { EFlag } from '../../../types/api/enums';
-import { getPDiskId } from '../../../utils/dataFormatters/dataFormatters';
-import { bytesToGB } from '../../../utils/utils';
+import { EFlag } from '../../types/api/enums';
+import { cn } from '../../utils/cn';
+import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
+import { getPDiskId } from '../../utils/dataFormatters/dataFormatters';
+import { bytesToGB } from '../../utils/utils';
+import { InfoViewer } from '../InfoViewer';
 import './PDiskPopup.scss';
 const b = cn('pdisk-storage-popup');
 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 }) || '-' },
+        { label: 'PDisk', value: getPDiskId({ NodeId, PDiskId }) || EMPTY_DATA_PLACEHOLDER },
         { label: 'State', value: State || 'not available' },
         { label: 'Type', value: Type || 'unknown' },
     ];
@@ -40,7 +41,7 @@ export const preparePDiskData = (data, nodes) => {
 };
 export const PDiskPopup = (_a) => {
     var { data, nodes } = _a, props = __rest(_a, ["data", "nodes"]);
-    const info = useMemo(() => preparePDiskData(data, nodes), [data, nodes]);
+    const info = React.useMemo(() => preparePDiskData(data, nodes), [data, nodes]);
     return (_jsx(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

package/dist/components/PageMeta/PageMeta.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import './PageMeta.scss';
 interface PageMetaProps {
     items: (string | undefined)[];
     className?: string;
+    loading?: boolean;
 }
-export declare function PageMeta({ items, className }: PageMetaProps): JSX.Element;
+export declare function PageMeta({ items, loading, className }: PageMetaProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PageMeta/PageMeta.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
 import './PageMeta.scss';
 const b = cn('ydb-page-meta');
-export function PageMeta({ items, className }) {
-    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0') })));
+export function PageMeta({ items, loading, className }) {
+    const renderContent = () => {
+        if (loading) {
+            return _jsx(Skeleton, { className: b('skeleton') });
+        }
+        return items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0');
+    };
+    return _jsx("div", { className: b(null, className), children: renderContent() });
 }

package/dist/components/PageMeta/PageMeta.scss

@@ -4,7 +4,16 @@
     display: flex;
     flex-flow: row nowrap;
 
+    height: var(--g-text-body-2-line-height);
+
+    text-wrap: nowrap;
+
     color: var(--g-color-text-primary);
 
     @include body-2-typography();
+
+    &__skeleton {
+        width: 80%;
+        height: 80%;
+    }
 }

package/dist/components/PoolBar/PoolBar.d.ts

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

package/dist/components/PoolBar/PoolBar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import { ContentWithPopup } from '../ContentWithPopup/ContentWithPopup';
 import { PoolTooltipContent } from '../TooltipsContent';
 import './PoolBar.scss';
-const b = block('ydb-pool-bar');
+const b = cn('ydb-pool-bar');
 const getBarType = (usage) => {
     if (usage >= 75) {
         return 'danger';
@@ -19,5 +19,5 @@ export const PoolBar = ({ data = {} }) => {
     const { Usage: usage = 0 } = data;
     const usagePercents = Math.min(usage * 100, 100);
     const type = getBarType(usagePercents);
-    return (_jsx(ContentWithPopup, Object.assign({ className: b({ type }), content: _jsx(PoolTooltipContent, { data: data, className: b('popup-content') }) }, { children: _jsx("div", { style: { height: `${usagePercents}%` }, className: b('value', { type }) }) })));
+    return (_jsx(ContentWithPopup, { className: b({ type }), content: _jsx(PoolTooltipContent, { data: data, className: b('popup-content') }), children: _jsx("div", { style: { height: `${usagePercents}%` }, className: b('value', { type }) }) }));
 };

package/dist/components/PoolUsage/PoolUsage.d.ts

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

package/dist/components/PoolUsage/PoolUsage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 import './PoolUsage.scss';
-const b = block('ydb-pool-usage');
+const b = cn('ydb-pool-usage');
 const getLineType = (fillWidth) => {
     let fillColor = 'green';
     if (fillWidth > 60 && fillWidth <= 80) {
@@ -17,5 +17,5 @@ export const PoolUsage = ({ data: pool = {} }) => {
     const dataExist = Usage && Threads;
     const value = Math.floor(Usage * 100);
     const fillWidth = value > 100 ? 100 : value;
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('info') }, { children: [_jsx("div", Object.assign({ className: b('pool-name') }, { children: Name })), dataExist && (_jsxs("div", Object.assign({ className: b('value') }, { children: [_jsxs("div", Object.assign({ className: b('percents') }, { children: [value < 1 ? '<1' : value, "%"] })), _jsxs("div", Object.assign({ className: b('threads') }, { children: ["(\u00D7", Threads, ")"] }))] })))] })), _jsx("div", Object.assign({ className: b('visual') }, { children: _jsx("div", { className: b('usage-line', { type: getLineType(fillWidth) }), style: { width: `${fillWidth}%` } }) }))] })));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('info'), children: [_jsx("div", { className: b('pool-name'), children: Name }), dataExist && (_jsxs("div", { className: b('value'), children: [_jsxs("div", { className: b('percents'), children: [value < 1 ? '<1' : value, "%"] }), _jsxs("div", { className: b('threads'), children: ["(\u00D7", Threads, ")"] })] }))] }), _jsx("div", { className: b('visual'), children: _jsx("div", { className: b('usage-line', { type: getLineType(fillWidth) }), style: { width: `${fillWidth}%` } }) })] }));
 };

package/dist/components/PoolsGraph/PoolsGraph.d.ts

@@ -3,5 +3,5 @@ import './PoolsGraph.scss';
 interface PoolsGraphProps {
     pools?: TPoolStats[];
 }
-export declare const PoolsGraph: ({ pools }: PoolsGraphProps) => JSX.Element;
+export declare const PoolsGraph: ({ pools }: PoolsGraphProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PoolsGraph/PoolsGraph.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 { PoolBar } from '../PoolBar/PoolBar';
 import './PoolsGraph.scss';
-const b = block('ydb-pools-graph');
+const b = cn('ydb-pools-graph');
 export const PoolsGraph = ({ pools = [] }) => {
-    return (_jsx("div", Object.assign({ className: b() }, { children: pools.map((item, index) => (_jsx(PoolBar, { data: item }, index))) })));
+    return (_jsx("div", { className: b(), children: pools.map((item, index) => (_jsx(PoolBar, { data: item }, index))) }));
 };

package/dist/components/ProblemFilter/ProblemFilter.d.ts

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

package/dist/components/ProblemFilter/ProblemFilter.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RadioButton } from '@gravity-ui/uikit';
 import { ProblemFilterValues } from '../../store/reducers/settings/settings';
 export const ProblemFilter = ({ value, onChange, className }) => {
-    return (_jsxs(RadioButton, Object.assign({ value: value, onUpdate: onChange, className: className }, { children: [_jsx(RadioButton.Option, Object.assign({ value: ProblemFilterValues.ALL }, { children: ProblemFilterValues.ALL })), _jsx(RadioButton.Option, Object.assign({ value: ProblemFilterValues.PROBLEMS }, { children: ProblemFilterValues.PROBLEMS }))] })));
+    return (_jsxs(RadioButton, { value: value, onUpdate: onChange, className: className, children: [_jsx(RadioButton.Option, { value: ProblemFilterValues.ALL, children: ProblemFilterValues.ALL }), _jsx(RadioButton.Option, { value: ProblemFilterValues.PROBLEMS, children: ProblemFilterValues.PROBLEMS })] }));
 };

package/dist/components/ProgressViewer/ProgressViewer.d.ts

@@ -1,20 +1,10 @@
-/// <reference types="react" />
-import type { ValueOf } from '../../types/common';
 import './ProgressViewer.scss';
-export declare const PROGRESS_VIEWER_SIZE_IDS: {
-    readonly xs: "xs";
-    readonly s: "s";
-    readonly ns: "ns";
-    readonly m: "m";
-    readonly n: "n";
-    readonly l: "l";
-    readonly head: "head";
-};
-type ProgressViewerSize = ValueOf<typeof PROGRESS_VIEWER_SIZE_IDS>;
-interface ProgressViewerProps {
+type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head';
+type FormatProgressViewerValues = (value?: number, capacity?: number) => (string | number | undefined)[];
+export interface ProgressViewerProps {
     value?: number | string;
     capacity?: number | string;
-    formatValues?: (value?: number, capacity?: number) => (string | number | undefined)[];
+    formatValues?: FormatProgressViewerValues;
     percents?: boolean;
     className?: string;
     size?: ProgressViewerSize;
@@ -23,5 +13,5 @@ interface ProgressViewerProps {
     warningThreshold?: number;
     dangerThreshold?: number;
 }
-export declare function ProgressViewer({ value, capacity, formatValues, percents, className, size, colorizeProgress, inverseColorize, warningThreshold, dangerThreshold, }: ProgressViewerProps): JSX.Element;
+export declare function ProgressViewer({ value, capacity, formatValues, percents, className, size, colorizeProgress, inverseColorize, warningThreshold, dangerThreshold, }: ProgressViewerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ProgressViewer/ProgressViewer.js

@@ -1,26 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { useTheme } from '@gravity-ui/uikit';
-import { isNumeric } from '../../utils/utils';
+import { cn } from '../../utils/cn';
 import { formatNumber, roundToPrecision } from '../../utils/dataFormatters/dataFormatters';
+import { isNumeric } from '../../utils/utils';
 import './ProgressViewer.scss';
 const b = cn('progress-viewer');
-export const PROGRESS_VIEWER_SIZE_IDS = {
-    xs: 'xs',
-    s: 's',
-    ns: 'ns',
-    m: 'm',
-    n: 'n',
-    l: 'l',
-    head: 'head',
-};
 const formatValue = (value) => {
     return formatNumber(roundToPrecision(Number(value), 2));
 };
 const defaultFormatValues = (value, total) => {
     return [formatValue(value), formatValue(total)];
 };
-export function ProgressViewer({ value, capacity, formatValues = defaultFormatValues, percents, className, size = PROGRESS_VIEWER_SIZE_IDS.xs, colorizeProgress, inverseColorize, warningThreshold = 60, dangerThreshold = 80, }) {
+export function ProgressViewer({ value, capacity, formatValues = defaultFormatValues, percents, className, size = 'xs', colorizeProgress, inverseColorize, warningThreshold = 60, dangerThreshold = 80, }) {
     const theme = useTheme();
     let fillWidth = Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100) || 0;
     fillWidth = fillWidth > 100 ? 100 : fillWidth;
@@ -52,7 +43,7 @@ export function ProgressViewer({ value, capacity, formatValues = defaultFormatVa
         return valueText;
     };
     if (isNumeric(value)) {
-        return (_jsxs("div", Object.assign({ className: b({ size, theme, status }, className) }, { children: [_jsx("div", { className: b('line'), style: lineStyle }), _jsx("span", Object.assign({ className: b('text') }, { children: renderContent() }))] })));
+        return (_jsxs("div", { className: b({ size, theme, status }, className), children: [_jsx("div", { className: b('line'), style: lineStyle }), _jsx("span", { className: b('text'), children: renderContent() })] }));
     }
-    return _jsx("div", Object.assign({ className: `${b({ size })} ${className} error` }, { children: "no data" }));
+    return _jsx("div", { className: `${b({ size })} ${className} error`, children: "no data" });
 }

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.d.ts

@@ -4,5 +4,5 @@ interface QueryExecutionStatusProps {
     className?: string;
     error?: AxiosError | Record<string, any> | string;
 }
-export declare const QueryExecutionStatus: ({ className, error }: QueryExecutionStatusProps) => JSX.Element;
+export declare const QueryExecutionStatus: ({ className, error }: QueryExecutionStatusProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Icon as UiKitIcon } from '@gravity-ui/uikit';
+import { cn } from '../../utils/cn';
 import { Icon } from '../Icon';
 import questionIcon from '../../assets/icons/question.svg';
 import './QueryExecutionStatus.scss';
@@ -17,5 +17,5 @@ export const QueryExecutionStatus = ({ className, error }) => {
         icon = (_jsx(Icon, { name: hasError ? 'failure' : 'success', viewBox: hasError ? '0 0 512 512' : '0 0 16 16', width: 16, height: 16, className: b('result-status-icon', { error: hasError }) }));
         label = hasError ? 'Failed' : 'Completed';
     }
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [icon, label] })));
+    return (_jsxs("div", { className: b(null, className), children: [icon, label] }));
 };

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.scss

@@ -1,8 +1,7 @@
 .kv-query-execution-status {
     display: flex;
-    gap: 4px;
-
     align-items: center;
+    gap: 4px;
 
     color: var(--g-color-text-complementary);
     &__result-status-icon {

package/dist/components/QueryResultTable/Cell/Cell.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React from 'react';
+import { hideTooltip, showTooltip } from '../../../store/reducers/tooltip';
 import { useTypedDispatch } from '../../../utils/hooks';
-import { showTooltip, hideTooltip } from '../../../store/reducers/tooltip';
 import { b } from '../QueryResultTable';
 export const Cell = React.memo(function Cell(props) {
     const { className, value } = props;
     const dispatch = useTypedDispatch();
-    useEffect(() => () => {
+    React.useEffect(() => () => {
         dispatch(hideTooltip());
     }, [dispatch]);
-    return (_jsx("span", Object.assign({ className: b('cell', className), onClick: (e) => dispatch(showTooltip(e.target, value, 'cell')) }, { children: value })));
+    return (_jsx("span", { className: b('cell', className), onClick: (e) => dispatch(showTooltip(e.target, value, 'cell')), children: value }));
 });

package/dist/components/QueryResultTable/QueryResultTable.d.ts

@@ -1,19 +1,10 @@
 import type { DataTableProps } from '@gravity-ui/react-data-table';
 import type { ColumnType, KeyValueRow } from '../../types/api/query';
 import './QueryResultTable.scss';
-export declare const b: {
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string, mixin?: string | string[] | undefined): string;
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
-    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string): string;
-    (mods: import("bem-cn-lite").Modifications | null): string;
-    (): string;
-    builder(): import("bem-cn").Block;
-};
+export declare const b: import("@bem-react/classname").ClassNameFormatter;
 interface QueryResultTableProps extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
     data?: KeyValueRow[];
     columns?: ColumnType[];
 }
-export declare const QueryResultTable: (props: QueryResultTableProps) => JSX.Element | null;
+export declare const QueryResultTable: (props: QueryResultTableProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};