ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useHistory } from 'react-router';
 import { Button, Icon } from '@gravity-ui/uikit';
+import { useHistory } from 'react-router';
 import routes, { createHref } from '../../../routes';
-import { useTypedSelector, useTypedDispatch } from '../../../utils/hooks';
 import { logout } from '../../../store/reducers/authentication/authentication';
 import { cn } from '../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
+import i18n from '../i18n';
 import signOutIcon from '@gravity-ui/icons/svgs/arrow-right-from-square.svg';
 import signInIcon from '@gravity-ui/icons/svgs/arrow-right-to-square.svg';
-import i18n from '../i18n';
 import './YdbInternalUser.scss';
 const b = cn('kv-ydb-internal-user');
 export function YdbInternalUser() {
@@ -20,5 +20,5 @@ export function YdbInternalUser() {
     const handleLogout = () => {
         dispatch(logout);
     };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('user-info-wrapper') }, { children: [_jsx("div", Object.assign({ className: b('ydb-internal-user-title') }, { children: i18n('account.user') })), ydbUser && _jsx("div", Object.assign({ className: b('username') }, { children: ydbUser }))] })), ydbUser ? (_jsx(Button, Object.assign({ view: "flat-secondary", title: i18n('account.logout'), onClick: handleLogout }, { children: _jsx(Icon, { data: signOutIcon, size: 16 }) }))) : (_jsx(Button, Object.assign({ view: "flat-secondary", title: i18n('account.login'), onClick: handleLoginClick }, { children: _jsx(Icon, { data: signInIcon, size: 16 }) })))] })));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('user-info-wrapper'), children: [_jsx("div", { className: b('ydb-internal-user-title'), children: i18n('account.user') }), ydbUser && _jsx("div", { className: b('username'), children: ydbUser })] }), ydbUser ? (_jsx(Button, { view: "flat-secondary", title: i18n('account.logout'), onClick: handleLogout, children: _jsx(Icon, { data: signOutIcon, size: 16 }) })) : (_jsx(Button, { view: "flat-secondary", title: i18n('account.login'), onClick: handleLoginClick, children: _jsx(Icon, { data: signInIcon, size: 16 }) }))] }));
 }

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

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "pages.query" | "pages.diagnostics" | "navigation-item.documentation" | "navigation-item.settings" | "navigation-item.account" | "account.user" | "account.login" | "account.logout", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/AsideNavigation/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../utils/i18n';
+import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-aside-navigation';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/AsideNavigation/useNavigationMenuItems.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useHistory, useLocation } from 'react-router';
-import { useSetting, useTypedSelector } from '../../utils/hooks';
 import routes, { parseQuery } from '../../routes';
-import { getTenantPath } from '../Tenant/TenantPages';
 import { TENANT_PAGE, TENANT_PAGES_IDS } from '../../store/reducers/tenant/constants';
 import { TENANT_INITIAL_PAGE_KEY } from '../../utils/constants';
-import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
-import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
+import { useSetting, useTypedSelector } from '../../utils/hooks';
+import { getTenantPath } from '../Tenant/TenantPages';
 import i18n from './i18n';
