ydb-embedded-ui 21.1.0 → 22.1.0

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/Clusters/Clusters.tsx

@@ -19,8 +19,9 @@ import {
     selectStatusFilter,
     selectVersionFilter,
 } from '../../store/reducers/clusters/selectors';
+import type {PreparedCluster} from '../../store/reducers/clusters/types';
 import {uiFactory} from '../../uiFactory/uiFactory';
-import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {useSelectedColumns} from '../../utils/hooks/useSelectedColumns';
 import {getMinorVersion} from '../../utils/versions';
@@ -35,6 +36,7 @@ import {
 } from './constants';
 import i18n from './i18n';
 import {b} from './shared';
+import {calculateClusterPath} from './utils';
 
 import './Clusters.scss';
 
@@ -87,7 +89,9 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     const handleDrawerClose = React.useCallback(() => {
         setHealthcheckClusterName(undefined);
     }, []);
-
+    const openCluster = React.useCallback((row: PreparedCluster) => {
+        window.location.assign(calculateClusterPath(row));
+    }, []);
     const rawColumns = React.useMemo(() => {
         return getClustersColumns({
             isEditClusterAvailable,
@@ -197,6 +201,7 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
         return (
             <React.Fragment>
                 <Search
+                    tableFilter
                     placeholder={i18n('controls_search-placeholder')}
                     endContent={<Icon data={Magnifier} className={b('search-icon')} />}
                     onChange={changeClusterName}
@@ -283,18 +288,25 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
 
     const renderContent = () => {
         return (
-            <ResizeableDataTable
-                isLoading={query.isLoading}
-                columnsWidthLSKey={CLUSTERS_COLUMNS_WIDTH_LS_KEY}
-                wrapperClassName={b('table')}
-                data={filteredClusters}
-                columns={filteredColumnsToShow}
-                settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
-                initialSortOrder={{
-                    columnId: COLUMNS_NAMES.TITLE,
-                    order: DataTable.ASCENDING,
-                }}
-            />
+            <div>
+                <ResizeableDataTable
+                    onKeyboardActivate={openCluster}
+                    getKeyboardRowKey={(cluster) => cluster.name}
+                    getKeyboardRowLabel={(cluster) =>
+                        cluster.title || cluster.name || EMPTY_DATA_PLACEHOLDER
+                    }
+                    isLoading={query.isLoading}
+                    columnsWidthLSKey={CLUSTERS_COLUMNS_WIDTH_LS_KEY}
+                    wrapperClassName={b('table')}
+                    data={filteredClusters}
+                    columns={filteredColumnsToShow}
+                    settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
+                    initialSortOrder={{
+                        columnId: COLUMNS_NAMES.TITLE,
+                        order: DataTable.ASCENDING,
+                    }}
+                />
+            </div>
         );
     };
 
@@ -304,22 +316,28 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
             isVisible={Boolean(healthcheckClusterName)}
             onClose={handleDrawerClose}
         >
-            <TableWithControlsLayout fullHeight className={b(null)}>
-                <TableWithControlsLayout.Controls
-                    className={b('controls')}
-                    renderExtraControls={renderColumnSetup}
-                >
-                    {renderControls()}
-                </TableWithControlsLayout.Controls>
-                {query.isError ? <ResponseError error={query.error} /> : null}
-                {renderClustersCount()}
-                <TableWithControlsLayout.Table
-                    scrollContainerRef={scrollContainerRef}
-                    className={b('table-wrapper')}
+            <div>
+                <TableWithControlsLayout
+                    fullHeight
+                    className={b(null)}
+                    keyboardNavigationResetKey={JSON.stringify([status, service, version, galaxy])}
                 >
-                    {renderContent()}
-                </TableWithControlsLayout.Table>
-            </TableWithControlsLayout>
+                    <TableWithControlsLayout.Controls
+                        className={b('controls')}
+                        renderExtraControls={renderColumnSetup}
+                    >
+                        {renderControls()}
+                    </TableWithControlsLayout.Controls>
+                    {query.isError ? <ResponseError error={query.error} /> : null}
+                    {renderClustersCount()}
+                    <TableWithControlsLayout.Table
+                        scrollContainerRef={scrollContainerRef}
+                        className={b('table-wrapper')}
+                    >
+                        <div>{renderContent()}</div>
+                    </TableWithControlsLayout.Table>
+                </TableWithControlsLayout>
+            </div>
         </ClusterDrawerHealthcheck>
     );
 }

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/NodeNetwork/NodeNetworkControls/NodeNetworkControls.tsx

@@ -23,6 +23,7 @@ export function NodeNetworkControls({
     return (
         <React.Fragment>
             <Search
+                tableFilter
                 value={searchValue}
                 onChange={onSearchChange}
                 placeholder={i18n('search-placeholder')}

package/src/containers/Node/NodeNetwork/NodeNetworkTable.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 
+import {useHistory} from 'react-router-dom';
+
+import {
+    getNodeHostLabel,
+    getNodeHostPath,
+} from '../../../components/NodeHostWrapper/NodeHostWrapper';
 import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
 import type {PaginatedTableData} from '../../../components/PaginatedTable';
+import {useDatabaseFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import type {Column} from '../../../utils/tableUtils/types';
 
@@ -25,6 +32,8 @@ export function NodeNetworkTable({
     scrollContainerRef,
     onDataFetched,
 }: NodeNetworkTableProps) {
+    const history = useHistory();
+    const database = useDatabaseFromQuery();
     const filters = React.useMemo(
         () => ({
             nodeId,
@@ -37,6 +46,14 @@ export function NodeNetworkTable({
 
     return (
         <ResizeablePaginatedTable
+            getKeyboardRowKey={(node) => node.NodeId}
+            getKeyboardRowLabel={getNodeHostLabel}
+            onKeyboardActivate={(node) => {
+                const nodePath = getNodeHostPath(node, database);
+                if (nodePath) {
+                    history.push(nodePath);
+                }
+            }}
             columnsWidthLSKey={NODE_NETWORK_COLUMNS_WIDTH_LS_KEY}
             scrollContainerRef={scrollContainerRef}
             columns={columns}