ydb-embedded-ui 4.33.0 → 5.1.0

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

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

package/dist/containers/UserSettings/i18n/ru.json

@@ -1,27 +1,20 @@
 {
-  "page.general": "Общие",
-  "section.appearance": "Внешний вид",
-
-  "page.experiments": "Эксперименты",
-  "section.experiments": "Эксперименты",
-
-  "settings.theme.title": "Тема",
-  "settings.theme.option-dark": "Тёмная",
-  "settings.theme.option-light": "Светлая",
-  "settings.theme.option-system": "Системная",
-
-  "settings.language.title": "Язык интерфейса",
-  "settings.language.option-russian": "Русский",
-  "settings.language.option-english": "English",
-
-  "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
-
-  "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
-  "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на некоторых версиях",
-
-  "settings.useVirtualTables.title": "Использовать таблицу с загрузкой данных по скроллу для вкладок Nodes и Storage",
-  "settings.useVirtualTables.popover": "Это улучшит производительность, но может работать нестабильно",
-
-  "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
-  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"
+    "page.general": "Общие",
+    "section.appearance": "Внешний вид",
+    "page.experiments": "Эксперименты",
+    "section.experiments": "Эксперименты",
+    "settings.theme.title": "Тема",
+    "settings.theme.option-dark": "Тёмная",
+    "settings.theme.option-light": "Светлая",
+    "settings.theme.option-system": "Системная",
+    "settings.language.title": "Язык интерфейса",
+    "settings.language.option-russian": "Русский",
+    "settings.language.option-english": "English",
+    "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
+    "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
+    "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на некоторых версиях",
+    "settings.useVirtualTables.title": "Использовать таблицу с загрузкой данных по скроллу для вкладок Nodes и Storage",
+    "settings.useVirtualTables.popover": "Это улучшит производительность, но может работать нестабильно",
+    "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
+    "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"
 }

package/dist/containers/UserSettings/settings.d.ts

@@ -0,0 +1,25 @@
+import type { IconProps } from '@gravity-ui/uikit';
+import type { SettingProps } from './Setting';
+export interface SettingsSection {
+    id: string;
+    title: string;
+    settings: SettingProps[];
+}
+export interface SettingsPage {
+    id: string;
+    title: string;
+    icon: IconProps;
+    sections: SettingsSection[];
+}
+export declare type YDBEmbeddedUISettings = SettingsPage[];
+export declare const themeSetting: SettingProps;
+export declare const languageSetting: SettingProps;
+export declare const invertedDisksSetting: SettingProps;
+export declare const useNodesEndpointSetting: SettingProps;
+export declare const useVirtualTables: SettingProps;
+export declare const queryUseMultiSchemaSetting: SettingProps;
+export declare const appearanceSection: SettingsSection;
+export declare const experimentsSection: SettingsSection;
+export declare const generalPage: SettingsPage;
+export declare const experimentsPage: SettingsPage;
+export declare const settings: YDBEmbeddedUISettings;

package/dist/containers/UserSettings/settings.js

