[Refactor][Web] Extract shared monitoring formatters, ranges, and chart primitives

[mhbdev]

Summary

The monitoring dashboard, resource monitoring tab, and Docker inventory independently implement overlapping metrics utilities and visualization code.

Confirmed duplication includes:

• three local formatBytes implementations, with different zero labels and decimal behavior;
• parallel safe-number coercion helpers (finite, numberValue);
• repeated range option definitions and range-to-ISO calculations;
• nearly identical Recharts ResponsiveContainer / AreaChart / axis / tooltip / area configuration;
• repeated chart empty states, stat-card shells, and time-label formatting;
• separate conventions for limits and sampling windows for the same historicalMetrics API.

The resource and server dashboards aggregate different data and should retain feature-specific transformation logic. The low-level formatting, time-range model, and chart presentation are nevertheless duplicated and already produce inconsistent output.

Reviewed against master at release commit 56c78fb6bbc3c3aacfafb4355288383f9946def5.

Proposed consolidation

1. Add shared metric formatters for bytes, percentages, durations/uptime, rates, and safe numeric coercion.
2. Define one typed time-range catalog and a resolver returning start time, display label, and recommended query/sample limits.
3. Extract a reusable monitoring area-chart primitive supporting one or more series, units, dimensions, empty copy, and accessible summaries.
4. Extract a small stat-card primitive if its repeated presentation remains stable after comparing current consumers.
5. Keep resource-specific container bucketing and server-specific host metric transformation in their feature modules.
6. Standardize timezone and label generation for one-hour, six-hour, 24-hour, and seven-day windows.
7. Document when byte values are binary units and when metrics are already supplied in provider-specific units.
8. Add unit tests for formatters and component tests for charts rather than testing the same behavior in every page.

Acceptance criteria

• Only one app utility formats byte quantities for dashboard metrics.
• Monitoring pages consume one shared typed range definition.
• Shared charts render consistent axes, tooltip behavior, empty state, sizing, and accessibility metadata.
• Resource and server monitoring retain their distinct aggregation semantics.
• Docker inventory uses the same byte formatter as monitoring views.
• Tests cover zero, negative, invalid, very large, and fractional metric values plus every supported time range.

Representative affected files

• apps/web/src/app/(dashboard)/monitoring/page.tsx
• apps/web/src/features/resources/components/monitoring-tab.tsx
• apps/web/src/app/(dashboard)/docker/page.tsx
• Potential shared destinations:
  • apps/web/src/lib/metrics.ts
  • apps/web/src/components/shared/monitoring-chart.tsx