ydb-embedded-ui 4.13.0 → 4.15.0

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

@@ -65,15 +65,3 @@ export enum EVersion {
     v1 = 'v1',
     v2 = 'v2', // only this versions works with sorting
 }
-
-export enum ESort {
-    NodeId = 'NodeId',
-    Host = 'Host',
-    DC = 'DC',
-    Rack = 'Rack',
-    Version = 'Version',
-    Uptime = 'Uptime',
-    Memory = 'Memory',
-    CPU = 'CPU',
-    LoadAverage = 'LoadAverage',
-}

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

@@ -101,15 +101,3 @@ enum EConfigState {
     'Consistent' = 'Consistent',
     'Outdated' = 'Outdated',
 }
-
-export enum ESort {
-    NodeId = 'NodeId',
-    Host = 'Host',
-    DC = 'DC',
-    Rack = 'Rack',
-    Version = 'Version',
-    Uptime = 'Uptime',
-    Memory = 'Memory',
-    CPU = 'CPU',
-    LoadAverage = 'LoadAverage',
-}

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

@@ -119,3 +119,6 @@ export const CLUSTER_INFO_HIDDEN_KEY = 'clusterInfoHidden';
 
 // Remain "tab" in key name for backward compatibility
 export const TENANT_INITIAL_PAGE_KEY = 'saved_tenant_initial_tab';
+
+// Send filters and sort params to backend for Nodes and Storage tables
+export const USE_BACKEND_PARAMS_FOR_TABLES_KEY = 'useBackendParamsForTables';

package/dist/utils/filters.ts

@@ -0,0 +1,23 @@
+import {escapeRegExp} from 'lodash';
+
+import type {OrderType} from '@gravity-ui/react-data-table';
+import {DESCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
+
+export const prepareSortValue = (
+    sortValue: string | undefined,
+    sortOrder: OrderType = DESCENDING,
+) => {
+    if (!sortValue) {
+        return '';
+    }
+
+    if (sortOrder === DESCENDING) {
+        return '-' + sortValue;
+    }
+
+    return sortValue;
+};
+
+export const prepareSearchValue = (searchValue = '') => {
+    return new RegExp(escapeRegExp(searchValue), 'i');
+};

package/dist/utils/hooks/index.ts

@@ -2,3 +2,7 @@ export * from './useAutofetcher';
 export * from './useTypedSelector';
 export * from './useSetting';
 export * from './useQueryModes';
+export * from './useTableSort';
+
+export * from './useNodesRequestParams';
+export * from './useStorageRequestParams';

package/dist/utils/hooks/useNodesRequestParams.ts

@@ -0,0 +1,46 @@
+import {useMemo} from 'react';
+
+import type {NodesGeneralRequestParams} from '../../store/reducers/nodes/types';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import {ProblemFilterValues} from '../../store/reducers/settings/settings';
+
+import {HOUR_IN_SECONDS, USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../constants';
+import {NodesUptimeFilterValues} from '../nodes';
+import {useSetting} from './useSetting';
+
+interface NodesRawRequestParams
+    extends Omit<NodesGeneralRequestParams, 'problems_only' | 'uptime'> {
+    problemFilter?: ProblemFilterValue;
+    nodesUptimeFilter?: NodesUptimeFilterValues;
+}
+
+export const useNodesRequestParams = ({
+    filter,
+    problemFilter,
+    nodesUptimeFilter,
+    sortOrder,
+    sortValue,
+}: NodesRawRequestParams) => {
+    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) {
+            const problemsOnly = problemFilter === ProblemFilterValues.PROBLEMS;
+            const uptime =
+                nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime
+                    ? HOUR_IN_SECONDS
+                    : undefined;
+
+            return {
+                filter,
+                problems_only: problemsOnly,
+                uptime,
+                sortOrder,
+                sortValue,
+            };
+        }
+        return undefined;
+    }, [useBackendParamsForTables, filter, problemFilter, nodesUptimeFilter, sortOrder, sortValue]);
+};

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

@@ -0,0 +1,37 @@
+import {useMemo} from 'react';
+
+import {OrderType, SortOrder} from '@gravity-ui/react-data-table';
+import {DESCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
+
+interface SortParams {
+    sortValue: string | undefined;
+    sortOrder: OrderType | undefined;
+}
+
+export type HandleSort = (rawValue: SortOrder | SortOrder[] | undefined) => void;
+
+export const useTableSort = (
+    {sortValue, sortOrder = DESCENDING}: SortParams,
+    onSort: (params: SortParams) => void,
+): [SortOrder | undefined, HandleSort] => {
+    const sort: SortOrder | undefined = useMemo(() => {
+        if (!sortValue) {
+            return undefined;
+        }
+
+        return {
+            columnId: sortValue,
+            order: sortOrder,
+        };
+    }, [sortValue, sortOrder]);
+
+    const handleSort: HandleSort = (rawValue) => {
+        const value = Array.isArray(rawValue) ? rawValue[0] : rawValue;
+        onSort({
+            sortValue: value?.columnId,
+            sortOrder: value?.order,
+        });
+    };
+
+    return [sort, handleSort];
+};

package/dist/utils/nodes.ts

@@ -2,6 +2,7 @@ import type {TSystemStateInfo} from '../types/api/nodes';
 import type {TNodeInfo} from '../types/api/nodesList';
 import type {NodesPreparedEntity} from '../store/reducers/nodes/types';
 import type {NodesMap} from '../types/store/nodesList';
+import type {ValueOf} from '../types/common';
 import {EFlag} from '../types/api/enums';
 
 export enum NodesUptimeFilterValues {
@@ -31,3 +32,27 @@ export const prepareNodesMap = (nodesList?: TNodeInfo[]) => {
         return nodesMap;
     }, new Map());
 };
+
+/**
+ * Values to sort /compute v2 and /nodes responses
+ *
+ * For actual values go to:\
+ * /nodes: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_nodes.h\
+ * /compute: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_compute.h
+ */
+export const NODES_SORT_VALUES = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Version: 'Version',
+    Uptime: 'Uptime',
+    Memory: 'Memory',
+    CPU: 'CPU',
+    LoadAverage: 'LoadAverage',
+} as const;
+
+export type NodesSortValue = ValueOf<typeof NODES_SORT_VALUES>;
+
+export const isSortableNodesProperty = (value: string): value is NodesSortValue =>
+    Object.values(NODES_SORT_VALUES).includes(value as NodesSortValue);