ydb-embedded-ui 4.14.0 → 4.15.0

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

@@ -14,8 +14,11 @@
   "actions.openPreview": "Открыть превью",
   "actions.createTable": "Создать таблицу...",
   "actions.createExternalTable": "Создать внешнюю таблицу...",
+  "actions.createTopic": "Создать топик...",
   "actions.dropTable": "Удалить таблицу...",
+  "actions.dropTopic": "Удалить топик...",
   "actions.alterTable": "Изменить таблицу...",
+  "actions.alterTopic": "Изменить топик...",
   "actions.selectQuery": "Select запрос...",
   "actions.upsertQuery": "Upsert запрос..."
 }

package/dist/containers/Tenant/utils/queryTemplates.ts

@@ -0,0 +1,89 @@
+export const createTableTemplate = (path: string) => {
+    return `CREATE TABLE \`${path}/my_table\`
+(
+    \`id\` Uint64,
+    \`name\` String,
+    PRIMARY KEY (\`id\`)
+);`;
+};
+export const alterTableTemplate = (path: string) => {
+    return `ALTER TABLE \`${path}\`
+    ADD COLUMN is_deleted Bool;`;
+};
+export const selectQueryTemplate = (path: string) => {
+    return `SELECT *
+    FROM \`${path}\`
+    LIMIT 10;`;
+};
+export const upsertQueryTemplate = (path: string) => {
+    return `UPSERT INTO \`${path}\`
+    ( \`id\`, \`name\` )
+VALUES ( );`;
+};
+
+export const dropExternalTableTemplate = (path: string) => {
+    return `DROP EXTERNAL TABLE \`${path}\`;`;
+};
+
+export const createExternalTableTemplate = (path: string) => {
+    // Remove data source name from path
+    // to create table in the same folder with data source
+    const targetPath = path.split('/').slice(0, -1).join('/');
+
+    return `CREATE EXTERNAL TABLE \`${targetPath}/my_external_table\` (
+    column1 Int,
+    column2 Int
+) WITH (
+    DATA_SOURCE="${path}",
+    LOCATION="",
+    FORMAT="json_as_string",
+    \`file_pattern\`=""
+);`;
+};
+
+export const createTopicTemplate = (path: string) => {
+    return `-- docs: https://ydb.tech/en/docs/yql/reference/syntax/create_topic
+CREATE TOPIC \`${path}/my_topic\` (
+    CONSUMER consumer1,
+    CONSUMER consumer2 WITH (read_from = Datetime('2022-12-01T12:13:22Z')) -- Sets up the message write time starting from which the consumer will receive data.
+                                                                           -- Value type: Datetime OR Timestamp OR integer (unix-timestamp in the numeric format). 
+                                                                           -- Default value: now
+) WITH (
+    min_active_partitions = 5, -- Minimum number of topic partitions.
+    partition_count_limit = 10, -- Maximum number of active partitions in the topic. 0 is interpreted as unlimited.
+    retention_period = Interval('PT12H'), -- Data retention period in the topic. Value type: Interval, default value: 18h.
+    retention_storage_mb = 1, -- Limit on the maximum disk space occupied by the topic data. 
+                              -- When this value is exceeded, the older data is cleared, like under a retention policy. 
+                              -- 0 is interpreted as unlimited.
+    partition_write_speed_bytes_per_second = 2097152, -- Maximum allowed write speed per partition.
+    partition_write_burst_bytes = 2097152 -- Write quota allocated for write bursts. 
+                                          -- When set to zero, the actual write_burst value is equalled to 
+                                          -- the quota value (this allows write bursts of up to one second).
+);`;
+};
+
+export const alterTopicTemplate = (path: string) => {
+    return `-- docs: https://ydb.tech/en/docs/yql/reference/syntax/alter_topic
+ALTER TOPIC \`${path}\`
+    ADD CONSUMER new_consumer WITH (read_from = 0), -- Sets up the message write time starting from which the consumer will receive data.
+                                                    -- Value type: Datetime OR Timestamp OR integer (unix-timestamp in the numeric format).
+                                                    -- Default value: now
+    ALTER CONSUMER consumer1 SET (read_from = Datetime('2023-12-01T12:13:22Z')),
+    DROP CONSUMER consumer2,
+    SET (
+        min_active_partitions = 10, -- Minimum number of topic partitions.
+        partition_count_limit = 15, -- Maximum number of active partitions in the topic. 0 is interpreted as unlimited.
+        retention_period = Interval('PT36H'), -- Data retention period in the topic. Value type: Interval, default value: 18h.
+        retention_storage_mb = 10, -- Limit on the maximum disk space occupied by the topic data. 
+                                   -- When this value is exceeded, the older data is cleared, like under a retention policy. 
+                                   -- 0 is interpreted as unlimited.
+        partition_write_speed_bytes_per_second = 3145728, -- Maximum allowed write speed per partition.
+        partition_write_burst_bytes = 1048576 -- Write quota allocated for write bursts. 
+                                              -- When set to zero, the actual write_burst value is equalled to
+                                              -- the quota value (this allows write bursts of up to one second).
+    );`;
+};
+
+export const dropTopicTemplate = (path: string) => {
+    return `DROP TOPIC \`${path}\`;`;
+};

