feat: add partitions progress bar to table info (#3206)

Author: DaryaVorontsova

src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss

@@ -0,0 +1,57 @@
+.ydb-partitions-progress {
+    &__segment {
+        display: flex;
+        flex-basis: 0;
+
+        &_additional {
+            min-width: 20px;
+        }
+
+        &_main {
+            min-width: 70px;
+        }
+    }
+
+    &__segment-bar {
+        --segment-filled-bg-color: var(--g-color-base-neutral-heavy);
+        --segment-empty-bg-color: var(--g-color-base-neutral-light);
+        overflow: hidden;
+
+        height: 10px;
+
+        border-radius: var(--g-border-radius-xs);
+        background-color: var(--segment-empty-bg-color);
+
+        &_additional {
+            --segment-filled-bg-color: var(--g-color-base-danger-heavy);
+            --segment-empty-bg-color: var(--g-color-base-danger-light);
+        }
+
+        &_main {
+            --segment-filled-bg-color: var(--g-color-base-info-heavy);
+            --segment-empty-bg-color: var(--g-color-base-info-light);
+        }
+    }
+
+    &__segment-fill {
+        height: 100%;
+
+        background-color: var(--segment-filled-bg-color);
+
+        transition:
+            transform 0.6s ease,
+            width 0.6s ease,
+            background-color 0.6s ease;
+
+        &_min-fill {
+            min-width: 20px;
+        }
+    }
+
+    &__segment-touched {
+        padding: var(--g-spacing-2);
+
+        font-size: var(--g-text-body-2-font-size);
+        line-height: var(--g-text-body-2-line-height);
+    }
+}

src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx

@@ -0,0 +1,143 @@
+import {Flex, Popover, Text} from '@gravity-ui/uikit';
+import {isNil} from 'lodash';
+
+import {cn} from '../../../../../../utils/cn';
+
+import {getPartitionsTooltip} from './helpers';
+import i18n from './i18n';
+import {FULL_FILL_VALUE, calcPartitionsProgress} from './utils';
+
+import './PartitionsProgress.scss';
+
+const b = cn('ydb-partitions-progress');
+
+interface PartitionsProgressProps {
+    minPartitions: number;
+    maxPartitions?: number;
+    partitionsCount: number;
+    className?: string;
+}
+
+type SegmentPosition = 'main' | 'additional';
+
+const SEGMENT_MODS: Record<SegmentPosition, Record<string, boolean>> = {
+    additional: {additional: true},
+    main: {main: true},
+};
+
+interface SegmentProgressBarProps {
+    position: SegmentPosition;
+    value: number;
+    withMinFill?: boolean;
+}
+
+const SegmentProgressBar = ({position, value, withMinFill}: SegmentProgressBarProps) => {
+    const width = `${value}%`;
+
+    return (
+        <div
+            className={b('segment-bar', SEGMENT_MODS[position])}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={FULL_FILL_VALUE}
+            aria-valuenow={value}
+        >
+            <div className={b('segment-fill', {'min-fill': withMinFill})} style={{width}} />
+        </div>
+    );
+};
+
+export const PartitionsProgress = ({
+    minPartitions,
+    maxPartitions,
+    partitionsCount,
+    className,
+}: PartitionsProgressProps) => {
+    const {
+        min,
+        max,
+        partitionsBelowMin,
+        partitionsAboveMax,
+        isBelowMin,
+        isAboveMax,
+        leftSegmentUnits,
+        mainSegmentUnits,
+        rightSegmentUnits,
+        mainProgressValue,
+    } = calcPartitionsProgress(minPartitions, maxPartitions, partitionsCount);
+
+    const tooltip = getPartitionsTooltip({
+        count: partitionsCount,
+        belowMin: partitionsBelowMin,
+        aboveMax: partitionsAboveMax,
+        isBelowMin: isBelowMin,
+        isAboveMax: isAboveMax,
+    });
+
+    const maxLabel = isNil(max) ? i18n('value_no-limit') : max;
+
+    const hasAdditionalSegments = isBelowMin || isAboveMax;
+    const withMinFill = !hasAdditionalSegments;
+
+    return (
+        <Popover hasArrow placement="top" content={tooltip} className={b('segment-touched')}>
+            <Flex alignItems="center" gap="0.5" className={b(null, className)}>
+                {isBelowMin && (
+                    <Flex
+                        style={{flexGrow: leftSegmentUnits}}
+                        direction="column"
+                        gap="2"
+                        className={b('segment', SEGMENT_MODS.additional)}
+                    >
+                        <SegmentProgressBar position="additional" value={FULL_FILL_VALUE} />
+
+                        <Flex justifyContent="flex-start">
+                            <Text variant="body-2" color="secondary">
+                                {partitionsCount}
+                            </Text>
+                        </Flex>
+                    </Flex>
+                )}
+
+                <Flex
+                    direction="column"
+                    className={b('segment', SEGMENT_MODS.main)}
+                    style={{flexGrow: mainSegmentUnits}}
+                    gap="2"
+                >
+                    <SegmentProgressBar
+                        position="main"
+                        value={mainProgressValue}
+                        withMinFill={withMinFill}
+                    />
+
+                    <Flex justifyContent="space-between">
+                        <Text variant="body-2" color="secondary">
+                            {min}
+                        </Text>
+                        <Text variant="body-2" color="secondary">
+                            {maxLabel}
+                        </Text>
+                    </Flex>
+                </Flex>
+
+                {isAboveMax && (
+                    <Flex
+                        direction="column"
+                        gap="2"
+                        className={b('segment', SEGMENT_MODS.additional)}
+                        style={{flexGrow: rightSegmentUnits}}
+                    >
+                        <SegmentProgressBar position="additional" value={FULL_FILL_VALUE} />
+
+                        <Flex justifyContent="flex-end">
+                            <Text variant="body-2" color="secondary">
+                                {partitionsCount}
+                            </Text>
+                        </Flex>
+                    </Flex>
+                )}
+            </Flex>
+        </Popover>
+    );
+};