ydb-embedded-ui 6.3.0 → 6.5.0

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

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

package/dist/containers/AsideNavigation/useNavigationMenuItems.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Pulse, Terminal } from '@gravity-ui/icons';
 import { useHistory, useLocation } from 'react-router';
 import routes, { parseQuery } from '../../routes';
 import { TENANT_PAGE, TENANT_PAGES_IDS } from '../../store/reducers/tenant/constants';
@@ -6,13 +7,11 @@ import { TENANT_INITIAL_PAGE_KEY } from '../../utils/constants';
 import { useSetting, useTypedSelector } from '../../utils/hooks';
 import { getTenantPath } from '../Tenant/TenantPages';
 import i18n from './i18n';
-import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
-import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
 export function useNavigationMenuItems() {
     const location = useLocation();
     const history = useHistory();
-    const [initialTenantPage, setInitialTenantPage] = useSetting(TENANT_INITIAL_PAGE_KEY);
-    const { tenantPage = initialTenantPage } = useTypedSelector((state) => state.tenant);
+    const [, setInitialTenantPage] = useSetting(TENANT_INITIAL_PAGE_KEY);
+    const { tenantPage } = useTypedSelector((state) => state.tenant);
     const { pathname } = location;
     const queryParams = parseQuery(location);
     const isTenantPage = pathname === routes.tenant;
@@ -24,14 +23,14 @@ export function useNavigationMenuItems() {
             {
                 id: TENANT_PAGES_IDS.query,
                 title: i18n('pages.query'),
-                icon: terminalIcon,
+                icon: Terminal,
                 iconSize: 20,
                 location: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.query })),
             },
             {
                 id: TENANT_PAGES_IDS.diagnostics,
                 title: i18n('pages.diagnostics'),
-                icon: pulseIcon,
+                icon: Pulse,
                 iconSize: 20,
                 location: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics })),
             },

package/dist/containers/Authentication/Authentication.js

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

package/dist/containers/Clusters/Clusters.js

@@ -14,7 +14,7 @@ import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { getMinorVersion } from '../../utils/versions';
 import { ClustersStatistics } from './ClustersStatistics';
 import { CLUSTERS_COLUMNS, CLUSTERS_COLUMNS_WIDTH_LS_KEY } from './columns';
-import { CLUSTER_STATUSES, COLUMNS_NAMES, COLUMNS_TITLES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY, } from './constants';
+import { COLUMNS_NAMES, COLUMNS_TITLES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY } from './constants';
 import i18n from './i18n';
 import { b } from './shared';
 import { useSelectedColumns } from './useSelectedColumns';
@@ -67,10 +67,15 @@ export function Clusters() {
         return filterClusters(clusters !== null && clusters !== void 0 ? clusters : [], { clusterName, status, service, version });
     }, [clusterName, clusters, service, status, version]);
     const aggregation = React.useMemo(() => aggregateClustersInfo(filteredClusters), [filteredClusters]);
+    const statuses = React.useMemo(() => {
+        return Array.from(new Set((clusters !== null && clusters !== void 0 ? clusters : []).map((cluster) => cluster.status).filter(Boolean)))
+            .sort()
+            .map((el) => ({ value: el, content: el }));
+    }, [clusters]);
     if (query.isLoading) {
         return _jsx(Loader, { size: "l" });
     }
