5155fa853d
- auth.ts: await initConfig() before refreshSession to fix localhost fallback - server.js: optional chaining req.body?.password for reset endpoint - seeder/page.tsx: replace confirm() with elegant AlertDialog for reset
317 lines
16 KiB
TypeScript
317 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Database, Loader2, RefreshCw, Trash2, AlertTriangle, CheckCircle2, XCircle, Terminal } from "lucide-react";
|
|
import { getSeederApiUrl } from "@/lib/config";
|
|
import { toast } from "sonner";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function SeederPage() {
|
|
const [isSeeding, setIsSeeding] = useState(false);
|
|
const [isResetting, setIsResetting] = useState(false);
|
|
|
|
// Log Dialog State
|
|
const [showLogDialog, setShowLogDialog] = useState(false);
|
|
const [logs, setLogs] = useState<string[]>([]);
|
|
const [processStatus, setProcessStatus] = useState<'idle' | 'running' | 'success' | 'error'>('idle');
|
|
const scrollEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
|
|
|
// Auto-scroll to bottom of logs
|
|
useEffect(() => {
|
|
if (scrollEndRef.current) {
|
|
scrollEndRef.current.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}, [logs]);
|
|
|
|
const handleStream = async (endpoint: string, type: 'seed' | 'reset') => {
|
|
setLogs([]);
|
|
setProcessStatus('running');
|
|
setShowLogDialog(true);
|
|
if (type === 'seed') setIsSeeding(true);
|
|
else setIsResetting(true);
|
|
|
|
try {
|
|
// For now, only /seed supports streaming in the backend v2 we implemented
|
|
// Check if backend supports stream. if not fallback?
|
|
// We implemented /seed/stream in server.js today.
|
|
// But /reset might not support it yet unless updated.
|
|
// Let's assume /reset is still legacy POST for now, or update it later.
|
|
// Actually, for consistency, let's keep /reset as POST but show a simple loader,
|
|
// or better, implement /reset/stream too?
|
|
// The user asked for "log popup" primarily for seeding content.
|
|
|
|
if (type === 'reset') {
|
|
// Legacy Reset (POST) - Mimic stream output
|
|
setLogs(['🚀 Starting flush/reset process...']);
|
|
const res = await fetch(`${getSeederApiUrl()}/reset`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }, // Fix for Express parsing empty body if needed
|
|
body: JSON.stringify({}) // Explicit empty body
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setLogs(prev => [...prev, '✅ Reset completed successfully!', JSON.stringify(data, null, 2)]);
|
|
setProcessStatus('success');
|
|
toast.success("Banco resetado com sucesso!");
|
|
} else {
|
|
setLogs(prev => [...prev, '❌ Reset failed.', data.message]);
|
|
setProcessStatus('error');
|
|
toast.error("Erro ao resetar");
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Real Streaming for Seed
|
|
const eventSource = new EventSource(`${getSeederApiUrl()}/seed/stream?type=full`);
|
|
|
|
eventSource.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data.message) {
|
|
setLogs(prev => [...prev, data.message]);
|
|
}
|
|
|
|
if (data.type === 'done') {
|
|
setProcessStatus('success');
|
|
eventSource.close();
|
|
toast.success("Processo concluído!");
|
|
} else if (data.type === 'error') {
|
|
setProcessStatus('error');
|
|
setLogs(prev => [...prev, `❌ Error: ${data.error}`]);
|
|
eventSource.close();
|
|
toast.error("Processo falhou");
|
|
}
|
|
} catch (e) {
|
|
console.error("Parse error", e);
|
|
}
|
|
};
|
|
|
|
eventSource.onerror = (err) => {
|
|
// Determine if it was a connection error or just closed
|
|
if (processStatus !== 'success') {
|
|
// setLogs(prev => [...prev, '⚠️ Connection closed or error.']);
|
|
// Often EventSource reconnects, so we don't assume fatal error immediately unless closed manually
|
|
// But for this one-shot script, we usually close on success.
|
|
// If we get error before success, it's an issue.
|
|
// Let's rely on the explicit 'done'/'error' messages.
|
|
eventSource.close();
|
|
}
|
|
};
|
|
|
|
} catch (error) {
|
|
console.error(error);
|
|
setProcessStatus('error');
|
|
setLogs(prev => [...prev, String(error)]);
|
|
} finally {
|
|
if (type === 'reset') {
|
|
setIsResetting(false);
|
|
}
|
|
// setIsSeeding is cleared when dialog closes or execution finishes
|
|
}
|
|
};
|
|
|
|
const closeDialog = () => {
|
|
if (processStatus === 'running') return; // Prevent closing while running? Or allow background?
|
|
setShowLogDialog(false);
|
|
setIsSeeding(false);
|
|
setIsResetting(false);
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto py-6 space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground">🌱 Seeder & Reset</h1>
|
|
<p className="text-muted-foreground mt-2">
|
|
Gerencie o estado do banco de dados de desenvolvimento
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{/* Seed Card */}
|
|
<Card className="border-l-4 border-l-green-500 shadow-sm">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-green-700 dark:text-green-400">
|
|
<Database className="h-6 w-6" />
|
|
Popular Banco de Dados
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Injeta dados massivos para teste e desenvolvimento
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="bg-muted/50 p-4 rounded-lg text-sm space-y-2 border border-border">
|
|
<h4 className="font-semibold flex items-center gap-2">
|
|
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
|
O que será criado:
|
|
</h4>
|
|
<ul className="list-disc list-inside text-muted-foreground ml-1 space-y-1">
|
|
<li>Empresas (ACME, Stark, fake generates)</li>
|
|
<li>Usuários (Recruiters, Candidates, Admins)</li>
|
|
<li>Vagas de emprego e Candidaturas</li>
|
|
<li>Cidades, Estados e Países</li>
|
|
<li>Tickets e Notificações</li>
|
|
</ul>
|
|
</div>
|
|
<Button
|
|
onClick={() => handleStream('seed', 'seed')}
|
|
disabled={isSeeding || isResetting}
|
|
className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold h-12 text-lg shadow-md transition-all hover:scale-[1.02]"
|
|
>
|
|
{isSeeding ? <Loader2 className="mr-2 h-5 w-5 animate-spin" /> : <RefreshCw className="mr-2 h-5 w-5" />}
|
|
Executar Seed Completo
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Reset Card */}
|
|
<Card className="border-l-4 border-l-destructive shadow-sm">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-destructive">
|
|
<AlertTriangle className="h-6 w-6" />
|
|
Resetar / Limpar Banco
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Ação destrutiva para limpar o ambiente
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="bg-destructive/10 p-4 rounded-lg text-sm space-y-2 border border-destructive/20">
|
|
<h4 className="font-semibold flex items-center gap-2 text-destructive">
|
|
<XCircle className="h-4 w-4" />
|
|
O que será apagado:
|
|
</h4>
|
|
<ul className="list-disc list-inside text-destructive/80 ml-1 space-y-1">
|
|
<li>Todas as empresas e vagas</li>
|
|
<li>Todos os usuários (exceto SuperAdmin)</li>
|
|
<li>Candidaturas e históricos</li>
|
|
<li>Logs e notificações</li>
|
|
</ul>
|
|
</div>
|
|
<Button
|
|
onClick={() => setShowConfirmDialog(true)}
|
|
disabled={isSeeding || isResetting}
|
|
className="w-full"
|
|
variant="destructive"
|
|
size="lg"
|
|
>
|
|
{isResetting ? <Loader2 className="mr-2 h-5 w-5 animate-spin" /> : <Trash2 className="mr-2 h-5 w-5" />}
|
|
Apagar Tudo (Reset)
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Log Dialog */}
|
|
<Dialog open={showLogDialog} onOpenChange={(open) => { if (!open && processStatus !== 'running') closeDialog(); }}>
|
|
<DialogContent className="max-w-4xl h-[80vh] flex flex-col p-6 gap-4">
|
|
<DialogHeader className="shrink-0 space-y-2">
|
|
<DialogTitle className="flex items-center gap-2 text-2xl">
|
|
{processStatus === 'running' && <Loader2 className="h-6 w-6 animate-spin text-blue-500" />}
|
|
{processStatus === 'success' && <CheckCircle2 className="h-6 w-6 text-green-500" />}
|
|
{processStatus === 'error' && <XCircle className="h-6 w-6 text-destructive" />}
|
|
Console de execução
|
|
</DialogTitle>
|
|
<DialogDescription className="text-base text-gray-500">
|
|
Acompanhe o progresso da operação em tempo real.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{/* Terminal Window */}
|
|
<div className="flex-1 min-h-0 bg-slate-950 rounded-lg border border-slate-800 shadow-inner flex flex-col font-mono text-sm overflow-hidden relative group">
|
|
{/* Terminal Header */}
|
|
<div className="bg-slate-900 px-4 py-2 border-b border-slate-800 flex items-center gap-2 text-slate-400 text-xs">
|
|
<Terminal className="h-3 w-3" />
|
|
<span>root@gohorse-seeder:~# script.sh</span>
|
|
</div>
|
|
|
|
{/* Scrollable Logs */}
|
|
<div className="flex-1 overflow-auto p-4 space-y-1 text-slate-300">
|
|
{logs.length === 0 && processStatus === 'idle' && (
|
|
<div className="opacity-50 italic">Aguardando início...</div>
|
|
)}
|
|
{logs.map((log, i) => (
|
|
<div key={i} className="break-words leading-relaxed animate-in fade-in slide-in-from-left-2 duration-300">
|
|
<span className="opacity-50 mr-2 select-none">
|
|
{new Date().toLocaleTimeString()}
|
|
</span>
|
|
{log.includes('❌') ? (
|
|
<span className="text-red-400 font-bold">{log}</span>
|
|
) : log.includes('✅') ? (
|
|
<span className="text-green-400 font-bold">{log}</span>
|
|
) : log.includes('🚀') ? (
|
|
<span className="text-blue-400 font-bold underline">{log}</span>
|
|
) : (
|
|
<span>{log}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
<div ref={scrollEndRef} />
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="shrink-0 sm:justify-between">
|
|
<div className="flex items-center text-sm text-muted-foreground">
|
|
Status: <span className={cn("ml-2 font-medium capitalize", {
|
|
'text-blue-500': processStatus === 'running',
|
|
'text-green-500': processStatus === 'success',
|
|
'text-red-500': processStatus === 'error'
|
|
})}>{processStatus}</span>
|
|
</div>
|
|
<Button
|
|
onClick={closeDialog}
|
|
variant={processStatus === 'running' ? 'ghost' : 'default'}
|
|
disabled={processStatus === 'running'}
|
|
>
|
|
{processStatus === 'running' ? 'Executando...' : 'Fechar'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Confirmation Dialog */}
|
|
<Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 text-destructive">
|
|
<AlertTriangle className="h-6 w-6" />
|
|
Atenção Absoluta!
|
|
</DialogTitle>
|
|
<DialogDescription className="text-base pt-2">
|
|
Você está prestes a <strong>APAGAR TODOS OS DADOS</strong> do banco de dados (exceto admin).
|
|
<br /><br />
|
|
Esta ação é irreversível. Todas as vagas, candidaturas e empresas serão perdidas.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button variant="ghost" onClick={() => setShowConfirmDialog(false)}>
|
|
Cancelar, me tire daqui!
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => {
|
|
setShowConfirmDialog(false);
|
|
handleStream('reset', 'reset');
|
|
}}
|
|
>
|
|
Sim, apagar tudo
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|