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

feat: add multi-server control panel and host-aware sync

Browse Source
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-25 15:40:20 +02:00
parent 3ba6a9a41c
commit f60781bd7f
13 changed files with 641 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/templates/index.html
+4 -1
View File
@@ -51,7 +51,9 @@
<h1 class="text-2xl font-bold">LLM Monitor</h1>
</div>
<div class="flex items-center gap-4">
<a href="/models-running" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Running Models</a>
<a id="servers-link" href="/servers" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Servers</a>
<a id="running-link" href="/models-running" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Running Models</a>
<span id="active-server-label" class="hidden text-xs text-gray-300 bg-gray-700 px-3 py-2 rounded-lg"></span>
<div id="health-status" class="flex items-center gap-2">
<div id="status-indicator" class="w-3 h-3 bg-gray-500 rounded-full"></div>
<span id="status-text" class="text-sm text-gray-400">Checking...</span>
@@ -147,6 +149,7 @@
<!-- LLM Monitor Application -->
<!-- Web Worker for background data sync -->
<!-- localStorage for client-side persistence -->
<script src="/static/js/server-config.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/js/pwa-register.js"></script>
</body>
app/web/templates/models_running.html
+4 -1
View File
@@ -34,7 +34,9 @@
</div>
</div>
<div class="flex items-center gap-2">
<a href="/models-available" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Available Models</a>
<a id="servers-link" href="/servers" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Servers</a>
<a id="available-link" href="/models-available" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Available Models</a>
<span id="active-server-label" class="hidden text-xs text-gray-300 bg-gray-700 px-3 py-2 rounded-lg"></span>
<button id="refresh-btn" class="text-sm bg-purple-600 hover:bg-purple-700 px-3 py-2 rounded-lg transition">Refresh</button>
</div>
</div>
@@ -77,6 +79,7 @@
</footer>
</div>
<script src="/static/js/server-config.js"></script>
<script src="/static/js/models-running.js"></script>
<script src="/static/js/pwa-register.js"></script>
</body>
app/web/templates/servers.html
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Monitor - Servers</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#111827">
<meta name="application-name" content="LLM Monitor">
<meta name="description" content="Manage Ollama servers and open detailed dashboards.">
<link rel="stylesheet" href="/static/css/output.css">
</head>
<body class="bg-gray-900 text-white">
<div class="min-h-screen flex flex-col">
<header class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 py-6">
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center font-bold text-lg">
🌐
</div>
<div>
<h1 class="text-2xl font-bold">LLM Monitor Servers</h1>
<p class="text-xs text-gray-400">Configure Ollama endpoints and open per-server dashboards</p>
</div>
</div>
<div class="flex items-center gap-2">
<a href="/models-running" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Running Models</a>
<a href="/models-available" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded-lg transition">Available Models</a>
</div>
</div>
</div>
</header>
<main class="flex-1">
<div class="max-w-7xl mx-auto px-4 py-8 grid grid-cols-1 xl:grid-cols-3 gap-6">
<section class="xl:col-span-2 bg-gray-800 rounded-lg border border-gray-700 p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-bold">Configured Servers</h2>
<span id="servers-count" class="text-sm text-gray-400">0 servers</span>
</div>
<div id="servers-list" class="space-y-3"></div>
</section>
<section class="bg-gray-800 rounded-lg border border-gray-700 p-6">
<h2 class="text-xl font-bold mb-4">Control Panel</h2>
<form id="server-form" class="space-y-4">
<input id="server-id" type="hidden">
<div>
<label for="server-name" class="text-sm text-gray-300 block mb-1">Server Name</label>
<input id="server-name" type="text" required placeholder="Production Ollama" class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div>
<label for="server-host" class="text-sm text-gray-300 block mb-1">Ollama URL</label>
<input id="server-host" type="url" required placeholder="http://192.168.1.50:11434" class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500">
</div>
<div class="flex gap-2">
<button id="save-server-btn" type="submit" class="flex-1 bg-purple-600 hover:bg-purple-700 rounded px-3 py-2 text-sm font-semibold transition">Save Server</button>
<button id="clear-form-btn" type="button" class="bg-gray-700 hover:bg-gray-600 rounded px-3 py-2 text-sm transition">Clear</button>
</div>
</form>
<p class="text-xs text-gray-400 mt-4">All server profiles are saved to localStorage on this device.</p>
</section>
</div>
</main>
<footer class="bg-gray-800 border-t border-gray-700 mt-12">
<div class="max-w-7xl mx-auto px-4 py-6 text-center text-gray-400 text-sm">
<p>LLM Monitor v1.0.0 • Multi-server PWA control panel</p>
</div>
</footer>
</div>
<script src="/static/js/server-config.js"></script>
<script src="/static/js/servers.js"></script>
<script src="/static/js/pwa-register.js"></script>
</body>
</html>