ydb-embedded-ui 21.1.0 → 22.0.0

package/src/components/StorageGroupInfo/StorageGroupInfo.tsx

@@ -43,7 +43,6 @@ export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageG
         Read,
         Write,
         GroupGeneration,
-        Latency,
         AllocationUnits,
         State,
         MissingDisks,
@@ -140,12 +139,6 @@ export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageG
             });
         }
         runtimeInfo.push(...toInfoViewerItems(getStorageGroupCapacityInfoItems(data)));
-        if (valueIsDefined(Latency)) {
-            runtimeInfo.push({
-                label: storageGroupInfoKeyset('latency'),
-                value: <StatusIcon status={Latency} />,
-            });
-        }
         if (valueIsDefined(LatencyPutTabletLogMs)) {
             runtimeInfo.push({
                 label: storageGroupInfoKeyset('latency-put-tablet-log'),
@@ -258,12 +251,6 @@ export function StorageGroupInfo({data, className, ...infoViewerProps}: StorageG
             value: <StatusIcon status={DiskSpace} />,
         });
     }
-    if (valueIsDefined(Latency)) {
-        storageGroupInfoSecondColumn.push({
-            label: storageGroupInfoKeyset('latency'),
-            value: <StatusIcon status={Latency} />,
-        });
-    }
     if (valueIsDefined(LatencyPutTabletLogMs)) {
         storageGroupInfoSecondColumn.push({
             label: storageGroupInfoKeyset('latency-put-tablet-log'),

package/src/components/StorageGroupInfo/i18n/en.json

@@ -12,7 +12,6 @@
   "yes": "Yes",
   "no": "No",
   "group-generation": "Group Generation",
-  "latency": "Latency",
   "allocation-units": "Allocation Units",
   "context_allocation-units": "The number of channels used by tablets to write data to the storage group.",
   "state": "State",

package/src/containers/App/App.tsx

@@ -4,9 +4,9 @@ import type {Store} from '@reduxjs/toolkit';
 import type {History} from 'history';
 import {Helmet} from 'react-helmet-async';
 
-import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import {FullscreenProvider} from '../../components/Fullscreen/FullscreenContext';
-import {useTypedSelector} from '../../utils/hooks';
+import {uiFactory} from '../../uiFactory/uiFactory';
+import {useTypedSelector} from '../../utils/hooks/useTypedSelector';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
 
 import {useAppTitle} from './AppTitleContext';
@@ -27,7 +27,7 @@ export interface AppProps {
 }
 
 function App({store, history, children, userSettings, appTitle = defaultAppTitle}: AppProps) {
-    const ChatPanel = componentsRegistry.get('ChatPanel');
+    const ChatPanel = uiFactory.renderChatPanel;
 
     return (
         <Providers store={store} history={history} appTitle={appTitle}>

package/src/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -53,6 +53,14 @@
 
     &__storage-section {
         --g-card-border-radius: var(--g-border-radius-s);
+
+        width: 100%;
+
+        @container overview-wrapper (min-width: 804px) {
+            width: var(--cluster-overview-section);
+            min-width: var(--cluster-overview-section);
+        }
+
         @container overview-wrapper (min-width: 1104px) {
             grid-area: storage;
         }

package/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -15,6 +15,7 @@ import {BridgeInfoTable} from '../ClusterOverview/components/BridgeInfoTable';
 import i18n from '../i18n';
 
 import {StorageGroupStats} from './components/DiskGroupsStatsBars/DiskGroupsStats';
+import {prepareClusterGroupsStats} from './components/DiskGroupsStatsBars/utils';
 import {b} from './shared';
 
 import './ClusterInfo.scss';
@@ -35,12 +36,16 @@ export const ClusterInfo = ({
     loading,
     error,
     additionalClusterProps = {},
-    groupStats = {},
+    groupStats,
     bridgePiles,
 }: ClusterInfoProps) => {
     const {info = [], links = []} = additionalClusterProps;
 
     const clusterLinks = useClusterLinks(links);
+    const preparedGroupStats = React.useMemo(
+        () => prepareClusterGroupsStats(groupStats ?? {}),
+        [groupStats],
+    );
 
     const noDetails = (error && !cluster) || (!info.length && !clusterLinks.length);
 
@@ -106,17 +111,12 @@ export const ClusterInfo = ({
     };
 
     const renderStorageGroupsSection = () => {
-        if (loading || Object.keys(groupStats).length === 0) {
+        if (loading || preparedGroupStats.disks.length === 0) {
             return null;
         }
         return (
-            <InfoSection className={b('storage-section')}>
-                <Text as="div" variant="subheader-2" className={b('section-title')}>
-                    {i18n('title_storage-groups')}
-                </Text>
-                <Card view="filled" className={b('section', {compact: true})}>
-                    <StorageGroupStats groupStats={groupStats} />
-                </Card>
+            <InfoSection className={b('storage-section')} dataQa="cluster-storage-groups">
+                <StorageGroupStats stats={preparedGroupStats} />
             </InfoSection>
         );
     };
@@ -157,11 +157,12 @@ export const ClusterInfo = ({
 interface InfoSectionProps {
     children: React.ReactNode;
     className?: string;
+    dataQa?: string;
 }
 
-function InfoSection({children, className}: InfoSectionProps) {
+function InfoSection({children, className, dataQa}: InfoSectionProps) {
     return (
-        <Flex direction="column" gap={2} className={className}>
+        <Flex direction="column" gap={2} className={className} qa={dataQa}>
             {children}
         </Flex>
     );

package/src/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStats.scss

@@ -0,0 +1,18 @@
+.ydb-disk-groups-stats {
+    &__card {
+        padding: var(--g-spacing-3) var(--g-spacing-4);
+    }
+
+    &__available-help {
+        color: inherit;
+    }
+
+    &__legend-dot {
+        flex: 0 0 8px;
+
+        width: 8px;
+        height: 8px;
+
+        border-radius: 50%;
+    }
+}

package/src/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStats.tsx

@@ -1,81 +1,166 @@
 import React from 'react';
 
-import {Flex, Label, Text} from '@gravity-ui/uikit';
+import {Card, Flex, HelpMark, Label, Text} from '@gravity-ui/uikit';
 
-import {SegmentedProgress} from '../../../../../components/SegmentedProgress/SegmentedProgress';
-import type {
-    ClusterGroupsStats,
-    DiskErasureGroupsStats,
-} from '../../../../../store/reducers/cluster/types';
+import {
+    SegmentedProgress,
+    defaultNormalizePercent,
+} from '../../../../../components/SegmentedProgress/SegmentedProgress';
+import {cn} from '../../../../../utils/cn';
 import {formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
 import i18n from '../../../i18n';
 
-interface GroupsStatsPopupContentProps {
-    stats: DiskErasureGroupsStats;
-    storageType: string;
+import type {
+    PreparedClusterGroupsStats,
+    PreparedDiskGroupsStats,
+    PreparedErasureGroupsStats,
+} from './utils';
+
+import './DiskGroupsStats.scss';
+
+const b = cn('ydb-disk-groups-stats');
+
+const ERASURE_COLORS: Record<string, string> = {
+    'block-4-2': 'var(--g-color-base-info-heavy)',
+    'mirror-3-dc': 'var(--g-color-base-utility-heavy)',
+    'mirror-3of4': 'var(--g-color-base-utility-heavy)',
+    none: 'var(--g-color-base-neutral-heavy)',
+};
+
+function getErasureColor(erasure: string) {
+    return ERASURE_COLORS[erasure] ?? 'var(--g-color-base-neutral-heavy)';
 }
 
-function DiskGroupStats({stats, storageType}: GroupsStatsPopupContentProps) {
-    const {erasure} = stats;
+function formatGroups(count: number) {
+    return i18n('value_groups', {
+        count,
+        formattedCount: formatNumber(count),
+    });
+}
 
-    const availableGroups = stats.totalGroups - stats.createdGroups;
+function formatAvailableGroups({min, max}: PreparedDiskGroupsStats['availableGroups']) {
+    if (min === max) {
+        return formatGroups(min);
+    }
 
-    const availableGroupsString =
-        availableGroups === 1
-            ? i18n('title_available-one')
-            : i18n('title_available-other', {
-                  count: formatNumber(availableGroups),
-              });
+    return i18n('value_available-groups-range', {
+        min: formatNumber(min),
+        max: formatNumber(max),
+    });
+}
+
+function getErasureTooltip(stats: PreparedErasureGroupsStats) {
+    return i18n('context_available-groups-by-erasure', {
+        count: stats.availableGroups,
+        formattedCount: formatNumber(stats.availableGroups),
+        erasure: stats.erasure,
+    });
+}
+
+function DiskGroupStats({stats}: {stats: PreparedDiskGroupsStats}) {
+    const legendId = React.useId();
+    const {allocatedGroups, availableGroups, diskType, erasures, progressTotalGroups} = stats;
+    const progressValue = progressTotalGroups > 0 ? allocatedGroups / progressTotalGroups : 0;
+    const progressPercent = progressValue * 100;
+    const progressLabel = i18n('context_storage-group-allocation-progress', {
+        diskType,
+        percent: defaultNormalizePercent(progressPercent),
+    });
+    const availableGroupsContext = i18n('context_available-groups');
+
+    const segments = erasures.map((erasureStats, index) => ({
+        id: erasureStats.erasure,
+        value: erasureStats.createdGroups,
+        minWidth: 10,
+        color: getErasureColor(erasureStats.erasure),
+        className: b('progress-segment'),
+        dataQa: 'cluster-storage-group-segment',
+        tooltip: getErasureTooltip(erasureStats),
+        ariaLabelledBy: `${legendId}-${index}`,
+    }));
 
     return (
-        <Flex direction="column" gap={2}>
-            <Flex justifyContent="space-between" alignItems="center">
-                <Text variant="subheader-1">{storageType}</Text>
-                <Flex gap={4} wrap="nowrap" alignItems="center">
-                    <Label theme="info">{availableGroupsString}</Label>
-                    <Text color="secondary">
-                        {i18n('title_allocated', {
-                            used: formatNumber(stats.createdGroups),
-                            total: formatNumber(stats.totalGroups),
-                        })}
-                    </Text>
+        <Card view="filled" className={b('card')} qa="cluster-storage-group-card">
+            <Flex direction="column" gap={1}>
+                <Flex direction="column" gap={2}>
+                    <Flex justifyContent="space-between" alignItems="center" gap={2}>
+                        <Text variant="subheader-1">{diskType}</Text>
+                        <Label
+                            theme="info"
+                            value={
+                                <Flex alignItems="center" gap={1}>
+                                    {formatAvailableGroups(availableGroups)}
+                                    <HelpMark
+                                        iconSize="s"
+                                        aria-label={i18n('action_show-available-groups-info', {
+                                            diskType,
+                                        })}
+                                        className={b('available-help')}
+                                        popoverProps={{placement: ['top', 'bottom']}}
+                                    >
+                                        {availableGroupsContext}
+                                    </HelpMark>
+                                </Flex>
+                            }
+                        >
+                            {i18n('title_available')}
+                        </Label>
+                    </Flex>
+                    <div role="group" aria-label={progressLabel}>
+                        <SegmentedProgress
+                            segments={segments}
+                            total={progressTotalGroups}
+                            ariaLabel={progressLabel}
+                            hideLabels
+                        />
+                    </div>
+                </Flex>
+                <Flex justifyContent="space-between" alignItems="center" gap={2} wrap="wrap">
+                    <Flex alignItems="center" gap={4} wrap="wrap">
+                        {erasures.map((erasureStats, index) => (
+                            <Flex
+                                key={erasureStats.erasure}
+                                id={`${legendId}-${index}`}
+                                alignItems="center"
+                                gap={2}
+                            >
+                                <span
+                                    aria-hidden="true"
+                                    className={b('legend-dot')}
+                                    style={{backgroundColor: getErasureColor(erasureStats.erasure)}}
+                                />
+                                <Text>{erasureStats.erasure}</Text>
+                                <Text color="secondary">
+                                    {formatGroups(erasureStats.createdGroups)}
+                                </Text>
+                            </Flex>
+                        ))}
+                    </Flex>
+                    <Text color="secondary">{formatGroups(allocatedGroups)}</Text>
                 </Flex>
             </Flex>
-            <SegmentedProgress
-                value={stats.createdGroups}
-                total={stats.totalGroups}
-                labelStart={erasure}
-                ariaLabel={i18n('context_storage-group-allocation-progress')}
-            />
-        </Flex>
+        </Card>
     );
 }
 
 interface StorageGroupStatsProps {
-    groupStats: ClusterGroupsStats;
+    stats: PreparedClusterGroupsStats;
 }
 
-export function StorageGroupStats({groupStats}: StorageGroupStatsProps) {
-    const stats = React.useMemo(() => {
-        const result: React.ReactNode[] = [];
-
-        Object.entries(groupStats).forEach(([storageType, stats]) => {
-            Object.values(stats).forEach((erasureStats) => {
-                result.push(
-                    <DiskGroupStats
-                        key={`${storageType}|${erasureStats.erasure}`}
-                        stats={erasureStats}
-                        storageType={storageType}
-                    />,
-                );
-            });
-        });
-        return result;
-    }, [groupStats]);
-
+export function StorageGroupStats({stats}: StorageGroupStatsProps) {
     return (
-        <Flex direction="column" gap={5}>
-            {stats}
-        </Flex>
+        <React.Fragment>
+            <Text as="div" variant="subheader-2">
+                {i18n('title_storage-groups')}{' '}
+                <Text color="secondary" variant="subheader-2">
+                    {formatNumber(stats.allocatedGroups)}
+                </Text>
+            </Text>
+            <Flex direction="column" gap={1}>
+                {stats.disks.map((diskStats) => (
+                    <DiskGroupStats key={diskStats.diskType} stats={diskStats} />
+                ))}
+            </Flex>
+        </React.Fragment>
     );
 }

package/src/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/utils.ts

@@ -0,0 +1,89 @@
+import type {ClusterGroupsStats} from '../../../../../store/reducers/cluster/types';
+
+const DISK_TYPE_ORDER = ['HDD', 'SSD'];
+const ERASURE_ORDER = ['block-4-2', 'mirror-3-dc', 'mirror-3of4', 'none'];
+
+export interface PreparedErasureGroupsStats {
+    erasure: string;
+    createdGroups: number;
+    availableGroups: number;
+}
+
+export interface PreparedDiskGroupsStats {
+    diskType: string;
+    erasures: PreparedErasureGroupsStats[];
+    allocatedGroups: number;
+    availableGroups: {
+        min: number;
+        max: number;
+        average: number;
+    };
+    progressTotalGroups: number;
+}
+
+export interface PreparedClusterGroupsStats {
+    disks: PreparedDiskGroupsStats[];
+    allocatedGroups: number;
+}
+
+function getErasureOrder(erasure: string) {
+    const index = ERASURE_ORDER.indexOf(erasure);
+
+    return index === -1 ? ERASURE_ORDER.length : index;
+}
+
+function getDiskTypeOrder(diskType: string) {
+    const index = DISK_TYPE_ORDER.indexOf(diskType);
+
+    return index === -1 ? DISK_TYPE_ORDER.length : index;
+}
+
+export function prepareClusterGroupsStats(
+    groupStats: ClusterGroupsStats,
+): PreparedClusterGroupsStats {
+    let allocatedGroups = 0;
+
+    const disks = Object.entries(groupStats)
+        .flatMap(([diskType, diskStats]) => {
+            const erasures = Object.values(diskStats)
+                .filter(({createdGroups}) => createdGroups > 0)
+                .map((stats) => ({
+                    erasure: stats.erasure,
+                    createdGroups: stats.createdGroups,
+                    availableGroups: stats.totalGroups - stats.createdGroups,
+                }))
+                .sort((a, b) => getErasureOrder(a.erasure) - getErasureOrder(b.erasure));
+
+            if (erasures.length === 0) {
+                return [];
+            }
+
+            const diskAllocatedGroups = erasures.reduce(
+                (sum, stats) => sum + stats.createdGroups,
+                0,
+            );
+            const availableValues = erasures.map((stats) => stats.availableGroups);
+            const minAvailableGroups = Math.min(...availableValues);
+            const maxAvailableGroups = Math.max(...availableValues);
+            const averageAvailableGroups = (minAvailableGroups + maxAvailableGroups) / 2;
+
+            allocatedGroups += diskAllocatedGroups;
+
+            return [
+                {
+                    diskType,
+                    erasures,
+                    allocatedGroups: diskAllocatedGroups,
+                    availableGroups: {
+                        min: minAvailableGroups,
+                        max: maxAvailableGroups,
+                        average: averageAvailableGroups,
+                    },
+                    progressTotalGroups: diskAllocatedGroups + averageAvailableGroups,
+                },
+            ];
+        })
+        .sort((a, b) => getDiskTypeOrder(a.diskType) - getDiskTypeOrder(b.diskType));
+
+    return {disks, allocatedGroups};
+}

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

@@ -1,8 +1,17 @@
 {
-  "title_allocated": "Allocated : {{used}} of {{total}} groups",
-  "title_available-one": "Available : 1 group",
-  "title_available-other": "Available : {{count}} groups",
-  "context_storage-group-allocation-progress": "Storage group allocation progress",
+  "title_available": "Available",
+  "value_groups": {
+    "one": "{{formattedCount}} group",
+    "other": "{{formattedCount}} groups"
+  },
+  "value_available-groups-range": "{{min}}–{{max}} groups",
+  "context_available-groups": "Estimated number of free groups available for allocation.",
+  "action_show-available-groups-info": "About available {{diskType}} storage groups",
+  "context_available-groups-by-erasure": {
+    "one": "{{formattedCount}} group available if only {{erasure}} is used",
+    "other": "{{formattedCount}} groups available if only {{erasure}} is used"
+  },
+  "context_storage-group-allocation-progress": "{{diskType}} storage group allocation: {{percent}}%",
   "title_cpu": "CPU",
   "title_storage-groups": "Allocated Storage Groups",
   "title_memory": "Memory",

package/src/containers/Node/Node.tsx

@@ -16,7 +16,6 @@ import routes, {getDefaultNodePath} from '../../routes';
 import {
     useCapabilitiesLoaded,
     useConfigAvailable,
-    useDiskPagesAvailable,
     useViewerPeersHandlerAvailable,
 } from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
@@ -34,7 +33,6 @@ import {Tablets} from '../Tablets/Tablets';
 
 import type {NodeTab} from './NodePages';
 import {NODE_TABS, nodePageQueryParams, nodePageTabSchema} from './NodePages';
-import NodeStructure from './NodeStructure/NodeStructure';
 import {Threads} from './Threads/Threads';
 import i18n from './i18n';
 
@@ -52,12 +50,14 @@ export function Node() {
     const dispatch = useTypedDispatch();
     const history = useHistory();
 
-    const match = useRouteMatch<{id: string; activeTab: string}>(routes.node);
+    const match = useRouteMatch<{id: string; activeTab: string; environment?: string}>(routes.node);
 
     const nodeId = match?.params.id;
     const activeTabIdFromQuery = match?.params.activeTab;
+    const environment = match?.params.environment;
 
-    const [{database: tenantNameFromQuery}] = useQueryParams(nodePageQueryParams);
+    const [{database: tenantNameFromQuery, clusterName, backend}] =
+        useQueryParams(nodePageQueryParams);
     const database = tenantNameFromQuery?.toString();
 
     const activeTabId = nodePageTabSchema.parse(activeTabIdFromQuery);
@@ -72,7 +72,6 @@ export function Node() {
     } = nodeApi.useGetNodeInfoQuery(params, {pollingInterval: autoRefreshInterval});
 
     const capabilitiesLoaded = useCapabilitiesLoaded();
-    const isDiskPagesAvailable = useDiskPagesAvailable();
     const isPeersHandlerAvailable = useViewerPeersHandlerAvailable();
 
     const pageLoading = isLoading || !capabilitiesLoaded;
@@ -89,9 +88,6 @@ export function Node() {
         if (!configsAvailable) {
             skippedTabs.push('configs');
         }
-        if (isDiskPagesAvailable) {
-            skippedTabs.push('structure');
-        }
         if ((!database && !isViewerUser) || !hasThreads) {
             skippedTabs.push('threads');
         }
@@ -111,7 +107,6 @@ export function Node() {
         return {activeTab: actualActiveTab, nodeTabs: actualNodeTabs};
     }, [
         isStorageNode,
-        isDiskPagesAvailable,
         isPeersHandlerAvailable,
         activeTabId,
         hasThreads,
@@ -142,12 +137,26 @@ export function Node() {
             return;
         }
 
-        if (activeTab.id !== activeTabId) {
-            const path = getDefaultNodePath({id: nodeId, activeTab: activeTab.id}, {database});
+        if (activeTab.id !== activeTabId || activeTabIdFromQuery === 'structure') {
+            const path = getDefaultNodePath(
+                {id: nodeId, activeTab: activeTab.id, environment},
+                {database, clusterName: clusterName ?? undefined, backend: backend ?? undefined},
+            );
 
             history.replace(path);
         }
-    }, [nodeId, database, activeTab.id, activeTabId, history, activeTab]);
+    }, [
+        nodeId,
+        database,
+        clusterName,
+        backend,
+        environment,
+        activeTab.id,
+        activeTabId,
+        activeTabIdFromQuery,
+        history,
+        activeTab,
+    ]);
 
     return (
         <div className={b(null)} ref={container}>
@@ -160,6 +169,9 @@ export function Node() {
                 <NodePageContent
                     nodeId={nodeId}
                     database={database}
+                    clusterName={clusterName ?? undefined}
+                    backend={backend ?? undefined}
+                    environment={environment}
                     activeTabId={activeTab.id}
                     tabs={nodeTabs}
                     parentContainer={container}
@@ -233,6 +245,9 @@ function NodePageInfo({node, loading}: NodePageInfoProps) {
 interface NodePageContentProps {
     nodeId: string;
     database?: string;
+    clusterName?: string;
+    backend?: string;
+    environment?: string;
 
     activeTabId: NodeTab;
     tabs: {id: string; title: string}[];
@@ -243,6 +258,9 @@ interface NodePageContentProps {
 function NodePageContent({
     nodeId,
     database,
+    clusterName,
+    backend,
+    environment,
     activeTabId,
     tabs,
     parentContainer,
@@ -254,8 +272,8 @@ function NodePageContent({
                     <TabList className={b('tab-list')} size="l">
                         {tabs.map(({id, title}) => {
                             const path = getDefaultNodePath(
-                                {id: nodeId, activeTab: id as NodeTab},
-                                {database},
+                                {id: nodeId, activeTab: id as NodeTab, environment},
+                                {database, clusterName, backend},
                             );
                             return (
                                 <Tab value={id} key={id}>
@@ -296,10 +314,6 @@ function NodePageContent({
                 );
             }
 
-            case 'structure': {
-                return <NodeStructure nodeId={nodeId} />;
-            }
-
             case 'threads': {
                 return (
                     <Threads

package/src/containers/Node/NodePages.ts

@@ -9,7 +9,6 @@ import i18n from './i18n';
 const NODE_TABS_IDS = {
     storage: 'storage',
     tablets: 'tablets',
-    structure: 'structure',
     threads: 'threads',
     network: 'network',
     configs: 'configs',
@@ -24,12 +23,6 @@ export const NODE_TABS = [
             return i18n('tabs.storage');
         },
     },
-    {
-        id: NODE_TABS_IDS.structure,
-        get title() {
-            return i18n('tabs.structure');
-        },
-    },
     {
         id: NODE_TABS_IDS.tablets,
         get title() {
@@ -56,13 +49,15 @@ export const NODE_TABS = [
     },
 ];
 
-export const nodePageTabSchema = z.nativeEnum(NODE_TABS_IDS).catch(NODE_TABS_IDS.tablets);
+export const nodePageTabSchema = z.preprocess(
+    (value) => (value === 'structure' ? NODE_TABS_IDS.storage : value),
+    z.nativeEnum(NODE_TABS_IDS).catch(NODE_TABS_IDS.tablets),
+);
 
 export const nodePageQueryParams = {
     database: StringParam,
-    pdiskId: StringParam,
-    vdiskId: StringParam,
     clusterName: StringParam,
+    backend: StringParam,
 };
 
 export type NodePageQuery = QueryParamsTypeFromQueryObject<typeof nodePageQueryParams>;