@@ -0,0 +1,87 @@
+import favoriteFilledIcon from '../../assets/icons/star.svg';
+import flaskIcon from '../../assets/icons/flask.svg';
+import { INVERTED_DISKS_KEY, LANGUAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, QUERY_USE_MULTI_SCHEMA_KEY, } from '../../utils/constants';
+import { Lang, defaultLang } from '../../utils/i18n';
+import i18n from './i18n';
+const themeOptions = [
+    {
+        value: 'system',
+        content: i18n('settings.theme.option-system'),
+    },
+    {
+        value: 'light',
+        content: i18n('settings.theme.option-light'),
+    },
+    {
+        value: 'dark',
+        content: i18n('settings.theme.option-dark'),
+    },
+];
+export const themeSetting = {
+    settingKey: THEME_KEY,
+    title: i18n('settings.theme.title'),
+    type: 'radio',
+    options: themeOptions,
+};
+const languageOptions = [
+    {
+        value: Lang.Ru,
+        content: i18n('settings.language.option-russian'),
+    },
+    {
+        value: Lang.En,
+        content: i18n('settings.language.option-english'),
+    },
+];
+export const languageSetting = {
+    settingKey: LANGUAGE_KEY,
+    title: i18n('settings.language.title'),
+    type: 'radio',
+    options: languageOptions,
+    defaultValue: defaultLang,
+    onValueUpdate: () => {
+        window.location.reload();
+    },
+};
+export const invertedDisksSetting = {
+    settingKey: INVERTED_DISKS_KEY,
+    title: i18n('settings.invertedDisks.title'),
+};
+export const useNodesEndpointSetting = {
+    settingKey: USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+    title: i18n('settings.useNodesEndpoint.title'),
+    helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
+};
+export const useVirtualTables = {
+    settingKey: USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+    title: i18n('settings.useVirtualTables.title'),
+    helpPopoverContent: i18n('settings.useVirtualTables.popover'),
+};
+export const queryUseMultiSchemaSetting = {
+    settingKey: QUERY_USE_MULTI_SCHEMA_KEY,
+    title: i18n('settings.queryUseMultiSchema.title'),
+    helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
+};
+export const appearanceSection = {
+    id: 'appearanceSection',
+    title: i18n('section.appearance'),
+    settings: [themeSetting, invertedDisksSetting],
+};
+export const experimentsSection = {
+    id: 'experimentsSection',
+    title: i18n('section.experiments'),
+    settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
+};
+export const generalPage = {
+    id: 'generalPage',
+    title: i18n('page.general'),
+    icon: { data: favoriteFilledIcon, height: 14, width: 14 },
+    sections: [appearanceSection],
+};
+export const experimentsPage = {
+    id: 'experimentsPage',
+    title: i18n('page.experiments'),
+    icon: { data: flaskIcon },
+    sections: [experimentsSection],
+};
+export const settings = [generalPage, experimentsPage];

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.d.ts

@@ -0,0 +1,25 @@
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+import type { VersionValue } from '../../../types/versions';
+import type { GroupedNodesItem } from '../types';
+import './GroupedNodesTree.scss';
+export declare const b: {
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string, mixin?: string | string[] | undefined): string;
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
+    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string): string;
+    (mods: import("bem-cn-lite").Modifications | null): string;
+    (): string;
+    builder(): import("bem-cn").Block;
+};
+interface GroupedNodesTreeProps {
+    title?: string;
+    nodes?: PreparedClusterNode[];
+    items?: GroupedNodesItem[];
+    expanded?: boolean;
+    versionColor?: string;
+    versionsValues?: VersionValue[];
+    level?: number;
+}
+export declare const GroupedNodesTree: ({ title, nodes, items, expanded, versionColor, versionsValues, level, }: GroupedNodesTreeProps) => JSX.Element;
+export {};

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import cn from 'bem-cn-lite';
+import { TreeView } from 'ydb-ui-components';
+import { NodesTreeTitle } from '../NodesTreeTitle/NodesTreeTitle';
+import { NodesTable } from '../NodesTable/NodesTable';
+import './GroupedNodesTree.scss';
+export const b = cn('ydb-versions-grouped-node-tree');
+export const GroupedNodesTree = ({ title, nodes, items, expanded = false, versionColor, versionsValues, level = 0, }) => {
+    const [isOpened, toggleBlock] = useState(false);
+    useEffect(() => {
+        toggleBlock(expanded);
+    }, [expanded]);
+    const groupTitle = (_jsx(NodesTreeTitle, { title: title, nodes: nodes, items: items, versionColor: versionColor, versionsValues: versionsValues }));
+    const toggleCollapsed = () => {
+        toggleBlock((value) => !value);
+    };
+    if (items) {
+        return (_jsx("div", Object.assign({ className: b({ 'first-level': level === 0 }) }, { children: _jsx(TreeView, Object.assign({ name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed }, { children: items.map((item, index) => (_jsx(GroupedNodesTree, { title: item.title, nodes: item.nodes, expanded: expanded, versionColor: item.versionColor, level: level + 1 }, index))) }), title) })));
+    }
+    return (_jsx("div", Object.assign({ className: b({ 'first-level': level === 0 }) }, { children: _jsx(TreeView, Object.assign({ name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed }, { children: _jsx("div", Object.assign({ className: b('dt-wrapper') }, { children: _jsx(NodesTable, { nodes: nodes || [] }) })) }), title) })));
+};

