ydb-embedded-ui 6.7.0 → 6.9.0

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

@@ -0,0 +1,16 @@
+export interface SlotComponent<Props = {}, Type = never> extends React.FC<Props & {
+    ref?: React.Ref<Type>;
+}> {
+}
+export interface SlotItem<Props = {}, Type = unknown> {
+    name: string;
+    props: Props;
+    ref?: React.Ref<Type>;
+    rendered: ExtractChildrenType<Props>;
+}
+type ExtractChildrenType<Props> = Props extends {
+    children: infer Children;
+} ? Children : Props extends {
+    children?: infer Children;
+} ? Children | undefined : never;
+export {};

package/dist/containers/App/App.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { Store } from '@reduxjs/toolkit';
+import type { History } from 'history';
+import type { YDBEmbeddedUISettings } from '../UserSettings/settings';
+import './App.scss';
+export interface AppProps {
+    store: Store;
+    history: History;
+    singleClusterMode: boolean;
+    userSettings?: YDBEmbeddedUISettings;
+    children?: React.ReactNode;
+}
+declare function App({ store, history, singleClusterMode, children, userSettings }: AppProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react-redux").ConnectedComponent<typeof App, {
+    history: History;
+    userSettings?: YDBEmbeddedUISettings;
+    store: Store;
+    children?: React.ReactNode;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null>;
+}>;
+export default _default;

package/dist/containers/App/Content.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './App.scss';
+interface ContentProps {
+    singleClusterMode: boolean;
+    children: React.ReactNode;
+}
+export declare function Content(props: ContentProps): import("react/jsx-runtime").JSX.Element;
+interface ContentWrapperProps {
+    singleClusterMode: boolean;
+    isAuthenticated: boolean;
+    children: React.ReactNode;
+}
+declare function ContentWrapper(props: ContentWrapperProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react-redux").ConnectedComponent<typeof ContentWrapper, {
+    children: React.ReactNode;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null>;
+    store?: import("redux").Store;
+}>;
+export default _default;

