ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Clusters/Clusters.js

@@ -1,36 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { Helmet } from 'react-helmet-async';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
-import { TableColumnSetup, Select } from '@gravity-ui/uikit';
-import { Search } from '../../components/Search';
+import { Select, TableColumnSetup } from '@gravity-ui/uikit';
+import { Helmet } from 'react-helmet-async';
+import { ResponseError } from '../../components/Errors/ResponseError';
 import { Loader } from '../../components/Loader';
-import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { fetchClustersList, changeClustersFilters } from '../../store/reducers/clusters/clusters';
-import { selectClustersList, selectLoadingFlag, selectClusterNameFilter, selectStatusFilter, selectServiceFilter, selectVersionFilter, selectVersions, selectFilteredClusters, selectClustersAggregation, } from '../../store/reducers/clusters/selectors';
-import { COLUMNS_NAMES, COLUMNS_TITLES, CLUSTER_STATUSES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY, } from './constants';
+import { Search } from '../../components/Search';
+import { changeClustersFilters, clustersApi } from '../../store/reducers/clusters/clusters';
+import { aggregateClustersInfo, filterClusters, selectClusterNameFilter, selectServiceFilter, selectStatusFilter, selectVersionFilter, } from '../../store/reducers/clusters/selectors';
+import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { getMinorVersion } from '../../utils/versions';
 import { ClustersStatistics } from './ClustersStatistics';
 import { CLUSTERS_COLUMNS } from './columns';
-import { useSelectedColumns } from './useSelectedColumns';
-import { b } from './shared';
+import { CLUSTER_STATUSES, COLUMNS_NAMES, COLUMNS_TITLES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY, } from './constants';
 import i18n from './i18n';
+import { b } from './shared';
+import { useSelectedColumns } from './useSelectedColumns';
 import './Clusters.scss';
 export function Clusters() {
+    const query = clustersApi.useGetClustersListQuery(undefined, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
     const dispatch = useTypedDispatch();
-    const loading = useTypedSelector(selectLoadingFlag);
-    const clusters = useTypedSelector(selectClustersList);
-    const filteredClusters = useTypedSelector(selectFilteredClusters);
-    const aggregation = useTypedSelector(selectClustersAggregation);
     const clusterName = useTypedSelector(selectClusterNameFilter);
     const status = useTypedSelector(selectStatusFilter);
     const service = useTypedSelector(selectServiceFilter);
     const version = useTypedSelector(selectVersionFilter);
-    const versions = useTypedSelector(selectVersions);
-    const fetchData = useCallback(() => {
-        dispatch(fetchClustersList());
-    }, [dispatch]);
-    useAutofetcher(fetchData, [fetchData], true);
     const changeStatus = (value) => {
         dispatch(changeClustersFilters({ status: value }));
     };
@@ -44,25 +40,37 @@ export function Clusters() {
         dispatch(changeClustersFilters({ version: value }));
     };
     const { columnsToShow, columnsToSelect, setColumns } = useSelectedColumns(CLUSTERS_COLUMNS, SELECTED_COLUMNS_KEY, COLUMNS_TITLES, DEFAULT_COLUMNS, [COLUMNS_NAMES.TITLE]);
-    const servicesToSelect = useMemo(() => {
+    const clusters = query.data;
+    const { servicesToSelect, versions } = React.useMemo(() => {
         const clustersServices = new Set();
-        clusters.forEach((cluster) => {
+        const uniqVersions = new Set();
+        const clusterList = clusters !== null && clusters !== void 0 ? clusters : [];
+        clusterList.forEach((cluster) => {
+            var _a, _b;
             if (cluster.service) {
                 clustersServices.add(cluster.service);
             }
+            (_b = (_a = cluster.cluster) === null || _a === void 0 ? void 0 : _a.Versions) === null || _b === void 0 ? void 0 : _b.forEach((v) => {
+                uniqVersions.add(getMinorVersion(v));
+            });
         });
-        return Array.from(clustersServices).map((clusterService) => {
-            return {
-                value: clusterService,
-                content: clusterService,
-            };
-        });
+        return {
+            servicesToSelect: Array.from(clustersServices).map((value) => ({
+                value,
+                content: value,
+            })),
+            versions: Array.from(uniqVersions).map((value) => ({ value, content: value })),
+        };
     }, [clusters]);
-    if (loading && !clusters.length) {
+    const filteredClusters = React.useMemo(() => {
+        return filterClusters(clusters !== null && clusters !== void 0 ? clusters : [], { clusterName, status, service, version });
+    }, [clusterName, clusters, service, status, version]);
+    const aggregation = React.useMemo(() => aggregateClustersInfo(filteredClusters), [filteredClusters]);
+    if (query.isLoading) {
         return _jsx(Loader, { size: "l" });
     }
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Helmet, { children: _jsx("title", { children: i18n('page_title') }) }), _jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx("div", Object.assign({ className: b('control', { wide: true }) }, { children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: CLUSTER_STATUSES, onUpdate: changeStatus, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) })), _jsx("div", Object.assign({ className: b('control') }, { children: _jsx("div", { children: _jsx(TableColumnSetup, { popupWidth: "242px", items: columnsToSelect, showStatus: true, onUpdate: setColumns, className: b('table-settings') }, "TableColumnSetup") }) }))] })), _jsx("div", Object.assign({ className: b('table-wrapper') }, { children: _jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { theme: "yandex-cloud", data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
+    return (_jsxs("div", { className: b(), children: [_jsx(Helmet, { children: _jsx("title", { children: i18n('page_title') }) }), _jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", { className: b('controls'), children: [_jsx("div", { className: b('control', { wide: true }), children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: CLUSTER_STATUSES, onUpdate: changeStatus, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(TableColumnSetup, { popupWidth: 242, items: columnsToSelect, showStatus: true, onUpdate: setColumns, sortable: false }, "TableColumnSetup") })] }), query.isError ? _jsx(ResponseError, { error: query.error, className: b('error') }) : null, _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(DataTable, { theme: "yandex-cloud", data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
                             columnId: COLUMNS_NAMES.TITLE,
                             order: DataTable.ASCENDING,
-                        } }) })) }))] })));
+                        } }) }) })] }));
 }

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;
@@ -68,6 +68,15 @@ const getPDiskBreadcrumbs = (options, query = {}) => {
     });
     return breadcrumbs;
 };
