ydb-embedded-ui 4.8.2 → 4.10.0

package/dist/store/reducers/{nodes.ts → nodes/nodes.ts}

@@ -2,23 +2,24 @@ import type {Reducer} from 'redux';
 import {createSelector, Selector} from 'reselect';
 import {escapeRegExp} from 'lodash/fp';
 
-import '../../services/api';
-import {HOUR_IN_SECONDS} from '../../utils/constants';
-import {calcUptime, calcUptimeInSeconds} from '../../utils';
-import {NodesUptimeFilterValues} from '../../utils/nodes';
+import '../../../services/api';
+import {HOUR_IN_SECONDS} from '../../../utils/constants';
+import {calcUptime, calcUptimeInSeconds} from '../../../utils';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import {EFlag} from '../../../types/api/enums';
+
+import type {ProblemFilterValue} from '../settings/types';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+import {ProblemFilterValues} from '../settings/settings';
+
 import type {
-    INodesAction,
-    INodesApiRequestParams,
-    INodesHandledResponse,
-    INodesPreparedEntity,
-    INodesRootStateSlice,
-    INodesState,
-} from '../../types/store/nodes';
-import type {ValueOf} from '../../types/common';
-import {EFlag} from '../../types/api/enums';
-
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import {ProblemFilterValues} from './settings/settings';
+    NodesAction,
+    NodesApiRequestParams,
+    NodesHandledResponse,
+    NodesPreparedEntity,
+    NodesStateSlice,
+    NodesState,
+} from './types';
 
 export const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
@@ -34,7 +35,7 @@ const initialState = {
     searchValue: '',
 };
 
-const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action) => {
+const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_NODES.REQUEST: {
             return {
@@ -92,11 +93,11 @@ const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action)
     }
 };
 