package/dist/containers/Versions/NodesTable/NodesTable.d.ts

@@ -0,0 +1,6 @@
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+interface NodesTableProps {
+    nodes: PreparedClusterNode[];
+}
+export declare const NodesTable: ({ nodes }: NodesTableProps) => JSX.Element;
+export {};

package/dist/containers/Versions/NodesTable/NodesTable.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import { isUnavailableNode } from '../../../utils/nodes';
+import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
+import { formatBytes } from '../../../utils/dataFormatters/dataFormatters';
+import { getDefaultNodePath } from '../../Node/NodePages';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { PoolsGraph } from '../../../components/PoolsGraph/PoolsGraph';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+const columns = [
+    {
+        name: 'NodeId',
+        header: '#',
+        width: '80px',
+        align: DataTable.LEFT,
+        render: ({ row }) => row.NodeId,
+    },
+    {
+        name: 'Host',
+        render: ({ row }) => {
+            var _a;
+            const port = row.Endpoints && ((_a = row.Endpoints.find((item) => item.Name === 'http-mon')) === null || _a === void 0 ? void 0 : _a.Address);
+            const host = row.Host && `${row.Host}${port || ''}`;
+            const title = host || 'unknown';
+            const nodePath = !isUnavailableNode(row) && row.NodeId ? getDefaultNodePath(row.NodeId) : undefined;
+            return (_jsx(EntityStatus, { name: title, path: nodePath, hasClipboardButton: true, showStatus: false }));
+        },
+        width: '400px',
+        align: DataTable.LEFT,
+    },
+    {
+        name: 'Endpoints',
+        sortable: false,
+        render: ({ row }) => row.Endpoints
+            ? row.Endpoints.map(({ Name, Address }) => `${Name} ${Address}`).join(', ')
+            : '-',
+        width: '300px',
+        align: DataTable.LEFT,
+    },
+    {
+        name: 'uptime',
+        header: 'Uptime',
+        sortAccessor: ({ StartTime }) => StartTime && -StartTime,
+        width: '120px',
+        align: DataTable.LEFT,
+        render: ({ row }) => row.uptime,
+    },
+    {
+        name: 'MemoryUsed',
+        header: 'Memory used',
+        sortAccessor: ({ MemoryUsed = 0 }) => Number(MemoryUsed),
+        defaultOrder: DataTable.DESCENDING,
+        render: ({ row }) => (row.MemoryUsed ? formatBytes(row.MemoryUsed) : '—'),
+        width: '120px',
+        align: DataTable.RIGHT,
+    },
+    {
+        name: 'MemoryLimit',
+        header: 'Memory limit',
+        sortAccessor: ({ MemoryLimit = 0 }) => Number(MemoryLimit),
+        defaultOrder: DataTable.DESCENDING,
+        render: ({ row }) => (row.MemoryLimit ? formatBytes(row.MemoryLimit) : '—'),
+        width: '120px',
+        align: DataTable.RIGHT,
+    },
+    {
+        name: 'PoolStats',
+        header: 'Pools',
+        sortAccessor: ({ PoolStats = [] }) => PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
+        defaultOrder: DataTable.DESCENDING,
+        width: '120px',
+        render: ({ row }) => (row.PoolStats ? _jsx(PoolsGraph, { pools: row.PoolStats }) : '—'),
+        align: DataTable.LEFT,
+    },
+    {
+        name: 'LoadAverage',
+        header: 'Load average',
+        sortAccessor: ({ LoadAverage = [] }) => LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
+        defaultOrder: DataTable.DESCENDING,
+        width: '200px',
+        render: ({ row }) => row.LoadAverage && row.LoadAverage.length > 0 ? (_jsx(ProgressViewer, { value: row.LoadAverage[0], percents: true, capacity: 100, colorizeProgress: true })) : ('—'),
+        align: DataTable.LEFT,
+    },
+];
+export const NodesTable = ({ nodes }) => {
+    return (_jsx(DataTable, { theme: "yandex-cloud", data: nodes, columns: columns, settings: DEFAULT_TABLE_SETTINGS }));
+};

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.d.ts

