ydb-embedded-ui 4.13.0 → 4.15.0

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

@@ -1,4 +1,5 @@
 import type {ClusterTab} from '../../../containers/Cluster/utils';
+import type {EType} from '../../../types/api/tablet';
 
 import {setHeaderBreadcrumbs} from './header';
 
@@ -23,6 +24,7 @@ export interface TabletsBreadcrumbsOptions extends TenantBreadcrumbsOptions {
 
 export interface TabletBreadcrumbsOptions extends TabletsBreadcrumbsOptions {
     tabletId?: string;
+    tabletType?: EType;
 }
 
 export type BreadcrumbsOptions =

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/nodes/nodes.ts

@@ -10,6 +10,7 @@ import type {
     ComputeApiRequestParams,
     NodesAction,
     NodesApiRequestParams,
+    NodesSortParams,
     NodesState,
 } from './types';
 import {prepareComputeNodesData, prepareNodesData} from './utils';
@@ -20,6 +21,7 @@ const RESET_NODES_STATE = 'nodes/RESET_NODES_STATE';
 const SET_NODES_UPTIME_FILTER = 'nodes/SET_NODES_UPTIME_FILTER';
 const SET_DATA_WAS_NOT_LOADED = 'nodes/SET_DATA_WAS_NOT_LOADED';
 const SET_SEARCH_VALUE = 'nodes/SET_SEARCH_VALUE';
+const SET_SORT = 'nodes/SET_SORT';
 
 const initialState = {
     loading: false,
@@ -47,6 +49,10 @@ const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) =
             };
         }
         case FETCH_NODES.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
@@ -74,7 +80,13 @@ const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) =
                 searchValue: action.data,
             };
         }
-
+        case SET_SORT: {
+            return {
+                ...state,
+                sortValue: action.data.sortValue,
+                sortOrder: action.data.sortOrder,
+            };
+        }
         case SET_DATA_WAS_NOT_LOADED: {
             return {
                 ...state,
@@ -85,13 +97,11 @@ const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) =
             return state;
     }
 };
