add release orchestrator docs and sprints gaps fills
This commit is contained in:
207
docs/modules/release-orchestrator/ui/dashboard.md
Normal file
207
docs/modules/release-orchestrator/ui/dashboard.md
Normal file
@@ -0,0 +1,207 @@
|
||||
# Dashboard Specification
|
||||
|
||||
> Main dashboard layout and metrics specification for the Release Orchestrator UI.
|
||||
|
||||
**Status:** Planned (not yet implemented)
|
||||
**Source:** [Architecture Advisory Section 12.1](../../../product/advisories/09-Jan-2026%20-%20Stella%20Ops%20Orchestrator%20Architecture.md)
|
||||
**Related Modules:** [WebSocket APIs](../api/websockets.md), [Metrics](../operations/metrics.md)
|
||||
**Sprint:** [111_001 Dashboard Overview](../../../../implplan/SPRINT_20260110_111_001_FE_dashboard_overview.md)
|
||||
|
||||
## Overview
|
||||
|
||||
The dashboard provides a real-time overview of security posture, release operations, estate health, and compliance status.
|
||||
|
||||
---
|
||||
|
||||
## Dashboard Layout
|
||||
|
||||
```
|
||||
+-----------------------------------------------------------------------------+
|
||||
| STELLA OPS SUITE |
|
||||
| +-----+ [User Menu v] |
|
||||
| |Logo | Dashboard Releases Environments Workflows Integrations |
|
||||
+-----------------------------------------------------------------------------+
|
||||
| |
|
||||
| +-------------------------------+ +-----------------------------------+ |
|
||||
| | SECURITY POSTURE | | RELEASE OPERATIONS | |
|
||||
| | | | | |
|
||||
| | +---------+ +---------+ | | +---------+ +---------+ | |
|
||||
| | |Critical | | High | | | |In Flight| |Completed| | |
|
||||
| | | 0 * | | 3 * | | | | 2 | | 47 | | |
|
||||
| | |reachable| |reachable| | | |deploys | | today | | |
|
||||
| | +---------+ +---------+ | | +---------+ +---------+ | |
|
||||
| | | | | |
|
||||
| | Blocked: 2 releases | | Pending Approval: 3 | |
|
||||
| | Risk Drift: 1 env | | Failed (24h): 1 | |
|
||||
| | | | | |
|
||||
| +-------------------------------+ +-----------------------------------+ |
|
||||
| |
|
||||
| +-------------------------------+ +-----------------------------------+ |
|
||||
| | ESTATE HEALTH | | COMPLIANCE/AUDIT | |
|
||||
| | | | | |
|
||||
| | Agents: 12 online, 1 offline| | Evidence Complete: 98% | |
|
||||
| | Targets: 45/47 healthy | | Policy Changes: 2 (this week) | |
|
||||
| | Drift Detected: 2 targets | | Audit Exports: 5 (this month) | |
|
||||
| | | | | |
|
||||
| +-------------------------------+ +-----------------------------------+ |
|
||||
| |
|
||||
| +-----------------------------------------------------------------------+ |
|
||||
| | RECENT ACTIVITY | |
|
||||
| | | |
|
||||
| | * 14:32 myapp-v2.3.1 deployed to prod (jane@example.com) | |
|
||||
| | o 14:28 myapp-v2.3.1 promoted to stage (auto) | |
|
||||
| | * 14:15 api-v1.2.0 blocked: critical vuln CVE-2024-1234 | |
|
||||
| | o 13:45 worker-v3.0.0 release created (john@example.com) | |
|
||||
| | * 13:30 Target prod-web-03 health: degraded | |
|
||||
| | | |
|
||||
| +-----------------------------------------------------------------------+ |
|
||||
| |
|
||||
+-----------------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dashboard Metrics
|
||||
|
||||
### TypeScript Interfaces
|
||||
|
||||
```typescript
|
||||
interface DashboardMetrics {
|
||||
// Security Posture
|
||||
security: {
|
||||
criticalReachable: number;
|
||||
highReachable: number;
|
||||
blockedReleases: number;
|
||||
riskDriftEnvironments: number;
|
||||
digestsAnalyzedToday: number;
|
||||
digestQuota: number;
|
||||
};
|
||||
|
||||
// Release Operations
|
||||
operations: {
|
||||
deploymentsInFlight: number;
|
||||
deploymentsCompletedToday: number;
|
||||
deploymentsFailed24h: number;
|
||||
pendingApprovals: number;
|
||||
averageDeployTime: number; // seconds
|
||||
};
|
||||
|
||||
// Estate Health
|
||||
estate: {
|
||||
agentsOnline: number;
|
||||
agentsOffline: number;
|
||||
agentsDegraded: number;
|
||||
targetsHealthy: number;
|
||||
targetsUnhealthy: number;
|
||||
targetsDrift: number;
|
||||
};
|
||||
|
||||
// Compliance/Audit
|
||||
compliance: {
|
||||
evidenceCompleteness: number; // percentage
|
||||
policyChangesThisWeek: number;
|
||||
auditExportsThisMonth: number;
|
||||
lastExportDate: DateTime;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Dashboard Panels
|
||||
|
||||
### 1. Security Posture Panel
|
||||
|
||||
Displays current security state across all releases:
|
||||
|
||||
| Metric | Description |
|
||||
|--------|-------------|
|
||||
| Critical Reachable | Critical vulnerabilities with confirmed reachability |
|
||||
| High Reachable | High severity vulnerabilities with confirmed reachability |
|
||||
| Blocked Releases | Releases blocked by security gates |
|
||||
| Risk Drift | Environments with changed risk since deployment |
|
||||
|
||||
### 2. Release Operations Panel
|
||||
|
||||
Shows active deployment operations:
|
||||
|
||||
| Metric | Description |
|
||||
|--------|-------------|
|
||||
| In Flight | Deployments currently in progress |
|
||||
| Completed Today | Successful deployments in last 24h |
|
||||
| Pending Approval | Promotions awaiting approval |
|
||||
| Failed (24h) | Failed deployments in last 24h |
|
||||
|
||||
### 3. Estate Health Panel
|
||||
|
||||
Displays agent and target health:
|
||||
|
||||
| Metric | Description |
|
||||
|--------|-------------|
|
||||
| Agents Online | Number of agents reporting healthy |
|
||||
| Agents Offline | Agents that missed heartbeats |
|
||||
| Targets Healthy | Targets passing health checks |
|
||||
| Drift Detected | Targets with version drift |
|
||||
|
||||
### 4. Compliance/Audit Panel
|
||||
|
||||
Shows audit and compliance status:
|
||||
|
||||
| Metric | Description |
|
||||
|--------|-------------|
|
||||
| Evidence Complete | % of deployments with full evidence |
|
||||
| Policy Changes | Policy modifications this week |
|
||||
| Audit Exports | Evidence exports this month |
|
||||
|
||||
---
|
||||
|
||||
## Real-Time Updates
|
||||
|
||||
### WebSocket Integration
|
||||
|
||||
```typescript
|
||||
interface DashboardStreamMessage {
|
||||
type: "metric_update" | "activity" | "alert";
|
||||
timestamp: DateTime;
|
||||
payload: MetricUpdate | ActivityEvent | Alert;
|
||||
}
|
||||
|
||||
// Subscribe to dashboard stream
|
||||
const ws = new WebSocket("/api/v1/dashboard/stream");
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const message: DashboardStreamMessage = JSON.parse(event.data);
|
||||
|
||||
switch (message.type) {
|
||||
case "metric_update":
|
||||
updateMetrics(message.payload);
|
||||
break;
|
||||
case "activity":
|
||||
addActivityItem(message.payload);
|
||||
break;
|
||||
case "alert":
|
||||
showAlert(message.payload);
|
||||
break;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Performance Targets
|
||||
|
||||
| Metric | Target |
|
||||
|--------|--------|
|
||||
| Initial Load | < 2 seconds |
|
||||
| Metric Refresh | Every 30 seconds |
|
||||
| WebSocket Reconnect | Exponential backoff (1s, 2s, 4s, ... 30s max) |
|
||||
| Activity History | Last 50 events |
|
||||
|
||||
---
|
||||
|
||||
## See Also
|
||||
|
||||
- [WebSocket APIs](../api/websockets.md)
|
||||
- [Metrics](../operations/metrics.md)
|
||||
- [Workflow Editor](workflow-editor.md)
|
||||
- [Key Screens](screens.md)
|
||||
232
docs/modules/release-orchestrator/ui/screens.md
Normal file
232
docs/modules/release-orchestrator/ui/screens.md
Normal file
@@ -0,0 +1,232 @@
|
||||
# Key UI Screens
|
||||
|
||||
> Specification for key UI screens: Environment Overview, Release Detail, and Why Blocked modal.
|
||||
|
||||
**Status:** Planned (not yet implemented)
|
||||
**Source:** [Architecture Advisory Section 12.3](../../../product/advisories/09-Jan-2026%20-%20Stella%20Ops%20Orchestrator%20Architecture.md)
|
||||
**Related Modules:** [Environment Manager](../modules/environment-manager.md), [Release Manager](../modules/release-manager.md)
|
||||
**Sprints:** [111_002 - 111_007](../../../../implplan/)
|
||||
|
||||
## Overview
|
||||
|
||||
This document specifies the key UI screens for release orchestration.
|
||||
|
||||
---
|
||||
|
||||
## Environment Overview Screen
|
||||
|
||||
The environment overview shows the deployment pipeline and current state of each environment.
|
||||
|
||||
```
|
||||
+-----------------------------------------------------------------------------+
|
||||
| ENVIRONMENTS [+ New Environment] |
|
||||
+-----------------------------------------------------------------------------+
|
||||
| |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| | ENVIRONMENT PIPELINE | |
|
||||
| | | |
|
||||
| | +---------+ +---------+ +---------+ +---------+ | |
|
||||
| | | DEV | ---> | TEST | ---> | STAGE | ---> | PROD | | |
|
||||
| | | | | | | | | | | |
|
||||
| | | v2.4.0 | | v2.3.1 | | v2.3.1 | | v2.3.0 | | |
|
||||
| | | * 5 min | | * 2h | | * 1d | | * 3d | | |
|
||||
| | +---------+ +---------+ +---------+ +---------+ | |
|
||||
| | | |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| | PRODUCTION [Manage] [View] | |
|
||||
| | | |
|
||||
| | Current Release: myapp-v2.3.0 | |
|
||||
| | Deployed: 3 days ago by jane@example.com | |
|
||||
| | Targets: 5 healthy, 0 unhealthy | |
|
||||
| | | |
|
||||
| | +---------------------------------------------------------------+ | |
|
||||
| | | Pending Promotion: myapp-v2.3.1 [Review] | | |
|
||||
| | | Waiting: 2 approvals (1/2) | | |
|
||||
| | | Security: V All gates pass | | |
|
||||
| | +---------------------------------------------------------------+ | |
|
||||
| | | |
|
||||
| | Freeze Windows: None active | |
|
||||
| | Required Approvals: 2 | |
|
||||
| | | |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| |
|
||||
+-----------------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
### Features
|
||||
|
||||
- **Environment Pipeline:** Visual flow showing version progression
|
||||
- **Environment Cards:** Detailed view of each environment
|
||||
- **Target Health:** Real-time target health indicators
|
||||
- **Pending Promotions:** Promotions awaiting action
|
||||
- **Freeze Windows:** Active and scheduled freeze windows
|
||||
- **Approval Status:** Current approval count vs required
|
||||
|
||||
---
|
||||
|
||||
## Release Detail Screen
|
||||
|
||||
The release detail screen shows all information about a specific release.
|
||||
|
||||
```
|
||||
+-----------------------------------------------------------------------------+
|
||||
| RELEASE: myapp-v2.3.1 |
|
||||
| Created: 2 hours ago by jane@example.com |
|
||||
+-----------------------------------------------------------------------------+
|
||||
| |
|
||||
| [Overview] [Components] [Security] [Deployments] [Evidence] |
|
||||
| |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| | COMPONENTS | |
|
||||
| | | |
|
||||
| | +------------------------------------------------------------------+ | |
|
||||
| | | api | | |
|
||||
| | | Version: 2.3.1 Digest: sha256:abc123... | | |
|
||||
| | | Security: V 0 critical, 0 high (0 reachable) | | |
|
||||
| | | Image: registry.example.com/myapp/api@sha256:abc123 | | |
|
||||
| | +------------------------------------------------------------------+ | |
|
||||
| | | |
|
||||
| | +------------------------------------------------------------------+ | |
|
||||
| | | worker | | |
|
||||
| | | Version: 2.3.1 Digest: sha256:def456... | | |
|
||||
| | | Security: V 0 critical, 0 high (0 reachable) | | |
|
||||
| | | Image: registry.example.com/myapp/worker@sha256:def456 | | |
|
||||
| | +------------------------------------------------------------------+ | |
|
||||
| | | |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| | DEPLOYMENT STATUS | |
|
||||
| | | |
|
||||
| | dev *--------------------------------------------* Deployed (2h) | |
|
||||
| | test *--------------------------------------------* Deployed (1h) | |
|
||||
| | stage o--------------------------------------------* Deploying... | |
|
||||
| | prod o Not deployed | |
|
||||
| | | |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| |
|
||||
| [Promote to Stage v] [Compare with Production] [Download Evidence] |
|
||||
| |
|
||||
+-----------------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
### Tabs
|
||||
|
||||
1. **Overview:** Release metadata and summary
|
||||
2. **Components:** Component list with digests and versions
|
||||
3. **Security:** Vulnerability summary and reachability analysis
|
||||
4. **Deployments:** Deployment history across environments
|
||||
5. **Evidence:** Evidence packets for compliance
|
||||
|
||||
### Features
|
||||
|
||||
- **Digest Display:** Full OCI digests for each component
|
||||
- **Security Summary:** Vulnerability counts by severity
|
||||
- **Deployment Timeline:** Visual progress across environments
|
||||
- **Quick Actions:** Promote, compare, and export options
|
||||
|
||||
---
|
||||
|
||||
## "Why Blocked?" Modal
|
||||
|
||||
The "Why Blocked?" modal explains why a promotion cannot proceed.
|
||||
|
||||
```
|
||||
+-----------------------------------------------------------------------------+
|
||||
| WHY IS THIS PROMOTION BLOCKED? [Close] |
|
||||
+-----------------------------------------------------------------------------+
|
||||
| |
|
||||
| Release: myapp-v2.4.0 -> Production |
|
||||
| |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| | X SECURITY GATE FAILED | |
|
||||
| | | |
|
||||
| | Component 'api' has 1 critical reachable vulnerability: | |
|
||||
| | | |
|
||||
| | - CVE-2024-1234 (Critical, CVSS 9.8) | |
|
||||
| | Package: log4j 2.14.0 | |
|
||||
| | Reachability: V Confirmed reachable via api/logging/Logger.java | |
|
||||
| | Fixed in: 2.17.1 | |
|
||||
| | [View Details] [View Evidence] | |
|
||||
| | | |
|
||||
| | Remediation: Update log4j to version 2.17.1 or later | |
|
||||
| | | |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| | V APPROVAL GATE PASSED | |
|
||||
| | | |
|
||||
| | Required: 2 approvals | |
|
||||
| | Received: 2 approvals | |
|
||||
| | - john@example.com (2h ago): "LGTM" | |
|
||||
| | - sarah@example.com (1h ago): "Approved for prod" | |
|
||||
| | | |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| | V FREEZE WINDOW GATE PASSED | |
|
||||
| | | |
|
||||
| | No active freeze windows for production | |
|
||||
| | | |
|
||||
| +------------------------------------------------------------------------+ |
|
||||
| |
|
||||
| Policy evaluated at: 2026-01-09T14:32:15Z |
|
||||
| Policy hash: sha256:789xyz... |
|
||||
| [View Full Decision Record] |
|
||||
| |
|
||||
+-----------------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
### Features
|
||||
|
||||
- **Gate-by-Gate Status:** Shows each gate with pass/fail status
|
||||
- **Failure Details:** Specific information about why a gate failed
|
||||
- **Vulnerability Details:** CVE info, package, version, and remediation
|
||||
- **Reachability Evidence:** Links to reachability analysis
|
||||
- **Approval History:** List of approvers and their comments
|
||||
- **Override Mechanism:** Request override for authorized users
|
||||
- **Decision Record:** Link to full evidence packet
|
||||
|
||||
---
|
||||
|
||||
## Navigation Structure
|
||||
|
||||
```
|
||||
Dashboard
|
||||
+-- Releases
|
||||
| +-- [Release Detail]
|
||||
| +-- Create Release
|
||||
| +-- Compare Releases
|
||||
|
|
||||
+-- Environments
|
||||
| +-- [Environment Overview]
|
||||
| +-- Create Environment
|
||||
| +-- Manage Targets
|
||||
|
|
||||
+-- Workflows
|
||||
| +-- [Workflow Editor]
|
||||
| +-- Workflow Runs
|
||||
| +-- Step Types
|
||||
|
|
||||
+-- Integrations
|
||||
| +-- Connectors
|
||||
| +-- Plugins
|
||||
| +-- Vault
|
||||
|
|
||||
+-- Settings
|
||||
+-- Users & Teams
|
||||
+-- Policies
|
||||
+-- Audit Log
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## See Also
|
||||
|
||||
- [Dashboard](dashboard.md)
|
||||
- [Workflow Editor](workflow-editor.md)
|
||||
- [Environment Manager](../modules/environment-manager.md)
|
||||
- [Release Manager](../modules/release-manager.md)
|
||||
- [Promotion Manager](../modules/promotion-manager.md)
|
||||
296
docs/modules/release-orchestrator/ui/workflow-editor.md
Normal file
296
docs/modules/release-orchestrator/ui/workflow-editor.md
Normal file
@@ -0,0 +1,296 @@
|
||||
# Workflow Editor Specification
|
||||
|
||||
> Visual workflow editor for creating and editing DAG-based workflow templates.
|
||||
|
||||
**Status:** Planned (not yet implemented)
|
||||
**Source:** [Architecture Advisory Section 12.2](../../../product/advisories/09-Jan-2026%20-%20Stella%20Ops%20Orchestrator%20Architecture.md)
|
||||
**Related Modules:** [Workflow Engine](../modules/workflow-engine.md), [Workflow Templates](../workflow/templates.md)
|
||||
**Sprint:** [111_004 Workflow Editor](../../../../implplan/SPRINT_20260110_111_004_FE_workflow_editor.md)
|
||||
|
||||
## Overview
|
||||
|
||||
The workflow editor provides a visual graph editor for creating and editing workflow templates. It supports drag-and-drop node placement, connection creation, real-time run visualization, and bidirectional YAML synchronization.
|
||||
|
||||
---
|
||||
|
||||
## Graph Editor Component
|
||||
|
||||
### Editor State
|
||||
|
||||
```typescript
|
||||
interface WorkflowEditorState {
|
||||
template: WorkflowTemplate;
|
||||
selectedNode: string | null;
|
||||
selectedEdge: string | null;
|
||||
zoom: number;
|
||||
pan: { x: number; y: number };
|
||||
mode: "select" | "pan" | "connect";
|
||||
clipboard: StepNode[] | null;
|
||||
undoStack: WorkflowTemplate[];
|
||||
redoStack: WorkflowTemplate[];
|
||||
}
|
||||
|
||||
interface WorkflowEditorProps {
|
||||
template: WorkflowTemplate;
|
||||
stepTypes: StepType[];
|
||||
readOnly: boolean;
|
||||
onSave: (template: WorkflowTemplate) => void;
|
||||
onValidate: (template: WorkflowTemplate) => ValidationResult;
|
||||
}
|
||||
```
|
||||
|
||||
### Node Renderer
|
||||
|
||||
```typescript
|
||||
interface NodeRendererProps {
|
||||
node: StepNode;
|
||||
stepType: StepType;
|
||||
status?: StepRunStatus; // For run visualization
|
||||
selected: boolean;
|
||||
onSelect: () => void;
|
||||
onMove: (position: Position) => void;
|
||||
onConnect: (sourceHandle: string) => void;
|
||||
}
|
||||
|
||||
const NodeRenderer: React.FC<NodeRendererProps> = ({
|
||||
node, stepType, status, selected
|
||||
}) => {
|
||||
const statusColor = getStatusColor(status);
|
||||
|
||||
return (
|
||||
<div className={`workflow-node ${selected ? 'selected' : ''}`}
|
||||
style={{ borderColor: statusColor }}>
|
||||
|
||||
{/* Node header */}
|
||||
<div className="node-header" style={{ backgroundColor: stepType.color }}>
|
||||
<Icon name={stepType.icon} />
|
||||
<span className="node-name">{node.name}</span>
|
||||
{status && <StatusBadge status={status} />}
|
||||
</div>
|
||||
|
||||
{/* Node body */}
|
||||
<div className="node-body">
|
||||
<span className="node-type">{stepType.name}</span>
|
||||
{node.timeout && <span className="node-timeout">T {node.timeout}s</span>}
|
||||
</div>
|
||||
|
||||
{/* Connection handles */}
|
||||
<Handle type="target" position="top" />
|
||||
<Handle type="source" position="bottom" />
|
||||
|
||||
{/* Conditional indicator */}
|
||||
{node.condition && (
|
||||
<div className="condition-badge" title={node.condition}>
|
||||
<Icon name="condition" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Run Visualization Overlay
|
||||
|
||||
### Real-Time Execution Display
|
||||
|
||||
```typescript
|
||||
interface RunVisualizationProps {
|
||||
template: WorkflowTemplate;
|
||||
workflowRun: WorkflowRun;
|
||||
stepRuns: StepRun[];
|
||||
onNodeClick: (nodeId: string) => void;
|
||||
}
|
||||
|
||||
const RunVisualization: React.FC<RunVisualizationProps> = ({
|
||||
template, workflowRun, stepRuns, onNodeClick
|
||||
}) => {
|
||||
// WebSocket for real-time updates
|
||||
const { subscribe, unsubscribe } = useWorkflowStream(workflowRun.id);
|
||||
|
||||
useEffect(() => {
|
||||
const handlers = {
|
||||
'step_started': (data) => updateStepStatus(data.nodeId, 'running'),
|
||||
'step_completed': (data) => updateStepStatus(data.nodeId, data.status),
|
||||
'step_log': (data) => appendLog(data.nodeId, data.line),
|
||||
};
|
||||
|
||||
subscribe(handlers);
|
||||
return () => unsubscribe();
|
||||
}, [workflowRun.id]);
|
||||
|
||||
return (
|
||||
<div className="run-visualization">
|
||||
{/* Workflow graph with status overlay */}
|
||||
<WorkflowGraph
|
||||
template={template}
|
||||
nodeRenderer={(node) => (
|
||||
<NodeRenderer
|
||||
node={node}
|
||||
stepType={getStepType(node.type)}
|
||||
status={getStepRunStatus(node.id)}
|
||||
selected={selectedNode === node.id}
|
||||
onSelect={() => setSelectedNode(node.id)}
|
||||
/>
|
||||
)}
|
||||
edgeRenderer={(edge) => (
|
||||
<EdgeRenderer
|
||||
edge={edge}
|
||||
animated={isEdgeActive(edge)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Log panel */}
|
||||
{selectedNode && (
|
||||
<LogPanel
|
||||
stepRun={getStepRun(selectedNode)}
|
||||
streaming={isStepRunning(selectedNode)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Progress bar */}
|
||||
<ProgressBar
|
||||
completed={completedSteps}
|
||||
total={totalSteps}
|
||||
status={workflowRun.status}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Status Indicators
|
||||
|
||||
| Status | Visual |
|
||||
|--------|--------|
|
||||
| Pending | Gray circle |
|
||||
| Running | Blue spinner |
|
||||
| Success | Green checkmark |
|
||||
| Failed | Red X |
|
||||
| Skipped | Yellow dash |
|
||||
|
||||
---
|
||||
|
||||
## Canvas Operations
|
||||
|
||||
### Drag and Drop
|
||||
|
||||
- Drag steps from palette to canvas
|
||||
- Drop creates new node at position
|
||||
- Connect nodes by dragging from source to target handle
|
||||
- Multi-select with Shift+click or box selection
|
||||
|
||||
### Validation
|
||||
|
||||
The editor performs real-time validation:
|
||||
|
||||
- **DAG Cycle Detection:** Prevent circular dependencies
|
||||
- **Orphan Node Detection:** Warn about unconnected nodes
|
||||
- **Required Inputs:** Highlight missing required configuration
|
||||
- **Type Compatibility:** Validate edge connections between compatible types
|
||||
|
||||
### Zoom and Pan
|
||||
|
||||
| Action | Control |
|
||||
|--------|---------|
|
||||
| Zoom In | Ctrl + Mouse Wheel Up |
|
||||
| Zoom Out | Ctrl + Mouse Wheel Down |
|
||||
| Fit View | Ctrl + 0 |
|
||||
| Pan | Middle Mouse Drag / Space + Drag |
|
||||
| Reset | Ctrl + R |
|
||||
|
||||
---
|
||||
|
||||
## YAML Editor Mode
|
||||
|
||||
### Monaco Editor Integration
|
||||
|
||||
The editor supports a bidirectional YAML mode for power users:
|
||||
|
||||
```typescript
|
||||
interface YAMLEditorProps {
|
||||
template: WorkflowTemplate;
|
||||
onChange: (template: WorkflowTemplate) => void;
|
||||
onValidate: (yaml: string) => ValidationResult;
|
||||
}
|
||||
|
||||
const YAMLEditor: React.FC<YAMLEditorProps> = ({ template, onChange, onValidate }) => {
|
||||
const [yaml, setYaml] = useState(templateToYaml(template));
|
||||
|
||||
return (
|
||||
<MonacoEditor
|
||||
language="yaml"
|
||||
value={yaml}
|
||||
onChange={(value) => {
|
||||
setYaml(value);
|
||||
const result = onValidate(value);
|
||||
if (result.valid) {
|
||||
onChange(yamlToTemplate(value));
|
||||
}
|
||||
}}
|
||||
options={{
|
||||
minimap: { enabled: false },
|
||||
lineNumbers: 'on',
|
||||
scrollBeyondLastLine: false,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Bidirectional Sync
|
||||
|
||||
Changes in either view (graph or YAML) are synchronized:
|
||||
|
||||
- Graph changes update YAML immediately
|
||||
- Valid YAML changes update graph
|
||||
- Invalid YAML shows error markers without updating graph
|
||||
|
||||
---
|
||||
|
||||
## Step Palette
|
||||
|
||||
### Available Step Types
|
||||
|
||||
The palette shows all available step types from core and plugins:
|
||||
|
||||
```typescript
|
||||
interface StepPaletteProps {
|
||||
stepTypes: StepType[];
|
||||
onDragStart: (stepType: string) => void;
|
||||
filter: string;
|
||||
}
|
||||
|
||||
const categories = [
|
||||
{ name: "Deployment", types: ["deploy", "rollback"] },
|
||||
{ name: "Gates", types: ["security-gate", "approval", "freeze-window-gate"] },
|
||||
{ name: "Utility", types: ["script", "wait", "notify"] },
|
||||
{ name: "Plugins", types: [] }, // Dynamically loaded
|
||||
];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
| Shortcut | Action |
|
||||
|----------|--------|
|
||||
| Ctrl + S | Save template |
|
||||
| Ctrl + Z | Undo |
|
||||
| Ctrl + Shift + Z | Redo |
|
||||
| Delete | Delete selected |
|
||||
| Ctrl + C | Copy selected |
|
||||
| Ctrl + V | Paste |
|
||||
| Ctrl + A | Select all |
|
||||
| Escape | Deselect / Cancel |
|
||||
|
||||
---
|
||||
|
||||
## See Also
|
||||
|
||||
- [Workflow Templates](../workflow/templates.md)
|
||||
- [Workflow APIs](../api/workflows.md)
|
||||
- [Dashboard](dashboard.md)
|
||||
- [Key Screens](screens.md)
|
||||
Reference in New Issue
Block a user