+import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
+import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
 export function useNavigationMenuItems() {
     const location = useLocation();
     const history = useHistory();

package/dist/containers/Authentication/Authentication.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import './Authentication.scss';
 interface AuthenticationProps {
     closable?: boolean;
 }
-declare function Authentication({ closable }: AuthenticationProps): JSX.Element;
+declare function Authentication({ closable }: AuthenticationProps): import("react/jsx-runtime").JSX.Element;
 export default Authentication;

package/dist/containers/Authentication/Authentication.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import React from 'react';
+import { Button, Link as ExternalLink, Icon, TextInput } from '@gravity-ui/uikit';
 import { useHistory, useLocation } from 'react-router';
-import cn from 'bem-cn-lite';
-import { Button, TextInput, Icon, Link as ExternalLink } from '@gravity-ui/uikit';
-import { authenticate } from '../../store/reducers/authentication/authentication';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import { parseQuery } from '../../routes';
-import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import showIcon from '../../assets/icons/show.svg';
-import hideIcon from '../../assets/icons/hide.svg';
+import { authenticate } from '../../store/reducers/authentication/authentication';
+import { cn } from '../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import closeIcon from '../../assets/icons/close.svg';
+import hideIcon from '../../assets/icons/hide.svg';
+import showIcon from '../../assets/icons/show.svg';
+import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import './Authentication.scss';
 const b = cn('authentication');
 function Authentication({ closable = false }) {
@@ -18,12 +18,12 @@ function Authentication({ closable = false }) {
     const location = useLocation();
     const { returnUrl } = parseQuery(location);
     const { error } = useTypedSelector((state) => state.authentication);
-    const [login, setLogin] = useState('');
-    const [pass, setPass] = useState('');
-    const [loginError, setLoginError] = useState('');
-    const [passwordError, setPasswordError] = useState('');
-    const [showPassword, setShowPassword] = useState(false);
-    useEffect(() => {
+    const [login, setLogin] = React.useState('');
+    const [pass, setPass] = React.useState('');
+    const [loginError, setLoginError] = React.useState('');
+    const [passwordError, setPasswordError] = React.useState('');
+    const [showPassword, setShowPassword] = React.useState(false);
+    React.useEffect(() => {
         var _a, _b, _c, _d;
         if ((_b = (_a = error === null || error === void 0 ? void 0 : error.data) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.includes('user')) {
             setLoginError(error.data.error);
@@ -64,6 +64,6 @@ function Authentication({ closable = false }) {
     const onTogglePasswordVisibility = () => {
         setShowPassword((prev) => !prev);
     };
-    return (_jsxs("section", Object.assign({ className: b() }, { children: [_jsxs("form", Object.assign({ className: b('form-wrapper') }, { children: [_jsxs("div", Object.assign({ className: b('header') }, { children: [_jsxs("div", Object.assign({ className: b('logo') }, { children: [_jsx(Icon, { data: ydbLogoIcon, size: 24 }), "YDB"] })), _jsx(ExternalLink, Object.assign({ href: "http://ydb.tech/docs", target: "_blank" }, { children: "Documentation" }))] })), _jsx("h2", Object.assign({ className: b('title') }, { children: "Sign in" })), _jsx("div", Object.assign({ className: b('field-wrapper') }, { children: _jsx(TextInput, { value: login, onUpdate: onLoginUpdate, placeholder: 'Username', error: loginError, onKeyDown: onEnterClick, size: "l", autoFocus: true }) })), _jsxs("div", Object.assign({ className: b('field-wrapper') }, { children: [_jsx(TextInput, { value: pass, onUpdate: onPassUpdate, type: showPassword ? 'text' : 'password', placeholder: 'Password', error: passwordError, onKeyDown: onEnterClick, size: "l" }), _jsx(Button, Object.assign({ onClick: onTogglePasswordVisibility, size: "l", className: b('show-password-button') }, { children: _jsx(Icon, { data: showPassword ? hideIcon : showIcon, size: 16 }) }))] })), _jsx(Button, Object.assign({ view: "action", onClick: onLoginClick, width: "max", size: "l", disabled: Boolean(!login || loginError || passwordError), className: b('button-sign-in') }, { children: "Sign in" }))] })), closable && history.length > 1 && (_jsx(Button, Object.assign({ onClick: onClose, className: b('close') }, { children: _jsx(Icon, { data: closeIcon, size: 24 }) })))] })));
+    return (_jsxs("section", { className: b(), children: [_jsxs("form", { className: b('form-wrapper'), children: [_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('logo'), children: [_jsx(Icon, { data: ydbLogoIcon, size: 24 }), "YDB"] }), _jsx(ExternalLink, { href: "http://ydb.tech/docs", target: "_blank", children: "Documentation" })] }), _jsx("h2", { className: b('title'), children: "Sign in" }), _jsx("div", { className: b('field-wrapper'), children: _jsx(TextInput, { value: login, onUpdate: onLoginUpdate, placeholder: 'Username', error: loginError, onKeyDown: onEnterClick, size: "l", autoFocus: true }) }), _jsxs("div", { className: b('field-wrapper'), children: [_jsx(TextInput, { value: pass, onUpdate: onPassUpdate, type: showPassword ? 'text' : 'password', placeholder: 'Password', error: passwordError, onKeyDown: onEnterClick, size: "l" }), _jsx(Button, { onClick: onTogglePasswordVisibility, size: "l", className: b('show-password-button'), children: _jsx(Icon, { data: showPassword ? hideIcon : showIcon, size: 16 }) })] }), _jsx(Button, { view: "action", onClick: onLoginClick, width: "max", size: "l", disabled: Boolean(!login || loginError || passwordError), className: b('button-sign-in'), children: "Sign in" })] }), closable && history.length > 1 && (_jsx(Button, { onClick: onClose, className: b('close'), children: _jsx(Icon, { data: closeIcon, size: 24 }) }))] }));
 }
 export default Authentication;

package/dist/containers/Authentication/Authentication.scss

@@ -17,7 +17,7 @@
         radial-gradient(at 110% 100%, rgba(0, 102, 255, 0.15) 20%, rgba(247, 247, 247, 0) 40%);
     background-blend-mode: normal;
 
-    .yc-text-input {
+    .g-text-input {
         display: flex;
     }
 
@@ -35,10 +35,10 @@
     &__logo {
         display: flex;
         align-items: center;
+        gap: 8px;
 
         font-size: 16px;
         font-weight: 600;
-        gap: 8px;
     }
 
     &__title {
@@ -70,7 +70,7 @@
 
         width: 320px;
         margin-bottom: 16px;
-        .yc-text-input_state_error {
+        .g-text-input_state_error {
             flex-direction: column;
         }
     }

package/dist/containers/Cluster/Cluster.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { AdditionalClusterProps, AdditionalTenantsProps, AdditionalVersionsProps, AdditionalNodesProps } from '../../types/additionalProps';
+import type { AdditionalClusterProps, AdditionalNodesProps, AdditionalTenantsProps, AdditionalVersionsProps } from '../../types/additionalProps';
 import './Cluster.scss';
 interface ClusterProps {
     additionalTenantsProps?: AdditionalTenantsProps;
@@ -7,5 +6,5 @@ interface ClusterProps {
     additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
 }
-declare function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }: ClusterProps): JSX.Element;
+declare function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }: ClusterProps): import("react/jsx-runtime").JSX.Element;
 export default Cluster;

package/dist/containers/Cluster/Cluster.js

@@ -1,55 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from 'react';
-import { Redirect, Switch, Route, useLocation, useRouteMatch } from 'react-router';
-import { Helmet } from 'react-helmet-async';
-import cn from 'bem-cn-lite';
-import qs from 'qs';
+import React from 'react';
 import { Skeleton, Tabs } from '@gravity-ui/uikit';
+import qs from 'qs';
+import { Helmet } from 'react-helmet-async';
+import { Redirect, Route, Switch, useLocation, useRouteMatch } from 'react-router';
+import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
+import { InternalLink } from '../../components/InternalLink';
 import routes, { getLocationObjectFromHref } from '../../routes';
+import { clusterApi, updateDefaultClusterTab } from '../../store/reducers/cluster/cluster';
+import { clusterNodesApi } from '../../store/reducers/clusterNodes/clusterNodes';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { getClusterInfo, updateDefaultClusterTab } from '../../store/reducers/cluster/cluster';
-import { getClusterNodes } from '../../store/reducers/clusterNodes/clusterNodes';
+import { cn } from '../../utils/cn';
+import { CLUSTER_DEFAULT_TITLE, DEFAULT_POLLING_INTERVAL } from '../../utils/constants';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { parseNodesToVersionsValues, parseVersionsToVersionToColorMap } from '../../utils/versions';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { InternalLink } from '../../components/InternalLink';
-import { Tenants } from '../Tenants/Tenants';
-import { StorageWrapper } from '../Storage/StorageWrapper';
 import { NodesWrapper } from '../Nodes/NodesWrapper';
+import { StorageWrapper } from '../Storage/StorageWrapper';
+import { Tenants } from '../Tenants/Tenants';
 import { Versions } from '../Versions/Versions';
-import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
-import { CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
 import { ClusterInfo } from './ClusterInfo/ClusterInfo';
 import { clusterTabs, clusterTabsIds, getClusterPath, isClusterTab } from './utils';
 import './Cluster.scss';
 const b = cn('cluster');
 function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }) {
     var _a, _b;
-    const container = useRef(null);
+    const container = React.useRef(null);
     const dispatch = useTypedDispatch();
     const activeTabId = useClusterTab();
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
     });
-    const { clusterName } = queryParams;
-    const { data: cluster = {}, loading: clusterLoading, wasLoaded: clusterWasLoaded, error: clusterError, groupsStats, } = useTypedSelector((state) => state.cluster);
-    const { nodes, loading: nodesLoading, wasLoaded: nodesWasLoaded, } = useTypedSelector((state) => state.clusterNodes);
+    const { clusterName, backend } = queryParams;
+    const { data: { clusterData: cluster = {}, groupsStats } = {}, isLoading: isClusterLoading, error, } = clusterApi.useGetClusterInfoQuery(clusterName ? String(clusterName) : undefined, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+    const clusterError = error && typeof error === 'object' ? error : undefined;
+    const { data: nodes = [], isLoading: isNodesLoading } = clusterNodesApi.useGetClusterNodesQuery(undefined);
+    const infoLoading = isClusterLoading || isNodesLoading;
     const { Name } = cluster;
-    const infoLoading = (clusterLoading && !clusterWasLoaded) || (nodesLoading && !nodesWasLoaded);
-    useEffect(() => {
-        dispatch(getClusterNodes());
-    }, [dispatch]);
-    useAutofetcher(() => dispatch(getClusterInfo(clusterName ? String(clusterName) : undefined)), [dispatch, clusterName], true);
-    useEffect(() => {
+    React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('cluster', {}));
     }, [dispatch, Name]);
-    const versionToColor = useMemo(() => {
+    const versionToColor = React.useMemo(() => {
         if (additionalVersionsProps === null || additionalVersionsProps === void 0 ? void 0 : additionalVersionsProps.getVersionToColorMap) {
             return additionalVersionsProps === null || additionalVersionsProps === void 0 ? void 0 : additionalVersionsProps.getVersionToColorMap();
         }
         return parseVersionsToVersionToColorMap(cluster === null || cluster === void 0 ? void 0 : cluster.Versions);
     }, [additionalVersionsProps, cluster]);
-    const versionsValues = useMemo(() => {
+    const versionsValues = React.useMemo(() => {
         return parseNodesToVersionsValues(nodes, versionToColor);
     }, [nodes, versionToColor]);
     const getClusterTitle = () => {
@@ -60,17 +59,17 @@ function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNod
         return (_jsx(EntityStatus, { size: "m", status: cluster === null || cluster === void 0 ? void 0 : cluster.Overall, name: (_a = cluster === null || cluster === void 0 ? void 0 : cluster.Name) !== null && _a !== void 0 ? _a : CLUSTER_DEFAULT_TITLE, className: b('title') }));
     };
     const clusterTitle = (_b = (_a = cluster === null || cluster === void 0 ? void 0 : cluster.Name) !== null && _a !== void 0 ? _a : clusterName) !== null && _b !== void 0 ? _b : CLUSTER_DEFAULT_TITLE;
-    const activeTab = useMemo(() => clusterTabs.find(({ id }) => id === activeTabId), [activeTabId]);
-    return (_jsxs("div", Object.assign({ className: b(), ref: container }, { children: [_jsx(Helmet, Object.assign({ defaultTitle: `${clusterTitle} — YDB Monitoring`, titleTemplate: `%s — ${clusterTitle} — YDB Monitoring` }, { children: activeTab ? _jsx("title", { children: activeTab.title }) : null })), _jsx("div", Object.assign({ className: b('header') }, { children: getClusterTitle() })), _jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", allowNotSelected: true, activeTab: activeTabId, items: clusterTabs, wrapTo: ({ id }, node) => {
-                        const path = getClusterPath(id, queryParams);
-                        return (_jsx(InternalLink, Object.assign({ to: path, onClick: () => {
+    const activeTab = React.useMemo(() => clusterTabs.find(({ id }) => id === activeTabId), [activeTabId]);
+    return (_jsxs("div", { className: b(), ref: container, children: [_jsx(Helmet, { defaultTitle: `${clusterTitle} — YDB Monitoring`, titleTemplate: `%s — ${clusterTitle} — YDB Monitoring`, children: activeTab ? _jsx("title", { children: activeTab.title }) : null }), _jsx("div", { className: b('header'), children: getClusterTitle() }), _jsx("div", { className: b('tabs'), children: _jsx(Tabs, { size: "l", allowNotSelected: true, activeTab: activeTabId, items: clusterTabs, wrapTo: ({ id }, node) => {
+                        const path = getClusterPath(id, { clusterName, backend });
+                        return (_jsx(InternalLink, { to: path, onClick: () => {
                                 dispatch(updateDefaultClusterTab(id));
-                            } }, { children: node }), id));
-                    } }) })), _jsx("div", { children: _jsxs(Switch, { children: [_jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.overview))
-                                .pathname }, { children: _jsx(ClusterInfo, { cluster: cluster, groupsStats: groupsStats, versionsValues: versionsValues, loading: infoLoading, error: clusterError, additionalClusterProps: additionalClusterProps }) })), _jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
-                                .pathname }, { children: _jsx(Tenants, { additionalTenantsProps: additionalTenantsProps }) })), _jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname }, { children: _jsx(NodesWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }) })), _jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
-                                .pathname }, { children: _jsx(StorageWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }) })), _jsx(Route, Object.assign({ path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
-                                .pathname }, { children: _jsx(Versions, { versionToColor: versionToColor }) })), _jsx(Redirect, { to: getLocationObjectFromHref(getClusterPath(activeTabId)) })] }) })] })));
+                            }, children: node }, id));
+                    } }) }), _jsx("div", { children: _jsxs(Switch, { children: [_jsx(Route, { path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.overview))
+                                .pathname, children: _jsx(ClusterInfo, { cluster: cluster, groupsStats: groupsStats, versionsValues: versionsValues, loading: infoLoading, error: clusterError, additionalClusterProps: additionalClusterProps }) }), _jsx(Route, { path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
+                                .pathname, children: _jsx(Tenants, { additionalTenantsProps: additionalTenantsProps }) }), _jsx(Route, { path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname, children: _jsx(NodesWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }) }), _jsx(Route, { path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
+                                .pathname, children: _jsx(StorageWrapper, { parentContainer: container.current, additionalNodesProps: additionalNodesProps }) }), _jsx(Route, { path: getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
+                                .pathname, children: _jsx(Versions, { versionToColor: versionToColor }) }), _jsx(Redirect, { to: getLocationObjectFromHref(getClusterPath(activeTabId)) })] }) })] }));
 }
 function useClusterTab() {
     const dispatch = useTypedDispatch();
@@ -84,7 +83,7 @@ function useClusterTab() {
     else {
         activeTab = defaultTab;
     }
-    useEffect(() => {
+    React.useEffect(() => {
         if (activeTab !== defaultTab) {
             dispatch(updateDefaultClusterTab(activeTab));
         }

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.d.ts

@@ -1,8 +1,8 @@
-import type { IResponseError } from '../../../types/api/error';
+import type { ClusterGroupsStats } from '../../../store/reducers/cluster/types';
 import type { AdditionalClusterProps } from '../../../types/additionalProps';
-import type { VersionValue } from '../../../types/versions';
 import type { TClusterInfo } from '../../../types/api/cluster';
-import type { ClusterGroupsStats } from '../../../store/reducers/cluster/types';
+import type { IResponseError } from '../../../types/api/error';
+import type { VersionValue } from '../../../types/versions';
 import './ClusterInfo.scss';
 interface ClusterInfoProps {
     cluster?: TClusterInfo;
@@ -12,5 +12,5 @@ interface ClusterInfoProps {
     error?: IResponseError;
     additionalClusterProps?: AdditionalClusterProps;
 }
-export declare const ClusterInfo: ({ cluster, versionsValues, groupsStats, loading, error, additionalClusterProps, }: ClusterInfoProps) => JSX.Element;
+export declare const ClusterInfo: ({ cluster, versionsValues, groupsStats, loading, error, additionalClusterProps, }: ClusterInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.js

@@ -1,23 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
-import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
-import InfoViewer from '../../../components/InfoViewer/InfoViewer';
-import { Tags } from '../../../components/Tags';
-import { Tablet } from '../../../components/Tablet';
-import { ResponseError } from '../../../components/Errors/ResponseError';
-import { LinkWithIcon } from '../../../components/LinkWithIcon/LinkWithIcon';
 import { ContentWithPopup } from '../../../components/ContentWithPopup/ContentWithPopup';
+import { ResponseError } from '../../../components/Errors/ResponseError';
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import { InfoViewerSkeleton } from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { LinkWithIcon } from '../../../components/LinkWithIcon/LinkWithIcon';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { Tablet } from '../../../components/Tablet';
+import { Tags } from '../../../components/Tags';
 import { backend, customBackend } from '../../../store';
-import { formatStorageValues } from '../../../utils/dataFormatters/dataFormatters';
-import { useTypedSelector } from '../../../utils/hooks';
 import { formatBytes, getSizeWithSignificantDigits } from '../../../utils/bytesParsers';
+import { cn } from '../../../utils/cn';
 import { DEVELOPER_UI_TITLE } from '../../../utils/constants';
+import { formatStorageValues } from '../../../utils/dataFormatters/dataFormatters';
+import { useTypedSelector } from '../../../utils/hooks';
 import { VersionsBar } from '../VersionsBar/VersionsBar';
 import i18n from '../i18n';
 import { compareTablets } from './utils';
 import './ClusterInfo.scss';
-const b = block('cluster-info');
+const b = cn('cluster-info');
 const GroupsStatsPopupContent = ({ stats }) => {
     const { diskType, erasure, allocatedSize, availableSize } = stats;
     const sizeToConvert = getSizeWithSignificantDigits(Math.max(allocatedSize, availableSize), 2);
@@ -49,7 +49,7 @@ const GroupsStatsPopupContent = ({ stats }) => {
     return (_jsx(InfoViewer, { dots: true, info: info, className: b('groups-stats-popup-content'), size: "s" }));
 };
 const DiskGroupsStatsBars = ({ stats }) => {
-    return (_jsx("div", Object.assign({ className: b('storage-groups-stats') }, { children: Object.values(stats).map((erasureStats) => (_jsx(ContentWithPopup, Object.assign({ placement: ['right'], content: _jsx(GroupsStatsPopupContent, { stats: erasureStats }) }, { children: _jsx(ProgressViewer, { className: b('groups-stats-bar'), value: erasureStats.createdGroups, capacity: erasureStats.totalGroups }) }), erasureStats.erasure))) })));
+    return (_jsx("div", { className: b('storage-groups-stats'), children: Object.values(stats).map((erasureStats) => (_jsx(ContentWithPopup, { placement: ['right'], content: _jsx(GroupsStatsPopupContent, { stats: erasureStats }), children: _jsx(ProgressViewer, { className: b('groups-stats-bar'), value: erasureStats.createdGroups, capacity: erasureStats.totalGroups }) }, erasureStats.erasure))) }));
 };
 const getGroupsStatsFields = (groupsStats) => {
     return Object.keys(groupsStats).map((diskType) => {
@@ -68,9 +68,10 @@ const getInfo = (cluster, versionsValues, groupsStats, additionalInfo, links) =>
         });
     }
     if (cluster.SystemTablets) {
+        const tablets = cluster.SystemTablets.slice(0).sort(compareTablets);
         info.push({
             label: i18n('tablets'),
-            value: (_jsx("div", Object.assign({ className: b('system-tablets') }, { children: cluster.SystemTablets.sort(compareTablets).map((tablet, tabletIndex) => (_jsx(Tablet, { tablet: tablet }, tabletIndex))) }))),
+            value: (_jsx("div", { className: b('system-tablets'), children: tablets.map((tablet, tabletIndex) => (_jsx(Tablet, { tablet: tablet }, tabletIndex))) })),
         });
     }
     if (cluster.Tenants) {
@@ -94,7 +95,7 @@ const getInfo = (cluster, versionsValues, groupsStats, additionalInfo, links) =>
     }
     info.push(...additionalInfo, {
         label: i18n('links'),
-        value: (_jsx("div", Object.assign({ className: b('links') }, { children: links.map(({ title, url }) => (_jsx(LinkWithIcon, { title: title, url: url }, title))) }))),
+        value: (_jsx("div", { className: b('links'), children: links.map(({ title, url }) => (_jsx(LinkWithIcon, { title: title, url: url }, title))) })),
     }, {
         label: i18n('versions'),
         value: _jsx(VersionsBar, { versionsValues: versionsValues }),
@@ -117,9 +118,9 @@ export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {
             return _jsx(InfoViewerSkeleton, { className: b('skeleton'), rows: 9 });
         }
         if (error) {
-            _jsx(ResponseError, { error: error, className: b('error') });
+            return _jsx(ResponseError, { error: error, className: b('error') });
         }
         return _jsx(InfoViewer, { dots: true, info: clusterInfo });
     };
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsx("div", Object.assign({ className: b('info') }, { children: getContent() })) })));
+    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('info'), children: getContent() }) }));
 };

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

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

