feat: workflow param substitution + link troubleshooter support
Adds {{param_name}} template substitution to the workflow execution engine
so workflows can accept user-supplied inputs at run time.
server.js:
- applyParams() helper — substitutes {{name}} in command strings with
validated values (alphanumeric + safe punctuation only); unsafe values
throw and fail the execution cleanly
- executeCommandStep() / executeWorkflowSteps() — accept params={} and
apply substitution before dispatching commands to workers
- POST /api/executions — accepts params:{} from client; validates required
params against definition.params[]; logs params in initial execution log
index.html:
- loadWorkflows() caches definition in _workflowRegistry keyed by id;
shows "[N params]" badge on parameterised workflows
- executeWorkflow() checks for definition.params; if present, shows
param input modal instead of plain confirm()
- showParamModal() — builds labelled input form from param definitions,
marks required fields, focuses first input, Enter submits
- submitParamForm() — validates required fields, calls startExecution()
- startExecution() — POSTs {workflow_id, params} and switches to executions tab
- Param input modal — terminal-aesthetic overlay, no external dependencies
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -991,6 +991,25 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workflow Param Input Modal -->
|
||||
<div id="paramModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center;">
|
||||
<div style="background:#0a0a0a;border:2px solid var(--terminal-green);padding:28px 32px;min-width:380px;max-width:520px;width:90%;font-family:var(--font-mono);box-shadow:0 0 30px rgba(0,255,65,.2);">
|
||||
<h2 style="color:var(--terminal-green);margin:0 0 6px;font-size:1.1em;letter-spacing:.05em;">▶ RUN WORKFLOW</h2>
|
||||
<p style="color:var(--terminal-amber);font-size:.75em;margin:0 0 20px;letter-spacing:.04em;">Fill in required parameters</p>
|
||||
<div id="paramModalForm"></div>
|
||||
<div style="display:flex;gap:10px;margin-top:20px;">
|
||||
<button onclick="submitParamForm()"
|
||||
style="flex:1;padding:8px;background:rgba(0,255,65,.1);border:1px solid var(--terminal-green);color:var(--terminal-green);font-family:var(--font-mono);cursor:pointer;font-size:.9em;">
|
||||
[ ▶ Run ]
|
||||
</button>
|
||||
<button onclick="closeParamModal()"
|
||||
style="padding:8px 16px;background:transparent;border:1px solid #555;color:#888;font-family:var(--font-mono);cursor:pointer;font-size:.9em;">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Schedule Modal -->
|
||||
<div id="createScheduleModal" class="modal">
|
||||
<div class="modal-content">
|
||||
@@ -1156,26 +1175,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Workflow registry (id → definition) for param lookup
|
||||
let _workflowRegistry = {};
|
||||
|
||||
async function loadWorkflows() {
|
||||
try {
|
||||
const response = await fetch('/api/workflows');
|
||||
const workflows = await response.json();
|
||||
|
||||
// Cache definitions for param lookup at execute time
|
||||
_workflowRegistry = {};
|
||||
workflows.forEach(w => {
|
||||
const def = typeof w.definition === 'string' ? JSON.parse(w.definition) : w.definition;
|
||||
_workflowRegistry[w.id] = def;
|
||||
});
|
||||
|
||||
const paramBadge = (def) => {
|
||||
const ps = (def && def.params) || [];
|
||||
return ps.length ? `<span style="font-size:.75em;color:var(--terminal-amber);margin-left:6px;">[${ps.length} param${ps.length > 1 ? 's' : ''}]</span>` : '';
|
||||
};
|
||||
|
||||
const html = workflows.length === 0 ?
|
||||
'<div class="empty">No workflows defined yet</div>' :
|
||||
workflows.map(w => `
|
||||
workflows.map(w => {
|
||||
const def = _workflowRegistry[w.id] || {};
|
||||
return `
|
||||
<div class="workflow-item">
|
||||
<div class="workflow-name">${w.name}</div>
|
||||
<div class="workflow-name">${w.name}${paramBadge(def)}</div>
|
||||
<div class="workflow-desc">${w.description || 'No description'}</div>
|
||||
<div class="timestamp">Created by ${w.created_by || 'Unknown'} on ${new Date(w.created_at).toLocaleString()}</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<button onclick="executeWorkflow('${w.id}', '${w.name}')">▶️ Execute</button>
|
||||
<button onclick="executeWorkflow('${w.id}')">▶️ Execute</button>
|
||||
${currentUser && currentUser.isAdmin ?
|
||||
`<button class="danger" onclick="deleteWorkflow('${w.id}', '${w.name}')">🗑️ Delete</button>`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
</div>`;
|
||||
}).join('');
|
||||
document.getElementById('workflowList').innerHTML = html;
|
||||
} catch (error) {
|
||||
console.error('Error loading workflows:', error);
|
||||
@@ -1781,30 +1817,87 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function executeWorkflow(workflowId, name) {
|
||||
if (!confirm(`Execute workflow: ${name}?`)) return;
|
||||
// ── Workflow execution with optional param modal ───────────────────
|
||||
let _pendingExecWorkflowId = null;
|
||||
|
||||
async function executeWorkflow(workflowId) {
|
||||
const def = _workflowRegistry[workflowId] || {};
|
||||
const paramDefs = def.params || [];
|
||||
if (paramDefs.length > 0) {
|
||||
showParamModal(workflowId, paramDefs);
|
||||
} else {
|
||||
const name = document.querySelector(`[onclick="executeWorkflow('${workflowId}')"]`)
|
||||
?.closest('.workflow-item')?.querySelector('.workflow-name')?.textContent || 'this workflow';
|
||||
if (!confirm(`Execute: ${name}?`)) return;
|
||||
await startExecution(workflowId, {});
|
||||
}
|
||||
}
|
||||
|
||||
async function startExecution(workflowId, params) {
|
||||
try {
|
||||
const response = await fetch('/api/executions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ workflow_id: workflowId })
|
||||
body: JSON.stringify({ workflow_id: workflowId, params })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
alert('Workflow execution started!');
|
||||
switchTab('executions');
|
||||
refreshData();
|
||||
} else {
|
||||
alert('Failed to start workflow');
|
||||
const err = await response.json().catch(() => ({}));
|
||||
alert('Failed to start: ' + (err.error || response.status));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error executing workflow:', error);
|
||||
alert('Error executing workflow');
|
||||
alert('Error starting workflow: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function showParamModal(workflowId, paramDefs) {
|
||||
_pendingExecWorkflowId = workflowId;
|
||||
const form = document.getElementById('paramModalForm');
|
||||
form.innerHTML = paramDefs.map(p => `
|
||||
<div style="margin-bottom:14px;">
|
||||
<label style="display:block;margin-bottom:4px;color:var(--terminal-amber);font-size:.85em;">
|
||||
${p.label || p.name}${p.required ? ' <span style="color:var(--terminal-red)">*</span>' : ''}
|
||||
</label>
|
||||
<input type="text" id="param_${p.name}"
|
||||
placeholder="${p.placeholder || ''}"
|
||||
style="width:100%;background:#0a0a0a;border:1px solid var(--terminal-green);color:var(--terminal-green);font-family:var(--font-mono);padding:6px 8px;font-size:.9em;"
|
||||
${p.required ? 'required' : ''}>
|
||||
</div>`).join('');
|
||||
document.getElementById('paramModal').style.display = 'flex';
|
||||
// Focus first input; Enter key submits
|
||||
form.querySelectorAll('input').forEach(inp => {
|
||||
inp.addEventListener('keydown', e => { if (e.key === 'Enter') submitParamForm(); });
|
||||
});
|
||||
const first = form.querySelector('input');
|
||||
if (first) setTimeout(() => first.focus(), 50);
|
||||
}
|
||||
|
||||
function closeParamModal() {
|
||||
document.getElementById('paramModal').style.display = 'none';
|
||||
_pendingExecWorkflowId = null;
|
||||
}
|
||||
|
||||
async function submitParamForm() {
|
||||
if (!_pendingExecWorkflowId) return;
|
||||
const def = _workflowRegistry[_pendingExecWorkflowId] || {};
|
||||
const paramDefs = def.params || [];
|
||||
const params = {};
|
||||
for (const p of paramDefs) {
|
||||
const el = document.getElementById(`param_${p.name}`);
|
||||
const val = el ? el.value.trim() : '';
|
||||
if (p.required && !val) {
|
||||
el.style.borderColor = 'var(--terminal-red)';
|
||||
el.focus();
|
||||
return;
|
||||
}
|
||||
if (val) params[p.name] = val;
|
||||
}
|
||||
closeParamModal();
|
||||
await startExecution(_pendingExecWorkflowId, params);
|
||||
}
|
||||
|
||||
async function viewExecution(executionId) {
|
||||
try {
|
||||
const response = await fetch(`/api/executions/${executionId}`);
|
||||
|
||||
Reference in New Issue
Block a user