ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/containers/Clusters/Clusters.scss

@@ -1,12 +1,12 @@
-@import '../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
 .clusters {
     overflow: auto;
 
     padding-top: 15px;
 
-    @include body-2-typography();
-    @include flex-container();
+    @include mixins.body-2-typography();
+    @include mixins.flex-container();
 
     &__cluster {
         display: flex;
@@ -81,7 +81,7 @@
         word-break: break-all;
     }
 
-    & .yc-progress__item {
+    & .g-progress__item {
         transition: none;
     }
 
@@ -128,7 +128,7 @@
 
     &__text {
         color: var(--g-color-text-primary);
-        @include body-2-typography();
+        @include mixins.body-2-typography();
 
         &::first-letter {
             color: var(--g-color-text-danger);
@@ -145,13 +145,13 @@
         overflow: auto;
 
         padding-left: 5px;
-        @include flex-container();
+        @include mixins.flex-container();
     }
 
     &__table-content {
         overflow: auto;
 
-        @include freeze-nth-column(1);
+        @include mixins.freeze-nth-column(1);
     }
     &__balancer-cell {
         display: flex;
@@ -173,4 +173,9 @@
         display: flex;
         align-items: center;
     }
+
+    &__error {
+        margin-left: 15px;
+        @include mixins.body-2-typography();
+    }
 }

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

@@ -3,5 +3,5 @@ interface ClustersStatisticsProps {
     count: number;
     stats: ClusterDataAggregation;
 }
-export declare const ClustersStatistics: ({ count, stats }: ClustersStatisticsProps) => JSX.Element;
+export declare const ClustersStatistics: ({ count, stats }: ClustersStatisticsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Clusters/ClustersStatistics.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProgressViewer } from '../../components/ProgressViewer/ProgressViewer';
 import { formatStorageValues } from '../../utils/dataFormatters/dataFormatters';
-import { b } from './shared';
 import i18n from './i18n';
+import { b } from './shared';
 export const ClustersStatistics = ({ count, stats }) => {
     const { NodesTotal, NodesAlive, Hosts, Tenants, LoadAverage, NumberOfCpus, StorageUsed, StorageTotal, } = stats;
-    return (_jsxs("div", Object.assign({ className: b('aggregation') }, { children: [_jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_clusters') })), count] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_hosts') })), Hosts] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_tenants') })), Tenants] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_nodes') })), _jsx(ProgressViewer, { size: "ns", value: NodesAlive, capacity: NodesTotal, colorizeProgress: true, inverseColorize: true })] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_load') })), _jsx(ProgressViewer, { size: "ns", value: LoadAverage, capacity: NumberOfCpus, colorizeProgress: true })] })), _jsxs("div", Object.assign({ className: b('aggregation-value-container') }, { children: [_jsx("span", Object.assign({ className: b('aggregation-label') }, { children: i18n('statistics_storage') })), _jsx(ProgressViewer, { size: "ns", value: StorageUsed, capacity: StorageTotal, formatValues: formatStorageValues, colorizeProgress: true })] }))] })));
+    return (_jsxs("div", { className: b('aggregation'), children: [_jsxs("div", { className: b('aggregation-value-container'), children: [_jsx("span", { className: b('aggregation-label'), children: i18n('statistics_clusters') }), count] }), _jsxs("div", { className: b('aggregation-value-container'), children: [_jsx("span", { className: b('aggregation-label'), children: i18n('statistics_hosts') }), Hosts] }), _jsxs("div", { className: b('aggregation-value-container'), children: [_jsx("span", { className: b('aggregation-label'), children: i18n('statistics_tenants') }), Tenants] }), _jsxs("div", { className: b('aggregation-value-container'), children: [_jsx("span", { className: b('aggregation-label'), children: i18n('statistics_nodes') }), _jsx(ProgressViewer, { size: "ns", value: NodesAlive, capacity: NodesTotal, colorizeProgress: true, inverseColorize: true })] }), _jsxs("div", { className: b('aggregation-value-container'), children: [_jsx("span", { className: b('aggregation-label'), children: i18n('statistics_load') }), _jsx(ProgressViewer, { size: "ns", value: LoadAverage, capacity: NumberOfCpus, colorizeProgress: true })] }), _jsxs("div", { className: b('aggregation-value-container'), children: [_jsx("span", { className: b('aggregation-label'), children: i18n('statistics_storage') }), _jsx(ProgressViewer, { size: "ns", value: StorageUsed, capacity: StorageTotal, formatValues: formatStorageValues, colorizeProgress: true })] })] }));
 };

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

