ai.allucanget.biz/frontend/app/templates/admin/videos.html

{% extends "base.html" %} {% block title %}Admin - Video Jobs{% endblock %} {%
block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold mb-6">Admin: Video Jobs</h1>

  <!-- Purge Old Jobs -->
  <div class="bg-gray-800 p-4 rounded-lg shadow-md mb-6">
    <h2 class="text-xl font-semibold mb-2">Maintenance</h2>
    <p class="text-gray-400 mb-4">
      Delete all completed, failed, or cancelled jobs older than 30 days.
    </p>
    <button
      id="purge-button"
      class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
    >
      Purge Old Jobs
    </button>
    <p id="purge-status" class="mt-2 text-sm"></p>
  </div>

  <!-- Video Jobs Table -->
  <div class="bg-gray-800 p-4 rounded-lg shadow-md overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-700">
      <thead class="bg-gray-700">
        <tr>
          <th
            scope="col"
            class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            User
          </th>
          <th
            scope="col"
            class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            Status
          </th>
          <th
            scope="col"
            class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            Model
          </th>
          <th
            scope="col"
            class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            Prompt
          </th>
          <th
            scope="col"
            class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            Created
          </th>
          <th
            scope="col"
            class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider"
          >
            Actions
          </th>
        </tr>
      </thead>
      <tbody id="jobs-table-body" class="bg-gray-800 divide-y divide-gray-700">
        <tr>
          <td colspan="6" class="text-center py-4">Loading jobs...</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const jobsTableBody = document.getElementById("jobs-table-body");
    const purgeButton = document.getElementById("purge-button");
    const purgeStatus = document.getElementById("purge-status");

    async function fetchJobs() {
      try {
        const response = await fetch("/api/v1/admin/videos");
        if (!response.ok) throw new Error("Failed to fetch jobs");
        const jobs = await response.json();
        jobsTableBody.innerHTML = "";
        if (jobs.length === 0) {
          jobsTableBody.innerHTML =
            '<tr><td colspan="6" class="text-center py-4">No video jobs found.</td></tr>';
        } else {
          jobs.forEach((job) => {
            const statusClass =
              job.status === "completed"
                ? "text-green-400"
                : job.status === "failed" || job.status === "cancelled"
                  ? "text-red-400"
                  : "text-yellow-400";
            const cancelBtn =
              job.status === "queued" || job.status === "processing"
                ? `<button class="cancel-btn text-red-400 hover:text-red-600 text-sm" data-job-id="${job.id}">Cancel</button>`
                : "";
            const row = `
                            <tr>
                                <td class="px-4 py-3 whitespace-nowrap text-sm">${job.user_email || "Unknown"}</td>
                                <td class="px-4 py-3 whitespace-nowrap text-sm font-semibold ${statusClass}">${job.status}</td>
                                <td class="px-4 py-3 whitespace-nowrap text-sm">${job.model_id}</td>
                                <td class="px-4 py-3 text-sm truncate max-w-xs">${job.prompt}</td>
                                <td class="px-4 py-3 whitespace-nowrap text-sm">${new Date(job.created_at).toLocaleString()}</td>
                                <td class="px-4 py-3 whitespace-nowrap text-sm">${cancelBtn}</td>
                            </tr>
                        `;
            jobsTableBody.innerHTML += row;
          });
        }
      } catch (error) {
        jobsTableBody.innerHTML =
          '<tr><td colspan="6" class="text-center py-4 text-red-500">Error loading jobs.</td></tr>';
        console.error("Error fetching jobs:", error);
      }
    }

    async function purgeJobs() {
      purgeButton.disabled = true;
      purgeStatus.textContent = "Purging...";
      purgeStatus.classList.remove("text-red-500", "text-green-500");

      try {
        const response = await fetch("/api/v1/admin/videos/purge", {
          method: "POST",
        });
        const data = await response.json();
        if (!response.ok)
          throw new Error(data.detail || "Failed to purge jobs");
        purgeStatus.textContent = `Purged ${data.deleted} jobs. ${data.remaining} remaining.`;
        purgeStatus.classList.add("text-green-500");
        fetchJobs();
      } catch (error) {
        purgeStatus.textContent = `Error: ${error.message}`;
        purgeStatus.classList.add("text-red-500");
      } finally {
        purgeButton.disabled = false;
      }
    }

    // Cancel button event delegation
    jobsTableBody.addEventListener("click", async function (e) {
      if (e.target.classList.contains("cancel-btn")) {
        const jobId = e.target.dataset.jobId;
        try {
          const response = await fetch(`/api/v1/admin/videos/${jobId}/cancel`, {
            method: "POST",
          });
          if (!response.ok) throw new Error("Failed to cancel job");
          fetchJobs();
        } catch (error) {
          alert(`Error: ${error.message}`);
        }
      }
    });

    purgeButton.addEventListener("click", purgeJobs);
    fetchJobs();
  });
</script>
{% endblock %}