ydb-embedded-ui 4.9.0 → 4.10.0

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

@@ -0,0 +1,279 @@
+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 {
+    PreparedStorageGroup,
+    PreparedStorageNode,
+    RawStorageGroup,
+    StorageStateSlice,
+    UsageFilter,
+} from './types';
+import {filterNodesByUptime} from '../nodes/nodes';
+
+// ==== 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,
+    };
+};
+
+// ==== Filters ====
+
+const prepareSearchText = (text: string) => text.trim().toLowerCase();
+
+const filterNodesByText = (entities: PreparedStorageNode[], text: string) => {
+    const preparedSearch = prepareSearchText(text);
+
+    if (!preparedSearch) {
+        return entities;
+    }
+
+    return entities.filter((entity) => {
+        return (
+            entity.NodeId?.toString().includes(preparedSearch) ||
+            entity.Host?.toLowerCase().includes(preparedSearch)
+        );
+    });
+};
+const filterGroupsByText = (entities: PreparedStorageGroup[], text: string) => {
+    const preparedSearch = prepareSearchText(text);
+
+    if (!preparedSearch) {
+        return entities;
+    }
+
+    return entities.filter((entity) => {
+        return (
+            entity.PoolName?.toLowerCase().includes(preparedSearch) ||
+            entity.GroupID?.toString().includes(preparedSearch)
+        );
+    });
+};
+
+const filterGroupsByUsage = (entities: PreparedStorageGroup[], usage?: string[]) => {
+    if (!Array.isArray(usage) || usage.length === 0) {
+        return entities;
+    }
+
+    return entities.filter((entity) => {
+        const entityUsage = getUsage(entity, 5);
+        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 selectStorageFilter = (state: StorageStateSlice) => state.storage.filter;
+export const selectUsageFilter = (state: StorageStateSlice) => state.storage.usageFilter;
+export const selectVisibleEntities = (state: StorageStateSlice) => state.storage.visible;
+export const selectNodesUptimeFilter = (state: StorageStateSlice) =>
+    state.storage.nodesUptimeFilter;
+export const selectStorageType = (state: StorageStateSlice) => state.storage.type;
+
+// ==== Complex selectors ====
+
+const selectPreparedStorageNodes: Selector<StorageStateSlice, PreparedStorageNode[]> =
+    createSelector(selectStorageNodes, (storageNodes) => {
+        if (!storageNodes) {
+            return [];
+        }
+
+        return storageNodes.map(prepareStorageNodeData);
+    });
+
+export const selectPreparedStorageGroups: Selector<StorageStateSlice, PreparedStorageGroup[]> =
+    createSelector(selectStoragePools, (storagePools) => {
+        const preparedGroups: PreparedStorageGroup[] = [];
+
+        storagePools?.forEach((pool) => {
+            pool.Groups?.forEach((group) => {
+                preparedGroups.push(prepareStorageGroupData(group, pool.Name));
+            });
+        });
+
+        return preparedGroups;
+    });
+
+export const selectVDisksForPDisk: Selector<
+    StorageStateSlice,
+    TVDiskStateInfo[] | undefined,
+    [number | undefined, number | undefined]
+> = createSelector(
+    [
+        selectStorageNodes,
+        (_state, nodeId: number | undefined) => nodeId,
+        (_state, _nodeId, pdiskId: number | undefined) => pdiskId,
+    ],
+    (storageNodes, nodeId, pdiskId) => {
+        const targetNode = storageNodes?.find((node) => node.NodeId === nodeId);
+        return targetNode?.VDisks?.filter((vdisk) => vdisk.PDiskId === pdiskId).map((data) => ({
+            ...data,
+            NodeId: nodeId,
+        }));
+    },
+);
+
+export const selectUsageFilterOptions: Selector<StorageStateSlice, UsageFilter[]> = createSelector(
+    selectPreparedStorageGroups,
+    (groups) => {
+        const items: Record<number, number> = {};
+
+        groups.forEach((group) => {
+            const usage = getUsage(group, 5);
+
+            if (!Object.prototype.hasOwnProperty.call(items, usage)) {
+                items[usage] = 0;
+            }
+
+            items[usage] += 1;
+        });
+
+        return Object.entries(items)
+            .map(([threshold, count]) => ({threshold: Number(threshold), count}))
+            .sort((a, b) => b.threshold - a.threshold);
+    },
+);
+
+// ==== Complex selectors with filters ====
+
+export const selectFilteredNodes: Selector<StorageStateSlice, PreparedStorageNode[]> =
+    createSelector(
+        [selectPreparedStorageNodes, selectStorageFilter, selectNodesUptimeFilter],
+        (storageNodes, textFilter, uptimeFilter) => {
+            let result = storageNodes;
+            result = filterNodesByText(result, textFilter);
+            result = filterNodesByUptime(result, uptimeFilter);
+
+            return result;
+        },
+    );
+
+export const selectFilteredGroups: Selector<StorageStateSlice, PreparedStorageGroup[]> =
+    createSelector(
+        [selectPreparedStorageGroups, selectStorageFilter, selectUsageFilter],
+        (storageGroups, textFilter, usageFilter) => {
+            let result = storageGroups;
+            result = filterGroupsByText(result, textFilter);
+            result = filterGroupsByUsage(result, usageFilter);
+
+            return result;
+        },
+    );

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

@@ -0,0 +1,191 @@
+import type {Reducer} from 'redux';
+import _ from 'lodash';
+
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import '../../../services/api';
+
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {StorageAction, StorageState, StorageType, VisibleEntities} from './types';
+import {VISIBLE_ENTITIES, STORAGE_TYPES} from './constants';
+
+export const FETCH_STORAGE = createRequestActionTypes('storage', 'FETCH_STORAGE');
+
+const SET_INITIAL = 'storage/SET_INITIAL';
+const SET_FILTER = 'storage/SET_FILTER';
+const SET_USAGE_FILTER = 'storage/SET_USAGE_FILTER';
+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 initialState = {
+    loading: true,
+    wasLoaded: false,
+    filter: '',
+    usageFilter: [],
+    visible: VISIBLE_ENTITIES.missing,
+    nodesUptimeFilter: NodesUptimeFilterValues.All,
+    type: STORAGE_TYPES.groups,
+};
+
+const storage: Reducer<StorageState, StorageAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_STORAGE.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_STORAGE.SUCCESS: {
+            return {
+                ...state,
+                nodes: action.data.nodes,
+                groups: action.data.groups,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_STORAGE.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+                wasLoaded: true,
+            };
+        }
+        case SET_INITIAL: {
+            return {
+                ...initialState,
+            };
+        }
+        case SET_FILTER: {
+            return {
+                ...state,
+                filter: action.data,
+            };
+        }
+        case SET_USAGE_FILTER: {
+            return {
+                ...state,
+                usageFilter: action.data,
+            };
+        }
+        case SET_VISIBLE_GROUPS: {
+            return {
+                ...state,
+                visible: action.data,
+                wasLoaded: false,
+                error: undefined,
+            };
+        }
+
+        case SET_NODES_UPTIME_FILTER: {
+            return {
+                ...state,
+                nodesUptimeFilter: action.data,
+            };
+        }
+        case SET_STORAGE_TYPE: {
+            return {
+                ...state,
+                type: action.data,
+                filter: '',
+                usageFilter: [],
+                wasLoaded: false,
+                error: undefined,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
+        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}),
+        });
+    }
+
+    return createApiRequest({
+        request: window.api.getStorageInfo({tenant, visibleEntities, nodeId}, {concurrentId}),
+        actions: FETCH_STORAGE,
+        dataHandler: (data) => ({groups: data}),
+    });
+}
+
+export function setInitialState() {
+    return {
+        type: SET_INITIAL,
+    } as const;
+}
+
+export function setStorageType(value: StorageType) {
+    return {
+        type: SET_STORAGE_TYPE,
+        data: value,
+    } as const;
+}
+
+export function setStorageTextFilter(value: string) {
+    return {
+        type: SET_FILTER,
+        data: value,
+    } as const;
+}
+
+export function setUsageFilter(value: string[]) {
+    return {
+        type: SET_USAGE_FILTER,
+        data: value,
+    } as const;
+}
+
+export function setVisibleEntities(value: VisibleEntities) {
+    return {
+        type: SET_VISIBLE_GROUPS,
+        data: value,
+    } as const;
+}
+
+export function setNodesUptimeFilter(value: NodesUptimeFilterValues) {
+    return {
+        type: SET_NODES_UPTIME_FILTER,
+        data: value,
+    } as const;
+}
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
+export default storage;

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

