99 lines
3.8 KiB
Markdown
99 lines
3.8 KiB
Markdown
# Project Mycelium - Modal-Based Checkout Flow Requirements
|
|
|
|
## Project Context
|
|
We are building a checkout flow for the Project Mycelium where users can assign compute slices (resources) to either Individual VMs or Kubernetes clusters. The current implementation has issues with the modal-based assignment system.
|
|
|
|
## Required Flow Behavior
|
|
|
|
### Initial State
|
|
- **All slices added to cart start as "Individual VM"** (gray badges)
|
|
- **No clusters exist initially** - the clusters section should be empty
|
|
- Each slice shows: Provider name, size (e.g., "4x Base Unit"), specs, location, and price
|
|
|
|
### Assignment Modal Flow
|
|
When a user clicks on any slice:
|
|
|
|
1. **Modal Opens** showing:
|
|
- Slice details (provider, specs, price)
|
|
- Two assignment options:
|
|
- "Individual VM" (selected if current state, and by default)
|
|
- "Assign to Cluster"
|
|
|
|
2. **Individual VM Selection**:
|
|
- Assigns by default
|
|
- Assign or close do the same: no state change
|
|
- Slice badge updates to gray "Individual VM" if was from cluster before
|
|
|
|
3. **Cluster Assignment Selection**:
|
|
- Shows cluster role selector with:
|
|
- Cluster dropdown (initially only shows "+ Create New Cluster")
|
|
- Role selection: Master or Worker (Worker selected by default)
|
|
- Cluster name input field (only visible when "Create New Cluster" selected)
|
|
- Default cluster name: "Cluster #1", "Cluster #2", etc.
|
|
- User can enter custom cluster name
|
|
- Clusters have default name e.g. Cluster #1
|
|
|
|
4. **Assignment Execution**:
|
|
- Click "Assign Slice" button
|
|
- If creating new cluster: creates cluster display section
|
|
- Slice badge updates to show cluster name + role (e.g., "Cluster #1 Master" in red, "Cluster #1 Worker" in green)
|
|
- Modal closes automatically
|
|
- Deployment overview updates with cluster statistics
|
|
|
|
### State Persistence
|
|
When reopening a slice modal:
|
|
- Shows current assignment state (Individual or Cluster)
|
|
- If assigned to cluster: shows selected cluster and role
|
|
- Allows changing assignment or role
|
|
|
|
### Cluster Management
|
|
- **Dynamic Creation**: Clusters only appear when first slice is assigned
|
|
- **Auto-Cleanup**: Empty clusters are automatically removed
|
|
- **Naming**: Default "Cluster #1, #2..." with custom name option
|
|
- **Statistics**: Show master count, worker count, total cores per cluster
|
|
|
|
### Visual Feedback
|
|
- **Individual VM**: Gray left border, gray badge
|
|
- **Master Node**: Red left border, red badge
|
|
- **Worker Node**: Green left border, green badge
|
|
- **Cluster Display**: Blue-themed containers with editable names and statistics
|
|
|
|
## Technical Requirements
|
|
|
|
### Key Functions Needed
|
|
1. `openAssignmentModal(sliceElement)` - Opens modal with current state
|
|
2. `selectAssignment(optionElement)` - Handles assignment option selection
|
|
3. `assignSlice()` - Executes the assignment and closes modal
|
|
4. `updateSliceAssignment()` - Updates slice visual state
|
|
5. `createClusterDisplay()` - Creates cluster UI section
|
|
6. `deleteCluster()` - Removes empty clusters
|
|
7. `updateDeploymentOverview()` - Updates statistics
|
|
|
|
### Data Structure
|
|
```javascript
|
|
clusters = {
|
|
'cluster1': {
|
|
name: 'Cluster #1',
|
|
customName: 'Production', // if user renamed it
|
|
masters: ['slice1', 'slice3'],
|
|
workers: ['slice2', 'slice5']
|
|
}
|
|
}
|
|
```
|
|
|
|
### Modal Behavior
|
|
- Must close automatically after successful assignment
|
|
- Must show current state when reopened
|
|
- Must handle cluster dropdown population
|
|
- Must show/hide cluster name input based on selection
|
|
|
|
## Success Criteria
|
|
1. All slices start as Individual VMs
|
|
2. Clicking slice opens modal with correct current state
|
|
3. Assigning to new cluster creates cluster display and assigns slice
|
|
4. Modal closes automatically after assignment
|
|
5. Slice badges update correctly with cluster name and role
|
|
6. Reopening slice modal shows current assignment
|
|
7. Empty clusters are automatically removed
|
|
8. Statistics update correctly in deployment overview
|