ydb-embedded-ui 21.0.0 → 22.0.0

package/src/components/SegmentedProgress/SegmentedProgress.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Flex, Text} from '@gravity-ui/uikit';
+import {Flex, Text, Tooltip} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 
@@ -28,6 +28,7 @@ interface SegmentedProgressByValueProps extends SegmentedProgressBaseProps {
     total: number;
     fillPercent?: never;
     displayNoLimit?: DisplayNoLimit;
+    segments?: never;
 }
 
 interface SegmentedProgressByFillPercentProps extends SegmentedProgressBaseProps {
@@ -35,11 +36,33 @@ interface SegmentedProgressByFillPercentProps extends SegmentedProgressBaseProps
     value?: never;
     total?: never;
     displayNoLimit?: never;
+    segments?: never;
+}
+
+export interface SegmentedProgressSegment {
+    id: string;
+    value: number;
+    /** Minimum width in pixels. A positive value keeps zero-value segments visible. */
+    minWidth?: number;
+    color?: string;
+    className?: string;
+    dataQa?: string;
+    tooltip?: string;
+    ariaLabelledBy?: string;
+}
+
+interface SegmentedProgressBySegmentsProps extends SegmentedProgressBaseProps {
+    segments: SegmentedProgressSegment[];
+    total: number;
+    value?: never;
+    fillPercent?: never;
+    displayNoLimit?: never;
 }
 
 export type SegmentedProgressProps =
     | SegmentedProgressByValueProps
-    | SegmentedProgressByFillPercentProps;
+    | SegmentedProgressByFillPercentProps
+    | SegmentedProgressBySegmentsProps;
 
 function clampPercent(percent: number) {
     if (!Number.isFinite(percent) || percent <= 0) {
@@ -51,7 +74,7 @@ function clampPercent(percent: number) {
     return percent;
 }
 
-function defaultNormalizePercent(percent: number) {
+export function defaultNormalizePercent(percent: number) {
     if (percent < 1) {
         return Math.round(percent * 10) / 10;
     }
@@ -64,11 +87,25 @@ function isFillPercentMode(
     return typeof props.fillPercent === 'number';
 }
 
+function isSegmentsMode(props: SegmentedProgressProps): props is SegmentedProgressBySegmentsProps {
+    return Array.isArray(props.segments);
+}
+
 function getPercentUsed(props: SegmentedProgressProps) {
     if (isFillPercentMode(props)) {
         return props.fillPercent;
     }
 
+    if (isSegmentsMode(props)) {
+        if (props.total > 0) {
+            const value = props.segments.reduce((sum, segment) => sum + segment.value, 0);
+
+            return (value / props.total) * 100;
+        }
+
+        return 0;
+    }
+
     if (props.total > 0) {
         return (props.value / props.total) * 100;
     }
@@ -110,9 +147,57 @@ export function SegmentedProgress(props: SegmentedProgressProps) {
         [normalizePercent, percentUsed],
     );
     const fillWidth = getFillWidth(props, normalizedUsed);
-
-    return (
-        <Flex direction="column" gap={1}>
+    const segmentSections = isSegmentsMode(props)
+        ? props.segments.map((segment) => ({
+              ...segment,
+              width: props.total > 0 ? clampPercent((segment.value / props.total) * 100) : 0,
+          }))
+        : undefined;
+    const hasEmptySection = (segmentSections ? percentUsed : fillWidth) < 100;
+
+    const renderSections = () => {
+        if (segmentSections) {
+            return segmentSections
+                .filter((segment) => segment.width > 0 || (segment.minWidth ?? 0) > 0)
+                .map((segment) => {
+                    const section = (
+                        <div
+                            key={segment.id}
+                            aria-label={segment.tooltip}
+                            aria-labelledby={segment.ariaLabelledBy}
+                            className={b('section', {used: true}, segment.className)}
+                            data-qa={segment.dataQa}
+                            role={segment.tooltip ? 'img' : undefined}
+                            style={{
+                                width: `${segment.width}%`,
+                                minWidth: segment.minWidth,
+                                backgroundColor: segment.color,
+                            }}
+                            tabIndex={segment.tooltip ? 0 : undefined}
+                        />
+                    );
+
+                    if (!segment.tooltip) {
+                        return section;
+                    }
+
+                    return (
+                        <Tooltip key={segment.id} content={segment.tooltip}>
+                            {section}
+                        </Tooltip>
+                    );
+                });
+        }
+
+        if (fillWidth > 0) {
+            return <div className={b('section', {used: true})} style={{width: `${fillWidth}%`}} />;
+        }
+
+        return null;
+    };
+
+    const renderProgress = () => {
+        return (
             <div
                 className={b({theme}, className)}
                 data-qa={dataQa}
@@ -122,11 +207,15 @@ export function SegmentedProgress(props: SegmentedProgressProps) {
                 aria-valuemax={100}
                 aria-valuenow={normalizedUsed}
             >
-                {fillWidth > 0 && (
-                    <div className={b('section', {used: true})} style={{width: `${fillWidth}%`}} />
-                )}
-                {100 - fillWidth > 0 && <div className={b('section')} style={{flexGrow: 1}} />}
+                {renderSections()}
+                {hasEmptySection && <div className={b('section')} style={{flexGrow: 1}} />}
             </div>
+        );
+    };
+
+    return (
+        <Flex direction="column" gap={1}>
+            {renderProgress()}
             {!hideLabels && (
                 <Flex width="100%">
                     {labelStart && <Text color="secondary">{labelStart}</Text>}

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",