Skip to content

feat: table page additions#3694

Merged
astandrik merged 6 commits into
mainfrom
astandrik.3674
Apr 7, 2026
Merged

feat: table page additions#3694
astandrik merged 6 commits into
mainfrom
astandrik.3674

Conversation

@astandrik

@astandrik astandrik commented Mar 26, 2026

Copy link
Copy Markdown
Collaborator

Closes #3674

Stand

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total Passed Failed Flaky Skipped
606 602 0 1 3
Test Changes Summary ✨8

✨ New Tests (8)

  1. Storage usage tab is available for row tables and renders the page (tenant/diagnostics/tabs/storageUsage.test.ts)
  2. Storage usage tab is hidden when storage groups handler is unavailable (tenant/diagnostics/tabs/storageUsage.test.ts)
  3. Storage usage renders single-media layout (tenant/diagnostics/tabs/storageUsage.test.ts)
  4. Storage usage renders multiple media sections (tenant/diagnostics/tabs/storageUsage.test.ts)
  5. Storage usage renders per-media summary metrics from storage stats media data (tenant/diagnostics/tabs/storageUsage.test.ts)
  6. Storage usage shows zero data size when table stats report 0 bytes (tenant/diagnostics/tabs/storageUsage.test.ts)
  7. Storage usage shows response error when storage groups request fails (tenant/diagnostics/tabs/storageUsage.test.ts)
  8. Storage usage table renders expanded state (tenant/diagnostics/tabs/storageUsage.test.ts)

Bundle Size: 🔺

Current: 63.34 MB | Main: 63.27 MB
Diff: +0.07 MB (0.11%)

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

Comment thread src/containers/Tenant/Diagnostics/StorageUsage/StorageUsage.tsx
@astandrik
astandrik marked this pull request as ready for review March 26, 2026 16:57
Copilot AI review requested due to automatic review settings March 26, 2026 16:57

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.getStorageUsage and 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, new StorageStats* types, shared normalizeMediaType, and a ResizeableDataTable padding 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.

Comment thread src/containers/Tenant/Diagnostics/i18n/en.json Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 32 out of 38 changed files in this pull request and generated 4 comments.

Comment thread tests/suites/tenant/diagnostics/Diagnostics.ts
Comment thread src/types/api/storage.ts
@astandrik

Copy link
Copy Markdown
Collaborator Author

@Raubzeug ready for code review

@Raubzeug

Raubzeug commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

Is this scrollbar essential?
Screenshot 2026-04-02 at 17 57 14

@astandrik
astandrik force-pushed the astandrik.3674 branch 2 times, most recently from 0bc13f5 to fefce7e Compare April 3, 2026 15:32
@astandrik

Copy link
Copy Markdown
Collaborator Author

@Raubzeug fixed

padding-right: 20px;
&_reserve-resize-padding {
// padding for easier resize of the last column
padding-right: 20px;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please use vars

});
}, [path]);

if (loading) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe use LoaderWrapper?


return (
<Flex alignItems="center" gap="2" className={b('share-cell')}>
<div

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it possible to use Progress from uikit?

const newStorageViewEnabled = useNewStorageViewEnabled();
const storageGroupsAvailable = useStorageGroupsHandlerAvailable();
const storageStatsAvailable = useStorageStatsAvailable();
const hasStorageUsage =

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you please flatten this logic? A bit hard to understand it...

@astandrik

Copy link
Copy Markdown
Collaborator Author

@Raubzeug code fixed - stand redeployed

@astandrik
astandrik requested a review from Raubzeug April 7, 2026 10:59
@astandrik
astandrik added this pull request to the merge queue Apr 7, 2026
Merged via the queue into main with commit 015fb38 Apr 7, 2026
20 checks passed
@astandrik
astandrik deleted the astandrik.3674 branch April 7, 2026 11:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: table page additions

3 participants