feat(TopicData): add tab for topic data #2145

Raubzeug · 2025-04-12T15:59:26Z

CI Results

Test Status: ⚠️ FLAKY

Total	Passed	Failed	Flaky	Skipped
318	317	0	1	0

😟 No changes in tests. 😕

Bundle Size: 🔺

Current: 83.46 MB | Main: 83.38 MB
Diff: +0.08 MB (0.10%)

⚠️ Bundle size increased. Please review.

ℹ️ CI Information

Test recordings for failed tests are available in the full report.
Bundle size is measured for the entire 'dist' directory.
📊 indicates links to detailed reports.
🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

Copilot

Copilot reviewed 46 out of 50 changed files in this pull request and generated 2 comments.

Files not reviewed (4)

src/components/EmptyState/EmptyState.scss: Language not supported
src/components/MultilineTableHeader/MultilineTableHeader.scss: Language not supported
src/components/PaginatedTable/PaginatedTable.scss: Language not supported
src/containers/Tenant/Diagnostics/Partitions/Headers/Headers.scss: Language not supported

Copilot · 2025-04-12T16:00:10Z

src/components/PaginatedTable/TableHead.tsx

+                    <div className={b('head-cell-content')}>{content}</div>
+                    {column.note && (
+                        <HelpMark
+                            placement={columnAlignToHelpMarkPlacement[column.align]}


If column.align is undefined or not one of 'left', 'right', or 'center', this mapping will return undefined. Consider providing a default placement value to prevent potential runtime issues.

Suggested change

placement={columnAlignToHelpMarkPlacement[column.align]}

placement={columnAlignToHelpMarkPlacement[column.align] ?? 'top'}

Copilot · 2025-04-12T16:00:10Z

src/components/MultilineTableHeader/MultilineTableHeader.tsx

+
+import './MultilineTableHeader.scss';
+
+const b = cn('ydb-mulitiline-table-header');


There appears to be a typo in the class name 'ydb-mulitiline-table-header'; consider renaming it to 'ydb-multiline-table-header' for clarity.

Suggested change

const b = cn('ydb-mulitiline-table-header');

const b = cn('ydb-multiline-table-header');

Copilot

Copilot reviewed 46 out of 50 changed files in this pull request and generated no comments.

Files not reviewed (4)

src/components/EmptyState/EmptyState.scss: Language not supported
src/components/MultilineTableHeader/MultilineTableHeader.scss: Language not supported
src/components/PaginatedTable/PaginatedTable.scss: Language not supported
src/containers/Tenant/Diagnostics/Partitions/Headers/Headers.scss: Language not supported

Comments suppressed due to low confidence (1)

src/components/PaginatedTable/TableHead.tsx:138

The 'align' property is used to determine the HelpMark placement but is not declared in the Column interface. Consider adding an optional 'align' field to the Column type with a default value to ensure consistent behavior.

placement={columnAlignToHelpMarkPlacement[column.align]}

src/store/state-url-mapping.ts

artemmufazalov · 2025-04-14T08:34:06Z

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

+            <FullValue value={fullValue} onClose={() => setFullValue(undefined)} />
+            <ResizeablePaginatedTable
+                //if any filter change, we need to initiate a new table component to ensure correct start offset calculations in generateTopicDataGetter
+                key={topicDataFilter + selectedOffset + startTimestamp + selectedPartition}


Table chunks are reset every time value in filters changes, why do you need key here?

Because of logic inside generateTopicDataGetter https://github.com/ydb-platform/ydb-embedded-ui/pull/2145/files/c38c503b6fcc6c99e35da4324056d8374ccb5c03#diff-55d62e69373cb3d825abe22e33d121b8cda18477596ea4d1038a5560934ac1f4 ! Every time we should calculate initial offset, and table offset should be reset to 0.

But there is already

parentRef.current.scrollTo(0, 0);

in React.useLayoutEffect in PaginatedTable

shouldnt this be enough?

I made a little improvement to PaginatedTable, so it does't refetch previous active chunks when filters changes. So the key is not needed any more.

astandrik · 2025-04-16T14:06:40Z

src/components/Search/Search.tsx

 import {cn} from '../../utils/cn';
+import {DebouncedInput} from '../DebouncedInput/DebouncedInput';


I dont think we need search component now - we can use DebouncedInput directly where Search was used

We definitely can, but it will require to pass similar props in a lot of places where was used. Do you think it is really needed?

astandrik · 2025-04-16T14:06:52Z

src/components/DebouncedInput/DebouncedInput.tsx

+import type {TextInputProps} from '@gravity-ui/uikit';
+import {TextInput} from '@gravity-ui/uikit';
+
+interface SearchProps extends TextInputProps {


DebouncedInputProps ?

astandrik · 2025-04-16T14:17:50Z

src/containers/Tenant/Diagnostics/Partitions/Partitions.scss

@@ -5,11 +5,12 @@
    flex-grow: 1;

    height: 100%;
+    margin-right: -20px;


calc(-1 * var(--g-spacing-5))

it seems we don't need it at all

astandrik · 2025-04-16T14:32:17Z

src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx

+                    {TopicDataFilterValues.TIMESTAMP}
+                </RadioButton.Option>
+                <RadioButton.Option value="OFFSET">
+                    {TopicDataFilterValues.OFFSET}


I suppose value in RadioButton should be TopicDataFilterValues.OFFSET and text i18(...)

according to current project rules

astandrik · 2025-04-16T14:32:44Z

src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx

+                    {TopicDataFilterValues.OFFSET}
+                </RadioButton.Option>
+            </RadioButton>
+            {topicDataFilter === 'OFFSET' && (


here and below too

src/utils/utils.ts

src/components/PaginatedTable/PaginatedTable.scss

src/containers/Tenant/Diagnostics/Partitions/Partitions.scss

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

src/containers/Tenant/Diagnostics/TopicData/columns/Columns.scss

src/containers/Tenant/Diagnostics/TopicData/__test__/getData.test.ts

artemmufazalov · 2025-04-18T09:28:41Z

src/containers/Tenant/Diagnostics/Partitions/Partitions.scss

    &__table {
        @include mixins.freeze-nth-column(1);
+        // padding-right: 0;


src/containers/Tenant/Diagnostics/TopicData/__test__/getData.test.ts

Raubzeug · 2025-04-21T07:47:41Z

@astandrik @artemmufazalov stand redeployed

Copilot

Pull Request Overview

This PR adds a new "Data" tab for topic data diagnostics and enhances related page linking and filtering logic for topic and database entity types.

Updated diagnostics pages to include the new topicData tab
Refactored page lookup logic to handle topic data and database feature flags
Replaced TextInput with a DebouncedInput component for better search handling

Reviewed Changes

Copilot reviewed 45 out of 48 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/containers/Tenant/Diagnostics/DiagnosticsPages.ts	Added topicData tab and updated pages filtering logic
src/containers/Tenant/Diagnostics/Diagnostics.tsx	Integrated topicData rendering with updated diagnostics page linking
src/containers/Storage/shared.ts	Removed unused paginated table error message helper
src/containers/Storage/PaginatedStorageNodes.tsx	Updated import usage for error message rendering
src/containers/Storage/PaginatedStorageGroups.tsx	Updated import usage for error message rendering
src/containers/Storage/EmptyFilter/EmptyFilter.tsx	Modified to allow an optional custom image for empty filters
src/components/Search/Search.tsx	Replaced TextInput with DebouncedInput for improved debounced search input
src/components/PaginatedTable/useScrollBasedChunks.ts	Adjusted active chunks calculation logic
src/components/PaginatedTable/types.ts	Added a note property to the Column type
src/components/PaginatedTable/TableHead.tsx	Added HelpMark support for displaying column notes
src/components/PaginatedTable/TableChunk.tsx	Updated offset calculation to include startOffset
src/components/PaginatedTable/PaginatedTable.tsx	Introduced startOffset prop and refined filters update and dependency
src/components/MultilineTableHeader/MultilineTableHeader.tsx	New component for rendering multi-line table headers
src/components/MetricChart/getDefaultDataFormatter.ts	Replaced numeric conversion helper with a safer version
src/components/DebouncedInput/DebouncedInput.tsx	New debounced input component implementation

Files not reviewed (3)

src/components/EmptyState/EmptyState.scss: Language not supported
src/components/MultilineTableHeader/MultilineTableHeader.scss: Language not supported
src/components/PaginatedTable/PaginatedTable.scss: Language not supported

src/components/PaginatedTable/useScrollBasedChunks.ts

src/components/PaginatedTable/TableHead.tsx

src/components/PaginatedTable/useScrollBasedChunks.ts

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

astandrik · 2025-04-21T10:08:45Z

src/components/PaginatedTable/TableChunk.tsx

@@ -30,6 +30,7 @@ interface TableChunkProps<T, F> {
    sortParams?: SortParams;
    isActive: boolean;
    tableName: string;
+    startOffset: number;


mb its possible to set startOffset as rowIndex?

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

Raubzeug · 2025-04-29T09:08:40Z

@artemmufazalov @astandrik final version is here, stand redeployed!

Raubzeug · 2025-04-30T06:18:19Z

@astandrik @artemmufazalov final version is here, stand redeployed!

Raubzeug requested a review from Copilot April 12, 2025 15:59

Copilot AI reviewed Apr 12, 2025

View reviewed changes

Raubzeug changed the title ~~Ydb topic data~~ feat(TopicData): add tab for topic data Apr 12, 2025

Raubzeug linked an issue Apr 12, 2025 that may be closed by this pull request

Tab Data in topic's Diagnostics #1941

Closed

Raubzeug requested a review from Copilot April 12, 2025 16:09

Copilot AI reviewed Apr 12, 2025

View reviewed changes

Raubzeug requested review from astandrik and artemmufazalov April 12, 2025 16:19

artemmufazalov requested changes Apr 14, 2025

View reviewed changes

astandrik reviewed Apr 16, 2025

View reviewed changes

artemmufazalov requested changes Apr 16, 2025

View reviewed changes

Raubzeug requested review from astandrik and artemmufazalov April 17, 2025 11:49

artemmufazalov requested changes Apr 18, 2025

View reviewed changes

Raubzeug requested review from Copilot and artemmufazalov April 21, 2025 07:47

Copilot AI reviewed Apr 21, 2025

View reviewed changes

src/components/PaginatedTable/useScrollBasedChunks.ts Outdated Show resolved Hide resolved

src/components/PaginatedTable/TableHead.tsx Show resolved Hide resolved

Raubzeug force-pushed the ydb-topic-data branch from ff8bc98 to 0be62cc Compare April 21, 2025 08:40

artemmufazalov reviewed Apr 21, 2025

View reviewed changes

src/components/PaginatedTable/useScrollBasedChunks.ts Outdated Show resolved Hide resolved

src/components/PaginatedTable/useScrollBasedChunks.ts Show resolved Hide resolved

artemmufazalov requested changes Apr 21, 2025

View reviewed changes

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx Outdated Show resolved Hide resolved

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx Outdated Show resolved Hide resolved

astandrik reviewed Apr 21, 2025

View reviewed changes

artemmufazalov requested changes Apr 21, 2025

View reviewed changes

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx Show resolved Hide resolved

Raubzeug force-pushed the ydb-topic-data branch from 491eb03 to 8db1ae0 Compare April 25, 2025 15:26

Raubzeug force-pushed the ydb-topic-data branch from 57c3d42 to 92739a8 Compare April 29, 2025 09:11

Raubzeug added 20 commits April 29, 2025 17:38

feat(Partitions): partition id is string now

6c8e838

refactor: move convertToNumber into utils

05a07c0

refactor: move renderPaginatedTableErrorMessage to utils

fb81011

feat(PaginatedTable): add note for column head

3607096

feat(TopicData): add tab for topic data

6be9be4

chore: add tests for getData

d346090

fix: Copilot review

9bcc868

fix: use use-query-params instead of redux-location-state

d6391d1

fix: review

f5be6ad

fix: Afina review

a75a21a

fix: review

e328b64

fix: add tests

84c27ac

fix

dffe52e

fix

f904c58

fix: test

d358294

fix: should not cache data

2af2961

feat: should scroll to selected offset

f297f08

fix: should not reset selected filters on scroll

d44ad54

fix: support new params for topic_data handler

5c5b3bd

fix: review

e3fbd51

Raubzeug force-pushed the ydb-topic-data branch from 92739a8 to e3fbd51 Compare April 29, 2025 14:46

Raubzeug requested review from artemmufazalov and astandrik April 30, 2025 06:18

artemmufazalov approved these changes Apr 30, 2025

View reviewed changes

Raubzeug added this pull request to the merge queue Apr 30, 2025

Merged via the queue into main with commit 4c25054 Apr 30, 2025
7 checks passed

Raubzeug deleted the ydb-topic-data branch April 30, 2025 15:07

ydb-platform-bot mentioned this pull request Apr 30, 2025

chore(main): release 8.26.0 #2218

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(TopicData): add tab for topic data #2145

feat(TopicData): add tab for topic data #2145

Raubzeug commented Apr 12, 2025 •

edited by github-actions bot

Loading

Copilot AI left a comment

Copilot AI Apr 12, 2025

Copilot AI Apr 12, 2025

Copilot AI left a comment

artemmufazalov Apr 14, 2025 •

edited

Loading

Raubzeug Apr 14, 2025

astandrik Apr 16, 2025

Raubzeug Apr 17, 2025

astandrik Apr 16, 2025

Raubzeug Apr 21, 2025

astandrik Apr 16, 2025

astandrik Apr 16, 2025

Raubzeug Apr 17, 2025

astandrik Apr 16, 2025

astandrik Apr 16, 2025

artemmufazalov Apr 18, 2025

Raubzeug commented Apr 21, 2025

Copilot AI left a comment

astandrik Apr 21, 2025

Raubzeug commented Apr 29, 2025

Raubzeug commented Apr 30, 2025

	placement={columnAlignToHelpMarkPlacement[column.align]}
	placement={columnAlignToHelpMarkPlacement[column.align] ?? 'top'}


		import './MultilineTableHeader.scss';

		const b = cn('ydb-mulitiline-table-header');

	const b = cn('ydb-mulitiline-table-header');
	const b = cn('ydb-multiline-table-header');

		import {cn} from '../../utils/cn';
		import {DebouncedInput} from '../DebouncedInput/DebouncedInput';

feat(TopicData): add tab for topic data #2145

feat(TopicData): add tab for topic data #2145

Conversation

Raubzeug commented Apr 12, 2025 • edited by github-actions bot Loading

CI Results

Test Status: ⚠️ FLAKY

Bundle Size: 🔺

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot AI Apr 12, 2025

Choose a reason for hiding this comment

Copilot AI Apr 12, 2025

Choose a reason for hiding this comment

Copilot AI left a comment

Choose a reason for hiding this comment

artemmufazalov Apr 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Raubzeug commented Apr 21, 2025

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Choose a reason for hiding this comment

Raubzeug commented Apr 29, 2025

Raubzeug commented Apr 30, 2025

Raubzeug commented Apr 12, 2025 •

edited by github-actions bot

Loading

artemmufazalov Apr 14, 2025 •

edited

Loading