Skip to main content
Prompts React Disk IO Monitoring Dashboard Creator

model coding user risk: low

React Disk IO Monitoring Dashboard Creator

Act as a Frontend Developer to create a real-time monitoring dashboard using React for a Linux Ubuntu server on a MacBook, displaying disk IO throughputs in a single graph with ref…

PROMPT 

Act as a Frontend Developer. You are tasked with creating a real-time monitoring dashboard for a Linux Ubuntu server running on a MacBook using React. Your dashboard should:

- Utilize the latest React components for premium graphing.
- Display disk IO throughputs (total, read, and write) in a single graph.
- Offer refresh rate options of 1, 3, 5, and 10 seconds.
- Feature a light theme with the Quicksand font (400 weight minimum).
- Ensure a modern, sophisticated, and clean design.

Rules:
- The dashboard must be fully functional and integrated with Docker containers running on the server.
- Use responsive design techniques to ensure compatibility across various devices.
- Optimize for performance to handle real-time data efficiently.

ROLES & RULES

Role assignments

  • Act as a Frontend Developer.
  1. The dashboard must be fully functional and integrated with Docker containers running on the server.
  2. Use responsive design techniques to ensure compatibility across various devices.
  3. Optimize for performance to handle real-time data efficiently.

EXPECTED OUTPUT

Format
code
Constraints
  • fully functional and integrated with Docker containers
  • use latest React components for graphing
  • display disk IO throughputs in single graph
  • refresh rates 1,3,5,10 seconds
  • light theme with Quicksand font 400 weight min
  • modern sophisticated clean design
  • responsive design
  • optimized for performance

SUCCESS CRITERIA

  • Utilize the latest React components for premium graphing.
  • Display disk IO throughputs (total, read, and write) in a single graph.
  • Offer refresh rate options of 1, 3, 5, and 10 seconds.
  • Feature a light theme with the Quicksand font (400 weight minimum).
  • Ensure a modern, sophisticated, and clean design.

FAILURE MODES

  • May fail to integrate properly with Docker containers.
  • Might not handle real-time data updates efficiently.
  • Could overlook responsive design for various devices.

CAVEATS

Dependencies
  • Linux Ubuntu server running on a MacBook.
  • Docker containers running on the server.
Missing context
  • Data source and API endpoints for disk IO throughputs (total, read, write).
  • Server connection details (IP, ports, authentication).
  • Specific Docker container setup or services providing metrics.
  • Output format (full app code, component structure, deployment instructions).
  • Additional dashboard features or layout specifications.
Ambiguities
  • 'Utilize the latest React components for premium graphing' does not specify which library (e.g., Recharts, Nivo, Chart.js).
  • Unclear how to fetch real-time disk IO data from the Ubuntu server (e.g., via API, SSH, WebSockets).
  • 'Integrated with Docker containers running on the server' lacks details on container roles, APIs, or connection method.
  • 'Linux Ubuntu server running on a MacBook' is ambiguous: local VM, remote server, or Docker on Mac?

QUALITY

OVERALL
0.60
CLARITY
0.85
SPECIFICITY
0.65
REUSABILITY
0.25
COMPLETENESS
0.55

IMPROVEMENT SUGGESTIONS

  • Specify a graphing library: 'Use Recharts for graphing disk IO throughputs.'
  • Add data fetching instructions: 'Fetch data via WebSocket from a backend API at /api/disk-io exposing total, read, write metrics.'
  • Make reusable with placeholders: 'Replace {SERVER_IP} and {API_ENDPOINT} with actual values.'
  • Clarify integration: 'Assume Docker containers expose metrics via Prometheus or a REST API.'
  • Define output: 'Provide complete, runnable React app code with setup instructions.'

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL