init
This commit is contained in:
commit
b38c39030b
22 changed files with 1925 additions and 0 deletions
202
web/app.js
Normal file
202
web/app.js
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
async function api(path, options = {}) {
|
||||
const res = await fetch(path, {
|
||||
headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
|
||||
...options
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
return res.json();
|
||||
}
|
||||
|
||||
const state = { projects: [], workspaces: [] };
|
||||
|
||||
async function init() {
|
||||
const me = await api('/api/me');
|
||||
document.getElementById('me').textContent = `${me.username} (${me.email || 'no email'})`;
|
||||
|
||||
document.getElementById('workspaceForm').addEventListener('submit', createWorkspace);
|
||||
document.getElementById('createForm').addEventListener('submit', createProject);
|
||||
await refreshWorkspaces();
|
||||
await refreshProjects();
|
||||
}
|
||||
|
||||
async function refreshWorkspaces() {
|
||||
state.workspaces = await api('/api/workspaces');
|
||||
const select = document.getElementById('workspaceSelect');
|
||||
if (state.workspaces.length === 0) {
|
||||
select.innerHTML = '<option value="">Create a workspace first</option>';
|
||||
return;
|
||||
}
|
||||
select.innerHTML = state.workspaces.map((w) => (
|
||||
`<option value="${w.id}">${escapeHtml(w.name)} (${escapeHtml(w.unix_user)})</option>`
|
||||
)).join('');
|
||||
}
|
||||
|
||||
async function refreshProjects() {
|
||||
state.projects = await api('/api/projects');
|
||||
renderProjects();
|
||||
}
|
||||
|
||||
function renderProjects() {
|
||||
const root = document.getElementById('projects');
|
||||
if (state.projects.length === 0) {
|
||||
root.innerHTML = '<p class="muted">No projects yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
root.innerHTML = '';
|
||||
state.projects.forEach((p) => {
|
||||
const div = document.createElement('article');
|
||||
div.className = 'project';
|
||||
div.innerHTML = `
|
||||
<h3>${escapeHtml(p.name)}</h3>
|
||||
<p class="meta">workspace: ${escapeHtml(p.workspace)} (${escapeHtml(p.unix_user)})</p>
|
||||
<p class="meta">slug: ${escapeHtml(p.slug)} | service: ${escapeHtml(p.service_name)}</p>
|
||||
<p class="meta">app target: 127.0.0.1:${escapeHtml(p.target_port)} | route host: ${escapeHtml(p.route_host || 'not set')}</p>
|
||||
<p class="meta">deploy webhook: <code>${escapeHtml(p.webhook_url || 'n/a')}</code></p>
|
||||
<p>${escapeHtml(p.description || '')}</p>
|
||||
${p.repo_url ? `<p><a class="link" href="${p.repo_url}" target="_blank" rel="noreferrer">Open Repository</a></p>` : '<p class="muted">No repository URL set.</p>'}
|
||||
<div class="env-row">
|
||||
<input class="small" placeholder="ENV_KEY" data-k />
|
||||
<input class="small" placeholder="value" data-v />
|
||||
<button class="small" data-add>Add/Update Env</button>
|
||||
<button class="small" data-regen>Regenerate Service</button>
|
||||
</div>
|
||||
<div class="env-list muted" data-env>Loading env vars...</div>
|
||||
<div class="env-row">
|
||||
<button class="small" data-status>Refresh Status</button>
|
||||
<button class="small" data-logs>Load Logs</button>
|
||||
</div>
|
||||
<div class="meta" data-status-out>status: loading...</div>
|
||||
<pre class="meta" data-logs-out style="white-space: pre-wrap; max-height: 220px; overflow: auto;">logs: not loaded</pre>
|
||||
`;
|
||||
|
||||
div.querySelector('[data-add]').addEventListener('click', async () => {
|
||||
const key = div.querySelector('[data-k]').value.trim();
|
||||
const value = div.querySelector('[data-v]').value;
|
||||
await api(`/api/projects/${p.id}/env`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ key, value })
|
||||
});
|
||||
await loadEnvList(div, p.id);
|
||||
});
|
||||
|
||||
div.querySelector('[data-regen]').addEventListener('click', async () => {
|
||||
await api(`/api/projects/${p.id}/service`, { method: 'POST' });
|
||||
alert('Service regenerated and systemctl --user reload attempted.');
|
||||
});
|
||||
div.querySelector('[data-status]').addEventListener('click', async () => {
|
||||
await loadStatus(div, p.id);
|
||||
});
|
||||
div.querySelector('[data-logs]').addEventListener('click', async () => {
|
||||
await loadLogs(div, p.id);
|
||||
});
|
||||
|
||||
root.appendChild(div);
|
||||
loadEnvList(div, p.id);
|
||||
loadStatus(div, p.id);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadEnvList(projectNode, projectID) {
|
||||
const envs = await api(`/api/projects/${projectID}/env`);
|
||||
const envRoot = projectNode.querySelector('[data-env]');
|
||||
if (envs.length === 0) {
|
||||
envRoot.innerHTML = 'No env vars';
|
||||
return;
|
||||
}
|
||||
envRoot.innerHTML = envs.map((e) => {
|
||||
return `<div><code>${escapeHtml(e.key)}</code>=<code>${escapeHtml(e.value)}</code> <button class="small danger" data-del="${escapeHtml(e.key)}">Delete</button></div>`;
|
||||
}).join('');
|
||||
|
||||
envRoot.querySelectorAll('[data-del]').forEach((btn) => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const key = btn.getAttribute('data-del');
|
||||
await api(`/api/projects/${projectID}/env?key=${encodeURIComponent(key)}`, { method: 'DELETE' });
|
||||
await loadEnvList(projectNode, projectID);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function loadStatus(projectNode, projectID) {
|
||||
const out = projectNode.querySelector('[data-status-out]');
|
||||
out.textContent = 'status: loading...';
|
||||
try {
|
||||
const s = await api(`/api/projects/${projectID}/status`);
|
||||
out.textContent = `status: ${s.active_state}/${s.sub_state} pid=${s.main_pid} result=${s.result || 'n/a'} exit=${s.exec_status}`;
|
||||
} catch (err) {
|
||||
out.textContent = `status error: ${err.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLogs(projectNode, projectID) {
|
||||
const out = projectNode.querySelector('[data-logs-out]');
|
||||
out.textContent = 'loading logs...';
|
||||
try {
|
||||
const res = await api(`/api/projects/${projectID}/logs?lines=200`);
|
||||
out.textContent = res.logs || '(no logs)';
|
||||
} catch (err) {
|
||||
out.textContent = `logs error: ${err.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function createProject(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const payload = {
|
||||
workspace_id: Number(form.workspace_id.value),
|
||||
name: form.name.value,
|
||||
description: form.description.value,
|
||||
repo_url: form.repo_url.value.trim(),
|
||||
repo_private: form.repo_private.checked,
|
||||
target_port: Number(form.target_port.value || 8000)
|
||||
};
|
||||
const msg = document.getElementById('createMsg');
|
||||
msg.textContent = 'Creating project...';
|
||||
try {
|
||||
await api('/api/projects', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
msg.textContent = 'Project created.';
|
||||
form.reset();
|
||||
form.repo_private.checked = true;
|
||||
await refreshProjects();
|
||||
} catch (err) {
|
||||
msg.textContent = `Error: ${err.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
async function createWorkspace(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const payload = {
|
||||
name: form.name.value.trim(),
|
||||
unix_user: form.unix_user.value.trim()
|
||||
};
|
||||
const msg = document.getElementById('workspaceMsg');
|
||||
msg.textContent = 'Creating workspace...';
|
||||
try {
|
||||
await api('/api/workspaces', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
msg.textContent = 'Workspace created.';
|
||||
form.reset();
|
||||
await refreshWorkspaces();
|
||||
} catch (err) {
|
||||
msg.textContent = `Error: ${err.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replaceAll('&', '&')
|
||||
.replaceAll('<', '<')
|
||||
.replaceAll('>', '>')
|
||||
.replaceAll('"', '"')
|
||||
.replaceAll("'", ''');
|
||||
}
|
||||
|
||||
init().catch((err) => {
|
||||
document.getElementById('projects').innerHTML = `<p class="muted">Failed to load: ${escapeHtml(err.message)}</p>`;
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue