Merge dev into main #17
@@ -9,6 +9,7 @@
|
||||
import Settings from "./routes/Settings.svelte";
|
||||
import ChatSummary from "./routes/ChatSummary.svelte";
|
||||
import Security from "./routes/Security.svelte";
|
||||
import LiteLLM from "./routes/LiteLLM.svelte";
|
||||
import Login from "./routes/Login.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { getToken, checkAuth, setToken, setRefreshToken, currentUser, setCurrentUser, getPreferences, savePreferences } from "./lib/api.js";
|
||||
@@ -153,6 +154,8 @@
|
||||
<Settings />
|
||||
{:else if page === "security" && hasPageAccess("security")}
|
||||
<Security />
|
||||
{:else if page === "litellm" && hasPageAccess("dashboard")}
|
||||
<LiteLLM />
|
||||
{:else}
|
||||
<Dashboard />
|
||||
{/if}
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
|
||||
const defaultLinks = [
|
||||
{ id: "dashboard", label: "Overview", icon: "grid" },
|
||||
{ id: "litellm", label: "LiteLLM", icon: "bolt" },
|
||||
{ id: "docker", label: "Docker", icon: "box" },
|
||||
{ id: "files", label: "Files", icon: "folder" },
|
||||
{ id: "terminal", label: "Terminal", icon: "terminal" },
|
||||
@@ -228,6 +229,8 @@
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
|
||||
{:else if icon === "box"}
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
||||
{:else if icon === "bolt"}
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M13 3L4 14h6l-1 7 9-11h-6l1-7z" /></svg>
|
||||
{:else if icon === "folder"}
|
||||
<svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
|
||||
{:else if icon === "terminal"}
|
||||
|
||||
@@ -139,6 +139,10 @@ export function savePreferences(data) {
|
||||
return request("/auth/preferences", { method: "PUT", json: data });
|
||||
}
|
||||
|
||||
export function getLiteLLMHealth() {
|
||||
return get("/litellm/health");
|
||||
}
|
||||
|
||||
export function put(path, data) {
|
||||
return request(path, { method: "PUT", json: data });
|
||||
}
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { getLiteLLMHealth } from "../lib/api.js";
|
||||
|
||||
let loading = $state(true);
|
||||
let health = $state(null);
|
||||
let requestError = $state("");
|
||||
|
||||
async function loadHealth() {
|
||||
loading = true;
|
||||
requestError = "";
|
||||
try {
|
||||
health = await getLiteLLMHealth();
|
||||
} catch (e) {
|
||||
requestError = e?.body?.detail || e?.message || "Failed to load LiteLLM health";
|
||||
health = null;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function statusBadgeClass(status) {
|
||||
if (status === "up") {
|
||||
return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300";
|
||||
}
|
||||
if (status === "auth_required") {
|
||||
return "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300";
|
||||
}
|
||||
return "bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300";
|
||||
}
|
||||
|
||||
function valueOrDash(value) {
|
||||
return value === null || value === undefined || value === "" ? "—" : value;
|
||||
}
|
||||
|
||||
onMount(loadHealth);
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">LiteLLM</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">Gateway health and connectivity status</p>
|
||||
<div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] font-medium">
|
||||
<span class="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">up</span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">auth_required</span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">down</span>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick={loadHealth} disabled={loading} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50 dark:bg-primary-900/30 dark:text-primary-300">
|
||||
{loading ? "Loading..." : "Refresh"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if requestError}
|
||||
<div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 rounded-xl p-4 shadow-sm">
|
||||
<p class="text-sm font-medium text-rose-700 dark:text-rose-300">Failed to fetch LiteLLM health</p>
|
||||
<p class="text-xs text-rose-600 dark:text-rose-400 mt-1">{requestError}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
|
||||
{#if loading && !health}
|
||||
<div class="space-y-3">
|
||||
<div class="h-6 w-36 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{#each Array(6) as _}
|
||||
<div class="h-16 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else if health}
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Health Status</h3>
|
||||
<span class="px-2.5 py-1 text-xs font-semibold rounded-full {statusBadgeClass(health.status)}">{valueOrDash(health.status)}</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">OK</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{String(Boolean(health.ok))}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Latency</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{health.latency_ms === null || health.latency_ms === undefined ? "—" : `${health.latency_ms} ms`}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Endpoint</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.endpoint)}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">HTTP Status</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.http_status)}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3 sm:col-span-2 lg:col-span-2">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Error</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.error)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-sm text-surface-400">No health data available.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user