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
2026-07-02 09:23:14 +07:00
parent 9019511d6f
commit b88f88c1a3
13 changed files with 344 additions and 36 deletions
@@ -71,6 +71,16 @@ export const listEndpoints = () => api<Endpoint[]>('/api/endpoints')
 export const createEndpoint = (body: { role_label: string; host: string; port: number; tls_mode: TLSMode }) =>
  api<{ id: number }>('/api/endpoints', jsonBody(body))

+export const updateEndpoint = (
+  id: number,
+  body: { role_label: string; host: string; port: number; tls_mode: TLSMode },
+) => api(`/api/endpoints/${id}`, { ...jsonBody(body), method: 'PUT' })
+
+export const deleteTask = (id: number) => api(`/api/tasks/${id}`, { method: 'DELETE' })
+
+export const deleteAccount = (taskId: number, accountId: number) =>
+  api(`/api/tasks/${taskId}/accounts/${accountId}`, { method: 'DELETE' })
+
 export const listTasks = () => api<Task[]>('/api/tasks')

 export const getTask = (id: number) => api<TaskDetail>(`/api/tasks/${id}`)
@@ -239,6 +239,21 @@
  color: var(--accent-strong);
 }

+.link-btn.danger {
+  color: var(--fg-faint);
+  border-bottom-color: transparent;
+}
+
+.link-btn.danger:hover {
+  color: var(--danger, #ff5c5c);
+  border-bottom-color: var(--danger, #ff5c5c);
+}
+
+.link-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* ---------- buttons ---------- */

 .btn {
@@ -1,14 +1,26 @@
 import { useEffect, useState, type FormEvent } from 'react'
-import { createEndpoint, listEndpoints, type Endpoint, type TLSMode } from '../api'
+import { createEndpoint, listEndpoints, updateEndpoint, type Endpoint, type TLSMode } from '../api'

 const emptyForm = { role_label: '', host: '', port: '993', tls_mode: 'ssl' as TLSMode }

 export function Endpoints() {
  const [endpoints, setEndpoints] = useState<Endpoint[] | null>(null)
  const [form, setForm] = useState(emptyForm)
+  const [editingId, setEditingId] = useState<number | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [busy, setBusy] = useState(false)

+  function startEdit(ep: Endpoint) {
+    setEditingId(ep.id)
+    setForm({ role_label: ep.role_label, host: ep.host, port: String(ep.port), tls_mode: ep.tls_mode })
+    setError(null)
+  }
+
+  function cancelEdit() {
+    setEditingId(null)
+    setForm(emptyForm)
+  }
+
  function reload() {
    listEndpoints()
      .then((e) => setEndpoints(e ?? []))
@@ -21,17 +33,23 @@ export function Endpoints() {
    e.preventDefault()
    setBusy(true)
    setError(null)
+    const body = {
+      role_label: form.role_label,
+      host: form.host,
+      port: Number(form.port),
+      tls_mode: form.tls_mode,
+    }
    try {
-      await createEndpoint({
-        role_label: form.role_label,
-        host: form.host,
-        port: Number(form.port),
-        tls_mode: form.tls_mode,
-      })
+      if (editingId !== null) {
+        await updateEndpoint(editingId, body)
+      } else {
+        await createEndpoint(body)
+      }
      setForm(emptyForm)
+      setEditingId(null)
      reload()
    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to create endpoint')
+      setError(err instanceof Error ? err.message : 'Failed to save endpoint')
    } finally {
      setBusy(false)
    }
@@ -47,7 +65,7 @@ export function Endpoints() {

      <div className="panel-grid">
        <div className="panel">
-          <span className="panel-label">Register endpoint</span>
+          <span className="panel-label">{editingId !== null ? `Edit endpoint #${editingId}` : 'Register endpoint'}</span>
          <form onSubmit={submit}>
            <div className="field">
              <label htmlFor="role_label">Role label</label>
@@ -96,8 +114,13 @@ export function Endpoints() {
            {error && <div className="error-banner">{error}</div>}
            <div className="btn-row">
              <button className="btn btn-primary" disabled={busy}>
-                {busy ? 'Saving…' : 'Add endpoint'}
+                {busy ? 'Saving…' : editingId !== null ? 'Save changes' : 'Add endpoint'}
              </button>
+              {editingId !== null && (
+                <button type="button" className="btn" onClick={cancelEdit} disabled={busy}>
+                  Cancel
+                </button>
+              )}
            </div>
          </form>
        </div>
@@ -113,16 +136,17 @@ export function Endpoints() {
                  <th>Host</th>
                  <th>Port</th>
                  <th>TLS</th>
+                  <th></th>
                </tr>
              </thead>
              <tbody>
                {endpoints === null ? (
                  <tr className="empty-row">
-                    <td colSpan={5}>loading…</td>
+                    <td colSpan={6}>loading…</td>
                  </tr>
                ) : endpoints.length === 0 ? (
                  <tr className="empty-row">
-                    <td colSpan={5}>no endpoints registered yet</td>
+                    <td colSpan={6}>no endpoints registered yet</td>
                  </tr>
                ) : (
                  endpoints.map((ep) => (
@@ -132,6 +156,11 @@ export function Endpoints() {
                      <td>{ep.host}</td>
                      <td className="num-cell">{ep.port}</td>
                      <td>{ep.tls_mode}</td>
+                      <td className="num-cell">
+                        <button type="button" className="link-btn" onClick={() => startEdit(ep)} disabled={busy}>
+                          edit
+                        </button>
+                      </td>
                    </tr>
                  ))
                )}
@@ -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>
                ))
              )}
@@ -1,5 +1,5 @@
 import { useEffect, useState, type FormEvent } from 'react'
-import { createTask, listEndpoints, listTasks, type Endpoint, type Task } from '../api'
+import { createTask, deleteTask, listEndpoints, listTasks, type Endpoint, type Task } from '../api'
 import { StatusBadge } from '../components/StatusBadge'

 export function Tasks() {
@@ -22,6 +22,17 @@ export function Tasks() {
    listEndpoints().then((e) => setEndpoints(e ?? [])).catch(() => {})
  }, [])

+  async function onDeleteTask(id: number, taskName: string) {
+    if (!confirm(`Delete task "${taskName}" and all its accounts?`)) return
+    setError(null)
+    try {
+      await deleteTask(id)
+      reload()
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to delete task')
+    }
+  }
+
  async function submit(e: FormEvent) {
    e.preventDefault()
    setBusy(true)
@@ -118,16 +129,17 @@ export function Tasks() {
                <th>Name</th>
                <th>Route</th>
                <th>Status</th>
+                <th></th>
              </tr>
            </thead>
            <tbody>
              {tasks === null ? (
                <tr className="empty-row">
-                  <td colSpan={4}>loading…</td>
+                  <td colSpan={5}>loading…</td>
                </tr>
              ) : tasks.length === 0 ? (
                <tr className="empty-row">
-                  <td colSpan={4}>no tasks yet — create one above</td>
+                  <td colSpan={5}>no tasks yet — create one above</td>
                </tr>
              ) : (
                tasks.map((t) => (
@@ -144,6 +156,16 @@ export function Tasks() {
                    <td>
                      <StatusBadge status={t.status} />
                    </td>
+                    <td className="num-cell">
+                      <button
+                        type="button"
+                        className="link-btn danger"
+                        onClick={() => onDeleteTask(t.id, t.name)}
+                        disabled={t.status === 'running'}
+                      >
+                        delete
+                      </button>
+                    </td>
                  </tr>
                ))
              )}