fix: write network info for tenant same as for cluster

[astandrik]

Closes #2880

Stand

Greptile Summary

Updated On: 2025-09-12 16:25:55 UTC

This PR addresses issue #2880 by standardizing network information display between tenant and cluster views through a comprehensive architectural refactoring. The changes transform the MetricsTabs system from using composite wrapper components to individual modular tab components, creating better maintainability and consistency.

Key Architectural Changes:

1. Component Modularization: Replaced composite wrapper components (CommonMetricsTabs, DedicatedMetricsTabs, ServerlessPlaceholderTabs) with individual tab components (CpuTab, MemoryTab, NetworkTab, StorageTab, PlaceholderTab) that can be composed directly.

2. Network Data Structure Simplification: Changed from passing complex networkStats arrays to simple primitive values (networkUtilization and networkThroughput as numbers), aligning with how cluster network metrics are handled.

3. TabCard Component Splitting: Decomposed the monolithic TabCard component into three focused components:

   • UsageTabCard: For value/limit metrics with doughnut charts
   • UtilizationTabCard: For percentage-based metrics
   • ServerlessTabCard: For placeholder content in serverless tenants

4. Data Layer Updates: Modified calculateTenantMetrics utility to expose raw network values instead of computed composite statistics, giving UI components more flexibility in how they display network information.

The refactoring maintains all existing functionality while creating a more maintainable codebase. Network tabs now use the same data patterns as cluster views, with proper fallbacks to placeholder tabs when network data is unavailable. The new architecture follows React best practices with proper memoization, clean prop interfaces, and separation of concerns between different metric types.

Important Files Changed

Changed Files

Filename	Score	Overview
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.tsx	5/5	Major refactoring from wrapper components to direct individual tab composition with new network prop structure
src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx	5/5	Updated to pass separate networkUtilization and networkThroughput values instead of combined networkStats
src/store/reducers/tenants/utils.ts	5/5	Modified to expose raw network values instead of computed composite statistics
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/CpuTab.tsx	5/5	New modular CPU tab component with conditional rendering for serverless vs dedicated tenants
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/NetworkTab.tsx	5/5	New network tab component with robust validation and proper fallback to placeholder
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/MemoryTab.tsx	4/5	New memory tab component, but uses formatStorageLegend which may be semantically incorrect
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/StorageTab.tsx	5/5	New storage tab component with dynamic text based on storage groups count
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/components/PlaceholderTab.tsx	5/5	New placeholder tab component for maintaining layout consistency in serverless tenants
src/containers/Tenant/Diagnostics/TenantOverview/TabCard/UsageTabCard.tsx	5/5	New focused component for value/limit usage metrics with doughnut charts
src/containers/Tenant/Diagnostics/TenantOverview/TabCard/UtilizationTabCard.tsx	5/5	New component for percentage-based utilization metrics
src/containers/Tenant/Diagnostics/TenantOverview/TabCard/ServerlessTabCard.tsx	5/5	New simplified card component for serverless tenant placeholder content
src/containers/Tenant/Diagnostics/TenantOverview/TabCard/TabCard.tsx	5/5	Deleted monolithic component, replaced by three focused card components
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/CommonMetricsTabs.tsx	5/5	Deleted wrapper component, functionality moved to individual tab components
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/DedicatedMetricsTabs.tsx	5/5	Deleted wrapper component, functionality consolidated into main MetricsTabs
src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/ServerlessPlaceholderTabs.tsx	5/5	Deleted wrapper component, replaced by individual PlaceholderTab usage

Confidence score: 4/5

• This PR is safe to merge with well-architected changes and comprehensive refactoring that improves maintainability
• Score reflects the large scope of changes but consistent architectural patterns and thorough implementation
• Pay attention to the MemoryTab component which uses formatStorageLegend for memory metrics - consider renaming the formatter for better semantic clarity

Sequence Diagram

sequenceDiagram
    participant User
    participant TenantOverview
    participant tenantApi
    participant calculateTenantMetrics
    participant MetricsTabs
    participant NetworkTab
    participant UtilizationTabCard

    User->>TenantOverview: "Navigate to tenant overview"
    TenantOverview->>tenantApi: "useGetTenantInfoQuery(tenantName, clusterName)"
    tenantApi-->>TenantOverview: "Return tenant data with NetworkUtilization, NetworkWriteThroughput"
    TenantOverview->>calculateTenantMetrics: "calculateTenantMetrics(tenantData)"
    calculateTenantMetrics-->>TenantOverview: "Return networkUtilization, networkThroughput"
    TenantOverview->>MetricsTabs: "Render with networkUtilization, networkThroughput props"
    MetricsTabs->>MetricsTabs: "renderNetworkTab() - check showNetworkUtilization setting"
    alt showNetworkUtilization enabled and not serverless
        MetricsTabs->>NetworkTab: "Render with networkUtilization, networkThroughput"
        NetworkTab->>NetworkTab: "Check if networkUtilization and networkThroughput are valid"
        alt Valid network data
            NetworkTab->>UtilizationTabCard: "Render with fillPercent and legendText"
            UtilizationTabCard-->>User: "Display network utilization card with doughnut chart"
        else Invalid network data
            NetworkTab-->>User: "Display PlaceholderTab"
        end
    else showNetworkUtilization disabled or serverless
        MetricsTabs-->>User: "No network tab rendered"
    end

Loading

Context used:

Style Guide - description of repository for agents (link)

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
378	373	0	3	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

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

Bundle Size: ✅

Current: 85.43 MB | Main: 85.43 MB
Diff: +4.20 KB (0.00%)

✅ Bundle size unchanged.

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

[greptile-apps]

_{15 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}