+const getVDiskBreadcrumbs = (options, query = {}) => {
+    const { vDiskSlotId } = options;
+    const breadcrumbs = getPDiskBreadcrumbs(options, query);
+    const text = vDiskSlotId
+        ? `${headerKeyset('breadcrumbs.vDisk')} ${vDiskSlotId}`
+        : headerKeyset('breadcrumbs.vDisk');
+    breadcrumbs.push({ text });
+    return breadcrumbs;
+};
 const getTabletsBreadcrubms = (options, query = {}) => {
     const { tenantName, nodeIds } = options;
     const newQuery = Object.assign(Object.assign({}, query), { [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics, [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets });
@@ -106,6 +115,9 @@ export const getBreadcrumbs = (page, options, rawBreadcrumbs = [], query = {}) =
         case 'pDisk': {
             return [...rawBreadcrumbs, ...getPDiskBreadcrumbs(options, query)];
         }
+        case 'vDisk': {
+            return [...rawBreadcrumbs, ...getVDiskBreadcrumbs(options, query)];
+        }
         case 'tablets': {
             return [...rawBreadcrumbs, ...getTabletsBreadcrubms(options, query)];
         }

package/dist/containers/Header/i18n/en.json

@@ -2,6 +2,7 @@
     "breadcrumbs.tenant": "Tenant",
     "breadcrumbs.node": "Node",
     "breadcrumbs.pDisk": "PDisk",
+    "breadcrumbs.vDisk": "VDisk",
     "breadcrumbs.tablet": "Tablet",
     "breadcrumbs.tablets": "Tablets"
 }

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

@@ -1 +1 @@
-export declare const headerKeyset: (key: "breadcrumbs.tenant" | "breadcrumbs.node" | "breadcrumbs.pDisk" | "breadcrumbs.tablet" | "breadcrumbs.tablets", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const headerKeyset: (key: "breadcrumbs.tenant" | "breadcrumbs.node" | "breadcrumbs.pDisk" | "breadcrumbs.vDisk" | "breadcrumbs.tablet" | "breadcrumbs.tablets", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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';