@@ -1,12 +1,92 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {TNodesInfo, TSystemStateInfo} from '../../../types/api/nodes';
+import type {TPDiskStateInfo} from '../../../types/api/pdisk';
+import type {
+    TBSGroupStateInfo,
+    THiveStorageGroupStats,
+    TStorageInfo,
+} from '../../../types/api/storage';
 import type {ValueOf} from '../../../types/common';
+import type {NodesUptimeFilterValues} from '../../../utils/nodes';
+import type {ApiRequestAction} from '../../utils';
 
 import {STORAGE_TYPES, VISIBLE_ENTITIES} from './constants';
+import {
+    FETCH_STORAGE,
+    setDataWasNotLoaded,
+    setInitialState,
+    setNodesUptimeFilter,
+    setStorageTextFilter,
+    setStorageType,
+    setUsageFilter,
+    setVisibleEntities,
+} from './storage';
 
 export type VisibleEntities = ValueOf<typeof VISIBLE_ENTITIES>;
 export type StorageType = ValueOf<typeof STORAGE_TYPES>;
 
+export interface PreparedStorageNode extends TSystemStateInfo {
+    NodeId: number;
+    PDisks: TPDiskStateInfo[] | undefined;
+
+    Missing: number;
+    Uptime: string;
+}
+
+export type RawStorageGroup = TBSGroupStateInfo & THiveStorageGroupStats;
+
+export interface PreparedStorageGroup extends RawStorageGroup {
+    PoolName: string | undefined;
+
+    Read: number;
+    Write: number;
+    Used: number;
+    Limit: number;
+    Missing: number;
+    UsedSpaceFlag: number;
+    Type: string | null;
+}
+
+export interface UsageFilter {
+    threshold: number;
+    count: number;
+}
+
 export interface StorageApiRequestParams {
     tenant?: string;
     nodeId?: string;
     visibleEntities?: VisibleEntities;
 }
