admin: submissions page, download endpoint, uploads search by app_id
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tao.chen
@@ -0,0 +1,367 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
<title>Submissions - spark-mcp-go Admin</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d1117;
|
||||
--panel: #161b22;
|
||||
--border: #30363d;
|
||||
--text: #c9d1d9;
|
||||
--muted: #8b949e;
|
||||
--accent: #58a6ff;
|
||||
--danger: #f85149;
|
||||
--ok: #3fb950;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
header h1 { margin: 0; font-size: 1.1rem; color: var(--accent); }
|
||||
nav { display: flex; gap: .75rem; }
|
||||
nav a { color: var(--muted); text-decoration: none; }
|
||||
nav a:hover { color: var(--text); }
|
||||
nav a.active { color: var(--accent); }
|
||||
.auth { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
|
||||
input[type='text'], input[type='password'] {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: .4rem .5rem;
|
||||
font: inherit;
|
||||
}
|
||||
input[type='text'] { min-width: 260px; }
|
||||
button {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: .4rem .8rem;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover { opacity: .9; }
|
||||
button.danger { background: var(--danger); }
|
||||
button.secondary { background: var(--border); color: var(--text); }
|
||||
main { padding: 1rem; max-width: 1400px; margin: 0 auto; }
|
||||
.toolbar { display: flex; gap: .5rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; }
|
||||
.toolbar span { color: var(--muted); }
|
||||
.error {
|
||||
background: rgba(248, 81, 73, .15);
|
||||
border: 1px solid var(--danger);
|
||||
color: var(--danger);
|
||||
padding: .75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.hidden { display: none; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--border); }
|
||||
th { color: var(--muted); font-weight: 600; user-select: none; }
|
||||
th.sortable { cursor: pointer; }
|
||||
th.sortable:hover { color: var(--text); }
|
||||
td { vertical-align: middle; font-size: .9rem; }
|
||||
td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
|
||||
td.wrap { word-break: break-all; }
|
||||
.actions { display: flex; gap: .4rem; }
|
||||
dialog.modal {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
min-width: 360px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
dialog.modal::backdrop { background: rgba(0, 0, 0, .65); }
|
||||
dialog.modal h2 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--accent); }
|
||||
dialog.modal form { display: flex; flex-direction: column; gap: .75rem; }
|
||||
dialog.modal label { color: var(--muted); font-size: .9rem; }
|
||||
dialog.modal input { width: 100%; }
|
||||
.modal-error { color: var(--danger); font-size: .9rem; margin: 0; }
|
||||
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div style='display:flex;align-items:center;gap:1rem;'>
|
||||
<h1>spark-mcp-go Admin</h1>
|
||||
<nav>
|
||||
<a href='/admin'>Clusters</a>
|
||||
<a href='/admin/uploads'>Uploads</a>
|
||||
<a href='/admin/submissions' class='active'>Submissions</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class='auth'>
|
||||
<button id='set-token' class='secondary'>Set Token</button>
|
||||
<button id='logout' class='danger'>Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id='error' class='error hidden'></div>
|
||||
|
||||
<section class='toolbar'>
|
||||
<input id='search' type='text' placeholder='Search by file name or app id...'>
|
||||
<button id='refresh' class='secondary'>Refresh</button>
|
||||
<span id='count'></span>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class='sortable' data-key='id'>ID</th>
|
||||
<th class='sortable' data-key='file_id'>File ID</th>
|
||||
<th class='sortable' data-key='file_name'>File Name</th>
|
||||
<th class='sortable' data-key='app_id'>App ID</th>
|
||||
<th>Tracking URL</th>
|
||||
<th class='sortable' data-key='cluster_id'>Cluster</th>
|
||||
<th class='sortable' data-key='exit_code'>Exit</th>
|
||||
<th class='sortable' data-key='duration_ms'>Duration (ms)</th>
|
||||
<th class='sortable' data-key='submitted_at'>Submitted At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id='submissions-body'>
|
||||
<tr><td colspan='9'>Loading...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<dialog id='token-modal' class='modal'>
|
||||
<h2>Admin Token Required</h2>
|
||||
<p id='modal-error' class='modal-error hidden'></p>
|
||||
<form id='token-form'>
|
||||
<label for='modal-token'>Bearer token</label>
|
||||
<input id='modal-token' type='password' autocomplete='off' required>
|
||||
<div class='modal-actions'>
|
||||
<button type='submit' id='modal-save'>Save</button>
|
||||
<button type='button' id='modal-cancel' class='secondary hidden'>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
const $ = (sel) => document.querySelector(sel);
|
||||
const API = '/admin/submissions';
|
||||
|
||||
let submissions = [];
|
||||
let sortKey = 'submitted_at';
|
||||
let sortDir = -1;
|
||||
let pendingRetry = null;
|
||||
let cancelBlocker = null;
|
||||
|
||||
function headers() {
|
||||
return {
|
||||
'Authorization': 'Bearer ' + (localStorage.getItem('adminToken') || ''),
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
const el = $('#error');
|
||||
el.textContent = msg || '';
|
||||
el.classList.toggle('hidden', !msg);
|
||||
}
|
||||
|
||||
function showModalError(msg) {
|
||||
const el = $('#modal-error');
|
||||
el.textContent = msg || '';
|
||||
el.classList.toggle('hidden', !msg);
|
||||
}
|
||||
|
||||
function openTokenModal(opts = {}) {
|
||||
const dialog = $('#token-modal');
|
||||
const cancelBtn = $('#modal-cancel');
|
||||
showModalError(opts.error || '');
|
||||
cancelBtn.classList.toggle('hidden', !opts.allowCancel);
|
||||
if (cancelBlocker) {
|
||||
dialog.removeEventListener('cancel', cancelBlocker);
|
||||
cancelBlocker = null;
|
||||
}
|
||||
if (!opts.allowCancel) {
|
||||
cancelBlocker = (e) => e.preventDefault();
|
||||
dialog.addEventListener('cancel', cancelBlocker);
|
||||
}
|
||||
dialog.showModal();
|
||||
$('#modal-token').focus();
|
||||
}
|
||||
|
||||
function closeTokenModal() {
|
||||
const dialog = $('#token-modal');
|
||||
showModalError('');
|
||||
if (cancelBlocker) {
|
||||
dialog.removeEventListener('cancel', cancelBlocker);
|
||||
cancelBlocker = null;
|
||||
}
|
||||
dialog.close();
|
||||
$('#modal-token').value = '';
|
||||
}
|
||||
|
||||
function saveTokenFromModal(e) {
|
||||
e.preventDefault();
|
||||
localStorage.setItem('adminToken', $('#modal-token').value.trim());
|
||||
closeTokenModal();
|
||||
if (pendingRetry) {
|
||||
const fn = pendingRetry;
|
||||
pendingRetry = null;
|
||||
fn();
|
||||
} else {
|
||||
loadSubmissions();
|
||||
}
|
||||
}
|
||||
|
||||
async function api(method, path, body) {
|
||||
const opts = { method, headers: headers() };
|
||||
if (body !== undefined) opts.body = JSON.stringify(body);
|
||||
const res = await fetch(API + path, opts);
|
||||
if (!res.ok) {
|
||||
if (res.status === 401) {
|
||||
localStorage.removeItem('adminToken');
|
||||
pendingRetry = () => api(method, path, body);
|
||||
openTokenModal({
|
||||
error: 'Token rejected by server (401). Enter a valid token.',
|
||||
allowCancel: false
|
||||
});
|
||||
throw new Error('401 Unauthorized');
|
||||
}
|
||||
let detail = res.statusText;
|
||||
try {
|
||||
const j = await res.json();
|
||||
if (j.error) detail = j.error;
|
||||
} catch (_) {}
|
||||
throw new Error(`${res.status} ${detail}`);
|
||||
}
|
||||
if (res.status === 204) return null;
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
if (!ts) return '';
|
||||
const d = new Date(ts);
|
||||
return isNaN(d) ? ts : d.toISOString();
|
||||
}
|
||||
|
||||
function truncate(s, n) {
|
||||
if (!s || s.length <= n) return s || '';
|
||||
return s.slice(0, n) + '…';
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
async function loadSubmissions() {
|
||||
showError('');
|
||||
try {
|
||||
const search = $('#search').value.trim();
|
||||
const path = search ? `/api?search=${encodeURIComponent(search)}` : '/api';
|
||||
submissions = await api('GET', path);
|
||||
renderList();
|
||||
} catch (e) {
|
||||
showError('Failed to load submissions: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function compare(a, b) {
|
||||
let av = a[sortKey];
|
||||
let bv = b[sortKey];
|
||||
if (sortKey === 'id' || sortKey === 'exit_code' || sortKey === 'duration_ms') {
|
||||
av = Number(av); bv = Number(bv);
|
||||
} else if (sortKey === 'submitted_at') {
|
||||
av = new Date(av).getTime(); bv = new Date(bv).getTime();
|
||||
} else {
|
||||
av = String(av).toLowerCase(); bv = String(bv).toLowerCase();
|
||||
}
|
||||
if (av < bv) return -sortDir;
|
||||
if (av > bv) return sortDir;
|
||||
return 0;
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
const tbody = $('#submissions-body');
|
||||
const list = submissions.slice().sort(compare);
|
||||
$('#count').textContent = list.length + ' submission' + (list.length === 1 ? '' : 's');
|
||||
tbody.innerHTML = '';
|
||||
if (!list.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="9">No submissions.</td></tr>';
|
||||
return;
|
||||
}
|
||||
for (const s of list) {
|
||||
const tr = document.createElement('tr');
|
||||
const fileLink = s.file_id ? `<a href='/admin/uploads/${encodeURIComponent(s.file_id)}'>${escapeHtml(truncate(s.file_id, 8))}</a>` : escapeHtml(truncate(s.file_id, 8));
|
||||
tr.innerHTML = `
|
||||
<td class='mono'>${escapeHtml(s.id)}</td>
|
||||
<td class='mono' title='${escapeHtml(s.file_id)}'>${fileLink}</td>
|
||||
<td>${escapeHtml(s.file_name || '')}</td>
|
||||
<td class='mono'>${escapeHtml(s.app_id)}</td>
|
||||
<td class='wrap'>${escapeHtml(s.tracking_url || '')}</td>
|
||||
<td>${escapeHtml(s.cluster_id)}</td>
|
||||
<td>${escapeHtml(s.exit_code)}</td>
|
||||
<td>${escapeHtml(s.duration_ms)}</td>
|
||||
<td>${escapeHtml(formatTime(s.submitted_at))}</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSort(e) {
|
||||
const key = e.target.dataset.key;
|
||||
if (!key) return;
|
||||
if (sortKey === key) {
|
||||
sortDir = -sortDir;
|
||||
} else {
|
||||
sortKey = key;
|
||||
sortDir = key === 'submitted_at' ? -1 : 1;
|
||||
}
|
||||
document.querySelectorAll('th.sortable').forEach(th => {
|
||||
th.textContent = th.textContent.replace(/ [▲▼]$/, '');
|
||||
});
|
||||
const marker = sortDir > 0 ? ' ▲' : ' ▼';
|
||||
e.target.textContent = e.target.textContent.replace(/ [▲▼]$/, '') + marker;
|
||||
renderList();
|
||||
}
|
||||
|
||||
$('#search').addEventListener('input', loadSubmissions);
|
||||
$('#refresh').addEventListener('click', loadSubmissions);
|
||||
$('#set-token').addEventListener('click', () => openTokenModal({ allowCancel: true }));
|
||||
$('#logout').addEventListener('click', () => {
|
||||
localStorage.removeItem('adminToken');
|
||||
openTokenModal({ error: 'Token cleared. Enter a new token to continue.', allowCancel: false });
|
||||
});
|
||||
$('#token-form').addEventListener('submit', saveTokenFromModal);
|
||||
$('#modal-cancel').addEventListener('click', closeTokenModal);
|
||||
document.querySelectorAll('th.sortable').forEach(th => th.addEventListener('click', handleSort));
|
||||
|
||||
if (!localStorage.getItem('adminToken')) {
|
||||
openTokenModal({ allowCancel: false });
|
||||
} else {
|
||||
loadSubmissions();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user