pablinux/SIAX-MONITOR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Corregir renderizado de apps en index.html

Browse Source 
Problema:
- La tabla mostraba [object Object] en lugar del nombre de la app
- El estado siempre aparecía como Unknown
- No usaba las propiedades del objeto JSON (name, status, port, service_name)

Solución:
- Actualizar displayApps() para acceder a app.name, app.status, app.service_name
- Agregar badges de colores según estado:
  * Running: verde
  * Stopped: gris
  * Failed: rojo
  * Starting: azul
  * Stopping: amarillo
  * Unknown: gris
- Cambiar botón de more_vert a visibility para ver logs
- Mostrar service_name debajo del nombre de la app

Ahora la tabla muestra correctamente la información de las apps detectadas
This commit is contained in:
pablinux
2026-01-18 03:49:53 -05:00
parent f9e6439b24
commit 87ce154789
1 changed files with 48 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
web/index.html
View File

@@ -496,8 +496,45 @@
function displayApps(apps) {
const tbody = document.getElementById("apps-tbody");
tbody.innerHTML = apps
.map(
(app) => `
.map((app) => {
// Determinar color del badge según estado
const statusColors = {
Running: {
bg: "bg-green-100 dark:bg-green-900/30",
text: "text-green-700 dark:text-green-400",
dot: "bg-green-500",
},
Stopped: {
bg: "bg-gray-100 dark:bg-gray-800",
text: "text-gray-700 dark:text-gray-400",
dot: "bg-gray-400",
},
Failed: {
bg: "bg-red-100 dark:bg-red-900/30",
text: "text-red-700 dark:text-red-400",
dot: "bg-red-500",
},
Starting: {
bg: "bg-blue-100 dark:bg-blue-900/30",
text: "text-blue-700 dark:text-blue-400",
dot: "bg-blue-500",
},
Stopping: {
bg: "bg-yellow-100 dark:bg-yellow-900/30",
text: "text-yellow-700 dark:text-yellow-400",
dot: "bg-yellow-500",
},
Unknown: {
bg: "bg-slate-100 dark:bg-slate-800",
text: "text-slate-700 dark:text-slate-400",
dot: "bg-slate-400",
},
};
const statusStyle =
statusColors[app.status] || statusColors["Unknown"];
return `
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
@@ -505,28 +542,28 @@
<span class="material-symbols-outlined text-primary text-lg">terminal</span>
</div>
<div>
<p class="text-slate-900 dark:text-white font-semibold text-sm">${app}</p>
<p class="text-slate-500 text-xs">Servicio</p>
<p class="text-slate-900 dark:text-white font-semibold text-sm">${app.name}</p>
<p class="text-slate-500 text-xs">${app.service_name || "Servicio"}</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400">
<span class="size-1.5 rounded-full bg-slate-400"></span>
Unknown
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${statusStyle.bg} ${statusStyle.text}">
<span class="size-1.5 rounded-full ${statusStyle.dot}"></span>
${app.status}
</span>
</td>
<td class="px-6 py-4 text-sm">-</td>
<td class="px-6 py-4 text-sm">-</td>
<td class="px-6 py-4 text-sm text-slate-500">-</td>
<td class="px-6 py-4 text-right">
<button class="text-slate-400 hover:text-white transition-colors">
<span class="material-symbols-outlined">more_vert</span>
<button class="text-slate-400 hover:text-white transition-colors" onclick="window.location.href='/logs'">
<span class="material-symbols-outlined">visibility</span>
</button>
</td>
</tr>
`,
)
`;
})
.join("");
}