ydb-embedded-ui 6.3.0 → 6.4.0

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,7 +20,6 @@ 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;
@@ -74,7 +74,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, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), children: [_jsx(Icon, { data: ArrowRotateLeft }), pDiskPageKeyset('restart-pdisk-button')] }) }));
     };
     const renderInfo = () => {
         if (pDiskLoading) {

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", 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;

package/dist/containers/Storage/utils/index.js

@@ -1,5 +1,9 @@
+import { ASCENDING, DESCENDING } from '@gravity-ui/react-data-table/build/esm/lib/constants';
+import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { EFlag } from '../../../types/api/enums';
 import { generateEvaluator } from '../../../utils/generateEvaluator';
+import { NODES_SORT_VALUES } from '../../../utils/nodes';
+import { STORAGE_SORT_VALUES } from '../../../utils/storage';
 const defaultDegradationEvaluator = generateEvaluator(1, 2, ['success', 'warning', 'danger']);
 const degradationEvaluators = {
     'block-4-2': generateEvaluator(1, 2, ['success', 'warning', 'danger']),
@@ -22,3 +26,28 @@ export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, [
     EFlag.Yellow,
     EFlag.Red,
 ]);
+export const defaultSortNode = {
+    sortValue: NODES_SORT_VALUES.NodeId,
+    sortOrder: ASCENDING,
+};
+const defaultSortGroup = {
+    sortValue: STORAGE_SORT_VALUES.PoolName,
+    sortOrder: ASCENDING,
+};
+const defaultSortGroupMissing = {
+    sortValue: STORAGE_SORT_VALUES.Degraded,
+    sortOrder: DESCENDING,
+};
+const defaultSortGroupSpace = {
+    sortValue: STORAGE_SORT_VALUES.Usage,
+    sortOrder: DESCENDING,
+};
+export function getDefaultSortGroup(visibleEntities) {
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
+        return defaultSortGroupMissing;
+    }
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
+        return defaultSortGroupSpace;
+    }
+    return defaultSortGroup;
+}

package/dist/containers/Tablet/Tablet.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Link as ExternalLink } from '@gravity-ui/uikit';
+import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
+import { Link as ExternalLink, Icon } from '@gravity-ui/uikit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { Helmet } from 'react-helmet-async';
 import { useLocation, useParams } from 'react-router';
 import { EmptyState } from '../../components/EmptyState';
 import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../components/Errors/ResponseError';
-import { Icon } from '../../components/Icon';
 import { Loader } from '../../components/Loader';
 import { Tag } from '../../components/Tag';
 import { parseQuery } from '../../routes';
@@ -66,7 +66,7 @@ export const Tablet = () => {
                 path: `/tablets?TabletID=${TabletId}`,
             },
         ];
-        return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('pane-wrapper'), children: [_jsxs("div", { className: b('left-pane'), children: [_jsx("ul", { className: b('links'), children: externalLinks.map(renderExternalLinks) }), _jsxs("div", { className: b('row', { header: true }), children: [_jsx("span", { className: b('title'), children: i18n('tablet.header') }), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank", children: _jsx(Icon, { name: "external" }) }), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", { className: b('loader'), children: loading && _jsx(Loader, { size: "s" }) })] }), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: refetch })] }), _jsx("div", { className: b('rigth-pane'), children: _jsx(TabletTable, { history: history }) })] }) }));
+        return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('pane-wrapper'), children: [_jsxs("div", { className: b('left-pane'), children: [_jsx("ul", { className: b('links'), children: externalLinks.map(renderExternalLinks) }), _jsxs("div", { className: b('row', { header: true }), children: [_jsx("span", { className: b('title'), children: i18n('tablet.header') }), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank", children: _jsx(Icon, { data: ArrowUpRightFromSquare }) }), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", { className: b('loader'), children: loading && _jsx(Loader, { size: "s" }) })] }), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: refetch })] }), _jsx("div", { className: b('rigth-pane'), children: _jsx(TabletTable, { history: history }) })] }) }));
     };
     return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${id} — ${i18n('tablet.header')} — ${tenantName || queryClusterName || CLUSTER_DEFAULT_TITLE}` }) }), renderView()] }));
 };

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

@@ -1,2 +1,2 @@
-declare const _default: (key: "emptyState" | "tablet.header" | "controls.kill" | "controls.stop" | "controls.resume" | "dialog.kill" | "dialog.stop" | "dialog.resume", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "dialog.kill" | "tablet.header" | "controls.kill" | "controls.stop" | "controls.resume" | "dialog.stop" | "dialog.resume" | "emptyState", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

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

@@ -1,8 +1,7 @@
-import './Tablets.scss';
 interface TabletsProps {
     path?: string;
     nodeId?: string | number;
     className?: string;
 }
-export declare const Tablets: ({ path, nodeId, className }: TabletsProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Tablets({ nodeId, path, className }: TabletsProps): import("react/jsx-runtime").JSX.Element;
 export {};