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

feat: add cc-connect start/stop controls
Deploy Dashboard (Dev) / deploy-dev (push) Has been cancelled
Details

Browse Source 
Add backend start/stop endpoints and wire cc-connect UI controls to toggle container state with post-action health refresh and clear error handling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Gan, Jimmy
2026-03-03 00:11:53 +08:00
parent 755a0b6ae9
commit d8e6f5716a
3 changed files with 133 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/routes/CcConnect.svelte
+41 -5
View File
@@ -1,10 +1,11 @@
<script>
import { onMount } from "svelte";
import { getCcConnectHealth } from "../lib/api.js";
import { getCcConnectHealth, startCcConnect, stopCcConnect } from "../lib/api.js";
let loading = $state(true);
let health = $state(null);
let requestError = $state("");
let actionLoading = $state("");
async function loadHealth() {
loading = true;
@@ -19,6 +20,22 @@
}
}
async function runAction(action) {
actionLoading = action;
requestError = "";
try {
const result = action === "start" ? await startCcConnect() : await stopCcConnect();
if (!result?.ok) {
requestError = result?.error || `Failed to ${action} cc-connect`;
}
} catch (e) {
requestError = e?.body?.detail || e?.message || `Failed to ${action} cc-connect`;
} finally {
actionLoading = "";
await loadHealth();
}
}
function statusBadgeClass(status) {
if (status === "up") {
return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300";
@@ -43,14 +60,33 @@
<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 class="flex items-center gap-2">
{#if health?.container_status === "running"}
<button
onclick={() => runAction("stop")}
disabled={loading || actionLoading === "stop"}
class="px-3 py-1.5 text-xs font-medium text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-colors disabled:opacity-50"
>
{actionLoading === "stop" ? "Stopping..." : "Stop"}
</button>
{:else}
<button
onclick={() => runAction("start")}
disabled={loading || actionLoading === "start"}
class="px-3 py-1.5 text-xs font-medium text-emerald-600 bg-emerald-50 hover:bg-emerald-100 rounded-lg transition-colors disabled:opacity-50"
>
{actionLoading === "start" ? "Starting..." : "Start"}
</button>
{/if}
<button onclick={loadHealth} disabled={loading || Boolean(actionLoading)} 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>
</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-sm font-medium text-rose-700 dark:text-rose-300">cc-connect action failed</p>
<p class="text-xs text-rose-600 dark:text-rose-400 mt-1">{requestError}</p>
</div>
{/if}