+const concurrentId = 'getNodes';
 
 export function getNodes({type = 'any', ...params}: NodesApiRequestParams) {
     return createApiRequest({
-        request: window.api.getNodes({
-            type,
-            ...params,
-        }),
+        request: window.api.getNodes({type, ...params}, {concurrentId}),
         actions: FETCH_NODES,
         dataHandler: prepareNodesData,
     });
@@ -99,7 +109,7 @@ export function getNodes({type = 'any', ...params}: NodesApiRequestParams) {
 
 export function getComputeNodes({version = EVersion.v2, ...params}: ComputeApiRequestParams) {
     return createApiRequest({
-        request: window.api.getCompute({version, ...params}),
+        request: window.api.getCompute({version, ...params}, {concurrentId}),
         actions: FETCH_NODES,
         dataHandler: prepareComputeNodesData,
     });
@@ -130,4 +140,11 @@ export const setSearchValue = (value: string) => {
     } as const;
 };
 
+export const setSort = (sortParams: NodesSortParams) => {
+    return {
+        type: SET_SORT,
+        data: sortParams,
+    } as const;
+};
+
 export default nodes;

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

@@ -1,10 +1,10 @@
 import {Selector, createSelector} from 'reselect';
-import {escapeRegExp} from 'lodash';
 
 import {EFlag} from '../../../types/api/enums';
 import {calcUptimeInSeconds} from '../../../utils';
 import {HOUR_IN_SECONDS} from '../../../utils/constants';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import {prepareSearchValue} from '../../../utils/filters';
 
 import type {ProblemFilterValue} from '../settings/types';
 import type {NodesPreparedEntity, NodesStateSlice} from './types';
@@ -41,7 +41,7 @@ const filterNodesBySearchValue = (nodesList: NodesPreparedEntity[] = [], searchV
     if (!searchValue) {
         return nodesList;
     }
-    const re = new RegExp(escapeRegExp(searchValue), 'i');
+    const re = prepareSearchValue(searchValue);
 
     return nodesList.filter((node) => {
         return node.Host ? re.test(node.Host) || re.test(String(node.NodeId)) : true;

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

@@ -1,3 +1,5 @@
+import type {OrderType} from '@gravity-ui/react-data-table';
+
 import type {IResponseError} from '../../../types/api/error';
 import type {TEndpoint, TPoolStats} from '../../../types/api/nodes';
 import type {
@@ -9,13 +11,14 @@ import type {EFlag} from '../../../types/api/enums';
 import type {ApiRequestAction} from '../../utils';
 import type {VisibleEntities} from '../storage/types';
 
-import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import type {NodesSortValue, NodesUptimeFilterValues} from '../../../utils/nodes';
 import {
     FETCH_NODES,
     resetNodesState,
     setDataWasNotLoaded,
     setNodesUptimeFilter,
     setSearchValue,
+    setSort,
 } from './nodes';
 
 // Since nodes from different endpoints can have different types,
@@ -42,6 +45,8 @@ export interface NodesState {
     wasLoaded: boolean;
     nodesUptimeFilter: NodesUptimeFilterValues;
     searchValue: string;
+    sortValue?: NodesSortValue;
+    sortOrder?: OrderType;
     data?: NodesPreparedEntity[];
     totalNodes?: number;
     error?: IResponseError;
@@ -49,17 +54,21 @@ export interface NodesState {
 
 export type NodeType = 'static' | 'dynamic' | 'any';
 
-interface RequestParams {
+export interface NodesSortParams {
+    sortOrder?: OrderType;
+    sortValue?: NodesSortValue;
+}
+
+export interface NodesGeneralRequestParams extends NodesSortParams {
     filter?: string; // NodeId or Host
     uptime?: number; // return nodes with less uptime in seconds
     problems_only?: boolean; // return nodes with SystemState !== EFlag.Green
-    sort?: string; // Sort by one of ESort params (may differ for /nodes and /compute)
 
     offser?: number;
     limit?: number;
 }
 
-export interface NodesApiRequestParams extends RequestParams {
+export interface NodesApiRequestParams extends NodesGeneralRequestParams {
     tenant?: string;
     type?: NodeType;
     visibleEntities?: VisibleEntities; // "with" param
@@ -67,7 +76,7 @@ export interface NodesApiRequestParams extends RequestParams {
     tablets?: boolean;
 }
 
-export interface ComputeApiRequestParams extends RequestParams {
+export interface ComputeApiRequestParams extends NodesGeneralRequestParams {
     path: string;
     version?: EVersion; // only v2 works with filters
 }
@@ -90,6 +99,7 @@ export type NodesAction =
           | ReturnType<typeof setDataWasNotLoaded>
           | ReturnType<typeof setNodesUptimeFilter>
           | ReturnType<typeof setSearchValue>
+          | ReturnType<typeof setSort>
           | ReturnType<typeof resetNodesState>
       );
 

package/dist/store/reducers/settings/settings.ts

@@ -13,6 +13,7 @@ import {
     ENABLE_ADDITIONAL_QUERY_MODES,
     CLUSTER_INFO_HIDDEN_KEY,
     LAST_USED_QUERY_ACTION_KEY,
+    USE_BACKEND_PARAMS_FOR_TABLES_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {getValueFromLS, parseJson} from '../../../utils/utils';
@@ -76,6 +77,10 @@ export const initialState = {
         [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
         [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),
         [CLUSTER_INFO_HIDDEN_KEY]: readSavedSettingsValue(CLUSTER_INFO_HIDDEN_KEY, 'true'),
+        [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: readSavedSettingsValue(
+            USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+            'false',
+        ),
     },
     systemSettings,
 };

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);
 

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

@@ -1,13 +1,23 @@
 import type {Reducer} from 'redux';
 import _ from 'lodash';
 
+import {EVersion} from '../../../types/api/storage';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import '../../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../../utils';
 
-import type {StorageAction, StorageState, StorageType, VisibleEntities} from './types';
+import type {NodesApiRequestParams, NodesSortParams} from '../nodes/types';
+import type {
+    StorageAction,
+    StorageApiRequestParams,
+    StorageSortParams,
+    StorageState,
+    StorageType,
+    VisibleEntities,
+} from './types';
 import {VISIBLE_ENTITIES, STORAGE_TYPES} from './constants';
+import {prepareStorageGroupsResponse, prepareStorageNodesResponse} from './utils';
 
 export const FETCH_STORAGE = createRequestActionTypes('storage', 'FETCH_STORAGE');
 
@@ -18,6 +28,8 @@ const SET_VISIBLE_GROUPS = 'storage/SET_VISIBLE_GROUPS';
 const SET_STORAGE_TYPE = 'storage/SET_STORAGE_TYPE';
 const SET_NODES_UPTIME_FILTER = 'storage/SET_NODES_UPTIME_FILTER';
 const SET_DATA_WAS_NOT_LOADED = 'storage/SET_DATA_WAS_NOT_LOADED';
+const SET_NODES_SORT_PARAMS = 'storage/SET_NODES_SORT_PARAMS';
+const SET_GROUPS_SORT_PARAMS = 'storage/SET_GROUPS_SORT_PARAMS';
 
 const initialState = {
     loading: true,
@@ -42,6 +54,8 @@ const storage: Reducer<StorageState, StorageAction> = (state = initialState, act
                 ...state,
                 nodes: action.data.nodes,
                 groups: action.data.groups,
+                total: action.data.total,
+                found: action.data.found,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -80,6 +94,7 @@ const storage: Reducer<StorageState, StorageAction> = (state = initialState, act
             return {
                 ...state,
                 visible: action.data,
+                usageFilter: [],
                 wasLoaded: false,
                 error: undefined,
             };
@@ -107,39 +122,58 @@ const storage: Reducer<StorageState, StorageAction> = (state = initialState, act
                 wasLoaded: false,
             };
         }
+        case SET_NODES_SORT_PARAMS: {
+            return {
+                ...state,
+                nodesSortValue: action.data.sortValue,
+                nodesSortOrder: action.data.sortOrder,
+            };
+        }
+        case SET_GROUPS_SORT_PARAMS: {
+            return {
+                ...state,
+                groupsSortValue: action.data.sortValue,
+                groupsSortOrder: action.data.sortOrder,
+            };
+        }
         default:
             return state;
     }
 };
 
-export function getStorageInfo(
-    {
-        tenant,
-        visibleEntities,
-        nodeId,
-        type,
-    }: {
-        tenant?: string;
-        visibleEntities?: VisibleEntities;
-        nodeId?: string;
-        type?: StorageType;
-    },
-    {concurrentId}: {concurrentId?: string} = {},
-) {
-    if (type === STORAGE_TYPES.nodes) {
-        return createApiRequest({
-            request: window.api.getNodes({tenant, visibleEntities, type: 'static'}, {concurrentId}),
-            actions: FETCH_STORAGE,
-            dataHandler: (data) => ({nodes: data}),
-        });
-    }
+const concurrentId = 'getStorageInfo';
 
+export const getStorageNodesInfo = ({
+    tenant,
+    visibleEntities,
+    ...params
+}: Omit<NodesApiRequestParams, 'type'>) => {
     return createApiRequest({
-        request: window.api.getStorageInfo({tenant, visibleEntities, nodeId}, {concurrentId}),
+        request: window.api.getNodes(
+            {tenant, visibleEntities, type: 'static', ...params},
+            {concurrentId},
+        ),
         actions: FETCH_STORAGE,
-        dataHandler: (data) => ({groups: data}),
+        dataHandler: prepareStorageNodesResponse,
     });
-}
+};
+
+export const getStorageGroupsInfo = ({
+    tenant,
+    visibleEntities,
+    nodeId,
+    version = EVersion.v1,
+    ...params
+}: StorageApiRequestParams) => {
+    return createApiRequest({
+        request: window.api.getStorageInfo(
+            {tenant, visibleEntities, nodeId, version, ...params},
+            {concurrentId},
+        ),
+        actions: FETCH_STORAGE,
+        dataHandler: prepareStorageGroupsResponse,
+    });
+};
 
 export function setInitialState() {
     return {
@@ -188,4 +222,18 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
+export const setNodesSortParams = (sortParams: NodesSortParams) => {
+    return {
+        type: SET_NODES_SORT_PARAMS,
+        data: sortParams,
+    } as const;
+};
+
+export const setGroupsSortParams = (sortParams: StorageSortParams) => {
+    return {
+        type: SET_GROUPS_SORT_PARAMS,
+        data: sortParams,
+    } as const;
+};
+
 export default storage;