package/dist/containers/App/Content.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { connect, shallowEqual } from 'react-redux';
+import { Redirect, Route, Switch } from 'react-router-dom';
+import { useSlots } from '../../components/slots';
+import routes from '../../routes';
+import { getUser } from '../../store/reducers/authentication/authentication';
+import { nodesListApi } from '../../store/reducers/nodesList';
+import { cn } from '../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { lazyComponent } from '../../utils/lazyComponent';
+import Authentication from '../Authentication/Authentication';
+import { getClusterPath } from '../Cluster/utils';
+import Header from '../Header/Header';
+import { ClusterSlot, ClustersSlot, NodeSlot, PDiskPageSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, VDiskPageSlot, } from './appSlots';
+import i18n from './i18n';
+import './App.scss';
+const b = cn('app');
+const routesSlots = [
+    {
+        path: routes.cluster,
+        slot: ClusterSlot,
+        component: lazyComponent(() => import('../Cluster/Cluster'), 'Cluster'),
+    },
+    {
+        path: routes.tenant,
+        slot: TenantSlot,
+        component: lazyComponent(() => import('../Tenant/Tenant'), 'Tenant'),
+    },
+    {
+        path: routes.node,
+        slot: NodeSlot,
+        component: lazyComponent(() => import('../Node/Node'), 'Node'),
+    },
+    {
+        path: routes.pDisk,
+        slot: PDiskPageSlot,
+        component: lazyComponent(() => import('../PDiskPage/PDiskPage'), 'PDiskPage'),
+    },
+    {
+        path: routes.vDisk,
+        slot: VDiskPageSlot,
+        component: lazyComponent(() => import('../VDiskPage/VDiskPage'), 'VDiskPage'),
+    },
+    {
+        path: routes.tablet,
+        slot: TabletSlot,
+        component: lazyComponent(() => import('../Tablet'), 'Tablet'),
+    },
+    {
+        path: routes.tabletsFilters,
+        slot: TabletsFiltersSlot,
+        component: lazyComponent(() => import('../TabletsFilters/TabletsFilters'), 'TabletsFilters'),
+    },
+];
+const Clusters = lazyComponent(() => import('../Clusters/Clusters'), 'Clusters');
+function renderRouteSlot(slots, route) {
+    return (_jsx(Route, { path: route.path, exact: route.exact, render: (props) => {
+            const slot = slots.get(route.slot);
+            let content;
+            if (!slot) {
+                const Component = route.component;
+                content = _jsx(Component, { ...props });
+            }
+            else if (typeof slot.rendered === 'function') {
+                content = slot.rendered({ component: route.component, ...props });
+            }
+            else {
+                content = slot.rendered;
+            }
+            return _jsx("main", { className: b('main'), children: content });
+        } }, route.path));
+}
+export function Content(props) {
+    var _a;
+    const { singleClusterMode } = props;
+    const slots = useSlots(props);
+    const additionalRoutes = slots.get(RoutesSlot);
+    const redirect = slots.get(RedirectSlot);
+    const redirectProps = (_a = redirect === null || redirect === void 0 ? void 0 : redirect.props) !== null && _a !== void 0 ? _a : (singleClusterMode ? { to: getClusterPath() } : { to: routes.clusters });
+    let mainPage;
+    if (!singleClusterMode) {
+        mainPage = { text: i18n('pages.clusters'), link: routes.clusters };
+    }
+    return (_jsxs(Switch, { children: [singleClusterMode
+                ? null
+                : renderRouteSlot(slots, {
+                    path: routes.clusters,
+                    exact: true,
+                    component: Clusters,
+                    slot: ClustersSlot,
+                }), additionalRoutes === null || additionalRoutes === void 0 ? void 0 : additionalRoutes.rendered, _jsxs(Route, { children: [_jsx(GetUser, {}), _jsx(GetNodesList, {}), _jsx(Header, { mainPage: mainPage }), _jsxs(Switch, { children: [routesSlots.map((route) => {
+                                return renderRouteSlot(slots, route);
+                            }), _jsx(Route, { path: redirectProps.from || redirectProps.path, exact: redirectProps.exact, strict: redirectProps.strict, render: () => _jsx(Redirect, { to: redirectProps.to, push: redirectProps.push }) })] })] }, "single-cluster")] }));
+}
+function GetUser() {
+    const dispatch = useTypedDispatch();
+    const { isAuthenticated, isInternalUser } = useTypedSelector((state) => ({
+        isAuthenticated: state.authentication.isAuthenticated,
+        isInternalUser: Boolean(state.authentication.user),
+    }), shallowEqual);
+    React.useEffect(() => {
+        if (isAuthenticated && !isInternalUser) {
+            dispatch(getUser());
+        }
+    }, [dispatch, isAuthenticated, isInternalUser]);
+    return null;
+}
+function GetNodesList() {
+    nodesListApi.useGetNodesListQuery(undefined);
+    return null;
+}
+function ContentWrapper(props) {
+    const { singleClusterMode, isAuthenticated } = props;
+    return (_jsxs(Switch, { children: [_jsx(Route, { path: routes.auth, children: _jsx(Authentication, { closable: true }) }), _jsx(Route, { children: _jsx("div", { className: b({ embedded: singleClusterMode }), children: isAuthenticated ? props.children : _jsx(Authentication, {}) }) })] }));
+}
+function mapStateToProps(state) {
+    return {
+        isAuthenticated: state.authentication.isAuthenticated,
+        singleClusterMode: state.singleClusterMode,
+    };
+}
+export default connect(mapStateToProps)(ContentWrapper);

package/dist/containers/App/Providers.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider } from '@gravity-ui/uikit';
+import { HelmetProvider } from 'react-helmet-async';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { ComponentsProvider } from '../../components/ComponentsProvider/ComponentsProvider';
+import { componentsRegistry as defaultComponentsRegistry } from '../../components/ComponentsProvider/componentsRegistry';
+import { THEME_KEY } from '../../utils/constants';
+import { useSetting } from '../../utils/hooks';
+export function Providers({ store, history, componentsRegistry = defaultComponentsRegistry, children, }) {
+    return (_jsx(HelmetProvider, { children: _jsx(Provider, { store: store, children: _jsx(Router, { history: history, children: _jsx(QueryParamProvider, { adapter: ReactRouter5Adapter, children: _jsx(Theme, { children: _jsx(ComponentsProvider, { registry: componentsRegistry, children: children }) }) }) }) }) }));
+}
+function Theme({ children }) {
+    const [theme] = useSetting(THEME_KEY);
+    return _jsx(ThemeProvider, { theme: theme, children: children });
+}

package/dist/containers/App/appSlots.d.ts

