ydb-embedded-ui 6.3.0 → 6.4.0

package/dist/containers/Tablets/Tablets.js

@@ -1,25 +1,120 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Select } from '@gravity-ui/uikit';
+import { ArrowsRotateRight } from '@gravity-ui/icons';
+import { Icon, Label, Text } from '@gravity-ui/uikit';
 import { skipToken } from '@reduxjs/toolkit/query';
-import ReactList from 'react-list';
+import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../components/Errors/ResponseError';
-import { Loader } from '../../components/Loader';
-import { Tablet } from '../../components/Tablet';
-import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
-import { setStateFilter, setTypeFilter, tabletsApi } from '../../store/reducers/tablets';
+import { InternalLink } from '../../components/InternalLink';
+import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
+import routes, { createHref } from '../../routes';
+import { selectTabletsWithFqdn, tabletsApi } from '../../store/reducers/tablets';
+import { ETabletState } from '../../types/api/tablet';
 import { cn } from '../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { calcUptime } from '../../utils/dataFormatters/dataFormatters';
 import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { mapTabletStateToLabelTheme } from '../../utils/tablet';
+import { getDefaultNodePath } from '../Node/NodePages';
 import i18n from './i18n';
-import './Tablets.scss';
 const b = cn('tablets');
-export const Tablets = ({ path, nodeId, className }) => {
+const columns = [
+    {
+        name: 'Type',
+        get header() {
+            return i18n('Type');
+        },
+        render: ({ row }) => {
+            return (_jsxs("span", { children: [row.Type, " ", row.Leader ? _jsx(Text, { color: "secondary", children: "leader" }) : ''] }));
+        },
+    },
+    {
+        name: 'TabletId',
+        get header() {
+            return i18n('Tablet');
+        },
+        render: ({ row }) => {
+            const tabletPath = row.TabletId &&
+                createHref(routes.tablet, { id: row.TabletId }, { nodeId: row.NodeId, type: row.Type });
+            return _jsx(InternalLink, { to: tabletPath, children: row.TabletId });
+        },
+    },
+    {
+        name: 'State',
+        get header() {
+            return i18n('State');
+        },
+        render: ({ row }) => {
+            return _jsx(Label, { theme: mapTabletStateToLabelTheme(row.State), children: row.State });
+        },
+    },
+    {
+        name: 'NodeId',
+        get header() {
+            return i18n('Node ID');
+        },
+        render: ({ row }) => {
+            const nodePath = row.NodeId === undefined ? undefined : getDefaultNodePath(row.NodeId);
+            return _jsx(InternalLink, { to: nodePath, children: row.NodeId });
+        },
+        align: 'right',
+    },
+    {
+        name: 'FQDN',
+        get header() {
+            return i18n('Node FQDN');
+        },
+        render: ({ row }) => {
+            if (!row.fqdn) {
+                return _jsx("span", { children: "\u2014" });
+            }
+            return _jsx(EntityStatus, { name: row.fqdn, showStatus: false, hasClipboardButton: true });
+        },
+    },
+    {
+        name: 'Generation',
+        get header() {
+            return i18n('Generation');
+        },
+        align: 'right',
+    },
+    {
+        name: 'Uptime',
+        get header() {
+            return i18n('Uptime');
+        },
+        render: ({ row }) => {
+            return calcUptime(row.ChangeTime);
+        },
+        sortAccessor: (row) => -Number(row.ChangeTime),
+        align: 'right',
+    },
+    {
+        name: 'Actions',
+        sortable: false,
+        resizeable: false,
+        header: '',
+        render: ({ row }) => {
+            return _jsx(TabletActions, Object.assign({}, row));
+        },
+    },
+];
+function TabletActions(tablet) {
+    const isDisabledRestart = tablet.State === ETabletState.Stopped;
     const dispatch = useTypedDispatch();
-    const { stateFilter, typeFilter } = useTypedSelector((state) => state.tablets);
+    return (_jsx(ButtonWithConfirmDialog, { buttonView: "outlined", dialogContent: i18n('dialog.kill'), onConfirmAction: () => {
+            return window.api.killTablet(tablet.TabletId);
+        }, onConfirmActionSuccess: () => {
+            dispatch(tabletsApi.util.invalidateTags(['All']));
+        }, buttonDisabled: isDisabledRestart, children: _jsx(Icon, { data: ArrowsRotateRight }) }));
+}
+export function Tablets({ nodeId, path, className }) {
     const { autorefresh } = useTypedSelector((state) => state.schema);
     let params = skipToken;
-    if (nodeId) {
-        params = { nodes: [String(nodeId)] };
+    const node = nodeId === undefined ? undefined : String(nodeId);
+    if (node !== undefined) {
+        params = { nodes: [String(node)] };
     }
     else if (path) {
         params = { path };
@@ -28,48 +123,12 @@ export const Tablets = ({ path, nodeId, className }) => {
         pollingInterval: autorefresh,
     });
     const loading = isFetching && currentData === undefined;
-    const tablets = React.useMemo(() => (currentData === null || currentData === void 0 ? void 0 : currentData.TabletStateInfo) || [], [currentData]);
-    const tabletsToRender = React.useMemo(() => {
-        let filteredTablets = tablets;
-        if (typeFilter.length > 0) {
-            filteredTablets = filteredTablets.filter((tablet) => typeFilter.some((filter) => tablet.Type === filter));
-        }
-        if (stateFilter.length > 0) {
-            filteredTablets = filteredTablets.filter((tablet) => stateFilter.some((filter) => tablet.State === filter));
-        }
-        return filteredTablets;
-    }, [tablets, stateFilter, typeFilter]);
-    const handleStateFilterChange = (value) => {
-        dispatch(setStateFilter(value));
-    };
-    const handleTypeFilterChange = (value) => {
-        dispatch(setTypeFilter(value));
-    };
-    const renderTablet = (tabletIndex) => {
-        return _jsx(Tablet, { tablet: tabletsToRender[tabletIndex] }, tabletIndex);
-    };
-    const renderContent = () => {
-        const states = Array.from(new Set(tablets.map((tablet) => tablet.State)))
-            .filter((state) => state !== undefined)
-            .map((item) => ({
-            value: item,
-            content: item,
-        }));
-        const types = Array.from(new Set(tablets.map((tablet) => tablet.Type)))
-            .filter((type) => type !== undefined)
-            .map((item) => ({
-            value: item,
-            content: item,
-        }));
-        return (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('header'), children: [_jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.state')}:`, options: states, value: stateFilter, onUpdate: handleStateFilterChange }), _jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.type')}:`, options: types, value: typeFilter, onUpdate: handleTypeFilterChange }), _jsx(TabletsOverall, { tablets: tablets })] }), _jsx("div", { className: b('items'), children: _jsx(ReactList, { itemRenderer: renderTablet, length: tabletsToRender.length, type: "uniform" }) })] }));
-    };
+    const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, node, path));
     if (loading) {
-        return _jsx(Loader, {});
+        return _jsx(TableSkeleton, {});
     }
-    else if (error) {
+    if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    else {
-        return tablets.length > 0 ? (renderContent()) : (_jsx("div", { className: "error", children: i18n('noTabletsData') }));
-    }
-};
+    return (_jsx("div", { className: b(null, className), children: _jsx(ResizeableDataTable, { columns: columns, data: tablets, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('noTabletsData') }) }));
+}

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

@@ -1,6 +1,11 @@
 {
-    "controls.type": "Type",
-    "controls.state": "State",
-    "controls.allItems": "All items",
-    "noTabletsData": "No tablets data"
+    "noTabletsData": "No tablets data",
+    "Type": "Type",
+    "Tablet": "Tablet",
+    "State": "State",
+    "Node ID": "Node ID",
+    "Node FQDN": "Node FQDN",
+    "Generation": "Generation",
+    "Uptime": "Uptime",
+    "dialog.kill": "The tablet will be restarted. Do you want to proceed?"
 }

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

@@ -1,2 +1,2 @@
-declare const _default: (key: "controls.type" | "controls.state" | "controls.allItems" | "noTabletsData", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "Uptime" | "Type" | "State" | "Generation" | "Tablet" | "Node ID" | "Node FQDN" | "noTabletsData" | "dialog.kill", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

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

@@ -1,5 +1,4 @@
 import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
-import ru from './ru.json';
 const COMPONENT = 'ydb-tablets';
-export default registerKeysets(COMPONENT, { ru, en });
+export default registerKeysets(COMPONENT, { en });

package/dist/containers/Tenant/Diagnostics/Diagnostics.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Tabs } from '@gravity-ui/uikit';
-import qs from 'qs';
 import { Helmet } from 'react-helmet-async';
-import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
+import { StringParam, useQueryParams } from 'use-query-params';
 import { Loader } from '../../../components/Loader';
 import routes, { createHref } from '../../../routes';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../store/reducers/tenant/constants';
@@ -35,9 +34,10 @@ function Diagnostics(props) {
     const dispatch = useTypedDispatch();
     const { currentSchemaPath, wasLoaded } = useTypedSelector((state) => state.schema);
     const { diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview } = useTypedSelector((state) => state.tenant);
-    const location = useLocation();
-    const queryParams = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
+    const [queryParams] = useQueryParams({
+        name: StringParam,
+        backend: StringParam,
+        clusterName: StringParam,
     });
     const { name: rootTenantName } = queryParams;
     const tenantName = isDatabaseEntityType(props.type) ? currentSchemaPath : rootTenantName;

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
+import { Icon } from '@gravity-ui/uikit';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { Icon } from '../../../../components/Icon';
 import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
 import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
 import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import i18n from './i18n';
+import keyIcon from '../../../../assets/icons/key.svg';
 import './HotKeys.scss';
 const b = cn('ydb-hot-keys');
 const tableColumnsIds = {
@@ -18,7 +19,7 @@ const tableColumnsIds = {
 const getHotKeysColumns = (keyColumnsIds = []) => {
     const keysColumns = keyColumnsIds.map((col, index) => ({
         name: col,
-        header: (_jsxs("div", { className: b('primary-key-column'), children: [_jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }), col] })),
+        header: (_jsxs("div", { className: b('primary-key-column'), children: [_jsx(Icon, { data: keyIcon, width: 12, height: 7 }), col] })),
         render: ({ row }) => row.keyValues[index],
         align: DataTable.RIGHT,
         sortable: false,

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Checkbox, Loader } from '@gravity-ui/uikit';
+import { Checkbox, Icon, Loader } from '@gravity-ui/uikit';
 import { Link } from 'react-router-dom';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { Icon } from '../../../../components/Icon';
 import { Illustration } from '../../../../components/Illustration';
 import { ProblemFilter } from '../../../../components/ProblemFilter';
 import { networkApi } from '../../../../store/reducers/network/network';
@@ -14,6 +13,7 @@ import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { getDefaultNodePath } from '../../../Node/NodePages';
 import { NodeNetwork } from './NodeNetwork/NodeNetwork';
 import { getConnectedNodesCount } from './utils';
+import networkIcon from '../../../../assets/icons/network.svg';
 import './Network.scss';
 const b = cn('network');
 export function Network({ path }) {
@@ -47,7 +47,7 @@ export function Network({ path }) {
                                                     setShowId(!showId);
                                                 }, checked: showId, children: "ID" }) }), _jsx("div", { className: b('checkbox-wrapper'), children: _jsx(Checkbox, { onUpdate: () => {
                                                     setShowRacks(!showRacks);
-                                                }, checked: showRacks, children: "Racks" }) })] }) }), _jsx(Nodes, { nodes: nodesGroupedByType, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode })] }), _jsx("div", { className: b('right'), children: clickedNode ? (_jsxs("div", { children: [_jsxs("div", { className: b('label'), children: ["Connectivity of node", ' ', _jsx(Link, { className: b('link'), to: getDefaultNodePath(clickedNode.NodeId), children: clickedNode.NodeId }), ' ', "to other nodes"] }), _jsx("div", { className: b('nodes-row'), children: _jsx(Nodes, { nodes: rightNodes, isRight: true, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode }) })] })) : (_jsxs("div", { className: b('placeholder'), children: [_jsx("div", { className: b('placeholder-img'), children: _jsx(Icon, { name: "network-placeholder", viewBox: "0 0 221 204", width: 221, height: 204 }) }), _jsx("div", { className: b('placeholder-text'), children: "Select node to see its connectivity to other nodes" })] })) })] }) }) }));
+                                                }, checked: showRacks, children: "Racks" }) })] }) }), _jsx(Nodes, { nodes: nodesGroupedByType, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode })] }), _jsx("div", { className: b('right'), children: clickedNode ? (_jsxs("div", { children: [_jsxs("div", { className: b('label'), children: ["Connectivity of node", ' ', _jsx(Link, { className: b('link'), to: getDefaultNodePath(clickedNode.NodeId), children: clickedNode.NodeId }), ' ', "to other nodes"] }), _jsx("div", { className: b('nodes-row'), children: _jsx(Nodes, { nodes: rightNodes, isRight: true, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode }) })] })) : (_jsxs("div", { className: b('placeholder'), children: [_jsx("div", { className: b('placeholder-img'), children: _jsx(Icon, { data: networkIcon, width: 221, height: 204 }) }), _jsx("div", { className: b('placeholder-text'), children: "Select node to see its connectivity to other nodes" })] })) })] }) }) }));
 }
 function Nodes({ nodes, isRight, showId, showRacks, clickedNode, onClickNode }) {
     const filter = useTypedSelector(selectProblemFilter);

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ArrowsRotateRight } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { DiagnosticCard } from '../../../../../components/DiagnosticCard/DiagnosticCard';
 import { EntityStatus } from '../../../../../components/EntityStatus/EntityStatus';
@@ -8,7 +9,6 @@ import { Loader } from '../../../../../components/Loader';
 import { hcStatusToColorFlag } from '../../../../../store/reducers/healthcheckInfo/utils';
 import { cn } from '../../../../../utils/cn';
 import i18n from './i18n';
-import updateArrow from '../../../../../assets/icons/update-arrow.svg';
 import './Healthcheck.scss';
 const b = cn('healthcheck');
 export function HealthcheckPreview(props) {
@@ -22,7 +22,7 @@ export function HealthcheckPreview(props) {
                                 // FIXME: refactor card to remove the button from the anchor link.
                                 event.preventDefault();
                                 onUpdate();
-                            }, loading: loading, view: "flat-secondary", children: _jsx(Icon, { data: updateArrow, width: 20, height: 20 }) })] }), _jsx("div", { className: b('self-check-status-indicator', { [modifier]: true }), children: selfCheckResult })] }));
+                            }, loading: loading, view: "flat-secondary", children: _jsx(Icon, { data: ArrowsRotateRight, size: 20 }) })] }), _jsx("div", { className: b('self-check-status-indicator', { [modifier]: true }), children: selfCheckResult })] }));
     };
     const renderContent = () => {
         if (error) {

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.js

@@ -1,21 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useThemeValue } from '@gravity-ui/uikit';
-import { useLocation } from 'react-router';
-import { parseQuery } from '../../../routes';
 import { TENANT_PAGES_IDS } from '../../../store/reducers/tenant/constants';
 import { cn } from '../../../utils/cn';
-import { TENANT_INITIAL_PAGE_KEY } from '../../../utils/constants';
-import { useSetting } from '../../../utils/hooks';
+import { useTypedSelector } from '../../../utils/hooks';
 import Diagnostics from '../Diagnostics/Diagnostics';
 import { Query } from '../Query/Query';
 import './ObjectGeneral.scss';
 const b = cn('object-general');
 function ObjectGeneral(props) {
-    const location = useLocation();
     const theme = useThemeValue();
-    const [initialPage] = useSetting(TENANT_INITIAL_PAGE_KEY);
-    const queryParams = parseQuery(location);
-    const { tenantPage = initialPage } = queryParams;
+    const { tenantPage } = useTypedSelector((state) => state.tenant);
     const renderTabContent = () => {
         const { type, additionalTenantProps, additionalNodesProps, tenantName } = props;
         switch (tenantPage) {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
-import { Button, Tabs } from '@gravity-ui/uikit';
+import { LayoutHeaderCellsLargeFill } from '@gravity-ui/icons';
+import { Button, Icon, Tabs } from '@gravity-ui/uikit';
 import qs from 'qs';
 import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
 import { ClipboardButton } from '../../../components/ClipboardButton';
-import { Icon } from '../../../components/Icon';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import { CDCStreamOverview, PersQueueGroupOverview, } from '../../../components/InfoViewer/schemaOverview';
 import { Loader } from '../../../components/Loader';
@@ -138,7 +138,7 @@ export function ObjectSummary({ type, subType, onCollapseSummary, onExpandSummar
     };
     const renderCommonInfoControls = () => {
         const showPreview = isTableType(type) && !isIndexTableType(subType);
-        return (_jsxs(React.Fragment, { children: [showPreview && (_jsx(Button, { view: "flat-secondary", onClick: onOpenPreview, title: i18n('summary.showPreview'), children: _jsx(Icon, { name: "tablePreview", viewBox: '0 0 16 16', height: 16, width: 16 }) })), currentSchemaPath && (_jsx(ClipboardButton, { text: currentSchemaPath, view: "flat-secondary", title: i18n('summary.copySchemaPath') })), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseInfoHandler, onExpand: onExpandInfoHandler, isCollapsed: commonInfoVisibilityState.collapsed, initialDirection: "bottom" })] }));
+        return (_jsxs(React.Fragment, { children: [showPreview && (_jsx(Button, { view: "flat-secondary", onClick: onOpenPreview, title: i18n('summary.showPreview'), children: _jsx(Icon, { data: LayoutHeaderCellsLargeFill }) })), currentSchemaPath && (_jsx(ClipboardButton, { text: currentSchemaPath, view: "flat-secondary", title: i18n('summary.copySchemaPath') })), _jsx(PaneVisibilityToggleButtons, { onCollapse: onCollapseInfoHandler, onExpand: onExpandInfoHandler, isCollapsed: commonInfoVisibilityState.collapsed, initialDirection: "bottom" })] }));
     };
     const renderEntityTypeBadge = () => {
         const { Status, Reason } = currentItem;

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.js

@@ -97,7 +97,7 @@ export function ExplainResult(props) {
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderAstExplain = () => {
-        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent" }) }));
+        const content = (_jsx("div", { className: b('ast'), children: _jsx(MonacoEditor, { language: LANGUAGE_S_EXPRESSION_ID, value: props.ast, options: EDITOR_OPTIONS, wrappingIndent: "indent", theme: `vs-${props.theme}` }) }));
         return (_jsxs(React.Fragment, { children: [content, isFullscreen && _jsx(Fullscreen, { children: content })] }));
     };
     const renderGraph = () => {

package/dist/containers/Tenant/Query/Issues/Issues.js

@@ -1,13 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { CircleExclamationFill, CircleInfoFill, CircleXmarkFill, TriangleExclamationFill, } from '@gravity-ui/icons';
 import { ArrowToggle, Button, Icon } from '@gravity-ui/uikit';
 import ShortyString from '../../../../components/ShortyString/ShortyString';
 import { cn } from '../../../../utils/cn';
 import { getSeverity } from './models';
-import warningIcon from '../../../../assets/icons/circle-exclamation.svg';
-import infoIcon from '../../../../assets/icons/circle-info.svg';
-import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
-import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
 import './Issues.scss';
 const blockWrapper = cn('kv-result-issues');
 const blockIssues = cn('kv-issues');
@@ -55,15 +52,15 @@ function IssueList(props) {
     return (_jsx("div", { className: blockIssue('list'), children: issues.map((issue, index) => (_jsx(Issue, { issue: issue, level: level, expanded: expanded }, index))) }));
 }
 const severityIcons = {
-    S_INFO: infoIcon,
-    S_WARNING: warningIcon,
-    S_ERROR: errorIcon,
-    S_FATAL: fatalIcon,
+    S_INFO: CircleInfoFill,
+    S_WARNING: CircleExclamationFill,
+    S_ERROR: TriangleExclamationFill,
+    S_FATAL: CircleXmarkFill,
 };
 const blockIssueSeverity = cn('yql-issue-severity');
 function IssueSeverity({ severity }) {
     const shortenSeverity = severity.slice(2).toLowerCase();
-    return (_jsxs("span", { className: blockIssueSeverity({ severity: shortenSeverity }), children: [_jsx(Icon, { className: blockIssueSeverity('icon'), data: severityIcons[severity], size: 16 }), _jsx("span", { className: blockIssueSeverity('title'), children: shortenSeverity })] }));
+    return (_jsxs("span", { className: blockIssueSeverity({ severity: shortenSeverity }), children: [_jsx(Icon, { className: blockIssueSeverity('icon'), data: severityIcons[severity] }), _jsx("span", { className: blockIssueSeverity('title'), children: shortenSeverity })] }));
 }
 function getIssuePosition(issue) {
     const { position = {} } = issue;

package/dist/containers/Tenant/Query/Preview/Preview.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Loader } from '@gravity-ui/uikit';
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon, Loader } from '@gravity-ui/uikit';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
-import { Icon } from '../../../../components/Icon';
 import { QueryResultTable } from '../../../../components/QueryResultTable';
 import { previewApi } from '../../../../store/reducers/preview';
 import { setShowPreview } from '../../../../store/reducers/schema/schema';
@@ -26,7 +26,7 @@ export const Preview = ({ database, type }) => {
         dispatch(setShowPreview(false));
     };
     const renderHeader = () => {
-        return (_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('title'), children: [i18n('preview.title'), ' ', _jsx("div", { className: b('table-name'), children: currentSchemaPath })] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, { view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close'), children: _jsx(Icon, { name: "close", viewBox: '0 0 16 16', width: 16, height: 16 }) })] })] }));
+        return (_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('title'), children: [i18n('preview.title'), ' ', _jsx("div", { className: b('table-name'), children: currentSchemaPath })] }), _jsxs("div", { className: b('controls-left'), children: [_jsx(EnableFullscreenButton, { disabled: Boolean(error) }), _jsx(Button, { view: "flat-secondary", onClick: handleClosePreview, title: i18n('preview.close'), children: _jsx(Icon, { data: Xmark, size: 18 }) })] })] }));
     };
     if (loading) {
         return (_jsx("div", { className: b('loader-container'), children: _jsx(Loader, { size: "m" }) }));

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.d.ts

@@ -28,8 +28,8 @@ interface QueryEditorProps {
 declare function QueryEditor(props: QueryEditorProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react-redux").ConnectedComponent<typeof QueryEditor, {
     theme: string;
-    type?: EPathType | undefined;
     path: string;
+    type?: EPathType | undefined;
     changeUserInput: (arg: {
         input: string;
     }) => void;

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Button, DropdownMenu } from '@gravity-ui/uikit';
-import { Icon } from '../../../../components/Icon';
+import { ChevronDown, PlayFill } from '@gravity-ui/icons';
+import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
 import { LabelWithPopover } from '../../../../components/LabelWithPopover';
 import { cn } from '../../../../utils/cn';
 import { QUERY_MODES, QUERY_MODES_TITLES } from '../../../../utils/query';
@@ -48,10 +48,10 @@ export const QueryEditorControls = ({ onRunButtonClick, runIsLoading, onExplainB
     const explainView = highlightedAction === 'explain' ? 'action' : undefined;
     return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('left'), children: [_jsxs(Button, { onClick: () => {
                             onRunButtonClick(queryMode);
-                        }, disabled: disabled, loading: runIsLoading, view: runView, children: [_jsx(Icon, { name: "startPlay", viewBox: "0 0 16 16", width: 16, height: 16 }), 'Run'] }), _jsx(Button, { onClick: () => {
+                        }, disabled: disabled, loading: runIsLoading, view: runView, children: [_jsx(Icon, { data: PlayFill, size: 14 }), 'Run'] }), _jsx(Button, { onClick: () => {
                             onExplainButtonClick(queryMode);
                         }, disabled: disabled, loading: explainIsLoading, view: explainView, children: "Explain" }), _jsx("div", { className: b('mode-selector'), children: _jsx(DropdownMenu, { items: querySelectorMenuItems, popupProps: {
                                 className: b('mode-selector__popup'),
                                 qa: queryModeSelectorPopupQa,
-                            }, switcher: _jsx(Button, { className: b('mode-selector__button'), qa: queryModeSelectorQa, children: _jsxs("span", { className: b('mode-selector__button-content'), children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { name: "chevron-down", width: 16, height: 16 })] }) }) }) })] }), _jsx(SaveQuery, { savedQueries: savedQueries, onSaveQuery: onSaveQueryClick, saveButtonDisabled: disabled })] }));
+                            }, switcher: _jsx(Button, { className: b('mode-selector__button'), qa: queryModeSelectorQa, children: _jsxs("span", { className: b('mode-selector__button-content'), children: [`${i18n('controls.query-mode-selector_type')} ${QueryModeSelectorOptions[queryMode].title}`, _jsx(Icon, { data: ChevronDown })] }) }) }) })] }), _jsx(SaveQuery, { savedQueries: savedQueries, onSaveQuery: onSaveQueryClick, saveButtonDisabled: disabled })] }));
 };

package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { Pencil, TrashBin } from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import { Button, Dialog } from '@gravity-ui/uikit';
-import { Icon } from '../../../../components/Icon';
+import { Button, Dialog, Icon } from '@gravity-ui/uikit';
 import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import { TruncatedQuery } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { setQueryNameToEdit } from '../../../../store/reducers/saveQuery';
@@ -56,7 +56,7 @@ export const SavedQueries = ({ savedQueries, changeUserInput, onDeleteQuery }) =
         {
             name: 'body',
             header: 'Query Text',
-            render: ({ row: query }) => (_jsxs("div", { className: b('query'), children: [_jsx("div", { className: b('query-body'), children: _jsx(TruncatedQuery, { value: query.body, maxQueryHeight: MAX_QUERY_HEIGHT }) }), _jsxs("span", { className: b('controls'), children: [_jsx(Button, { view: "flat-secondary", children: _jsx(Icon, { name: "pencil", viewBox: "0 0 24 24" }) }), _jsx(Button, { view: "flat-secondary", onClick: onDeleteQueryClick(query.name), children: _jsx(Icon, { name: "trash", viewBox: "0 0 24 24" }) })] })] })),
+            render: ({ row: query }) => (_jsxs("div", { className: b('query'), children: [_jsx("div", { className: b('query-body'), children: _jsx(TruncatedQuery, { value: query.body, maxQueryHeight: MAX_QUERY_HEIGHT }) }), _jsxs("span", { className: b('controls'), children: [_jsx(Button, { view: "flat-secondary", children: _jsx(Icon, { data: Pencil }) }), _jsx(Button, { view: "flat-secondary", onClick: onDeleteQueryClick(query.name), children: _jsx(Icon, { data: TrashBin }) })] })] })),
             sortable: false,
             resizeMinWidth: 650,
         },

package/dist/containers/Tenant/Schema/SchemaViewer/helpers.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import { Icon } from '../../../../components/Icon';
+import { Icon } from '@gravity-ui/uikit';
 import { EColumnCodec } from '../../../../types/api/schema';
 import { isColumnEntityType, isExternalTableType, isRowTableType, isTableType, } from '../../utils/schema';
+import keyIcon from '../../../../assets/icons/key.svg';
 export const SchemaViewerColumns = {
     id: 'Id',
     name: 'Name',
@@ -94,7 +95,7 @@ export function prepareSchemaTableColumns(options) {
             // Values in keyColumnsOrderValues are always negative, so it will be 1 for not key columns
             sortAccessor: (row) => (row.Id && keyColumnsOrderValues[row.Id]) || 1,
             render: ({ row }) => {
-                return row.Id && options.keyColumnIds.includes(row.Id) ? (_jsx("div", { className: options.b('key-icon'), children: _jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }) })) : null;
+                return row.Id && options.keyColumnIds.includes(row.Id) ? (_jsx("div", { className: options.b('key-icon'), children: _jsx(Icon, { data: keyIcon, width: 12, height: 7 }) })) : null;
             },
         });
     }

package/dist/containers/Tenant/utils/ToggleButton.scss

@@ -17,8 +17,6 @@
     &_left.rotate {
         transform: rotate(90deg);
     }
-    &_top {
-    }
 
     &_top.rotate {
         transform: rotate(180deg);

package/dist/containers/Tenant/utils/paneVisibilityToggleHelpers.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Button } from '@gravity-ui/uikit';
-import { Icon } from '../../../components/Icon';
+import { ChevronsUp } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
 import { cn } from '../../../utils/cn';
 import './ToggleButton.scss';
 export var PaneVisibilityActionTypes;
@@ -44,7 +44,7 @@ const b = cn('kv-pane-visibility-button');
 export function PaneVisibilityToggleButtons({ onCollapse, onExpand, isCollapsed, initialDirection = 'top', className, }) {
     return (_jsxs(React.Fragment, { children: [_jsx(Button, { view: "flat-secondary", onClick: onCollapse, className: b({
                     hidden: isCollapsed,
-                }, className), title: "Collapse", children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }) }) }), _jsx(Button, { view: "flat-secondary", onClick: onExpand, className: b({
+                }, className), title: "Collapse", children: _jsx(Icon, { data: ChevronsUp, className: b({ [initialDirection]: true }) }) }), _jsx(Button, { view: "flat-secondary", onClick: onExpand, className: b({
                     hidden: !isCollapsed,
-                }, className), title: "Expand", children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }, 'rotate') }) })] }));
+                }, className), title: "Expand", children: _jsx(Icon, { data: ChevronsUp, className: b({ [initialDirection]: true }, 'rotate') }) })] }));
 }

package/dist/containers/Tenant/utils/schemaControls.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from '@gravity-ui/uikit';
-import { Icon } from '../../../components/Icon';
+import { LayoutHeaderCellsLargeFill } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
 import { setShowPreview } from '../../../store/reducers/schema/schema';
 import { TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
 import { setQueryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
@@ -18,7 +18,7 @@ const bindActions = (path, dispatch, additionalEffects) => {
 };
 export const getControls = (dispatch, additionalEffects) => (path, type) => {
     const options = bindActions(path, dispatch, additionalEffects);
-    const openPreview = (_jsx(Button, { view: "flat-secondary", onClick: options.openPreview, title: i18n('actions.openPreview'), size: "s", children: _jsx(Icon, { name: "tablePreview" }) }));
+    const openPreview = (_jsx(Button, { view: "flat-secondary", onClick: options.openPreview, title: i18n('actions.openPreview'), size: "s", children: _jsx(Icon, { data: LayoutHeaderCellsLargeFill }) }));
     const nodeTypeToControls = {
         database: undefined,
         directory: undefined,

package/dist/containers/VDiskPage/VDiskPage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ArrowsOppositeToDots } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { Helmet } from 'react-helmet-async';
@@ -21,7 +22,6 @@ import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
 import { getSeverityColor } from '../../utils/disks/helpers';
 import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { vDiskPageKeyset } from './i18n';
-import ArrowsOppositeToDotsIcon from '@gravity-ui/icons/svgs/arrows-opposite-to-dots.svg';
 import './VDiskPage.scss';
 const vDiskPageCn = cn('ydb-vdisk-page');
 export function VDiskPage() {
@@ -84,7 +84,7 @@ export function VDiskPage() {
         return (_jsx(DiskPageTitle, { entityName: vDiskPageKeyset('vdisk'), status: getSeverityColor(Severity), id: stringifyVdiskId(vDiskData === null || vDiskData === void 0 ? void 0 : vDiskData.VDiskId) }));
     };
     const renderControls = () => {
-        return (_jsx("div", { children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleEvictVDisk, onConfirmActionSuccess: handleAfterEvictVDisk, buttonDisabled: !VDiskId, buttonView: "normal", dialogContent: vDiskPageKeyset('evict-vdisk-dialog'), children: [_jsx(Icon, { data: ArrowsOppositeToDotsIcon }), vDiskPageKeyset('evict-vdisk-button')] }) }));
+        return (_jsx("div", { children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleEvictVDisk, onConfirmActionSuccess: handleAfterEvictVDisk, buttonDisabled: !VDiskId, buttonView: "normal", dialogContent: vDiskPageKeyset('evict-vdisk-dialog'), children: [_jsx(Icon, { data: ArrowsOppositeToDots }), vDiskPageKeyset('evict-vdisk-button')] }) }));
     };
     const renderInfo = () => {
         return _jsx(VDiskInfo, { data: vDiskData, isVDiskPage: true });

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

@@ -1 +1 @@
-export declare const vDiskPageKeyset: (key: "node" | "group" | "pdisk" | "vdisk" | "fqdn" | "evict-vdisk-button" | "evict-vdisk-dialog", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const vDiskPageKeyset: (key: "node" | "fqdn" | "group" | "pdisk" | "vdisk" | "evict-vdisk-button" | "evict-vdisk-dialog", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/routes.d.ts

@@ -20,7 +20,7 @@ declare const routes: {
 };
 export default routes;
 export declare const parseQuery: (location: Location) => qs.ParsedQs;
-export type Query = Record<string | number, string | number | string[] | number[] | undefined>;
+export type Query = Record<string | number, string | number | string[] | number[] | undefined | null>;
 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): {