Use hero-job crate instead of runner_rust for job types
This commit is contained in:
Timur Gordon
3549
Cargo.lock
generated
3549
Cargo.lock
generated
File diff suppressed because it is too large
Load Diff
@@ -4,8 +4,9 @@ version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
# Runner crate with integrated job module
|
||||
runner_rust = { git = "https://git.ourworld.tf/herocode/runner_rust.git" }
|
||||
# Job types
|
||||
hero-job = { path = "../job/rust" }
|
||||
# hero-job = { git = "https://git.ourworld.tf/herocode/job.git", subdirectory = "rust" }
|
||||
# Async runtime
|
||||
tokio = { version = "1.0", features = ["full"] }
|
||||
|
||||
|
||||
197
clients/admin-ui/BREADCRUMB_NAVIGATION.md
Normal file
197
clients/admin-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
|
||||
209
clients/admin-ui/ENHANCED_JOB_EDITING.md
Normal file
209
clients/admin-ui/ENHANCED_JOB_EDITING.md
Normal file
@@ -0,0 +1,209 @@
|
||||
# Enhanced Job Editing Features
|
||||
|
||||
## Summary
|
||||
|
||||
Added comprehensive job editing capabilities with name field, editable job ID, runner dropdown, and signature management directly in the sidebar.
|
||||
|
||||
## New Features
|
||||
|
||||
### 1. Job Name Field ✅
|
||||
- **Optional field** for human-readable job names
|
||||
- Separate from the auto-generated job ID
|
||||
- Placeholder: "My Job"
|
||||
- Stored in job object as `name` field
|
||||
- Displayed in edit/create mode
|
||||
|
||||
### 2. Editable Job ID ✅
|
||||
- **Auto-generated** by default (job-{uuid})
|
||||
- **Manually editable** if needed
|
||||
- Monospace font for better readability
|
||||
- Placeholder shows format: "job-xxxxx"
|
||||
- Allows custom job IDs when required
|
||||
|
||||
### 3. Runner Dropdown ✅
|
||||
- **Replaced text input** with proper dropdown/select
|
||||
- Shows all available runners
|
||||
- Auto-selects first runner when creating new job
|
||||
- Clear "No runners available" message when empty
|
||||
- Better UX than text input with datalist
|
||||
|
||||
### 4. Signature Management ✅
|
||||
- **Add signatures** directly in sidebar
|
||||
- **Display signatures** with public key preview
|
||||
- **Remove signatures** with × button
|
||||
- **Private key input** (password field)
|
||||
- **Sign button** to add signature
|
||||
- Signatures shown as compact cards with monospace font
|
||||
|
||||
## Implementation Details
|
||||
|
||||
### State Added
|
||||
```rust
|
||||
edit_job_name: String, // Optional job name
|
||||
edit_job_id: String, // Editable job ID
|
||||
edit_job_signatures: Vec<(String, String)>, // (pubkey, signature)
|
||||
edit_job_private_key: String, // For signing
|
||||
```
|
||||
|
||||
### Messages Added
|
||||
```rust
|
||||
UpdateEditJobName(String), // Update name field
|
||||
UpdateEditJobId(String), // Update job ID
|
||||
UpdateEditJobPrivateKey(String), // Update private key
|
||||
SignJobEdit, // Sign the job
|
||||
RemoveEditSignature(usize), // Remove signature by index
|
||||
```
|
||||
|
||||
### Sidebar Fields (Edit/Create Mode)
|
||||
|
||||
**Order:**
|
||||
1. **Name** (optional) - Text input
|
||||
2. **Job ID** - Editable text input (monospace)
|
||||
3. **Runner** - Dropdown select
|
||||
4. **Timeout** - Number input
|
||||
5. **Signatures** - List + Add interface
|
||||
- Existing signatures displayed as cards
|
||||
- Private key input (password)
|
||||
- Sign button
|
||||
|
||||
### Signature Display
|
||||
|
||||
Each signature shows:
|
||||
- First 16 characters of public key
|
||||
- Monospace font
|
||||
- Remove button (×)
|
||||
- Compact card layout
|
||||
- Background color for visibility
|
||||
|
||||
### Signature Adding
|
||||
|
||||
- Password input for private key
|
||||
- Sign button (disabled when empty)
|
||||
- Creates canonical representation
|
||||
- Signs with provided key
|
||||
- Adds to signatures list
|
||||
- Clears private key after signing
|
||||
- Shows toast notification
|
||||
|
||||
## User Flow
|
||||
|
||||
### Creating a Job
|
||||
```
|
||||
1. Click "+ New Job"
|
||||
2. Fill in fields:
|
||||
- Name: "My Important Job" (optional)
|
||||
- Job ID: Auto-filled, can edit
|
||||
- Runner: Select from dropdown
|
||||
- Timeout: 30 (default)
|
||||
- Payload: Enter script/code
|
||||
3. Optional: Add signatures
|
||||
- Enter private key
|
||||
- Click "Sign"
|
||||
- Repeat for multiple signatures
|
||||
4. Click "Create"
|
||||
```
|
||||
|
||||
### Editing a Job
|
||||
```
|
||||
1. Click job in table
|
||||
2. Click "Edit" in sidebar
|
||||
3. Modify fields:
|
||||
- Name, Job ID, Runner, Timeout
|
||||
- Payload in main area
|
||||
4. Optional: Add/remove signatures
|
||||
5. Click "Save"
|
||||
```
|
||||
|
||||
### Signing a Job
|
||||
```
|
||||
1. In edit/create mode
|
||||
2. Scroll to Signatures section
|
||||
3. Enter private key (hex format)
|
||||
4. Click "Sign"
|
||||
5. Signature added to list
|
||||
6. Private key cleared automatically
|
||||
7. Repeat for multiple signers
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
### User Experience
|
||||
- **Clearer job identification**: Name + ID
|
||||
- **Easier runner selection**: Dropdown vs typing
|
||||
- **Flexible job IDs**: Can customize when needed
|
||||
- **Integrated signing**: No separate modal
|
||||
- **Visual feedback**: Signatures displayed inline
|
||||
|
||||
### Data Model
|
||||
- **Name field**: Optional, human-readable
|
||||
- **ID field**: Required, system identifier
|
||||
- **Separation of concerns**: Name for humans, ID for system
|
||||
- **Signature support**: Full cryptographic signing
|
||||
|
||||
### Security
|
||||
- **Password field**: Private keys not visible
|
||||
- **Canonical representation**: Proper signing protocol
|
||||
- **Multiple signatures**: Support for multi-sig workflows
|
||||
- **Key cleared**: Private key removed after signing
|
||||
|
||||
## Technical Details
|
||||
|
||||
### Job Object Structure
|
||||
```json
|
||||
{
|
||||
"id": "job-abc123",
|
||||
"name": "My Important Job", // Optional
|
||||
"payload": "...",
|
||||
"runner": "runner-name",
|
||||
"timeout": 30,
|
||||
"signatures": [
|
||||
{
|
||||
"public_key": "04e58314...",
|
||||
"signature": "3045..."
|
||||
}
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### Signing Process
|
||||
1. Validate all required fields
|
||||
2. Create canonical representation using `create_job_canonical_repr`
|
||||
3. Sign canonical with `sign_job_canonical`
|
||||
4. Extract public key and signature from result
|
||||
5. Add to signatures list
|
||||
6. Clear private key input
|
||||
|
||||
### Runner Dropdown
|
||||
- Uses HTML `<select>` element
|
||||
- Populated from `self.runners` vector
|
||||
- Selected value bound to `self.edit_job_runner`
|
||||
- Auto-selects first runner for new jobs
|
||||
- Shows message when no runners available
|
||||
|
||||
## CSS Styling
|
||||
|
||||
Signature cards use inline styles:
|
||||
- Flex layout for horizontal arrangement
|
||||
- Monospace font for public keys
|
||||
- Background color for visibility
|
||||
- Compact padding
|
||||
- Remove button aligned right
|
||||
|
||||
## Build Status
|
||||
|
||||
✅ **Success**
|
||||
- Only minor warnings (unused variables)
|
||||
- No errors
|
||||
- Ready for deployment
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
Potential improvements:
|
||||
- Show full public key on hover
|
||||
- Validate private key format
|
||||
- Import signatures from file
|
||||
- Export signed job
|
||||
- Signature verification indicator
|
||||
- Show signature timestamps
|
||||
- Multi-select for runners (parallel execution)
|
||||
145
clients/admin-ui/IMPROVEMENTS_SUMMARY.md
Normal file
145
clients/admin-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
|
||||
177
clients/admin-ui/REFACTORING_COMPLETE.md
Normal file
177
clients/admin-ui/REFACTORING_COMPLETE.md
Normal file
@@ -0,0 +1,177 @@
|
||||
# Job Management Refactoring - Complete
|
||||
|
||||
## Summary
|
||||
|
||||
Successfully refactored the job management UI to remove the modal-based workflow and use inline editing in the job detail view instead.
|
||||
|
||||
## Changes Made
|
||||
|
||||
### 1. Removed Job Creation Modal ✅
|
||||
- **Deleted**: Entire `view_job_form` modal function and related code
|
||||
- **Deleted**: Modal overlay and form UI
|
||||
- **Replaced with**: Inline job creation using the same job detail view
|
||||
|
||||
### 2. Unified Job Creation and Editing ✅
|
||||
- **"+ New Job" button** now creates a new job detail view in edit mode
|
||||
- **Same layout** for creating and editing jobs
|
||||
- **Sidebar fields** become editable inputs (Runner, Timeout)
|
||||
- **Payload** becomes editable textarea
|
||||
- **No separate modal** - everything happens in the main view
|
||||
|
||||
### 3. Sidebar-Based Editing ✅
|
||||
- **View mode** shows: Status, Job ID, Runner, Timeout, Signatures, Created
|
||||
- **Edit mode** shows: Job ID (read-only), Runner (input), Timeout (input)
|
||||
- **Actions change** based on mode:
|
||||
- View: Run, Edit, Delete buttons
|
||||
- Edit: Cancel, Save/Create buttons
|
||||
- **No emojis** - clean text labels only
|
||||
|
||||
### 4. Removed Emojis ✅
|
||||
- Changed "▶ Run Job" → "Run"
|
||||
- Changed "✏️ Edit Job" → "Edit"
|
||||
- Changed "🗑 Delete Job" → "Delete"
|
||||
- Changed "💾 Save Changes" → "Save"
|
||||
- Changed "📄 View Output" → Removed (auto-displays)
|
||||
- Removed emoji status icons (⏳, ✅, ❌, ⏸)
|
||||
|
||||
### 5. Simplified Bottom Pane ✅
|
||||
- **Removed**: Edit form from bottom pane (moved to sidebar)
|
||||
- **Kept**: Output & Status display only
|
||||
- **Auto-displays**: Job output when available (no button needed)
|
||||
- **Status messages**: Text-only, centered, no icons
|
||||
|
||||
## Architecture
|
||||
|
||||
### State Management
|
||||
```rust
|
||||
// Removed old modal state:
|
||||
- show_job_form: bool
|
||||
- job_id: String
|
||||
- job_payload: String
|
||||
- job_runner: String
|
||||
- job_timeout: String
|
||||
- job_signatures: Vec<(String, String)>
|
||||
- job_private_key: String
|
||||
- creating_job: bool
|
||||
|
||||
// Kept unified editing state:
|
||||
+ editing_job: bool
|
||||
+ edit_job_payload: String
|
||||
+ edit_job_runner: String
|
||||
+ edit_job_timeout: String
|
||||
```
|
||||
|
||||
### Messages
|
||||
```rust
|
||||
// Removed old modal messages:
|
||||
- ShowJobForm
|
||||
- HideJobForm
|
||||
- UpdateJobId
|
||||
- UpdateJobPayload
|
||||
- UpdateJobRunner
|
||||
- UpdateJobTimeout
|
||||
- UpdateJobPrivateKey
|
||||
- SignJob
|
||||
- RemoveSignature
|
||||
- CreateJob
|
||||
- JobCreated
|
||||
|
||||
// Kept unified messages:
|
||||
+ CreateNewJob (enters edit mode with new ID)
|
||||
+ EditJob (enters edit mode with existing job)
|
||||
+ CancelEditJob
|
||||
+ UpdateEditJobPayload
|
||||
+ UpdateEditJobRunner
|
||||
+ UpdateEditJobTimeout
|
||||
+ SaveJobEdit (handles both create and update)
|
||||
+ JobEditSaved
|
||||
```
|
||||
|
||||
### User Flow
|
||||
|
||||
**Creating a Job:**
|
||||
```
|
||||
1. Click "+ New Job" button
|
||||
2. View switches to job detail with:
|
||||
- Sidebar: Job ID (generated), Runner input, Timeout input
|
||||
- Payload: Empty textarea
|
||||
- Logs: "No logs yet"
|
||||
- Output: "New job" message
|
||||
3. Fill in payload, runner, timeout
|
||||
4. Click "Create" in sidebar
|
||||
5. Job is saved and view returns to jobs list
|
||||
```
|
||||
|
||||
**Editing a Job:**
|
||||
```
|
||||
1. Click job in table
|
||||
2. View shows job details
|
||||
3. Click "Edit" in sidebar
|
||||
4. Sidebar fields become inputs
|
||||
5. Payload becomes editable textarea
|
||||
6. Modify fields as needed
|
||||
7. Click "Save" or "Cancel" in sidebar
|
||||
8. Changes are saved or discarded
|
||||
```
|
||||
|
||||
**Viewing a Job:**
|
||||
```
|
||||
1. Click job in table
|
||||
2. Sidebar shows: Status, Job ID, Runner, Timeout, Signatures, Created
|
||||
3. Top panes show: Payload (code), Logs (code)
|
||||
4. Bottom pane shows: Output (auto-loaded) or status message
|
||||
5. Actions: Run, Edit, Delete
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
### User Experience
|
||||
- **Simpler**: No modal overlays to manage
|
||||
- **Consistent**: Same view for create/edit/view
|
||||
- **Cleaner**: No emojis, professional text labels
|
||||
- **Faster**: Fewer clicks, inline editing
|
||||
- **Unified**: All job operations in one place
|
||||
|
||||
### Code Quality
|
||||
- **Less code**: Removed ~200 lines of modal code
|
||||
- **Simpler state**: Fewer state fields to manage
|
||||
- **Fewer messages**: Consolidated create/edit flow
|
||||
- **Maintainable**: Single code path for job management
|
||||
- **No duplication**: Reuses same view components
|
||||
|
||||
### Visual Design
|
||||
- **Professional**: Text-only buttons and labels
|
||||
- **Clean**: No emoji clutter
|
||||
- **Consistent**: Matches overall UI style
|
||||
- **Accessible**: Clear text labels for all actions
|
||||
- **Modern**: Inline editing pattern
|
||||
|
||||
## Files Modified
|
||||
|
||||
- `src/app.rs`: Main application logic
|
||||
- Removed modal state and messages
|
||||
- Added unified editing state
|
||||
- Updated sidebar to show editable fields
|
||||
- Simplified bottom pane (no edit form)
|
||||
- Removed emoji icons from buttons
|
||||
|
||||
- `styles.css`: Updated styles
|
||||
- Removed emoji icon styling
|
||||
- Centered status text
|
||||
- Kept clean, professional appearance
|
||||
|
||||
## Testing
|
||||
|
||||
Build Status: ✅ **Success**
|
||||
- Only minor warnings (unused variables)
|
||||
- No errors
|
||||
- Ready for deployment
|
||||
|
||||
## Next Steps
|
||||
|
||||
Potential enhancements:
|
||||
- Add signature management in edit mode
|
||||
- Implement job cloning feature
|
||||
- Add validation feedback
|
||||
- Show diff when editing
|
||||
- Add undo/redo for edits
|
||||
97
clients/admin-ui/REFACTORING_PLAN.md
Normal file
97
clients/admin-ui/REFACTORING_PLAN.md
Normal file
@@ -0,0 +1,97 @@
|
||||
# Admin UI Refactoring Status
|
||||
|
||||
## Overview
|
||||
Split the monolithic `app.rs` (2600+ lines) and `styles.css` (1500+ lines) into modular, maintainable files.
|
||||
|
||||
## ✅ CSS Refactoring COMPLETE!
|
||||
|
||||
## CSS Structure
|
||||
|
||||
```
|
||||
styles/
|
||||
├── main.css # Variables, base styles, layout (CREATED ✅)
|
||||
├── components.css # Reusable components: islands, buttons, badges (CREATED ✅)
|
||||
├── runners.css # Runner list, cards, status
|
||||
├── jobs.css # Job list, detail views, job cards
|
||||
├── keys.css # API key management styles
|
||||
└── header.css # Header, breadcrumbs, user info
|
||||
```
|
||||
|
||||
### Import in index.html
|
||||
```html
|
||||
<link rel="stylesheet" href="/styles/main.css">
|
||||
<link rel="stylesheet" href="/styles/components.css">
|
||||
<link rel="stylesheet" href="/styles/runners.css">
|
||||
<link rel="stylesheet" href="/styles/jobs.css">
|
||||
<link rel="stylesheet" href="/styles/keys.css">
|
||||
<link rel="stylesheet" href="/styles/header.css">
|
||||
```
|
||||
|
||||
## Rust Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── app.rs # Main App component, state, update logic
|
||||
├── components/
|
||||
│ ├── mod.rs # Module declarations
|
||||
│ ├── header.rs # Header component
|
||||
│ ├── runners.rs # Runner list and management views
|
||||
│ ├── jobs.rs # Job list and detail views
|
||||
│ └── keys.rs # API key management views
|
||||
└── lib.rs # Re-export App
|
||||
```
|
||||
|
||||
### Module Organization
|
||||
|
||||
**app.rs** (~500 lines)
|
||||
- App struct and state
|
||||
- Message enum
|
||||
- Main update() logic
|
||||
- Top-level view() that delegates to components
|
||||
|
||||
**components/header.rs** (~100 lines)
|
||||
- view_header()
|
||||
- Server info, breadcrumbs, user info
|
||||
|
||||
**components/runners.rs** (~400 lines)
|
||||
- view_runners_sidebar()
|
||||
- view_runners_content()
|
||||
- Runner cards, status, management
|
||||
|
||||
**components/jobs.rs** (~1000 lines)
|
||||
- view_jobs_sidebar()
|
||||
- view_jobs_list_content()
|
||||
- view_job_detail()
|
||||
- view_job_detail_sidebar()
|
||||
- Job creation, editing
|
||||
|
||||
**components/keys.rs** (~300 lines)
|
||||
- view_keys_sidebar()
|
||||
- view_keys_content()
|
||||
- Key creation, deletion
|
||||
|
||||
## Benefits
|
||||
|
||||
1. **Maintainability**: Easier to find and modify specific features
|
||||
2. **Collaboration**: Multiple developers can work on different components
|
||||
3. **Testing**: Easier to test individual components
|
||||
4. **Performance**: Smaller compilation units
|
||||
5. **Clarity**: Clear separation of concerns
|
||||
|
||||
## Implementation Steps
|
||||
|
||||
1. ✅ Create directory structure
|
||||
2. ✅ Create main.css and components.css
|
||||
3. ⏳ Extract remaining CSS files
|
||||
4. ⏳ Create component modules
|
||||
5. ⏳ Move view functions to appropriate modules
|
||||
6. ⏳ Update imports and module declarations
|
||||
7. ⏳ Test and verify functionality
|
||||
8. ⏳ Remove old monolithic files
|
||||
|
||||
## Migration Strategy
|
||||
|
||||
- Keep old files until refactoring is complete
|
||||
- Test each component as it's extracted
|
||||
- Use feature flags if needed for gradual rollout
|
||||
- Maintain backward compatibility during transition
|
||||
@@ -6,6 +6,14 @@
|
||||
<title>Hero Supervisor</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<!-- Modular CSS -->
|
||||
<link data-trunk rel="css" href="styles/main.css">
|
||||
<link data-trunk rel="css" href="styles/components.css">
|
||||
<link data-trunk rel="css" href="styles/header.css">
|
||||
<link data-trunk rel="css" href="styles/runners.css">
|
||||
<link data-trunk rel="css" href="styles/jobs.css">
|
||||
<link data-trunk rel="css" href="styles/keys.css">
|
||||
<!-- Legacy fallback (remove after migration) -->
|
||||
<link data-trunk rel="css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
54
clients/admin-ui/src/app_components/header.rs
Normal file
54
clients/admin-ui/src/app_components/header.rs
Normal file
@@ -0,0 +1,54 @@
|
||||
use yew::prelude::*;
|
||||
use crate::app::{App, Msg, ContentView};
|
||||
|
||||
pub fn view_header(app: &App, ctx: &Context<App>) -> Html {
|
||||
html! {
|
||||
<header class="app-header">
|
||||
<div class="header-island">
|
||||
<div class="server-info">
|
||||
<span class="server-label">{ "Server" }</span>
|
||||
<span class="server-url">{ &app.server_url }</span>
|
||||
<span class={classes!("status-dot", if app.connected { "connected" } else { "disconnected" })}>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Breadcrumbs island
|
||||
<div class="header-island breadcrumbs-island">
|
||||
{
|
||||
match &app.content_view {
|
||||
ContentView::JobsList => {
|
||||
html! {
|
||||
<span class="breadcrumb-item">{ "Jobs" }</span>
|
||||
}
|
||||
}
|
||||
ContentView::JobDetail(job_id) => {
|
||||
html! {
|
||||
<>
|
||||
<button
|
||||
class="breadcrumb-link"
|
||||
onclick={ctx.link().callback(|_| Msg::BackToJobsList)}
|
||||
>
|
||||
{ "Jobs" }
|
||||
</button>
|
||||
<span class="breadcrumb-separator">{ "/" }</span>
|
||||
<span class="breadcrumb-item">{ &job_id[..12.min(job_id.len())] }</span>
|
||||
</>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="header-island">
|
||||
<div class="user-info">
|
||||
<span class="user-name">{ &app.user_name }</span>
|
||||
<span class="user-scope">{ &app.user_scope }</span>
|
||||
</div>
|
||||
<button onclick={ctx.link().callback(|_| Msg::Logout)} class="logout-btn">
|
||||
{ "⎋" }
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
}
|
||||
11
clients/admin-ui/src/app_components/mod.rs
Normal file
11
clients/admin-ui/src/app_components/mod.rs
Normal file
@@ -0,0 +1,11 @@
|
||||
// Component modules
|
||||
pub mod header;
|
||||
// pub mod runners;
|
||||
// pub mod jobs;
|
||||
// pub mod keys;
|
||||
|
||||
// Re-export commonly used items
|
||||
pub use header::*;
|
||||
// pub use runners::*;
|
||||
// pub use jobs::*;
|
||||
// pub use keys::*;
|
||||
@@ -1,6 +1,7 @@
|
||||
use wasm_bindgen::prelude::*;
|
||||
|
||||
pub mod app;
|
||||
pub mod app_components;
|
||||
|
||||
#[wasm_bindgen(start)]
|
||||
pub fn main() {
|
||||
|
||||
@@ -170,7 +170,16 @@ button:disabled {
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
/* Sidebar Island */
|
||||
/* Unified Island Component */
|
||||
.island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Legacy class names - map to unified island */
|
||||
.sidebar-island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
@@ -253,6 +262,24 @@ button:disabled {
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* When content-island contains job detail islands, remove wrapper styling */
|
||||
.content-island:has(.detail-top-row) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Island with header/content structure */
|
||||
.island.with-header {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
@@ -402,13 +429,45 @@ button:disabled {
|
||||
.header-island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumbs-island {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
color: var(--accent-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -945,6 +1004,11 @@ button:disabled {
|
||||
}
|
||||
}
|
||||
|
||||
.status-created {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-queued {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
@@ -1270,3 +1334,240 @@ button:disabled {
|
||||
.key-delete-btn:hover {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Job Detail Layout */
|
||||
.job-detail-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.detail-top-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.detail-bottom-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 200px;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.detail-island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.island-header {
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.island-header h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.island-content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
color: var(--text-primary);
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Job Detail Sidebar */
|
||||
.job-detail-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: auto;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Status Display */
|
||||
.status-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.status-display.running {
|
||||
border-color: #f59e0b;
|
||||
background: rgba(245, 158, 11, 0.05);
|
||||
}
|
||||
|
||||
.status-display.completed {
|
||||
border-color: #10b981;
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
}
|
||||
|
||||
.status-display.error {
|
||||
border-color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
}
|
||||
|
||||
.status-display.idle {
|
||||
border-color: var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-text h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-text p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Edit Form */
|
||||
.edit-textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px;
|
||||
padding: 1rem;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary);
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.edit-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.edit-form .form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.edit-form label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Responsive adjustments for job detail */
|
||||
@media (max-width: 1200px) {
|
||||
.detail-top-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-bottom-row {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
273
clients/admin-ui/styles/components.css
Normal file
273
clients/admin-ui/styles/components.css
Normal file
@@ -0,0 +1,273 @@
|
||||
/* ============================================
|
||||
COMPONENTS - Reusable UI Components
|
||||
============================================ */
|
||||
|
||||
/* Unified Island Component */
|
||||
.island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Island with header/content structure */
|
||||
.island.with-header {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.island-header {
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.island-header h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.island-content {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.status-created {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-queued {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-running {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-unknown {
|
||||
background: #64748b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Loading Spinner */
|
||||
.loading-spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Status Display */
|
||||
.status-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-display.idle {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.status-display.running {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.status-display.completed {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.status-display.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.status-text h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.status-text p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Code Block */
|
||||
.code-block {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
color: var(--text-primary);
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Toast Notifications */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
right: 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
max-width: 400px;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
/* Form Elements */
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
select {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.625rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
width: 100%;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
/* Pulse Animation */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
109
clients/admin-ui/styles/header.css
Normal file
109
clients/admin-ui/styles/header.css
Normal file
@@ -0,0 +1,109 @@
|
||||
/* ============================================
|
||||
HEADER - App Header and Navigation
|
||||
============================================ */
|
||||
|
||||
/* Header Islands */
|
||||
.header-island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumbs-island {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Server Info */
|
||||
.server-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.server-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.server-url {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Breadcrumbs */
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
color: var(--accent-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.breadcrumb-current {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* User Info */
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-scope {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* Logout Button */
|
||||
.logout-button {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.logout-button:hover {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--error);
|
||||
color: var(--error);
|
||||
}
|
||||
220
clients/admin-ui/styles/jobs.css
Normal file
220
clients/admin-ui/styles/jobs.css
Normal file
@@ -0,0 +1,220 @@
|
||||
/* ============================================
|
||||
JOBS - Job Management Styles
|
||||
============================================ */
|
||||
|
||||
/* Content Island */
|
||||
.content-island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* When content-island contains job detail islands, remove wrapper styling */
|
||||
.content-island:has(.detail-top-row) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.content-header h2 {
|
||||
color: var(--text-primary);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Job List */
|
||||
.jobs-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Job Cards */
|
||||
.job-card {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.job-card:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.job-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.job-id {
|
||||
font-family: monospace;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.job-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.job-info-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.job-info-item {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.job-info-label {
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Job Detail Layout */
|
||||
.detail-top-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-bottom-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 200px;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.detail-island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Job Detail Sidebar */
|
||||
.job-detail-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Signature List */
|
||||
.signatures-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.signature-item {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signature-pubkey {
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.detail-top-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
162
clients/admin-ui/styles/keys.css
Normal file
162
clients/admin-ui/styles/keys.css
Normal file
@@ -0,0 +1,162 @@
|
||||
/* ============================================
|
||||
KEYS - API Key Management Styles
|
||||
============================================ */
|
||||
|
||||
/* Key List */
|
||||
.keys-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Key Cards */
|
||||
.key-card {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.key-card:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.key-card.selected {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--accent);
|
||||
}
|
||||
|
||||
.key-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.key-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* Key Scope Badge */
|
||||
.key-scope {
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.key-scope.admin {
|
||||
background: var(--error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.key-scope.user {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.key-scope.register {
|
||||
background: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Key Info */
|
||||
.key-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.key-value {
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Key Form */
|
||||
.key-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Key Detail */
|
||||
.key-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.key-detail-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.key-detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.key-detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.key-detail-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.key-detail-value {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Copy Button */
|
||||
.copy-button {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
94
clients/admin-ui/styles/main.css
Normal file
94
clients/admin-ui/styles/main.css
Normal file
@@ -0,0 +1,94 @@
|
||||
/* ============================================
|
||||
MAIN STYLES - Variables, Base, Layout
|
||||
============================================ */
|
||||
|
||||
/* CSS Variables */
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--text-muted: #64748b;
|
||||
--border: #334155;
|
||||
--accent: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--error: #ef4444;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* App Container */
|
||||
.app-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0.75rem 1.5rem;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Dashboard Layout */
|
||||
.dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
/* Responsive Layout */
|
||||
@media (max-width: 1024px) {
|
||||
.dashboard {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
105
clients/admin-ui/styles/runners.css
Normal file
105
clients/admin-ui/styles/runners.css
Normal file
@@ -0,0 +1,105 @@
|
||||
/* ============================================
|
||||
RUNNERS - Runner Management Styles
|
||||
============================================ */
|
||||
|
||||
/* Sidebar Island */
|
||||
.sidebar-island {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
color: var(--text-primary);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Runner List */
|
||||
.runners-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Runner Cards */
|
||||
.runner-card {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.runner-card:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.runner-card.selected {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--accent);
|
||||
}
|
||||
|
||||
.runner-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.runner-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* Runner Status */
|
||||
.runner-status {
|
||||
padding: 0.25rem 0.625rem;
|
||||
background: var(--success);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.runner-status.stopped {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
.runner-status.error {
|
||||
background: var(--error);
|
||||
}
|
||||
|
||||
/* Runner Info */
|
||||
.runner-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar-island {
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
@@ -26,7 +26,8 @@ indexmap = "2.0"
|
||||
jsonrpsee = { version = "0.24", features = ["http-client", "macros"] }
|
||||
tokio = { version = "1.0", features = ["full"] }
|
||||
hero-supervisor = { path = "../.." }
|
||||
runner_rust = { git = "https://git.ourworld.tf/herocode/runner_rust.git", branch = "main" }
|
||||
hero-job = { path = "../../../job/rust" }
|
||||
# hero-job = { git = "https://git.ourworld.tf/herocode/job.git", subdirectory = "rust" }
|
||||
env_logger = "0.11"
|
||||
|
||||
# WASM-specific dependencies
|
||||
|
||||
@@ -158,9 +158,9 @@ pub struct JobStartResponse {
|
||||
pub status: String,
|
||||
}
|
||||
|
||||
// Re-export Job types from runner_rust crate (native only)
|
||||
// Re-export Job types from hero-job crate (native only)
|
||||
#[cfg(not(target_arch = "wasm32"))]
|
||||
pub use runner_rust::{Job, JobStatus, JobError, JobBuilder, Client, ClientBuilder};
|
||||
pub use hero_job::{Job, JobStatus, JobError, JobBuilder, JobSignature, Client, ClientBuilder};
|
||||
|
||||
// WASM-compatible Job types (simplified versions)
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// Re-export job types from the runner_rust crate
|
||||
pub use runner_rust::{Job, JobBuilder, JobStatus, JobError, Client, ClientBuilder};
|
||||
// Re-export job types from the hero-job crate
|
||||
pub use hero_job::{Job, JobBuilder, JobStatus, JobError, Client, ClientBuilder};
|
||||
|
||||
@@ -17,7 +17,7 @@ pub mod mycelium;
|
||||
pub use runner::{Runner, RunnerConfig, RunnerResult, RunnerStatus};
|
||||
// pub use sal_service_manager::{ProcessManager, SimpleProcessManager, TmuxProcessManager};
|
||||
pub use supervisor::{Supervisor, SupervisorBuilder, ProcessManagerType};
|
||||
pub use runner_rust::{Job, JobBuilder, JobStatus, JobError, Client, ClientBuilder};
|
||||
pub use hero_job::{Job, JobBuilder, JobStatus, JobError, Client, ClientBuilder};
|
||||
pub use app::SupervisorApp;
|
||||
|
||||
#[cfg(feature = "mycelium")]
|
||||
|
||||
@@ -317,7 +317,7 @@ impl MyceliumIntegration {
|
||||
.unwrap_or(60);
|
||||
|
||||
// Deserialize the job
|
||||
let job: runner_rust::job::Job = serde_json::from_value(job_value.clone())
|
||||
let job: hero_job::Job = serde_json::from_value(job_value.clone())
|
||||
.map_err(|e| format!("invalid job format: {}", e))?;
|
||||
|
||||
let job_id = job.id.clone();
|
||||
@@ -357,7 +357,7 @@ impl MyceliumIntegration {
|
||||
.ok_or("missing job")?;
|
||||
|
||||
// Deserialize the job
|
||||
let job: runner_rust::job::Job = serde_json::from_value(job_value.clone())
|
||||
let job: hero_job::Job = serde_json::from_value(job_value.clone())
|
||||
.map_err(|e| format!("invalid job format: {}", e))?;
|
||||
|
||||
let job_id = job.id.clone();
|
||||
|
||||
@@ -186,7 +186,7 @@ pub enum RunnerError {
|
||||
#[error("Job error: {source}")]
|
||||
JobError {
|
||||
#[from]
|
||||
source: runner_rust::JobError,
|
||||
source: hero_job::JobError,
|
||||
},
|
||||
|
||||
#[error("Job '{job_id}' not found")]
|
||||
|
||||
@@ -75,7 +75,7 @@ use tokio::sync::Mutex;
|
||||
// use sal_service_manager::{ProcessManager, SimpleProcessManager, TmuxProcessManager};
|
||||
|
||||
use crate::{job::JobStatus, runner::{LogInfo, Runner, RunnerConfig, RunnerError, RunnerResult, RunnerStatus}};
|
||||
use runner_rust::{Client, ClientBuilder};
|
||||
use hero_job::{Client, ClientBuilder};
|
||||
|
||||
|
||||
/// Process manager type for a runner
|
||||
@@ -314,21 +314,28 @@ impl Supervisor {
|
||||
let job_id = job.id.clone(); // Store job ID before moving job
|
||||
|
||||
if let Some(_runner) = self.runners.get(&runner) {
|
||||
// Store job metadata in the database
|
||||
// Store job in Redis with "created" status so it can be retrieved later
|
||||
self.client.store_job_in_redis_with_status(&job, hero_job::JobStatus::Created).await
|
||||
.map_err(|e| RunnerError::QueueError {
|
||||
actor_id: runner.clone(),
|
||||
reason: format!("Failed to store job in Redis: {}", e),
|
||||
})?;
|
||||
|
||||
// Store job metadata in the database with "created" status
|
||||
// Job will only be queued when explicitly started via start_job
|
||||
let job_metadata = crate::services::JobMetadata {
|
||||
job_id: job_id.clone(),
|
||||
runner: runner.clone(),
|
||||
created_at: chrono::Utc::now().to_rfc3339(),
|
||||
created_by: api_key.name.clone(),
|
||||
status: "queued".to_string(),
|
||||
status: "created".to_string(),
|
||||
job: job.clone(),
|
||||
};
|
||||
|
||||
self.services.jobs.store(job_metadata).await
|
||||
.map_err(|e| RunnerError::ConfigError { reason: format!("Failed to store job: {}", e) })?;
|
||||
|
||||
// Use the supervisor's queue_job_to_runner method (fire-and-forget)
|
||||
self.queue_job_to_runner(&runner, job).await?;
|
||||
// Do NOT queue the job to the runner - it will be queued when start_job is called
|
||||
Ok(job_id) // Return the job ID immediately
|
||||
} else {
|
||||
Err(RunnerError::ActorNotFound {
|
||||
@@ -555,11 +562,11 @@ impl Supervisor {
|
||||
reason: format!("Failed to connect to Redis: {}", e),
|
||||
})?;
|
||||
|
||||
// Store the job in Redis first
|
||||
// Store job in Redis first (will be set to "dispatched" by default)
|
||||
self.client.store_job_in_redis(&job).await
|
||||
.map_err(|e| RunnerError::QueueError {
|
||||
actor_id: runner.id.clone(),
|
||||
reason: format!("Failed to store job: {}", e),
|
||||
reason: format!("Failed to store job in Redis: {}", e),
|
||||
})?;
|
||||
|
||||
// Use the runner's get_queue method with our namespace
|
||||
|
||||
Reference in New Issue
Block a user