feat: implement video job management with retry and delete functionality, enhance video generation status tracking

Co-authored-by: Copilot <copilot@github.com>
2026-04-29 18:27:59 +02:00
parent d5a94947de
commit 37edef716a
10 changed files with 479 additions and 95 deletions
@@ -469,6 +469,15 @@ def generate_video_status():
    return jsonify(resp.json()), resp.status_code


+@app.get("/generate/video/<video_id>/status")
+@login_required
+def generate_video_db_status(video_id: str):
+    """Return current DB status for a video job (polled by frontend JS)."""
+    resp = _api(
+        "GET", f"/generate/videos/{video_id}", token=session["access_token"])
+    return jsonify(resp.json()), resp.status_code
+
+
 # ── Admin ─────────────────────────────────────────────────────────────────

@app.get("/admin")
@@ -63,15 +63,14 @@ document.addEventListener("DOMContentLoaded", () => {
  // ── Video status polling ───────────────────────────────
  const pollDiv = document.getElementById("video-poll-status");
  if (pollDiv) {
-    const pollingUrl = pollDiv.dataset.pollingUrl;
+    const videoId = pollDiv.dataset.videoId;
    const statusText = document.getElementById("poll-status-text");
    const videoContainer = document.getElementById("poll-video-container");

    const interval = setInterval(async () => {
      try {
        const resp = await fetch(
-          "/generate/video/status?polling_url=" +
-            encodeURIComponent(pollingUrl),
+          "/generate/video/" + encodeURIComponent(videoId) + "/status",
        );
        if (!resp.ok) return;
        const data = await resp.json();
@@ -82,25 +81,28 @@ document.addEventListener("DOMContentLoaded", () => {

        if (data.status === "completed") {
          clearInterval(interval);
-          if (data.video_url && videoContainer) {
-            const vid = document.createElement("video");
-            vid.src = data.video_url;
-            vid.controls = true;
-            vid.className = "generated-video";
-            videoContainer.appendChild(vid);
-            const msg = pollDiv.querySelector("p");
-            if (msg) msg.textContent = "Video ready!";
+          if (data.video_url) {
+            if (videoContainer) {
+              const vid = document.createElement("video");
+              vid.src = data.video_url;
+              vid.controls = true;
+              vid.className = "generated-video";
+              videoContainer.appendChild(vid);
+              const msg = pollDiv.querySelector("p");
+              if (msg) msg.textContent = "Video ready!";
+            } else {
+              // video_detail page: reload to show the video element
+              window.location.reload();
+            }
          }
-        } else if (data.status === "failed") {
+        } else if (data.status === "failed" || data.status === "cancelled") {
          clearInterval(interval);
          pollDiv.innerHTML =
-            '<div class="alert alert-error">Generation failed: ' +
-            (data.error || "Unknown error") +
-            "</div>";
+            '<div class="alert alert-error">Generation failed or was cancelled.</div>';
        }
      } catch (e) {
        console.error("Video polling error:", e);
      }
-    }, 12016);
+    }, 5000);
  }
 });
@@ -76,5 +76,208 @@
      </tbody>
    </table>
  </div>
+
+  <!-- ── Video Jobs ──────────────────────────────────────────────── -->
+  <h2 class="section-title" style="margin-top: 2rem">Video Jobs</h2>
+
+  <div
+    style="
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: 1rem;
+    "
+  >
+    <label for="vj-status-filter" style="font-weight: 600"
+      >Filter by status:</label
+    >
+    <select id="vj-status-filter" class="form-control" style="width: auto">
+      <option value="">All</option>
+      <option value="queued">Queued</option>
+      <option value="processing">Processing</option>
+      <option value="completed">Completed</option>
+      <option value="failed">Failed</option>
+      <option value="cancelled">Cancelled</option>
+    </select>
+    <label for="vj-sort" style="font-weight: 600">Sort:</label>
+    <select id="vj-sort" class="form-control" style="width: auto">
+      <option value="created_desc">Created (newest first)</option>
+      <option value="created_asc">Created (oldest first)</option>
+      <option value="updated_desc">Updated (newest first)</option>
+      <option value="status_asc">Status (A–Z)</option>
+      <option value="model_asc">Model (A–Z)</option>
+    </select>
+    <button id="vj-refresh" class="btn btn-sm">Refresh</button>
+    <span
+      id="vj-count"
+      style="color: var(--text-muted, #888); font-size: 0.9em"
+    ></span>
+  </div>
+
+  <div class="table-wrap">
+    <table id="vj-table">
+      <thead>
+        <tr>
+          <th>User</th>
+          <th>Status</th>
+          <th>Model</th>
+          <th>Prompt</th>
+          <th>Created</th>
+          <th>Updated</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody id="vj-tbody">
+        <tr>
+          <td colspan="7" class="text-muted">Loading…</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
+
+<script>
+  (function () {
+    const BACKEND = "{{ config['BACKEND_URL'] }}";
+    const TOKEN = "{{ session['access_token'] }}";
+    const headers = { Authorization: "Bearer " + TOKEN };
+
+    let allJobs = [];
+
+    async function loadJobs() {
+      document.getElementById("vj-tbody").innerHTML =
+        '<tr><td colspan="7" class="text-muted">Loading…</td></tr>';
+      try {
+        const r = await fetch(BACKEND + "/admin/videos", { headers });
+        if (!r.ok) throw new Error(await r.text());
+        allJobs = await r.json();
+        renderJobs();
+      } catch (e) {
+        document.getElementById("vj-tbody").innerHTML =
+          `<tr><td colspan="7" style="color:red;">Error: ${e.message}</td></tr>`;
+      }
+    }
+
+    function renderJobs() {
+      const statusFilter = document.getElementById("vj-status-filter").value;
+      const sort = document.getElementById("vj-sort").value;
+
+      let jobs = statusFilter
+        ? allJobs.filter((j) => j.status === statusFilter)
+        : [...allJobs];
+
+      jobs.sort((a, b) => {
+        if (sort === "created_asc")
+          return new Date(a.created_at) - new Date(b.created_at);
+        if (sort === "updated_desc")
+          return new Date(b.updated_at) - new Date(a.updated_at);
+        if (sort === "status_asc") return a.status.localeCompare(b.status);
+        if (sort === "model_asc") return a.model_id.localeCompare(b.model_id);
+        return new Date(b.created_at) - new Date(a.created_at); // created_desc default
+      });
+
+      document.getElementById("vj-count").textContent =
+        `${jobs.length} job${jobs.length !== 1 ? "s" : ""}`;
+
+      const tbody = document.getElementById("vj-tbody");
+      if (jobs.length === 0) {
+        tbody.innerHTML =
+          '<tr><td colspan="7" class="text-muted">No jobs found.</td></tr>';
+        return;
+      }
+
+      const statusColor = {
+        completed: "color:var(--success-color,#4caf50)",
+        failed: "color:var(--danger-color,#e53935)",
+        cancelled: "color:var(--danger-color,#e53935)",
+        processing: "color:var(--warning-color,#fb8c00)",
+        queued: "color:var(--warning-color,#fb8c00)",
+      };
+
+      tbody.innerHTML = jobs
+        .map((job) => {
+          const sc = statusColor[job.status] || "";
+          const canRetry =
+            job.status === "failed" || job.status === "cancelled";
+          const canCancel =
+            job.status === "queued" || job.status === "processing";
+          const actions = [
+            canRetry
+              ? `<button class="btn btn-sm vj-retry"  data-id="${job.id}">Retry</button>`
+              : "",
+            canCancel
+              ? `<button class="btn btn-sm vj-cancel" data-id="${job.id}">Cancel</button>`
+              : "",
+            `<button class="btn btn-sm btn-danger vj-delete" data-id="${job.id}">Delete</button>`,
+          ].join(" ");
+          const prompt =
+            job.prompt.length > 60 ? job.prompt.slice(0, 57) + "…" : job.prompt;
+          const created = job.created_at
+            ? new Date(job.created_at).toLocaleString()
+            : "—";
+          const updated = job.updated_at
+            ? new Date(job.updated_at).toLocaleString()
+            : "—";
+          return `<tr>
+        <td>${job.user_email || "—"}</td>
+        <td style="${sc};font-weight:600;">${job.status}</td>
+        <td style="font-size:.85em;">${job.model_id}</td>
+        <td title="${job.prompt.replace(/"/g, "&quot;")}">${prompt}</td>
+        <td style="white-space:nowrap;">${created}</td>
+        <td style="white-space:nowrap;">${updated}</td>
+        <td style="white-space:nowrap;">${actions}</td>
+      </tr>`;
+        })
+        .join("");
+    }
+
+    async function apiPost(path) {
+      const r = await fetch(BACKEND + path, { method: "POST", headers });
+      if (!r.ok) {
+        const d = await r.json().catch(() => ({}));
+        throw new Error(d.detail || r.statusText);
+      }
+      return r.json();
+    }
+
+    async function apiDelete(path) {
+      const r = await fetch(BACKEND + path, { method: "DELETE", headers });
+      if (!r.ok) {
+        const d = await r.json().catch(() => ({}));
+        throw new Error(d.detail || r.statusText);
+      }
+      return r.json();
+    }
+
+    document
+      .getElementById("vj-tbody")
+      .addEventListener("click", async function (e) {
+        const btn = e.target.closest("button");
+        if (!btn) return;
+        const id = btn.dataset.id;
+        try {
+          if (btn.classList.contains("vj-retry"))
+            await apiPost(`/admin/videos/${id}/retry`);
+          if (btn.classList.contains("vj-cancel"))
+            await apiPost(`/admin/videos/${id}/cancel`);
+          if (btn.classList.contains("vj-delete")) {
+            if (!confirm("Permanently delete this video job?")) return;
+            await apiDelete(`/admin/videos/${id}`);
+          }
+          await loadJobs();
+        } catch (err) {
+          alert("Error: " + err.message);
+        }
+      });
+
+    document
+      .getElementById("vj-status-filter")
+      .addEventListener("change", renderJobs);
+    document.getElementById("vj-sort").addEventListener("change", renderJobs);
+    document.getElementById("vj-refresh").addEventListener("click", loadJobs);
+
+    loadJobs();
+  })();
+</script>
 {% endblock %}
@@ -155,9 +155,9 @@ AI{% endblock %} {% block content %}
  {% endif %} {% if result %}
  <div class="result">
    <h2>Video job</h2>
-    <p>Job ID: <code>{{ result.id }}</code></p>
-    {% if result.status in ('queued', 'processing') and result.polling_url %}
-    <div id="video-poll-status" data-polling-url="{{ result.polling_url }}">
+    <p>Job ID: <code>{{ result.db_id or result.id }}</code></p>
+    {% if result.status in ('queued', 'processing') and result.db_id %}
+    <div id="video-poll-status" data-video-id="{{ result.db_id }}">
      <p>
        <span id="poll-status-text"
          >Status: <strong>{{ result.status }}</strong></span
@@ -12,11 +12,11 @@ block content %}
  <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    {% if video.status == 'completed' and video.video_url %}
    <video src="{{ video.video_url }}" controls class="w-full"></video>
-    {% elif video.status in ('queued', 'processing') and video.polling_url %}
+    {% elif video.status in ('queued', 'processing') %}
    <div
      class="w-full bg-black aspect-video flex flex-col items-center justify-center p-6 text-center"
      id="video-poll-status"
-      data-polling-url="{{ video.polling_url }}"
+      data-video-id="{{ video.id }}"
    >
      <p class="text-xl font-semibold">
        Status: <strong id="poll-status-text">{{ video.status }}</strong>