[Open Source] #149 - dash.: Hệ thống giám sát máy chủ hiện đại với kiến trúc RxJS, Glassmorphism UI và cơ chế Real-time Data Streaming
Việc giám sát thông số máy chủ (CPU, RAM, Network, Storage) thường gắn liền với những giao diện khô khan hoặc các hệ thống phức tạp như Prometheus/Grafana. dash. (còn gọi là dashdot) phá vỡ định kiến đó bằng cách cung cấp một bảng điều khiển siêu nhẹ, tập trung vào tính thẩm mỹ cực cao (Glassmorphism) và khả năng phản hồi dữ liệu tức thì. Đây là giải pháp hoàn hảo cho các quản trị viên VPS hoặc Homelab muốn một cái nhìn tổng quan về "sức khỏe" hệ thống chỉ trong vài giây.
Dưới góc độ kỹ thuật, dash. là một bài học mẫu mực về việc sử dụng RxJS để quản lý luồng dữ liệu phần cứng và kỹ thuật Host Mounting để xuyên thủng rào cản cô lập của Docker.
Github: https://github.com/MauriceNino/dashdot
🛠️ 1. Nền tảng công nghệ: Monorepo hiệu năng cao
dash. được tổ chức dưới dạng một Monorepo hiện đại, tối ưu hóa sự phối hợp giữa frontend và backend:
- Hạ tầng điều phối (Turbo & Yarn Workspaces): Sử dụng Turborepo để quản lý build pipeline, đảm bảo tốc độ biên dịch nhanh và chia sẻ kiểu dữ liệu (Types) mượt mà giữa các gói
server,viewvàcommon. - Backend (Node.js & RxJS): Trái tim của backend không phải là Express mà là RxJS. dash. sử dụng lập trình phản ứng (Reactive Programming) để biến các thông số phần cứng thành những luồng dữ liệu (Streams) vô tận.
- Frontend (React 19 & Styled-components): Tận dụng phiên bản React mới nhất để tối ưu hóa hiệu suất render biểu đồ. Giao diện kính mờ (Glassmorphism) được hiện thực hóa qua sức mạnh của CSS-in-JS.
- Hardware Extraction (systeminformation): Sử dụng thư viện chuẩn công nghiệp để truy xuất dữ liệu từ tầng thấp của hệ điều hành (kernel/proc) một cách chính xác trên cả Linux, Windows và ARM.
🏗️ 2. Trụ cột kiến trúc: Real-time Streams và Docker Transparency
Kiến trúc của dash. tập trung vào việc giảm thiểu overhead truyền tải và vượt qua giới hạn container:
- Reactive Data Flow: Thay vì để client liên tục gửi yêu cầu HTTP (Polling), server sử dụng RxJS Observables để quan sát phần cứng. Khi có kết nối Socket.io, luồng dữ liệu này được "pipe" thẳng tới client, giúp giảm tải CPU cho cả hai đầu và đảm bảo dữ liệu hiển thị là thời gian thực.
- Host-to-Container Transparency: Đây là kỹ thuật then chốt cho các ứng dụng giám sát chạy trong Docker. dash. yêu cầu mount thư mục gốc của máy chủ vật lý (
/) vào/mnt/hostcủa container dưới dạng Read-only. Điều này cho phép backend đọc trực tiếp các file hệ thống như/proc/meminfohay/etc/os-releaseđể báo cáo thông số của máy thật thay vì của container. - Dynamic Storage Mapping: Hệ thống tích hợp logic ánh xạ thông minh giữa các thiết bị khối (Block devices) và kích thước tệp hệ thống, hỗ trợ hiển thị dung lượng chính xác ngay cả với các cấu hình lưu trữ phức tạp như LVM hay RAID.
🔄 3. Workflow: Vòng đời của một luồng dữ liệu phần cứng (Sequence Diagram)
Sơ đồ mô tả hành trình từ lúc CPU hoạt động đến khi biểu đồ trên trình duyệt thay đổi:
⚡ 4. Các kỹ thuật "Pro-level" trong mã nguồn
- NVIDIA GPU Orchestration: dash. cung cấp một bản Docker image riêng dựa trên Ubuntu, tích hợp sẵn driver và thư viện giao tiếp với NVIDIA Management Library (NVML), cho phép giám sát tải GPU và dung lượng VRAM thời gian thực.
- Speedtest Integration: Không chỉ giám sát băng thông hiện tại, hệ thống tích hợp sẵn
Ookla Speedtest CLIvànode-cronđể thực hiện các bài kiểm tra tốc độ mạng định kỳ, lưu trữ lịch sử để trực quan hóa sự ổn định của đường truyền. - Glassmorphism CSS Engineering: Sử dụng kỹ thuật
backdrop-filter: blur()kết hợp với các dải màu có độ trong suốt cao (alpha channel) và hiệu ứng viền sáng (border glow), tạo nên giao diện hiện đại bậc nhất trong giới công cụ giám sát. - Widget Embedding System: Hệ thống hỗ trợ tham số URL (ví dụ:
?graph=network&surface=transparent) cho phép tách lẻ từng biểu đồ thành các widget độc lập để nhúng vào các trang quản trị khác qua iframe.
⚖️ 5. So sánh chiến lược
| Tiêu chí | dash. | Netdata | Grafana + Prometheus |
|---|---|---|---|
| Mục tiêu | Tổng quan & Thẩm mỹ | Chi tiết kỹ thuật sâu | Phân tích dữ liệu lịch sử |
| Độ khó cài đặt | Cực dễ (1 dòng Docker) | Trung bình | Khó |
| Tài nguyên tiêu thụ | Rất thấp | Thấp | Trung bình/Cao |
| Giao diện | Glassmorphism (Tuyệt đẹp) | Dashboard truyền thống | Tùy biến cao |
| Cảnh báo (Alerting) | Không hỗ trợ | Có hỗ trợ mạnh | Rất mạnh |
✅ Kết luận: Tại sao dash. là lựa chọn số 1 cho Homelab?
dash. chứng minh rằng một công cụ kỹ thuật không nhất thiết phải có vẻ ngoài thô kệch. Bằng cách kết hợp tư duy lập trình phản ứng với RxJS và ngôn ngữ thiết kế Glassmorphism, dự án đã tạo ra một trải nghiệm giám sát máy chủ độc đáo — nơi dữ liệu trở nên hữu hình và đầy cảm hứng.
Đối với các kỹ sư Backend, nghiên cứu dash. mang lại giá trị về:
- Kỹ thuật xử lý Real-time Streams quy mô nhỏ.
- Cách truy xuất thông số phần cứng xuyên qua lớp ảo hóa của Docker.
- Tư duy xây dựng Monorepo nhất quán giữa Frontend và Backend.
All rights reserved