+
+export interface StorageState {
+    loading: boolean;
+    wasLoaded: boolean;
+    filter: string;
+    usageFilter: string[];
+    visible: VisibleEntities;
+    nodesUptimeFilter: NodesUptimeFilterValues;
+    type: StorageType;
+    nodes?: TNodesInfo;
+    groups?: TStorageInfo;
+    error?: IResponseError;
+}
+
+type GetStorageInfoApiRequestAction = ApiRequestAction<
+    typeof FETCH_STORAGE,
+    {nodes?: TNodesInfo; groups?: TStorageInfo},
+    IResponseError
+>;
+
+export type StorageAction =
+    | GetStorageInfoApiRequestAction
+    | ReturnType<typeof setInitialState>
+    | ReturnType<typeof setStorageType>
+    | ReturnType<typeof setStorageTextFilter>
+    | ReturnType<typeof setUsageFilter>
+    | ReturnType<typeof setVisibleEntities>
+    | ReturnType<typeof setNodesUptimeFilter>
+    | ReturnType<typeof setDataWasNotLoaded>;
+
+export interface StorageStateSlice {
+    storage: StorageState;
+}

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

@@ -0,0 +1,46 @@
+import {Selector, createSelector} from 'reselect';
+import {escapeRegExp} from 'lodash';
+
+import {EFlag} from '../../../types/api/enums';
+
+import type {RootState} from '..';
+import type {ProblemFilterValue} from '../settings/types';
+import {ProblemFilterValues, selectProblemFilter} from '../settings/settings';
+
+import type {PreparedTenant, TenantsStateSlice} from './types';
+
+// ==== Filters ====
+
+const filterTenantsByProblems = (tenants: PreparedTenant[], problemFilter: ProblemFilterValue) => {
+    if (problemFilter === ProblemFilterValues.ALL) {
+        return tenants;
+    }
+
+    return tenants.filter((tenant) => {
+        return tenant.Overall && tenant.Overall !== EFlag.Green;
+    });
+};
+
+const filteredTenantsBySearch = (tenants: PreparedTenant[], searchQuery: string) => {
+    return tenants.filter((item) => {
+        const re = new RegExp(escapeRegExp(searchQuery), 'i');
+        return re.test(item.Name) || re.test(item.controlPlaneName);
+    });
+};
+
+// ==== Simple selectors ====
+
+export const selectTenants = (state: TenantsStateSlice) => state.tenants.tenants;
+export const selectTenantsSearchValue = (state: TenantsStateSlice) => state.tenants.searchValue;
+
+// ==== Complex selectors ====
+
+export const selectFilteredTenants: Selector<RootState, PreparedTenant[]> = createSelector(
+    [selectTenants, selectProblemFilter, selectTenantsSearchValue],
+    (tenants, problemFilter, searchQuery) => {
+        let result = filterTenantsByProblems(tenants, problemFilter);
+        result = filteredTenantsBySearch(result, searchQuery);
+
+        return result;
+    },
+);

