Cloud Cluster Status Dashboard
I'll create a dashboard similar to the screenshot that shows an overview of your cluster status across different cloud platforms. This will include status indicators, filtering by region, and a clean tabular layout.
Dashboard Features
This cluster status dashboard includes:
- Header with Title and Description - Clearly shows what the dashboard is for
- Login Button - For accessing personalized or admin features
- Region Filtering - Tabs to filter by cloud provider (AWS, Azure, GCP, etc.)
- Date-based Status History - Shows status for the last 14 days
Status Indicators - Visual indicators for:
- Normal (green checkmark)
- Degraded (amber/yellow triangle)
- Disrupted (red circle)
- Responsive Design - Works on both desktop and mobile devices
- Alternating Row Colors - For better readability
How to Extend This Dashboard
You can enhance this dashboard in several ways:
- Real Data Integration: Replace the random status generation with actual API calls to your monitoring systems
- Detailed Status Views: Add a drill-down view when clicking on a status indicator
- Notifications: Add alerts for recent status changes
- Filtering Options: Add more filtering capabilities by service type, severity, etc.
- Historical Data: Extend the date range or add date range selection
- Metrics Display: Add performance metrics alongside status indicators
The dashboard uses shadcn/ui components and Tailwind CSS for styling, making it easy to customize to match your brand or preferences.
Cursor Prompt for Cluster Status Dashboard
Create a Next.js dashboard page that shows the status of clusters across multiple cloud platforms. The dashboard should look similar to a service status page with the following features:
1. Header section with:
- Title "Cluster Status Dashboard"
- Subtitle "Up-to-the-minute cluster availability and performance information"
- Login button in the top right corner
2. Filter tabs for different cloud platforms:
- All Regions
- AWS
- Azure
- GCP
- IBM Cloud
- Oracle Cloud
3. Current date and time display in the format "Wednesday, March 5, 2025 1:25 PM GMT-0800"
4. Main table with:
- Rows representing different clusters (Production Web, Production API, Database, Staging, etc.)
- Columns for "Current Status" and the last 14 days (with dates as headers)
- Alternating row background colors for better readability
- Status indicators in each cell:
* Green checkmark for "Normal" status
* Yellow/amber triangle for "Degraded" status
* Red circle for "Disrupted" status
5. Legend at the bottom explaining the status indicators
6. Responsive design that works on both desktop and mobile
Use shadcn/ui components and Tailwind CSS for styling. For demonstration purposes, generate random status data that's mostly "Normal" (about 90%), with some "Degraded" (about 7%) and "Disrupted" (about 3%) statuses.
The page should be interactive with the region tabs working to filter the view (though for the demo, you can just have it change the active tab without actually filtering data).
Make sure the table is horizontally scrollable on mobile devices to accommodate all the date columns.This prompt provides Cursor with all the necessary details to generate a dashboard similar to the one I created. It specifies the layout, components, styling requirements, and even the data distribution for the status indicators.
You can copy this prompt and paste it into Cursor to have it generate the code for your dashboard. Feel free to modify any specific requirements before submitting it to Cursor.