-export function getNodes({tenant, filter, type = 'any'}: INodesApiRequestParams) {
+export function getNodes({tenant, visibleEntities, type = 'any'}: NodesApiRequestParams) {
     return createApiRequest({
-        request: window.api.getNodes({tenant, filter, type}),
+        request: window.api.getNodes({tenant, visibleEntities, type}),
         actions: FETCH_NODES,
-        dataHandler: (data): INodesHandledResponse => {
+        dataHandler: (data): NodesHandledResponse => {
             const rawNodes = data.Nodes || [];
 
             const preparedNodes = rawNodes.map((node) => {
@@ -121,8 +122,8 @@ export function getComputeNodes(path: string) {
     return createApiRequest({
         request: window.api.getCompute(path),
         actions: FETCH_NODES,
-        dataHandler: (data): INodesHandledResponse => {
-            const preparedNodes: INodesPreparedEntity[] = [];
+        dataHandler: (data): NodesHandledResponse => {
+            const preparedNodes: NodesPreparedEntity[] = [];
 
             if (data.Tenants) {
                 for (const tenant of data.Tenants) {
@@ -174,13 +175,13 @@ export const setSearchValue = (value: string) => {
     } as const;
 };
 
-const getNodesUptimeFilter = (state: INodesRootStateSlice) => state.nodes.nodesUptimeFilter;
-const getSearchValue = (state: INodesRootStateSlice) => state.nodes.searchValue;
-const getNodesList = (state: INodesRootStateSlice) => state.nodes.data;
+const getNodesUptimeFilter = (state: NodesStateSlice) => state.nodes.nodesUptimeFilter;
+const getSearchValue = (state: NodesStateSlice) => state.nodes.searchValue;
+const getNodesList = (state: NodesStateSlice) => state.nodes.data;
 
 const filterNodesByProblemsStatus = (
-    nodesList: INodesPreparedEntity[] = [],
-    problemFilter: ValueOf<typeof ProblemFilterValues>,
+    nodesList: NodesPreparedEntity[] = [],
+    problemFilter: ProblemFilterValue,
 ) => {
     if (problemFilter === ProblemFilterValues.ALL) {
         return nodesList;
@@ -191,8 +192,8 @@ const filterNodesByProblemsStatus = (
     });
 };
 
-export const filterNodesByUptime = (
-    nodesList: INodesPreparedEntity[] = [],
+export const filterNodesByUptime = <T extends {StartTime?: string}>(
+    nodesList: T[] = [],
     nodesUptimeFilter: NodesUptimeFilterValues,
 ) => {
     if (nodesUptimeFilter === NodesUptimeFilterValues.All) {
@@ -203,7 +204,7 @@ export const filterNodesByUptime = (
     });
 };
 
-const filterNodesBySearchValue = (nodesList: INodesPreparedEntity[] = [], searchValue: string) => {
+const filterNodesBySearchValue = (nodesList: NodesPreparedEntity[] = [], searchValue: string) => {
     if (!searchValue) {
         return nodesList;
     }
@@ -215,8 +216,8 @@ const filterNodesBySearchValue = (nodesList: INodesPreparedEntity[] = [], search
 };
 
 export const getFilteredPreparedNodesList: Selector<
-    INodesRootStateSlice,
-    INodesPreparedEntity[] | undefined
+    NodesStateSlice,
+    NodesPreparedEntity[] | undefined
 > = createSelector(
     [getNodesList, getNodesUptimeFilter, getSearchValue, (state) => state.settings.problemFilter],
     (nodesList, uptimeFilter, searchValue, problemFilter) => {

package/dist/{types/store/nodes.ts → store/reducers/nodes/types.ts}

@@ -1,22 +1,23 @@
-import type {IResponseError} from '../api/error';
-import type {TEndpoint, TPoolStats} from '../api/nodes';
-import type {TTabletStateInfo as TComputeTabletStateInfo} from '../api/compute';
-import type {TTabletStateInfo as TFullTabletStateInfo} from '../api/tablet';
-import type {EFlag} from '../api/enums';
+import type {IResponseError} from '../../../types/api/error';
+import type {TEndpoint, TPoolStats} from '../../../types/api/nodes';
+import type {TTabletStateInfo as TComputeTabletStateInfo} from '../../../types/api/compute';
+import type {TTabletStateInfo as TFullTabletStateInfo} from '../../../types/api/tablet';
+import type {EFlag} from '../../../types/api/enums';
+import type {ApiRequestAction} from '../../utils';
+import type {VisibleEntities} from '../storage/types';
 
-import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import {
     FETCH_NODES,
     resetNodesState,
     setDataWasNotLoaded,
     setNodesUptimeFilter,
     setSearchValue,
-} from '../../store/reducers/nodes';
-import {ApiRequestAction} from '../../store/utils';
+} from './nodes';
 
 // Since nodes from different endpoints can have different types,
 // This type describes fields, that are expected by tables with nodes
-export interface INodesPreparedEntity {
+export interface NodesPreparedEntity {
     NodeId: number;
     Host?: string;
     SystemState?: EFlag;
@@ -33,43 +34,39 @@ export interface INodesPreparedEntity {
     Endpoints?: TEndpoint[];
 }
 
-export interface INodesState {
+export interface NodesState {
     loading: boolean;
     wasLoaded: boolean;
     nodesUptimeFilter: NodesUptimeFilterValues;
     searchValue: string;
-    data?: INodesPreparedEntity[];
+    data?: NodesPreparedEntity[];
     totalNodes?: number;
     error?: IResponseError;
 }
 
-type INodesApiRequestNodeType = 'static' | 'dynamic' | 'any';
+export type NodeType = 'static' | 'dynamic' | 'any';
 
-// Space - out of space nodes
-// Missing - nodes with missing disks
-type INodesApiRequestProblemType = 'missing' | 'space';
-
-export interface INodesApiRequestParams {
+export interface NodesApiRequestParams {
     tenant?: string;
-    type?: INodesApiRequestNodeType;
-    filter?: INodesApiRequestProblemType;
+    type?: NodeType;
+    visibleEntities?: VisibleEntities;
     storage?: boolean;
     tablets?: boolean;
 }
 
-export interface INodesHandledResponse {
-    Nodes?: INodesPreparedEntity[];
+export interface NodesHandledResponse {
+    Nodes?: NodesPreparedEntity[];
     TotalNodes: number;
 }
 
-type INodesApiRequestAction = ApiRequestAction<
+type NodesApiRequestAction = ApiRequestAction<
     typeof FETCH_NODES,
-    INodesHandledResponse,
+    NodesHandledResponse,
     IResponseError
 >;
 
-export type INodesAction =
-    | INodesApiRequestAction
+export type NodesAction =
+    | NodesApiRequestAction
     | (
           | ReturnType<typeof setDataWasNotLoaded>
           | ReturnType<typeof setNodesUptimeFilter>
@@ -77,6 +74,6 @@ export type INodesAction =
           | ReturnType<typeof resetNodesState>
       );
 
-export interface INodesRootStateSlice {
-    nodes: INodesState;
+export interface NodesStateSlice {
+    nodes: NodesState;
 }

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

@@ -1,5 +1,5 @@
 import type {IResponseError} from '../../../types/api/error';
-import type {IProcessSpeedStats} from '../../../utils/bytesParsers';
+import type {ProcessSpeedStats} from '../../../utils/bytesParsers';
 import type {ApiRequestAction} from '../../utils';
 
 import {FETCH_PARTITIONS, setDataWasNotLoaded, setSelectedConsumer} from './partitions';
@@ -9,8 +9,8 @@ export interface PreparedPartitionData {
     partitionId: string;
     storeSize: string;
 
-    writeSpeed: IProcessSpeedStats;
-    readSpeed?: IProcessSpeedStats;
+    writeSpeed: ProcessSpeedStats;
+    readSpeed?: ProcessSpeedStats;
 
     partitionWriteLag: number;
     partitionWriteIdleTime: number;

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

@@ -1,7 +1,6 @@
 import type {Reducer} from 'redux';
 import type {ThunkAction} from 'redux-thunk';
 
-import type {ValueOf} from '../../../types/common';
 import {
     SAVED_QUERIES_KEY,
     THEME_KEY,
@@ -13,15 +12,17 @@ import {
     QUERY_INITIAL_MODE_KEY,
     ENABLE_ADDITIONAL_QUERY_MODES,
     CLUSTER_INFO_HIDDEN_KEY,
+    LAST_USED_QUERY_ACTION_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {getValueFromLS, parseJson} from '../../../utils/utils';
-import {QueryModes} from '../../../types/store/query';
+import {QUERY_ACTIONS, QUERY_MODES} from '../../../utils/query';
 
 import {TENANT_PAGES_IDS} from '../tenant/constants';
 
 import type {RootState} from '..';
 import type {
+    ProblemFilterValue,
     SetSettingValueAction,
     SettingsAction,
     SettingsRootStateSlice,
@@ -64,7 +65,14 @@ export const initialState = {
             TENANT_INITIAL_PAGE_KEY,
             TENANT_PAGES_IDS.query,
         ),
-        [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(QUERY_INITIAL_MODE_KEY, QueryModes.script),
+        [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(
+            QUERY_INITIAL_MODE_KEY,
+            QUERY_MODES.script,
+        ),
+        [LAST_USED_QUERY_ACTION_KEY]: readSavedSettingsValue(
+            LAST_USED_QUERY_ACTION_KEY,
+            QUERY_ACTIONS.execute,
+        ),
         [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'),
@@ -125,11 +133,13 @@ export const getParsedSettingValue = (state: SettingsRootStateSlice, name: strin
     return parseJson(value);
 };
 
-export const changeFilter = (filter: ValueOf<typeof ProblemFilterValues>) => {
+export const changeFilter = (filter: ProblemFilterValue) => {
     return {
         type: CHANGE_PROBLEM_FILTER,
         data: filter,
     } as const;
 };
 
+export const selectProblemFilter = (state: SettingsRootStateSlice) => state.settings.problemFilter;
+
 export default settings;

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

@@ -1,8 +1,10 @@
 import type {ValueOf} from '../../../types/common';
 import {changeFilter, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
 
+export type ProblemFilterValue = ValueOf<typeof ProblemFilterValues>;
+
 export interface SettingsState {
-    problemFilter: ValueOf<typeof ProblemFilterValues>;
+    problemFilter: ProblemFilterValue;
     userSettings: Record<string, string | undefined>;
     systemSettings: Record<string, string | undefined>;
 }

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

@@ -0,0 +1,10 @@
+export const VISIBLE_ENTITIES = {
+    all: 'all',
+    missing: 'missing',
+    space: 'space',
+} as const;
+
+export const STORAGE_TYPES = {
+    groups: 'groups',
+    nodes: 'nodes',
+} as const;

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;
+        },
+    );