@@ -0,0 +1,13 @@
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+import type { VersionValue } from '../../../types/versions';
+import type { GroupedNodesItem } from '../types';
+import './NodesTreeTitle.scss';
+interface NodesTreeTitleProps {
+    title?: string;
+    nodes?: PreparedClusterNode[];
+    items?: GroupedNodesItem[];
+    versionColor?: string;
+    versionsValues?: VersionValue[];
+}
+export declare const NodesTreeTitle: ({ title, nodes, items, versionColor, versionsValues, }: NodesTreeTitleProps) => JSX.Element;
+export {};

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import { ClipboardButton } from '../../../components/ClipboardButton';
+import './NodesTreeTitle.scss';
+const b = block('ydb-versions-nodes-tree-title');
+export const NodesTreeTitle = ({ title, nodes, items, versionColor, versionsValues, }) => {
+    let nodesAmount;
+    if (items) {
+        nodesAmount = items.reduce((acc, curr) => {
+            if (!curr.nodes) {
+                return acc;
+            }
+            return acc + curr.nodes.length;
+        }, 0);
+    }
+    else {
+        nodesAmount = nodes ? nodes.length : 0;
+    }
+    return (_jsxs("div", Object.assign({ className: b('overview') }, { children: [_jsxs("div", Object.assign({ className: b('overview-container') }, { children: [versionColor ? (_jsx("div", { className: b('version-color'), style: { background: versionColor } })) : null, title ? (_jsxs("span", Object.assign({ className: b('overview-title') }, { children: [title, _jsx(ClipboardButton, { text: title, size: "s", className: b('clipboard-button') })] }))) : null] })), _jsxs("div", Object.assign({ className: b('overview-info') }, { children: [_jsxs("div", { children: [_jsx("span", Object.assign({ className: b('info-value') }, { children: nodesAmount })), _jsx("span", Object.assign({ className: b('info-label', { margin: 'left' }) }, { children: "Nodes" }))] }), versionsValues ? (_jsxs("div", Object.assign({ className: b('version-progress') }, { children: [_jsx("span", Object.assign({ className: b('info-label', { margin: 'right' }) }, { children: "Versions" })), _jsx(Progress, { size: "s", value: 100, stack: versionsValues })] }))) : null] }))] })));
+};

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -65,6 +65,6 @@
 
         margin-left: 8px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }

package/dist/containers/Versions/Versions.d.ts

@@ -0,0 +1,7 @@
+import type { VersionToColorMap } from '../../types/versions';
+import './Versions.scss';
+interface VersionsProps {
+    versionToColor?: VersionToColorMap;
+}
+export declare const Versions: ({ versionToColor }: VersionsProps) => JSX.Element;
+export {};

