feat(TenantOverview): do not use tabs #2655

Raubzeug · 2025-08-01T10:09:46Z

CI Results

Test Status: ⚠️ FLAKY

Total	Passed	Failed	Flaky	Skipped
354	349	0	3	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

Scroll to row, get shareable link, navigate to URL and verify row is scrolled into view (tenant/diagnostics/tabs/queries.test.ts)
Copy result button copies to clipboard (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: 🔽

Current: 85.35 MB | Main: 85.36 MB
Diff: 0.01 MB (-0.01%)

✅ Bundle size decreased.

ℹ️ 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.

Raubzeug · 2025-08-01T10:19:22Z

/claude_review

claude · 2025-08-01T10:19:44Z

Claude finished @Raubzeug's task —— View job

Todo List:

Gather context and understand the changes
Review TypeScript type safety and interface usage
Check React best practices and Gravity UI component usage
Verify Redux Toolkit patterns with RTK Query
Ensure i18n compliance (no hardcoded strings)
Check API call patterns (window.api usage)
Validate performance and security considerations
Review BEM naming convention usage
Provide comprehensive review feedback

Code Review

This PR removes tabs functionality from the TenantOverview component, simplifying the UI structure. The changes are well-executed overall, with good adherence to YDB Embedded UI standards. Here's my detailed review:

✅ Strengths

Clean Removal of Tab-Based Navigation
- Properly removed all tab-related query params handlers (useTenantNetworkQueryParams.ts, useTenantStorageQueryParams.ts)
- Simplified component structure without breaking functionality
- Reduced code complexity by ~227 lines net
TypeScript Type Safety
- All interfaces and types are properly maintained with 'T' prefix convention (e.g., TenantStorageProps, TenantMemoryProps)
- Type safety preserved in all modified components
i18n Compliance
- All user-facing text uses i18n properly
- No hardcoded strings introduced
- i18n keys properly updated and removed unused ones
Component Structure
- Good use of Gravity UI components (Flex, InfoViewer, ProgressWrapper)
- Proper BEM naming convention with cn() utility
- Clean component organization

⚠️ Areas for Attention

CSS Variable Addition (src/containers/App/App.scss:33-37)
```
--diagnostics-section-title-margin: 20px;
--diagnostics-section-margin: 30px;
--diagnostics-section-table-width: 100%;
```
These new CSS variables are added but I don't see them being used in the changed files. Consider removing if unused or documenting their purpose.
Deleted SCSS Files
- HoverPopup.scss and TenantStorage.scss were deleted
- The HoverPopup component still imports styles: import './HoverPopup.scss' (line removed correctly)
- Ensure no styling regressions from these deletions
Performance Considerations
- All tables continue to use ResizeableDataTable which supports virtual scrolling ✅
- Proper use of React.useMemo for column definitions in TopTables.tsx:56 ✅
- Auto-refresh patterns maintained correctly
Redux/RTK Query Patterns
- All API calls properly use RTK Query hooks (nodesApi.useGetNodesQuery, topTablesApi.useGetTopTablesQuery)
- No direct API calls detected ✅
- Proper polling with autoRefreshInterval

📝 Minor Suggestions

EntityStatus Component (src/components/EntityStatus/EntityStatus.tsx:119)
- The visible class logic could be simplified using a single condition:
```
visible: clipboardButtonAlwaysVisible || infoIconHovered,
```
Storage Columns (src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx)
- Good use of Popover with proper className and placement
- Consider extracting the placement array as a constant since it's used multiple times
Consistency in Layout
- TenantMemory uses <div className={b()}> wrapper while TenantNetwork and TenantStorage use <Flex direction="column" gap={4}>
- Consider standardizing the layout approach

✅ Security & Best Practices

No hardcoded secrets or sensitive information
Proper error handling maintained in all components
Loading states properly handled
Route params validation maintained (React Router v5)

Summary

This is a well-executed refactoring that successfully removes tab-based navigation while maintaining all functionality. The code follows YDB Embedded UI standards consistently, with proper TypeScript typing, i18n compliance, and Redux patterns. The minor suggestions above are optional improvements that could enhance code maintainability.

The PR achieves its goal of simplifying the TenantOverview component structure without introducing regressions or breaking changes.

astandrik · 2025-08-01T10:21:48Z

bugbot run

Copilot

Pull Request Overview

This PR refactors the TenantOverview component to remove tab-based interfaces and display all sections directly. The changes eliminate complex tabbed navigation in favor of a simpler, more direct presentation of storage, network, and memory information.

Remove tab-based UI patterns from TenantStorage and TenantNetwork components
Consolidate popover styling with a global CSS class
Update i18n strings to reflect the new direct display approach

Reviewed Changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/utils/constants.ts	Adds global YDB_POPOVER_CLASS_NAME constant for consistent popover styling
src/store/reducers/tenant/types.ts	Removes storage and network tab type definitions
src/store/reducers/tenant/constants.ts	Removes storage and network tab ID constants
src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json	Updates i18n strings to remove tab-specific language and use direct titles
src/containers/Tenant/Diagnostics/TenantOverview/getSectionTitle.tsx	Removes utility for generating dynamic section titles with links
src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/useTenantStorageQueryParams.ts	Removes storage tab query parameter handling
src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx	Refactors column generation and removes title prop
src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx	Removes dynamic title generation and link handling
src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx	Replaces TabProvider with direct Flex layout using StatsWrapper
src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss	Removes tab-specific styling
src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/useTenantNetworkQueryParams.ts	Removes network tab query parameter handling
src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/TopNodesBySkew.tsx	Removes dynamic title generation and simplifies component
src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/TopNodesByPing.tsx	Removes dynamic title generation and simplifies component
src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/TenantNetwork.tsx	Replaces TabProvider with direct Flex layout using StatsWrapper
src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx	Removes dynamic title generation and simplifies component
src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx	Wraps TopNodesByMemory with StatsWrapper for consistent layout
src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx	Applies global popover class to encryption indicator
src/containers/App/App.scss	Defines global popover styling
src/components/SpeedMultiMeter/SpeedMultiMeter.tsx	Applies global popover class
src/components/SpeedMultiMeter/SpeedMultiMeter.scss	Removes component-specific popover styling
src/components/HoverPopup/HoverPopup.tsx	Applies global popover class
src/components/HoverPopup/HoverPopup.scss	Removes component-specific popover styling
src/components/EntityStatus/EntityStatus.tsx	Applies global popover class
src/components/EntityStatus/EntityStatus.scss	Removes component-specific popover styling

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

artemmufazalov · 2025-08-01T10:13:59Z

src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/TenantNetwork.tsx

+                title={i18n('title_nodes-by-ping')}
+                allEntitiesLink={getTenantPath({
+                    ...query,
+                    [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,


It should lead to Network tab

artemmufazalov · 2025-08-01T10:14:06Z

src/containers/Tenant/Diagnostics/TenantOverview/TenantNetwork/TenantNetwork.tsx

+                title={i18n('title_nodes-by-skew')}
+                allEntitiesLink={getTenantPath({
+                    ...query,
+                    [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,


It should lead to Network tab

src/components/SpeedMultiMeter/SpeedMultiMeter.tsx

feat(TenantOverview): do not use tabs

e4fcc1d

Raubzeug requested review from artemmufazalov, astandrik and adameat as code owners August 1, 2025 10:09

astandrik requested a review from Copilot August 1, 2025 10:21

Copilot AI reviewed Aug 1, 2025

View reviewed changes

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx Show resolved Hide resolved

artemmufazalov requested changes Aug 1, 2025

View reviewed changes

cursor bot reviewed Aug 1, 2025

View reviewed changes

src/components/SpeedMultiMeter/SpeedMultiMeter.tsx Show resolved Hide resolved

fix: review

a75a585

Raubzeug requested a review from artemmufazalov August 1, 2025 11:22

artemmufazalov approved these changes Aug 1, 2025

View reviewed changes

Raubzeug added this pull request to the merge queue Aug 1, 2025

Merged via the queue into main with commit 4fb69ad Aug 1, 2025
5 checks passed

Raubzeug deleted the tenant-overview branch August 1, 2025 11:38

ydb-platform-bot mentioned this pull request Aug 1, 2025

chore(main): release 11.5.0 #2612

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(TenantOverview): do not use tabs #2655

feat(TenantOverview): do not use tabs #2655

Raubzeug commented Aug 1, 2025 •

edited by github-actions bot

Loading

Uh oh!

Raubzeug commented Aug 1, 2025

Uh oh!

claude bot commented Aug 1, 2025 •

edited

Loading

Uh oh!

astandrik commented Aug 1, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

artemmufazalov Aug 1, 2025

Uh oh!

artemmufazalov Aug 1, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat(TenantOverview): do not use tabs #2655

feat(TenantOverview): do not use tabs #2655

Conversation

Raubzeug commented Aug 1, 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

⏭️ Skipped Tests (2)

Bundle Size: 🔽

Uh oh!

Raubzeug commented Aug 1, 2025

Uh oh!

claude bot commented Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Todo List:

Code Review

✅ Strengths

⚠️ Areas for Attention

📝 Minor Suggestions

✅ Security & Best Practices

Summary

Uh oh!

astandrik commented Aug 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

artemmufazalov Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

artemmufazalov Aug 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Raubzeug commented Aug 1, 2025 •

edited by github-actions bot

Loading

claude bot commented Aug 1, 2025 •

edited

Loading