Update media-server: Add execution timing and improve script/callback execution UI
Backend improvements:
- Add execution_time tracking for script execution
- Add execution_time tracking for callback execution
- Add /api/callbacks/execute/{callback_name} endpoint for debugging callbacks
Frontend improvements:
- Fix duration display showing N/A for fast scripts (0 is falsy in JS)
- Increase duration precision to 3 decimal places (0.001s)
- Always show output section with "(no output)" message when empty
- Improve output formatting with italic gray text for empty output
Documentation:
- Add localization section to README
- Document available languages (English, Russian)
- Add guide for contributing new translations
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Media Server</title>
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%231db954;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%231ed760;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23grad)'/%3E%3Cpath fill='white' d='M35 25 L35 75 L75 50 Z'/%3E%3C/svg%3E">
|
||||
<style>
|
||||
:root {
|
||||
--bg-primary: #121212;
|
||||
@@ -465,20 +466,30 @@
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.action-btn.delete:hover {
|
||||
@@ -486,6 +497,95 @@
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn.execute:hover {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Execution Result Dialog */
|
||||
.execution-result {
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin: 0.5rem 0;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.execution-result pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-size: 0.813rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.execution-status {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.status-item label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-item value {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-item.success value {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-item.error value {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.result-section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.result-section h4 {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid var(--bg-tertiary);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Dialog Styles */
|
||||
dialog {
|
||||
background: var(--bg-secondary);
|
||||
@@ -1028,6 +1128,31 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- Execution Result Dialog -->
|
||||
<dialog id="executionDialog">
|
||||
<div class="dialog-header">
|
||||
<h3 id="executionDialogTitle">Execution Result</h3>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div class="execution-status" id="executionStatus"></div>
|
||||
<div class="result-section" id="outputSection" style="display: none;">
|
||||
<h4>Output</h4>
|
||||
<div class="execution-result">
|
||||
<pre id="executionOutput"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-section" id="errorSection" style="display: none;">
|
||||
<h4>Error Output</h4>
|
||||
<div class="execution-result">
|
||||
<pre id="executionError"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button type="button" class="btn-secondary" onclick="closeExecutionDialog()">Close</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- Toast Notification -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
@@ -1740,8 +1865,17 @@
|
||||
title="${escapeHtml(script.command || 'N/A')}">${escapeHtml(script.command || 'N/A')}</td>
|
||||
<td>${script.timeout}s</td>
|
||||
<td>
|
||||
<button class="action-btn" onclick="showEditScriptDialog('${script.name}')">Edit</button>
|
||||
<button class="action-btn delete" onclick="deleteScriptConfirm('${script.name}')">Delete</button>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn execute" onclick="executeScriptDebug('${script.name}')" title="Execute script">
|
||||
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
<button class="action-btn" onclick="showEditScriptDialog('${script.name}')" title="Edit script">
|
||||
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||||
</button>
|
||||
<button class="action-btn delete" onclick="deleteScriptConfirm('${script.name}')" title="Delete script">
|
||||
<svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
@@ -1942,8 +2076,17 @@
|
||||
title="${escapeHtml(callback.command)}">${escapeHtml(callback.command)}</td>
|
||||
<td>${callback.timeout}s</td>
|
||||
<td>
|
||||
<button class="action-btn" onclick="showEditCallbackDialog('${callback.name}')">Edit</button>
|
||||
<button class="action-btn delete" onclick="deleteCallbackConfirm('${callback.name}')">Delete</button>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn execute" onclick="executeCallbackDebug('${callback.name}')" title="Execute callback">
|
||||
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</button>
|
||||
<button class="action-btn" onclick="showEditCallbackDialog('${callback.name}')" title="Edit callback">
|
||||
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||||
</button>
|
||||
<button class="action-btn delete" onclick="deleteCallbackConfirm('${callback.name}')" title="Delete callback">
|
||||
<svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
@@ -2100,6 +2243,176 @@
|
||||
showToast('Error deleting callback', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Execution Result Dialog Functions
|
||||
|
||||
function closeExecutionDialog() {
|
||||
const dialog = document.getElementById('executionDialog');
|
||||
dialog.close();
|
||||
}
|
||||
|
||||
function showExecutionResult(name, result, type = 'script') {
|
||||
const dialog = document.getElementById('executionDialog');
|
||||
const title = document.getElementById('executionDialogTitle');
|
||||
const statusDiv = document.getElementById('executionStatus');
|
||||
const outputSection = document.getElementById('outputSection');
|
||||
const errorSection = document.getElementById('errorSection');
|
||||
const outputPre = document.getElementById('executionOutput');
|
||||
const errorPre = document.getElementById('executionError');
|
||||
|
||||
// Set title
|
||||
title.textContent = `Execution Result: ${name}`;
|
||||
|
||||
// Build status display
|
||||
const success = result.success && result.exit_code === 0;
|
||||
const statusClass = success ? 'success' : 'error';
|
||||
const statusText = success ? 'Success' : 'Failed';
|
||||
|
||||
statusDiv.innerHTML = `
|
||||
<div class="status-item ${statusClass}">
|
||||
<label>Status</label>
|
||||
<value>${statusText}</value>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<label>Exit Code</label>
|
||||
<value>${result.exit_code !== undefined ? result.exit_code : 'N/A'}</value>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<label>Duration</label>
|
||||
<value>${result.execution_time !== undefined && result.execution_time !== null ? result.execution_time.toFixed(3) + 's' : 'N/A'}</value>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Always show output section
|
||||
outputSection.style.display = 'block';
|
||||
if (result.stdout && result.stdout.trim()) {
|
||||
outputPre.textContent = result.stdout;
|
||||
} else {
|
||||
outputPre.textContent = '(no output)';
|
||||
outputPre.style.fontStyle = 'italic';
|
||||
outputPre.style.color = 'var(--text-secondary)';
|
||||
}
|
||||
|
||||
// Show error output if present
|
||||
if (result.stderr && result.stderr.trim()) {
|
||||
errorSection.style.display = 'block';
|
||||
errorPre.textContent = result.stderr;
|
||||
errorPre.style.fontStyle = 'normal';
|
||||
errorPre.style.color = 'var(--error)';
|
||||
} else if (!success && result.error) {
|
||||
errorSection.style.display = 'block';
|
||||
errorPre.textContent = result.error;
|
||||
errorPre.style.fontStyle = 'normal';
|
||||
errorPre.style.color = 'var(--error)';
|
||||
} else {
|
||||
errorSection.style.display = 'none';
|
||||
}
|
||||
|
||||
dialog.showModal();
|
||||
}
|
||||
|
||||
async function executeScriptDebug(scriptName) {
|
||||
const token = localStorage.getItem('media_server_token');
|
||||
const dialog = document.getElementById('executionDialog');
|
||||
const title = document.getElementById('executionDialogTitle');
|
||||
const statusDiv = document.getElementById('executionStatus');
|
||||
|
||||
// Show dialog with loading state
|
||||
title.textContent = `Executing: ${scriptName}`;
|
||||
statusDiv.innerHTML = `
|
||||
<div class="status-item">
|
||||
<label>Status</label>
|
||||
<value><span class="loading-spinner"></span> Running...</value>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('outputSection').style.display = 'none';
|
||||
document.getElementById('errorSection').style.display = 'none';
|
||||
dialog.showModal();
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/scripts/execute/${scriptName}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ args: [] })
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showExecutionResult(scriptName, result, 'script');
|
||||
} else {
|
||||
showExecutionResult(scriptName, {
|
||||
success: false,
|
||||
exit_code: -1,
|
||||
error: result.detail || 'Execution failed',
|
||||
stderr: result.detail || 'Unknown error'
|
||||
}, 'script');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error executing script ${scriptName}:`, error);
|
||||
showExecutionResult(scriptName, {
|
||||
success: false,
|
||||
exit_code: -1,
|
||||
error: error.message,
|
||||
stderr: `Network error: ${error.message}`
|
||||
}, 'script');
|
||||
}
|
||||
}
|
||||
|
||||
async function executeCallbackDebug(callbackName) {
|
||||
const token = localStorage.getItem('media_server_token');
|
||||
const dialog = document.getElementById('executionDialog');
|
||||
const title = document.getElementById('executionDialogTitle');
|
||||
const statusDiv = document.getElementById('executionStatus');
|
||||
|
||||
// Show dialog with loading state
|
||||
title.textContent = `Executing: ${callbackName}`;
|
||||
statusDiv.innerHTML = `
|
||||
<div class="status-item">
|
||||
<label>Status</label>
|
||||
<value><span class="loading-spinner"></span> Running...</value>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('outputSection').style.display = 'none';
|
||||
document.getElementById('errorSection').style.display = 'none';
|
||||
dialog.showModal();
|
||||
|
||||
try {
|
||||
// For callbacks, we'll execute them directly via the callback endpoint
|
||||
// We need to trigger the callback as if the event occurred
|
||||
const response = await fetch(`/api/callbacks/execute/${callbackName}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showExecutionResult(callbackName, result, 'callback');
|
||||
} else {
|
||||
showExecutionResult(callbackName, {
|
||||
success: false,
|
||||
exit_code: -1,
|
||||
error: result.detail || 'Execution failed',
|
||||
stderr: result.detail || 'Unknown error'
|
||||
}, 'callback');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error executing callback ${callbackName}:`, error);
|
||||
showExecutionResult(callbackName, {
|
||||
success: false,
|
||||
exit_code: -1,
|
||||
error: error.message,
|
||||
stderr: `Network error: ${error.message}`
|
||||
}, 'callback');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user