package/dist/containers/Cluster/ClusterInfo/utils.d.ts

@@ -1,2 +1,2 @@
-import { TTabletStateInfo } from '../../../types/api/tablet';
+import type { TTabletStateInfo } from '../../../types/api/tablet';
 export declare const compareTablets: (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => 0 | 1 | -1;

package/dist/containers/Cluster/VersionsBar/VersionsBar.d.ts

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

package/dist/containers/Cluster/VersionsBar/VersionsBar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
 import { Progress } from '@gravity-ui/uikit';
+import { cn } from '../../../utils/cn';
 import './VersionsBar.scss';
-const b = block('ydb-cluster-versions-bar');
+const b = cn('ydb-cluster-versions-bar');
 export const VersionsBar = ({ versionsValues = [] }) => {
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Progress, { value: 100, stack: versionsValues, size: "s" }), _jsx("div", Object.assign({ className: b('versions') }, { children: versionsValues.map((item, index) => (_jsx("div", Object.assign({ className: b('version-title'), style: { color: item.color }, title: item.version }, { children: `${item.version}${index === versionsValues.length - 1 ? '' : ','}` }), item.version))) }))] })));
+    return (_jsxs("div", { className: b(), children: [_jsx(Progress, { value: 100, stack: versionsValues, size: "s" }), _jsx("div", { className: b('versions'), children: versionsValues.map((item, index) => (_jsx("div", { className: b('version-title'), style: { color: item.color }, title: item.version, children: `${item.version}${index === versionsValues.length - 1 ? '' : ','}` }, item.version))) })] }));
 };

