will/flynn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add whisper docker dependency status to gateway dashboard

Browse Source
This commit is contained in:
William Valentin
2026-02-22 19:20:09 -08:00
parent d4a13e3c71
commit 8fcbb5f521
11 changed files with 559 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gateway/ui/pages/dashboard.js
+61 -1
View File
@@ -386,6 +386,12 @@ function renderSkeleton(el) {
<div id="ops-local-backends" class="grid grid-cols-1 md:grid-cols-2 gap-3">
<div class="text-sm text-zinc-500">Loading...</div>
</div>
<h2 class="text-lg font-semibold text-zinc-50 mb-4 mt-8 pb-2 border-b border-zinc-800">Docker Dependencies</h2>
<div class="text-xs text-zinc-500 mb-2">Status for docker-compose services Flynn depends on (for example local Whisper transcription).</div>
<div id="ops-docker-dependencies" class="grid grid-cols-1 md:grid-cols-2 gap-3">
<div class="text-sm text-zinc-500">Loading...</div>
</div>
<div id="ops-service-config-modal-root"></div>
`;
}
@@ -1421,6 +1427,7 @@ function updateAssistantHealth(configData) {
}
updateServices(refreshed.services);
updateLocalBackends(refreshed.localBackends);
updateDockerDependencies(refreshed.dockerDependencies);
updateSessionAnalytics(refreshed.sessionAnalytics);
updateContextHealth(refreshed.contextUsage);
// Only re-render assistant controls from a confirmed config snapshot.
@@ -1612,6 +1619,47 @@ function updateLocalBackends(localBackendsData) {
});
}
function updateDockerDependencies(dockerDependenciesData) {
const el = document.getElementById('ops-docker-dependencies');
if (!el) {return;}
const dependencies = dockerDependenciesData?.dependencies ?? [];
if (dependencies.length === 0) {
el.innerHTML = '<div class="text-sm text-zinc-500">No docker dependencies detected</div>';
return;
}
el.innerHTML = dependencies.map((dependency) => {
const state = String(dependency.state ?? 'unknown');
const health = String(dependency.health ?? 'unknown');
const statusText = String(dependency.statusText ?? state);
const configured = Boolean(dependency.configured);
const configuredText = configured ? 'configured' : 'not configured';
const configuredClass = configured ? 'text-blue-400' : 'text-zinc-500';
const toneClass = state === 'running'
? 'text-green-500'
: state === 'not-found'
? 'text-amber-500'
: state === 'unknown'
? 'text-red-500'
: 'text-zinc-400';
const containerName = dependency.containerName ? String(dependency.containerName) : '—';
return `<div class="bg-zinc-900 border border-zinc-800 rounded-lg p-3 flex flex-col gap-2">
<div class="flex items-center justify-between gap-2">
<div class="text-sm font-semibold text-zinc-50">${escapeHtml(String(dependency.name ?? dependency.id ?? 'dependency'))}</div>
<span class="text-xs uppercase ${toneClass}">${escapeHtml(statusText)}</span>
</div>
<div class="text-xs text-zinc-500">Compose service: <span class="font-mono text-zinc-400">${escapeHtml(String(dependency.service ?? 'unknown'))}</span></div>
<div class="text-xs text-zinc-500">Container: <span class="font-mono text-zinc-400">${escapeHtml(containerName)}</span></div>
<div class="text-xs text-zinc-500">State: <span class="font-mono text-zinc-400">${escapeHtml(state)}</span> · Health: <span class="font-mono text-zinc-400">${escapeHtml(health)}</span></div>
<div class="text-xs ${configuredClass}">${escapeHtml(configuredText)}</div>
${dependency.error ? `<div class="text-xs text-red-400">Error: ${escapeHtml(String(dependency.error))}</div>` : ''}
</div>`;
}).join('');
}
async function handleLocalBackendAction(backendId, action) {
if (!_dashboardClient) {return;}
const actionLabel = LOCAL_BACKEND_ACTION_LABELS[action] ?? action;
@@ -1640,6 +1688,9 @@ async function handleLocalBackendAction(backendId, action) {
if (refreshed?.localBackends) {
updateLocalBackends(refreshed.localBackends);
}
if (refreshed?.dockerDependencies) {
updateDockerDependencies(refreshed.dockerDependencies);
}
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
_localBackendActionState.set(backendId, {
@@ -1822,6 +1873,7 @@ function renderServiceConfigModal() {
if (refreshed) {
updateServices(refreshed.services);
updateLocalBackends(refreshed.localBackends);
updateDockerDependencies(refreshed.dockerDependencies);
updateSessionAnalytics(refreshed.sessionAnalytics);
updateContextHealth(refreshed.contextUsage);
if (refreshed.config) {
@@ -1854,10 +1906,11 @@ async function fetchFast(client) {
}
async function fetchSlow(client) {
const [health, services, localBackends, sessionAnalytics, contextUsage, config, modelCatalog] = await Promise.allSettled([
const [health, services, localBackends, dockerDependencies, sessionAnalytics, contextUsage, config, modelCatalog] = await Promise.allSettled([
client.call('system.health'),
client.call('system.services'),
client.call('system.localBackends'),
client.call('system.dockerDependencies'),
client.call('system.sessionAnalytics', { days: 14, topLimit: 5 }),
client.call('system.contextUsage'),
client.call('config.get'),
@@ -1876,6 +1929,7 @@ async function fetchSlow(client) {
health: unwrap(health),
services: unwrap(services),
localBackends: unwrap(localBackends),
dockerDependencies: unwrap(dockerDependencies),
sessionAnalytics: unwrap(sessionAnalytics),
contextUsage: unwrap(contextUsage),
config: configValue,
@@ -1915,6 +1969,9 @@ async function loadDashboard(el, client) {
if (slow?.localBackends) {
updateLocalBackends(slow.localBackends);
}
if (slow?.dockerDependencies) {
updateDockerDependencies(slow.dockerDependencies);
}
if (slow?.sessionAnalytics) {
updateSessionAnalytics(slow.sessionAnalytics);
}
@@ -1953,6 +2010,9 @@ async function loadDashboard(el, client) {
if (data.localBackends) {
updateLocalBackends(data.localBackends);
}
if (data.dockerDependencies) {
updateDockerDependencies(data.dockerDependencies);
}
if (data.sessionAnalytics) {
updateSessionAnalytics(data.sessionAnalytics);
}