From c91b5736eaf47504990b3170971e24356247f1f7 Mon Sep 17 00:00:00 2001 From: Daria Vorontsova Date: Wed, 10 Dec 2025 18:24:45 +0300 Subject: [PATCH 1/9] feat: add partitions progress bar to table info --- .../PartitionsProgress.scss | 50 ++++++ .../PartitionsProgress/PartitionsProgress.tsx | 159 ++++++++++++++++++ .../TableInfo/PartitionsProgress/helpers.ts | 108 ++++++++++++ .../TableInfo/PartitionsProgress/i18n/en.json | 10 ++ .../PartitionsProgress/i18n/index.ts | 7 + .../Overview/TableInfo/TableInfo.scss | 5 + .../Overview/TableInfo/TableInfo.tsx | 18 +- .../Overview/TableInfo/i18n/en.json | 5 +- .../Overview/TableInfo/prepareTableInfo.tsx | 40 ++++- 9 files changed, 394 insertions(+), 8 deletions(-) create mode 100644 src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss create mode 100644 src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx create mode 100644 src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/helpers.ts create mode 100644 src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/i18n/en.json create mode 100644 src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/i18n/index.ts diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss new file mode 100644 index 0000000000..740f0e49a7 --- /dev/null +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss @@ -0,0 +1,50 @@ +.ydb-partitions-progress { + &__segment { + display: flex; + flex-basis: 0; + + &_left, + &_right { + min-width: 20px; + } + + &_main { + min-width: 70px; + } + } + + &__segment-bar { + &_left, + &_right { + --g-progress-filled-background-color: var(--g-color-base-danger-heavy); + } + + &_main { + --g-progress-filled-background-color: var(--g-color-base-info-heavy); + --g-progress-empty-background-color: var(--g-color-base-info-light); + } + } + + &__segment-labels { + display: flex; + + &_left { + justify-content: flex-start; + } + + &_right { + justify-content: flex-end; + } + + &_main { + justify-content: space-between; + } + } + + &__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); + } +} diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx new file mode 100644 index 0000000000..67ad2ce3bd --- /dev/null +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx @@ -0,0 +1,159 @@ +import {Flex, Popover, Progress, Text} from '@gravity-ui/uikit'; +import {isNil} from 'lodash'; + +import {cn} from '../../../../../../utils/cn'; + +import {calcPartitionsProgress, getPartitionsLabel} from './helpers'; +import i18n from './i18n'; + +import './PartitionsProgress.scss'; + +const b = cn('ydb-partitions-progress'); + +interface PartitionsProgressProps { + minPartitions: number; + maxPartitions?: number; + partitionsCount: number; + className?: string; +} + +type SegmentPosition = 'left' | 'main' | 'right'; + +const SEGMENT_MODS: Record> = { + left: {left: true}, + main: {main: true}, + right: {right: true}, +}; + +const FULL_FILL_VALUE = 100; + +interface SegmentProgressBarProps { + position: SegmentPosition; + value: number; + tooltip: string; + theme?: 'default' | 'danger'; +} + +const SegmentProgressBar = ({ + position, + value, + tooltip, + theme = 'default', +}: SegmentProgressBarProps) => ( + +
+ +
+ +); + +export const PartitionsProgress = ({ + minPartitions, + maxPartitions, + partitionsCount, + className, +}: PartitionsProgressProps) => { + const { + min, + max, + partitionsBelowMin, + partitionsAboveMax, + isBelowMin, + isAboveMax, + leftSegmentUnits, + mainSegmentUnits, + rightSegmentUnits, + mainProgressValue, + } = calcPartitionsProgress(minPartitions, maxPartitions, partitionsCount); + + const partitionsLabel = getPartitionsLabel(partitionsCount); + + const belowLimitTooltip = i18n('tooltip_partitions-below-limit', { + count: partitionsCount, + diff: partitionsBelowMin, + partitions: partitionsLabel, + }); + + const aboveLimitTooltip = i18n('tooltip_partitions-above-limit', { + count: partitionsCount, + diff: partitionsAboveMax, + partitions: partitionsLabel, + }); + + const currentTooltip = i18n('tooltip_partitions-current', { + count: partitionsCount, + partitions: partitionsLabel, + }); + + const maxLabel = isNil(max) ? i18n('value_no-limit') : max; + + return ( + + {isBelowMin && ( + + + +
+ + {partitionsCount} + +
+ + )} + + + + +
+ + {min} + + + {maxLabel} + +
+ + + {isAboveMax && ( + + + +
+ + {partitionsCount} + +
+ + )} + + ); +}; diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/helpers.ts b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/helpers.ts new file mode 100644 index 0000000000..28439ad8cc --- /dev/null +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/helpers.ts @@ -0,0 +1,108 @@ +import {isNil} from 'lodash'; + +import i18n from './i18n'; + +export interface PartitionsProgressCalcResult { + min: number; + max?: number; + + partitionsBelowMin: number; + partitionsAboveMax: number; + + isBelowMin: boolean; + isAboveMax: boolean; + + leftSegmentUnits: number; + mainSegmentUnits: number; + rightSegmentUnits: number; + + mainProgressValue: number; +} + +export function calcPartitionsProgress( + minPartitions: number, + maxPartitions: number | undefined, + partitionsCount: number, +): PartitionsProgressCalcResult { + const min = minPartitions; + + const hasMaxLimit = !isNil(maxPartitions); + + if (!hasMaxLimit) { + const partitionsBelowMin = Math.max(0, min - partitionsCount); + const partitionsAboveMax = 0; + const isBelowMin = partitionsBelowMin > 0; + const isAboveMax = false; + + // When max limit is not provided, reserve a fixed 20% of the total width + // for the "below min" segment (1:4 ratio between warning and main segments). + const leftSegmentUnits = isBelowMin ? 1 : 0; + const mainSegmentUnits = isBelowMin ? 4 : 1; + const rightSegmentUnits = 0; + + const mainProgressValue = partitionsCount < min ? 0 : 100; + + return { + min, + max: undefined, + + partitionsBelowMin, + partitionsAboveMax, + + isBelowMin, + isAboveMax, + + leftSegmentUnits, + mainSegmentUnits, + rightSegmentUnits, + + mainProgressValue, + }; + } + + const max = Math.max(maxPartitions as number, minPartitions); + + const range = Math.max(0, max - min); + + const partitionsBelowMin = Math.max(0, min - partitionsCount); + const partitionsAboveMax = Math.max(0, partitionsCount - max); + + const isBelowMin = partitionsBelowMin > 0; + const isAboveMax = partitionsAboveMax > 0; + + const mainSegmentUnits = range || 1; + + let mainProgressValue = 0; + if (range > 0) { + if (partitionsCount <= min) { + mainProgressValue = 0; + } else if (partitionsCount >= max) { + mainProgressValue = 100; + } else { + mainProgressValue = ((partitionsCount - min) / range) * 100; + } + } + + const leftSegmentUnits = isBelowMin ? partitionsBelowMin : 0; + const rightSegmentUnits = isAboveMax ? partitionsAboveMax : 0; + + return { + min, + max, + + partitionsBelowMin, + partitionsAboveMax, + + isBelowMin, + isAboveMax, + + leftSegmentUnits, + mainSegmentUnits, + rightSegmentUnits, + + mainProgressValue, + }; +} + +export const getPartitionsLabel = (count: number) => + count === 1 ? i18n('value_partition-one') : i18n('value_partition-many'); diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/i18n/en.json b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/i18n/en.json new file mode 100644 index 0000000000..ab452650af --- /dev/null +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/i18n/en.json @@ -0,0 +1,10 @@ +{ + "tooltip_partitions-current": "{{count}} {{partitions}}", + "tooltip_partitions-below-limit": "{{count}} {{partitions}}. {{diff}} less than the limit", + "tooltip_partitions-above-limit": "{{count}} {{partitions}}. {{diff}} over the limit", + + "value_partition-one": "partition", + "value_partition-many": "partitions", + + "value_no-limit": "No limit" +} diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/i18n/index.ts b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/i18n/index.ts new file mode 100644 index 0000000000..0062f51ab4 --- /dev/null +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/i18n/index.ts @@ -0,0 +1,7 @@ +import {registerKeysets} from '../../../../../../../utils/i18n'; + +import en from './en.json'; + +const COMPONENT = 'partitions-progress'; + +export default registerKeysets(COMPONENT, {en}); diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss index 4f787845b4..811f1af5b2 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss @@ -5,6 +5,11 @@ @include mixins.info-viewer-title(); } + &__progress-bar { + max-width: 656px; + padding: var(--g-spacing-3) 0 var(--g-spacing-4); + } + &__row { display: flex; flex-wrap: wrap; diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx index 74eaf96f84..140c86b42c 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx @@ -3,8 +3,8 @@ import React from 'react'; import {InfoViewer} from '../../../../../components/InfoViewer'; import type {EPathType, TEvDescribeSchemeResult} from '../../../../../types/api/schema'; import {cn} from '../../../../../utils/cn'; -import {EntityTitle} from '../../../EntityTitle/EntityTitle'; +import {PartitionsProgress} from './PartitionsProgress/PartitionsProgress'; import i18n from './i18n'; import {prepareTableInfo} from './prepareTableInfo'; @@ -18,22 +18,30 @@ interface TableInfoProps { } export const TableInfo = ({data, type}: TableInfoProps) => { - const title = ; - const { generalInfo, tableStatsInfo, tabletMetricsInfo = [], partitionConfigInfo = [], + partitionProgressConfig, } = React.useMemo(() => prepareTableInfo(data, type), [data, type]); return (
+
{i18n('title')}
+ {partitionProgressConfig && ( +
+ +
+ )}
{title}
} + renderEmptyState={() =>
{i18n('title')}
} />
{tableStatsInfo ? ( diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json b/src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json index e449db46b7..8de7d5119f 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json @@ -1,6 +1,7 @@ { - "tableStats": "Table Stats", - "tabletMetrics": "Tablet Metrics", + "title": "Partitioning", + "tableStats": "Stats", + "tabletMetrics": "Metrics", "partitionConfig": "Partition Config", "label.ttl": "TTL for rows", diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx index b96e78fef9..2d7f80374b 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx @@ -15,6 +15,7 @@ import type { TColumnTableDescription, TEvDescribeSchemeResult, TPartitionConfig, + TPersQueueGroupDescription, TTTLSettings, } from '../../../../../types/api/schema'; import {EPathType} from '../../../../../types/api/schema'; @@ -139,6 +140,31 @@ const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings? return generalTableInfo; }; +type PartitionProgressConfig = { + minPartitions: number; + maxPartitions?: number; + partitionsCount: number; +}; + +const preparePartitionProgressConfig = ( + PartitionConfig: TPartitionConfig, + PersQueueGroup?: TPersQueueGroupDescription, +): PartitionProgressConfig => { + const {PartitioningPolicy} = PartitionConfig; + + // We are convinced, there is always at least one partition; + // fallback and clamp to 1 if value is missing. + const minPartitions = Math.max(1, PartitioningPolicy?.MinPartitionsCount ?? 1); + const maxPartitions = PartitioningPolicy?.MaxPartitionsCount; + const partitionsCount = Math.max(1, PersQueueGroup?.Partitions?.length ?? 1); + + return { + minPartitions, + maxPartitions, + partitionsCount, + }; +}; + /** Prepares data for Table, ColumnTable and ColumnStore */ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathType) => { if (!data) { @@ -152,6 +178,7 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp TabletMetrics = {}, Table: {PartitionConfig = {}, TTLSettings} = {}, ColumnTableDescription = {}, + PersQueueGroup, } = PathDescription; const { @@ -181,10 +208,15 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig; let generalInfo: InfoViewerItem[] = []; + let partitionProgressConfig: PartitionProgressConfig | undefined; switch (type) { case EPathType.EPathTypeTable: { generalInfo = prepareTableGeneralInfo(PartitionConfig, TTLSettings); + partitionProgressConfig = preparePartitionProgressConfig( + PartitionConfig, + PersQueueGroup, + ); break; } case EPathType.EPathTypeColumnTable: { @@ -252,5 +284,11 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp ); } - return {generalInfo, tableStatsInfo, tabletMetricsInfo, partitionConfigInfo}; + return { + generalInfo, + tableStatsInfo, + tabletMetricsInfo, + partitionConfigInfo, + partitionProgressConfig, + }; }; From f121ed59c50b6c71983a2d29526d7333a5a244ae Mon Sep 17 00:00:00 2001 From: Daria Vorontsova Date: Wed, 10 Dec 2025 18:29:33 +0300 Subject: [PATCH 2/9] Fix bugs --- .../PartitionsProgress/PartitionsProgress.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx index 67ad2ce3bd..efd2852288 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx @@ -31,18 +31,12 @@ interface SegmentProgressBarProps { position: SegmentPosition; value: number; tooltip: string; - theme?: 'default' | 'danger'; } -const SegmentProgressBar = ({ - position, - value, - tooltip, - theme = 'default', -}: SegmentProgressBarProps) => ( +const SegmentProgressBar = ({position, value, tooltip}: SegmentProgressBarProps) => (
- +
); @@ -100,7 +94,6 @@ export const PartitionsProgress = ({ position="left" value={FULL_FILL_VALUE} tooltip={belowLimitTooltip} - theme="danger" />
@@ -144,7 +137,6 @@ export const PartitionsProgress = ({ position="right" value={FULL_FILL_VALUE} tooltip={aboveLimitTooltip} - theme="danger" />
From ae31b8aef65d73d423991f7485ad46923f758cc3 Mon Sep 17 00:00:00 2001 From: Daria Vorontsova Date: Wed, 10 Dec 2025 18:41:11 +0300 Subject: [PATCH 3/9] Fix bugs --- .../Overview/TableInfo/prepareTableInfo.tsx | 10 +++++----- src/types/api/schema/schema.ts | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx index 2d7f80374b..6fcce56516 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx @@ -15,8 +15,8 @@ import type { TColumnTableDescription, TEvDescribeSchemeResult, TPartitionConfig, - TPersQueueGroupDescription, TTTLSettings, + TTablePartition, } from '../../../../../types/api/schema'; import {EPathType} from '../../../../../types/api/schema'; import {valueIsDefined} from '../../../../../utils'; @@ -148,7 +148,7 @@ type PartitionProgressConfig = { const preparePartitionProgressConfig = ( PartitionConfig: TPartitionConfig, - PersQueueGroup?: TPersQueueGroupDescription, + TablePartitions?: TTablePartition[], ): PartitionProgressConfig => { const {PartitioningPolicy} = PartitionConfig; @@ -156,7 +156,7 @@ const preparePartitionProgressConfig = ( // fallback and clamp to 1 if value is missing. const minPartitions = Math.max(1, PartitioningPolicy?.MinPartitionsCount ?? 1); const maxPartitions = PartitioningPolicy?.MaxPartitionsCount; - const partitionsCount = Math.max(1, PersQueueGroup?.Partitions?.length ?? 1); + const partitionsCount = TablePartitions?.length ?? 1; return { minPartitions, @@ -174,11 +174,11 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp const {PathDescription = {}} = data; const { + TablePartitions, TableStats = {}, TabletMetrics = {}, Table: {PartitionConfig = {}, TTLSettings} = {}, ColumnTableDescription = {}, - PersQueueGroup, } = PathDescription; const { @@ -215,7 +215,7 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp generalInfo = prepareTableGeneralInfo(PartitionConfig, TTLSettings); partitionProgressConfig = preparePartitionProgressConfig( PartitionConfig, - PersQueueGroup, + TablePartitions, ); break; } diff --git a/src/types/api/schema/schema.ts b/src/types/api/schema/schema.ts index 319268cc69..0ba521918b 100644 --- a/src/types/api/schema/schema.ts +++ b/src/types/api/schema/schema.ts @@ -334,7 +334,7 @@ interface TPathVersion { GeneralVersion?: string; } -interface TTablePartition { +export interface TTablePartition { /** bytes */ EndOfRangeKeyPrefix?: unknown; IsPoint?: boolean; From b3414be271fd32704b05288b724fa0e8abc6faad Mon Sep 17 00:00:00 2001 From: Daria Vorontsova Date: Wed, 10 Dec 2025 18:57:39 +0300 Subject: [PATCH 4/9] Fix bugs --- .../Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx | 7 ++++++- .../Diagnostics/Overview/TableInfo/prepareTableInfo.tsx | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx index 140c86b42c..1f53155790 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx @@ -26,10 +26,15 @@ export const TableInfo = ({data, type}: TableInfoProps) => { partitionProgressConfig, } = React.useMemo(() => prepareTableInfo(data, type), [data, type]); + // Feature flag: show partitions progress only if WINDOW_SHOW_TABLE_SETTINGS is truthy + const isPartitionsProgressEnabled = Boolean( + (window as unknown as {WINDOW_SHOW_TABLE_SETTINGS?: unknown}).WINDOW_SHOW_TABLE_SETTINGS, + ); + return (
{i18n('title')}
- {partitionProgressConfig && ( + {isPartitionsProgressEnabled && partitionProgressConfig && (
Date: Wed, 10 Dec 2025 19:00:56 +0300 Subject: [PATCH 5/9] Fix bugs --- .../Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss index 811f1af5b2..b9255b1235 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss @@ -2,6 +2,7 @@ .ydb-diagnostics-table-info { &__title { + margin-top: 0; @include mixins.info-viewer-title(); } From 205afb91c5fd3670fcff4d98088dca7da8261ca4 Mon Sep 17 00:00:00 2001 From: Daria Vorontsova Date: Wed, 10 Dec 2025 19:16:11 +0300 Subject: [PATCH 6/9] Fix bugs --- .../Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss index b9255b1235..5774ba225e 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss @@ -2,8 +2,10 @@ .ydb-diagnostics-table-info { &__title { - margin-top: 0; - @include mixins.info-viewer-title(); + margin-bottom: 10px; + + font-weight: 600; + @include mixins.body-2-typography(); } &__progress-bar { From 5ff0661df4b6f83349c27141e93212f0fee72ac7 Mon Sep 17 00:00:00 2001 From: Daria Vorontsova Date: Wed, 10 Dec 2025 19:52:21 +0300 Subject: [PATCH 7/9] Fix bugs --- .../PartitionsProgress/PartitionsProgress.tsx | 118 +++++++++--------- .../TableInfo/PartitionsProgress/helpers.ts | 5 +- .../Overview/TableInfo/TableInfo.tsx | 2 +- 3 files changed, 60 insertions(+), 65 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx index efd2852288..eb68bdd14d 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx @@ -25,20 +25,17 @@ const SEGMENT_MODS: Record> = { right: {right: true}, }; -const FULL_FILL_VALUE = 100; +export const FULL_FILL_VALUE = 100; interface SegmentProgressBarProps { position: SegmentPosition; value: number; - tooltip: string; } -const SegmentProgressBar = ({position, value, tooltip}: SegmentProgressBarProps) => ( - -
- -
- +const SegmentProgressBar = ({position, value}: SegmentProgressBarProps) => ( +
+ +
); export const PartitionsProgress = ({ @@ -81,71 +78,68 @@ export const PartitionsProgress = ({ const maxLabel = isNil(max) ? i18n('value_no-limit') : max; + let tooltipContent = currentTooltip; + if (isBelowMin) { + tooltipContent = belowLimitTooltip; + } else if (isAboveMax) { + tooltipContent = aboveLimitTooltip; + } + return ( - - {isBelowMin && ( + + + {isBelowMin && ( + + + +
+ + {partitionsCount} + +
+ + )} + - + -
+
- {partitionsCount} + {min} -
- - )} - - - - -
- - {min} - - - {maxLabel} - -
- - - {isAboveMax && ( - - - -
- {partitionsCount} + {maxLabel}
- )} - + + {isAboveMax && ( + + + +
+ + {partitionsCount} + +
+ + )} + + ); }; diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/helpers.ts b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/helpers.ts index 28439ad8cc..773eae7758 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/helpers.ts +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/helpers.ts @@ -1,5 +1,6 @@ import {isNil} from 'lodash'; +import {FULL_FILL_VALUE} from './PartitionsProgress'; import i18n from './i18n'; export interface PartitionsProgressCalcResult { @@ -40,7 +41,7 @@ export function calcPartitionsProgress( const mainSegmentUnits = isBelowMin ? 4 : 1; const rightSegmentUnits = 0; - const mainProgressValue = partitionsCount < min ? 0 : 100; + const mainProgressValue = partitionsCount < min ? 0 : FULL_FILL_VALUE; return { min, @@ -77,7 +78,7 @@ export function calcPartitionsProgress( if (partitionsCount <= min) { mainProgressValue = 0; } else if (partitionsCount >= max) { - mainProgressValue = 100; + mainProgressValue = FULL_FILL_VALUE; } else { mainProgressValue = ((partitionsCount - min) / range) * 100; } diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx index 1f53155790..8956945c8d 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx @@ -46,7 +46,7 @@ export const TableInfo = ({data, type}: TableInfoProps) => {
{i18n('title')}
} + renderEmptyState={() => null} />
{tableStatsInfo ? ( From dd87209887fd83cfff6d909b111330c32d905a04 Mon Sep 17 00:00:00 2001 From: Daria Vorontsova Date: Wed, 10 Dec 2025 20:06:12 +0300 Subject: [PATCH 8/9] Fix bugs --- .../PartitionsProgress.scss | 22 ++-------------- .../PartitionsProgress/PartitionsProgress.tsx | 25 +++++++++---------- 2 files changed, 14 insertions(+), 33 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss index 740f0e49a7..8d7c09407c 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.scss @@ -3,8 +3,7 @@ display: flex; flex-basis: 0; - &_left, - &_right { + &_additional { min-width: 20px; } @@ -14,8 +13,7 @@ } &__segment-bar { - &_left, - &_right { + &_additional { --g-progress-filled-background-color: var(--g-color-base-danger-heavy); } @@ -25,22 +23,6 @@ } } - &__segment-labels { - display: flex; - - &_left { - justify-content: flex-start; - } - - &_right { - justify-content: flex-end; - } - - &_main { - justify-content: space-between; - } - } - &__segment-touched { padding: var(--g-spacing-2); diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx index eb68bdd14d..366bf3705f 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/PartitionsProgress/PartitionsProgress.tsx @@ -17,12 +17,11 @@ interface PartitionsProgressProps { className?: string; } -type SegmentPosition = 'left' | 'main' | 'right'; +type SegmentPosition = 'main' | 'additional'; const SEGMENT_MODS: Record> = { - left: {left: true}, + additional: {additional: true}, main: {main: true}, - right: {right: true}, }; export const FULL_FILL_VALUE = 100; @@ -93,15 +92,15 @@ export const PartitionsProgress = ({ style={{flexGrow: leftSegmentUnits}} direction="column" gap="2" - className={b('segment', SEGMENT_MODS.left)} + className={b('segment', SEGMENT_MODS.additional)} > - + -
+ {partitionsCount} -
+ )} @@ -113,30 +112,30 @@ export const PartitionsProgress = ({ > -
+ {min} {maxLabel} -
+ {isAboveMax && ( - + -
+ {partitionsCount} -
+ )} From 57bb8c0b90869eca4ff692fe757ede8150ea2309 Mon Sep 17 00:00:00 2001 From: Daria Vorontsova Date: Thu, 11 Dec 2025 17:36:37 +0300 Subject: [PATCH 9/9] Fix window --- .../Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx | 4 +--- src/types/window.d.ts | 2 ++ 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx index 8956945c8d..994d703cd6 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.tsx @@ -27,9 +27,7 @@ export const TableInfo = ({data, type}: TableInfoProps) => { } = React.useMemo(() => prepareTableInfo(data, type), [data, type]); // Feature flag: show partitions progress only if WINDOW_SHOW_TABLE_SETTINGS is truthy - const isPartitionsProgressEnabled = Boolean( - (window as unknown as {WINDOW_SHOW_TABLE_SETTINGS?: unknown}).WINDOW_SHOW_TABLE_SETTINGS, - ); + const isPartitionsProgressEnabled = Boolean(window.WINDOW_SHOW_TABLE_SETTINGS); return (
diff --git a/src/types/window.d.ts b/src/types/window.d.ts index cb10abf0a8..abd9bfa486 100644 --- a/src/types/window.d.ts +++ b/src/types/window.d.ts @@ -45,5 +45,7 @@ interface Window { api: import('../services/api/index').YdbEmbeddedAPI; + WINDOW_SHOW_TABLE_SETTINGS?: boolean; + [key: `yaCounter${number}`]: any; }