feat: delete task/account, edit endpoint, richer event log
- store: DeleteAccount, DeleteTask, UpdateEndpoint (+ cascade/update tests)
- httpapi: DELETE /tasks/{id}, DELETE /tasks/{id}/accounts/{accountId},
PUT /endpoints/{id}; delete guarded with 409 while task running
- orchestrator: enrich WS events with login/host/port/error (test + run + errors)
- web: delete buttons (task, account) with confirm, endpoint edit form,
human-readable event log (source/dest, host:port, error text)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MMHQTtnQtQqL8muAXHr9kd
This commit is contained in:
@@ -1,16 +1,45 @@
|
||||
import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from 'react'
|
||||
import { createAccount, getTask, importCSV, runTask, testAccounts, type TaskDetail as TaskDetailData } from '../api'
|
||||
import { createAccount, deleteAccount, getTask, importCSV, runTask, testAccounts, type TaskDetail as TaskDetailData } from '../api'
|
||||
import { connectTaskWS, type TaskEvent } from '../ws'
|
||||
import { StatusBadge } from '../components/StatusBadge'
|
||||
|
||||
const emptyAccount = { src_login: '', src_pass: '', dst_login: '', dst_pass: '' }
|
||||
|
||||
// Human-readable one-line description of a task event for the log panel.
|
||||
function describeEvent(ev: TaskEvent): string {
|
||||
const d = (ev.data ?? {}) as Record<string, unknown>
|
||||
const at = d.host ? `${d.login ?? ''}@${d.host}:${d.port}` : ''
|
||||
switch (ev.type) {
|
||||
case 'account_test': {
|
||||
const where = d.side === 'src' ? 'SOURCE' : 'DEST'
|
||||
const base = `${where} test ${String(d.status).toUpperCase()} — ${at}`
|
||||
return d.error ? `${base} — ${d.error}` : base
|
||||
}
|
||||
case 'account_started':
|
||||
return `START #${d.account_id}: ${d.src_login}@${d.src_host}:${d.src_port} → ${d.dst_login}@${d.dst_host}:${d.dst_port}`
|
||||
case 'account_done':
|
||||
return `DONE #${d.account_id} (${d.src_login} → ${d.dst_login}): copied ${d.copied}, skipped ${d.skipped}, errors ${d.errors}`
|
||||
case 'progress':
|
||||
return `progress #${d.account_id}: copied ${d.copied}, skipped ${d.skipped}`
|
||||
case 'error': {
|
||||
const where = d.folder ? ` folder "${d.folder}"` : d.side ? ` (${d.side} ${at})` : ''
|
||||
return `ERROR #${d.account_id}${where}: ${d.error}`
|
||||
}
|
||||
case 'run_started':
|
||||
return `RUN started (run #${d.run_id})`
|
||||
case 'run_done':
|
||||
return `RUN finished: copied ${d.copied}, skipped ${d.skipped}, errors ${d.errors}`
|
||||
default:
|
||||
return JSON.stringify(ev.data)
|
||||
}
|
||||
}
|
||||
|
||||
export function TaskDetail({ id }: { id: number }) {
|
||||
const [data, setData] = useState<TaskDetailData | null>(null)
|
||||
const [notFound, setNotFound] = useState(false)
|
||||
const [log, setLog] = useState<{ type: string; text: string }[]>([])
|
||||
const [form, setForm] = useState(emptyAccount)
|
||||
const [busy, setBusy] = useState<'test' | 'run' | 'add' | 'import' | null>(null)
|
||||
const [busy, setBusy] = useState<'test' | 'run' | 'add' | 'import' | 'delete' | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
@@ -28,7 +57,7 @@ export function TaskDetail({ id }: { id: number }) {
|
||||
useEffect(
|
||||
() =>
|
||||
connectTaskWS(id, (ev: TaskEvent) => {
|
||||
setLog((l) => [{ type: ev.type, text: JSON.stringify(ev.data) }, ...l].slice(0, 300))
|
||||
setLog((l) => [{ type: ev.type, text: describeEvent(ev) }, ...l].slice(0, 300))
|
||||
if (['account_started', 'account_test', 'account_done', 'progress', 'run_started', 'run_done', 'error'].includes(ev.type)) {
|
||||
reload()
|
||||
}
|
||||
@@ -81,6 +110,20 @@ export function TaskDetail({ id }: { id: number }) {
|
||||
}
|
||||
}
|
||||
|
||||
async function onDeleteAccount(accId: number, login: string) {
|
||||
if (!confirm(`Remove account "${login}" from this task?`)) return
|
||||
setBusy('delete')
|
||||
setError(null)
|
||||
try {
|
||||
await deleteAccount(id, accId)
|
||||
reload()
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to remove account')
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function onTest() {
|
||||
setBusy('test')
|
||||
setError(null)
|
||||
@@ -269,12 +312,13 @@ export function TaskDetail({ id }: { id: number }) {
|
||||
<th>Copied</th>
|
||||
<th>Skipped</th>
|
||||
<th>Errors</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{accounts.length === 0 ? (
|
||||
<tr className="empty-row">
|
||||
<td colSpan={8}>no accounts yet — add one or import a CSV above</td>
|
||||
<td colSpan={9}>no accounts yet — add one or import a CSV above</td>
|
||||
</tr>
|
||||
) : (
|
||||
accounts.map((a) => (
|
||||
@@ -293,6 +337,16 @@ export function TaskDetail({ id }: { id: number }) {
|
||||
<td className="num-cell">{a.copied}</td>
|
||||
<td className="num-cell">{a.skipped}</td>
|
||||
<td className="num-cell">{a.errors}</td>
|
||||
<td className="num-cell">
|
||||
<button
|
||||
type="button"
|
||||
className="link-btn danger"
|
||||
onClick={() => onDeleteAccount(a.id, a.src_login)}
|
||||
disabled={busy !== null || data?.task.status === 'running'}
|
||||
>
|
||||
remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user