Clean up documentation: consolidate docs in docs/ directory, simplify README
This commit is contained in:
Timur Gordon
62
README.md
62
README.md
@@ -2,19 +2,19 @@
|
|||||||
|
|
||||||
A Rust-based actor management system for the Hero ecosystem that provides unified process management, job queuing, and optional OpenRPC server integration.
|
A Rust-based actor management system for the Hero ecosystem that provides unified process management, job queuing, and optional OpenRPC server integration.
|
||||||
|
|
||||||
## Architecture Overview
|
## Repository Structure
|
||||||
|
|
||||||
The Hero Supervisor uses a clean, feature-gated architecture that separates library functionality from CLI/server features to avoid dependency cycles and maintain modularity.
|
|
||||||
|
|
||||||
```
|
```
|
||||||
hero-supervisor/
|
supervisor/
|
||||||
├── src/ # Core library (no CLI dependencies)
|
├── core/ # Main supervisor library and binary
|
||||||
│ ├── lib.rs # Main library exports and documentation
|
│ ├── src/
|
||||||
│ ├── supervisor.rs # Core supervisor logic and actor management
|
│ │ ├── bin/supervisor.rs # Supervisor binary
|
||||||
│ ├── runner.rs # Runner implementation for actor process management
|
│ │ └── lib.rs # Library exports
|
||||||
│ ├── job.rs # Job data structures, builder pattern, and Redis key management
|
│ ├── examples/ # Usage examples
|
||||||
│ └── openrpc.rs # OpenRPC server (feature-gated)
|
│ └── tests/ # Integration tests
|
||||||
├── cmd/ # CLI binaries
|
├── client/ # OpenRPC client library (Rust + WASM)
|
||||||
|
├── ui/ # Admin UI (Yew WASM application)
|
||||||
|
└── docs/ # Documentation
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
@@ -43,35 +43,6 @@ The Hero Supervisor uses a clean, simplified architecture with centralized resou
|
|||||||
- **Direct OpenRPC Integration**: RPC trait implemented directly on `Arc<Mutex<Supervisor>>` (no wrapper layers)
|
- **Direct OpenRPC Integration**: RPC trait implemented directly on `Arc<Mutex<Supervisor>>` (no wrapper layers)
|
||||||
- **Simplified App**: `SupervisorApp::start()` handles everything - runners, OpenRPC server, graceful shutdown
|
- **Simplified App**: `SupervisorApp::start()` handles everything - runners, OpenRPC server, graceful shutdown
|
||||||
|
|
||||||
## File Documentation
|
|
||||||
|
|
||||||
### Core Library Files
|
|
||||||
|
|
||||||
#### `src/lib.rs`
|
|
||||||
Main library entry point that exports `Supervisor`, `SupervisorBuilder`, `SupervisorApp`, and related types.
|
|
||||||
|
|
||||||
#### `src/supervisor.rs`
|
|
||||||
Core supervisor implementation with builder pattern. Manages runners, owns shared Redis client and process manager. Provides job queuing, runner lifecycle management, and status monitoring.
|
|
||||||
|
|
||||||
#### `src/app.rs`
|
|
||||||
Main application wrapper that provides `start()` method for complete lifecycle management. Handles OpenRPC server startup, graceful shutdown, and keeps the application running.
|
|
||||||
|
|
||||||
#### `src/runner.rs`
|
|
||||||
Simplified runner configuration and management. Contains `Runner` struct with configuration data only - no resource ownership. Integrates with supervisor's shared resources.
|
|
||||||
|
|
||||||
#### `src/job.rs`
|
|
||||||
Job data structures, builder pattern, and Redis key management. Defines `Job` struct with metadata, script content, and status tracking.
|
|
||||||
|
|
||||||
#### `src/client.rs`
|
|
||||||
Client implementation for job management operations. Provides Redis-based job storage, retrieval, status updates, and lifecycle management. Separates job operations from supervisor logic.
|
|
||||||
|
|
||||||
#### `src/openrpc.rs`
|
|
||||||
OpenRPC server implementation that exposes all supervisor functionality over JSON-RPC. Implements RPC trait directly on the supervisor for clean integration.
|
|
||||||
|
|
||||||
### Binary Files
|
|
||||||
|
|
||||||
#### `cmd/supervisor.rs`
|
|
||||||
Main supervisor binary that creates a supervisor using the builder pattern and starts the complete application with `app.start()`. The OpenRPC server is always enabled and starts automatically.
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@@ -195,6 +166,15 @@ RUST_LOG=info cargo run --features openrpc
|
|||||||
4. **Conditional Compilation**: Rust's feature system ensures minimal dependencies for library users
|
4. **Conditional Compilation**: Rust's feature system ensures minimal dependencies for library users
|
||||||
5. **Single Binary**: One supervisor binary with optional OpenRPC server integration
|
5. **Single Binary**: One supervisor binary with optional OpenRPC server integration
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
- **[Quick Start Guide](docs/QUICK_START.md)** - Get started with Hero Supervisor
|
||||||
|
- **[Authentication](docs/AUTH.md)** - Secret-based authentication system
|
||||||
|
- **[Job API Convention](docs/job-api-convention.md)** - Job submission and management API
|
||||||
|
- **[Mycelium Integration](docs/MYCELIUM.md)** - Optional Mycelium network support
|
||||||
|
- **[Restructure Notes](docs/RESTRUCTURE.md)** - Repository restructuring details
|
||||||
|
- **[Test Keypairs](docs/test_keypairs.md)** - Testing with authentication
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[Add your license information here]
|
MIT OR Apache-2.0
|
||||||
|
|||||||
280
docs/README.md
280
docs/README.md
@@ -1,280 +0,0 @@
|
|||||||
# Hero Supervisor Documentation
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Hero Supervisor is a distributed job execution system that manages runners and coordinates job processing across multiple worker nodes. It provides a robust OpenRPC API for job management and runner administration.
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
|
|
||||||
The supervisor consists of several key components:
|
|
||||||
|
|
||||||
- **Supervisor Core**: Central coordinator that manages runners and job dispatch
|
|
||||||
- **OpenRPC Server**: JSON-RPC API server for remote management
|
|
||||||
- **Redis Backend**: Job queue and state management
|
|
||||||
- **Process Manager**: Runner lifecycle management (Simple or Tmux)
|
|
||||||
- **Client Libraries**: Native Rust and WASM clients for integration
|
|
||||||
|
|
||||||
## Quick Start
|
|
||||||
|
|
||||||
### Starting the Supervisor
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# With default configuration
|
|
||||||
./supervisor
|
|
||||||
|
|
||||||
# With custom configuration file
|
|
||||||
./supervisor --config /path/to/config.toml
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example Configuration
|
|
||||||
|
|
||||||
```toml
|
|
||||||
# config.toml
|
|
||||||
redis_url = "redis://localhost:6379"
|
|
||||||
namespace = "hero"
|
|
||||||
bind_address = "127.0.0.1"
|
|
||||||
port = 3030
|
|
||||||
|
|
||||||
# Admin secrets for full access
|
|
||||||
admin_secrets = ["admin-secret-123"]
|
|
||||||
|
|
||||||
# User secrets for job operations
|
|
||||||
user_secrets = ["user-secret-456"]
|
|
||||||
|
|
||||||
# Register secrets for runner registration
|
|
||||||
register_secrets = ["register-secret-789"]
|
|
||||||
|
|
||||||
[[actors]]
|
|
||||||
id = "sal_runner_1"
|
|
||||||
name = "sal_runner_1"
|
|
||||||
binary_path = "/path/to/sal_runner"
|
|
||||||
db_path = "/tmp/sal_db"
|
|
||||||
redis_url = "redis://localhost:6379"
|
|
||||||
process_manager = "simple"
|
|
||||||
|
|
||||||
[[actors]]
|
|
||||||
id = "osis_runner_1"
|
|
||||||
name = "osis_runner_1"
|
|
||||||
binary_path = "/path/to/osis_runner"
|
|
||||||
db_path = "/tmp/osis_db"
|
|
||||||
redis_url = "redis://localhost:6379"
|
|
||||||
process_manager = "tmux:osis_session"
|
|
||||||
```
|
|
||||||
|
|
||||||
## API Documentation
|
|
||||||
|
|
||||||
### Job API Convention
|
|
||||||
|
|
||||||
The Hero Supervisor follows a consistent naming convention for job operations:
|
|
||||||
|
|
||||||
- **`jobs.`** - General job operations (create, list)
|
|
||||||
- **`job.`** - Specific job operations (run, start, status, result)
|
|
||||||
|
|
||||||
See [Job API Convention](job-api-convention.md) for detailed documentation.
|
|
||||||
|
|
||||||
### Core Methods
|
|
||||||
|
|
||||||
#### Runner Management
|
|
||||||
- `register_runner` - Register a new runner
|
|
||||||
- `list_runners` - List all registered runners
|
|
||||||
- `start_runner` / `stop_runner` - Control runner lifecycle
|
|
||||||
- `get_runner_status` - Get runner status
|
|
||||||
- `get_runner_logs` - Retrieve runner logs
|
|
||||||
|
|
||||||
#### Job Management
|
|
||||||
- `jobs.create` - Create a job without queuing
|
|
||||||
- `jobs.list` - List all jobs with full details
|
|
||||||
- `job.run` - Run a job and return result
|
|
||||||
- `job.start` - Start a created job
|
|
||||||
- `job.stop` - Stop a running job
|
|
||||||
- `job.delete` - Delete a job from the system
|
|
||||||
- `job.status` - Get job status (non-blocking)
|
|
||||||
- `job.result` - Get job result (blocking)
|
|
||||||
|
|
||||||
#### Administration
|
|
||||||
- `add_secret` / `remove_secret` - Manage authentication secrets
|
|
||||||
- `get_supervisor_info` - Get system information
|
|
||||||
- `rpc.discover` - OpenRPC specification discovery
|
|
||||||
|
|
||||||
## Client Usage
|
|
||||||
|
|
||||||
### Rust Client
|
|
||||||
|
|
||||||
```rust
|
|
||||||
use hero_supervisor_openrpc_client::{SupervisorClient, JobBuilder};
|
|
||||||
|
|
||||||
// Create client
|
|
||||||
let client = SupervisorClient::new("http://localhost:3030")?;
|
|
||||||
|
|
||||||
// Create a job
|
|
||||||
let job = JobBuilder::new()
|
|
||||||
.caller_id("my_client")
|
|
||||||
.context_id("my_context")
|
|
||||||
.payload("print('Hello World')")
|
|
||||||
.executor("osis")
|
|
||||||
.runner("osis_runner_1")
|
|
||||||
.timeout(60)
|
|
||||||
.build()?;
|
|
||||||
|
|
||||||
// Option 1: Fire-and-forget execution
|
|
||||||
let result = client.job_run("user-secret", job.clone()).await?;
|
|
||||||
match result {
|
|
||||||
JobResult::Success { success } => println!("Output: {}", success),
|
|
||||||
JobResult::Error { error } => println!("Error: {}", error),
|
|
||||||
}
|
|
||||||
|
|
||||||
// Option 2: Asynchronous execution
|
|
||||||
let job_id = client.jobs_create("user-secret", job).await?;
|
|
||||||
client.job_start("user-secret", &job_id).await?;
|
|
||||||
|
|
||||||
// Poll for completion
|
|
||||||
loop {
|
|
||||||
let status = client.job_status(&job_id).await?;
|
|
||||||
if status.status == "completed" || status.status == "failed" {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
tokio::time::sleep(Duration::from_secs(1)).await;
|
|
||||||
}
|
|
||||||
|
|
||||||
let result = client.job_result(&job_id).await?;
|
|
||||||
|
|
||||||
// Option 3: Job management
|
|
||||||
// Stop a running job
|
|
||||||
client.job_stop("user-secret", &job_id).await?;
|
|
||||||
|
|
||||||
// Delete a job
|
|
||||||
client.job_delete("user-secret", &job_id).await?;
|
|
||||||
|
|
||||||
// List all jobs (returns full Job objects)
|
|
||||||
let jobs = client.jobs_list("user-secret").await?;
|
|
||||||
for job in jobs {
|
|
||||||
println!("Job {}: {} ({})", job.id, job.executor, job.payload);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### WASM Client
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
import { WasmSupervisorClient, WasmJob } from 'hero-supervisor-openrpc-client';
|
|
||||||
|
|
||||||
// Create client
|
|
||||||
const client = new WasmSupervisorClient('http://localhost:3030');
|
|
||||||
|
|
||||||
// Create and run job
|
|
||||||
const job = new WasmJob('job-id', 'print("Hello")', 'osis', 'osis_runner_1');
|
|
||||||
const result = await client.create_job('user-secret', job);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Security
|
|
||||||
|
|
||||||
### Authentication Levels
|
|
||||||
|
|
||||||
1. **Admin Secrets**: Full system access
|
|
||||||
- All runner management operations
|
|
||||||
- All job operations
|
|
||||||
- Secret management
|
|
||||||
- System information access
|
|
||||||
|
|
||||||
2. **User Secrets**: Job operations only
|
|
||||||
- Create, run, start jobs
|
|
||||||
- Get job status and results
|
|
||||||
- No runner or secret management
|
|
||||||
|
|
||||||
3. **Register Secrets**: Runner registration only
|
|
||||||
- Register new runners
|
|
||||||
- No other operations
|
|
||||||
|
|
||||||
### Best Practices
|
|
||||||
|
|
||||||
- Use different secret types for different access levels
|
|
||||||
- Rotate secrets regularly
|
|
||||||
- Store secrets securely (environment variables, secret management systems)
|
|
||||||
- Use HTTPS in production environments
|
|
||||||
- Implement proper logging and monitoring
|
|
||||||
|
|
||||||
## Development
|
|
||||||
|
|
||||||
### Building
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Build supervisor binary
|
|
||||||
cargo build --release
|
|
||||||
|
|
||||||
# Build with OpenRPC feature
|
|
||||||
cargo build --release --features openrpc
|
|
||||||
|
|
||||||
# Build client library
|
|
||||||
cd client
|
|
||||||
cargo build --release
|
|
||||||
```
|
|
||||||
|
|
||||||
### Testing
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Run tests
|
|
||||||
cargo test
|
|
||||||
|
|
||||||
# Run with Redis (requires Redis server)
|
|
||||||
docker run -d -p 6379:6379 redis:alpine
|
|
||||||
cargo test -- --ignored
|
|
||||||
```
|
|
||||||
|
|
||||||
### Examples
|
|
||||||
|
|
||||||
See the `examples/` directory for:
|
|
||||||
- Basic supervisor setup
|
|
||||||
- Mock runner implementation
|
|
||||||
- Comprehensive OpenRPC client usage
|
|
||||||
- Configuration examples
|
|
||||||
|
|
||||||
## Troubleshooting
|
|
||||||
|
|
||||||
### Common Issues
|
|
||||||
|
|
||||||
1. **Redis Connection Failed**
|
|
||||||
- Ensure Redis server is running
|
|
||||||
- Check Redis URL in configuration
|
|
||||||
- Verify network connectivity
|
|
||||||
|
|
||||||
2. **Runner Registration Failed**
|
|
||||||
- Check register secret validity
|
|
||||||
- Verify runner binary path exists
|
|
||||||
- Ensure runner has proper permissions
|
|
||||||
|
|
||||||
3. **Job Execution Timeout**
|
|
||||||
- Increase job timeout value
|
|
||||||
- Check runner resource availability
|
|
||||||
- Monitor runner logs for issues
|
|
||||||
|
|
||||||
4. **OpenRPC Method Not Found**
|
|
||||||
- Verify method name spelling
|
|
||||||
- Check OpenRPC specification
|
|
||||||
- Ensure server supports the method
|
|
||||||
|
|
||||||
### Logging
|
|
||||||
|
|
||||||
Enable debug logging:
|
|
||||||
```bash
|
|
||||||
RUST_LOG=debug ./supervisor --config config.toml
|
|
||||||
```
|
|
||||||
|
|
||||||
### Monitoring
|
|
||||||
|
|
||||||
Monitor key metrics:
|
|
||||||
- Runner status and health
|
|
||||||
- Job queue lengths
|
|
||||||
- Job success/failure rates
|
|
||||||
- Response times
|
|
||||||
- Redis connection status
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
1. Fork the repository
|
|
||||||
2. Create a feature branch
|
|
||||||
3. Make changes with tests
|
|
||||||
4. Update documentation
|
|
||||||
5. Submit a pull request
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
[License information here]
|
|
||||||
@@ -1,197 +0,0 @@
|
|||||||
# 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
|
|
||||||
@@ -1,209 +0,0 @@
|
|||||||
# 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)
|
|
||||||
@@ -1,145 +0,0 @@
|
|||||||
# 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
|
|
||||||
@@ -1,177 +0,0 @@
|
|||||||
# 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
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
# 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
|
|
||||||
Reference in New Issue
Block a user