@@ -1,3 +1,3 @@
-import { type Column } from '@gravity-ui/react-data-table';
+import type { Column } from '@gravity-ui/react-data-table';
 import type { PreparedCluster } from '../../store/reducers/clusters/types';
 export declare const CLUSTERS_COLUMNS: Column<PreparedCluster>[];

package/dist/containers/Clusters/columns.js

@@ -1,16 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import DataTable from '@gravity-ui/react-data-table';
-import { Link as ExternalLink, Progress, ClipboardButton } from '@gravity-ui/uikit';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
-import { UserCard } from '../../components/User/User';
+import DataTable from '@gravity-ui/react-data-table';
+import { ClipboardButton, Link as ExternalLink, Progress } from '@gravity-ui/uikit';
 import { ProgressViewer } from '../../components/ProgressViewer/ProgressViewer';
-import { clusterTabsIds, getClusterPath } from '../Cluster/utils';
+import { UserCard } from '../../components/User/User';
 import { formatStorageValuesToTb } from '../../utils/dataFormatters/dataFormatters';
-import { removeViewerPathname, getCleanBalancerValue } from '../../utils/parseBalancer';
+import { getCleanBalancerValue, removeViewerPathname } from '../../utils/parseBalancer';
+import { clusterTabsIds, getClusterPath } from '../Cluster/utils';
 import { COLUMNS_NAMES, COLUMNS_TITLES } from './constants';
-import { b } from './shared';
 import i18n from './i18n';
-const EMPTY_CELL = _jsx("span", Object.assign({ className: b('empty-cell') }, { children: "\u2014" }));
+import { b } from './shared';
+const EMPTY_CELL = _jsx("span", { className: b('empty-cell'), children: "\u2014" });
 export const CLUSTERS_COLUMNS = [
     {
         name: COLUMNS_NAMES.TITLE,
@@ -22,9 +23,9 @@ export const CLUSTERS_COLUMNS = [
             const backend = balancer && removeViewerPathname(balancer);
             const clusterPath = getClusterPath(undefined, { backend, clusterName });
             const clusterStatus = (_a = row.cluster) === null || _a === void 0 ? void 0 : _a.Overall;
-            return (_jsxs("div", Object.assign({ className: b('cluster') }, { children: [clusterStatus ? (_jsx(ExternalLink, Object.assign({ href: clusterPath }, { children: _jsx("div", { className: b('cluster-status', {
+            return (_jsxs("div", { className: b('cluster'), children: [clusterStatus ? (_jsx(ExternalLink, { href: clusterPath, children: _jsx("div", { className: b('cluster-status', {
                                 type: clusterStatus && clusterStatus.toLowerCase(),
-                            }) }) }))) : (_jsx("div", Object.assign({ className: b('cluster-status') }, { children: _jsx(HelpPopover, { content: _jsx("span", Object.assign({ className: b('tooltip-content') }, { children: ((_b = row.cluster) === null || _b === void 0 ? void 0 : _b.error) || i18n('tooltip_no-cluster-data') })), offset: { left: 0 } }) }))), _jsx("div", Object.assign({ className: b('cluster-name') }, { children: _jsx(ExternalLink, Object.assign({ href: clusterPath }, { children: row.title })) }))] })));
+                            }) }) })) : (_jsx("div", { className: b('cluster-status'), children: _jsx(HelpPopover, { content: _jsx("span", { className: b('tooltip-content'), children: ((_b = row.cluster) === null || _b === void 0 ? void 0 : _b.error) || i18n('tooltip_no-cluster-data') }), offset: { left: 0 } }) })), _jsx("div", { className: b('cluster-name'), children: _jsx(ExternalLink, { href: clusterPath, children: row.title }) })] }));
         },
         defaultOrder: DataTable.ASCENDING,
     },
@@ -54,7 +55,7 @@ export const CLUSTERS_COLUMNS = [
                 };
             });
             const backend = balancer && removeViewerPathname(balancer);
