ydb-embedded-ui 4.14.0 → 4.15.1

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;

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

@@ -1,20 +1,22 @@
+import type {OrderType} from '@gravity-ui/react-data-table';
+
 import type {IResponseError} from '../../../types/api/error';
-import type {TNodesInfo, TSystemStateInfo} from '../../../types/api/nodes';
+import type {TSystemStateInfo} from '../../../types/api/nodes';
 import type {TPDiskStateInfo} from '../../../types/api/pdisk';
-import type {
-    TBSGroupStateInfo,
-    THiveStorageGroupStats,
-    TStorageInfo,
-} from '../../../types/api/storage';
+import type {EVersion, TStorageGroupInfo} from '../../../types/api/storage';
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
 import type {ValueOf} from '../../../types/common';
-import type {NodesUptimeFilterValues} from '../../../utils/nodes';
+import type {NodesSortValue, NodesUptimeFilterValues} from '../../../utils/nodes';
+import type {StorageSortValue} from '../../../utils/storage';
 import type {ApiRequestAction} from '../../utils';
 
 import {STORAGE_TYPES, VISIBLE_ENTITIES} from './constants';
 import {
     FETCH_STORAGE,
     setDataWasNotLoaded,
+    setGroupsSortParams,
     setInitialState,
+    setNodesSortParams,
     setNodesUptimeFilter,
     setStorageTextFilter,
     setStorageType,
@@ -28,23 +30,24 @@ export type StorageType = ValueOf<typeof STORAGE_TYPES>;
 export interface PreparedStorageNode extends TSystemStateInfo {
     NodeId: number;
     PDisks: TPDiskStateInfo[] | undefined;
+    VDisks: TVDiskStateInfo[] | undefined;
 
     Missing: number;
     Uptime: string;
 }
 
-export type RawStorageGroup = TBSGroupStateInfo & THiveStorageGroupStats;
-
-export interface PreparedStorageGroup extends RawStorageGroup {
+export interface PreparedStorageGroup extends TStorageGroupInfo {
     PoolName: string | undefined;
 
+    Usage: number;
     Read: number;
     Write: number;
     Used: number;
     Limit: number;
-    Missing: number;
+    Degraded: number;
+    Kind: string | undefined;
+
     UsedSpaceFlag: number;
-    Type: string | null;
 }
 
 export interface UsageFilter {
@@ -52,10 +55,24 @@ export interface UsageFilter {
     count: number;
 }
 
-export interface StorageApiRequestParams {
+export interface StorageSortParams {
+    sortOrder?: OrderType;
+    sortValue?: StorageSortValue;
+}
+
+export interface StorageSortAndFilterParams extends StorageSortParams {
+    filter?: string; // PoolName or GroupId
+
+    offser?: number;
+    limit?: number;
+}
+
+export interface StorageApiRequestParams extends StorageSortAndFilterParams {
     tenant?: string;
     nodeId?: string;
     visibleEntities?: VisibleEntities;
+
+    version?: EVersion;
 }
 
 export interface StorageState {
@@ -65,15 +82,28 @@ export interface StorageState {
     usageFilter: string[];
     visible: VisibleEntities;
     nodesUptimeFilter: NodesUptimeFilterValues;
+    groupsSortValue?: StorageSortValue;
+    groupsSortOrder?: OrderType;
+    nodesSortValue?: NodesSortValue;
+    nodesSortOrder?: OrderType;
     type: StorageType;
-    nodes?: TNodesInfo;
-    groups?: TStorageInfo;
+    nodes?: PreparedStorageNode[];
+    groups?: PreparedStorageGroup[];
+    found?: number;
+    total?: number;
     error?: IResponseError;
 }
 
+export interface PreparedStorageResponse {
+    nodes?: PreparedStorageNode[];
+    groups?: PreparedStorageGroup[];
+    found: number | undefined;
+    total: number | undefined;
+}
+
 type GetStorageInfoApiRequestAction = ApiRequestAction<
     typeof FETCH_STORAGE,
-    {nodes?: TNodesInfo; groups?: TStorageInfo},
+    PreparedStorageResponse,
     IResponseError
 >;
 
@@ -85,7 +115,9 @@ export type StorageAction =
     | ReturnType<typeof setUsageFilter>
     | ReturnType<typeof setVisibleEntities>
     | ReturnType<typeof setNodesUptimeFilter>
-    | ReturnType<typeof setDataWasNotLoaded>;
+    | ReturnType<typeof setDataWasNotLoaded>
+    | ReturnType<typeof setNodesSortParams>
+    | ReturnType<typeof setGroupsSortParams>;
 
 export interface StorageStateSlice {
     storage: StorageState;

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

@@ -0,0 +1,207 @@
+import type {TNodeInfo, TNodesInfo} from '../../../types/api/nodes';
+import type {
+    TStorageGroupInfo,
+    TStorageGroupInfoV2,
+    TStorageInfo,
+} from '../../../types/api/storage';
+import {EVDiskState, type TVDiskStateInfo} from '../../../types/api/vdisk';
+import {TPDiskState} from '../../../types/api/pdisk';
+import {EFlag} from '../../../types/api/enums';
+import {getPDiskType} from '../../../utils/pdisk';
+import {getUsage} from '../../../utils/storage';
+import {calcUptime} from '../../../utils';
+
+import type {PreparedStorageGroup, PreparedStorageNode, PreparedStorageResponse} from './types';
+
+// ==== Constants  ====
+
+const FLAGS_POINTS = {
+    [EFlag.Green]: 1,
+    [EFlag.Yellow]: 100,
+    [EFlag.Orange]: 10_000,
+    [EFlag.Red]: 1_000_000,
+};
+
+// ==== Prepare groups ====
+
+const prepareVDisk = (vDisk: TVDiskStateInfo, poolName: string | undefined) => {
+    // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
+    return {
+        ...vDisk,
+        StoragePoolName: poolName,
+        Donors: vDisk.Donors?.map((donor) => ({
+            ...donor,
+            StoragePoolName: poolName,
+        })),
+    };
+};
+
+const prepareStorageGroupData = (
+    group: TStorageGroupInfo,
+    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';
+        }
+    }
+
+    const vDisks = group.VDisks?.map((vdisk) => prepareVDisk(vdisk, poolName));
+    const usage = getUsage({Used: usedSpaceBytes, Limit: limitSizeBytes}, 5);
+
+    return {
+        ...group,
+        VDisks: vDisks,
+        Usage: usage,
+        Read: readSpeedBytesPerSec,
+        Write: writeSpeedBytesPerSec,
+        PoolName: poolName,
+        Used: usedSpaceBytes,
+        Limit: limitSizeBytes,
+        Degraded: missing,
+        UsedSpaceFlag: usedSpaceFlag,
+        Kind: mediaType || undefined,
+    };
+};
+
+const prepareStorageGroupDataV2 = (group: TStorageGroupInfoV2): PreparedStorageGroup => {
+    const {
+        VDisks = [],
+        PoolName,
+        Usage = 0,
+        Read = 0,
+        Write = 0,
+        Used = 0,
+        Limit = 0,
+        Degraded = 0,
+        Kind,
+    } = group;
+
+    const UsedSpaceFlag = VDisks.reduce((acc, {DiskSpace}) => {
+        if (DiskSpace && DiskSpace !== EFlag.Grey) {
+            return acc + FLAGS_POINTS[DiskSpace];
+        }
+        return acc;
+    }, 0);
+
+    const vDisks = VDisks.map((vdisk) => prepareVDisk(vdisk, PoolName));
+    const usage = Math.floor(Number(Usage) * 100);
+
+    return {
+        ...group,
+        UsedSpaceFlag,
+        PoolName,
+        Kind,
+        VDisks: vDisks,
+        Usage: usage,
+        Read: Number(Read),
+        Write: Number(Write),
+        Used: Number(Used),
+        Limit: Number(Limit),
+        Degraded: Number(Degraded),
+    };
+};
+
+// ==== Prepare nodes ====
+
+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,
+        VDisks: node.VDisks,
+        Missing: missing,
+    };
+};
+
+// ==== Prepare responses ====
+
+export const prepareStorageNodesResponse = (data: TNodesInfo): PreparedStorageResponse => {
+    const {Nodes, TotalNodes, FoundNodes} = data;
+
+    const preparedNodes = Nodes?.map(prepareStorageNodeData);
+
+    return {
+        nodes: preparedNodes,
+        total: Number(TotalNodes) || preparedNodes?.length,
+        found: Number(FoundNodes),
+    };
+};
+
+export const prepareStorageGroupsResponse = (data: TStorageInfo): PreparedStorageResponse => {
+    const {StoragePools, StorageGroups, TotalGroups, FoundGroups} = data;
+
+    let preparedGroups: PreparedStorageGroup[] = [];
+
+    if (StorageGroups) {
+        preparedGroups = StorageGroups.map(prepareStorageGroupDataV2);
+    } else {
+        StoragePools?.forEach((pool) => {
+            pool.Groups?.forEach((group) => {
+                preparedGroups.push(prepareStorageGroupData(group, pool.Name));
+            });
+        });
+    }
+
+    return {
+        groups: preparedGroups,
+        total: Number(TotalGroups) || preparedGroups.length,
+        found: Number(FoundGroups),
+    };
+};

package/dist/store/utils.ts

@@ -3,7 +3,7 @@ import {AxiosResponse} from 'axios';
 
 import createToast from '../utils/createToast';
 
-import {SET_UNAUTHENTICATED} from './reducers/authentication';
+import {SET_UNAUTHENTICATED} from './reducers/authentication/authentication';
 import type {GetState} from './reducers';
 
 export const nop = (result: any) => result;

package/dist/types/api/error.ts

@@ -18,3 +18,7 @@ export interface NetworkError {
     number?: unknown;
     stack?: string;
 }
+
+export type AuthErrorResponse = IResponseError<{
+    error?: string;
+}>;

package/dist/types/api/storage.ts

@@ -8,7 +8,8 @@ import {TVDiskStateInfo} from './vdisk';
  */
 export interface TStorageInfo {
     Overall?: EFlag;
-    StoragePools?: TStoragePoolInfo[];
+    StoragePools?: TStoragePoolInfo[]; // v1
+    StorageGroups?: TStorageGroupInfoV2[]; // v2
     /** uint64 */
     TotalGroups?: string;
     /** uint64 */
@@ -19,7 +20,7 @@ interface TStoragePoolInfo {
     Overall?: EFlag;
     Name?: string;
     Kind?: string;
-    Groups?: (TBSGroupStateInfo & THiveStorageGroupStats)[];
+    Groups?: TStorageGroupInfo[];
     /** uint64 */
     AcquiredUnits?: string;
     AcquiredIOPS?: number;
@@ -34,7 +35,29 @@ interface TStoragePoolInfo {
     MaximumSize?: string;
 }
 
-export interface TBSGroupStateInfo {
+export interface TStorageGroupInfoV2 extends TStorageGroupInfo {
+    PoolName?: string;
+    Kind?: string;
+
+    /** uint64 */
+    Degraded?: string;
+
+    /** uint64 */
+    Used: string;
+    /** uint64 */
+    Limit: string;
+    /** uint64 */
+    Read: string;
+    /** uint64 */
+    Write: string;
+
+    /** uint64 */
+    Usage?: string;
+}
+
+export type TStorageGroupInfo = TBSGroupStateInfo & THiveStorageGroupStats;
+
+interface TBSGroupStateInfo {
     GroupID?: number;
     ErasureSpecies?: string;
     VDisks?: TVDiskStateInfo[];
@@ -57,7 +80,7 @@ export interface TBSGroupStateInfo {
     Encryption?: boolean;
 }
 
-export interface THiveStorageGroupStats {
+interface THiveStorageGroupStats {
     GroupID?: number;
     /** uint64 */
     AcquiredUnits?: string;
@@ -76,3 +99,8 @@ export interface THiveStorageGroupStats {
     /** uint64 */
     AvailableSize?: string;
 }
+
+export enum EVersion {
+    v1 = 'v1',
+    v2 = 'v2', // only this versions works with sorting
+}

package/dist/types/window.d.ts

@@ -37,6 +37,7 @@ interface Window {
     custom_backend?: string;
 
     __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof import('redux').compose;
+    store?: import('redux').Store;
 
     userSettings?: Record<string, string | undefined>;
     systemSettings?: Record<string, string | undefined>;

package/dist/utils/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './useQueryModes';
 export * from './useTableSort';
 
 export * from './useNodesRequestParams';
+export * from './useStorageRequestParams';

package/dist/utils/hooks/useStorageRequestParams.ts

@@ -0,0 +1,28 @@
+import {useMemo} from 'react';
+
+import type {StorageSortAndFilterParams} from '../../store/reducers/storage/types';
+import {EVersion} from '../../types/api/storage';
+import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../constants';
+import {useSetting} from './useSetting';
+
+export const useStorageRequestParams = ({
+    filter,
+    sortOrder,
+    sortValue,
+}: StorageSortAndFilterParams) => {
+    const [useBackendParamsForTables] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+
+    // If backend params are enabled, update params value to use them in fetch request
+    // Otherwise no params will be updated, no hooks that depend on requestParams will be triggered
+    return useMemo(() => {
+        if (useBackendParamsForTables) {
+            return {
+                version: EVersion.v2,
+                filter,
+                sortOrder,
+                sortValue,
+            };
+        }
+        return undefined;
+    }, [useBackendParamsForTables, filter, sortOrder, sortValue]);
+};

package/dist/utils/hooks/useTableSort.ts

@@ -8,7 +8,7 @@ interface SortParams {
     sortOrder: OrderType | undefined;
 }
 
-type HandleSort = (rawValue: SortOrder | SortOrder[] | undefined) => void;
+export type HandleSort = (rawValue: SortOrder | SortOrder[] | undefined) => void;
 
 export const useTableSort = (
     {sortValue, sortOrder = DESCENDING}: SortParams,

package/dist/utils/storage.ts

@@ -1,12 +1,40 @@
 import type {TVSlotId, TVDiskStateInfo} from '../types/api/vdisk';
-import type {IStoragePoolGroup} from '../types/store/storage';
+import type {ValueOf} from '../types/common';
 
 export const isFullVDiskData = (disk: TVDiskStateInfo | TVSlotId): disk is TVDiskStateInfo =>
     'VDiskId' in disk;
 
-export const getUsage = (data: IStoragePoolGroup, step = 1) => {
+interface EntityWithUsage {
+    Used: number;
+    Limit: number;
+}
+
+export const getUsage = <T extends EntityWithUsage>(data: T, step = 1) => {
     // if limit is 0, display 0
-    const usage = Math.round((data.Used * 100) / data.Limit) || 0;
+    const usage = data.Limit ? (data.Used * 100) / data.Limit : 0;
 
     return Math.floor(usage / step) * step;
 };
+
+/**
+ * Values to sort /storage v2 response
+ *
+ * Source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_storage.h
+ */
+export const STORAGE_SORT_VALUES = {
+    PoolName: 'PoolName',
+    Kind: 'Kind',
+    Erasure: 'Erasure',
+    Degraded: 'Degraded',
+    Usage: 'Usage',
+    GroupId: 'GroupId',
+    Used: 'Used',
+    Limit: 'Limit',
+    Read: 'Read',
+    Write: 'Write',
+} as const;
+
+export type StorageSortValue = ValueOf<typeof STORAGE_SORT_VALUES>;
+
+export const isSortableStorageProperty = (value: string): value is StorageSortValue =>
+    Object.values(STORAGE_SORT_VALUES).includes(value as StorageSortValue);