@@ -0,0 +1,766 @@
|
||||
const state = {
|
||||
summary: null,
|
||||
detail: null,
|
||||
newKey: null,
|
||||
loading: false
|
||||
};
|
||||
|
||||
const content = document.getElementById("content");
|
||||
const notice = document.getElementById("notice");
|
||||
const pageTitle = document.getElementById("pageTitle");
|
||||
const pageSubtitle = document.getElementById("pageSubtitle");
|
||||
const sidebarMeta = document.getElementById("sidebarMeta");
|
||||
|
||||
document.getElementById("refreshButton").addEventListener("click", () => refresh(true));
|
||||
window.addEventListener("hashchange", () => renderRoute());
|
||||
|
||||
content.addEventListener("click", async (event) => {
|
||||
const button = event.target.closest("button[data-action]");
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { action, clientId, model, keyId } = button.dataset;
|
||||
|
||||
try {
|
||||
setBusy(button, true);
|
||||
|
||||
if (action === "disable-hour") {
|
||||
await api(`/clients/${encodeURIComponent(clientId)}/disable`, {
|
||||
method: "POST",
|
||||
body: { mode: "duration", durationMinutes: 60 }
|
||||
});
|
||||
setNotice(`Disabled ${clientId} for one hour.`);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
if (action === "disable-manual") {
|
||||
await api(`/clients/${encodeURIComponent(clientId)}/disable`, {
|
||||
method: "POST",
|
||||
body: { mode: "manual" }
|
||||
});
|
||||
setNotice(`Disabled ${clientId}.`);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
if (action === "enable-client") {
|
||||
await api(`/clients/${encodeURIComponent(clientId)}/enable`, { method: "POST" });
|
||||
setNotice(`Enabled ${clientId}.`);
|
||||
await refresh();
|
||||
}
|
||||
|
||||
if (action === "model-command") {
|
||||
await runModelCommand(clientId, model, button.dataset.modelAction);
|
||||
}
|
||||
|
||||
if (action === "delete-key") {
|
||||
if (!confirm("Delete this API key?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
await api(`/api-keys/${encodeURIComponent(keyId)}`, { method: "DELETE" });
|
||||
setNotice("API key deleted.");
|
||||
await refresh();
|
||||
}
|
||||
|
||||
if (action === "copy-key") {
|
||||
await navigator.clipboard.writeText(button.dataset.key);
|
||||
setNotice("API key copied.");
|
||||
}
|
||||
} catch (error) {
|
||||
setNotice(error.message, true);
|
||||
} finally {
|
||||
setBusy(button, false);
|
||||
}
|
||||
});
|
||||
|
||||
content.addEventListener("submit", async (event) => {
|
||||
const form = event.target;
|
||||
if (!(form instanceof HTMLFormElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
const data = Object.fromEntries(new FormData(form).entries());
|
||||
const submit = form.querySelector("button[type=submit]");
|
||||
|
||||
try {
|
||||
setBusy(submit, true);
|
||||
|
||||
if (form.dataset.form === "model-action") {
|
||||
await runModelCommand(data.clientId, data.model, data.action);
|
||||
form.reset();
|
||||
}
|
||||
|
||||
if (form.dataset.form === "model-detail") {
|
||||
await loadModelDetail(data.model, data.clientId);
|
||||
}
|
||||
|
||||
if (form.dataset.form === "api-key") {
|
||||
state.newKey = await api("/api-keys", {
|
||||
method: "POST",
|
||||
body: { name: data.name }
|
||||
});
|
||||
setNotice("API key created.");
|
||||
await refresh();
|
||||
}
|
||||
} catch (error) {
|
||||
setNotice(error.message, true);
|
||||
} finally {
|
||||
setBusy(submit, false);
|
||||
}
|
||||
});
|
||||
|
||||
async function boot() {
|
||||
await refresh();
|
||||
setInterval(() => refresh(), 15000);
|
||||
}
|
||||
|
||||
async function refresh(showNotice = false, render = true) {
|
||||
state.loading = true;
|
||||
|
||||
try {
|
||||
state.summary = await api("/summary");
|
||||
updateShell();
|
||||
if (render) {
|
||||
await renderRoute();
|
||||
}
|
||||
|
||||
if (showNotice) {
|
||||
setNotice("Refreshed.");
|
||||
}
|
||||
} catch (error) {
|
||||
setNotice(error.message, true);
|
||||
content.innerHTML = `<div class="panel"><div class="empty">${escapeHtml(error.message)}</div></div>`;
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function api(path, options = {}) {
|
||||
const headers = options.headers ? { ...options.headers } : {};
|
||||
const init = {
|
||||
method: options.method || "GET",
|
||||
credentials: "same-origin",
|
||||
headers
|
||||
};
|
||||
|
||||
if (options.body !== undefined) {
|
||||
headers["Content-Type"] = "application/json";
|
||||
init.body = JSON.stringify(options.body);
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/admin${path}`, init);
|
||||
const contentType = response.headers.get("content-type") || "";
|
||||
const body = contentType.includes("application/json")
|
||||
? await response.json()
|
||||
: await response.text();
|
||||
|
||||
if (!response.ok) {
|
||||
const message = body?.detail || body?.error || body?.title || response.statusText;
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
return body;
|
||||
}
|
||||
|
||||
async function renderRoute() {
|
||||
const hash = (window.location.hash || "#clients").slice(1);
|
||||
const [view, encodedModel] = hash.split("/");
|
||||
|
||||
document.querySelectorAll("[data-nav]").forEach((link) => {
|
||||
link.classList.toggle("active", link.dataset.nav === view);
|
||||
});
|
||||
|
||||
if (view === "models" && encodedModel) {
|
||||
const model = decodeURIComponent(encodedModel);
|
||||
await loadModelDetail(model);
|
||||
return;
|
||||
}
|
||||
|
||||
state.detail = null;
|
||||
|
||||
if (view === "models") {
|
||||
renderModels();
|
||||
return;
|
||||
}
|
||||
|
||||
if (view === "api-keys") {
|
||||
renderApiKeys();
|
||||
return;
|
||||
}
|
||||
|
||||
renderClients();
|
||||
}
|
||||
|
||||
function updateShell() {
|
||||
const summary = state.summary;
|
||||
if (!summary) {
|
||||
return;
|
||||
}
|
||||
|
||||
sidebarMeta.innerHTML = `
|
||||
<div>${escapeHtml(summary.user?.name || "Signed in")}</div>
|
||||
<div>${summary.clients.length} clients</div>
|
||||
<div>${summary.models.length} models</div>
|
||||
<div>${formatDate(summary.generatedAtUtc)}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderClients() {
|
||||
const clients = state.summary?.clients || [];
|
||||
pageTitle.textContent = "Clients";
|
||||
pageSubtitle.textContent = "Connected tunnel clients, request counts, and forwarding controls.";
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Clients</h2>
|
||||
<span class="badge">${clients.length} total</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
${clients.length ? clientsTable(clients) : emptyState("No clients have connected yet.")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function clientsTable(clients) {
|
||||
const rows = clients.map((client) => `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell-main">${escapeHtml(client.id)}</div>
|
||||
<div class="cell-sub">${client.connected ? "Connected" : "Offline"}${client.modelsUpdatedAt ? `, models ${formatDate(client.modelsUpdatedAt)}` : ""}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="badge-row">
|
||||
${client.connected ? badge("Connected", "good") : badge("Offline", "")}
|
||||
${client.disabled ? badge(client.disabledManually ? "Disabled manual" : "Disabled timed", "bad") : badge("Enabled", "good")}
|
||||
</div>
|
||||
${client.disabled ? `<div class="cell-sub">${escapeHtml(disabledText(client))}</div>` : ""}
|
||||
</td>
|
||||
<td>${number(client.pendingRequests)}</td>
|
||||
<td>
|
||||
<div class="cell-main">${number(client.requestStats.total)}</div>
|
||||
<div class="cell-sub">${number(client.requestStats.last10Minutes)} in 10m, ${number(client.requestStats.lastHour)} in 1h</div>
|
||||
</td>
|
||||
<td>${modelBadges(client.models)}</td>
|
||||
<td>${modelBadges(client.activeModels)}</td>
|
||||
<td>
|
||||
<div class="actions">
|
||||
<button class="button warning" data-action="disable-hour" data-client-id="${escapeAttr(client.id)}" ${client.disabled ? "disabled" : ""}>Disable 1h</button>
|
||||
<button class="button warning" data-action="disable-manual" data-client-id="${escapeAttr(client.id)}" ${client.disabled ? "disabled" : ""}>Disable</button>
|
||||
<button class="button secondary" data-action="enable-client" data-client-id="${escapeAttr(client.id)}" ${client.disabled ? "" : "disabled"}>Enable</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
|
||||
return `
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client</th>
|
||||
<th>Status</th>
|
||||
<th>Pending</th>
|
||||
<th>Requests</th>
|
||||
<th>Listed models</th>
|
||||
<th>Active models</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${rows}</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderModels() {
|
||||
const models = state.summary?.models || [];
|
||||
const clients = connectedClients();
|
||||
pageTitle.textContent = "Models";
|
||||
pageSubtitle.textContent = "Listed and active models, recent request volume, and model operations.";
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Run model action</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
${modelActionForm(clients)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Models</h2>
|
||||
<span class="badge">${models.length} total</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
${models.length ? modelsTable(models) : emptyState("No models have been reported yet.")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function modelActionForm(clients, selectedModel = "", selectedClient = "") {
|
||||
return `
|
||||
<form class="form-row" data-form="model-action">
|
||||
<div class="field">
|
||||
<label for="modelActionClient">Client</label>
|
||||
<select class="select" id="modelActionClient" name="clientId" required>
|
||||
${clientOptions(clients, selectedClient)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="modelActionModel">Model</label>
|
||||
<input class="input" id="modelActionModel" name="model" value="${escapeAttr(selectedModel)}" placeholder="llama3.1" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="modelActionAction">Action</label>
|
||||
<select class="select" id="modelActionAction" name="action" required>
|
||||
<option value="add">Add</option>
|
||||
<option value="load">Load</option>
|
||||
<option value="unload">Unload</option>
|
||||
<option value="remove">Remove</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="button" type="submit" ${clients.length ? "" : "disabled"}>Run</button>
|
||||
</form>
|
||||
`;
|
||||
}
|
||||
|
||||
function modelsTable(models) {
|
||||
const rows = models.map((model) => `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell-main">${escapeHtml(model.name)}</div>
|
||||
<div class="cell-sub">${number(model.metrics.totalRequests)} total requests</div>
|
||||
</td>
|
||||
<td>${modelBadges(model.listedClients)}</td>
|
||||
<td>${modelBadges(model.activeClients)}</td>
|
||||
<td>
|
||||
<div class="cell-main">${number(model.metrics.requestsLast10Minutes)}</div>
|
||||
<div class="cell-sub">${number(model.metrics.requestsLastHour)} in last hour</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell-main">${number(model.metrics.tokensLast10Minutes)}</div>
|
||||
<div class="cell-sub">${number(model.metrics.tokensLastHour)} in last hour</div>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button secondary" href="#models/${encodeURIComponent(model.name)}">Details</a>
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
|
||||
return `
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Model</th>
|
||||
<th>Listed on</th>
|
||||
<th>Active on</th>
|
||||
<th>Requests 10m</th>
|
||||
<th>Tokens 10m</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${rows}</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
async function loadModelDetail(model, clientId) {
|
||||
pageTitle.textContent = "Model Detail";
|
||||
pageSubtitle.textContent = model;
|
||||
content.innerHTML = `<div class="panel"><div class="empty">Loading model detail...</div></div>`;
|
||||
|
||||
const query = new URLSearchParams({ model });
|
||||
if (clientId) {
|
||||
query.set("clientId", clientId);
|
||||
}
|
||||
|
||||
state.detail = await api(`/models/detail?${query.toString()}`);
|
||||
renderModelDetail();
|
||||
}
|
||||
|
||||
function renderModelDetail() {
|
||||
const detail = state.detail;
|
||||
const clients = connectedClients();
|
||||
const model = detail.model;
|
||||
const selectedClient = detail.selectedClientId || clients[0]?.id || "";
|
||||
const metrics = detail.metrics;
|
||||
const showBody = detail.show?.body === undefined ? null : detail.show.body;
|
||||
|
||||
pageTitle.textContent = "Model Detail";
|
||||
pageSubtitle.textContent = model;
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="toolbar">
|
||||
<a class="button secondary" href="#models">Back to models</a>
|
||||
</div>
|
||||
<div class="metric-grid">
|
||||
${metric(number(metrics.requestsLast10Minutes), "Requests in 10 minutes")}
|
||||
${metric(number(metrics.requestsLastHour), "Requests in 1 hour")}
|
||||
${metric(number(metrics.tokensLast10Minutes), "Tokens in 10 minutes")}
|
||||
${metric(number(metrics.tokensLastHour), "Tokens in 1 hour")}
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Placement</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="badge-row">
|
||||
${badge("Listed", detail.listedClients.length ? "good" : "")}
|
||||
${modelBadges(detail.listedClients)}
|
||||
</div>
|
||||
<div class="badge-row" style="margin-top:8px">
|
||||
${badge("Active", detail.activeClients.length ? "good" : "warn")}
|
||||
${modelBadges(detail.activeClients)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Client action</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form class="form-row" data-form="model-detail">
|
||||
<input type="hidden" name="model" value="${escapeAttr(model)}">
|
||||
<div class="field">
|
||||
<label for="detailClient">Client</label>
|
||||
<select class="select" id="detailClient" name="clientId" required>
|
||||
${clientOptions(clients, selectedClient)}
|
||||
</select>
|
||||
</div>
|
||||
<button class="button secondary" type="submit" ${clients.length ? "" : "disabled"}>Refresh detail</button>
|
||||
</form>
|
||||
<div class="actions" style="margin-top:10px">
|
||||
<button class="button secondary" data-action="model-command" data-model-action="load" data-client-id="${escapeAttr(selectedClient)}" data-model="${escapeAttr(model)}" ${selectedClient ? "" : "disabled"}>Load</button>
|
||||
<button class="button secondary" data-action="model-command" data-model-action="unload" data-client-id="${escapeAttr(selectedClient)}" data-model="${escapeAttr(model)}" ${selectedClient ? "" : "disabled"}>Unload</button>
|
||||
<button class="button danger" data-action="model-command" data-model-action="remove" data-client-id="${escapeAttr(selectedClient)}" data-model="${escapeAttr(model)}" ${selectedClient ? "" : "disabled"}>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Ollama show response</h2>
|
||||
${detail.show ? badge(detail.show.ok ? "OK" : `HTTP ${detail.show.statusCode}`, detail.show.ok ? "good" : "bad") : ""}
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
${detail.show ? `<pre class="pre">${escapeHtml(formatJson(showBody))}</pre>` : emptyState("No connected client was available for details.")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function runModelCommand(clientId, model, action) {
|
||||
if (!clientId || !model || !action) {
|
||||
throw new Error("Client, model, and action are required.");
|
||||
}
|
||||
|
||||
if (action === "remove" && !confirm(`Remove ${model} from ${clientId}?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await api("/models/actions", {
|
||||
method: "POST",
|
||||
body: { clientId, model, action }
|
||||
});
|
||||
|
||||
if (!result.ok) {
|
||||
throw new Error(modelActionError(result));
|
||||
}
|
||||
|
||||
const detail = modelActionResultDetail(result);
|
||||
const completed = `${capitalize(action)} completed for ${model} on ${clientId}${detail ? ` (${detail})` : ""}.`;
|
||||
|
||||
if (action === "load" || action === "unload") {
|
||||
const shouldBeActive = action === "load";
|
||||
setNotice(`${completed} Waiting for active model snapshot.`);
|
||||
|
||||
if (await waitForModelActiveState(clientId, model, shouldBeActive)) {
|
||||
setNotice(completed);
|
||||
return;
|
||||
}
|
||||
|
||||
setNotice(`${completed} The active model snapshot has not reflected the change yet.`);
|
||||
return;
|
||||
}
|
||||
|
||||
setNotice(completed);
|
||||
await refreshAfterModelCommand(model, clientId);
|
||||
}
|
||||
|
||||
function renderApiKeys() {
|
||||
const keys = state.summary?.apiKeys || [];
|
||||
pageTitle.textContent = "API Keys";
|
||||
pageSubtitle.textContent = "Keys accepted by the proxy token header, bearer auth, query token, and token path.";
|
||||
|
||||
content.innerHTML = `
|
||||
${state.newKey ? newKeyPanel(state.newKey) : ""}
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Create API key</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form class="form-row" data-form="api-key">
|
||||
<div class="field">
|
||||
<label for="apiKeyName">Name</label>
|
||||
<input class="input" id="apiKeyName" name="name" placeholder="e.g. openwebui_prod" required>
|
||||
</div>
|
||||
<button class="button" type="submit">Create</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>API keys</h2>
|
||||
<span class="badge">${keys.length} total</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
${keys.length ? apiKeysTable(keys) : emptyState("No API keys have been created.")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function newKeyPanel(key) {
|
||||
return `
|
||||
<div class="new-key">
|
||||
<strong>New API key</strong>
|
||||
<code>${escapeHtml(key.key)}</code>
|
||||
<div class="actions">
|
||||
<button class="button secondary" type="button" data-action="copy-key" data-key="${escapeAttr(key.key)}">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function apiKeysTable(keys) {
|
||||
const rows = keys.map((key) => `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell-main">${escapeHtml(key.name)}</div>
|
||||
<div class="cell-sub">${escapeHtml(key.keyPrefix)}...</div>
|
||||
</td>
|
||||
<td>${formatDate(key.createdAtUtc)}</td>
|
||||
<td>${key.lastUsedUtc ? formatDate(key.lastUsedUtc) : "Never"}</td>
|
||||
<td>
|
||||
<button class="button danger" data-action="delete-key" data-key-id="${escapeAttr(key.id)}">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
|
||||
return `
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Created</th>
|
||||
<th>Last used</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${rows}</tbody>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
|
||||
function connectedClients() {
|
||||
return (state.summary?.clients || []).filter((client) => client.connected);
|
||||
}
|
||||
|
||||
async function waitForModelActiveState(clientId, model, shouldBeActive) {
|
||||
const deadline = Date.now() + 15000;
|
||||
|
||||
while (Date.now() <= deadline) {
|
||||
await refreshAfterModelCommand(model, clientId);
|
||||
|
||||
const client = (state.summary?.clients || [])
|
||||
.find((item) => sameText(item.id, clientId));
|
||||
|
||||
if (client && modelListContains(client.activeModels, model) === shouldBeActive) {
|
||||
return true;
|
||||
}
|
||||
|
||||
await delay(1000);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
async function refreshAfterModelCommand(model, clientId) {
|
||||
await refresh(false, false);
|
||||
|
||||
const hash = window.location.hash || "";
|
||||
if (hash.startsWith(`#models/${encodeURIComponent(model)}`)) {
|
||||
await loadModelDetail(model, clientId);
|
||||
return;
|
||||
}
|
||||
|
||||
await renderRoute();
|
||||
}
|
||||
|
||||
function modelActionResultDetail(result) {
|
||||
const body = result?.body;
|
||||
|
||||
if (!body || typeof body === "string") {
|
||||
return body || "";
|
||||
}
|
||||
|
||||
if (body.status) {
|
||||
return body.status;
|
||||
}
|
||||
|
||||
if (body.done_reason) {
|
||||
return `done: ${body.done_reason}`;
|
||||
}
|
||||
|
||||
if (body.done) {
|
||||
return "done";
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
function modelActionError(result) {
|
||||
const body = result?.body;
|
||||
|
||||
if (typeof body === "string" && body) {
|
||||
return body;
|
||||
}
|
||||
|
||||
if (body?.error) {
|
||||
return body.error;
|
||||
}
|
||||
|
||||
if (body?.message) {
|
||||
return body.message;
|
||||
}
|
||||
|
||||
return `Model action failed with HTTP ${result.statusCode}.`;
|
||||
}
|
||||
|
||||
function modelListContains(models, model) {
|
||||
return (models || []).some((item) => sameModelName(item, model));
|
||||
}
|
||||
|
||||
function sameModelName(left, right) {
|
||||
return stripLatestTag(left).toLowerCase() === stripLatestTag(right).toLowerCase();
|
||||
}
|
||||
|
||||
function sameText(left, right) {
|
||||
return String(left || "").trim().toLowerCase() === String(right || "").trim().toLowerCase();
|
||||
}
|
||||
|
||||
function stripLatestTag(model) {
|
||||
const value = String(model || "").trim();
|
||||
return value.toLowerCase().endsWith(":latest") ? value.slice(0, -":latest".length) : value;
|
||||
}
|
||||
|
||||
function delay(milliseconds) {
|
||||
return new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
}
|
||||
|
||||
function clientOptions(clients, selectedClient) {
|
||||
if (!clients.length) {
|
||||
return `<option value="">No connected clients</option>`;
|
||||
}
|
||||
|
||||
return clients.map((client) => `
|
||||
<option value="${escapeAttr(client.id)}" ${client.id === selectedClient ? "selected" : ""}>${escapeHtml(client.id)}</option>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
function modelBadges(items) {
|
||||
if (!items || !items.length) {
|
||||
return `<span class="cell-sub">None</span>`;
|
||||
}
|
||||
|
||||
return `<div class="badge-row">${items.map((item) => badge(item, "")).join("")}</div>`;
|
||||
}
|
||||
|
||||
function badge(text, kind) {
|
||||
return `<span class="badge ${kind || ""}">${escapeHtml(text)}</span>`;
|
||||
}
|
||||
|
||||
function metric(value, label) {
|
||||
return `
|
||||
<div class="metric">
|
||||
<strong>${escapeHtml(value)}</strong>
|
||||
<span>${escapeHtml(label)}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function emptyState(text) {
|
||||
return `<div class="empty">${escapeHtml(text)}</div>`;
|
||||
}
|
||||
|
||||
function disabledText(client) {
|
||||
if (client.disabledManually) {
|
||||
return "Until enabled manually";
|
||||
}
|
||||
|
||||
return client.disabledUntilUtc ? `Until ${formatDate(client.disabledUntilUtc)}` : "Disabled";
|
||||
}
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: "short",
|
||||
timeStyle: "medium"
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
function formatJson(value) {
|
||||
if (typeof value === "string") {
|
||||
return value;
|
||||
}
|
||||
|
||||
return JSON.stringify(value, null, 2);
|
||||
}
|
||||
|
||||
function number(value) {
|
||||
return new Intl.NumberFormat().format(value || 0);
|
||||
}
|
||||
|
||||
function capitalize(value) {
|
||||
return value ? value[0].toUpperCase() + value.slice(1) : value;
|
||||
}
|
||||
|
||||
function setNotice(message, isError = false) {
|
||||
notice.hidden = false;
|
||||
notice.textContent = message;
|
||||
notice.classList.toggle("error", isError);
|
||||
|
||||
clearTimeout(setNotice.timer);
|
||||
setNotice.timer = setTimeout(() => {
|
||||
notice.hidden = true;
|
||||
}, isError ? 7000 : 3500);
|
||||
}
|
||||
|
||||
function setBusy(element, busy) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.disabled = busy;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
function escapeAttr(value) {
|
||||
return escapeHtml(value);
|
||||
}
|
||||
|
||||
boot();
|
||||
Reference in New Issue
Block a user