feat(TopicData): add tab for topic data by Raubzeug · Pull Request #2145 · ydb-platform/ydb-embedded-ui

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

+                    <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

+
+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]}

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

+            <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

-import {TextInput} from '@gravity-ui/uikit';
-
 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

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


DebouncedInputProps ?

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

    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

+                    {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

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


here and below too

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

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


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

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

    sortParams?: SortParams;
    isActive: boolean;
    tableName: string;
+    startOffset: number;


mb its possible to set startOffset as rowIndex?

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 artemmufazalov and astandrik April 12, 2025 16:19

artemmufazalov suggested changes Apr 14, 2025

View reviewed changes

astandrik reviewed Apr 16, 2025

View reviewed changes

artemmufazalov suggested changes Apr 16, 2025

View reviewed changes

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

artemmufazalov suggested changes Apr 18, 2025

View reviewed changes

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

Copilot AI reviewed Apr 21, 2025

View reviewed changes

Comment thread src/components/PaginatedTable/useScrollBasedChunks.ts Outdated

Comment thread src/components/PaginatedTable/TableHead.tsx

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

Comment thread src/components/PaginatedTable/useScrollBasedChunks.ts Outdated

Comment thread src/components/PaginatedTable/useScrollBasedChunks.ts

artemmufazalov suggested changes Apr 21, 2025

View reviewed changes

Comment thread src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx Outdated

Comment thread src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx Outdated

astandrik reviewed Apr 21, 2025

View reviewed changes

artemmufazalov suggested changes Apr 21, 2025

View reviewed changes

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

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 19 commits April 29, 2025 17:38

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

Merged

ydb-platform-bot mentioned this pull request Jun 23, 2025

chore(hotfix/v9.6.3-hotfix.2): release 9.6.3-hotfix.2 #2465

Closed

	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');

Conversation

Raubzeug commented Apr 12, 2025 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CI Results

Test Status: ⚠️ FLAKY

Bundle Size: 🔺

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

artemmufazalov Apr 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Raubzeug commented Apr 21, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Raubzeug commented Apr 29, 2025

Uh oh!

Raubzeug commented Apr 30, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Raubzeug commented Apr 12, 2025 •

edited by github-actions Bot

Loading

artemmufazalov Apr 14, 2025 •

edited

Loading