workspace: delete workers through runtime
This commit is contained in:
@@ -39,14 +39,15 @@ Deno.test("workspace Worker list lives on the dedicated Workers page", async ()
|
||||
assert(
|
||||
workersPage.includes("workerConsoleHref(worker, data.workspaceId)") &&
|
||||
workersPage.includes('<table class="workers-table">') &&
|
||||
workersPage.includes("Open Console"),
|
||||
"dedicated Workers page should expose a table and attach action per Worker",
|
||||
workersPage.includes('class="icon-action"') &&
|
||||
workersPage.includes('Delete ${worker.label}'),
|
||||
"dedicated Workers page should expose a table, console link target, and icon actions per Worker",
|
||||
);
|
||||
assert(
|
||||
workersNav.includes("href={`/w/${workspaceId}/workers`}") &&
|
||||
workersNav.includes("canOpenWorkerConsole(worker)") &&
|
||||
workersNav.includes('aria-disabled="true"'),
|
||||
"Workers sidebar should link to the Worker list page and render archived Workers as disabled rows",
|
||||
workersNav.includes("filter(canShowWorkerInSidebar)") &&
|
||||
!workersNav.includes('aria-disabled="true"'),
|
||||
"Workers sidebar should link to the Worker list page and omit registry-only Workers",
|
||||
);
|
||||
assert(
|
||||
!sidebar.includes("CompanionNavSection") &&
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { workspaceApiPath } from '$lib/workspace-api/http';
|
||||
import { workerConsoleHref } from '$lib/workspace-console/model';
|
||||
import { canOpenWorkerConsole } from './workers';
|
||||
import { canShowWorkerInSidebar } from './workers';
|
||||
import type { ListResponse, Worker } from './types';
|
||||
|
||||
const MAX_VISIBLE_WORKERS = 6;
|
||||
@@ -49,7 +49,9 @@
|
||||
throw new Error(`workers request failed (${response.status})`);
|
||||
}
|
||||
const payload = (await response.json()) as ListResponse<Worker>;
|
||||
workers = Array.isArray(payload.items) ? payload.items.slice(0, MAX_VISIBLE_WORKERS) : [];
|
||||
workers = Array.isArray(payload.items)
|
||||
? payload.items.filter(canShowWorkerInSidebar).slice(0, MAX_VISIBLE_WORKERS)
|
||||
: [];
|
||||
if (workers.length === 0) {
|
||||
placeholder = 'No workers reported by the current API.';
|
||||
}
|
||||
@@ -100,31 +102,17 @@
|
||||
<ul class="nav-list" aria-label="Workers">
|
||||
{#each workers as worker (`${worker.runtime_id}:${worker.worker_id}`)}
|
||||
{@const href = workerConsoleHref(worker, workspaceId)}
|
||||
{@const consoleAvailable = canOpenWorkerConsole(worker)}
|
||||
<li>
|
||||
{#if consoleAvailable}
|
||||
<a href={href} class="nav-item worker-nav-item" class:active={currentPath === href} aria-current={currentPath === href ? 'page' : undefined}>
|
||||
<span class="worker-title-row">
|
||||
<span class="item-title">{worker.label}</span>
|
||||
<span class="worker-task-title">-</span>
|
||||
</span>
|
||||
<span class="item-meta">
|
||||
{worker.role ? `${worker.role} · ` : ''}{worker.state} · 🖥 {worker.host_id}
|
||||
{worker.working_directory ? ` · wd:${worker.working_directory.repository_id}@${worker.working_directory.resolved_commit.slice(0, 8)}` : ''}
|
||||
</span>
|
||||
</a>
|
||||
{:else}
|
||||
<div class="nav-item worker-nav-item disabled" aria-disabled="true">
|
||||
<span class="worker-title-row">
|
||||
<span class="item-title">{worker.label}</span>
|
||||
<span class="worker-task-title">archived</span>
|
||||
</span>
|
||||
<span class="item-meta">
|
||||
{worker.role ? `${worker.role} · ` : ''}{worker.state} · 🖥 {worker.host_id}
|
||||
{worker.working_directory ? ` · wd:${worker.working_directory.repository_id}@${worker.working_directory.resolved_commit.slice(0, 8)}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<a href={href} class="nav-item worker-nav-item" class:active={currentPath === href} aria-current={currentPath === href ? 'page' : undefined}>
|
||||
<span class="worker-title-row">
|
||||
<span class="item-title">{worker.label}</span>
|
||||
<span class="worker-task-title">-</span>
|
||||
</span>
|
||||
<span class="item-meta">
|
||||
{worker.role ? `${worker.role} · ` : ''}{worker.state} · 🖥 {worker.host_id}
|
||||
{worker.working_directory ? ` · wd:${worker.working_directory.repository_id}@${worker.working_directory.resolved_commit.slice(0, 8)}` : ''}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { canOpenWorkerConsole } from "./workers.ts";
|
||||
import { canOpenWorkerConsole, canShowWorkerInSidebar } from "./workers.ts";
|
||||
import type { Worker } from "./types.ts";
|
||||
|
||||
declare const Deno: {
|
||||
@@ -14,7 +14,7 @@ function assertEquals<T>(actual: T, expected: T): void {
|
||||
function worker(overrides: Partial<Worker>): Worker {
|
||||
return {
|
||||
runtime_id: "arc",
|
||||
worker_id: "worker-1",
|
||||
worker_id: "1",
|
||||
host_id: "host",
|
||||
label: "worker-1",
|
||||
role: null,
|
||||
@@ -39,24 +39,25 @@ function worker(overrides: Partial<Worker>): Worker {
|
||||
};
|
||||
}
|
||||
|
||||
Deno.test("canOpenWorkerConsole rejects archived registry-only workers", () => {
|
||||
assertEquals(
|
||||
canOpenWorkerConsole(worker({
|
||||
state: "archived",
|
||||
implementation: {
|
||||
kind: "backend_worker_registry",
|
||||
display_hint: "Archived Worker",
|
||||
},
|
||||
capabilities: {
|
||||
can_accept_input: false,
|
||||
can_stop: false,
|
||||
can_spawn_followup: false,
|
||||
},
|
||||
})),
|
||||
false,
|
||||
);
|
||||
Deno.test("registry-only workers are not sidebar targets or console targets", () => {
|
||||
const registryOnly = worker({
|
||||
state: "missing",
|
||||
implementation: {
|
||||
kind: "backend_worker_registry",
|
||||
display_hint: "Missing Worker",
|
||||
},
|
||||
capabilities: {
|
||||
can_accept_input: false,
|
||||
can_stop: false,
|
||||
can_spawn_followup: false,
|
||||
},
|
||||
});
|
||||
assertEquals(canShowWorkerInSidebar(registryOnly), false);
|
||||
assertEquals(canOpenWorkerConsole(registryOnly), false);
|
||||
});
|
||||
|
||||
Deno.test("canOpenWorkerConsole accepts live runtime workers", () => {
|
||||
assertEquals(canOpenWorkerConsole(worker({ state: "running" })), true);
|
||||
Deno.test("live runtime workers are sidebar targets and console targets", () => {
|
||||
const liveWorker = worker({ state: "running" });
|
||||
assertEquals(canShowWorkerInSidebar(liveWorker), true);
|
||||
assertEquals(canOpenWorkerConsole(liveWorker), true);
|
||||
});
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import type { Worker } from "./types";
|
||||
|
||||
export function canShowWorkerInSidebar(worker: Worker): boolean {
|
||||
return worker.implementation.kind !== "backend_worker_registry";
|
||||
}
|
||||
|
||||
export function canOpenWorkerConsole(worker: Worker): boolean {
|
||||
return worker.state !== "archived" &&
|
||||
worker.implementation.kind !== "backend_worker_registry";
|
||||
return canShowWorkerInSidebar(worker);
|
||||
}
|
||||
|
||||
@@ -5,32 +5,62 @@
|
||||
import type { CleanupWorkerCandidate, RuntimeCleanupExecutionResponse, RuntimeCleanupPlanResponse, Worker } from '$lib/workspace-sidebar/types';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
type WorkerActionKind = 'pin' | 'delete';
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
let statusMessage = $state<string | null>(null);
|
||||
let cleanupPlans = $state<Record<string, RuntimeCleanupPlanResponse>>({});
|
||||
let busyCleanupTarget = $state<string | null>(null);
|
||||
let busyAction = $state<{ workerKey: string; kind: WorkerActionKind } | null>(null);
|
||||
|
||||
$effect(() => {
|
||||
cleanupPlans = data.cleanupPlans;
|
||||
});
|
||||
|
||||
async function setPinned(worker: Worker, pinned: boolean): Promise<void> {
|
||||
statusMessage = null;
|
||||
function workerKey(worker: Worker): string {
|
||||
return `${worker.runtime_id}/${worker.worker_id}`;
|
||||
}
|
||||
|
||||
function isActionBusy(worker: Worker, kind: WorkerActionKind): boolean {
|
||||
return busyAction?.workerKey === workerKey(worker) && busyAction.kind === kind;
|
||||
}
|
||||
|
||||
function actionsDisabled(): boolean {
|
||||
return busyAction !== null;
|
||||
}
|
||||
|
||||
async function refreshCleanupPlan(runtimeId: string): Promise<void> {
|
||||
const response = await fetch(
|
||||
workspaceApiPath(
|
||||
data.workspaceId,
|
||||
`/runtimes/${encodeURIComponent(worker.runtime_id)}/workers/${encodeURIComponent(worker.worker_id)}/pin`,
|
||||
),
|
||||
{ method: pinned ? 'PUT' : 'DELETE' },
|
||||
workspaceApiPath(data.workspaceId, `/runtimes/${encodeURIComponent(runtimeId)}/cleanup-plan`),
|
||||
);
|
||||
const payload = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
statusMessage = payload?.message ?? payload?.error ?? response.statusText;
|
||||
return;
|
||||
if (!response.ok) return;
|
||||
const plan = (await response.json()) as RuntimeCleanupPlanResponse;
|
||||
cleanupPlans = { ...cleanupPlans, [runtimeId]: plan };
|
||||
}
|
||||
|
||||
async function setPinned(worker: Worker, pinned: boolean): Promise<void> {
|
||||
if (busyAction) return;
|
||||
busyAction = { workerKey: workerKey(worker), kind: 'pin' };
|
||||
statusMessage = null;
|
||||
try {
|
||||
const response = await fetch(
|
||||
workspaceApiPath(
|
||||
data.workspaceId,
|
||||
`/runtimes/${encodeURIComponent(worker.runtime_id)}/workers/${encodeURIComponent(worker.worker_id)}/pin`,
|
||||
),
|
||||
{ method: pinned ? 'PUT' : 'DELETE' },
|
||||
);
|
||||
const payload = await response.json().catch(() => null);
|
||||
if (!response.ok) {
|
||||
statusMessage = payload?.message ?? payload?.error ?? response.statusText;
|
||||
return;
|
||||
}
|
||||
worker.pinned = Boolean(payload?.pinned);
|
||||
worker.retention_state = payload?.retention_state ?? (worker.pinned ? 'pinned' : 'normal');
|
||||
await refreshCleanupPlan(worker.runtime_id);
|
||||
statusMessage = `${worker.label} ${worker.pinned ? 'pinned' : 'unpinned'}.`;
|
||||
} finally {
|
||||
busyAction = null;
|
||||
}
|
||||
worker.pinned = Boolean(payload?.pinned);
|
||||
worker.retention_state = payload?.retention_state ?? (worker.pinned ? 'pinned' : 'normal');
|
||||
statusMessage = `${worker.label} ${worker.pinned ? 'pinned' : 'unpinned'}.`;
|
||||
}
|
||||
|
||||
function cleanupCandidate(worker: Worker): CleanupWorkerCandidate | undefined {
|
||||
@@ -39,10 +69,10 @@
|
||||
);
|
||||
}
|
||||
|
||||
async function deleteWorkerRegistryRow(worker: Worker, candidate: CleanupWorkerCandidate): Promise<void> {
|
||||
if (!cleanupPlans?.[worker.runtime_id]) return;
|
||||
async function deleteWorker(worker: Worker, candidate: CleanupWorkerCandidate): Promise<void> {
|
||||
if (!cleanupPlans?.[worker.runtime_id] || busyAction) return;
|
||||
statusMessage = null;
|
||||
busyCleanupTarget = candidate.target_id;
|
||||
busyAction = { workerKey: workerKey(worker), kind: 'delete' };
|
||||
try {
|
||||
const plan = cleanupPlans[worker.runtime_id];
|
||||
const response = await fetch(
|
||||
@@ -69,11 +99,11 @@
|
||||
(item) => !(item.runtime_id === worker.runtime_id && item.worker_id === worker.worker_id),
|
||||
);
|
||||
}
|
||||
statusMessage = `Deleted Worker registry row for ${worker.label}.`;
|
||||
statusMessage = `Deleted Worker ${worker.label}.`;
|
||||
} catch (error) {
|
||||
statusMessage = error instanceof Error ? error.message : 'Worker cleanup failed';
|
||||
} finally {
|
||||
busyCleanupTarget = null;
|
||||
busyAction = null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,7 +133,7 @@
|
||||
<header class="workers-page-header">
|
||||
<div>
|
||||
<h1 id="workers-heading">Workers</h1>
|
||||
<p>Workers running or persisted for this workspace. Pinning only updates Backend retention.</p>
|
||||
<p>Workers running or persisted for this workspace. Pinning updates Backend retention.</p>
|
||||
{#if statusMessage}<p>{statusMessage}</p>{/if}
|
||||
</div>
|
||||
<a class="section-action" href={`/w/${data.workspaceId}/workers/new`}>New Worker</a>
|
||||
@@ -132,9 +162,15 @@
|
||||
<tbody>
|
||||
{#each data.workers.items as worker}
|
||||
{@const cleanup = cleanupCandidate(worker)}
|
||||
{@const canDelete = cleanup && !cleanup.blocking_reason}
|
||||
{@const anyActionDisabled = actionsDisabled()}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{worker.label}</strong>
|
||||
{#if canOpenWorkerConsole(worker)}
|
||||
<a class="worker-title-link" href={workerConsoleHref(worker, data.workspaceId)}><strong>{worker.label}</strong></a>
|
||||
{:else}
|
||||
<strong>{worker.label}</strong>
|
||||
{/if}
|
||||
<small><code>{worker.worker_id}</code></small>
|
||||
</td>
|
||||
<td><code>{worker.runtime_id}</code></td>
|
||||
@@ -143,24 +179,40 @@
|
||||
<td><span class="pill {worker.pinned ? 'success' : 'muted'}">{worker.retention_state ?? 'normal'}</span></td>
|
||||
<td>{workerDirectory(worker)}</td>
|
||||
<td>
|
||||
{#if canOpenWorkerConsole(worker)}
|
||||
<a class="inline-link" href={workerConsoleHref(worker, data.workspaceId)}>Open Console</a>
|
||||
{:else}
|
||||
<span class="muted" aria-disabled="true">Archived</span>
|
||||
{/if}
|
||||
<button type="button" onclick={() => setPinned(worker, !worker.pinned)}>
|
||||
{worker.pinned ? 'Unpin' : 'Pin'}
|
||||
</button>
|
||||
{#if cleanup}
|
||||
<div class="worker-actions" aria-label={`Actions for ${worker.label}`}>
|
||||
<button
|
||||
class="icon-action"
|
||||
type="button"
|
||||
disabled={!!cleanup.blocking_reason || busyCleanupTarget === cleanup.target_id}
|
||||
title={cleanup.blocking_reason ?? cleanup.reason}
|
||||
onclick={() => deleteWorkerRegistryRow(worker, cleanup)}
|
||||
disabled={anyActionDisabled}
|
||||
aria-label={worker.pinned ? `Unpin ${worker.label}` : `Pin ${worker.label}`}
|
||||
title={worker.pinned ? 'Unpin' : 'Pin'}
|
||||
onclick={() => setPinned(worker, !worker.pinned)}
|
||||
>
|
||||
{busyCleanupTarget === cleanup.target_id ? 'Deleting…' : 'Delete row'}
|
||||
{#if isActionBusy(worker, 'pin')}
|
||||
<span class="spinner" aria-hidden="true"></span>
|
||||
{:else if worker.pinned}
|
||||
<svg class="action-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 17v5" /><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" /><path d="m2 2 20 20" /><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" /></svg>
|
||||
{:else}
|
||||
<svg class="action-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 17v5" /><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" /></svg>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{#if cleanup}
|
||||
<button
|
||||
class="icon-action danger"
|
||||
type="button"
|
||||
disabled={!canDelete || anyActionDisabled}
|
||||
aria-label={`Delete ${worker.label}`}
|
||||
title={cleanup.blocking_reason ?? cleanup.reason}
|
||||
onclick={() => deleteWorker(worker, cleanup)}
|
||||
>
|
||||
{#if isActionBusy(worker, 'delete')}
|
||||
<span class="spinner" aria-hidden="true"></span>
|
||||
{:else}
|
||||
<svg class="action-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
@@ -169,3 +221,78 @@
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.worker-title-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.worker-title-link:hover,
|
||||
.worker-title-link:focus-visible {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.worker-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.icon-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-action:hover:not(:disabled),
|
||||
.icon-action:focus-visible:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.icon-action.danger:hover:not(:disabled),
|
||||
.icon-action.danger:focus-visible:not(:disabled) {
|
||||
border-color: var(--danger, oklch(60% 0.18 30));
|
||||
color: var(--danger, oklch(60% 0.18 30));
|
||||
}
|
||||
|
||||
.icon-action:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 999px;
|
||||
animation: worker-action-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes worker-action-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user