Improve Catalog Studio navigation and import workflow
This commit is contained in:
Simo committed
1 parent
bfdf4def0f
commit
bf126fd825
4 files changed
+687
-492
No files matched your search
@@ -1,44 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { Ban, Check, Loader2, ShieldCheck, X } from "lucide-react";
|
||||
import { memo, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { Ban, Check, Circle, Loader2, RefreshCw, X } from "lucide-react";
|
||||
import { memo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { BatchItemStatus, VerificationSummary } from "./studio-types";
|
||||
|
||||
function SummaryRow({
|
||||
label,
|
||||
value,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
value: string | number;
|
||||
tone?: "ok" | "warn";
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<span className="text-[var(--admin-text-muted)]">{label}</span>
|
||||
<span
|
||||
className={cn(
|
||||
"font-mono font-semibold",
|
||||
tone === "warn"
|
||||
? "text-[var(--admin-warning)]"
|
||||
: "text-[var(--admin-success)]",
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatEta(ms: number): string {
|
||||
if (ms < 60_000) return `${Math.ceil(ms / 1000)}s`;
|
||||
const min = Math.floor(ms / 60_000);
|
||||
const sec = Math.ceil((ms % 60_000) / 1000);
|
||||
return `${min}m ${sec}s`;
|
||||
}
|
||||
const statusLabels: Record<BatchItemStatus["status"], string> = {
|
||||
pending: "Waiting",
|
||||
started: "Starting",
|
||||
downloading: "Downloading assets",
|
||||
converting: "Preparing assets",
|
||||
writing_db: "Saving",
|
||||
done: "Imported",
|
||||
failed: "Failed",
|
||||
};
|
||||
|
||||
export const BatchProgress = memo(function BatchProgress({
|
||||
progress,
|
||||
@@ -47,7 +22,6 @@ export const BatchProgress = memo(function BatchProgress({
|
||||
failed,
|
||||
cancelling,
|
||||
verification,
|
||||
startTime,
|
||||
failedClassnames,
|
||||
onCancel,
|
||||
onDismiss,
|
||||
@@ -65,192 +39,151 @@ export const BatchProgress = memo(function BatchProgress({
|
||||
onDismiss?: () => void;
|
||||
onRetry?: (classnames: string[]) => void;
|
||||
}) {
|
||||
const { entries, total, completed, percent } = useMemo(() => {
|
||||
const e = [...progress.entries()];
|
||||
const t = e.length;
|
||||
const c = e.filter(
|
||||
([, s]) => s.status === "done" || s.status === "failed",
|
||||
).length;
|
||||
return {
|
||||
entries: e,
|
||||
total: t,
|
||||
completed: c,
|
||||
percent: t > 0 ? Math.round((c / t) * 100) : 0,
|
||||
};
|
||||
}, [progress]);
|
||||
|
||||
// Live ETA calculation
|
||||
const [eta, setEta] = useState<string | null>(null);
|
||||
const completedRef = useRef(completed);
|
||||
const totalRef = useRef(total);
|
||||
completedRef.current = completed;
|
||||
totalRef.current = total;
|
||||
|
||||
useEffect(() => {
|
||||
if (done || !startTime || completed === 0) {
|
||||
setEta(null);
|
||||
return;
|
||||
}
|
||||
const calc = () => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const avgPerItem = elapsed / completedRef.current;
|
||||
const remaining = (totalRef.current - completedRef.current) * avgPerItem;
|
||||
setEta(formatEta(remaining));
|
||||
};
|
||||
calc();
|
||||
const interval = setInterval(calc, 2000);
|
||||
return () => clearInterval(interval);
|
||||
}, [done, startTime, completed]);
|
||||
|
||||
const entries = [...progress.values()];
|
||||
const completed = entries.filter(
|
||||
(item) => item.status === "done" || item.status === "failed",
|
||||
).length;
|
||||
const total = entries.length;
|
||||
const percent = total ? Math.round((completed / total) * 100) : 0;
|
||||
const imported = done
|
||||
? succeeded
|
||||
: entries.filter((item) => item.status === "done").length;
|
||||
const errors = done
|
||||
? failed
|
||||
: entries.filter((item) => item.status === "failed").length;
|
||||
const unfinished = Math.max(0, total - completed);
|
||||
const heading = !done
|
||||
? cancelling
|
||||
? "Stopping import…"
|
||||
: "Importing furniture…"
|
||||
: unfinished
|
||||
? "Import stopped"
|
||||
: errors
|
||||
? "Import completed with errors"
|
||||
: "Import completed";
|
||||
const issues = verification
|
||||
? verification.furniDataMissing + verification.furniDataConflicts
|
||||
: 0;
|
||||
return (
|
||||
<div className="border-t border-[var(--admin-border)] p-3">
|
||||
<div className="mb-2 flex items-center justify-between gap-3">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
|
||||
{done ? "Import finished" : "Importing…"}
|
||||
</span>
|
||||
{done ? (
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs font-bold",
|
||||
failed > 0
|
||||
? "text-[var(--admin-warning)]"
|
||||
: "text-[var(--admin-success)]",
|
||||
)}
|
||||
<section
|
||||
aria-label="Import progress"
|
||||
className="max-h-[45%] shrink-0 overflow-auto border-t border-[var(--admin-border)] bg-[var(--admin-surface)] p-4"
|
||||
>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div role="status" aria-live="polite">
|
||||
<h2
|
||||
style={{ fontSize: 14, margin: 0 }}
|
||||
className="text-sm font-semibold"
|
||||
>
|
||||
{completed}/{total} · {succeeded} ok
|
||||
{failed > 0 ? ` · ${failed} failed` : ""}
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="text-xs font-mono text-[var(--admin-text-muted)]">
|
||||
{completed}/{total}
|
||||
</span>
|
||||
{eta && (
|
||||
<span className="text-xs font-mono text-[var(--admin-accent)]">
|
||||
~{eta}
|
||||
</span>
|
||||
)}
|
||||
<Loader2
|
||||
size={14}
|
||||
className="animate-spin text-[var(--admin-accent)]"
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!done && (
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--admin-accent)]/10">
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--admin-accent)] transition-all duration-300"
|
||||
style={{ width: `${percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-mono font-bold text-[var(--admin-text)]">
|
||||
{percent}%
|
||||
</span>
|
||||
{heading}
|
||||
</h2>
|
||||
<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
|
||||
{imported} imported · {errors} failed
|
||||
{unfinished > 0 &&
|
||||
` · ${unfinished} ${done ? "not completed" : "remaining"}`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-h-44 space-y-1 overflow-y-auto pr-1">
|
||||
{entries.map(([classname, s]) => (
|
||||
<div key={classname} className="flex items-center gap-2 text-xs">
|
||||
{s.status === "done" ? (
|
||||
<Check
|
||||
size={12}
|
||||
className="shrink-0 text-[var(--admin-success)]"
|
||||
/>
|
||||
) : s.status === "failed" ? (
|
||||
<X size={12} className="shrink-0 text-[var(--admin-warning)]" />
|
||||
) : (
|
||||
<Loader2
|
||||
size={12}
|
||||
className="shrink-0 animate-spin text-[var(--admin-accent)]"
|
||||
/>
|
||||
)}
|
||||
<span className="min-w-0 flex-1 truncate font-mono">
|
||||
{classname}
|
||||
</span>
|
||||
<span className="shrink-0 capitalize text-[var(--admin-text-muted)]">
|
||||
{s.status.replace(/_/g, " ")}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{done && verification && (
|
||||
<div className="mt-2 space-y-1.5 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] p-2.5">
|
||||
<div className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
|
||||
<ShieldCheck size={13} className="text-[var(--admin-success)]" />
|
||||
Post-import verification
|
||||
</div>
|
||||
<SummaryRow
|
||||
label="Catalog offer_id fixed"
|
||||
value={verification.offerIdsFixed}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Furnidata ids fixed"
|
||||
value={verification.furniDataFixedIds}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Furnidata entries missing"
|
||||
value={verification.furniDataMissing}
|
||||
tone={verification.furniDataMissing > 0 ? "warn" : "ok"}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Furnidata id conflicts"
|
||||
value={verification.furniDataConflicts}
|
||||
tone={verification.furniDataConflicts > 0 ? "warn" : "ok"}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Nitros synced"
|
||||
value={verification.nitrosSynced.length}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Icons synced"
|
||||
value={verification.iconsSynced.length}
|
||||
/>
|
||||
<SummaryRow
|
||||
label="Folders chowned"
|
||||
value={verification.ownershipFixed.length}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-2 flex justify-end gap-2">
|
||||
{done ? (
|
||||
<>
|
||||
{failedClassnames && failedClassnames.length > 0 && onRetry && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onRetry(failedClassnames)}
|
||||
>
|
||||
<Loader2 size={14} />
|
||||
Retry {failedClassnames.length} failed
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{done ? (
|
||||
<>
|
||||
{!!failedClassnames?.length && onRetry && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onRetry(failedClassnames)}
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
Retry failed ({failedClassnames.length})
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="secondary" onClick={onDismiss}>
|
||||
<Check size={14} />
|
||||
Close summary
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="secondary" onClick={onDismiss}>
|
||||
<Check size={14} />
|
||||
Dismiss
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={cancelling}
|
||||
>
|
||||
{cancelling ? (
|
||||
<Loader2 className="animate-spin" size={14} />
|
||||
) : (
|
||||
<Ban size={14} />
|
||||
)}
|
||||
Stop import
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={cancelling}
|
||||
>
|
||||
{cancelling ? (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
) : (
|
||||
<Ban size={14} />
|
||||
)}
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
role="progressbar"
|
||||
aria-label="Furniture processed"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={total || 1}
|
||||
aria-valuenow={completed}
|
||||
className="my-3 h-2 overflow-hidden rounded-full bg-[var(--admin-accent)]/10"
|
||||
>
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--admin-accent)] transition-all"
|
||||
style={{ width: `${percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
{done && verification && (
|
||||
<p className="mb-2 text-sm text-[var(--admin-text-muted)]">
|
||||
{issues
|
||||
? `${issues} catalog data issue(s) still need attention. Open Catalog audit to review them.`
|
||||
: "Catalog data verification completed."}
|
||||
</p>
|
||||
)}
|
||||
<details>
|
||||
<summary className="cursor-pointer text-xs font-medium">
|
||||
View item details ({total})
|
||||
</summary>
|
||||
<div className="mt-2 max-h-44 space-y-2 overflow-auto">
|
||||
{entries.map((item) => (
|
||||
<div
|
||||
key={item.classname}
|
||||
className="rounded-md bg-[var(--admin-canvas)] p-2 text-xs"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{item.status === "done" ? (
|
||||
<Check size={14} className="text-[var(--admin-success)]" />
|
||||
) : item.status === "failed" ? (
|
||||
<X size={14} className="text-[var(--admin-warning)]" />
|
||||
) : done || item.status === "pending" ? (
|
||||
<Circle size={12} />
|
||||
) : (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
)}
|
||||
<span className="min-w-0 flex-1 break-all font-medium">
|
||||
{item.classname}
|
||||
</span>
|
||||
<span className="shrink-0 text-[var(--admin-text-muted)]">
|
||||
{done && item.status !== "done" && item.status !== "failed"
|
||||
? "Not completed"
|
||||
: statusLabels[item.status]}
|
||||
</span>
|
||||
</div>
|
||||
{item.message && (
|
||||
<p className="mt-1 break-words text-[var(--admin-text-muted)]">
|
||||
{item.message}
|
||||
</p>
|
||||
)}
|
||||
{[...new Set(item.warnings ?? [])].map((warning) => (
|
||||
<p
|
||||
key={warning}
|
||||
className="mt-1 break-words text-[var(--admin-warning)]"
|
||||
>
|
||||
{warning}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
Reference in new issue
Block a user