@@ -0,0 +1,53 @@
+import type { RedirectProps, RouteComponentProps } from 'react-router-dom';
+import type { Cluster } from '../Cluster/Cluster';
+import type { Clusters } from '../Clusters/Clusters';
+import type { Node } from '../Node/Node';
+import type { PDiskPage } from '../PDiskPage/PDiskPage';
+import type { Tablet } from '../Tablet';
+import type { TabletsFilters } from '../TabletsFilters/TabletsFilters';
+import type { Tenant } from '../Tenant/Tenant';
+import type { VDiskPage } from '../VDiskPage/VDiskPage';
+export declare const ClustersSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode | ((props: {
+        component: typeof Clusters;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const ClusterSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode | ((props: {
+        component: typeof Cluster;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const TenantSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode | ((props: {
+        component: typeof Tenant;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const NodeSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode | ((props: {
+        component: typeof Node;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const PDiskPageSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode | ((props: {
+        component: typeof PDiskPage;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const VDiskPageSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode | ((props: {
+        component: typeof VDiskPage;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const TabletSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode | ((props: {
+        component: typeof Tablet;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const TabletsFiltersSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode | ((props: {
+        component: typeof TabletsFilters;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const RoutesSlot: import("../../components/slots/types").SlotComponent<{
+    children: React.ReactNode;
+}, never>;
+export declare const RedirectSlot: import("../../components/slots/types").SlotComponent<RedirectProps, never>;

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "pages.clusters", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/AppWithClusters/AppWithClusters.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { USE_CLUSTER_BALANCER_AS_BACKEND_KEY } from '../../utils/constants';
+import { getMonitoringClusterLink as getMonitoringClusterLinkDefault, getMonitoringLink as getMonitoringLinkDefault, } from '../../utils/monitoring';
+import { App, AppSlots } from '../App';
+import { settings } from '../UserSettings/settings';
+import { ExtendedCluster } from './ExtendedCluster/ExtendedCluster';
+import { ExtendedNode } from './ExtendedNode/ExtendedNode';
+import { ExtendedTenant } from './ExtendedTenant/ExtendedTenant';
+import i18n from './i18n';
+const defaultUserSettings = settings;
+defaultUserSettings[2].sections[0].settings.push({
+    title: i18n('settings.useClusterBalancerAsBackend.title'),
+    description: i18n('settings.useClusterBalancerAsBackend.popover'),
+    settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
+});
+export function AppWithClusters({ store, history, getMonitoringLink = getMonitoringLinkDefault, getMonitoringClusterLink = getMonitoringClusterLinkDefault, userSettings = defaultUserSettings, children, }) {
+    return (_jsxs(App, { store: store, history: history, userSettings: userSettings, children: [_jsx(AppSlots.ClusterSlot, { children: ({ component }) => {
+                    return (_jsx(ExtendedCluster, { component: component, getMonitoringLink: getMonitoringLink, getMonitoringClusterLink: getMonitoringClusterLink }));
+                } }), _jsx(AppSlots.NodeSlot, { children: ({ component }) => {
+                    return _jsx(ExtendedNode, { component: component });
+                } }), _jsx(AppSlots.TenantSlot, { children: ({ component }) => {
+                    return (_jsx(ExtendedTenant, { component: component, getMonitoringLink: getMonitoringLink }));
+                } }), children] }));
+}

package/dist/containers/AppWithClusters/ExtendedCluster/ExtendedCluster.d.ts

@@ -0,0 +1,10 @@
+import type { GetMonitoringClusterLink, GetMonitoringLink } from '../../../utils/monitoring';
+import type { Cluster } from '../../Cluster/Cluster';
+import './ExtendedCluster.scss';
+interface ExtendedClusterProps {
+    component: typeof Cluster;
+    getMonitoringLink?: GetMonitoringLink;
+    getMonitoringClusterLink?: GetMonitoringClusterLink;
+}
+export declare function ExtendedCluster({ component: ClusterComponent, getMonitoringLink, getMonitoringClusterLink, }: ExtendedClusterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/AppWithClusters/ExtendedNode/ExtendedNode.d.ts

@@ -0,0 +1,4 @@
+import type { Node } from '../../Node/Node';
+export declare function ExtendedNode({ component: NodeComponent }: {
+    component: typeof Node;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/containers/AppWithClusters/ExtendedTenant/ExtendedTenant.d.ts

@@ -0,0 +1,7 @@
+import type { GetMonitoringLink } from '../../../utils/monitoring';
+import type { Tenant } from '../../Tenant/Tenant';
+export interface ExtendedTenantProps {
+    component: typeof Tenant;
+    getMonitoringLink?: GetMonitoringLink;
+}
+export declare function ExtendedTenant({ component: TenantComponent, getMonitoringLink, }: ExtendedTenantProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "settings.useClusterBalancerAsBackend.title" | "settings.useClusterBalancerAsBackend.popover", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/AppWithClusters/useClusterData.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { parseQuery } from '../../routes';
+import { clustersApi } from '../../store/reducers/clusters/clusters';
+import { getAdditionalNodesProps } from '../../utils/additionalProps';
+import { USE_CLUSTER_BALANCER_AS_BACKEND_KEY } from '../../utils/constants';
+import { useSetting } from '../../utils/hooks';
+export function useClusterData() {
+    const location = useLocation();
+    const { clusterName } = parseQuery(location);
+    const { data } = clustersApi.useGetClustersListQuery(undefined);
+    const info = React.useMemo(() => {
+        const clusters = data || [];
+        return clusters.find((cluster) => cluster.name === clusterName);
+    }, [data, clusterName]);
+    const { solomon: monitoring, balancer, versions, cluster } = info || {};
+    const [useClusterBalancerAsBackend] = useSetting(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
+    const additionalNodesProps = getAdditionalNodesProps(balancer, useClusterBalancerAsBackend);
+    return {
+        monitoring,
+        balancer,
+        versions,
+        cluster,
+        useClusterBalancerAsBackend,
+        additionalNodesProps,
+    };
+}

package/dist/containers/AsideNavigation/Navigation.d.ts

@@ -0,0 +1,7 @@
+import type { YDBEmbeddedUISettings } from '../UserSettings/settings';
+interface NavigationProps {
+    userSettings?: YDBEmbeddedUISettings;
+    children: React.ReactNode;
+}
+export declare function Navigation({ children, userSettings }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightFromSquare, ArrowRightToSquare } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { useHistory } from 'react-router-dom';
+import routes, { createHref } from '../../../routes';
+import { logout } from '../../../store/reducers/authentication/authentication';
+import { cn } from '../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
+import i18n from '../i18n';
+import './YdbInternalUser.scss';
+const b = cn('kv-ydb-internal-user');
+export function YdbInternalUser() {
+    const { user: ydbUser } = useTypedSelector((state) => state.authentication);
+    const history = useHistory();
+    const handleLoginClick = () => {
+        history.push(createHref(routes.auth, undefined, { returnUrl: encodeURIComponent(location.href) }));
+    };
+    const dispatch = useTypedDispatch();
+    const handleLogout = () => {
+        dispatch(logout);
+    };
+    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: ArrowRightFromSquare }) })) : (_jsx(Button, { view: "flat-secondary", title: i18n('account.login'), onClick: handleLoginClick, children: _jsx(Icon, { data: ArrowRightToSquare }) }))] }));
+}

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

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

package/dist/containers/Authentication/Authentication.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Eye, EyeSlash, Xmark } from '@gravity-ui/icons';
+import { Button, Link as ExternalLink, Icon, TextInput } from '@gravity-ui/uikit';
+import { useHistory, useLocation } from 'react-router-dom';
+import { parseQuery } from '../../routes';
+import { authenticate } from '../../store/reducers/authentication/authentication';
+import { cn } from '../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import ydbLogoIcon from '../../assets/icons/ydb.svg';
+import './Authentication.scss';
+const b = cn('authentication');
+function Authentication({ closable = false }) {
+    const dispatch = useTypedDispatch();
+    const history = useHistory();
+    const location = useLocation();
+    const { returnUrl } = parseQuery(location);
+    const { error } = useTypedSelector((state) => state.authentication);
+    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);
+        }
+        if ((_d = (_c = error === null || error === void 0 ? void 0 : error.data) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.includes('password')) {
+            setPasswordError(error.data.error);
+        }
+    }, [error]);
+    const onLoginUpdate = (value) => {
+        setLogin(value);
+        setLoginError('');
+    };
+    const onPassUpdate = (value) => {
+        setPass(value);
+        setPasswordError('');
+    };
+    const onLoginClick = () => {
+        dispatch(authenticate(login, pass)).then(() => {
+            if (returnUrl) {
+                const decodedUrl = decodeURIComponent(returnUrl.toString());
+                // to prevent page reload we use router history
+                // history navigates relative to origin
+                // so we remove origin to make it work properly
+                const url = new URL(decodedUrl);
+                const path = url.pathname + url.search;
+                history.replace(path);
+            }
+        });
+    };
+    const onEnterClick = (e) => {
+        if (e.keyCode === 13) {
+            onLoginClick();
+        }
+    };
+    const onClose = () => {
+        history.go(-1);
+    };
+    const onTogglePasswordVisibility = () => {
+        setShowPassword((prev) => !prev);
+    };
+    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 ? EyeSlash : Eye, 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: Xmark, size: 24 }) }))] }));
+}
+export default Authentication;

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

@@ -0,0 +1,10 @@
+import type { AdditionalClusterProps, AdditionalNodesProps, AdditionalTenantsProps, AdditionalVersionsProps } from '../../types/additionalProps';
+import './Cluster.scss';
+interface ClusterProps {
+    additionalTenantsProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
+    additionalClusterProps?: AdditionalClusterProps;
+    additionalVersionsProps?: AdditionalVersionsProps;
+}
+export declare function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }: ClusterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Cluster/Cluster.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Skeleton, Tabs } from '@gravity-ui/uikit';
+import { Helmet } from 'react-helmet-async';
+import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
+import { StringParam, useQueryParams } from 'use-query-params';
+import { AutoRefreshControl } from '../../components/AutoRefreshControl/AutoRefreshControl';
+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 { cn } from '../../utils/cn';
+import { CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { parseNodesToVersionsValues, parseVersionsToVersionToColorMap } from '../../utils/versions';
+import { NodesWrapper } from '../Nodes/NodesWrapper';
+import { StorageWrapper } from '../Storage/StorageWrapper';
+import { Tenants } from '../Tenants/Tenants';
+import { Versions } from '../Versions/Versions';
+import { ClusterInfo } from './ClusterInfo/ClusterInfo';
+import { clusterTabs, clusterTabsIds, getClusterPath, isClusterTab } from './utils';
+import './Cluster.scss';
+const b = cn('cluster');
+export function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }) {
+    var _a, _b;
+    const container = React.useRef(null);
+    const dispatch = useTypedDispatch();
+    const activeTabId = useClusterTab();
+    const [{ clusterName, backend }] = useQueryParams({
+        clusterName: StringParam,
+        backend: StringParam,
+    });
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { data: { clusterData: cluster = {}, groupsStats } = {}, isLoading: isClusterLoading, error, } = clusterApi.useGetClusterInfoQuery(clusterName !== null && clusterName !== void 0 ? clusterName : undefined, {
+        pollingInterval: autoRefreshInterval,
+    });
+    const clusterError = error && typeof error === 'object' ? error : undefined;
+    const { data: nodes = [], isLoading: isNodesLoading } = clusterNodesApi.useGetClusterNodesQuery(undefined);
+    const infoLoading = isClusterLoading || isNodesLoading;
+    const { Name } = cluster;
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('cluster', {}));
+    }, [dispatch, Name]);
+    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 = React.useMemo(() => {
+        return parseNodesToVersionsValues(nodes, versionToColor);
+    }, [nodes, versionToColor]);
+    const getClusterTitle = () => {
+        var _a;
+        if (infoLoading) {
+            return _jsx(Skeleton, { className: b('title-skeleton') });
+        }
+        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 = 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() }), _jsxs("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(AutoRefreshControl, {})] }), _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(Route, { render: () => (_jsx(Redirect, { to: getLocationObjectFromHref(getClusterPath(activeTabId)) })) })] }) })] }));
+}
+function useClusterTab() {
+    const dispatch = useTypedDispatch();
+    const defaultTab = useTypedSelector((state) => state.cluster.defaultClusterTab);
+    const match = useRouteMatch(routes.cluster);
+    const { activeTab: activeTabFromParams } = (match === null || match === void 0 ? void 0 : match.params) || {};
+    let activeTab;
+    if (isClusterTab(activeTabFromParams)) {
+        activeTab = activeTabFromParams;
+    }
+    else {
+        activeTab = defaultTab;
+    }
+    React.useEffect(() => {
+        if (activeTab !== defaultTab) {
+            dispatch(updateDefaultClusterTab(activeTab));
+        }
+    }, [activeTab, defaultTab, dispatch]);
+    return activeTab;
+}

package/dist/containers/Cluster/Cluster.scss

@@ -0,0 +1,42 @@
+@import '../../styles/mixins.scss';
+
+.cluster {
+    overflow: auto;
+    flex-grow: 1;
+
+    height: 100%;
+    padding: 0 20px;
+
+    @include flex-container();
+
+    &__header {
+        position: sticky;
+        left: 0;
+
+        padding: 20px 0;
+    }
+
+    &__title {
+        font-weight: var(--g-text-header-font-weight);
+        @include header-1-typography();
+    }
+
+    &__title-skeleton {
+        width: 20%;
+        min-width: 200px;
+        height: var(--g-text-header-1-line-height);
+    }
+
+    &__tabs {
+        --g-tabs-border-width: 0;
+
+        position: sticky;
+        left: 0;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
+    }
+}

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

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