feat: token auto-refresh, studio→render wiring, admin panel (nodes + render queue)
Token auto-refresh (middleware): - Proactively refresh fr_access when < 120s remain — no more silent 15-min kick - Inlines /v1/auth/refresh call in middleware, stamps new cookies on response - /admin/* protected: is_admin JWT claim required, else redirect /dashboard - apiFetch() (src/lib/api/fetch.ts): client-side 401 → auto-refresh → retry; de-duplicates concurrent refresh calls; redirects to /auth on failure Studio → Render V2 wiring: - scenes[] no longer sent to POST /api/render (V2 render-svc fetches project from Studio service via saved_project_id directly) - renderRequestSchema.scenes is now optional - RenderModal uses apiFetch for auto-refresh on 401 during polling Admin panel (/admin/*): - Admin layout: server-side is_admin guard + top nav (Nodes, Render Queue) - /admin/nodes: lists all nodes from GET /v1/nodes with status badges, heartbeat age, slot usage, tags; Drain (PATCH status=Draining) + Release actions - /admin/renders: render job table with step filter tabs; progress bars, error messages, Retry + Cancel per-row actions; polls GET /v1/renders - API proxy routes: /api/admin/nodes/:id/drain|release, /api/admin/renders/:id/retry|cancel — all validate is_admin in JWT before proxying Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
@@ -0,0 +1,123 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { apiFetch } from "@/lib/api/fetch";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface V2Node {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "Online" | "Busy" | "Offline" | "Draining";
|
||||
last_heartbeat: string;
|
||||
active_job_id: string | null;
|
||||
slots_total: number;
|
||||
slots_used: number;
|
||||
version: string | null;
|
||||
tags: string[] | null;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<V2Node["status"], string> = {
|
||||
Online: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30",
|
||||
Busy: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
Offline: "bg-gray-500/20 text-gray-400 border-gray-500/30",
|
||||
Draining: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
|
||||
};
|
||||
|
||||
function heartbeatAge(iso: string): string {
|
||||
const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
|
||||
if (diff < 60) return `${diff}s ago`;
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
return `${Math.floor(diff / 3600)}h ago`;
|
||||
}
|
||||
|
||||
export function NodesTable({ nodes }: { nodes: V2Node[] }) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState<Record<string, boolean>>({});
|
||||
|
||||
const action = async (nodeId: string, endpoint: string) => {
|
||||
setLoading((p) => ({ ...p, [nodeId]: true }));
|
||||
try {
|
||||
await apiFetch(`/api/admin/nodes/${nodeId}/${endpoint}`, { method: "POST" });
|
||||
router.refresh();
|
||||
} finally {
|
||||
setLoading((p) => ({ ...p, [nodeId]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
if (nodes.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-[#1e2235] bg-[#0f1120] px-6 py-16 text-center text-sm text-gray-500">
|
||||
No nodes registered. Start the node agent on a render machine to see it here.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border border-[#1e2235]">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-[#1e2235] bg-[#0f1120] text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
||||
<th className="px-4 py-3">Node</th>
|
||||
<th className="px-4 py-3">Status</th>
|
||||
<th className="px-4 py-3">Slots</th>
|
||||
<th className="px-4 py-3">Heartbeat</th>
|
||||
<th className="px-4 py-3">Active Job</th>
|
||||
<th className="px-4 py-3">Tags</th>
|
||||
<th className="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#1e2235] bg-[#0c0e1a]">
|
||||
{nodes.map((node) => (
|
||||
<tr key={node.id} className="hover:bg-[#0f1120]/60 transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<div className="font-medium text-white">{node.name}</div>
|
||||
<div className="text-[11px] text-gray-600 font-mono mt-0.5">{node.id.slice(0, 8)}…</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${STATUS_COLORS[node.status]}`}>
|
||||
{node.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 tabular-nums text-gray-300">
|
||||
{node.slots_used} / {node.slots_total}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-400">
|
||||
{heartbeatAge(node.last_heartbeat)}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-gray-500">
|
||||
{node.active_job_id ? node.active_job_id.slice(0, 12) + "…" : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(node.tags ?? []).map((t) => (
|
||||
<span key={t} className="rounded bg-[#1e2235] px-1.5 py-0.5 text-[10px] text-gray-400">
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => action(node.id, "drain")}
|
||||
disabled={loading[node.id] || node.status === "Offline"}
|
||||
className="rounded px-2.5 py-1 text-xs text-yellow-300 border border-yellow-500/30 hover:bg-yellow-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Drain
|
||||
</button>
|
||||
<button
|
||||
onClick={() => action(node.id, "release")}
|
||||
disabled={loading[node.id]}
|
||||
className="rounded px-2.5 py-1 text-xs text-red-300 border border-red-500/30 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Release
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { apiFetch } from "@/lib/api/fetch";
|
||||
import type { V2RenderJob } from "@/app/[locale]/admin/renders/page";
|
||||
|
||||
const STEP_COLORS: Record<string, string> = {
|
||||
Queued: "bg-gray-500/20 text-gray-400 border-gray-500/30",
|
||||
Preparing: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
TemplateCache:"bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
JsxGen: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
Music: "bg-purple-500/20 text-purple-300 border-purple-500/30",
|
||||
Rendering: "bg-indigo-500/20 text-indigo-300 border-indigo-500/30",
|
||||
Validating: "bg-cyan-500/20 text-cyan-300 border-cyan-500/30",
|
||||
Repairing: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
|
||||
Optimisation: "bg-teal-500/20 text-teal-300 border-teal-500/30",
|
||||
Video: "bg-indigo-500/20 text-indigo-300 border-indigo-500/30",
|
||||
Mixing: "bg-purple-500/20 text-purple-300 border-purple-500/30",
|
||||
Final: "bg-teal-500/20 text-teal-300 border-teal-500/30",
|
||||
Uploading: "bg-sky-500/20 text-sky-300 border-sky-500/30",
|
||||
Done: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30",
|
||||
Failed: "bg-red-500/20 text-red-300 border-red-500/30",
|
||||
Cancelled: "bg-gray-500/20 text-gray-500 border-gray-500/20",
|
||||
};
|
||||
|
||||
function relativeTime(iso: string): string {
|
||||
const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
|
||||
if (diff < 60) return `${diff}s ago`;
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
return `${Math.floor(diff / 86400)}d ago`;
|
||||
}
|
||||
|
||||
export function RenderQueueTable({ jobs }: { jobs: V2RenderJob[] }) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState<Record<string, boolean>>({});
|
||||
|
||||
const retryJob = async (jobId: string) => {
|
||||
setLoading((p) => ({ ...p, [jobId]: true }));
|
||||
try {
|
||||
await apiFetch(`/api/admin/renders/${jobId}/retry`, { method: "POST" });
|
||||
router.refresh();
|
||||
} finally {
|
||||
setLoading((p) => ({ ...p, [jobId]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
const cancelJob = async (jobId: string) => {
|
||||
setLoading((p) => ({ ...p, [jobId]: true }));
|
||||
try {
|
||||
await apiFetch(`/api/admin/renders/${jobId}/cancel`, { method: "POST" });
|
||||
router.refresh();
|
||||
} finally {
|
||||
setLoading((p) => ({ ...p, [jobId]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
if (jobs.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-[#1e2235] bg-[#0f1120] px-6 py-16 text-center text-sm text-gray-500">
|
||||
No render jobs found for the selected filter.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border border-[#1e2235]">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-[#1e2235] bg-[#0f1120] text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
||||
<th className="px-4 py-3">Job ID</th>
|
||||
<th className="px-4 py-3">Project</th>
|
||||
<th className="px-4 py-3">Step</th>
|
||||
<th className="px-4 py-3">Progress</th>
|
||||
<th className="px-4 py-3">Quality</th>
|
||||
<th className="px-4 py-3">Node</th>
|
||||
<th className="px-4 py-3">Created</th>
|
||||
<th className="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#1e2235] bg-[#0c0e1a]">
|
||||
{jobs.map((job) => {
|
||||
const stepColor = STEP_COLORS[job.step] ?? STEP_COLORS.Queued;
|
||||
const canRetry = job.step === "Failed" || job.step === "Cancelled";
|
||||
const canCancel = !["Done", "Failed", "Cancelled"].includes(job.step);
|
||||
|
||||
return (
|
||||
<tr key={job.id} className="hover:bg-[#0f1120]/60 transition-colors">
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-gray-400">
|
||||
{job.id.slice(0, 12)}…
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-gray-500">
|
||||
{job.saved_project_id.slice(0, 12)}…
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${stepColor}`}>
|
||||
{job.step}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-1.5 w-20 overflow-hidden rounded-full bg-[#1e2235]">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary-600"
|
||||
style={{ width: `${job.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="tabular-nums text-[11px] text-gray-500">
|
||||
{job.progress}%
|
||||
</span>
|
||||
</div>
|
||||
{job.error_message && (
|
||||
<p className="mt-0.5 text-[10px] text-red-400 max-w-[200px] truncate" title={job.error_message}>
|
||||
{job.error_message}
|
||||
</p>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-400 text-xs">
|
||||
{job.quality} / {job.resolution}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-gray-500">
|
||||
{job.node_id ? job.node_id.slice(0, 8) + "…" : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-500 text-xs">
|
||||
{relativeTime(job.created_at)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex gap-2">
|
||||
{canRetry && (
|
||||
<button
|
||||
onClick={() => retryJob(job.id)}
|
||||
disabled={loading[job.id]}
|
||||
className="rounded px-2.5 py-1 text-xs text-emerald-300 border border-emerald-500/30 hover:bg-emerald-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
)}
|
||||
{canCancel && (
|
||||
<button
|
||||
onClick={() => cancelJob(job.id)}
|
||||
disabled={loading[job.id]}
|
||||
className="rounded px-2.5 py-1 text-xs text-red-300 border border-red-500/30 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,8 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Download, Link2, Loader2, RefreshCw } from "lucide-react";
|
||||
|
||||
import { apiFetch } from "@/lib/api/fetch";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -86,7 +88,7 @@ export function RenderModal({
|
||||
|
||||
const poll = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/render/${jobId}/status`);
|
||||
const response = await apiFetch(`/api/render/${jobId}/status`);
|
||||
const data = (await response.json()) as StatusResponse;
|
||||
|
||||
if (!response.ok) {
|
||||
@@ -128,12 +130,11 @@ export function RenderModal({
|
||||
setErrorMessage(null);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/render", {
|
||||
const response = await apiFetch("/api/render", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
projectId,
|
||||
scenes,
|
||||
settings: {
|
||||
resolution,
|
||||
format: "mp4" as const,
|
||||
|
||||
Reference in New Issue
Block a user