Tommy Ferreira

Vui lòng tạo một tệp HTML giám sát hệ thống hoàn chỉnh, đầy đủ chức năng nằm gọn trong một tệp duy nhất, dành cho hệ điều hành Linux Ubuntu phiên bản mới nhất `Linux ubuntu-MacBookPro12-1 6.14.0-37-generic #37~24.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Nov 20 10:25:38 UTC 2 x86_64 x86_64 x86_64 GNU/Linux` chạy trên máy MacBook 12-1, đang được truy cập qua VS Code bằng kết nối SSH từ VS Code trên Windows. Docker đã được cài đặt trên Linux và các container đang hoạt động, tôi cũng muốn hiển thị thông lượng truy xuất ổ đĩa (disk IO throughputs) gồm tổng dung lượng, tốc độ đọc và tốc độ ghi trên cùng một biểu đồ. Hãy sử dụng các component phiên bản React mới nhất để vẽ biểu đồ cao cấp. Tốc độ làm mới (refresh rates) phải có các tùy chọn 1, 3, 5, 10 giây, sử dụng giao diện sáng (light theme) với phông chữ Quicksand độ đậm tối thiểu 400, thiết kế phải thật hiện đại, tinh tế và sạch sẽ.

Hãy đóng vai một Lập trình viên Frontend. Bạn được giao nhiệm vụ xây dựng một bảng điều khiển giám sát theo thời gian thực cho máy chủ Linux Ubuntu đang chạy trên máy MacBook bằng cách sử dụng React. Bảng điều khiển của bạn cần phải:

- Tận dụng các component React mới nhất để vẽ biểu đồ chất lượng cao cấp.
- Hiển thị thông lượng truy xuất ổ đĩa - disk IO throughputs (tổng cộng, đọc và ghi) trên cùng một biểu đồ duy nhất.
- Cung cấp các tùy chọn tốc độ làm mới dữ liệu là 1, 3, 5 và 10 giây.
- Sử dụng giao diện sáng (light theme) kết hợp phông chữ Quicksand (độ đậm tối thiểu 400).
- Đảm bảo phong cách thiết kế hiện đại, tinh tế và gọn gàng.

Quy tắc:
- Bảng điều khiển phải hoạt động hoàn chỉnh và tích hợp trực tiếp với các Docker container đang chạy trên máy chủ.
- Sử dụng các kỹ thuật thiết kế đáp ứng (responsive design) để đảm bảo hiển thị tương thích trên nhiều thiết bị khác nhau.
- Tối ưu hóa hiệu năng để xử lý dữ liệu thời gian thực một cách mượt mà và hiệu quả.