ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/utils/hooks/useStorageRequestParams.js

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import React from 'react';
 import { EVersion } from '../../types/api/storage';
 import { USE_BACKEND_PARAMS_FOR_TABLES_KEY } from '../constants';
 import { useSetting } from './useSetting';
@@ -6,7 +6,7 @@ export const useStorageRequestParams = ({ filter, sortOrder, sortValue, }) => {
     const [useBackendParamsForTables] = useSetting(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
     // If backend params are enabled, update params value to use them in fetch request
     // Otherwise no params will be updated, no hooks that depend on requestParams will be triggered
-    return useMemo(() => {
+    return React.useMemo(() => {
         if (useBackendParamsForTables) {
             return {
                 version: EVersion.v2,

package/dist/utils/hooks/useTableResize.d.ts

@@ -1,5 +1,5 @@
 import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
-import { type Column as VirtualTableColumn } from '../../components/VirtualTable';
+import type { Column as VirtualTableColumn } from '../../components/VirtualTable';
 export type Column<T> = VirtualTableColumn<T> & DataTableColumn<T>;
 export type TableColumnsWidthSetup = Record<string, number>;
 export type HandleTableColumnsResize = (newSetup: TableColumnsWidthSetup) => void;

package/dist/utils/hooks/useTableResize.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import React from 'react';
 import { DEFAULT_RESIZEABLE } from '../../components/VirtualTable';
 import { settingsManager } from '../../services/settings';
 export const updateColumnsWidth = (columns, columnsWidthSetup) => {
@@ -12,11 +12,11 @@ export const updateColumnsWidth = (columns, columnsWidthSetup) => {
     });
 };
 export const useTableResize = (localStorageKey) => {
-    const [tableColumnsWidthSetup, setTableColumnsWidth] = useState(() => {
+    const [tableColumnsWidthSetup, setTableColumnsWidth] = React.useState(() => {
         const setupFromLS = settingsManager.readUserSettingsValue(localStorageKey, {});
         return setupFromLS;
     });
-    const handleSetupChange = useCallback((newSetup) => {
+    const handleSetupChange = React.useCallback((newSetup) => {
         setTableColumnsWidth((previousSetup) => {
             // ResizeObserver callback may be triggered only for currently resized column
             // or for the whole set of columns

package/dist/utils/hooks/useTableSort.d.ts

@@ -1,4 +1,4 @@
-import { OrderType, SortOrder } from '@gravity-ui/react-data-table';
+import type { OrderType, SortOrder } from '@gravity-ui/react-data-table';
 interface SortParams {
     sortValue: string | undefined;
     sortOrder: OrderType | undefined;

package/dist/utils/hooks/useTableSort.js

@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
+import React from 'react';
 import { DESCENDING } from '@gravity-ui/react-data-table/build/esm/lib/constants';
 export const useTableSort = ({ sortValue, sortOrder = DESCENDING }, onSort) => {
-    const sort = useMemo(() => {
+    const sort = React.useMemo(() => {
         if (!sortValue) {
             return undefined;
         }

package/dist/utils/hooks/useTypedSelector.d.ts

@@ -1,3 +1,3 @@
-import { TypedUseSelectorHook } from 'react-redux';
+import type { TypedUseSelectorHook } from 'react-redux';
 import type { RootState } from '../../store';
 export declare const useTypedSelector: TypedUseSelectorHook<RootState>;

package/dist/utils/i18n/i18n.d.ts

@@ -1,4 +1,5 @@
-import { I18N, KeysData } from '@gravity-ui/i18n';
+import type { KeysData } from '@gravity-ui/i18n';
+import { I18N } from '@gravity-ui/i18n';
 declare enum Lang {
     En = "en",
     Ru = "ru"

package/dist/utils/i18n/i18n.js

@@ -1,10 +1,7 @@
 import { I18N } from '@gravity-ui/i18n';
 import { configure as configureUiKit } from '@gravity-ui/uikit';
-import { configure as configureUiKitComponents } from '@gravity-ui/components';
-import { configure as configureUiKitNavigation } from '@gravity-ui/navigation';
-import { configure as configureYdbUiComponents } from 'ydb-ui-components';
-import { LANGUAGE_KEY } from '../constants';
 import { settingsManager } from '../../services/settings';
+import { LANGUAGE_KEY } from '../constants';
 var Lang;
 (function (Lang) {
     Lang["En"] = "en";
@@ -17,10 +14,7 @@ const i18n = new I18N({
     // Enable keysets with only en lang
     fallbackLang: Lang.En,
 });
-configureYdbUiComponents({ lang: currentLang });
 configureUiKit({ lang: currentLang });
-configureUiKitComponents({ lang: currentLang });
-configureUiKitNavigation({ lang: currentLang });
 export function registerKeysets(id, data) {
     for (const lang of Object.keys(data)) {
         i18n.registerKeyset(lang, id, data[lang]);

package/dist/utils/lazyComponent.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export declare function lazyComponent<TExports extends {
     [key: string]: any;
 }, TKey extends keyof TExports>(moduleLoader: () => Promise<TExports>, exportName: TKey, loader?: React.ReactNode): React.ForwardRefExoticComponent<React.PropsWithoutRef<React.ComponentProps<TExports[TKey]>> & React.RefAttributes<TExports[TKey]>>;

package/dist/utils/lazyComponent.js

@@ -1,25 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
+import React from 'react';
 import { Loader } from '@gravity-ui/uikit';
-import { ErrorBoundaryFallback } from '../components/ErrorBoundary/ErrorBoundary';
 import { useComponent } from '../components/ComponentsProvider/ComponentsProvider';
+import { ErrorBoundaryFallback } from '../components/ErrorBoundary/ErrorBoundary';
 export function lazyComponent(moduleLoader, exportName, loader) {
     const Component = React.lazy(() => moduleLoader()
         .then((module) => ({ default: module[exportName] }))
         .catch((error) => ({ default: () => _jsx(ErrorBoundaryFallback, { error: error }) })));
     const LazyComponent = (props, ref) => {
         const ErrorBoundary = useComponent('ErrorBoundary');
-        return (_jsx(ErrorBoundary, { children: _jsx(React.Suspense, Object.assign({ fallback: loader !== null && loader !== void 0 ? loader : _jsx(DefaultLoader, {}) }, { children: _jsx(Component, Object.assign({ ref: ref }, props)) })) }));
+        return (_jsx(ErrorBoundary, { children: _jsx(React.Suspense, { fallback: loader !== null && loader !== void 0 ? loader : _jsx(DefaultLoader, {}), children: _jsx(Component, Object.assign({ ref: ref }, props)) }) }));
     };
     LazyComponent.displayName = exportName;
     return React.forwardRef(LazyComponent);
 }
 function DefaultLoader() {
-    return (_jsx("div", Object.assign({ style: {
+    return (_jsx("div", { style: {
             width: '100%',
             height: '100%',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-        } }, { children: _jsx(Loader, { size: "l" }) })));
+        }, children: _jsx(Loader, { size: "l" }) }));
 }

package/dist/utils/monaco/yqlSuggestions/generateSuggestions.d.ts

@@ -1,5 +1,5 @@
-import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import type { ColumnAliasSuggestion, KeywordSuggestion, YqlAutocompleteResult } from '@gravity-ui/websql-autocomplete';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 export declare function generateColumnsSuggestion(rangeToInsertSuggestion: monaco.IRange, suggestColumns: YqlAutocompleteResult['suggestColumns'] | undefined, database: string): Promise<monaco.languages.CompletionItem[]>;
 export declare function generateColumnAliasesSuggestion(rangeToInsertSuggestion: monaco.IRange, suggestColumnAliases?: ColumnAliasSuggestion[]): {
     label: string;

package/dist/utils/monaco/yqlSuggestions/yqlSuggestions.js

@@ -28,10 +28,12 @@ async function getSuggestions(model, cursorPosition, rangeToInsertSuggestion, da
         functionsSuggestions = await generateSimpleFunctionsSuggestion(rangeToInsertSuggestion);
     }
     if (parseResult.suggestAggregateFunctions) {
-        aggregateFunctionsSuggestions = await generateAggregateFunctionsSuggestion(rangeToInsertSuggestion);
+        aggregateFunctionsSuggestions =
+            await generateAggregateFunctionsSuggestion(rangeToInsertSuggestion);
     }
     if (parseResult.suggestWindowFunctions) {
-        windowFunctionsSuggestions = await generateWindowFunctionsSuggestion(rangeToInsertSuggestion);
+        windowFunctionsSuggestions =
+            await generateWindowFunctionsSuggestion(rangeToInsertSuggestion);
     }
     if (parseResult.suggestTableFunctions) {
         tableFunctionsSuggestions = await generateTableFunctionsSuggestion(rangeToInsertSuggestion);

package/dist/utils/monitoring.d.ts

@@ -1,7 +1,8 @@
 export type ParsedMonitoringData = {
     monitoring_url: string;
-    serverless_dashboard: string;
-    dedicated_dashboard: string;
+    serverless_dashboard?: string;
+    dedicated_dashboard?: string;
+    cluster_dashboard?: string;
     host?: string;
     slot?: string;
     cluster_name?: string;
@@ -15,5 +16,5 @@ export interface GetMonitoringLinkProps {
 export type GetMonitoringLink = typeof getMonitoringLink;
 export declare function getMonitoringLink({ monitoring, dbName, dbType, clusterName, }: GetMonitoringLinkProps): string;
 export type GetMonitoringClusterLink = typeof getMonitoringClusterLink;
-export declare function getMonitoringClusterLink(monitoring: string): string;
+export declare function getMonitoringClusterLink(monitoring: string, clusterName?: string): string;
 export declare function parseMonitoringData(monitoring: string): ParsedMonitoringData | undefined;

package/dist/utils/monitoring.js

@@ -1,34 +1,49 @@
 import { ETenantType } from '../types/api/tenant';
-const isMonitoring = (link) => {
-    return link.startsWith('https://monitoring');
-};
 export function getMonitoringLink({ monitoring, dbName, dbType, clusterName, }) {
     var _a, _b;
-    const data = parseMonitoringData(monitoring);
-    let href = '';
-    if (data) {
-        const monitoringUrl = data.monitoring_url;
-        const dashboard = dbType === ETenantType.Serverless
-            ? data.serverless_dashboard
-            : data.dedicated_dashboard;
-        const host = (_a = data.host) !== null && _a !== void 0 ? _a : 'cluster';
-        const slot = (_b = data.slot) !== null && _b !== void 0 ? _b : 'static';
-        const finalClusterName = data.cluster_name || clusterName || '';
-        if (isMonitoring(monitoringUrl)) {
-            href = `${monitoringUrl}/${dashboard}?p.cluster=${finalClusterName}&p.host=${host}&p.slot=${slot}&p.database=${dbName}`;
-        }
-        else {
-            href = `${monitoringUrl}&host=${host}&slot=${slot}&database=${dbName}&dashboard=${dashboard}`;
+    try {
+        const data = parseMonitoringData(monitoring);
+        if (data) {
+            const host = (_a = data.host) !== null && _a !== void 0 ? _a : 'cluster';
+            const slot = (_b = data.slot) !== null && _b !== void 0 ? _b : 'static';
+            const finalClusterName = data.cluster_name || clusterName || '';
+            const url = new URL(data.monitoring_url);
+            if (!url.search) {
+                const dashboard = dbType === ETenantType.Serverless
+                    ? data.serverless_dashboard
+                    : data.dedicated_dashboard;
+                url.pathname += `/${dashboard}`;
+            }
+            if (!url.searchParams.has('p.cluster')) {
+                url.searchParams.set('p.cluster', finalClusterName);
+            }
+            url.searchParams.set('p.host', host);
+            url.searchParams.set('p.slot', slot);
+            url.searchParams.set('p.database', dbName);
+            return url.toString();
         }
-        href = encodeURI(href);
     }
-    return href;
+    catch (_c) { }
+    return '';
 }
-export function getMonitoringClusterLink(monitoring) {
-    const data = parseMonitoringData(monitoring);
-    if (data) {
-        return data.monitoring_url;
+export function getMonitoringClusterLink(monitoring, clusterName) {
+    try {
+        const data = parseMonitoringData(monitoring);
+        if (data) {
+            const clusterDashboard = data.cluster_dashboard;
+            const finalClusterName = data.cluster_name || clusterName || '';
+            const url = new URL(data.monitoring_url);
+            if (!url.search && clusterDashboard) {
+                url.pathname += `/${clusterDashboard}/view`;
+            }
+            if (!url.searchParams.has('p.cluster')) {
+                url.searchParams.set('p.cluster', finalClusterName);
+            }
+            url.searchParams.set('p.database', '-');
+            return url.toString();
+        }
     }
+    catch (_a) { }
     return '';
 }
 export function parseMonitoringData(monitoring) {

package/dist/utils/nodes.d.ts

@@ -1,9 +1,9 @@
+import type { NodesPreparedEntity } from '../store/reducers/nodes/types';
+import type { ProblemFilterValue } from '../store/reducers/settings/types';
 import type { TSystemStateInfo } from '../types/api/nodes';
 import type { TNodeInfo } from '../types/api/nodesList';
-import type { NodesPreparedEntity } from '../store/reducers/nodes/types';
-import type { NodesMap } from '../types/store/nodesList';
 import type { ValueOf } from '../types/common';
-import type { ProblemFilterValue } from '../store/reducers/settings/types';
+import type { NodesMap } from '../types/store/nodesList';
 export declare enum NodesUptimeFilterValues {
     'All' = "All",
     'SmallUptime' = "SmallUptime"

package/dist/utils/nodes.js

@@ -1,7 +1,7 @@
 import { ProblemFilterValues } from '../store/reducers/settings/settings';
 import { EFlag } from '../types/api/enums';
-import { calcUptime } from './dataFormatters/dataFormatters';
 import { HOUR_IN_SECONDS } from './constants';
+import { calcUptime } from './dataFormatters/dataFormatters';
 export var NodesUptimeFilterValues;
 (function (NodesUptimeFilterValues) {
     NodesUptimeFilterValues["All"] = "All";

package/dist/utils/prepareQueryExplain.d.ts

@@ -1,4 +1,4 @@
-import type { Link, GraphNode, ExplainPlanNodeData } from '@gravity-ui/paranoid';
+import type { ExplainPlanNodeData, GraphNode, Link } from '@gravity-ui/paranoid';
 import type { PlanNode } from '../types/api/query';
 export declare function preparePlan(plan: PlanNode): {
     nodes: GraphNode<ExplainPlanNodeData>[];

package/dist/utils/query.d.ts

@@ -23,6 +23,6 @@ type UnsupportedQueryResponseFormat = Array<unknown> | string | null | undefined
 export declare const parseQueryAPIExecuteResponse: (data: AnyExecuteResponse | UnsupportedQueryResponseFormat) => IQueryResult;
 export declare const parseQueryAPIExplainResponse: (data: AnyExplainResponse | UnsupportedQueryResponseFormat) => IQueryResult;
 export declare const parseQueryExplainPlan: (plan: ScriptPlan | QueryPlan) => QueryPlan;
-export declare const prepareQueryResponse: (data?: KeyValueRow[]) => KeyValueRow<import("../types/api/query").CellValue>[];
+export declare const prepareQueryResponse: (data?: KeyValueRow[]) => KeyValueRow[];
 export declare function prepareQueryError(error: QueryErrorResponse): string | undefined;
 export {};

package/dist/utils/timeParsers/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: "days" | "hours" | "ms" | "daysHours" | "hoursMin" | "minSec" | "secMs" | "min" | "sec", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/utils/timeParsers/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../i18n';
+import { registerKeysets } from '../../i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-time-parsers';
-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/utils/tooltip.d.ts

@@ -1,10 +1,10 @@
 export namespace tooltipTemplates {
-    function pool(data: any): JSX.Element;
-    function tablet(data: any): JSX.Element;
-    function node(data: any): JSX.Element;
-    function nodeEndpoints(data: any): JSX.Element;
-    function tabletsOverall(data: any): JSX.Element;
-    function histogram(data: any): JSX.Element;
-    function cell(data: any): JSX.Element;
-    function json(data: any): JSX.Element;
+    function pool(data: any): import("react/jsx-runtime").JSX.Element;
+    function tablet(data: any): import("react/jsx-runtime").JSX.Element;
+    function node(data: any): import("react/jsx-runtime").JSX.Element;
+    function nodeEndpoints(data: any): import("react/jsx-runtime").JSX.Element;
+    function tabletsOverall(data: any): import("react/jsx-runtime").JSX.Element;
+    function histogram(data: any): import("react/jsx-runtime").JSX.Element;
+    function cell(data: any): import("react/jsx-runtime").JSX.Element;
+    function json(data: any): import("react/jsx-runtime").JSX.Element;
 }

package/dist/utils/tooltip.js

@@ -1,23 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import JSONTree from 'react-json-inspector';
-import { NodeEndpointsTooltipContent, TabletTooltipContent, PoolTooltipContent, } from '../components/TooltipsContent';
+import { NodeEndpointsTooltipContent, PoolTooltipContent, TabletTooltipContent, } from '../components/TooltipsContent';
+import { cn } from './cn';
 const nodeB = cn('node-tootltip');
 const NodeTooltip = (props) => {
     const { data } = props;
-    return (data && (_jsx("div", Object.assign({ className: nodeB() }, { children: _jsx("table", { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", Object.assign({ className: nodeB('label') }, { children: "ID" })), _jsx("td", Object.assign({ className: nodeB('value') }, { children: data.nodeId || '?' }))] }), _jsxs("tr", { children: [_jsx("td", Object.assign({ className: nodeB('label') }, { children: "Rack" })), _jsx("td", Object.assign({ className: nodeB('value') }, { children: data.rack || '?' }))] }), data.connected && data.capacity && (_jsxs("tr", { children: [_jsx("td", Object.assign({ className: nodeB('label') }, { children: "Net" })), _jsx("td", Object.assign({ className: nodeB('value') }, { children: `${data.connected} / ${data.capacity}` }))] }))] }) }) }))));
+    return (data && (_jsx("div", { className: nodeB(), children: _jsx("table", { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: nodeB('label'), children: "ID" }), _jsx("td", { className: nodeB('value'), children: data.nodeId || '?' })] }), _jsxs("tr", { children: [_jsx("td", { className: nodeB('label'), children: "Rack" }), _jsx("td", { className: nodeB('value'), children: data.rack || '?' })] }), data.connected && data.capacity ? (_jsxs("tr", { children: [_jsx("td", { className: nodeB('label'), children: "Net" }), _jsx("td", { className: nodeB('value'), children: `${data.connected} / ${data.capacity}` })] })) : null] }) }) })));
 };
 const tabletsOverallB = cn('tabletsOverall-tooltip');
 const TabletsOverallTooltip = (props) => {
     const { data } = props;
-    return (data && (_jsx("div", Object.assign({ className: tabletsOverallB() }, { children: _jsx("table", { children: _jsx("tbody", { children: data.map((colorInfo, key) => {
-                    return (_jsxs("tr", { children: [_jsxs("td", Object.assign({ className: tabletsOverallB('label') }, { children: [colorInfo.color, ":"] })), _jsx("td", Object.assign({ className: tabletsOverallB('value') }, { children: `${colorInfo.value}/${colorInfo.total} (${colorInfo.percents.toFixed(2)}%)` }))] }, key));
-                }) }) }) }))));
+    return (data && (_jsx("div", { className: tabletsOverallB(), children: _jsx("table", { children: _jsx("tbody", { children: data.map((colorInfo, key) => {
+                    return (_jsxs("tr", { children: [_jsxs("td", { className: tabletsOverallB('label'), children: [colorInfo.color, ":"] }), _jsx("td", { className: tabletsOverallB('value'), children: `${colorInfo.value}/${colorInfo.total} (${colorInfo.percents.toFixed(2)}%)` })] }, key));
+                }) }) }) })));
 };
 const histogramB = cn('histogram-tooltip');
 const HistogramTooltip = (props) => {
     const { data } = props;
-    return (data && (_jsx("div", Object.assign({ className: histogramB() }, { children: _jsx("table", { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", Object.assign({ className: histogramB('label') }, { children: "Count" })), _jsx("td", Object.assign({ className: histogramB('value') }, { children: data.count || '?' }))] }), _jsxs("tr", { children: [_jsx("td", Object.assign({ className: histogramB('label') }, { children: "From" })), _jsx("td", Object.assign({ className: histogramB('value') }, { children: data.leftBound || '?' }))] }), _jsxs("tr", { children: [_jsx("td", Object.assign({ className: histogramB('label') }, { children: "To" })), _jsx("td", Object.assign({ className: histogramB('value') }, { children: data.rightBound || '?' }))] })] }) }) }))));
+    return (data && (_jsx("div", { className: histogramB(), children: _jsx("table", { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: histogramB('label'), children: "Count" }), _jsx("td", { className: histogramB('value'), children: data.count || '?' })] }), _jsxs("tr", { children: [_jsx("td", { className: histogramB('label'), children: "From" }), _jsx("td", { className: histogramB('value'), children: data.leftBound || '?' })] }), _jsxs("tr", { children: [_jsx("td", { className: histogramB('label'), children: "To" }), _jsx("td", { className: histogramB('value'), children: data.rightBound || '?' })] })] }) }) })));
 };
 const cellB = cn('cell-tooltip');
 const jsonB = cn('json-tooltip');
@@ -34,9 +34,9 @@ export const tooltipTemplates = {
     // eslint-disable-next-line react/display-name
     histogram: (data) => _jsx(HistogramTooltip, { data: data }),
     // eslint-disable-next-line react/display-name
-    cell: (data) => _jsx("div", Object.assign({ className: cellB() }, { children: data })),
+    cell: (data) => _jsx("div", { className: cellB(), children: data }),
     // eslint-disable-next-line react/display-name
     json: (data) => {
-        return (_jsx("div", Object.assign({ className: jsonB() }, { children: _jsx(JSONTree, { data: data, search: false, isExpanded: () => true, className: jsonB('inspector') }) })));
+        return (_jsx("div", { className: jsonB(), children: _jsx(JSONTree, { data: data, search: false, isExpanded: () => true, className: jsonB('inspector') }) }));
     },
 };

package/dist/utils/utils.js

@@ -27,7 +27,7 @@ export function bytesToSize(bytes) {
     }
     if (bytes < base)
         return String(bytes);
-    let i = parseInt(Math.floor(Math.log(bytes) / Math.log(base)));
+    let i = parseInt(Math.floor(Math.log(bytes) / Math.log(base)), 10);
     if (i >= sizes.length) {
         i = sizes.length - 1;
     }

package/dist/utils/versions/getVersionsColors.js

@@ -8,16 +8,16 @@ export const hashCode = (s) => {
 // TODO: colors used in charts as well, need to move to constants
 // 11 distinct colors from https://mokole.com/palette.html
 export const COLORS = [
-    '#008000',
-    '#4169e1',
-    '#ffd700',
-    '#ff8c00',
-    '#808000',
-    '#e9967a',
-    '#ff1493',
-    '#00bfff',
-    '#da70d6',
-    '#3cb371',
+    '#008000', // green
+    '#4169e1', // royalblue
+    '#ffd700', // gold
+    '#ff8c00', // darkorange
+    '#808000', // olive
+    '#e9967a', // darksalmon
+    '#ff1493', // deeppink
+    '#00bfff', // deepskyblue
+    '#da70d6', // orchid
+    '#3cb371', // mediumseagreen
     '#b22222', // firebrick
 ];
 export const GREY_COLOR = '#bfbfbf';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "5.5.0",
+  "version": "6.0.0",
   "files": [
     "dist"
   ],
@@ -10,45 +10,45 @@
     "url": "git@github.com:ydb-platform/ydb-embedded-ui.git"
   },
   "dependencies": {
+    "@bem-react/classname": "^1.6.0",
     "@gravity-ui/axios-wrapper": "^1.4.1",
-    "@gravity-ui/chartkit": "^4.23.0",
-    "@gravity-ui/components": "^2.12.0",
-    "@gravity-ui/date-utils": "^1.4.2",
-    "@gravity-ui/i18n": "^1.2.0",
-    "@gravity-ui/icons": "^2.8.1",
-    "@gravity-ui/navigation": "^1.9.0",
-    "@gravity-ui/paranoid": "^1.4.0",
-    "@gravity-ui/react-data-table": "^1.2.0",
-    "@gravity-ui/uikit": "^5.30.1",
+    "@gravity-ui/chartkit": "^5.3.0",
+    "@gravity-ui/components": "^3.4.1",
+    "@gravity-ui/date-utils": "^2.2.0",
+    "@gravity-ui/i18n": "^1.4.0",
+    "@gravity-ui/icons": "^2.9.1",
+    "@gravity-ui/navigation": "^2.7.0",
+    "@gravity-ui/paranoid": "^1.4.1",
+    "@gravity-ui/react-data-table": "^2.0.1",
+    "@gravity-ui/uikit": "^6.10.2",
     "@gravity-ui/websql-autocomplete": "^8.0.2",
-    "@reduxjs/toolkit": "^2.2.1",
-    "axios": "^1.6.7",
-    "bem-cn-lite": "^4.1.0",
+    "@reduxjs/toolkit": "^2.2.3",
+    "axios": "^1.6.8",
     "colord": "^2.9.3",
     "copy-to-clipboard": "^3.3.3",
     "crc-32": "^1.2.2",
     "history": "^4.10.1",
-    "lodash": "^4.17.11",
-    "monaco-editor": "^0.31.1",
+    "lodash": "^4.17.21",
+    "monaco-editor": "^0.44.0",
     "numeral": "^2.0.6",
     "path-to-regexp": "^3.0.0",
-    "qs": "^6.11.0",
-    "react-error-boundary": "^4.0.12",
+    "qs": "^6.12.0",
+    "react-error-boundary": "^4.0.13",
     "react-helmet-async": "2.0.4",
     "react-json-inspector": "^7.1.1",
-    "react-list": "^0.8.11",
-    "react-monaco-editor": "^0.47.0",
-    "react-redux": "^7.2.6",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
+    "react-list": "^0.8.17",
+    "react-monaco-editor": "^0.55.0",
+    "react-redux": "^9.1.0",
+    "react-router": "^5.3.4",
+    "react-router-dom": "^5.3.4",
     "react-split": "^2.0.14",
     "redux": "^5.0.1",
     "redux-location-state": "^2.8.2",
     "tslib": "^2.6.2",
-    "url": "^0.11.0",
+    "url": "^0.11.3",
     "use-query-params": "^2.2.1",
     "web-vitals": "^1.1.2",
-    "ydb-ui-components": "^3.6.0"
+    "ydb-ui-components": "^4.0.0"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -62,14 +62,14 @@
     "lint:js": "eslint  --ext .js,.jsx,.ts,.tsx .",
     "lint:styles": "stylelint 'src/**/*.{css,scss}'",
     "lint:other": "npm run prettier -- --check",
-    "prettier": "prettier --check '**/*.{json,yaml,yml,md}'",
+    "prettier": "prettier '**/*.{json,yaml,yml,md}'",
     "unimported": "npx unimported --no-cache",
     "package": "rm -rf dist && tsc -p tsconfig.package.json && copyfiles -u 1 'src/**/*.{css,scss,svg}' dist",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "prepublishOnly": "npm run package",
     "typecheck": "tsc --noEmit",
-    "prepare": "husky install",
+    "prepare": "husky",
     "test:e2e:install": "npx playwright install --with-deps chromium",
     "test:e2e": "npx playwright test --config=playwright.config.ts"
   },
@@ -103,7 +103,8 @@
     "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "jest-transform-css",
-      "^axios$": "axios/dist/node/axios.cjs"
+      "^axios$": "axios/dist/node/axios.cjs",
+      "^@gravity-ui/uikit/toaster-singleton-react-18$": "@gravity-ui/uikit/build/cjs/toaster-singleton-react-18.js"
     }
   },
   "browserslist": {
@@ -119,51 +120,53 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
-    "@gravity-ui/eslint-config": "^1.0.2",
-    "@gravity-ui/prettier-config": "^1.0.1",
-    "@gravity-ui/stylelint-config": "^1.0.1",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@gravity-ui/eslint-config": "^3.1.1",
+    "@gravity-ui/prettier-config": "^1.1.0",
+    "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@playwright/test": "^1.31.1",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/lodash": "^4.14.178",
-    "@types/numeral": "^2.0.2",
-    "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.58",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-router": "^5.1.17",
-    "@types/react-router-dom": "^5.3.2",
+    "@playwright/test": "^1.42.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.0",
+    "@types/numeral": "^2.0.5",
+    "@types/qs": "^6.9.14",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
     "copyfiles": "^2.4.1",
-    "eslint-config-prettier": "^8.3.0",
     "http-proxy-middleware": "^2.0.6",
-    "husky": "^7.0.4",
-    "jest-transform-css": "^4.0.1",
-    "lint-staged": "^12.3.7",
+    "husky": "^9.0.11",
+    "jest-transform-css": "^6.0.1",
+    "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.6",
-    "prettier": "^2.5.1",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-app-rewired": "^2.1.11",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-app-rewired": "^2.2.1",
+    "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "sass": "^1.32.8",
+    "sass": "^1.72.0",
     "source-map-explorer": "^2.5.3",
-    "stylelint": "^14.3.0",
-    "ts-jest": "^28.0.7",
-    "typescript": "^4.5.5"
+    "stylelint": "^15.0.0",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.4.3"
   },
   "peerDependencies": {
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "overrides": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "redux": "^5.0.1"
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "redux": "^5.0.1",
+    "typescript": "^5.4.3"
   }
 }

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

@@ -1 +0,0 @@
-export declare function useClustersList(): void;