package/dist/containers/Versions/Versions.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import block from 'bem-cn-lite';
+import { Checkbox, RadioButton } from '@gravity-ui/uikit';
+import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
+import { getClusterNodes } from '../../store/reducers/clusterNodes/clusterNodes';
+import { Loader } from '../../components/Loader';
+import { getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes } from './groupNodes';
+import { GroupedNodesTree } from './GroupedNodesTree/GroupedNodesTree';
+import { GroupByValue } from './types';
+import './Versions.scss';
+const b = block('ydb-versions');
+export const Versions = ({ versionToColor }) => {
+    const dispatch = useDispatch();
+    const { nodes = [], loading, wasLoaded } = useTypedSelector((state) => state.clusterNodes);
+    useAutofetcher(() => dispatch(getClusterNodes()), [dispatch], true);
+    const [groupByValue, setGroupByValue] = useState(GroupByValue.VERSION);
+    const [expanded, setExpanded] = useState(false);
+    const handleGroupByValueChange = (value) => {
+        setGroupByValue(value);
+    };
+    const renderGroupControl = () => {
+        return (_jsxs("div", Object.assign({ className: b('group') }, { children: [_jsx("span", Object.assign({ className: b('label') }, { children: "Group by:" })), _jsxs(RadioButton, Object.assign({ value: groupByValue, onUpdate: handleGroupByValueChange }, { children: [_jsx(RadioButton.Option, Object.assign({ value: GroupByValue.TENANT }, { children: GroupByValue.TENANT })), _jsx(RadioButton.Option, Object.assign({ value: GroupByValue.VERSION }, { children: GroupByValue.VERSION }))] }))] })));
+    };
+    const renderControls = () => {
+        return (_jsxs("div", Object.assign({ className: b('controls') }, { children: [renderGroupControl(), _jsx(Checkbox, Object.assign({ className: b('checkbox'), onChange: () => setExpanded((value) => !value), checked: expanded }, { children: "All expanded" }))] })));
+    };
+    if (loading && !wasLoaded) {
+        return _jsx(Loader, {});
+    }
+    const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
+    const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
+    const otherNodes = getOtherNodes(nodes, versionToColor);
+    const storageNodesContent = (storageNodes === null || storageNodes === void 0 ? void 0 : storageNodes.length) ? (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Storage nodes" }), storageNodes.map(({ title, nodes: itemNodes, items, versionColor }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, versionColor: versionColor }, `storage-nodes-${title}`)))] })) : null;
+    const tenantNodesContent = (tenantNodes === null || tenantNodes === void 0 ? void 0 : tenantNodes.length) ? (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Database nodes" }), renderControls(), tenantNodes.map(({ title, nodes: itemNodes, items, versionColor, versionsValues }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, expanded: expanded, versionColor: versionColor, versionsValues: versionsValues }, `tenant-nodes-${title}`)))] })) : null;
+    const otherNodesContent = (otherNodes === null || otherNodes === void 0 ? void 0 : otherNodes.length) ? (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Other nodes" }), otherNodes.map(({ title, nodes: itemNodes, items, versionColor, versionsValues }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, versionColor: versionColor, versionsValues: versionsValues }, `other-nodes-${title}`)))] })) : null;
+    return (_jsxs("div", Object.assign({ className: b('versions') }, { children: [storageNodesContent, tenantNodesContent, otherNodesContent] })));
+};

package/dist/containers/Versions/groupNodes.d.ts

@@ -0,0 +1,6 @@
+import type { VersionToColorMap } from '../../types/versions';
+import type { PreparedClusterNode } from '../../store/reducers/clusterNodes/types';
+import { GroupByValue, GroupedNodesItem } from './types';
+export declare const getGroupedTenantNodes: (nodes: PreparedClusterNode[] | undefined, versionToColor: VersionToColorMap | undefined, groupByValue: GroupByValue) => GroupedNodesItem[] | undefined;
+export declare const getGroupedStorageNodes: (nodes: PreparedClusterNode[] | undefined, versionToColor: VersionToColorMap | undefined) => GroupedNodesItem[] | undefined;
+export declare const getOtherNodes: (nodes: PreparedClusterNode[] | undefined, versionToColor: VersionToColorMap | undefined) => GroupedNodesItem[] | undefined;

package/dist/containers/Versions/groupNodes.js

@@ -0,0 +1,88 @@
+import { groupBy } from 'lodash';
+import { getMinorVersion, parseNodesToVersionsValues } from '../../utils/versions';
+import { GroupByValue } from './types';
+const sortByTitle = (a, b) => { var _a; return ((_a = a.title) === null || _a === void 0 ? void 0 : _a.localeCompare(b.title || '')) || -1; };
+export const getGroupedTenantNodes = (nodes, versionToColor, groupByValue) => {
+    if (!nodes || !nodes.length) {
+        return undefined;
+    }
+    if (groupByValue === GroupByValue.VERSION) {
+        const dividedByVersion = groupBy(nodes, 'Version');
+        return Object.keys(dividedByVersion)
+            .map((version) => {
+            const filteredNodes = dividedByVersion[version].filter(({ Tenants }) => Boolean(Tenants));
+            const dividedByTenant = groupBy(filteredNodes, 'Tenants');
+            const items = Object.keys(dividedByTenant)
+                .map((tenant) => {
+                return {
+                    title: tenant,
+                    nodes: dividedByTenant[tenant],
+                };
+            })
+                .sort(sortByTitle);
+            if (!items.length) {
+                return null;
+            }
+            return {
+                title: version,
+                items: items,
+                versionColor: versionToColor === null || versionToColor === void 0 ? void 0 : versionToColor.get(getMinorVersion(version)),
+            };
+        })
+            .filter((item) => Boolean(item));
+    }
+    else {
+        const filteredNodes = nodes.filter(({ Tenants }) => Boolean(Tenants));
+        const dividedByTenant = groupBy(filteredNodes, 'Tenants');
+        return Object.keys(dividedByTenant)
+            .map((tenant) => {
+            const versionsValues = parseNodesToVersionsValues(dividedByTenant[tenant], versionToColor);
+            const dividedByVersion = groupBy(dividedByTenant[tenant], 'Version');
+            const preparedItems = Object.keys(dividedByVersion).map((version) => {
+                return {
+                    title: version,
+                    nodes: dividedByVersion[version],
+                    versionColor: versionToColor === null || versionToColor === void 0 ? void 0 : versionToColor.get(getMinorVersion(version)),
+                };
+            });
+            if (!preparedItems.length) {
+                return null;
+            }
+            return {
+                title: tenant,
+                items: preparedItems,
+                versionsValues,
+            };
+        })
+            .filter((item) => Boolean(item))
+            .sort(sortByTitle);
+    }
+};
+export const getGroupedStorageNodes = (nodes, versionToColor) => {
+    if (!nodes || !nodes.length) {
+        return undefined;
+    }
+    const storageNodes = nodes.filter(({ Roles }) => Roles === null || Roles === void 0 ? void 0 : Roles.includes('Storage'));
+    const storageNodesDividedByVersion = groupBy(storageNodes, 'Version');
+    return Object.keys(storageNodesDividedByVersion).map((version) => {
+        return {
+            title: version,
+            nodes: storageNodesDividedByVersion[version],
+            versionColor: versionToColor === null || versionToColor === void 0 ? void 0 : versionToColor.get(getMinorVersion(version)),
+        };
+    });
+};
+export const getOtherNodes = (nodes, versionToColor) => {
+    if (!nodes || !nodes.length) {
+        return undefined;
+    }
+    const otherNodes = nodes.filter(({ Roles }) => !Roles);
+    const otherNodesDividedByVersion = groupBy(otherNodes, 'Version');
+    return Object.keys(otherNodesDividedByVersion).map((version) => {
+        return {
+            title: version,
+            nodes: otherNodesDividedByVersion[version],
+            versionColor: versionToColor === null || versionToColor === void 0 ? void 0 : versionToColor.get(getMinorVersion(version)),
+        };
+    });
+};

package/dist/containers/Versions/types.d.ts

@@ -0,0 +1,14 @@
+import type { VersionValue } from '../../types/versions';
+import type { PreparedClusterNode } from '../../store/reducers/clusterNodes/types';
+export interface GroupedNodesItem {
+    title?: string;
+    nodes?: PreparedClusterNode[];
+    items?: GroupedNodesItem[];
+    versionColor?: string;
+    versionsValues?: VersionValue[];
+}
+export declare enum GroupByValue {
+    VERSION = "Version",
+    TENANT = "Database",
+    STORAGE = "Storage"
+}

package/dist/containers/Versions/types.js

@@ -0,0 +1,6 @@
+export var GroupByValue;
+(function (GroupByValue) {
+    GroupByValue["VERSION"] = "Version";
+    GroupByValue["TENANT"] = "Database";
+    GroupByValue["STORAGE"] = "Storage";
+})(GroupByValue || (GroupByValue = {}));

package/dist/index.css

@@ -1,5 +1,6 @@
 body {
     margin: 0;
+
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
         'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;

package/dist/lib.d.ts

@@ -0,0 +1,20 @@
+export { App as SingleClusterApp, AppSlots } from './containers/App';
+export { AppWithClusters as MultiClusterApp } from './containers/AppWithClusters/AppWithClusters';
+export { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
+export { configureStore, rootReducer } from './store';
+export { createApi, YdbEmbeddedAPI, YdbWebVersionAPI } from './services/api';
+export { settingsManager } from './services/settings';
+export { settings as userSettings } from './containers/UserSettings/settings';
+export { setUserSettings } from './store/reducers/settings/settings';
+export { componentsRegistry } from './components/ComponentsProvider/componentsRegistry';
+export { useSetting, useTypedSelector } from './utils/hooks';
+export { getMonitoringLink, getMonitoringClusterLink } from './utils/monitoring';
+export { i18n, Lang } from './utils/i18n';
+export { toaster } from './utils/createToast';
+export { cn } from './utils/cn';
+export * from './utils/constants';
+export { default as reportWebVitals } from './reportWebVitals';
+export type { SettingsObject } from './services/settings';
+export type { YDBEmbeddedUISettings, SettingsPage, SettingsSection, } from './containers/UserSettings/settings';
+export type { SettingProps } from './containers/UserSettings/Setting';
+export type { AsideNavigationProps } from './containers/AsideNavigation/AsideNavigation';

package/dist/lib.js

@@ -0,0 +1,16 @@
+export { App as SingleClusterApp, AppSlots } from './containers/App';
+export { AppWithClusters as MultiClusterApp } from './containers/AppWithClusters/AppWithClusters';
+export { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
+export { configureStore, rootReducer } from './store';
+export { createApi, YdbEmbeddedAPI, YdbWebVersionAPI } from './services/api';
+export { settingsManager } from './services/settings';
+export { settings as userSettings } from './containers/UserSettings/settings';
+export { setUserSettings } from './store/reducers/settings/settings';
+export { componentsRegistry } from './components/ComponentsProvider/componentsRegistry';
+export { useSetting, useTypedSelector } from './utils/hooks';
+export { getMonitoringLink, getMonitoringClusterLink } from './utils/monitoring';
+export { i18n, Lang } from './utils/i18n';
+export { toaster } from './utils/createToast';
+export { cn } from './utils/cn';
+export * from './utils/constants';
+export { default as reportWebVitals } from './reportWebVitals';

package/dist/reportWebVitals.d.ts

@@ -0,0 +1,3 @@
+import type { ReportHandler } from 'web-vitals';
+declare const reportWebVitals: (onPerfEntry?: ReportHandler | undefined) => void;
+export default reportWebVitals;

package/dist/reportWebVitals.js

@@ -0,0 +1,12 @@
+const reportWebVitals = (onPerfEntry) => {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+            getCLS(onPerfEntry);
+            getFID(onPerfEntry);
+            getFCP(onPerfEntry);
+            getLCP(onPerfEntry);
+            getTTFB(onPerfEntry);
+        });
+    }
+};
+export default reportWebVitals;

package/dist/routes.d.ts

@@ -0,0 +1,26 @@
+import type { Location } from 'history';
+import qs from 'qs';
+export declare const CLUSTERS = "clusters";
+export declare const CLUSTER = "cluster";
+export declare const TENANT = "tenant";
+export declare const NODE = "node";
+export declare const TABLET = "tablet";
+declare const routes: {
+    readonly clusters: "/clusters";
+    readonly cluster: "/cluster/:activeTab?";
+    readonly tenant: "/tenant";
+    readonly node: "/node/:id/:activeTab?";
+    readonly tablet: "/tablet/:id";
+    readonly tabletsFilters: "/tabletsFilters";
+    readonly auth: "/auth";
+};
+export declare const parseQuery: (location: Location) => qs.ParsedQs;
+export declare type Query = Record<string | number, string | number | string[] | number[] | undefined>;
+export declare function createHref(route: string, params?: Record<string, string | number>, query?: Query): string;
+export declare const createExternalUILink: (query?: {}) => string;
+export declare function getLocationObjectFromHref(href: string): {
+    pathname: string;
+    search: string;
+    hash: string;
+};
+export default routes;