7.7 KiB
7.7 KiB
Breadcrumb Navigation with Dynamic Sidebar and Content Islands
Overview
Implemented a breadcrumb-style navigation system where clicking on a job transitions the UI to show:
- Sidebar: Job details with metadata and actions
- Main Content: Two side-by-side islands showing Payload (left) and Logs (right)
Architecture
State Management
The UI uses ContentView enum to track the current view:
enum ContentView {
JobsList, // Default view showing all jobs
JobDetail(String), // Job detail view with job_id
}
Layout Structure
Jobs List View
┌─────────────────┬──────────────────────────────┐
│ Sidebar │ Main Content │
│ │ │
│ [Runners/Keys] │ Jobs Table │
│ Toggle │ - Filter │
│ │ - Sort │
│ Runner/Key │ - Actions │
│ Cards │ │
│ │ │
└─────────────────┴──────────────────────────────┘
Job Detail View
┌─────────────────┬──────────────────────────────┐
│ Sidebar │ Main Content │
│ │ │
│ [← Back] │ ┌────────┬────────┐ │
│ │ │Payload │ Logs │ │
│ Job Details │ │ │ │ │
│ - Status │ │ (code) │ (code) │ │
│ - Job ID │ │ │ │ │
│ - Runner │ └────────┴────────┘ │
│ - Timeout │ │
│ - Created │ ┌──────────────────┐ │
│ │ │ Output & Status │ │
│ [▶ Run Job] │ │ [Status Badge] │ │
│ [🗑 Delete] │ │ [View Output] │ │
│ │ │ │ │
│ │ │ ⏳ Running... │ │
│ │ │ or ✅ Complete │ │
│ │ │ or ❌ Failed │ │
│ │ └──────────────────┘ │
└─────────────────┴──────────────────────────────┘
Implementation Details
1. Dynamic Sidebar (view_dashboard)
The sidebar content changes based on ContentView:
- JobsList: Shows Runners/Keys toggle with respective cards
- JobDetail: Shows job metadata and action buttons
2. Job Detail Sidebar (view_job_detail_sidebar)
Displays:
- Back button (← arrow) to return to jobs list
- Job metadata in labeled rows:
- Status (with colored badge)
- Job ID (monospace)
- Runner name
- Timeout duration
- Created timestamp
- Action buttons:
- Run Job (primary button)
- Delete Job (danger button)
3. Job Detail Content (view_job_detail_content)
Three-pane layout with top row and bottom row:
Top Row (Two equal-width islands side-by-side):
- Payload Island (Left):
- Header: "Payload"
- Content: Code block with job payload
- Logs Island (Right):
- Header: "Logs"
- Content: Code block with job logs or loading spinner
Bottom Row (Full-width island):
- Output & Status Island:
- Header: "Output & Status" with status badge and "View Output" button
- Content: Dynamic status display based on job state:
- Running (⏳): Shows "Job is running..." message
- Completed (✅): Shows "Job completed successfully" with prompt to view output
- Failed (❌): Shows "Job failed" error message
- Idle (⏸): Shows "Job not started" with instruction to run
4. Navigation Flow
Jobs List → Click Job Row → Job Detail View
↓
Click Back Button
↓
Jobs List
CSS Styling
Key Classes
.job-detail-content: Flex column layout for three-pane structure.detail-top-row: Grid layout for two islands (1fr 1fr).detail-bottom-row: Full-width container for output/status.detail-island: Container for payload/logs/output with header and content.island-header: Title bar for each island.island-content: Scrollable content area.code-block: Monospace code display.job-detail-sidebar: Vertical layout for job metadata.detail-row: Label-value pairs for job info.status-display: Status indicator with icon and text.btn-back: Back arrow button
Responsive Design
- Desktop (>1200px): Top row shows two islands side-by-side, bottom row full-width
- Mobile (<1200px): All islands stack vertically
Features
Breadcrumb Navigation
- Clear visual hierarchy with back button
- Sidebar transforms to show contextual information
- Main content splits into focused islands
Job Details Display
- Clean, organized metadata presentation
- Status badges with color coding
- Monospace formatting for technical data (IDs, code)
Code Display
- Syntax-friendly monospace font
- Proper line wrapping
- Scrollable for long content
- Dark theme optimized
Status & Output Pane
- Visual Status Indicators: Large emoji icons (⏳, ✅, ❌, ⏸) with colored borders
- Real-time Status: Shows current job state (running, completed, failed, idle)
- Quick Actions: View Output button in header (disabled for queued jobs)
- Contextual Messages: Clear instructions based on job state
- Color-coded Borders:
- Orange for running jobs
- Green for completed jobs
- Red for failed jobs
- Gray for idle jobs
Actions
- Contextual actions in sidebar (Run, Delete)
- View Output button in status pane header
- Always visible without scrolling
- Clear visual hierarchy
Usage
Viewing Job Details
- Click any row in the jobs table
- Sidebar updates to show job metadata
- Main content splits into Payload and Logs islands
- Click back arrow to return to jobs list
Running/Deleting Jobs
- Actions are available in the sidebar
- Run Job: Queues the job for execution
- Delete Job: Removes the job from the system
Benefits
- Better Information Architecture: Job details in sidebar, code in main area, status below
- Side-by-Side Comparison: View payload and logs simultaneously in top row
- Prominent Status Display: Full-width status pane with visual indicators
- Consistent Navigation: Back button provides clear exit path
- Focused View: Each island has a single purpose
- Visual Feedback: Color-coded status indicators with emoji icons
- Quick Actions: View Output button readily accessible in status pane
- Responsive: Adapts to different screen sizes
- Reusable Pattern: Can be extended to other detail views
Future Enhancements
Potential improvements:
- ✅ Job output/status pane (implemented as third pane)
- Show job execution history timeline
- Add real-time log streaming with auto-refresh
- Include job dependencies visualization
- Add breadcrumb trail in header (Jobs > Job-123)
- Add inline output display (instead of modal)
- Show job metrics (execution time, resource usage)
- Add job re-run with modified parameters