-            return (preparedVersions.length > 0 && (_jsx(ExternalLink, Object.assign({ className: b('cluster-versions'), href: getClusterPath(clusterTabsIds.versions, { backend, clusterName }) }, { children: _jsxs(_Fragment, { children: [preparedVersions.map((item, index) => (_jsx("div", Object.assign({ className: b('cluster-version'), style: { color: item.color }, title: item.version }, { children: item.version }), index))), _jsx(Progress, { size: "s", value: 100, stack: versionsValues })] }) }))));
+            return (preparedVersions.length > 0 && (_jsx(ExternalLink, { className: b('cluster-versions'), href: getClusterPath(clusterTabsIds.versions, { backend, clusterName }), children: _jsxs(React.Fragment, { children: [preparedVersions.map((item, index) => (_jsx("div", { className: b('cluster-version'), style: { color: item.color }, title: item.version, children: item.version }, index))), _jsx(Progress, { size: "s", value: 100, stack: versionsValues })] }) })));
         },
     },
     {
@@ -64,7 +65,7 @@ export const CLUSTERS_COLUMNS = [
         sortable: false,
         render: ({ row }) => {
             const dc = (row.cluster && row.cluster.DataCenters) || [];
-            return _jsx("div", Object.assign({ className: b('cluster-dc') }, { children: dc.join(', ') || EMPTY_CELL }));
+            return _jsx("div", { className: b('cluster-dc'), children: dc.join(', ') || EMPTY_CELL });
         },
     },
     {
@@ -173,7 +174,7 @@ export const CLUSTERS_COLUMNS = [
         sortable: false,
         width: 150,
         render: ({ row }) => {
-            return row.description ? (_jsx("div", Object.assign({ className: b('description') }, { children: row.description }))) : (EMPTY_CELL);
+            return row.description ? (_jsx("div", { className: b('description'), children: row.description })) : (EMPTY_CELL);
         },
     },
     {
@@ -186,7 +187,7 @@ export const CLUSTERS_COLUMNS = [
                 return EMPTY_CELL;
             }
             const cleanedValue = getCleanBalancerValue(row.balancer);
-            return (_jsxs("div", Object.assign({ className: b('balancer-cell') }, { children: [_jsx("div", Object.assign({ className: b('balancer-text') }, { children: cleanedValue })), _jsx(ClipboardButton, { size: 14, text: cleanedValue, className: b('balancer-icon') })] })));
+            return (_jsxs("div", { className: b('balancer-cell'), children: [_jsx("div", { className: b('balancer-text'), children: cleanedValue }), _jsx(ClipboardButton, { size: "s", text: cleanedValue, className: b('balancer-icon') })] }));
         },
     },
 ];

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

@@ -15,7 +15,7 @@ export declare const COLUMNS_NAMES: {
     readonly DESCRIPTION: "description";
     readonly BALANCER: "balancer";
 };