-    return (_jsxs("div", { className: b(), children: [_jsx(Helmet, { children: _jsx("title", { children: i18n('page_title') }) }), _jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", { className: b('controls'), children: [_jsx("div", { className: b('control', { wide: true }), children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: CLUSTER_STATUSES, onUpdate: changeStatus, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(TableColumnSetup, { popupWidth: 242, items: columnsToSelect, showStatus: true, onUpdate: setColumns, sortable: false }, "TableColumnSetup") })] }), query.isError ? _jsx(ResponseError, { error: query.error, className: b('error') }) : null, _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: CLUSTERS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
+    return (_jsxs("div", { className: b(), children: [_jsx(Helmet, { children: _jsx("title", { children: i18n('page_title') }) }), _jsx(ClustersStatistics, { stats: aggregation, count: filteredClusters.length }), _jsxs("div", { className: b('controls'), children: [_jsx("div", { className: b('control', { wide: true }), children: _jsx(Search, { placeholder: i18n('controls_search-placeholder'), onChange: changeClusterName, value: clusterName }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_status-select-label'), value: status, options: statuses, onUpdate: changeStatus, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_service-select-label'), value: service, options: servicesToSelect, onUpdate: changeService, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(Select, { multiple: true, filterable: true, hasClear: true, placeholder: i18n('controls_select-placeholder'), label: i18n('controls_version-select-label'), value: version, options: versions, onUpdate: changeVersion, width: "max" }) }), _jsx("div", { className: b('control'), children: _jsx(TableColumnSetup, { popupWidth: 242, items: columnsToSelect, showStatus: true, onUpdate: setColumns, sortable: false }, "TableColumnSetup") })] }), query.isError ? _jsx(ResponseError, { error: query.error, className: b('error') }) : null, _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(ResizeableDataTable, { columnsWidthLSKey: CLUSTERS_COLUMNS_WIDTH_LS_KEY, wrapperClassName: b('table'), data: filteredClusters, columns: columnsToShow, settings: Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false }), initialSortOrder: {
                             columnId: COLUMNS_NAMES.TITLE,
                             order: DataTable.ASCENDING,
                         } }) }) })] }));

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

@@ -1,4 +1,3 @@
-import type { SelectOption } from '@gravity-ui/uikit';
 export declare const SELECTED_COLUMNS_KEY = "selectedColumns";
 export declare const COLUMNS_NAMES: {
     readonly TITLE: "title";
@@ -15,7 +14,7 @@ export declare const COLUMNS_NAMES: {
     readonly DESCRIPTION: "description";
     readonly BALANCER: "balancer";
 };
-export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "tenants" | "versions" | "status" | "service" | "hosts" | "balancer" | "title" | "owner" | "load")[];
+export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "status" | "tenants" | "versions" | "service" | "hosts" | "balancer" | "title" | "owner" | "load")[];
 export declare const COLUMNS_TITLES: {
     readonly title: "Cluster";
     readonly versions: "Versions";
@@ -31,4 +30,3 @@ export declare const COLUMNS_TITLES: {
     readonly description: "Description";
     readonly balancer: "Balancer";
 };
-export declare const CLUSTER_STATUSES: SelectOption[];

package/dist/containers/Clusters/constants.js

@@ -42,21 +42,3 @@ export const COLUMNS_TITLES = {
     [COLUMNS_NAMES.DESCRIPTION]: 'Description',
     [COLUMNS_NAMES.BALANCER]: 'Balancer',
 };
-export const CLUSTER_STATUSES = [
-    {
-        value: 'production',
-        content: 'Production',
-    },
-    {
-        value: 'preprod',
-        content: 'Preprod',
-    },
-    {
-        value: 'testing',
-        content: 'Testing',
-    },
-    {
-        value: 'development',
-        content: 'Development',
-    },
-];

package/dist/containers/Node/NodeStructure/Pdisk.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ArrowUpRightFromSquare, CircleInfoFill } from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import { ArrowToggle, Button, Popover } from '@gravity-ui/uikit';
+import { ArrowToggle, Button, Icon, Popover } from '@gravity-ui/uikit';
 import isEmpty from 'lodash/isEmpty';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
-import { Icon } from '../../../components/Icon';
 import { PDiskInfo } from '../../../components/PDiskInfo/PDiskInfo';
 import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
 import { EFlag } from '../../../types/api/enums';
@@ -49,7 +49,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
                         vDiskSlotId,
                     });
                 }