package/dist/containers/Cluster/VersionsBar/VersionsBar.scss

@@ -4,7 +4,7 @@
 
     width: 600px;
 
-    & .yc-progress {
+    & .g-progress {
         width: 100%;
     }
 
@@ -21,7 +21,7 @@
         white-space: nowrap;
     }
 
-    & .yc-progress__stack {
+    & .g-progress__stack {
         cursor: pointer;
     }
 }

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

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "nodes" | "tablets" | "versions" | "links" | "load" | "disk-type" | "erasure" | "allocated" | "available" | "usage" | "dc" | "databases" | "storage-size" | "storage-groups", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Cluster/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../utils/i18n';
+import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-cluster';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/ClusterModeGuard/ClusterModeGuard.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import React from 'react';
 export interface ClusterModeGuardProps {
-    children: ReactNode;
+    children: React.ReactNode;
     mode: 'single' | 'multi';
 }
-export declare function ClusterModeGuard({ children, mode }: ClusterModeGuardProps): JSX.Element | null;
+export declare function ClusterModeGuard({ children, mode }: ClusterModeGuardProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/containers/ClusterModeGuard/ClusterModeGuard.js

@@ -1,6 +1,7 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { useTypedSelector } from '../../lib';
 export function ClusterModeGuard({ children, mode }) {
     const shouldRender = useTypedSelector((state) => mode === 'single' ? state.singleClusterMode : !state.singleClusterMode);
-    return shouldRender ? _jsx(_Fragment, { children: children }) : null;
+    return shouldRender ? _jsx(React.Fragment, { children: children }) : null;
 }

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import './Clusters.scss';
-export declare function Clusters(): JSX.Element;
+export declare function Clusters(): import("react/jsx-runtime").JSX.Element;

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,
-                        } }) })) }))] })));
+                        } }) }) })] }));
 }