-export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "tenants" | "versions" | "status" | "service" | "title" | "hosts" | "balancer" | "load" | "owner")[];
+export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "tenants" | "versions" | "status" | "service" | "hosts" | "balancer" | "title" | "owner" | "load")[];
 export declare const COLUMNS_TITLES: {
     readonly title: "Cluster";
     readonly versions: "Versions";

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

@@ -1,10 +1 @@
-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;

package/dist/containers/Clusters/shared.js

@@ -1,2 +1,2 @@
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 export const b = cn('clusters');

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

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

package/dist/containers/Clusters/useSelectedColumns.js

@@ -4,11 +4,13 @@ export const useSelectedColumns = (columns, storageKey, columnsTitles, defaultCo
     const columnsIds = columns.map((column) => column.name);
     const columnsToShow = columns.filter((column) => selectedColumnsIds.find((name) => name === column.name));
     const columnsToSelect = columnsIds.map((id) => {
+        const isRequired = requiredColumnsIds === null || requiredColumnsIds === void 0 ? void 0 : requiredColumnsIds.includes(id);
         return {
             id,
             title: columnsTitles[id],
             selected: selectedColumnsIds.includes(id),
-            required: requiredColumnsIds === null || requiredColumnsIds === void 0 ? void 0 : requiredColumnsIds.includes(id),
+            required: isRequired,
+            sticky: isRequired ? 'start' : undefined,
         };
     });
     const setColumns = (value) => {

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { RawBreadcrumbItem } from './breadcrumbs';
+import type { RawBreadcrumbItem } from './breadcrumbs';
 import './Header.scss';
 interface HeaderProps {
     mainPage?: RawBreadcrumbItem;
 }
-declare function Header({ mainPage }: HeaderProps): JSX.Element;
+declare function Header({ mainPage }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/containers/Header/Header.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
-import { useHistory, useLocation } from 'react-router';
-import block from 'bem-cn-lite';
+import React from 'react';
 import { Breadcrumbs } from '@gravity-ui/uikit';
+import { useHistory, useLocation } from 'react-router';
 import { LinkWithIcon } from '../../components/LinkWithIcon/LinkWithIcon';
+import { parseQuery } from '../../routes';
 import { backend, customBackend } from '../../store';
-import { getClusterInfo } from '../../store/reducers/cluster/cluster';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
+import { clusterApi } from '../../store/reducers/cluster/cluster';
+import { cn } from '../../utils/cn';
 import { DEVELOPER_UI_TITLE } from '../../utils/constants';
-import { parseQuery } from '../../routes';
+import { useTypedSelector } from '../../utils/hooks';
 import { getBreadcrumbs } from './breadcrumbs';
 import './Header.scss';
-const b = block('header');
+const b = cn('header');
 const getInternalLink = (singleClusterMode) => {
     if (singleClusterMode && !customBackend) {
         return `/internal`;
@@ -20,19 +20,15 @@ const getInternalLink = (singleClusterMode) => {
 };
 function Header({ mainPage }) {
     var _a;
-    const dispatch = useTypedDispatch();
     const history = useHistory();
     const location = useLocation();
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     const { page, pageBreadcrumbsOptions } = useTypedSelector((state) => state.header);
-    const { data } = useTypedSelector((state) => state.cluster);
     const queryParams = parseQuery(location);
     const clusterNameFromQuery = (_a = queryParams.clusterName) === null || _a === void 0 ? void 0 : _a.toString();
+    const { currentData: { clusterData: data } = {} } = clusterApi.useGetClusterInfoQuery(clusterNameFromQuery);
     const clusterNameFinal = (data === null || data === void 0 ? void 0 : data.Name) || clusterNameFromQuery;
-    useEffect(() => {
-        dispatch(getClusterInfo(clusterNameFromQuery));
-    }, [dispatch, clusterNameFromQuery]);
-    const breadcrumbItems = useMemo(() => {
+    const breadcrumbItems = React.useMemo(() => {
         const rawBreadcrumbs = [];
         let options = pageBreadcrumbsOptions;
         if (mainPage) {
@@ -52,12 +48,12 @@ function Header({ mainPage }) {
         });
     }, [clusterNameFinal, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
     const renderHeader = () => {
-        return (_jsxs("header", Object.assign({ className: b() }, { children: [_jsx("div", { children: _jsx(Breadcrumbs, { items: breadcrumbItems, lastDisplayedItemsCount: 1, firstDisplayedItemsCount: 1, renderItemContent: ({ icon, text }) => {
+        return (_jsxs("header", { className: b(), children: [_jsx("div", { children: _jsx(Breadcrumbs, { items: breadcrumbItems, lastDisplayedItemsCount: 1, firstDisplayedItemsCount: 1, renderItemContent: ({ icon, text }) => {
                             if (!icon) {
                                 return text;
                             }
-                            return (_jsxs("span", Object.assign({ className: b('breadcrumb') }, { children: [_jsx("div", Object.assign({ className: b('breadcrumb__icon') }, { children: icon })), text] })));
-                        } }) }), _jsx(LinkWithIcon, { title: DEVELOPER_UI_TITLE, url: getInternalLink(singleClusterMode) })] })));
+                            return (_jsxs("span", { className: b('breadcrumb'), children: [_jsx("div", { className: b('breadcrumb__icon'), children: icon }), text] }));
+                        } }) }), _jsx(LinkWithIcon, { title: DEVELOPER_UI_TITLE, url: getInternalLink(singleClusterMode) })] }));
     };
     return renderHeader();
 }

package/dist/containers/Header/breadcrumbs.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { NodesRight as ClusterIcon, Database as DatabaseIcon, Cpu as ComputeNodeIcon, HardDrive as StorageNodeIcon, } from '@gravity-ui/icons';
-import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, } from '../../store/reducers/tenant/constants';
+import { NodesRight as ClusterIcon, Cpu as ComputeNodeIcon, Database as DatabaseIcon, HardDrive as StorageNodeIcon, } from '@gravity-ui/icons';
 import { TabletIcon } from '../../components/TabletIcon/TabletIcon';
 import routes, { createHref, getPDiskPagePath } from '../../routes';
+import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, } from '../../store/reducers/tenant/constants';
 import { CLUSTER_DEFAULT_TITLE, getTabletLabel } from '../../utils/constants';
 import { getClusterPath } from '../Cluster/utils';
-import { TenantTabsGroups, getTenantPath } from '../Tenant/TenantPages';
 import { getDefaultNodePath } from '../Node/NodePages';
+import { TenantTabsGroups, getTenantPath } from '../Tenant/TenantPages';
 import { headerKeyset } from './i18n';
 const prepareTenantName = (tenantName) => {
     return tenantName.startsWith('/') ? tenantName.slice(1) : tenantName;

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

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

package/dist/containers/Heatmap/Heatmap.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { Checkbox, Select } from '@gravity-ui/uikit';
-import { getTabletsInfo, setHeatmapOptions } from '../../store/reducers/heatmap';
-import { showTooltip, hideTooltip } from '../../store/reducers/tooltip';
-import { formatNumber } from '../../utils/dataFormatters/dataFormatters';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { Loader } from '../../components/Loader';
 import { ResponseError } from '../../components/Errors/ResponseError';
-import { COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits } from './util';
+import { Loader } from '../../components/Loader';
+import { heatmapApi, setHeatmapOptions } from '../../store/reducers/heatmap';
+import { hideTooltip, showTooltip } from '../../store/reducers/tooltip';
+import { cn } from '../../utils/cn';
+import { formatNumber } from '../../utils/dataFormatters/dataFormatters';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { HeatmapCanvas } from './HeatmapCanvas/HeatmapCanvas';
 import { Histogram } from './Histogram/Histogram';
+import { COLORS_RANGE_SIZE, getColorIndex, getColorRange, getCurrentMetricLimits } from './util';
 import './Heatmap.scss';
 const b = cn('heatmap');
 const COLORS_RANGE = getColorRange(COLORS_RANGE_SIZE);
@@ -18,25 +18,10 @@ export const Heatmap = ({ path }) => {
     const dispatch = useTypedDispatch();
     const itemsContainer = React.createRef();
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error, sort, heatmap, metrics, currentMetric, data: tablets = [], } = useTypedSelector((state) => state.heatmap);
-    const [selectedMetric, setSelectedMetric] = useState(['']);
-    useEffect(() => {
-        if (!currentMetric && metrics && metrics.length) {
-            dispatch(setHeatmapOptions({
-                currentMetric: metrics[0].value,
-            }));
-        }
-        if (currentMetric) {
-            setSelectedMetric([currentMetric]);
-        }
-    }, [currentMetric, metrics, dispatch]);
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setHeatmapOptions({ wasLoaded: false }));
-        }
-        dispatch(getTabletsInfo({ path }));
-    }, [path, dispatch]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
+    const { currentData, isFetching, error } = heatmapApi.useGetHeatmapTabletsInfoQuery({ path }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { tablets = [], metrics } = currentData || {};
+    const { sort, heatmap, currentMetric } = useTypedSelector((state) => state.heatmap);
     const onShowTooltip = (...args) => {
         dispatch(showTooltip(...args));
     };
@@ -74,13 +59,13 @@ export const Heatmap = ({ path }) => {
         const sortedTablets = sort
             ? preparedTablets.sort((x, y) => Number(y.value) - Number(x.value))
             : preparedTablets;
-        return (_jsx("div", Object.assign({ ref: itemsContainer, className: b('items') }, { children: _jsx(HeatmapCanvas, { tablets: sortedTablets, parentRef: itemsContainer, showTooltip: onShowTooltip, hideTooltip: onHideTooltip, currentMetric: currentMetric }) })));
+        return (_jsx("div", { ref: itemsContainer, className: b('items'), children: _jsx(HeatmapCanvas, { tablets: sortedTablets, parentRef: itemsContainer, showTooltip: onShowTooltip, hideTooltip: onHideTooltip }) }));
     };
     const renderContent = () => {
         const { min, max } = getCurrentMetricLimits(currentMetric, tablets);
-        return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('filters') }, { children: [_jsx(Select, { className: b('heatmap-select'), value: selectedMetric, options: metrics, onUpdate: handleMetricChange, width: 200 }), _jsx("div", Object.assign({ className: b('sort-checkbox') }, { children: _jsx(Checkbox, Object.assign({ onUpdate: handleCheckboxChange, checked: sort }, { children: "Sort" })) })), _jsx("div", Object.assign({ className: b('histogram-checkbox') }, { children: _jsx(Checkbox, Object.assign({ onUpdate: handleHeatmapChange, checked: heatmap }, { children: "Heatmap" })) })), _jsxs("div", Object.assign({ className: b('limits') }, { children: [_jsxs("div", Object.assign({ className: b('limits-block') }, { children: [_jsx("div", Object.assign({ className: b('limits-title') }, { children: "min:" })), _jsx("div", Object.assign({ className: b('limits-value') }, { children: Number.isInteger(min) ? formatNumber(min) : '—' }))] })), _jsxs("div", Object.assign({ className: b('limits-block') }, { children: [_jsx("div", Object.assign({ className: b('limits-title') }, { children: "max:" })), _jsx("div", Object.assign({ className: b('limits-value') }, { children: Number.isInteger(max) ? formatNumber(max) : '—' }))] })), _jsxs("div", Object.assign({ className: b('limits-block') }, { children: [_jsx("div", Object.assign({ className: b('limits-title') }, { children: "count:" })), _jsx("div", Object.assign({ className: b('limits-value') }, { children: formatNumber(tablets.length) }))] }))] }))] })), heatmap ? renderHeatmapCanvas() : renderHistogram()] })));
+        return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('filters'), children: [_jsx(Select, { className: b('heatmap-select'), value: currentMetric ? [currentMetric] : [], options: metrics, onUpdate: handleMetricChange, width: 200 }), _jsx("div", { className: b('sort-checkbox'), children: _jsx(Checkbox, { onUpdate: handleCheckboxChange, checked: sort, children: "Sort" }) }), _jsx("div", { className: b('histogram-checkbox'), children: _jsx(Checkbox, { onUpdate: handleHeatmapChange, checked: heatmap, children: "Heatmap" }) }), _jsxs("div", { className: b('limits'), children: [_jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "min:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(min) ? formatNumber(min) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "max:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(max) ? formatNumber(max) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "count:" }), _jsx("div", { className: b('limits-value'), children: formatNumber(tablets.length) })] })] })] }), heatmap ? renderHeatmapCanvas() : renderHistogram()] }));
     };
