ydb-embedded-ui 21.1.0 → 22.0.0

package/src/containers/Node/i18n/en.json

@@ -1,9 +1,5 @@
 {
-  "pdisk.developer-ui-button-title": "PDisk Developer UI page",
-  "vdisk.developer-ui-button-title": "VDisk Developer UI page",
-
   "tabs.storage": "Storage",
-  "tabs.structure": "Structure",
   "tabs.tablets": "Tablets",
   "tabs.threads": "Threads",
   "tabs.network": "Network",

package/src/containers/Nodes/NodesTable.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 import type {PaginatedTableData} from '../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../components/PaginatedTable';
-import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
+import {
+    NODES_COLUMNS_IDS,
+    NODES_COLUMNS_WIDTH_LS_KEY,
+} from '../../components/nodesColumns/constants';
 import type {NodesColumn} from '../../components/nodesColumns/types';
 import {useClusterWithProxy} from '../../store/reducers/cluster/cluster';
 import type {NodesFilters} from '../../store/reducers/nodes/types';
@@ -94,6 +97,9 @@ export function NodesTable({
             columnsWidthLSKey={NODES_COLUMNS_WIDTH_LS_KEY}
             scrollContainerRef={scrollContainerRef}
             columns={columns}
+            rowHeight={
+                columns.some((column) => column.name === NODES_COLUMNS_IDS.PDisks) ? 51 : undefined
+            }
             fetchData={getNodes}
             initialEntitiesCount={initialEntitiesCount}
             renderErrorMessage={renderPaginatedTableErrorMessage}

package/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx

@@ -112,7 +112,6 @@ export function GroupedStorageGroupsComponent({
             groupId,
             pDiskId,
             filter: groupsSearchValue.trim(),
-            shouldUseGroupsHandler: true,
             group: storageGroupsGroupByParam,
         },
         {

package/src/containers/Storage/PaginatedStorageGroupsTable/PaginatedStorageGroupsTable.tsx

@@ -3,10 +3,7 @@ import React from 'react';
 import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
 import type {RenderErrorMessage} from '../../../components/PaginatedTable';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
-import {
-    useCapabilitiesLoaded,
-    useStorageGroupsHandlerAvailable,
-} from '../../../store/reducers/capabilities/hooks';
+import {useCapabilitiesLoaded} from '../../../store/reducers/capabilities/hooks';
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {VisibleEntities} from '../../../store/reducers/storage/types';
 import type {GroupsGroupByField} from '../../../types/api/storage';
@@ -65,9 +62,8 @@ export const PaginatedStorageGroupsTable = ({
     initialEntitiesCount,
 }: PaginatedStorageGroupsTableProps) => {
     const capabilitiesLoaded = useCapabilitiesLoaded();
-    const groupsHandlerAvailable = useStorageGroupsHandlerAvailable();
 
-    const fetchData = useGroupsGetter(groupsHandlerAvailable);
+    const fetchData = useGroupsGetter();
 
     const hasVDisksColumns = React.useMemo(() => {
         return columns.some((column) => columnsWithVDisks.has(column.name));

package/src/containers/Storage/PaginatedStorageGroupsTable/columns/constants.ts

@@ -8,7 +8,7 @@ import {
 import type {
     GroupsGroupByField,
     GroupsRequiredField,
-    StorageV2SortValue,
+    GroupsSortField,
 } from '../../../../types/api/storage';
 import type {ValueOf} from '../../../../types/common';
 
@@ -295,7 +295,7 @@ export const GROUPS_COLUMNS_TO_DATA_FIELDS: Record<StorageGroupsColumnId, Groups
 
 const STORAGE_GROUPS_COLUMNS_TO_SORT_FIELDS: Record<
     StorageGroupsColumnId,
-    StorageV2SortValue | undefined
+    GroupsSortField | undefined
 > = {
     GroupId: 'GroupId',
     PoolName: 'PoolName',

package/src/containers/Storage/PaginatedStorageGroupsTable/getGroups.ts

@@ -13,53 +13,46 @@ import {GROUPS_COLUMNS_TO_DATA_FIELDS, getStorageGroupsColumnSortField} from './
 
 type GetStorageGroups = FetchData<PreparedStorageGroup, PreparedStorageGroupFilters>;
 
-export function useGroupsGetter(shouldUseGroupsHandler: boolean) {
-    const fetchData: GetStorageGroups = React.useCallback(
-        async (params) => {
-            const {limit, offset, sortParams, filters, columnsIds} = params;
-            const {sortOrder, columnId} = sortParams ?? {};
-            const {
-                searchValue,
-                visibleEntities,
-                database,
-                nodeId,
-                groupId,
-                pDiskId,
-                filterGroup,
-                filterGroupBy,
-            } = filters ?? {};
-
-            const sortField = getStorageGroupsColumnSortField(columnId);
-            const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
-            const dataFieldsRequired = getRequiredDataFields(
-                columnsIds,
-                GROUPS_COLUMNS_TO_DATA_FIELDS,
-            );
-
-            const {groups, found, total} = await requestStorageData({
-                limit,
-                offset,
-                sort,
-                filter: searchValue?.trim(),
-                with: visibleEntities,
-                database,
-                nodeId,
-                groupId,
-                pDiskId,
-                filter_group: filterGroup,
-                filter_group_by: filterGroupBy,
-                fieldsRequired: dataFieldsRequired,
-                shouldUseGroupsHandler,
-            });
-
-            return {
-                data: groups || [],
-                found: found || 0,
-                total: total || 0,
-            };
-        },
-        [shouldUseGroupsHandler],
-    );
+export function useGroupsGetter() {
+    const fetchData: GetStorageGroups = React.useCallback(async (params) => {
+        const {limit, offset, sortParams, filters, columnsIds} = params;
+        const {sortOrder, columnId} = sortParams ?? {};
+        const {
+            searchValue,
+            visibleEntities,
+            database,
+            nodeId,
+            groupId,
+            pDiskId,
+            filterGroup,
+            filterGroupBy,
+        } = filters ?? {};
+
+        const sortField = getStorageGroupsColumnSortField(columnId);
+        const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
+        const dataFieldsRequired = getRequiredDataFields(columnsIds, GROUPS_COLUMNS_TO_DATA_FIELDS);
+
+        const {groups, found, total} = await requestStorageData({
+            limit,
+            offset,
+            sort,
+            filter: searchValue?.trim(),
+            with: visibleEntities,
+            database,
+            nodeId,
+            groupId,
+            pDiskId,
+            filter_group: filterGroup,
+            filter_group_by: filterGroupBy,
+            fieldsRequired: dataFieldsRequired,
+        });
+
+        return {
+            data: groups || [],
+            found: found || 0,
+            total: total || 0,
+        };
+    }, []);
 
     return fetchData;
 }

package/src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -9,10 +9,7 @@ import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
 import {StorageGroupInfo} from '../../components/StorageGroupInfo/StorageGroupInfo';
-import {
-    useCapabilitiesLoaded,
-    useStorageGroupsHandlerAvailable,
-} from '../../store/reducers/capabilities/hooks';
+import {useCapabilitiesLoaded} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {storageApi} from '../../store/reducers/storage/storage';
 import {EFlag} from '../../types/api/enums';
@@ -41,11 +38,10 @@ export function StorageGroupPage() {
     }, [dispatch, groupId, database]);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const shouldUseGroupsHandler = useStorageGroupsHandlerAvailable();
     const capabilitiesLoaded = useCapabilitiesLoaded();
     const groupQuery = storageApi.useGetStorageGroupsInfoQuery(
         valueIsDefined(groupId)
-            ? {groupId, shouldUseGroupsHandler, with: 'all', fieldsRequired: 'all', database}
+            ? {groupId, with: 'all', fieldsRequired: 'all', database}
             : skipToken,
         {
             pollingInterval: autoRefreshInterval,

package/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 
 import {ResizeableDataTable} from '../../../../../components/ResizeableDataTable/ResizeableDataTable';
-import {
-    useCapabilitiesLoaded,
-    useStorageGroupsHandlerAvailable,
-} from '../../../../../store/reducers/capabilities/hooks';
+import {useCapabilitiesLoaded} from '../../../../../store/reducers/capabilities/hooks';
 import {storageApi} from '../../../../../store/reducers/storage/storage';
 import type {GroupsRequiredField} from '../../../../../types/api/storage';
 import {
@@ -45,7 +42,6 @@ interface TopGroupsProps {
 
 export function TopGroups({tenant, capacityMetricsEnabled}: TopGroupsProps) {
     const capabilitiesLoaded = useCapabilitiesLoaded();
-    const groupsHandlerAvailable = useStorageGroupsHandlerAvailable();
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const {columns, fieldsRequired, sort} = React.useMemo(
@@ -59,7 +55,6 @@ export function TopGroups({tenant, capacityMetricsEnabled}: TopGroupsProps) {
             sort,
             with: 'all',
             limit: TENANT_OVERVIEW_TABLES_LIMIT,
-            shouldUseGroupsHandler: groupsHandlerAvailable,
             fieldsRequired,
         },
         {

package/src/containers/Tenant/Diagnostics/useDiagnosticsPages.ts

@@ -3,7 +3,6 @@ import React from 'react';
 import {
     useConfigAvailable,
     useNewStorageViewEnabled,
-    useStorageGroupsHandlerAvailable,
     useStorageStatsAvailable,
     useTopicDataAvailable,
 } from '../../../store/reducers/capabilities/hooks';
@@ -42,10 +41,8 @@ export function useDiagnosticsPages({
 
     const hasConfigs = useConfigAvailable();
     const newStorageViewEnabled = useNewStorageViewEnabled();
-    const storageGroupsAvailable = useStorageGroupsHandlerAvailable();
     const storageStatsAvailable = useStorageStatsAvailable();
-    const hasStorageUsageCapabilities = storageGroupsAvailable && storageStatsAvailable;
-    const hasStorageUsage = newStorageViewEnabled && hasStorageUsageCapabilities;
+    const hasStorageUsage = newStorageViewEnabled && storageStatsAvailable;
     const hasTopicData = useTopicDataAvailable();
     const isViewerUser = useIsViewerUser();
     const userPermissions = useUserPermissions();

package/src/routes.ts

@@ -169,7 +169,7 @@ export function getStorageGroupPath(groupId: string | number, query: Query = {})
 }
 
 export function getDefaultNodePath(
-    params: {id: string | number; activeTab?: NodeTab},
+    params: {id: string | number; activeTab?: NodeTab; environment?: string},
     query: NodePageQuery = {},
     options?: CreateHrefOptions,
 ) {

package/src/services/api/viewer.ts

@@ -28,12 +28,7 @@ import type {
 import type {JsonRenderRequestParams, JsonRenderResponse} from '../../types/api/render';
 import type {DescribeReplicationResult} from '../../types/api/replication';
 import type {TEvDescribeSchemeResult} from '../../types/api/schema';
-import type {
-    StorageRequestParams,
-    StorageStatsRequestParams,
-    StorageStatsResponse,
-    TStorageInfo,
-} from '../../types/api/storage';
+import type {StorageStatsRequestParams, StorageStatsResponse} from '../../types/api/storage';
 import type {TEvSystemStateResponse} from '../../types/api/systemState';
 import type {
     TDomainKey,
@@ -524,25 +519,6 @@ export class ViewerAPI extends BaseYdbAPI {
         );
     }
 
-    getStorageInfo(
-        {database, nodeId, groupId, pDiskId, filter, ...params}: StorageRequestParams,
-        {concurrentId, signal}: AxiosOptions = {},
-    ) {
-        return this.get<TStorageInfo>(
-            this.getPath(`/viewer/json/storage?enums=true`),
-            {
-                database,
-                node_id: nodeId,
-                group_id: groupId,
-                pdisk_id: pDiskId,
-                // Do not send empty string
-                filter: filter || undefined,
-                ...params,
-            },
-            {concurrentId, requestConfig: {signal}},
-        );
-    }
-
     getStorageStats(
         {
             database,

package/src/store/reducers/api.ts

@@ -1,6 +1,8 @@
 import type {BaseQueryFn} from '@reduxjs/toolkit/query';
 import {createApi} from '@reduxjs/toolkit/query/react';
 
+import {CLUSTER_DATA_TAG, DATABASE_DATA_TAG} from './entityDataTags';
+
 export const api = createApi({
     baseQuery: fakeBaseQuery(),
     /**
@@ -27,6 +29,8 @@ export const api = createApi({
         'Backups',
         'BackupsSchedule',
         'OperationList',
+        DATABASE_DATA_TAG,
+        CLUSTER_DATA_TAG,
     ],
 });
 

package/src/store/reducers/capabilities/hooks.ts

@@ -81,10 +81,6 @@ export const useTracingLevelOptionAvailable = () => {
     return useGetFeatureVersion('/viewer/query') > 2;
 };
 
-export const useStorageGroupsHandlerAvailable = () => {
-    return useGetFeatureVersion('/storage/groups') > 2;
-};
-
 export const useStorageStatsAvailable = () => {
     return useGetFeatureVersion('/viewer/storage_stats') > 0;
 };

package/src/store/reducers/cluster/cluster.ts

@@ -13,6 +13,7 @@ import {useIsViewerUser} from '../../../utils/hooks/useIsUserAllowedToMakeChange
 import {isQueryErrorResponse} from '../../../utils/query';
 import type {RootState} from '../../defaultStore';
 import {api} from '../api';
+import {getClusterDataTag} from '../entityDataTags';
 import {selectNodesMap} from '../nodesList';
 
 import {
@@ -117,7 +118,7 @@ export const clusterApi = api.injectEndpoints({
                     return {error};
                 }
             },
-            providesTags: ['All'],
+            providesTags: (_result, _error, clusterName) => ['All', getClusterDataTag(clusterName)],
         }),
         getClusterBaseInfo: builder.query({
             queryFn: async (clusterName: string, {signal}) => {
@@ -131,7 +132,7 @@ export const clusterApi = api.injectEndpoints({
                     return {error};
                 }
             },
-            providesTags: ['All'],
+            providesTags: (_result, _error, clusterName) => ['All', getClusterDataTag(clusterName)],
         }),
     }),
     overrideExisting: 'throw',

package/src/store/reducers/clusters/clusters.ts

@@ -2,6 +2,7 @@ import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
 
 import {api} from '../api';
+import {CLUSTER_DATA_LIST_TAG} from '../entityDataTags';
 
 import type {ClustersFilters} from './types';
 import {prepareClustersData} from './utils';
@@ -43,7 +44,7 @@ export const clustersApi = api.injectEndpoints({
                     return {error};
                 }
             },
-            providesTags: ['All'],
+            providesTags: ['All', CLUSTER_DATA_LIST_TAG],
         }),
     }),
     overrideExisting: 'throw',

package/src/store/reducers/entityDataTags.ts

@@ -0,0 +1,34 @@
+export const DATABASE_DATA_TAG = 'DatabaseData';
+export const CLUSTER_DATA_TAG = 'ClusterData';
+
+const ENTITY_DATA_LIST_TAG_ID = 'LIST';
+
+export const DATABASE_DATA_LIST_TAG = {
+    type: DATABASE_DATA_TAG,
+    id: ENTITY_DATA_LIST_TAG_ID,
+} as const;
+
+export const CLUSTER_DATA_LIST_TAG = {
+    type: CLUSTER_DATA_TAG,
+    id: ENTITY_DATA_LIST_TAG_ID,
+} as const;
+
+export function getDatabaseDataTag({
+    clusterName,
+    database,
+}: {
+    clusterName?: string;
+    database: string;
+}) {
+    return {
+        type: DATABASE_DATA_TAG,
+        id: JSON.stringify([clusterName ?? null, database]),
+    } as const;
+}
+
+export function getClusterDataTag(clusterName?: string) {
+    return {
+        type: CLUSTER_DATA_TAG,
+        id: JSON.stringify(clusterName ?? null),
+    } as const;
+}

package/src/store/reducers/node/node.ts

@@ -15,17 +15,6 @@ export const nodeApi = api.injectEndpoints({
             },
             providesTags: ['All'],
         }),
-        getNodeStructure: build.query({
-            queryFn: async ({nodeId}: {nodeId: string}, {signal}) => {
-                try {
-                    const data = await window.api.viewer.getStorageInfo({nodeId}, {signal});
-                    return {data};
-                } catch (error) {
-                    return {error};
-                }
-            },
-            providesTags: ['All'],
-        }),
     }),
     overrideExisting: 'throw',
 });

package/src/store/reducers/node/types.ts

@@ -1,21 +1,3 @@
-import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types';
 import type {PreparedNodeSystemState} from '../../../utils/nodes';
 
-interface RawStructurePDisk extends PreparedPDisk {
-    vDisks: Record<string, PreparedVDisk>;
-}
-
-export type RawNodeStructure = Record<string, RawStructurePDisk>;
-
-export interface PreparedStructureVDisk extends PreparedVDisk {
-    id: string;
-    order: number;
-}
-
-export interface PreparedStructurePDisk extends PreparedPDisk {
-    vDisks: PreparedStructureVDisk[];
-}
-
-export type PreparedNodeStructure = Record<string, PreparedStructurePDisk>;
-
 export interface PreparedNode extends Partial<PreparedNodeSystemState> {}

package/src/store/reducers/storage/requestStorageData.ts

@@ -1,21 +1,9 @@
 import type {AxiosOptions} from '../../../services/api/base';
-import type {GroupsRequestParams, StorageRequestParams} from '../../../types/api/storage';
+import type {GroupsRequestParams} from '../../../types/api/storage';
 
-import {prepareGroupsResponse, prepareStorageResponse} from './utils';
+import {prepareGroupsResponse} from './utils';
 
-export async function requestStorageData(
-    {
-        version = 'v2',
-        shouldUseGroupsHandler,
-        ...params
-    }: StorageRequestParams & GroupsRequestParams & {shouldUseGroupsHandler?: boolean},
-    options?: AxiosOptions,
-) {
-    if (shouldUseGroupsHandler && version !== 'v1') {
-        const result = await window.api.storage.getStorageGroups({...params}, options);
-        return prepareGroupsResponse(result);
-    } else {
-        const result = await window.api.viewer.getStorageInfo({version, ...params}, options);
-        return prepareStorageResponse(result);
-    }
+export async function requestStorageData(params: GroupsRequestParams, options?: AxiosOptions) {
+    const result = await window.api.storage.getStorageGroups(params, options);
+    return prepareGroupsResponse(result);
 }

package/src/store/reducers/storage/storage.ts

@@ -1,5 +1,5 @@
 import type {NodesRequestParams} from '../../../types/api/nodes';
-import type {GroupsRequestParams, StorageRequestParams} from '../../../types/api/storage';
+import type {GroupsRequestParams} from '../../../types/api/storage';
 import {api} from '../api';
 
 import {requestStorageData} from './requestStorageData';
@@ -22,11 +22,7 @@ export const storageApi = api.injectEndpoints({
             providesTags: ['All', 'StorageData'],
         }),
         getStorageGroupsInfo: builder.query({
-            queryFn: async (
-                params: StorageRequestParams &
-                    GroupsRequestParams & {shouldUseGroupsHandler?: boolean},
-                {signal},
-            ) => {
+            queryFn: async (params: GroupsRequestParams, {signal}) => {
                 try {
                     const result = await requestStorageData(params, {signal});
                     return {data: result};

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

@@ -83,16 +83,7 @@ export interface PreparedStorageGroup {
     VDisks?: PreparedVDisk[];
 
     Kind?: string;
-    ChangeTime?: number | string;
     GroupGeneration?: string;
-    Latency?: EFlag;
-    AcquiredUnits?: string;
-    AcquiredIOPS?: number;
-    AcquiredThroughput?: string;
-    AcquiredSize?: string;
-    MaximumIOPS?: number;
-    MaximumThroughput?: string;
-    MaximumSize?: string;
 
     AllocationUnits?: string | number;
     GroupSizeInUnits?: number;