jimmy/nas-tools
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: add cc-connect dashboard health integration
Deploy Dashboard (Dev) / deploy-dev (push) Successful in 2m49s
Details

Browse Source 
Add a protected backend health endpoint and a new dashboard page/sidebar entry so cc-connect operational status is visible in the UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Gan, Jimmy
2026-03-02 23:24:03 +08:00
parent e76f15c432
commit 14965c7e03
8 changed files with 242 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/backend/config.py
+3
View File
@@ -48,6 +48,9 @@ CHAT_SUMMARY_DB = os.environ.get("CHAT_SUMMARY_DB", "/app/data/chat-summarizer/c
LITELLM_URL = os.environ.get("LITELLM_URL", "http://127.0.0.1:4005")
LITELLM_HEALTH_API_KEY = os.environ.get("LITELLM_HEALTH_API_KEY", "")
# CC Connect
CC_CONNECT_URL = os.environ.get("CC_CONNECT_URL", "")
# OpenClaw
OPENCLAW_GATEWAY_TOKEN = os.environ.get("OPENCLAW_GATEWAY_TOKEN", "")
dashboard/backend/main.py
+3 -1
View File
@@ -6,7 +6,7 @@ from fastapi.responses import JSONResponse
from slowapi import Limiter
from slowapi.util import get_remote_address
from slowapi.errors import RateLimitExceeded
from routers import docker_router, gitea, files, terminal, system, auth, chat_summary, security, passkey, totp, litellm
from routers import docker_router, gitea, files, terminal, system, auth, chat_summary, security, passkey, totp, litellm, cc_connect
import auth as auth_module
from rbac import require_page, require_write
@@ -181,6 +181,8 @@ app.include_router(system.router, prefix="/api/system",
dependencies=[Depends(_inject_user), Depends(require_page("dashboard"))])
app.include_router(litellm.router, prefix="/api/litellm",
dependencies=[Depends(_inject_user), Depends(require_page("dashboard"))])
app.include_router(cc_connect.router, prefix="/api/cc-connect",
dependencies=[Depends(_inject_user), Depends(require_page("dashboard"))])
app.include_router(chat_summary.router, prefix="/api/chat-summary",
dependencies=[Depends(_inject_user), Depends(require_page("chat-digest"))])
app.include_router(security.router, prefix="/api/security",
dashboard/backend/routers/cc_connect.py
+107
View File
@@ -0,0 +1,107 @@
import time
import docker
import httpx
from fastapi import APIRouter
from config import CC_CONNECT_URL, DOCKER_HOST
router = APIRouter()
client = docker.DockerClient(base_url=DOCKER_HOST, timeout=5)
@router.get("/health")
async def cc_connect_health():
url = (CC_CONNECT_URL or "").strip()
container = None
try:
matches = client.containers.list(all=True, filters={"name": "cc-connect"})
if matches:
container = matches[0]
except Exception as exc:
return {
"ok": False,
"status": "down",
"source": "docker",
"container_name": None,
"container_status": None,
"endpoint": None,
"http_status": None,
"latency_ms": None,
"error": f"docker check failed: {exc}",
}
container_name = container.name if container else None
container_status = container.status if container else "not_found"
container_up = container_status == "running"
if not url:
return {
"ok": container_up,
"status": "up" if container_up else "down",
"source": "docker",
"container_name": container_name,
"container_status": container_status,
"endpoint": None,
"http_status": None,
"latency_ms": None,
"error": None if container_up else "cc-connect container is not running",
}
timeout = httpx.Timeout(2.0)
started = time.perf_counter()
try:
async with httpx.AsyncClient(timeout=timeout) as http_client:
response = await http_client.get(url)
latency_ms = round((time.perf_counter() - started) * 1000, 1)
if response.is_success and container_up:
return {
"ok": True,
"status": "up",
"source": "docker+http",
"container_name": container_name,
"container_status": container_status,
"endpoint": url,
"http_status": response.status_code,
"latency_ms": latency_ms,
"error": None,
}
if response.is_success and not container_up:
return {
"ok": False,
"status": "down",
"source": "docker+http",
"container_name": container_name,
"container_status": container_status,
"endpoint": url,
"http_status": response.status_code,
"latency_ms": latency_ms,
"error": "HTTP probe succeeded but cc-connect container is not running",
}
return {
"ok": False,
"status": "down",
"source": "docker+http",
"container_name": container_name,
"container_status": container_status,
"endpoint": url,
"http_status": response.status_code,
"latency_ms": latency_ms,
"error": f"HTTP probe returned {response.status_code}",
}
except Exception as exc:
return {
"ok": False,
"status": "down",
"source": "docker+http",
"container_name": container_name,
"container_status": container_status,
"endpoint": url,
"http_status": None,
"latency_ms": None,
"error": str(exc),
}
dashboard/frontend/src/App.svelte
+3
View File
@@ -10,6 +10,7 @@
import ChatSummary from "./routes/ChatSummary.svelte";
import Security from "./routes/Security.svelte";
import LiteLLM from "./routes/LiteLLM.svelte";
import CcConnect from "./routes/CcConnect.svelte";
import Login from "./routes/Login.svelte";
import { onMount } from "svelte";
import { getToken, checkAuth, setToken, setRefreshToken, currentUser, setCurrentUser, getPreferences, savePreferences } from "./lib/api.js";
@@ -156,6 +157,8 @@
<Security />
{:else if page === "litellm" && hasPageAccess("dashboard")}
<LiteLLM />
{:else if page === "cc-connect" && hasPageAccess("dashboard")}
<CcConnect />
{:else}
<Dashboard />
{/if}
dashboard/frontend/src/components/Sidebar.svelte
+1
View File
@@ -42,6 +42,7 @@
const defaultTools = [
{ id: "openclaw", label: "OpenClaw", icon: "openclaw" },
{ id: "cc-connect", label: "cc-connect", icon: "users" },
{ id: "chat-digest", label: "Chat Digest", icon: "chat" },
{ id: "gitea", label: "Repos", icon: "git" },
{ label: "Gitea Web", remoteHref: "https://git.jimmygan.com:8443", icon: "git", external: true },
dashboard/frontend/src/lib/api.js
+4
View File
@@ -143,6 +143,10 @@ export function getLiteLLMHealth() {
return get("/litellm/health");
}
export function getCcConnectHealth() {
return get("/cc-connect/health");
}
export function put(path, data) {
return request(path, { method: "PUT", json: data });
}
dashboard/frontend/src/routes/CcConnect.svelte
+119
View File
@@ -0,0 +1,119 @@
<script>
import { onMount } from "svelte";
import { getCcConnectHealth } from "../lib/api.js";
let loading = $state(true);
let health = $state(null);
let requestError = $state("");
async function loadHealth() {
loading = true;
requestError = "";
try {
health = await getCcConnectHealth();
} catch (e) {
requestError = e?.body?.detail || e?.message || "Failed to load cc-connect 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";
}
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">cc-connect</h1>
<p class="text-sm text-surface-400 mt-1">Mobile bridge operational 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-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 cc-connect 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(8) 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">Source</p>
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.source)}</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">Container</p>
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_name)}</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">Container Status</p>
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_status)}</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 break-all">{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">
<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 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>