-                return (_jsxs("div", { className: b('vdisk-id', { selected: row.id === selectedVdiskId }), children: [_jsx("span", { children: vDiskSlotId }), vdiskInternalViewerLink && (_jsx(Button, { size: "s", className: b('external-button', { hidden: true }), href: vdiskInternalViewerLink, target: "_blank", title: i18n('vdisk.developer-ui-button-title'), children: _jsx(Icon, { name: "external" }) }))] }));
+                return (_jsxs("div", { className: b('vdisk-id', { selected: row.id === selectedVdiskId }), children: [_jsx("span", { children: vDiskSlotId }), vdiskInternalViewerLink && (_jsx(Button, { size: "s", className: b('external-button', { hidden: true }), href: vdiskInternalViewerLink, target: "_blank", title: i18n('vdisk.developer-ui-button-title'), children: _jsx(Icon, { data: ArrowUpRightFromSquare }) }))] }));
             },
             align: DataTable.LEFT,
         },
@@ -80,7 +80,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             render: ({ row }) => {
                 return (_jsx(Popover, { placement: ['right'], content: _jsx(Vdisk, { data: row }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
                             selected: row.id === selectedVdiskId,
-                        }), children: _jsx(Icon, { name: "information", viewBox: "0 0 512 512", height: 16, width: 16 }) }) }));
+                        }), children: _jsx(Icon, { data: CircleInfoFill, size: 18 }) }) }));
             },
             sortable: false,
         },

package/dist/containers/Nodes/Nodes.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ASCENDING } from '@gravity-ui/react-data-table/build/esm/lib/constants';
 import { skipToken } from '@reduxjs/toolkit/query';
+import { StringParam, useQueryParams } from 'use-query-params';
 import { EntitiesCount } from '../../components/EntitiesCount';
 import { AccessDenied } from '../../components/Errors/403';
 import { ResponseError } from '../../components/Errors/ResponseError';
@@ -11,21 +12,27 @@ import { ResizeableDataTable } from '../../components/ResizeableDataTable/Resize
 import { Search } from '../../components/Search';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { UptimeFilter } from '../../components/UptimeFIlter';
-import { nodesApi, setInitialState, setSearchValue, setSort, setUptimeFilter, } from '../../store/reducers/nodes/nodes';
+import { nodesApi } from '../../store/reducers/nodes/nodes';
 import { filterNodes } from '../../store/reducers/nodes/selectors';
 import { ProblemFilterValues, changeFilter } from '../../store/reducers/settings/settings';
 import { cn } from '../../utils/cn';
 import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../../utils/constants';
 import { useSetting, useTableSort, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
-import { NodesUptimeFilterValues, isSortableNodesProperty, isUnavailableNode, } from '../../utils/nodes';
+import { NodesUptimeFilterValues, isSortableNodesProperty, isUnavailableNode, nodesUptimeFilterValuesSchema, } from '../../utils/nodes';
 import { NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns } from './getNodesColumns';
 import i18n from './i18n';
 import './Nodes.scss';
 const b = cn('ydb-nodes');
 export const Nodes = ({ path, additionalNodesProps = {} }) => {
+    var _a;
+    const [queryParams, setQueryParams] = useQueryParams({
+        uptimeFilter: StringParam,
+        search: StringParam,
+    });
+    const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
+    const searchValue = (_a = queryParams.search) !== null && _a !== void 0 ? _a : '';
     const dispatch = useTypedDispatch();
     const isClusterNodes = !path;
-    const { uptimeFilter, searchValue, sortOrder = ASCENDING, sortValue = 'NodeId', } = useTypedSelector((state) => state.nodes);
     const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
     const { autorefresh } = useTypedSelector((state) => state.schema);
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
@@ -39,25 +46,22 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         pollingInterval: autoRefreshInterval,
     });
     const { currentData: data, isLoading, error } = useGetComputeNodes ? computeQuery : nodesQuery;
-    const [sort, handleSort] = useTableSort({ sortValue, sortOrder }, (sortParams) => dispatch(setSort(sortParams)));
+    const [sortValue, setSortValue] = React.useState({
+        sortValue: 'NodeId',
+        sortOrder: ASCENDING,
+    });
+    const [sort, handleSort] = useTableSort(sortValue, (sortParams) => {
+        setSortValue(sortParams);
+    });
     const handleSearchQueryChange = (value) => {
-        dispatch(setSearchValue(value));
+        setQueryParams({ search: value || undefined }, 'replaceIn');
     };
     const handleProblemFilterChange = (value) => {
         dispatch(changeFilter(value));
     };
     const handleUptimeFilterChange = (value) => {
-        dispatch(setUptimeFilter(value));
+        setQueryParams({ uptimeFilter: value }, 'replaceIn');
     };
