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

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

CI Results

Test Status: ❌ FAILED

Total	Passed	Failed	Flaky	Skipped
318	315	2	1	0

😟 No changes in tests. 😕

Bundle Size: 🔺

Current: 83.44 MB | Main: 83.36 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

artemmufazalov · 2025-04-21T09:44:49Z

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -84,7 +92,7 @@ export const useScrollBasedChunks = ({
    return React.useMemo(() => {
        // boolean array that represents active chunks
        const activeChunks = Array(chunksCount).fill(false);
-        for (let i = startChunk; i <= endChunk; i++) {
+        for (let i = startChunk; i <= Math.min(endChunk, chunksCount); i++) {


endChunk already has value calculated based on chunksCount, because of this code in calculateVisibleRange:

const end = Math.min( Math.floor(visibleEnd / rowHeight / chunkSize) + overscanCount, Math.max(chunksCount - 1, 0), );

src/components/PaginatedTable/useScrollBasedChunks.ts

artemmufazalov · 2025-04-21T09:50:51Z

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

+        REQUIRED_TOPIC_DATA_COLUMNS,
+    );
+
+    const emptyData = React.useMemo(() => !currentData?.Messages?.length, [currentData]);


emptyData is boolean, you don't need useMemo here

artemmufazalov · 2025-04-21T09:58:29Z

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

+
+    const scrollToOffset = React.useCallback(
+        (newOffset: number) => {
+            const scrollTop = (newOffset - (startOffset ?? 0)) * 41;


Probably it's better to make 41 a constant and pass it to PaginatedTable as rowHeight to ensure they are the same

I wanted to do it but completely forgot...

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?

artemmufazalov · 2025-04-21T10:09:07Z

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

+    parentRef: React.RefObject<HTMLElement>;
+}
+
+export function TopicData({parentRef, path, database}: TopicDataProps) {


no data is shown when filters updated

https://nda.ya.ru/t/3AK7x3oY7Dp5qT

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

Open

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 Show resolved Hide resolved

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

Raubzeug added 8 commits April 21, 2025 11:40

refactor: new DebouncedInput component

b6d7601

feat(Partitions): partition id is string now

21ccb63

refactor: move convertToNumber into utils

3cd5090

refactor: move renderPaginatedTableErrorMessage to utils

0a20373

feat(PaginatedTable): add note for column head

3a93f8c

feat(TopicData): add tab for topic data

1c12bde

chore: add tests for getData

32a93eb

fix: Copilot review

598f9da

Raubzeug added 3 commits April 21, 2025 11:40

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

a8f7d07

fix: review

d512182

fix: Afina review

0be62cc

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

artemmufazalov requested changes Apr 21, 2025

View reviewed changes

astandrik reviewed Apr 21, 2025

View reviewed changes

artemmufazalov requested changes Apr 21, 2025

View reviewed changes

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

artemmufazalov Apr 21, 2025

artemmufazalov Apr 21, 2025

artemmufazalov Apr 21, 2025 •

edited

Loading

Raubzeug Apr 21, 2025

astandrik Apr 21, 2025

artemmufazalov Apr 21, 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

Are you sure you want to change the base?

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

Conversation

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

CI Results

Test Status: ❌ FAILED

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

Choose a reason for hiding this comment

artemmufazalov Apr 21, 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

Raubzeug commented Apr 12, 2025 •

edited by github-actions bot

Loading

artemmufazalov Apr 14, 2025 •

edited

Loading

artemmufazalov Apr 21, 2025 •

edited

Loading