lucasacchi/llm-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show model details in modal with close controls

Browse Source 
- Replace inline details panel with centered modal overlay
- Add close button (X) in top-right of modal
- Add close on backdrop click
- Add close on Escape key
- Lock body scroll while modal is open
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-24 20:10:37 +02:00
parent f19c03b7bd
commit e05df7ce2b
2 changed files with 48 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/static/js/app.js
+31 -4
View File
@@ -49,6 +49,23 @@ class LLMMonitorApp {
}
this.showModelDetails(decodeURIComponent(modelKey));
});
// Chiusura modal con pulsante X
document.getElementById("model-details-close")?.addEventListener("click", () => {
this.hideModelDetails();
});
// Chiusura modal con click su overlay
document.getElementById("model-details-backdrop")?.addEventListener("click", () => {
this.hideModelDetails();
});
// Chiusura modal con tasto Esc
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
this.hideModelDetails();
}
});
}
// Caricare dati da localStorage
@@ -195,11 +212,11 @@ class LLMMonitorApp {
}
showModelDetails(modelName) {
const detailsSection = document.getElementById("model-details-section");
const detailsModal = document.getElementById("model-details-modal");
const detailsName = document.getElementById("model-details-name");
const detailsContent = document.getElementById("model-details-content");
if (!detailsSection || !detailsName || !detailsContent || !this.lastData.models) {
if (!detailsModal || !detailsName || !detailsContent || !this.lastData.models) {
return;
}
@@ -207,9 +224,9 @@ class LLMMonitorApp {
const showData = showByModel[modelName];
this.selectedModelName = modelName;
detailsSection.classList.remove("hidden");
detailsModal.classList.remove("hidden");
document.body.classList.add("overflow-hidden");
detailsName.textContent = modelName;
detailsSection.scrollIntoView({ behavior: "smooth", block: "start" });
if (!showData) {
detailsContent.textContent = "Dettagli show non disponibili per questo modello.";
@@ -219,6 +236,16 @@ class LLMMonitorApp {
detailsContent.textContent = JSON.stringify(showData, null, 2);
}
hideModelDetails() {
const detailsModal = document.getElementById("model-details-modal");
if (!detailsModal || detailsModal.classList.contains("hidden")) {
return;
}
detailsModal.classList.add("hidden");
document.body.classList.remove("overflow-hidden");
}
// Formattare bytes
formatBytes(bytes) {
if (bytes === 0) return "0 B";
app/web/templates/index.html
+17 -9
View File
@@ -75,15 +75,6 @@
</div>
</div>
<!-- Model Show Details -->
<div id="model-details-section" class="mt-8 bg-gray-800 rounded-lg border border-gray-700 p-6 hidden">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">Dettagli Modello</h3>
<span id="model-details-name" class="text-sm text-purple-300 font-medium"></span>
</div>
<pre id="model-details-content" class="bg-gray-900 text-gray-200 text-xs p-4 rounded-lg overflow-auto max-h-96 whitespace-pre-wrap"></pre>
</div>
<!-- API Documentation Section -->
<div class="mt-8 bg-blue-900 bg-opacity-20 border border-blue-700 rounded-lg p-6">
<h3 class="text-lg font-bold mb-4">📚 Documentazione API</h3>
@@ -108,6 +99,23 @@
</footer>
</div>
<!-- Model Show Details Modal -->
<div id="model-details-modal" class="hidden fixed inset-0 z-50">
<div id="model-details-backdrop" class="absolute inset-0 bg-black/70"></div>
<div class="relative min-h-screen flex items-center justify-center p-4">
<div id="model-details-section" class="w-full max-w-4xl bg-gray-800 rounded-lg border border-gray-700 p-6 shadow-xl">
<div class="flex items-center justify-between mb-4">
<div>
<h3 class="text-lg font-bold">Dettagli Modello</h3>
<span id="model-details-name" class="text-sm text-purple-300 font-medium"></span>
</div>
<button id="model-details-close" type="button" class="text-gray-300 hover:text-white text-2xl leading-none px-2" aria-label="Chiudi modal">×</button>
</div>
<pre id="model-details-content" class="bg-gray-900 text-gray-200 text-xs p-4 rounded-lg overflow-auto max-h-[70vh] whitespace-pre-wrap"></pre>
</div>
</div>
</div>
<!-- LLM Monitor Application -->
<!-- Web Worker for background data sync -->
<!-- localStorage for client-side persistence -->