198 lines
7.7 KiB
Markdown
198 lines
7.7 KiB
Markdown
# 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:
|
|
```rust
|
|
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
|
|
1. Click any row in the jobs table
|
|
2. Sidebar updates to show job metadata
|
|
3. Main content splits into Payload and Logs islands
|
|
4. 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
|
|
|
|
1. **Better Information Architecture**: Job details in sidebar, code in main area, status below
|
|
2. **Side-by-Side Comparison**: View payload and logs simultaneously in top row
|
|
3. **Prominent Status Display**: Full-width status pane with visual indicators
|
|
4. **Consistent Navigation**: Back button provides clear exit path
|
|
5. **Focused View**: Each island has a single purpose
|
|
6. **Visual Feedback**: Color-coded status indicators with emoji icons
|
|
7. **Quick Actions**: View Output button readily accessible in status pane
|
|
8. **Responsive**: Adapts to different screen sizes
|
|
9. **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
|