begin js(x) to ts(x)
This commit is contained in:
467
src/components/TRip/RequestManagement.tsx
Normal file
467
src/components/TRip/RequestManagement.tsx
Normal file
@@ -0,0 +1,467 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { DataTable } from "primereact/datatable";
|
||||
import { Column } from "primereact/column";
|
||||
import { Dropdown } from "primereact/dropdown";
|
||||
import { Button } from "@mui/joy";
|
||||
import { Dialog } from "primereact/dialog";
|
||||
import { authFetch } from "@/utils/authFetch";
|
||||
import { confirmDialog, ConfirmDialog } from "primereact/confirmdialog";
|
||||
import BreadcrumbNav from "./BreadcrumbNav";
|
||||
import { API_URL } from "@/config";
|
||||
import "./RequestManagement.css";
|
||||
|
||||
interface RequestJob {
|
||||
id: string | number;
|
||||
target: string;
|
||||
tracks: number;
|
||||
quality: string;
|
||||
status: string;
|
||||
progress: number;
|
||||
type?: string;
|
||||
tarball_path?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS = ["Queued", "Started", "Compressing", "Finished", "Failed"];
|
||||
const TAR_BASE_URL = "https://codey.lol/m/m2"; // configurable prefix
|
||||
|
||||
export default function RequestManagement() {
|
||||
const [requests, setRequests] = useState<RequestJob[]>([]);
|
||||
const [filterType, setFilterType] = useState<string | null>(null);
|
||||
const [filterStatus, setFilterStatus] = useState<string | null>(null);
|
||||
const [filteredRequests, setFilteredRequests] = useState<RequestJob[]>([]);
|
||||
const [selectedRequest, setSelectedRequest] = useState<RequestJob | null>(null);
|
||||
const [isDialogVisible, setIsDialogVisible] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const pollingDetailRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
|
||||
const tarballUrl = (absPath: string | undefined, quality: string) => {
|
||||
if (!absPath) return null;
|
||||
const filename = absPath.split("/").pop(); // get "SOMETHING.tar.gz"
|
||||
return `${TAR_BASE_URL}/${quality}/${filename}`;
|
||||
};
|
||||
|
||||
const fetchJobs = async (showLoading = true) => {
|
||||
try {
|
||||
if (showLoading) setIsLoading(true);
|
||||
const res = await authFetch(`${API_URL}/trip/jobs/list`);
|
||||
if (!res.ok) throw new Error("Failed to fetch jobs");
|
||||
const data = await res.json() as { jobs?: RequestJob[] };
|
||||
setRequests(Array.isArray(data.jobs) ? data.jobs : []);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
if (!toast.isActive('fetch-fail-toast')) {
|
||||
toast.error("Failed to fetch jobs list", {
|
||||
toastId: 'fetch-fail-toast',
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchJobDetail = async (jobId: string | number): Promise<RequestJob | null> => {
|
||||
try {
|
||||
const res = await authFetch(`${API_URL}/trip/job/${jobId}`);
|
||||
if (!res.ok) throw new Error("Failed to fetch job details");
|
||||
return await res.json() as RequestJob;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
if (!toast.isActive('fetch-job-fail-toast')) {
|
||||
toast.error("Failed to fetch job details",
|
||||
{
|
||||
toastId: "fetch-job-fail-toast",
|
||||
});
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Initial load shows the skeleton; subsequent polling should not
|
||||
useEffect(() => { fetchJobs(true); }, []);
|
||||
useEffect(() => {
|
||||
if (isDialogVisible && selectedRequest) {
|
||||
// Start polling
|
||||
const poll = async () => {
|
||||
const updated = await fetchJobDetail(selectedRequest.id);
|
||||
if (updated) setSelectedRequest(updated);
|
||||
};
|
||||
|
||||
pollingDetailRef.current = setInterval(poll, 1500);
|
||||
|
||||
return () => {
|
||||
if (pollingDetailRef.current) {
|
||||
clearInterval(pollingDetailRef.current);
|
||||
pollingDetailRef.current = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [isDialogVisible, selectedRequest?.id]);
|
||||
useEffect(() => {
|
||||
const hasActive = requests.some((j) => ["Queued", "Started", "Compressing"].includes(j.status));
|
||||
if (hasActive && !pollingRef.current) pollingRef.current = setInterval(() => fetchJobs(false), 1500);
|
||||
else if (!hasActive && pollingRef.current) {
|
||||
clearInterval(pollingRef.current);
|
||||
pollingRef.current = null;
|
||||
}
|
||||
return () => { if (pollingRef.current) clearInterval(pollingRef.current); pollingRef.current = null; };
|
||||
}, [requests]);
|
||||
|
||||
useEffect(() => {
|
||||
const filtered = requests.filter((r) => {
|
||||
const typeMatch = !filterType || r.type === filterType;
|
||||
const statusMatch = filterStatus === "all" || filterStatus === null || r.status === filterStatus;
|
||||
return typeMatch && statusMatch;
|
||||
});
|
||||
setFilteredRequests(filtered);
|
||||
}, [filterType, filterStatus, requests]);
|
||||
|
||||
|
||||
const getStatusColorClass = (status: string) => {
|
||||
switch (status) {
|
||||
case "Queued": return "bg-yellow-700 text-white";
|
||||
case "Started": return "bg-blue-700 text-white";
|
||||
case "Compressing": return "bg-orange-700 text-white";
|
||||
case "Finished": return "bg-green-700 text-white";
|
||||
case "Failed": return "bg-red-700 text-white";
|
||||
default: return "bg-gray-700 text-white";
|
||||
}
|
||||
};
|
||||
|
||||
const getQualityColorClass = (quality: string) => {
|
||||
switch (quality) {
|
||||
case "FLAC": return "bg-green-700 text-white";
|
||||
case "Lossy": return "bg-yellow-700 text-white";
|
||||
default: return "bg-gray-700 text-white";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const statusBodyTemplate = (rowData: RequestJob) => (
|
||||
<span className={`inline-flex items-center justify-center min-w-[90px] px-3 py-1 rounded-full font-semibold text-xs ${getStatusColorClass(rowData.status)}`}>
|
||||
{rowData.status}
|
||||
</span>
|
||||
);
|
||||
|
||||
const qualityBodyTemplate = (rowData: RequestJob) => (
|
||||
<span className={`inline-flex items-center justify-center min-w-[50px] px-3 py-1 rounded-full font-semibold text-xs ${getQualityColorClass(rowData.quality)}`}>
|
||||
{rowData.quality}
|
||||
</span>
|
||||
);
|
||||
|
||||
|
||||
const safeText = (val: unknown) => (val === 0 ? "0" : val || "—");
|
||||
const textWithEllipsis = (val: string | undefined | null, width = "12rem") => (
|
||||
<span className="truncate block" style={{ maxWidth: width }} title={val || ""}>{val || "—"}</span>
|
||||
);
|
||||
|
||||
const truncate = (text: string, maxLen: number) =>
|
||||
maxLen <= 3
|
||||
? text.slice(0, maxLen)
|
||||
: text.length <= maxLen
|
||||
? text
|
||||
: text.slice(0, maxLen - 3) + '...';
|
||||
|
||||
|
||||
const basename = (p: string | undefined) => (typeof p === "string" ? p.split("/").pop() : "");
|
||||
|
||||
const formatProgress = (p: unknown) => {
|
||||
if (p === null || p === undefined || p === "") return "—";
|
||||
const num = Number(p);
|
||||
if (Number.isNaN(num)) return "—";
|
||||
const pct = num > 1 ? Math.round(num) : num;
|
||||
return `${pct}%`;
|
||||
};
|
||||
|
||||
const computePct = (p: unknown) => {
|
||||
if (p === null || p === undefined || p === "") return 0;
|
||||
const num = Number(p);
|
||||
if (Number.isNaN(num)) return 0;
|
||||
return Math.min(100, Math.max(0, num > 1 ? Math.round(num) : Math.round(num * 100)));
|
||||
};
|
||||
|
||||
const progressBarTemplate = (rowData: RequestJob) => {
|
||||
const p = rowData.progress;
|
||||
if (p === null || p === undefined || p === 0) return "—";
|
||||
const num = Number(p);
|
||||
if (Number.isNaN(num)) return "—";
|
||||
const pct = computePct(p);
|
||||
|
||||
const getProgressColor = () => {
|
||||
if (rowData.status === "Failed") return "bg-red-500";
|
||||
if (rowData.status === "Finished") return "bg-green-500";
|
||||
if (pct < 30) return "bg-blue-400";
|
||||
if (pct < 70) return "bg-blue-500";
|
||||
return "bg-blue-600";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rm-progress-container">
|
||||
<div className="rm-progress-track" style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
className={`rm-progress-fill ${getProgressColor()}`}
|
||||
style={{
|
||||
// CSS custom property for progress animation
|
||||
['--rm-progress' as string]: (pct / 100).toString(),
|
||||
borderTopRightRadius: pct === 100 ? '999px' : 0,
|
||||
borderBottomRightRadius: pct === 100 ? '999px' : 0
|
||||
}}
|
||||
data-pct={pct}
|
||||
aria-valuenow={pct}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
/>
|
||||
</div>
|
||||
<span className="rm-progress-text" style={{ marginLeft: 8, flex: 'none' }}>{pct}%</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const confirmDelete = (requestId: string | number) => {
|
||||
confirmDialog({
|
||||
message: "Are you sure you want to delete this request?",
|
||||
header: "Confirm Delete",
|
||||
icon: "pi pi-exclamation-triangle",
|
||||
accept: () => deleteRequest(requestId),
|
||||
});
|
||||
};
|
||||
|
||||
const deleteRequest = (requestId: string | number) => {
|
||||
setRequests((prev) => prev.filter((r) => r.id !== requestId));
|
||||
toast.success("Request deleted");
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: RequestJob) => (
|
||||
<Button
|
||||
color="neutral"
|
||||
variant="outlined"
|
||||
size="sm"
|
||||
sx={{
|
||||
color: "#e5e7eb",
|
||||
borderColor: "#6b7280",
|
||||
'&:hover': { backgroundColor: '#374151', borderColor: '#9ca3af' },
|
||||
}}
|
||||
onClick={(e) => { e.stopPropagation(); confirmDelete(rowData.id); }}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
);
|
||||
|
||||
const handleRowClick = async (e: { data: unknown }) => {
|
||||
const rowData = e.data as RequestJob;
|
||||
const detail = await fetchJobDetail(rowData.id);
|
||||
if (detail) { setSelectedRequest(detail); setIsDialogVisible(true); }
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<div className="trip-management-container my-10 p-4 sm:p-6 rounded-xl shadow-md
|
||||
bg-white dark:bg-neutral-900
|
||||
text-neutral-900 dark:text-neutral-100
|
||||
border border-neutral-200 dark:border-neutral-700">
|
||||
|
||||
<BreadcrumbNav currentPage="management" />
|
||||
<h2 className="text-2xl sm:text-3xl font-bold tracking-tight mb-6">Manage Requests</h2>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 mb-6">
|
||||
<Dropdown
|
||||
value={filterStatus}
|
||||
options={[{ label: "All Statuses", value: "all" }, ...STATUS_OPTIONS.map((s) => ({ label: s, value: s }))]}
|
||||
onChange={(e) => setFilterStatus(e.value)}
|
||||
placeholder="Filter by Status"
|
||||
className="min-w-[180px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="table-skeleton">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="skeleton-row">
|
||||
<div className="skeleton-cell w-[10%]"><div className="skeleton-bar" /></div>
|
||||
<div className="skeleton-cell w-[22%]"><div className="skeleton-bar" /></div>
|
||||
<div className="skeleton-cell w-[10%]"><div className="skeleton-bar" /></div>
|
||||
<div className="skeleton-cell w-[12%]"><div className="skeleton-bar" /></div>
|
||||
<div className="skeleton-cell w-[16%]"><div className="skeleton-bar" /></div>
|
||||
<div className="skeleton-cell w-[10%]"><div className="skeleton-bar" /></div>
|
||||
<div className="skeleton-cell w-[20%]"><div className="skeleton-bar" /></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="table-wrapper w-full">
|
||||
<DataTable
|
||||
value={filteredRequests}
|
||||
paginator
|
||||
rows={10}
|
||||
removableSort
|
||||
sortMode="multiple"
|
||||
emptyMessage={
|
||||
<div className="empty-state">
|
||||
<i className="pi pi-inbox empty-state-icon" />
|
||||
<p className="empty-state-text">No requests found</p>
|
||||
<p className="empty-state-subtext">Requests you submit will appear here</p>
|
||||
</div>
|
||||
}
|
||||
onRowClick={handleRowClick}
|
||||
resizableColumns={false}
|
||||
className="w-full"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
|
||||
<Column
|
||||
field="id"
|
||||
header="ID"
|
||||
body={(row: RequestJob) => (
|
||||
<span title={String(row.id)}>
|
||||
{String(row.id).split("-").slice(-1)[0]}
|
||||
</span>
|
||||
)}
|
||||
/>
|
||||
<Column field="target" header="Target" sortable body={(row: RequestJob) => textWithEllipsis(row.target, "100%")} />
|
||||
<Column field="tracks" header="# Tracks" body={(row: RequestJob) => row.tracks} />
|
||||
<Column field="status" header="Status" body={statusBodyTemplate} style={{ textAlign: "center" }} sortable />
|
||||
<Column field="progress" header="Progress" body={progressBarTemplate} style={{ textAlign: "center" }} sortable />
|
||||
<Column
|
||||
field="quality"
|
||||
header="Quality"
|
||||
body={qualityBodyTemplate}
|
||||
style={{ textAlign: "center" }}
|
||||
sortable />
|
||||
<Column
|
||||
field="tarball"
|
||||
header={
|
||||
<span className="flex items-center">
|
||||
<i className="pi pi-download mr-1" />
|
||||
Tarball
|
||||
</span>
|
||||
}
|
||||
body={(row: RequestJob) => {
|
||||
const url = tarballUrl(row.tarball_path, row.quality || "FLAC");
|
||||
if (!url) return "—";
|
||||
const encodedURL = encodeURI(url);
|
||||
|
||||
const fileName = url.split("/").pop() || "";
|
||||
|
||||
return (
|
||||
<a
|
||||
href={encodedURL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="truncate text-blue-500 hover:underline"
|
||||
title={fileName}
|
||||
>
|
||||
{truncate(fileName, 28)}
|
||||
</a>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</DataTable>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ConfirmDialog />
|
||||
|
||||
<Dialog
|
||||
header="Request Details"
|
||||
visible={isDialogVisible}
|
||||
style={{ width: "500px" }}
|
||||
onHide={() => setIsDialogVisible(false)}
|
||||
breakpoints={{ "960px": "95vw" }}
|
||||
modal
|
||||
dismissableMask
|
||||
className="dark:bg-neutral-900 dark:text-neutral-100"
|
||||
>
|
||||
{selectedRequest ? (
|
||||
<div className="space-y-4 text-sm">
|
||||
|
||||
{/* --- Metadata Card --- */}
|
||||
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{selectedRequest.id && <p className="col-span-2 break-all"><strong>ID:</strong> {String(selectedRequest.id)}</p>}
|
||||
{selectedRequest.target && <p><strong>Target:</strong> {selectedRequest.target}</p>}
|
||||
{selectedRequest.tracks && <p><strong># Tracks:</strong> {selectedRequest.tracks}</p>}
|
||||
{selectedRequest.quality && (
|
||||
<p>
|
||||
<strong>Quality:</strong>{" "}
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-bold ${getQualityColorClass(selectedRequest.quality)}`}>
|
||||
{selectedRequest.quality}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* --- Status / Progress Card --- */}
|
||||
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{selectedRequest.status && (
|
||||
<p>
|
||||
<strong>Status:</strong>{" "}
|
||||
<span className={`px-2 py-0.5 rounded-full text-xs font-bold ${getStatusColorClass(selectedRequest.status)}`}>
|
||||
{selectedRequest.status}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
{selectedRequest.progress !== undefined && selectedRequest.progress !== null && (
|
||||
<div className="col-span-2">
|
||||
<strong>Progress:</strong>
|
||||
<div className="rm-progress-container mt-2">
|
||||
<div className="rm-progress-track rm-progress-track-lg">
|
||||
<div
|
||||
className={`rm-progress-fill ${selectedRequest.status === "Failed" ? "bg-red-500" : selectedRequest.status === "Finished" ? "bg-green-500" : "bg-blue-500"}`}
|
||||
style={{
|
||||
['--rm-progress' as string]: (computePct(selectedRequest.progress) / 100).toString(),
|
||||
borderTopRightRadius: computePct(selectedRequest.progress) >= 100 ? '999px' : 0,
|
||||
borderBottomRightRadius: computePct(selectedRequest.progress) >= 100 ? '999px' : 0
|
||||
}}
|
||||
data-pct={computePct(selectedRequest.progress)}
|
||||
aria-valuenow={Math.min(100, Math.max(0, Number(selectedRequest.progress) > 1 ? Math.round(selectedRequest.progress) : selectedRequest.progress * 100))}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
/>
|
||||
</div>
|
||||
<span className="rm-progress-text">{formatProgress(selectedRequest.progress)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* --- Timestamps Card --- */}
|
||||
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md grid grid-cols-1 gap-2">
|
||||
{selectedRequest.created_at && <p><strong>Enqueued:</strong> {new Date(selectedRequest.created_at).toLocaleString()}</p>}
|
||||
{(selectedRequest as RequestJob & { started_at?: string }).started_at && <p><strong>Started:</strong> {new Date((selectedRequest as RequestJob & { started_at: string }).started_at).toLocaleString()}</p>}
|
||||
{(selectedRequest as RequestJob & { ended_at?: string }).ended_at && <p><strong>Ended:</strong> {new Date((selectedRequest as RequestJob & { ended_at: string }).ended_at).toLocaleString()}</p>}
|
||||
</div>
|
||||
|
||||
{/* --- Tarball Card --- */}
|
||||
{
|
||||
selectedRequest.tarball_path && (
|
||||
<div className="p-3 bg-gray-100 dark:bg-neutral-800 rounded-md">
|
||||
<p>
|
||||
<strong>Tarball:</strong>{" "}
|
||||
<a
|
||||
href={encodeURI(tarballUrl(selectedRequest.tarball_path, selectedRequest.quality) || "")}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:underline"
|
||||
>
|
||||
{tarballUrl(selectedRequest.tarball_path, selectedRequest.quality)?.split("/").pop()}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
</div >
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
)
|
||||
}
|
||||
</Dialog >
|
||||
|
||||
|
||||
</div >
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user