package/dist/containers/Tenant/utils/schema.ts

@@ -30,7 +30,7 @@ const pathTypeToNodeType: Record<EPathType, NavigationTreeNodeType | undefined>
 
     [EPathType.EPathTypeColumnTable]: 'column_table',
 
-    [EPathType.EPathTypeCdcStream]: 'topic',
+    [EPathType.EPathTypeCdcStream]: 'stream',
     [EPathType.EPathTypePersQueueGroup]: 'topic',
 
     [EPathType.EPathTypeExternalDataSource]: 'external_data_source',

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -12,48 +12,17 @@ import createToast from '../../../utils/createToast';
 
 import i18n from '../i18n';
 
-const createTableTemplate = (path: string) => {
-    return `CREATE TABLE \`${path}/my_table\`
-(
-    \`id\` Uint64,
-    \`name\` String,
-    PRIMARY KEY (\`id\`)
-);`;
-};
-const alterTableTemplate = (path: string) => {
-    return `ALTER TABLE \`${path}\`
-    ADD COLUMN is_deleted Bool;`;
-};
-const selectQueryTemplate = (path: string) => {
-    return `SELECT *
-    FROM \`${path}\`
-    LIMIT 10;`;
-};
-const upsertQueryTemplate = (path: string) => {
-    return `UPSERT INTO \`${path}\`
-    ( \`id\`, \`name\` )
-VALUES ( );`;
-};
-
-const dropExternalTableTemplate = (path: string) => {
-    return `DROP EXTERNAL TABLE \`${path}\`;`;
-};
-
-const createExternalTableTemplate = (path: string) => {
-    // Remove data source name from path
-    // to create table in the same folder with data source
-    const targetPath = path.split('/').slice(0, -1).join('/');
-
-    return `CREATE EXTERNAL TABLE \`${targetPath}/my_external_table\` (
-    column1 Int,
-    column2 Int
-) WITH (
-    DATA_SOURCE="${path}",
-    LOCATION="",
-    FORMAT="json_as_string",
-    \`file_pattern\`=""
-);`;
-};
+import {
+    alterTableTemplate,
+    alterTopicTemplate,
+    createExternalTableTemplate,
+    createTableTemplate,
+    createTopicTemplate,
+    dropExternalTableTemplate,
+    dropTopicTemplate,
+    selectQueryTemplate,
+    upsertQueryTemplate,
+} from './queryTemplates';
 
 interface ActionsAdditionalEffects {
     setQueryMode: SetQueryModeIfAvailable;
@@ -92,6 +61,9 @@ const bindActions = (
             'query',
             i18n('actions.externalTableSelectUnavailable'),
         ),
+        createTopic: inputQuery(createTopicTemplate, 'script'),
+        alterTopic: inputQuery(alterTopicTemplate, 'script'),
+        dropTopic: inputQuery(dropTopicTemplate, 'script'),
         copyPath: () => {
             try {
                 copy(path);
@@ -121,7 +93,10 @@ export const getActions =
 
         const DIR_SET: ActionsSet = [
             [copyItem],
-            [{text: i18n('actions.createTable'), action: actions.createTable}],
+            [
+                {text: i18n('actions.createTable'), action: actions.createTable},
+                {text: i18n('actions.createTopic'), action: actions.createTopic},
+            ],
         ];
         const TABLE_SET: ActionsSet = [
             [copyItem],
@@ -132,6 +107,14 @@ export const getActions =
             ],
         ];
 
+        const TOPIC_SET: ActionsSet = [
+            [copyItem],
+            [
+                {text: i18n('actions.alterTopic'), action: actions.alterTopic},
+                {text: i18n('actions.dropTopic'), action: actions.dropTopic},
+            ],
+        ];
+
         const EXTERNAL_TABLE_SET = [
             [copyItem],
             [
@@ -160,7 +143,7 @@ export const getActions =
             column_table: TABLE_SET,
 
             index_table: JUST_COPY,
-            topic: JUST_COPY,
+            topic: TOPIC_SET,
             stream: JUST_COPY,
 
             index: JUST_COPY,

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

@@ -16,7 +16,7 @@
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
 
   "settings.useBackendParamsForTables.title": "Offload tables filters and sorting to backend",
-  "settings.useBackendParamsForTables.popover": "Filter and sort Nodes table with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
+  "settings.useBackendParamsForTables.popover": "Filter and sort Nodes and Storage tables with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
   "settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'YQL - QueryService' modes. May not work on some versions"

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

@@ -16,7 +16,7 @@
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
 
   "settings.useBackendParamsForTables.title": "Перенести фильтры и сортировку таблиц на бэкенд",
-  "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблицы Nodes с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
+  "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблиц Nodes и Storage с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
   "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'YQL - QueryService'. Может работать некорректно на некоторых версиях"

package/dist/{reportWebVitals.js → reportWebVitals.ts}

@@ -1,4 +1,6 @@
-const reportWebVitals = (onPerfEntry) => {
+import type {ReportHandler} from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
     if (onPerfEntry && onPerfEntry instanceof Function) {
         import('web-vitals').then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
             getCLS(onPerfEntry);

package/dist/services/api.ts

@@ -114,19 +114,21 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         );
     }
     getStorageInfo(
-        {tenant, visibleEntities, nodeId}: StorageApiRequestParams,
+        {tenant, visibleEntities, nodeId, sortOrder, sortValue, ...params}: StorageApiRequestParams,
         {concurrentId}: AxiosOptions = {},
     ) {
+        const sort = prepareSortValue(sortValue, sortOrder);
+
         return this.get<TStorageInfo>(
             this.getPath(`/viewer/json/storage?enums=true`),
             {
                 tenant,
                 node_id: nodeId,
                 with: visibleEntities,
+                sort,
+                ...params,
             },
-            {
-                concurrentId,
-            },
+            {concurrentId},
         );
     }
     getPdiskInfo(nodeId: string | number, pdiskId: string | number) {

package/dist/store/reducers/{authentication.js → authentication/authentication.ts}

@@ -1,5 +1,9 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
+import type {Reducer} from 'redux';
+
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {AuthenticationAction, AuthenticationState} from './types';
 
 export const SET_UNAUTHENTICATED = createRequestActionTypes(
     'authentication',
@@ -11,16 +15,19 @@ export const FETCH_USER = createRequestActionTypes('authentication', 'FETCH_USER
 const initialState = {
     isAuthenticated: true,
     user: '',
-    error: '',
+    error: undefined,
 };
 
-const authentication = function (state = initialState, action) {
+const authentication: Reducer<AuthenticationState, AuthenticationAction> = (
+    state = initialState,
+    action,
+) => {
     switch (action.type) {
         case SET_UNAUTHENTICATED.SUCCESS: {
-            return {...state, isAuthenticated: false, user: '', error: ''};
+            return {...state, isAuthenticated: false, user: '', error: undefined};
         }
         case SET_AUTHENTICATED.SUCCESS: {
-            return {...state, isAuthenticated: true, error: ''};
+            return {...state, isAuthenticated: true, error: undefined};
         }
         case SET_AUTHENTICATED.FAILURE: {
             return {...state, error: action.error};
@@ -34,7 +41,7 @@ const authentication = function (state = initialState, action) {
     }
 };
 
-export const authenticate = (user, password) => {
+export const authenticate = (user: string, password: string) => {
     return createApiRequest({
         request: window.api.authenticate(user, password),
         actions: SET_AUTHENTICATED,

package/dist/store/reducers/authentication/types.ts

@@ -0,0 +1,15 @@
+import type {AuthErrorResponse} from '../../../types/api/error';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_USER, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from './authentication';
+
+export interface AuthenticationState {
+    isAuthenticated: boolean;
+    user: string | undefined;
+    error: AuthErrorResponse | undefined;
+}
+
+export type AuthenticationAction =
+    | ApiRequestAction<typeof SET_UNAUTHENTICATED, unknown, unknown>
+    | ApiRequestAction<typeof SET_AUTHENTICATED, unknown, AuthErrorResponse>
+    | ApiRequestAction<typeof FETCH_USER, string | undefined, unknown>;

package/dist/store/reducers/describe.ts

@@ -1,9 +1,7 @@
-import {createSelector, Selector} from 'reselect';
 import {Reducer} from 'redux';
 
 import '../../services/api';
-import {
-    IDescribeRootStateSlice,
+import type {
     IDescribeState,
     IDescribeAction,
     IDescribeHandledResponse,
@@ -93,19 +91,6 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
-// Consumers selectors
-const selectConsumersNames = (state: IDescribeRootStateSlice, path?: string) =>
-    path
-        ? state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules
-        : undefined;
-
-interface IConsumer {
-    name: string;
-}
-
-export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[], [string | undefined]> =
-    createSelector(selectConsumersNames, (names = []) => names.map((name) => ({name})));
-
 export function getDescribe({path}: {path: string}) {
     const request = window.api.getDescribe({path});
     return createApiRequest({

package/dist/store/reducers/index.ts

@@ -30,7 +30,7 @@ import healthcheckInfo from './healthcheckInfo';
 import shardsWorkload from './shardsWorkload';
 import hotKeys from './hotKeys';
 import olapStats from './olapStats';
-import authentication from './authentication';
+import authentication from './authentication/authentication';
 import header from './header/header';
 import saveQuery from './saveQuery';
 import fullscreen from './fullscreen';

package/dist/store/reducers/storage/selectors.ts

@@ -1,128 +1,20 @@
 import {Selector, createSelector} from 'reselect';
-import {getUsage} from '../../../utils/storage';
 
-import type {TNodeInfo} from '../../../types/api/nodes';
-import {TPDiskState} from '../../../types/api/pdisk';
-import {EVDiskState, TVDiskStateInfo} from '../../../types/api/vdisk';
-import {EFlag} from '../../../types/api/enums';
-import {getPDiskType} from '../../../utils/pdisk';
-import {calcUptime} from '../../../utils';
+import type {OrderType} from '@gravity-ui/react-data-table';
+import {ASCENDING, DESCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
 
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
+import {NODES_SORT_VALUES, type NodesSortValue} from '../../../utils/nodes';
+import {STORAGE_SORT_VALUES, type StorageSortValue, getUsage} from '../../../utils/storage';
+
+import {filterNodesByUptime} from '../nodes/selectors';
 import type {
     PreparedStorageGroup,
     PreparedStorageNode,
-    RawStorageGroup,
     StorageStateSlice,
     UsageFilter,
 } from './types';
-import {filterNodesByUptime} from '../nodes/selectors';
-
-// ==== Prepare data ====
-const FLAGS_POINTS = {
-    [EFlag.Green]: 1,
-    [EFlag.Yellow]: 100,
-    [EFlag.Orange]: 10_000,
-    [EFlag.Red]: 1_000_000,
-};
-
-const prepareStorageGroupData = (
-    group: RawStorageGroup,
-    poolName?: string,
-): PreparedStorageGroup => {
-    let missing = 0;
-    let usedSpaceFlag = 0;
-    let usedSpaceBytes = 0;
-    let limitSizeBytes = 0;
-    let readSpeedBytesPerSec = 0;
-    let writeSpeedBytesPerSec = 0;
-    let mediaType = '';
-
-    if (group.VDisks) {
-        for (const vDisk of group.VDisks) {
-            const {
-                Replicated,
-                VDiskState,
-                AvailableSize,
-                AllocatedSize,
-                PDisk,
-                DiskSpace,
-                ReadThroughput,
-                WriteThroughput,
-            } = vDisk;
-
-            if (
-                !Replicated ||
-                PDisk?.State !== TPDiskState.Normal ||
-                VDiskState !== EVDiskState.OK
-            ) {
-                missing += 1;
-            }
-
-            if (DiskSpace && DiskSpace !== EFlag.Grey) {
-                usedSpaceFlag += FLAGS_POINTS[DiskSpace];
-            }
-
-            const available = Number(AvailableSize ?? PDisk?.AvailableSize) || 0;
-            const allocated = Number(AllocatedSize) || 0;
-
-            usedSpaceBytes += allocated;
-            limitSizeBytes += available + allocated;
-
-            readSpeedBytesPerSec += Number(ReadThroughput) || 0;
-            writeSpeedBytesPerSec += Number(WriteThroughput) || 0;
-
-            const currentType = getPDiskType(PDisk || {});
-            mediaType =
-                currentType && (currentType === mediaType || mediaType === '')
-                    ? currentType
-                    : 'Mixed';
-        }
-    }
-
-    // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
-    const vDisks = group.VDisks?.map((vdisk) => ({
-        ...vdisk,
-        StoragePoolName: poolName,
-        Donors: vdisk.Donors?.map((donor) => ({
-            ...donor,
-            StoragePoolName: poolName,
-        })),
-    }));
-
-    return {
-        ...group,
-        VDisks: vDisks,
-        Read: readSpeedBytesPerSec,
-        Write: writeSpeedBytesPerSec,
-        PoolName: poolName,
-        Used: usedSpaceBytes,
-        Limit: limitSizeBytes,
-        Missing: missing,
-        UsedSpaceFlag: usedSpaceFlag,
-        Type: mediaType || null,
-    };
-};
-
-const prepareStorageNodeData = (node: TNodeInfo): PreparedStorageNode => {
-    const systemState = node.SystemState ?? {};
-    const missing =
-        node.PDisks?.filter((pDisk) => {
-            return pDisk.State !== TPDiskState.Normal;
-        }).length || 0;
-
-    return {
-        NodeId: node.NodeId,
-        SystemState: systemState.SystemState,
-        DataCenter: systemState.DataCenter,
-        Rack: systemState.Rack,
-        Host: systemState.Host,
-        Endpoints: systemState.Endpoints,
-        Uptime: calcUptime(systemState.StartTime),
-        StartTime: systemState.StartTime,
-        PDisks: node.PDisks,
-        Missing: missing,
-    };
-};
+import {VISIBLE_ENTITIES} from './constants';
 
 // ==== Filters ====
 
@@ -163,24 +55,21 @@ const filterGroupsByUsage = (entities: PreparedStorageGroup[], usage?: string[])
     }
 
     return entities.filter((entity) => {
-        const entityUsage = getUsage(entity, 5);
+        const entityUsage = entity.Usage;
         return usage.some((val) => Number(val) <= entityUsage && entityUsage < Number(val) + 5);
     });
 };
 
 // ==== Simple selectors ====
 
-export const selectStoragePools = (state: StorageStateSlice) => state.storage.groups?.StoragePools;
-export const selectStorageGroupsCount = (state: StorageStateSlice) => ({
-    total: state.storage.groups?.TotalGroups || 0,
-    found: state.storage.groups?.FoundGroups || 0,
-});
-export const selectStorageNodes = (state: StorageStateSlice) => state.storage.nodes?.Nodes;
-export const selectStorageNodesCount = (state: StorageStateSlice) => ({
-    total: state.storage.nodes?.TotalNodes || 0,
-    found: state.storage.nodes?.FoundNodes || 0,
+export const selectEntitiesCount = (state: StorageStateSlice) => ({
+    total: state.storage.total,
+    found: state.storage.found,
 });
 
+export const selectStorageGroups = (state: StorageStateSlice) => state.storage.groups;
+export const selectStorageNodes = (state: StorageStateSlice) => state.storage.nodes;
+
 export const selectStorageFilter = (state: StorageStateSlice) => state.storage.filter;
 export const selectUsageFilter = (state: StorageStateSlice) => state.storage.usageFilter;
 export const selectVisibleEntities = (state: StorageStateSlice) => state.storage.visible;
@@ -188,29 +77,39 @@ export const selectNodesUptimeFilter = (state: StorageStateSlice) =>
     state.storage.nodesUptimeFilter;
 export const selectStorageType = (state: StorageStateSlice) => state.storage.type;
 
-// ==== Complex selectors ====
+// ==== Sort params selectors ====
+export const selectNodesSortParams = (state: StorageStateSlice) => {
+    const defaultSortValue: NodesSortValue = NODES_SORT_VALUES.NodeId;
+    const defaultSortOrder: OrderType = ASCENDING;
+
+    return {
+        sortValue: state.storage.nodesSortValue || defaultSortValue,
+        sortOrder: state.storage.nodesSortOrder || defaultSortOrder,
+    };
+};
 
-const selectPreparedStorageNodes: Selector<StorageStateSlice, PreparedStorageNode[]> =
-    createSelector(selectStorageNodes, (storageNodes) => {
-        if (!storageNodes) {
-            return [];
-        }
+export const selectGroupsSortParams = (state: StorageStateSlice) => {
+    const visibleEntities = state.storage.visible;
 
-        return storageNodes.map(prepareStorageNodeData);
-    });
+    let defaultSortValue: StorageSortValue = STORAGE_SORT_VALUES.PoolName;
+    let defaultSortOrder: OrderType = ASCENDING;
 
-export const selectPreparedStorageGroups: Selector<StorageStateSlice, PreparedStorageGroup[]> =
-    createSelector(selectStoragePools, (storagePools) => {
-        const preparedGroups: PreparedStorageGroup[] = [];
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
+        defaultSortValue = STORAGE_SORT_VALUES.Degraded;
+        defaultSortOrder = DESCENDING;
+    }
 
-        storagePools?.forEach((pool) => {
-            pool.Groups?.forEach((group) => {
-                preparedGroups.push(prepareStorageGroupData(group, pool.Name));
-            });
-        });
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
+        defaultSortValue = STORAGE_SORT_VALUES.Usage;
+        defaultSortOrder = DESCENDING;
+    }
 
-        return preparedGroups;
-    });
+    return {
+        sortValue: state.storage.groupsSortValue || defaultSortValue,
+        sortOrder: state.storage.groupsSortOrder || defaultSortOrder,
+    };
+};
+// ==== Complex selectors ====
 
 export const selectVDisksForPDisk: Selector<
     StorageStateSlice,
@@ -232,11 +131,12 @@ export const selectVDisksForPDisk: Selector<
 );
 
 export const selectUsageFilterOptions: Selector<StorageStateSlice, UsageFilter[]> = createSelector(
-    selectPreparedStorageGroups,
+    selectStorageGroups,
     (groups) => {
         const items: Record<number, number> = {};
 
-        groups.forEach((group) => {
+        groups?.forEach((group) => {
+            // Get groups usage with step 5
             const usage = getUsage(group, 5);
 
             if (!Object.prototype.hasOwnProperty.call(items, usage)) {
@@ -256,9 +156,9 @@ export const selectUsageFilterOptions: Selector<StorageStateSlice, UsageFilter[]
 
 export const selectFilteredNodes: Selector<StorageStateSlice, PreparedStorageNode[]> =
     createSelector(
-        [selectPreparedStorageNodes, selectStorageFilter, selectNodesUptimeFilter],
+        [selectStorageNodes, selectStorageFilter, selectNodesUptimeFilter],
         (storageNodes, textFilter, uptimeFilter) => {
-            let result = storageNodes;
+            let result = storageNodes || [];
             result = filterNodesByText(result, textFilter);
             result = filterNodesByUptime(result, uptimeFilter);
 
@@ -268,9 +168,9 @@ export const selectFilteredNodes: Selector<StorageStateSlice, PreparedStorageNod
 
 export const selectFilteredGroups: Selector<StorageStateSlice, PreparedStorageGroup[]> =
     createSelector(
-        [selectPreparedStorageGroups, selectStorageFilter, selectUsageFilter],
+        [selectStorageGroups, selectStorageFilter, selectUsageFilter],
         (storageGroups, textFilter, usageFilter) => {
-            let result = storageGroups;
+            let result = storageGroups || [];
             result = filterGroupsByText(result, textFilter);
             result = filterGroupsByUsage(result, usageFilter);