diff --git a/static/index.html b/static/index.html index a8409f0..09cc6fe 100644 --- a/static/index.html +++ b/static/index.html @@ -127,9 +127,20 @@ } #ps-table th.model-col, #ps-table td.model { - min-width: 340px; + min-width: 200px; + max-width: 300px; white-space: nowrap; } + /* Optimize narrow columns */ + #ps-table th:nth-child(3), + #ps-table td:nth-child(3), + #ps-table th:nth-child(4), + #ps-table td:nth-child(4), + #ps-table th:nth-child(5), + #ps-table td:nth-child(5) { + width: 80px; + text-align: center; + } .loading { color: #777; font-style: italic; @@ -364,14 +375,13 @@ Model Endpoint - Instance count Params Quant Ctx Size Until Digest - Token + Tokens @@ -829,16 +839,41 @@ function renderTimeSeriesChart(timeSeriesData, chart, minutes) { if (value === null || value === undefined || value === "") { return "Forever"; } + + let targetTime; if (typeof value === "number") { const ms = value > 1e12 ? value : value * 1000; - const date = new Date(ms); - return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString(); + targetTime = new Date(ms); + } else if (typeof value === "string") { + targetTime = new Date(value); + } else { + return String(value); } - if (typeof value === "string") { - const date = new Date(value); - return Number.isNaN(date.getTime()) ? value : date.toLocaleString(); + + if (Number.isNaN(targetTime.getTime())) { + return String(value); + } + + const now = new Date(); + const diffMs = targetTime - now; + const diffSec = Math.floor(Math.abs(diffMs) / 1000); + const diffMin = Math.floor(diffSec / 60); + const diffHours = Math.floor(diffMin / 60); + const diffDays = Math.floor(diffHours / 24); + + if (diffMs < 0) { + return "expired"; + } + + if (diffMin < 1) { + return `in ${diffSec} sec`; + } else if (diffMin < 60) { + return `in ${diffMin} min`; + } else if (diffHours < 24) { + return `in ${diffHours} hr`; + } else { + return `in ${diffDays} days`; } - return String(value); }; const renderInstanceList = (items) => { @@ -859,9 +894,7 @@ function renderTimeSeriesChart(timeSeriesData, chart, minutes) { formatUntil(m.until ?? m.expires_at ?? m.expiresAt ?? m.expire_at), ); const digest = modelInstances[0]?.digest || ""; - const shortDigest = digest.length > 24 - ? `${digest.slice(0, 12)}...${digest.slice(-12)}` - : digest; + const shortDigest = digest ? digest.slice(-6) : ""; const params = modelInstances[0]?.details?.parameter_size ?? ""; const quant = modelInstances[0]?.details?.quantization_level ?? ""; const ctx = modelInstances[0]?.context_length ?? ""; @@ -870,7 +903,6 @@ function renderTimeSeriesChart(timeSeriesData, chart, minutes) { return ` ${modelName} stats ${renderInstanceList(endpoints)} - ${instanceCount} ${params} ${quant} ${ctx}