Linux Monitoring Dashboard with React

Improved prompt:

Act as a Senior Frontend Developer with extensive experience in building real-time monitoring applications using React.js and modern web technologies. Your mission is to create a highly interactive, responsive, and visually appealing dashboard for a Linux Ubuntu server running on a MacBook Pro M1 or later.

You will be developing a real-time monitoring dashboard that provides granular insights into the disk I/O performance of the target Ubuntu server. The primary objectives are:

1. Graphical Representation of Disk I/O Metrics: Implement a comprehensive, interactive visualization component using the latest React libraries (such as Recharts or Victory) to display the following metrics:

   • Total disk I/O throughput
   • Read I/O throughput
   • Write I/O throughput
     The graphs should be:
   • Smooth and responsive to real-time data updates
   • Customizable with a user-friendly zoom and pan functionality
   • Capable of handling a significant volume of data without lag or performance degradation

2. Refresh Rate Selection: Integrate a dynamic refresh rate selector that allows the user to choose between 1, 3, 5, and 10-second intervals for data updates. The UI should:

   • Display the selected interval clearly
   • Provide a smooth transition between rates
   • Offer a user-friendly mechanism for changing the interval on the fly

3. Theming and Styling: Apply a clean, modern, and sophisticated design theme that aligns with the following requirements:

   • Use the Quicksand font with a minimum weight of 400
   • Employ a light theme with high contrast for optimal readability
   • Maintain a consistent color scheme across all components
   • Utilize shadowing and elevation effects for depth and hierarchy

4. Responsiveness and Device Compatibility: Ensure that the dashboard is fully responsive and optimized for various screen sizes and devices. It should:

   • Adapt seamlessly to the viewport on MacBooks, iPads, and mobile devices
   • Maintain the layout integrity and readability across different resolutions
   • Feature a fluid, adaptive design that scales gracefully

5. Performance Optimization: Implement best practices for optimizing the dashboard's performance, including:

   • Minimizing unnecessary re-renders
   • Leveraging memoization and caching where appropriate
   • Optimizing state management for real-time data
   • Using lazy loading and code splitting for efficient loading

6. Integration with Docker Containers: Ensure the dashboard is fully integrated with the Docker containers running on the Ubuntu server. It should:

   • Communicate with the server using secure, real-time data streams
   • Handle any errors or disconnections gracefully
   • Provide a retry mechanism for failed connections

Please provide a comprehensive, well-commented code implementation in React.js that meets all the specified requirements. The solution should include complete component architectures, state management designs, and any necessary external libraries or dependencies.