package/dist/store/reducers/tenants/tenants.ts

@@ -4,10 +4,13 @@ import '../../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../../utils';
 
 import type {TenantsAction, TenantsState} from './types';
+import {prepareTenants} from './utils';
 
 export const FETCH_TENANTS = createRequestActionTypes('tenants', 'FETCH_TENANTS');
 
-const initialState = {loading: true, wasLoaded: false};
+const SET_SEARCH_VALUE = 'tenants/SET_SEARCH_VALUE';
+
+const initialState = {loading: true, wasLoaded: false, searchValue: '', tenants: []};
 
 const tenants: Reducer<TenantsState, TenantsAction> = (state = initialState, action) => {
     switch (action.type) {
@@ -33,6 +36,12 @@ const tenants: Reducer<TenantsState, TenantsAction> = (state = initialState, act
                 loading: false,
             };
         }
+        case SET_SEARCH_VALUE: {
+            return {
+                ...state,
+                searchValue: action.data,
+            };
+        }
         default:
             return state;
     }
@@ -45,22 +54,20 @@ export function getTenantsInfo(clusterName?: string) {
         dataHandler: (response, getState) => {
             const {singleClusterMode} = getState();
 
-            if (singleClusterMode) {
-                return response.TenantInfo;
-            } else {
-                return response.TenantInfo?.map((tenant) => {
-                    const node = tenant.Nodes ? tenant.Nodes[0] : {};
-                    const address =
-                        node.Host && node.Endpoints
-                            ? node.Endpoints.find((endpoint) => endpoint.Name === 'http-mon')
-                                  ?.Address
-                            : undefined;
-                    const backend = node.Host ? `${node.Host}${address ? address : ''}` : undefined;
-                    return {...tenant, backend};
-                });
+            if (!response.TenantInfo) {
+                return [];
             }
+
+            return prepareTenants(response.TenantInfo, singleClusterMode);
         },
     });
 }
 
+export const setSearchValue = (value: string) => {
+    return {
+        type: SET_SEARCH_VALUE,
+        data: value,
+    } as const;
+};
+
 export default tenants;

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

@@ -1,17 +1,32 @@
-import {FETCH_TENANTS} from './tenants';
+import {FETCH_TENANTS, setSearchValue} from './tenants';
 
 import type {TTenant} from '../../../types/api/tenant';
+import type {IResponseError} from '../../../types/api/error';
 import type {ApiRequestAction} from '../../utils';
 
 export interface PreparedTenant extends TTenant {
-    backend?: string;
+    backend: string | undefined;
+    sharedTenantName: string | undefined;
+    controlPlaneName: string;
+    cpu: number;
+    memory: number;
+    storage: number;
+    nodesCount: number;
+    groupsCount: number;
 }
 
 export interface TenantsState {
     loading: boolean;
     wasLoaded: boolean;
-    tenants?: PreparedTenant[];
-    error?: unknown;
+    searchValue: string;
+    tenants: PreparedTenant[];
+    error?: IResponseError;
 }
 
-export type TenantsAction = ApiRequestAction<typeof FETCH_TENANTS, PreparedTenant[], unknown>;
+export type TenantsAction =
+    | ApiRequestAction<typeof FETCH_TENANTS, PreparedTenant[], IResponseError>
+    | ReturnType<typeof setSearchValue>;
+
+export interface TenantsStateSlice {
+    tenants: TenantsState;
+}