tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-09-28 07:36:38 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
flvx/plans/046-monitor-nezha-redesign.md
T
sagitchu 6a3a9add08 feat: redesign monitor view
2026-03-18 17:21:39 +08:00

1.6 KiB
Raw Permalink Blame History

Monitor Nezha Redesign

Summary

Redesign the monitor overview to resemble Nezha dashboard. Phase 1 introduced ServerCard grid. Phase 2 hides node metrics from the overview and adds a detail view with charts and service monitor latency sparklines.

Objectives

  • Analyze monitor-view.tsx layout boundaries.
  • Create ServerCard utilizing Progress component.
  • Render metrics (CPU, RAM, Disk, System Load, Connections, Network speeds).
  • Implement robust real-time updates and seamless state linkage via existing hooks.
  • Adjust layout positioning for impact at top-of-page.
  • Hide node metrics from overview — click node card to enter detail view.
  • Detail view: back button + node header + realtime KPI cards.
  • Detail view: node metrics chart (CPU/Memory/Disk/Network/Load/Connections).
  • Detail view: tunnel traffic chart.
  • Detail view: service monitors rendered as latency sparkline charts (Nezha-style).
  • Service monitor cards include status dot, type chip, target, interval, and dropdown actions.

Technical Details

  • Phase 1: Injected a ServerCard inline component with progress bars and real-time metrics.
  • Phase 2: Added detailNodeId state for drill-down navigation. Grid view shows only summary bar + clickable server cards. Detail view shows KPI summary cards, node metrics chart (reusing existing recharts setup), tunnel traffic chart, and service monitors as a responsive grid of cards each containing a latency-over-time sparkline chart. Reduced file from 2108 to 1799 lines by consolidating the old overview card into the summary bar.

Status: Complete

Reference in New Issue View Git Blame Copy Permalink