feat: table page additions#3694
Merged
Merged
Conversation
astandrik
force-pushed
the
astandrik.3674
branch
from
March 26, 2026 15:35
866b585 to
04641b5
Compare
astandrik
marked this pull request as ready for review
March 26, 2026 16:57
astandrik
requested review from
Raubzeug,
adameat and
artemmufazalov
as code owners
March 26, 2026 16:57
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new Storage usage diagnostics tab for row table and column table pages in Tenant Diagnostics, backed by a new /viewer/storage_stats API call + RTK Query endpoint, and covered by unit + Playwright E2E tests (incl. screenshot snapshots).
Changes:
- Introduces
storageUsageApi.getStorageUsageand supporting data normalization/grouping helpers for per-group and per-media summaries. - Adds new Tenant Diagnostics UI components to render media summary cards + a fixed-width storage groups table with “show more”.
- Extends API/types/utilities:
ViewerAPI.getStorageStats, newStorageStats*types, sharednormalizeMediaType, and aResizeableDataTablepadding toggle.
Reviewed changes
Copilot reviewed 27 out of 33 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/suites/tenant/diagnostics/tabs/storageUsage.test.ts | New Playwright E2E coverage for the Storage usage tab (availability, rendering, multi-media, error, expanded state). |
| tests/suites/tenant/diagnostics/tabs/storageUsage.test.ts-snapshots/storage-usage-single-media-chromium-linux.png | New screenshot snapshot for single-media layout. |
| tests/suites/tenant/diagnostics/tabs/storageUsage.test.ts-snapshots/storage-usage-expanded-column-table-chromium-linux.png | New screenshot snapshot for expanded column-table layout (Chromium). |
| tests/suites/tenant/diagnostics/tabs/storageUsage.test.ts-snapshots/storage-usage-expanded-column-table-safari-linux.png | New screenshot snapshot for expanded column-table layout (Safari). |
| tests/suites/tenant/diagnostics/Diagnostics.ts | Adds StorageUsage to the test-side DiagnosticsTab enum. |
| src/utils/disks/normalizeMediaType.ts | New shared helper/constants to normalize media types (e.g. ROT → HDD, missing → Unknown). |
| src/types/api/storage.ts | Extends storage API typings (storage groups response fields, PDisk slot count, and new storage_stats request/response types). |
| src/store/reducers/tenant/constants.ts | Adds TENANT_DIAGNOSTICS_TABS_IDS.storageUsage. |
| src/store/reducers/storageUsage/test/storageUsage.test.ts | Unit tests for storage usage data-building helpers and error handling. |
| src/store/reducers/storageUsage/StorageUsage.ts | New RTK Query endpoint + core transformation logic to build rows and media sections from viewer + storage APIs. |
| src/store/reducers/cluster/utils.ts | Reuses normalizeMediaType for cluster storage type normalization. |
| src/services/api/viewer.ts | Adds ViewerAPI.getStorageStats() mapping to /viewer/storage_stats. |
| src/containers/Tenant/Diagnostics/useDiagnosticsPages.ts | Wires capability gating (useStorageGroupsHandlerAvailable) into diagnostics page selection. |
| src/containers/Tenant/Diagnostics/tabsContent.tsx | Refactors tab rendering to a renderer map and adds storageUsage tab renderer. |
| src/containers/Tenant/Diagnostics/i18n/en.json | Adds English strings for the new tab and its UI text. |
| src/containers/Tenant/Diagnostics/test/DiagnosticsPages.test.ts | Adds unit tests verifying storage usage tab gating by capability. |
| src/containers/Tenant/Diagnostics/TenantOverview/StatsWrapper/StatsWrapper.tsx | Widens title prop type to React.ReactNode (to allow null). |
| src/containers/Tenant/Diagnostics/StorageUsage/storageUsageFormatters.ts | New formatting helpers and shared STORAGE_USAGE_INITIAL_ROWS_COUNT. |
| src/containers/Tenant/Diagnostics/StorageUsage/StorageUsageTable.tsx | New fixed-width storage groups table with share bar + “show more”. |
| src/containers/Tenant/Diagnostics/StorageUsage/StorageUsageTable.scss | Styling for the new storage usage table. |
| src/containers/Tenant/Diagnostics/StorageUsage/StorageUsageSections.tsx | Renders per-media sections (and empty state) with localized “Unknown” label. |
| src/containers/Tenant/Diagnostics/StorageUsage/StorageUsageSections.scss | Styling for media sections and empty state. |
| src/containers/Tenant/Diagnostics/StorageUsage/StorageUsage.tsx | Top-level tab component orchestrating overview + storage usage queries and pagination state. |
| src/containers/Tenant/Diagnostics/StorageUsage/StorageUsage.scss | Sets max-width/layout for storage usage content. |
| src/containers/Tenant/Diagnostics/StorageUsage/MediaSectionSummary.tsx | Media summary “metric cards” component (data size, disk usage, overhead, group count). |
| src/containers/Tenant/Diagnostics/StorageUsage/MediaSectionSummary.scss | Styling for the media summary cards layout. |
| src/containers/Tenant/Diagnostics/DiagnosticsPages.ts | Adds storage usage tab to table/column-table pages and filters it by capability. |
| src/containers/Cluster/ClusterOverview/components/ClusterMetricsStorage.tsx | Reuses normalizeMediaType when rendering storage metrics by type. |
| src/components/ResizeableDataTable/ResizeableDataTable.tsx | Adds reserveResizePadding prop (default true) and applies a BEM modifier. |
| src/components/ResizeableDataTable/ResizeableDataTable.scss | Moves resize gutter padding behind a modifier class. |
astandrik
force-pushed
the
astandrik.3674
branch
from
April 1, 2026 14:20
501ff57 to
28e3f01
Compare
Collaborator
Author
|
@Raubzeug ready for code review |
Contributor
astandrik
force-pushed
the
astandrik.3674
branch
2 times, most recently
from
April 3, 2026 15:32
0bc13f5 to
fefce7e
Compare
Collaborator
Author
|
@Raubzeug fixed |
Raubzeug
requested changes
Apr 7, 2026
| padding-right: 20px; | ||
| &_reserve-resize-padding { | ||
| // padding for easier resize of the last column | ||
| padding-right: 20px; |
| }); | ||
| }, [path]); | ||
|
|
||
| if (loading) { |
|
|
||
| return ( | ||
| <Flex alignItems="center" gap="2" className={b('share-cell')}> | ||
| <div |
Contributor
There was a problem hiding this comment.
is it possible to use Progress from uikit?
| const newStorageViewEnabled = useNewStorageViewEnabled(); | ||
| const storageGroupsAvailable = useStorageGroupsHandlerAvailable(); | ||
| const storageStatsAvailable = useStorageStatsAvailable(); | ||
| const hasStorageUsage = |
Contributor
There was a problem hiding this comment.
could you please flatten this logic? A bit hard to understand it...
astandrik
force-pushed
the
astandrik.3674
branch
from
April 7, 2026 10:22
acbe7a9 to
94918e6
Compare
Collaborator
Author
|
@Raubzeug code fixed - stand redeployed |
Raubzeug
approved these changes
Apr 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Closes #3674
Stand
CI Results
Test Status:⚠️ FLAKY
📊 Full Report
Test Changes Summary ✨8
✨ New Tests (8)
Bundle Size: 🔺
Current: 63.34 MB | Main: 63.27 MB
Diff: +0.07 MB (0.11%)
ℹ️ CI Information