Restructure: move clients/openrpc to client/ and clients/admin-ui to ui/
This commit is contained in:
Timur Gordon
145
ui/IMPROVEMENTS_SUMMARY.md
Normal file
145
ui/IMPROVEMENTS_SUMMARY.md
Normal file
@@ -0,0 +1,145 @@
|
||||
# Job Detail View Improvements
|
||||
|
||||
## Summary of Changes
|
||||
|
||||
Implemented several UX improvements to simplify and unify the job detail interface:
|
||||
|
||||
### 1. Auto-Display Job Output ✅
|
||||
- **Removed**: "View Output" button
|
||||
- **Added**: Automatic output loading when viewing job details
|
||||
- Output displays automatically in the bottom pane when available
|
||||
- No manual action needed - output appears as soon as job completes
|
||||
|
||||
### 2. Enhanced Job Sidebar ✅
|
||||
- **Added**: Signatures count display
|
||||
- Shows "X signature(s)" if present
|
||||
- Shows "None" if no signatures
|
||||
- **Added**: Timeout display (already present, kept for completeness)
|
||||
- **Added**: Edit Job button (✏️)
|
||||
- Sidebar now shows: Status, Job ID, Runner, Timeout, Signatures, Created
|
||||
|
||||
### 3. Inline Job Editing ✅
|
||||
- **Removed**: Separate job creation modal
|
||||
- **Added**: Inline editing in job detail view
|
||||
- Click "✏️ Edit Job" button to enter edit mode
|
||||
- **Edit mode transforms the view**:
|
||||
- **Payload island**: Becomes editable textarea
|
||||
- **Logs island**: Remains read-only (shows execution logs)
|
||||
- **Bottom pane**: Shows edit form with Runner and Timeout inputs
|
||||
- **Actions**: Cancel or Save Changes buttons
|
||||
- Unified look - uses same layout as viewing
|
||||
|
||||
### 4. Simplified Layout
|
||||
- Same three-pane structure for viewing and editing
|
||||
- No modal overlays for job management
|
||||
- Consistent visual language throughout
|
||||
- Edit mode is clearly indicated by header change
|
||||
|
||||
## New User Flow
|
||||
|
||||
### Viewing a Job
|
||||
```
|
||||
1. Click job in table
|
||||
2. View opens with:
|
||||
- Sidebar: Job metadata (status, ID, runner, timeout, signatures, created)
|
||||
- Top-left: Payload (read-only code)
|
||||
- Top-right: Logs (auto-loaded)
|
||||
- Bottom: Output (auto-loaded when available) or status message
|
||||
```
|
||||
|
||||
### Editing a Job
|
||||
```
|
||||
1. Click "✏️ Edit Job" in sidebar
|
||||
2. View transforms:
|
||||
- Sidebar: Unchanged (shows current job info)
|
||||
- Top-left: Payload becomes editable textarea
|
||||
- Top-right: Logs remain visible
|
||||
- Bottom: Edit form with Runner and Timeout inputs
|
||||
3. Make changes
|
||||
4. Click "💾 Save Changes" or "Cancel"
|
||||
5. View returns to normal mode with updated data
|
||||
```
|
||||
|
||||
### Running a Job
|
||||
```
|
||||
1. Click "▶ Run Job" in sidebar
|
||||
2. Bottom pane shows "⏳ Job is running..."
|
||||
3. When complete, output auto-loads in bottom pane
|
||||
4. Status badge updates automatically
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
### User Experience
|
||||
- **Fewer clicks**: No need to click "View Output" button
|
||||
- **Immediate feedback**: Output appears automatically
|
||||
- **Unified interface**: Edit and view use same layout
|
||||
- **Less cognitive load**: No modal context switching
|
||||
- **More information**: Signatures count visible at a glance
|
||||
|
||||
### Code Quality
|
||||
- **Reduced complexity**: Removed job creation modal code
|
||||
- **Consistent patterns**: Single layout for all job operations
|
||||
- **Better state management**: Edit mode is a simple boolean flag
|
||||
- **Maintainable**: Less code to maintain and test
|
||||
|
||||
### Visual Design
|
||||
- **Cleaner**: No modal overlays
|
||||
- **Consistent**: Same island structure throughout
|
||||
- **Professional**: Smooth transitions between modes
|
||||
- **Informative**: All relevant data visible
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
### State Added
|
||||
```rust
|
||||
job_detail_output: Option<String>, // Auto-loaded output
|
||||
editing_job: bool, // Edit mode flag
|
||||
edit_job_payload: String, // Edit buffer for payload
|
||||
edit_job_runner: String, // Edit buffer for runner
|
||||
edit_job_timeout: String, // Edit buffer for timeout
|
||||
```
|
||||
|
||||
### Messages Added
|
||||
```rust
|
||||
EditJob, // Enter edit mode
|
||||
CancelEditJob, // Exit edit mode
|
||||
UpdateEditJobPayload(String), // Update payload buffer
|
||||
UpdateEditJobRunner(String), // Update runner buffer
|
||||
UpdateEditJobTimeout(String), // Update timeout buffer
|
||||
SaveJobEdit, // Save changes
|
||||
JobEditSaved(Result<String, String>), // Save result
|
||||
```
|
||||
|
||||
### Auto-Loading
|
||||
- Output loads automatically when `ViewJobDetail` message is sent
|
||||
- Stored in `job_detail_output` instead of modal state
|
||||
- Displayed immediately when available
|
||||
- No user interaction required
|
||||
|
||||
### Edit Mode
|
||||
- Payload textarea replaces code block
|
||||
- Bottom pane shows edit form instead of status
|
||||
- Header changes to "Edit Settings"
|
||||
- Cancel restores original view
|
||||
- Save updates job and reloads data
|
||||
|
||||
## CSS Additions
|
||||
|
||||
```css
|
||||
.edit-textarea /* Editable payload textarea */
|
||||
.edit-form /* Edit form container */
|
||||
.edit-form .form-group /* Form field groups */
|
||||
.edit-form label /* Form labels */
|
||||
```
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
Potential improvements:
|
||||
- Add signature management in edit mode
|
||||
- Show signature details (public keys) in sidebar
|
||||
- Add job cloning feature
|
||||
- Real-time output streaming for running jobs
|
||||
- Diff view when editing to show changes
|
||||
- Undo/redo for edits
|
||||
- Auto-save drafts
|
||||
Reference in New Issue
Block a user