nomyo-ai/nomyo-router
2
2
Fork 0
Code Issues 1 Pull requests Projects Releases 5 Packages 1 Wiki Activity Actions

fix: optimize table column widths and improve time formatting for responsive layout

Browse source 
- Reduced min-width of model columns from 340px to 200px with max-width of 300px
- Added specific styling for narrow columns (3rd-5th) with fixed width and center alignment
- Removed "Instance count" as it has redundant information
- Enhanced time formatting logic to show relative time instead of absolute dates
- Simplified digest display to show last 6 characters instead of truncated format
- Added proper handling for various time value types (number, string, null)
This commit is contained in:
Alpha Nerd 2026-01-29 10:54:43 +01:00
parent d3aa87ca15
commit efdf14a207
1 changed files with 45 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

58
static/index.html
View file

@ -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 @@
<tr>
<th class="model-col">Model</th>
<th>Endpoint</th>
<th>Instance count</th>
<th>Params</th>
<th>Quant</th>
<th>Ctx</th>
<th>Size</th>
<th>Until</th>
<th>Digest</th>
<th>Token</th>
<th>Tokens</th>
</tr>
</thead>
<tbody id="ps-body">
@ -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 `<tr data-model="${modelName}" data-endpoints="${endpointsData}">
<td class="model">${modelName} <a href="#" class="stats-link" data-model="${modelName}">stats</a></td>
<td>${renderInstanceList(endpoints)}</td>
<td>${instanceCount}</td>
<td>${params}</td>
<td>${quant}</td>
<td>${ctx}</td>