-    if (loading && !wasLoaded) {
+    if (loading) {
         return _jsx(Loader, {});
     }
     if (error) {

package/dist/containers/Heatmap/Heatmap.scss

@@ -30,7 +30,7 @@
         &_overall {
             margin: 15px 20px;
 
-            .yc-progress {
+            .g-progress {
                 width: 300px;
                 margin: 0;
             }

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

@@ -1,11 +1,10 @@
-export function HeatmapCanvas(props: any): JSX.Element;
+export function HeatmapCanvas(props: any): import("react/jsx-runtime").JSX.Element;
 export namespace HeatmapCanvas {
     namespace propTypes {
-        const tablets: PropTypes.Requireable<any[]>;
-        const parentRef: PropTypes.Requireable<object>;
-        const showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-        const hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-        const currentMetric: PropTypes.Requireable<string>;
+        let tablets: PropTypes.Requireable<any[]>;
+        let parentRef: PropTypes.Requireable<object>;
+        let showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        let hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';

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

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import throttle from 'lodash/throttle';
-import { basename as appBasename } from '../../../store/index';
+import PropTypes from 'prop-types';
 import routes, { createHref } from '../../../routes';
+import { basename as appBasename } from '../../../store/index';
+import { cn } from '../../../utils/cn';
 const b = cn('heatmap');
 const defaultDimensions = { width: 0, height: 0 };
 const TABLET_SIZE = 10;
 const TABLET_PADDING = 2;
 export const HeatmapCanvas = (props) => {
-    const [dimensions, setDimensions] = useState(defaultDimensions);
+    const [dimensions, setDimensions] = React.useState(defaultDimensions);
     const { tablets } = props;
-    const canvasRef = useRef(null);
-    const containerRef = useRef(null);
+    const canvasRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     function drawTablet(ctx) {
         return (tablet, index) => {
             const { columnsCount } = dimensions;
@@ -23,13 +23,13 @@ export const HeatmapCanvas = (props) => {
             ctx.fillRect(rectX, rectY, TABLET_SIZE, TABLET_SIZE);
         };
     }
-    useEffect(() => {
+    React.useEffect(() => {
         const canvas = canvasRef.current;
         const ctx = canvas.getContext('2d');
         ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
         tablets.map(drawTablet(ctx));
     });
-    useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         const container = containerRef.current;
         if (container) {
             const width = container.offsetWidth - 15;
@@ -123,12 +123,11 @@ export const HeatmapCanvas = (props) => {
             props.hideTooltip();
         }
     }, 20);
-    return (_jsx("div", Object.assign({ ref: containerRef, className: b('canvas-container'), onMouseLeave: _onCanvasMouseLeave }, { children: _jsx("canvas", { ref: canvasRef, width: dimensions.width, height: dimensions.height, onClick: _onCanvasClick, onMouseMove: (e) => _onCanvasMouseMove(e.clientX, e.clientY) }) })));
+    return (_jsx("div", { ref: containerRef, className: b('canvas-container'), onMouseLeave: _onCanvasMouseLeave, children: _jsx("canvas", { ref: canvasRef, width: dimensions.width, height: dimensions.height, onClick: _onCanvasClick, onMouseMove: (e) => _onCanvasMouseMove(e.clientX, e.clientY) }) }));
 };
 HeatmapCanvas.propTypes = {
     tablets: PropTypes.array,
     parentRef: PropTypes.object,
     showTooltip: PropTypes.func,
     hideTooltip: PropTypes.func,
-    currentMetric: PropTypes.string,
 };

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

@@ -1,10 +1,10 @@
-export function Histogram(props: any): JSX.Element;
+export function Histogram(props: any): import("react/jsx-runtime").JSX.Element;
 export namespace Histogram {
     namespace propTypes {
-        const tablets: PropTypes.Requireable<any[]>;
-        const currentMetric: PropTypes.Requireable<string>;
-        const showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-        const hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        let tablets: PropTypes.Requireable<any[]>;
+        let currentMetric: PropTypes.Requireable<string>;
+        let showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        let hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';

package/dist/containers/Heatmap/Histogram/Histogram.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import { getColorRange, getCurrentMetricLimits } from '../util';
+import { cn } from '../../../utils/cn';
 import { formatNumber } from '../../../utils/dataFormatters/dataFormatters';
+import { getColorRange, getCurrentMetricLimits } from '../util';
 import './Histogram.scss';
 const b = cn('histogram');
 const HistogramBar = (props) => {
-    const barRef = useRef();
+    const barRef = React.useRef();
     const { data = {}, maxCount } = props;
     const { count, leftBound, rightBound, color } = data;
     const height = (count / maxCount) * 100;
@@ -54,7 +54,7 @@ export const Histogram = (props) => {
     const renderHistogramItem = (item, index) => {
         return (_jsx(HistogramBar, { data: item, maxCount: maxCount, showTooltip: props.showTooltip, hideTooltip: props.hideTooltip }, index));
     };
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('chart') }, { children: [Boolean(max) && histogramRange.map(renderHistogramItem), _jsx("div", Object.assign({ className: b('x-min') }, { children: formatNumber(min) })), _jsx("div", Object.assign({ className: b('x-max') }, { children: formatNumber(max) })), _jsx("div", Object.assign({ className: b('y-min') }, { children: "0" })), _jsx("div", Object.assign({ className: b('y-max') }, { children: formatNumber(maxCount) }))] })) })));
+    return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('chart'), children: [Boolean(max) && histogramRange.map(renderHistogramItem), _jsx("div", { className: b('x-min'), children: formatNumber(min) }), _jsx("div", { className: b('x-max'), children: formatNumber(max) }), _jsx("div", { className: b('y-min'), children: "0" }), _jsx("div", { className: b('y-max'), children: formatNumber(maxCount) })] }) }));
 };
 Histogram.propTypes = {
     tablets: PropTypes.array,

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

@@ -1,33 +1,33 @@
 export const COLORS_RANGE_SIZE: 500;
 export namespace LIMITED_METRICS {
     namespace CPU {
-        const min: number;
-        const max: number;
+        let min: number;
+        let max: number;
     }
     namespace Network {
-        const min_1: number;
+        let min_1: number;
         export { min_1 as min };
-        const max_1: number;
+        let max_1: number;
         export { max_1 as max };
     }
     namespace Storage {
-        const min_2: number;
+        let min_2: number;
         export { min_2 as min };
-        const max_2: number;
+        let max_2: number;
         export { max_2 as max };
     }
     namespace DataSize {
-        const min_3: number;
+        let min_3: number;
         export { min_3 as min };
-        const max_3: number;
+        let max_3: number;
         export { max_3 as max };
     }
     namespace RowCount {
-        const min_4: number;
+        let min_4: number;
         export { min_4 as min };
     }
     namespace IndexSize {
-        const min_5: number;
+        let min_5: number;
         export { min_5 as min };
     }
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { AdditionalNodesProps } from '../../types/additionalProps';
 import './Node.scss';
 export declare const STORAGE_ROLE = "Storage";
@@ -6,5 +5,5 @@ interface NodeProps {
     additionalNodesProps?: AdditionalNodesProps;
     className?: string;
 }
-declare function Node(props: NodeProps): JSX.Element;
+declare function Node(props: NodeProps): import("react/jsx-runtime").JSX.Element;
 export default Node;