-    // Since Nodes component is used in several places,
-    // we need to reset filters, searchValue
-    // in nodes reducer when path changes
-    React.useEffect(() => {
-        return () => {
-            // Clean data on component unmount
-            dispatch(setInitialState());
-        };
-    }, [dispatch, path]);
     const nodes = React.useMemo(() => {
         return filterNodes(data === null || data === void 0 ? void 0 : data.Nodes, { searchValue, uptimeFilter, problemFilter });
     }, [data, searchValue, uptimeFilter, problemFilter]);

package/dist/containers/Nodes/VirtualNodes.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { StringParam, useQueryParams } from 'use-query-params';
 import { EntitiesCount } from '../../components/EntitiesCount';
 import { AccessDenied } from '../../components/Errors/403';
 import { ResponseError } from '../../components/Errors/ResponseError';
@@ -8,18 +9,25 @@ import { ProblemFilter } from '../../components/ProblemFilter';
 import { Search } from '../../components/Search';
 import { UptimeFilter } from '../../components/UptimeFIlter';
 import { ResizeableVirtualTable } from '../../components/VirtualTable/ResizeableVirtualTable';
-import { ProblemFilterValues } from '../../store/reducers/settings/settings';
+import { ProblemFilterValues, changeFilter } from '../../store/reducers/settings/settings';
 import { cn } from '../../utils/cn';
