Restructure: move clients/openrpc to client/ and clients/admin-ui to ui/
This commit is contained in:
Timur Gordon
197
ui/BREADCRUMB_NAVIGATION.md
Normal file
197
ui/BREADCRUMB_NAVIGATION.md
Normal file
@@ -0,0 +1,197 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user