171 lines
18 KiB
JavaScript
171 lines
18 KiB
JavaScript
(() => {
|
||
const $ = id => document.getElementById(id);
|
||
const ui = { after: '', next: '', selected: '', detail: null, loading: false, busy: false, pending: null, rotating: null, result: null, saved: true, mode: 'CREATE', helpCredential: '' };
|
||
const escape = value => String(value ?? '').replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||
const time = value => value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '长期有效';
|
||
function message(error) { return error.status === 403 ? '此账号未启用应用接入管理。请在服务端配置 ORBIT_CONSOLE_APPLICATION_ADMIN 为管理员登录名。' : error.message; }
|
||
async function api(path = '', body) {
|
||
const response = await fetch(`/console/applications${path}`, { method: body ? 'POST' : 'GET', credentials: 'same-origin', cache: 'no-store', headers: { Accept: 'application/json', ...(body ? { 'Content-Type': 'application/json', 'X-Orbit-Console': '1' } : {}) }, ...(body ? { body: JSON.stringify(body) } : {}) });
|
||
const value = await response.json().catch(() => ({}));
|
||
if (response.status === 401) location.replace(`/console/login?return=${encodeURIComponent('/console/#/applications')}`);
|
||
if (!response.ok) { const error = new Error(value.error?.message || `请求失败 (${response.status})`); error.status = response.status; throw error; }
|
||
return value.data;
|
||
}
|
||
function config(token = '<填入已保存的 Token>', queue = $('access-queue').value, namespace = ui.selected) {
|
||
const url = $('access-url').value.trim() || location.origin;
|
||
let parsed; try { parsed = new URL(url); } catch { throw new Error('请输入完整的 HTTP / HTTPS 服务地址'); }
|
||
if (!['http:', 'https:'].includes(parsed.protocol) || parsed.username || parsed.password || parsed.search || parsed.hash || /[\s'"`$\\]/.test(url)) throw new Error('服务地址必须是不含账号、查询参数或特殊字符的 HTTP / HTTPS 地址');
|
||
return `ORBIT_URL=${url.replace(/\/$/, '')}\nORBIT_TOKEN=${token}\nORBIT_NAMESPACE_ID=${namespace}\nORBIT_QUEUE_ID=${queue}\n`;
|
||
}
|
||
async function load() {
|
||
if (ui.loading || ui.busy) return;
|
||
ui.loading = true; $('access-error').textContent = '';
|
||
try {
|
||
const page = await api(ui.after ? `?after=${encodeURIComponent(ui.after)}` : ''); ui.next = page.next || ''; $('access-next').disabled = !ui.next;
|
||
$('access-list').innerHTML = page.items.length ? page.items.map(entry => `<button class="access-item ${entry.namespace_id === ui.selected ? 'selected' : ''}" data-access-id="${escape(entry.namespace_id)}"><span class="access-avatar">${escape(entry.application.slice(0, 1).toUpperCase())}</span><span><strong>${escape(entry.application)}</strong><small>${escape(entry.environment)} / ${escape(entry.namespace)} · ${entry.enabled ? '已启用' : '已停用'}</small></span></button>`).join('') : '<p class="panel-description">还没有接入应用，点击右上角新建。</p>';
|
||
if (!ui.selected && page.items.length) await select(page.items[0].namespace_id);
|
||
else if (ui.selected && !$('access-dialog').open) await select(ui.selected);
|
||
} catch (error) { $('access-error').textContent = message(error); }
|
||
finally { ui.loading = false; }
|
||
}
|
||
async function select(namespace) {
|
||
const requested = namespace; ui.selected = namespace;
|
||
try {
|
||
const detail = await api(`/${encodeURIComponent(namespace)}`); if (ui.selected !== requested) return; ui.detail = detail;
|
||
$('access-empty').hidden = true; $('access-detail').hidden = false;
|
||
$('access-title').textContent = detail.entry.application; $('access-status').textContent = detail.entry.enabled ? '已启用' : '已停用';
|
||
$('access-app-id').textContent = detail.entry.application_id; $('access-ns-id').textContent = namespace; $('access-scope').textContent = `${detail.entry.environment} / ${detail.entry.namespace}`;
|
||
const previous = $('access-queue').value;
|
||
$('access-queue').innerHTML = detail.queues.map(q => `<option value="${escape(q.id)}">${escape(q.name)} · ${escape(q.id.slice(0, 8))}</option>`).join('');
|
||
if (detail.queues.some(q => q.id === previous)) $('access-queue').value = previous;
|
||
$('access-truncated').hidden = !detail.truncated;
|
||
const now = Date.now();
|
||
$('access-credentials').innerHTML = detail.credentials.map(c => {
|
||
const status = c.revoked_at ? '已撤销' : c.expires_at && Date.parse(c.expires_at) <= now ? '已到期' : '有效';
|
||
const transitioning = !c.revoked_at && Date.parse(c.previous_valid_until) > now;
|
||
const blocked = !!c.revoked_at || transitioning;
|
||
const helpID = `access-rotation-help-${c.id}`;
|
||
const reason = c.revoked_at ? '凭据已撤销，不能再次换证。' : '旧 Token 仍在过渡期，暂不能再次换证，以免中断尚未切换的服务。';
|
||
const rotationHelp = transitioning ? `<aside class="access-rotation-notice" id="${escape(helpID)}"><strong>旧 Token 仍在过渡期</strong><p>${escape(reason)}</p><p>过渡截止：<time datetime="${escape(c.previous_valid_until)}">${escape(time(c.previous_valid_until))}</time>。到期后，换证按钮随页面刷新恢复可用。</p><p>请用已保存的新 Token 更新服务、Worker 和结果消费者配置。确认全部切换、在途任务收尾后，也可提前点击「结束过渡，停用旧 Token」。</p></aside>` : c.revoked_at ? `<p id="${escape(helpID)}">${escape(reason)}</p>` : c.previous_valid_until ? `<p>旧 Token 已失效于：${escape(time(c.previous_valid_until))}，可再次换证。</p>` : '';
|
||
const groups = [['tasks:submit', '任务'], ['workers:consume', 'Worker 执行'], ['events:consume', '结果订阅'], ['schedules:manage', '定时调度'], ['workflows:start', '流程编排'], ['tasks:review', '人工恢复'], ['application:resources:manage', '应用额度']].filter(([action]) => c.permissions.actions.includes(action)).map(([,name]) => name);
|
||
return `<section class="access-credential">
|
||
<div class="access-credential-header"><b>${escape(c.name)} · ${status}</b><button class="text-button ${blocked ? 'access-rotation-blocked' : ''}" ${blocked ? `data-access-help="${escape(c.id)}" title="${escape(reason)}" aria-describedby="${escape(helpID)}"` : `data-access-rotate="${escape(c.id)}"`} aria-haspopup="dialog">${c.revoked_at ? '已撤销 · 查看原因 ⓘ' : transitioning ? '暂不可换证 · 查看原因 ⓘ' : '平滑换证 ↗'}</button></div>
|
||
<p>凭据 ID：${escape(c.id)}<br>有效期：${escape(time(c.expires_at))} · 凭据版本 ${escape(c.revision)}</p>
|
||
<div class="access-token-summary"><div><strong>当前 Token</strong><span>原文仅在生成时显示，无法回看</span></div><button type="button" class="text-button" data-access-help="${escape(c.id)}" aria-haspopup="dialog">Token 在哪里查看？</button></div>
|
||
${rotationHelp}
|
||
<div class="access-form-actions"><button class="text-button" data-access-expiry="${escape(c.id)}" ${c.revoked_at ? 'disabled' : ''}>调整有效期</button>${c.previous_valid_until && !c.revoked_at ? `<button class="text-button" data-access-finalize="${escape(c.id)}">结束过渡，停用旧 Token</button>` : ''}</div>
|
||
<div class="access-permissions">${groups.map(a => `<span>${escape(a)}</span>`).join('')}</div><details class="access-permission-details"><summary>查看具体权限</summary><p>${c.permissions.actions.map(escape).join(' · ')}<br>授权队列：${escape(c.permissions.queues.join(', '))}</p></details>
|
||
</section>`;
|
||
}).join('') || '<p class="panel-description">该环境暂无凭据。</p>';
|
||
if ($('access-help-dialog').open) renderCredentialHelp();
|
||
document.querySelectorAll('[data-access-id]').forEach(el => el.classList.toggle('selected', el.dataset.accessId === namespace)); renderConfig();
|
||
} catch (error) { $('access-error').textContent = message(error); }
|
||
}
|
||
function renderConfig() { try { $('access-config').textContent = config(); } catch (error) { $('access-config').textContent = error.message; } }
|
||
function renderCredentialHelp() {
|
||
const credential = ui.detail?.credentials.find(c => c.id === ui.helpCredential);
|
||
if (!credential) { $('access-help-dialog').close(); return; }
|
||
const transitioning = !credential.revoked_at && Date.parse(credential.previous_valid_until) > Date.now();
|
||
$('access-help-scope').textContent = `${ui.detail.entry.application} · ${ui.detail.entry.environment} / ${ui.detail.entry.namespace} · ${credential.name} · 凭据版本 ${credential.revision}`;
|
||
$('access-help-state').textContent = credential.revoked_at ? '凭据已撤销，不能再用于接入或换证。' : transitioning ? `上一轮换证已生效。旧 Token 过渡截止：${time(credential.previous_valid_until)}。期间暂不能再次换证，以免中断还在用旧 Token 的服务。` : '当前没有有效的旧 Token 过渡期，可从凭据卡片发起换证。';
|
||
$('access-help-transition').hidden = !transitioning;
|
||
}
|
||
function showCredentialHelp(credential) {
|
||
ui.helpCredential = credential.id; renderCredentialHelp(); $('access-help-dialog').showModal();
|
||
}
|
||
function open(credential = null, mode = 'ROTATE') {
|
||
if (ui.busy) return;
|
||
ui.rotating = credential; ui.mode = credential ? mode : 'CREATE'; ui.pending = null; ui.result = null; ui.saved = true;
|
||
$('access-form').reset(); $('access-form').querySelectorAll('input,select,button').forEach(el => { el.disabled = false; }); $('access-form').hidden = false; $('access-result').hidden = true; $('access-backup').hidden = true; $('access-form-error').textContent = '';
|
||
$('access-result-config').value = ''; $('access-clipboard-status').textContent = '';
|
||
$('access-create-fields').hidden = !!credential;
|
||
$('access-create-fields').querySelectorAll('input,select').forEach(el => { el.disabled = !!credential; });
|
||
const titles = { CREATE: '新建应用', ROTATE: '平滑换证', SET_EXPIRY: '调整有效期', FINALIZE: '结束过渡' };
|
||
$('access-form-title').textContent = titles[ui.mode];
|
||
$('access-valid-field').hidden = ui.mode === 'FINALIZE';
|
||
$('access-grace-field').hidden = ui.mode !== 'ROTATE';
|
||
$('access-form-note').textContent = {
|
||
CREATE: '为应用创建独立的环境、队列与调用凭据，默认长期有效。',
|
||
ROTATE: '生成新 Token 后，旧 Token 在过渡期内继续可用。逐台更新服务配置并正常收尾在途任务；确认全部切换后，再结束过渡。',
|
||
SET_EXPIRY: '只调整当前 Token 的有效期，Token 和业务配置保持不变。已有旧 Token 的过渡截止不会延长。',
|
||
FINALIZE: '此操作立即停用旧 Token，新 Token 继续有效。请先确认全部服务、Worker 和结果消费者已切换，在途执行已收尾。'
|
||
}[ui.mode];
|
||
$('access-token-once-note').hidden = !['CREATE', 'ROTATE'].includes(ui.mode);
|
||
$('access-submit').textContent = ui.mode === 'CREATE' ? '创建并生成凭据 →' : `确认${titles[ui.mode]} →`;
|
||
$('access-dialog').showModal(); (credential ? $('access-reason') : $('access-name')).focus();
|
||
}
|
||
function close() {
|
||
if (ui.busy) return;
|
||
if ((ui.pending || !ui.saved) && !window.confirm(ui.pending ? '操作结果尚未确认，请先保存待核对操作。仍要关闭吗？' : '请确认已保存完整 SDK 配置。关闭后无法再次查看 Token；如果还在换证过渡期，也不能立即再次换证。仍要关闭吗？')) return;
|
||
$('access-dialog').close(); ui.pending = null; ui.result = null; ui.saved = true; $('access-result-config').value = ''; load();
|
||
}
|
||
function download(name, content, type = 'text/plain') {
|
||
const url = URL.createObjectURL(new Blob([content], { type })); const a = document.createElement('a'); a.href = url; a.download = name; a.click(); setTimeout(() => URL.revokeObjectURL(url), 1000);
|
||
}
|
||
async function copy(value, button) {
|
||
try { await navigator.clipboard.writeText(value); const old = button.textContent; button.textContent = '已复制 ✓'; setTimeout(() => { button.textContent = old; }, 2000); return true; }
|
||
catch { ($('access-dialog').open ? $('access-clipboard-status') : $('access-error')).textContent = '浏览器未允许复制，请选中配置后手动复制，或下载 .env 文件。'; return false; }
|
||
}
|
||
async function submit(event) {
|
||
event.preventDefault(); if (ui.busy) return; ui.busy = true; $('access-form-error').textContent = '';
|
||
const form = $('access-form'); const disabled = [...form.elements].map(el => [el, el.disabled]);
|
||
try {
|
||
if (!ui.pending) {
|
||
const input = { kind: ui.mode, valid_days: ui.mode === 'FINALIZE' ? 0 : Number($('access-valid-days').value), reason: $('access-reason').value.trim(), expected_revision: ui.rotating ? String(ui.rotating.revision) : '0' };
|
||
if (ui.mode === 'ROTATE') input.grace_days = Number($('access-grace-days').value);
|
||
if (ui.rotating) Object.assign(input, { namespace_id: ui.selected, credential_id: ui.rotating.id });
|
||
else Object.assign(input, { application: $('access-name').value.trim(), namespace: $('access-namespace').value.trim(), environment: $('access-environment').value, queue: $('access-queue-name').value.trim(), capabilities: [...document.querySelectorAll('.access-capabilities input:checked')].map(el => el.value) });
|
||
form.querySelectorAll('input,select,button').forEach(el => { el.disabled = true; });
|
||
ui.pending = await api('/prepare', input);
|
||
}
|
||
form.querySelectorAll('input,select,button').forEach(el => { el.disabled = true; });
|
||
const op = ui.pending;
|
||
await api('/apply', op);
|
||
ui.saved = !op.token;
|
||
let queue = op.queue_id || $('access-queue').value;
|
||
// 先确认当前凭据版本，旧操作回执不能冒充仍有效的最新 Token。
|
||
await select(op.namespace_id);
|
||
const credential = ui.detail?.entry.namespace_id === op.namespace_id && ui.detail.credentials.find(c => c.id === op.credential_id);
|
||
const expected = op.input.kind === 'CREATE' ? '1' : String(BigInt(op.input.expected_revision) + 1n);
|
||
if (!credential || String(credential.revision) !== expected || credential.revoked_at) throw new Error('操作已提交，但凭据已被更新或暂时无法核对，请刷新应用详情；不要使用旧操作中的 Token。');
|
||
if (!credential.permissions.queues.includes('*') && !credential.permissions.queues.includes(queue)) queue = ui.detail.queues.find(q => credential.permissions.queues.includes(q.id))?.id || '';
|
||
const preparedConfig = op.token ? config(op.token, queue, op.namespace_id) : '';
|
||
ui.result = op; ui.pending = null;
|
||
$('access-form').hidden = true; $('access-result').hidden = false;
|
||
$('access-token-once-note').hidden = true;
|
||
$('access-result-title').textContent = { CREATE: '应用已创建，可以接入', ROTATE: '新 Token 已生效', SET_EXPIRY: '有效期已更新，原 Token 继续使用', FINALIZE: '过渡已结束，旧 Token 已停用' }[op.input.kind];
|
||
$('access-result-note').hidden = !op.token; $('access-result-config-field').hidden = !op.token; $('access-result-actions').hidden = !op.token;
|
||
$('access-result-config').value = preparedConfig;
|
||
$('access-result-expiry').textContent = `当前 Token：${time(credential.expires_at)}。${credential.previous_valid_until ? `旧 Token 截止：${time(credential.previous_valid_until)}，请在此之前完成切换。` : '无旧 Token 过渡。'}`;
|
||
} catch (error) {
|
||
$('access-form-error').textContent = `${message(error)}${ui.pending ? '。保留当前窗口，点击“重试确认”会使用原操作核对结果。' : ''}`;
|
||
} finally {
|
||
ui.busy = false; disabled.forEach(([el, value]) => { el.disabled = value; });
|
||
$('access-backup').hidden = !ui.pending;
|
||
if (ui.pending) { form.querySelectorAll('input,select').forEach(el => { el.disabled = true; }); $('access-submit').textContent = '重试确认 →'; }
|
||
}
|
||
}
|
||
$('access-url').value = location.origin;
|
||
$('access-list').addEventListener('click', e => { const el = e.target.closest('[data-access-id]'); if (el) select(el.dataset.accessId); });
|
||
$('access-credentials').addEventListener('click', e => {
|
||
const el = e.target.closest('[data-access-help],[data-access-rotate],[data-access-expiry],[data-access-finalize]'); if (!el || el.disabled) return;
|
||
const id = el.dataset.accessHelp || el.dataset.accessRotate || el.dataset.accessExpiry || el.dataset.accessFinalize;
|
||
const credential = ui.detail?.credentials.find(c => c.id === id);
|
||
if (credential && el.dataset.accessHelp) { showCredentialHelp(credential); return; }
|
||
if (credential && !credential.revoked_at) open(credential, el.dataset.accessExpiry ? 'SET_EXPIRY' : el.dataset.accessFinalize ? 'FINALIZE' : 'ROTATE');
|
||
});
|
||
$('access-help-close').addEventListener('click', () => $('access-help-dialog').close());
|
||
$('access-help-done').addEventListener('click', () => $('access-help-dialog').close());
|
||
$('access-create').addEventListener('click', () => open()); $('access-close').addEventListener('click', close);
|
||
$('access-dialog').addEventListener('cancel', e => { e.preventDefault(); close(); });
|
||
$('access-refresh').addEventListener('click', load); $('access-next').addEventListener('click', () => { ui.after = ui.next; load(); }); $('access-first').addEventListener('click', () => { ui.after = ''; load(); });
|
||
$('access-url').addEventListener('input', renderConfig); $('access-queue').addEventListener('change', renderConfig);
|
||
$('access-copy-template').addEventListener('click', async () => { try { await copy(config(), $('access-copy-template')); } catch (error) { $('access-error').textContent = error.message; } });
|
||
$('access-form').addEventListener('submit', submit);
|
||
$('access-copy').addEventListener('click', async () => { if (await copy($('access-result-config').value, $('access-copy'))) ui.saved = true; });
|
||
$('access-download').addEventListener('click', () => { download('orbit.env', $('access-result-config').value); ui.saved = true; });
|
||
$('access-backup').addEventListener('click', () => { if (ui.pending) download(`orbit-operation-${ui.pending.operation_id}.json`, JSON.stringify(ui.pending, null, 2), 'application/json'); });
|
||
window.addEventListener('beforeunload', e => { if (ui.pending || !ui.saved) { e.preventDefault(); e.returnValue = ''; } });
|
||
window.orbitApplications = { load };
|
||
})();
|