-import { NodesUptimeFilterValues, getProblemParamValue, getUptimeParamValue, isSortableNodesProperty, isUnavailableNode, } from '../../utils/nodes';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { NodesUptimeFilterValues, getProblemParamValue, getUptimeParamValue, isSortableNodesProperty, isUnavailableNode, nodesUptimeFilterValuesSchema, } from '../../utils/nodes';
 import { getNodes } from './getNodes';
 import { NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns } from './getNodesColumns';
 import i18n from './i18n';
 import './Nodes.scss';
 const b = cn('ydb-nodes');
 export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) => {
-    const [searchValue, setSearchValue] = React.useState('');
-    const [problemFilter, setProblemFilter] = React.useState(ProblemFilterValues.ALL);
-    const [uptimeFilter, setUptimeFilter] = React.useState(NodesUptimeFilterValues.All);
+    var _a;
+    const [queryParams, setQueryParams] = useQueryParams({
+        uptimeFilter: StringParam,
+        search: StringParam,
+    });
+    const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
+    const searchValue = (_a = queryParams.search) !== null && _a !== void 0 ? _a : '';
+    const dispatch = useTypedDispatch();
+    const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
     const filters = React.useMemo(() => {
         return [path, searchValue, problemFilter, uptimeFilter];
     }, [path, searchValue, problemFilter, uptimeFilter]);
@@ -39,7 +47,16 @@ export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) =>
         return b('node', { unavailable: isUnavailableNode(row) });
     };
     const renderControls = ({ totalEntities, foundEntities, inited }) => {
-        return (_jsxs(React.Fragment, { children: [_jsx(Search, { onChange: setSearchValue, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: setProblemFilter }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: setUptimeFilter }), _jsx(EntitiesCount, { total: totalEntities, current: foundEntities, label: 'Nodes', loading: !inited })] }));
+        const handleSearchQueryChange = (value) => {
+            setQueryParams({ search: value || undefined }, 'replaceIn');
+        };
+        const handleProblemFilterChange = (value) => {
+            dispatch(changeFilter(value));
+        };
+        const handleUptimeFilterChange = (value) => {
+            setQueryParams({ uptimeFilter: value }, 'replaceIn');
+        };
+        return (_jsxs(React.Fragment, { children: [_jsx(Search, { onChange: handleSearchQueryChange, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: handleUptimeFilterChange }), _jsx(EntitiesCount, { total: totalEntities, current: foundEntities, label: 'Nodes', loading: !inited })] }));
     };
     const renderEmptyDataMessage = () => {
         if (problemFilter !== ProblemFilterValues.ALL ||

package/dist/containers/PDiskPage/PDiskPage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ArrowRotateLeft } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { Helmet } from 'react-helmet-async';
@@ -19,12 +20,12 @@ import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { PDiskGroups } from './PDiskGroups';
 import { pDiskPageKeyset } from './i18n';
 import { pdiskPageCn } from './shared';
-import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
 import './PDiskPage.scss';
 export function PDiskPage() {
     var _a;
     const dispatch = useTypedDispatch();
     const nodesMap = useTypedSelector(selectNodesMap);
+    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
     const [{ nodeId, pDiskId }] = useQueryParams({
         nodeId: StringParam,
         pDiskId: StringParam,
@@ -74,7 +75,7 @@ export function PDiskPage() {
         return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskId, className: pdiskPageCn('title') }));
     };
     const renderControls = () => {
-        return (_jsx("div", { className: pdiskPageCn('controls'), children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), children: [_jsx(Icon, { data: ArrowRotateLeftIcon }), pDiskPageKeyset('restart-pdisk-button')] }) }));
+        return (_jsx("div", { className: pdiskPageCn('controls'), children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId || !isUserAllowedToMakeChanges, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), withPopover: true, popoverContent: pDiskPageKeyset('restart-pdisk-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: [_jsx(Icon, { data: ArrowRotateLeft }), pDiskPageKeyset('restart-pdisk-button')] }) }));
     };
     const renderInfo = () => {
         if (pDiskLoading) {

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

@@ -4,5 +4,6 @@
     "groups": "Groups",
     "node": "Node",
     "restart-pdisk-button": "Restart PDisk",
-    "restart-pdisk-dialog": "PDisk will be restarted. Do you want to proceed?"
+    "restart-pdisk-dialog": "PDisk will be restarted. Do you want to proceed?",
+    "restart-pdisk-not-allowed": "You don't have enough rights to restart PDisk"
 }

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

@@ -1 +1 @@
-export declare const pDiskPageKeyset: (key: "groups" | "node" | "pdisk" | "fqdn" | "restart-pdisk-button" | "restart-pdisk-dialog", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const pDiskPageKeyset: (key: "node" | "groups" | "fqdn" | "pdisk" | "restart-pdisk-button" | "restart-pdisk-dialog" | "restart-pdisk-not-allowed", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/containers/Storage/Storage.js

@@ -1,28 +1,62 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ArrayParam, StringParam, useQueryParams, withDefault } from 'use-query-params';
 import { AccessDenied } from '../../components/Errors/403';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { selectNodesMap } from '../../store/reducers/nodesList';
 import { STORAGE_TYPES, VISIBLE_ENTITIES } from '../../store/reducers/storage/constants';
-import { filterGroups, filterNodes, getUsageFilterOptions, selectGroupsSortParams, selectNodesSortParams, } from '../../store/reducers/storage/selectors';
-import { setGroupsSortParams, setInitialState, setNodesSortParams, setStorageTextFilter, setStorageType, setUptimeFilter, setUsageFilter, setVisibleEntities, storageApi, } from '../../store/reducers/storage/storage';
+import { filterGroups, filterNodes, getUsageFilterOptions, } from '../../store/reducers/storage/selectors';
+import { storageApi } from '../../store/reducers/storage/storage';
+import { storageTypeSchema, visibleEntitiesSchema } from '../../store/reducers/storage/types';
 import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedDispatch, useTypedSelector, } from '../../utils/hooks';
-import { NodesUptimeFilterValues } from '../../utils/nodes';
+import { useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, } from '../../utils/hooks';
+import { NodesUptimeFilterValues, nodesUptimeFilterValuesSchema } from '../../utils/nodes';
 import { StorageControls } from './StorageControls/StorageControls';
 import { StorageGroups } from './StorageGroups/StorageGroups';
 import { StorageNodes } from './StorageNodes/StorageNodes';
 import { b } from './shared';
+import { defaultSortNode, getDefaultSortGroup } from './utils';
 import './Storage.scss';
+const UsageFilterParam = withDefault({
+    encode: ArrayParam.encode,
+    decode: (input) => {
+        if (input === null || input === undefined) {
+            return input;
+        }
+        if (!Array.isArray(input)) {
+            return input ? [input] : [];
+        }
+        return input.filter(Boolean);
+    },
+}, []);
 export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
-    const dispatch = useTypedDispatch();
+    var _a;
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { type, visible: visibleEntities, filter, usageFilter, uptimeFilter, } = useTypedSelector((state) => state.storage);
+    const [queryParams, setQueryParams] = useQueryParams({
+        type: StringParam,
+        visible: StringParam,
+        search: StringParam,
+        uptimeFilter: StringParam,
+        usageFilter: UsageFilterParam,
+    });
+    const type = storageTypeSchema.parse(queryParams.type);
+    const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible);
+    const filter = (_a = queryParams.search) !== null && _a !== void 0 ? _a : '';
+    const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
+    const usageFilter = queryParams.usageFilter;
     const nodesMap = useTypedSelector(selectNodesMap);
-    const nodesSortParams = useTypedSelector(selectNodesSortParams);
-    const groupsSortParams = useTypedSelector(selectGroupsSortParams);
+    const [nodeSort, setNodeSort] = React.useState({
+        sortOrder: undefined,
+        sortValue: undefined,
+    });
+    const nodesSortParams = nodeSort.sortValue ? nodeSort : defaultSortNode;
+    const [groupSort, setGroupSort] = React.useState({
+        sortOrder: undefined,
+        sortValue: undefined,
+    });
+    const groupsSortParams = groupSort.sortOrder ? groupSort : getDefaultSortGroup(visibleEntities);
     // Do not display Nodes table for Node page (NodeId present)
     const isNodePage = nodeId !== undefined;
     const storageType = isNodePage ? STORAGE_TYPES.groups : type;
@@ -40,33 +74,27 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
     const { currentData, isFetching, error } = storageType === STORAGE_TYPES.nodes ? nodesQuery : groupsQuery;
     const { currentData: { nodes = [] } = {} } = nodesQuery;
     const { currentData: { groups = [] } = {} } = groupsQuery;
-    const _a = currentData !== null && currentData !== void 0 ? currentData : { found: 0, total: 0 }, { nodes: _, groups: __ } = _a, entitiesCount = __rest(_a, ["nodes", "groups"]);
+    const _b = currentData !== null && currentData !== void 0 ? currentData : { found: 0, total: 0 }, { nodes: _, groups: __ } = _b, entitiesCount = __rest(_b, ["nodes", "groups"]);
     const isLoading = currentData === undefined && isFetching;
     const storageNodes = React.useMemo(() => filterNodes(nodes, filter, uptimeFilter), [filter, nodes, uptimeFilter]);
     const storageGroups = React.useMemo(() => filterGroups(groups, filter, usageFilter), [filter, groups, usageFilter]);
     const usageFilterOptions = React.useMemo(() => getUsageFilterOptions(groups), [groups]);
-    React.useEffect(() => {
-        return () => {
-            // Clean data on component unmount
-            dispatch(setInitialState());
-        };
-    }, [dispatch]);
-    const [nodesSort, handleNodesSort] = useTableSort(nodesSortParams, (params) => dispatch(setNodesSortParams(params)));
-    const [groupsSort, handleGroupsSort] = useTableSort(groupsSortParams, (params) => dispatch(setGroupsSortParams(params)));
+    const [nodesSort, handleNodesSort] = useTableSort(nodesSortParams, (params) => setNodeSort(params));
+    const [groupsSort, handleGroupsSort] = useTableSort(groupsSortParams, (params) => setGroupSort(params));
     const handleUsageFilterChange = (value) => {
-        dispatch(setUsageFilter(value));
+        setQueryParams({ usageFilter: value.length ? value : undefined }, 'replaceIn');
     };
     const handleTextFilterChange = (value) => {
-        dispatch(setStorageTextFilter(value));
+        setQueryParams({ search: value || undefined }, 'replaceIn');
     };
     const handleGroupVisibilityChange = (value) => {
-        dispatch(setVisibleEntities(value));
+        setQueryParams({ visible: value }, 'replaceIn');
     };
     const handleStorageTypeChange = (value) => {
-        dispatch(setStorageType(value));
+        setQueryParams({ type: value }, 'replaceIn');
     };
     const handleUptimeFilterChange = (value) => {
-        dispatch(setUptimeFilter(value));
+        setQueryParams({ uptimeFilter: value }, 'replaceIn');
     };
     const handleShowAllNodes = () => {
         handleGroupVisibilityChange(VISIBLE_ENTITIES.all);

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { ShieldKeyhole } from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
 import { Icon, Label, Popover, PopoverBehavior } from '@gravity-ui/uikit';
 import { CellWithPopover } from '../../../components/CellWithPopover/CellWithPopover';
@@ -14,7 +15,6 @@ import { isSortableStorageProperty } from '../../../utils/storage';
 import { bytesToGB, bytesToSpeed } from '../../../utils/utils';
 import { getDegradedSeverity, getUsageSeverityForStorageGroup } from '../utils';
 import i18n from './i18n';
-import shieldIcon from '../../../assets/icons/shield.svg';
 import './StorageGroups.scss';
 const b = cn('global-storage-groups');
 export const STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY = 'storageGroupsColumnsWidth';
@@ -49,7 +49,7 @@ const typeColumn = {
     width: 100,
     resizeMinWidth: 100,
     align: DataTable.LEFT,
-    render: ({ row }) => (_jsxs(React.Fragment, { children: [_jsx(Label, { children: row.MediaType || '—' }), '\u00a0', row.Encryption && (_jsx(Popover, { content: i18n('encrypted'), placement: "right", behavior: PopoverBehavior.Immediate, children: _jsx(Label, { children: _jsx(Icon, { data: shieldIcon }) }) }))] })),
+    render: ({ row }) => (_jsxs(React.Fragment, { children: [_jsx(Label, { children: row.MediaType || '—' }), '\u00a0', row.Encryption && (_jsx(Popover, { content: i18n('encrypted'), placement: "right", behavior: PopoverBehavior.Immediate, children: _jsx(Label, { children: _jsx(Icon, { data: ShieldKeyhole, size: 18 }) }) }))] })),
     sortable: false,
 };
 const erasureColumn = {

package/dist/containers/Storage/VirtualStorage.js

@@ -1,29 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { StringParam, useQueryParams } from 'use-query-params';
 import { AccessDenied } from '../../components/Errors/403/AccessDenied';
 import { ResponseError } from '../../components/Errors/ResponseError/ResponseError';
 import { selectNodesMap } from '../../store/reducers/nodesList';
 import { STORAGE_TYPES, VISIBLE_ENTITIES } from '../../store/reducers/storage/constants';
+import { storageTypeSchema, visibleEntitiesSchema } from '../../store/reducers/storage/types';
 import { useTypedSelector } from '../../utils/hooks';
-import { NodesUptimeFilterValues } from '../../utils/nodes';
+import { NodesUptimeFilterValues, nodesUptimeFilterValuesSchema } from '../../utils/nodes';
 import { StorageControls } from './StorageControls/StorageControls';
 import { VirtualStorageGroups } from './StorageGroups/VirtualStorageGroups';
 import { VirtualStorageNodes } from './StorageNodes/VirtualStorageNodes';
 export const VirtualStorage = ({ tenant, nodeId, parentContainer, additionalNodesProps, }) => {
-    const [searchValue, setSearchValue] = React.useState('');
-    const [storageType, setStorageType] = React.useState(STORAGE_TYPES.groups);
-    const [visibleEntities, setVisibleEntities] = React.useState(VISIBLE_ENTITIES.all);
-    const [nodesUptimeFilter, setNodesUptimeFilter] = React.useState(NodesUptimeFilterValues.All);
+    var _a;
+    const [queryParams, setQueryParams] = useQueryParams({
+        type: StringParam,
+        visible: StringParam,
+        search: StringParam,
+        uptimeFilter: StringParam,
+    });
+    const storageType = storageTypeSchema.parse(queryParams.type);
+    const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible);
+    const searchValue = (_a = queryParams.search) !== null && _a !== void 0 ? _a : '';
+    const nodesUptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
+    const handleTextFilterChange = (value) => {
+        setQueryParams({ search: value || undefined }, 'replaceIn');
+    };
+    const handleGroupVisibilityChange = (value) => {
+        setQueryParams({ visible: value }, 'replaceIn');
+    };
+    const handleStorageTypeChange = (value) => {
+        setQueryParams({ type: value }, 'replaceIn');
+    };
+    const handleUptimeFilterChange = (value) => {
+        setQueryParams({ uptimeFilter: value }, 'replaceIn');
+    };
     const nodesMap = useTypedSelector(selectNodesMap);
     const handleShowAllGroups = () => {
-        setVisibleEntities(VISIBLE_ENTITIES.all);
+        handleGroupVisibilityChange(VISIBLE_ENTITIES.all);
     };
     const handleShowAllNodes = () => {
-        setVisibleEntities(VISIBLE_ENTITIES.all);
-        setNodesUptimeFilter(NodesUptimeFilterValues.All);
+        setQueryParams({
+            visible: VISIBLE_ENTITIES.all,
+            uptimeFilter: NodesUptimeFilterValues.All,
+        }, 'replaceIn');
     };
     const renderControls = ({ totalEntities, foundEntities, inited }) => {
-        return (_jsx(StorageControls, { searchValue: searchValue, handleSearchValueChange: setSearchValue, withTypeSelector: !nodeId, storageType: storageType, handleStorageTypeChange: setStorageType, visibleEntities: visibleEntities, handleVisibleEntitiesChange: setVisibleEntities, nodesUptimeFilter: nodesUptimeFilter, handleNodesUptimeFilterChange: setNodesUptimeFilter, withGroupsUsageFilter: false, entitiesCountCurrent: foundEntities, entitiesCountTotal: totalEntities, entitiesLoading: !inited }));
+        return (_jsx(StorageControls, { searchValue: searchValue, handleSearchValueChange: handleTextFilterChange, withTypeSelector: !nodeId, storageType: storageType, handleStorageTypeChange: handleStorageTypeChange, visibleEntities: visibleEntities, handleVisibleEntitiesChange: handleGroupVisibilityChange, nodesUptimeFilter: nodesUptimeFilter, handleNodesUptimeFilterChange: handleUptimeFilterChange, withGroupsUsageFilter: false, entitiesCountCurrent: foundEntities, entitiesCountTotal: totalEntities, entitiesLoading: !inited }));
     };
     const renderErrorMessage = (error) => {
         if (error.status === 403) {

package/dist/containers/Storage/utils/index.d.ts

@@ -1,5 +1,8 @@
-import type { PreparedStorageGroup } from '../../../store/reducers/storage/types';
+import type { NodesSortParams } from '../../../store/reducers/nodes/types';
+import type { PreparedStorageGroup, StorageSortParams, VisibleEntities } from '../../../store/reducers/storage/types';
 import { EFlag } from '../../../types/api/enums';
 export declare const getDegradedSeverity: (group: PreparedStorageGroup) => "success" | "danger" | "warning" | undefined;
 export declare const getUsageSeverityForStorageGroup: (value: number) => "success" | "danger" | "warning" | undefined;
 export declare const getUsageSeverityForEntityStatus: (value: number) => EFlag.Green | EFlag.Yellow | EFlag.Red | undefined;
+export declare const defaultSortNode: NodesSortParams;
+export declare function getDefaultSortGroup(visibleEntities: VisibleEntities): StorageSortParams;