شرح مختصر للتعديلات اللي عملتها
هذا الالتزام موجود في:
Abdelsabour
442
pages/index.tsx
Normal file
442
pages/index.tsx
Normal file
@@ -0,0 +1,442 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { toast } from "sonner";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Loader2, CheckCircle, XCircle, Wand2, Moon, Sun, ShieldCheck, History, ArrowRight, ArrowLeft, Download, Database, Server, Cloud } from "lucide-react";
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
// It's a good practice to define types for complex objects
|
||||
type BackupRecord = {
|
||||
id: string;
|
||||
dbName: string;
|
||||
status: 'COMPLETED' | 'FAILED' | 'PROCESSING' | 'QUEUED';
|
||||
createdAt: string;
|
||||
fileName?: string;
|
||||
error?: string;
|
||||
downloadUrl?: string;
|
||||
};
|
||||
|
||||
// Define a type for the form data to ensure type safety
|
||||
type BackupFormData = {
|
||||
dbType: string;
|
||||
dbHost: string;
|
||||
dbPort: string;
|
||||
dbUser: string;
|
||||
dbPassword: string;
|
||||
dbName: string;
|
||||
dbRequireSsl: boolean;
|
||||
s3Endpoint: string;
|
||||
s3BucketName: string;
|
||||
s3AccessKey: string;
|
||||
s3SecretKey: string;
|
||||
s3Region: string;
|
||||
cronExpression: string;
|
||||
};
|
||||
|
||||
type View = 'form' | 'history';
|
||||
type Step = 'database' | 's3' | 'schedule';
|
||||
type ConnectionStatus = 'idle' | 'success' | 'error' | 'testing';
|
||||
|
||||
/**
|
||||
* Main component for the Backup System UI
|
||||
*/
|
||||
export default function HomePage() {
|
||||
const { setTheme, theme } = useTheme();
|
||||
const [view, setView] = useState<View>('form');
|
||||
|
||||
// State for the main backup form
|
||||
const [formData, setFormData] = useState<BackupFormData>({
|
||||
dbType: 'postgresql',
|
||||
dbHost: '', dbPort: '5432', dbUser: '', dbPassword: '', dbName: '', dbRequireSsl: true,
|
||||
s3Endpoint: '', s3BucketName: '', s3AccessKey: '', s3SecretKey: '', s3Region: 'us-east-1',
|
||||
cronExpression: '',
|
||||
});
|
||||
|
||||
// UI/UX State
|
||||
const [currentStep, setCurrentStep] = useState<Step>('database');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('idle');
|
||||
|
||||
// State for the real-time backup process modal
|
||||
const [isBackupInProgress, setIsBackupInProgress] = useState(false);
|
||||
const [backupLogs, setBackupLogs] = useState<string[]>([]);
|
||||
const [backupStatus, setBackupStatus] = useState<'pending' | 'completed' | 'failed'>('pending');
|
||||
|
||||
// --- Event Handlers ---
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
// Reset connection status if database details change
|
||||
if (name.startsWith('db')) {
|
||||
setConnectionStatus('idle');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectChange = (name: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
if (name === 'dbType') {
|
||||
const ports: { [key: string]: string } = { postgresql: '5432' };
|
||||
setFormData(prev => ({ ...prev, dbPort: ports[value] || '' }));
|
||||
setConnectionStatus('idle');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (name: string, checked: boolean) => {
|
||||
setFormData(prev => ({ ...prev, [name]: checked }));
|
||||
if (name.startsWith('db')) {
|
||||
setConnectionStatus('idle');
|
||||
}
|
||||
};
|
||||
|
||||
// --- API Calls ---
|
||||
|
||||
const handleTestConnection = async () => {
|
||||
setConnectionStatus('testing');
|
||||
try {
|
||||
const response = await fetch('/api/test-connection', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (response.ok) {
|
||||
setConnectionStatus('success');
|
||||
toast.success("Connection successful!");
|
||||
} else {
|
||||
setConnectionStatus('error');
|
||||
toast.error("Connection failed.", { description: result.error || "Please check credentials and network." });
|
||||
}
|
||||
} catch (error: any) {
|
||||
setConnectionStatus('error');
|
||||
toast.error("Connection failed.", { description: error?.message || "An unknown error occurred." });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// If cron expression exists, it's a schedule job, not a real-time one
|
||||
if (formData.cronExpression) {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/backup', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (response.ok) {
|
||||
toast.success("Success! 🎉", { description: "Backup job has been scheduled." });
|
||||
setView('history');
|
||||
} else {
|
||||
toast.error("Uh oh! Something went wrong.", { description: result.message || result.error });
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error("Failed to schedule backup.", { description: error?.message });
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Start Real-time Backup via Server-Sent Events ---
|
||||
setIsBackupInProgress(true);
|
||||
setBackupLogs([]);
|
||||
setBackupStatus('pending');
|
||||
|
||||
const queryParams = new URLSearchParams();
|
||||
// A more type-safe way to append params
|
||||
Object.entries(formData).forEach(([key, value]) => {
|
||||
queryParams.append(key, String(value));
|
||||
});
|
||||
|
||||
const eventSource = new EventSource(`/api/backup-stream?${queryParams.toString()}`);
|
||||
|
||||
eventSource.onopen = () => {
|
||||
setBackupLogs(prev => [...prev, "Connection to server established. Starting backup..."]);
|
||||
};
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.message) {
|
||||
setBackupLogs((prevLogs) => [...prevLogs, data.message]);
|
||||
}
|
||||
if (data.status) {
|
||||
setBackupStatus(data.status);
|
||||
if (['completed', 'failed', 'closed'].includes(data.status)) {
|
||||
eventSource.close();
|
||||
if (data.status === 'completed') {
|
||||
toast.success("Backup completed successfully!");
|
||||
} else if (data.status === 'failed') {
|
||||
toast.error("Backup failed.", { description: "Check logs for more details."});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onerror = (err) => {
|
||||
toast.error("Connection to backup stream failed.");
|
||||
setBackupStatus('failed');
|
||||
setBackupLogs((prev) => [...prev, "Stream connection closed unexpectedly. The server might have terminated the process."]);
|
||||
eventSource.close();
|
||||
};
|
||||
};
|
||||
|
||||
// --- Step Navigation ---
|
||||
const nextStep = () => {
|
||||
if (currentStep === 'database') setCurrentStep('s3');
|
||||
if (currentStep === 's3') setCurrentStep('schedule');
|
||||
};
|
||||
const prevStep = () => {
|
||||
if (currentStep === 'schedule') setCurrentStep('s3');
|
||||
if (currentStep === 's3') setCurrentStep('database');
|
||||
};
|
||||
|
||||
// --- Render Logic ---
|
||||
|
||||
const renderStepContent = () => {
|
||||
switch(currentStep) {
|
||||
case 'database': return <DatabaseStepContent formData={formData} connectionStatus={connectionStatus} onTestConnection={handleTestConnection} onChange={handleChange} onSelectChange={(v: string) => handleSelectChange('dbType', v)} onCheckboxChange={(c: boolean) => handleCheckboxChange('dbRequireSsl', c)} />;
|
||||
case 's3': return <S3StepContent formData={formData} onChange={handleChange} />;
|
||||
case 'schedule': return <ScheduleStepContent formData={formData} onChange={handleChange} />;
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="container mx-auto flex min-h-screen flex-col items-center justify-center p-4">
|
||||
<div className="absolute top-4 right-4 flex items-center gap-2">
|
||||
<Button variant="outline" onClick={() => setView(view === 'form' ? 'history' : 'form')}>
|
||||
{view === 'form' ? <History className="mr-2 h-4 w-4"/> : <Wand2 className="mr-2 h-4 w-4" />}
|
||||
{view === 'form' ? 'View History' : 'New Backup'}
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{view === 'form' ? (
|
||||
<Card className="w-full max-w-2xl animate-in fade-in-50 duration-500">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-2xl"><ShieldCheck /> Secure Backup System</CardTitle>
|
||||
<CardDescription>Configure and run a secure, one-time or scheduled database backup.</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
{renderStepContent()}
|
||||
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button type="button" variant="outline" onClick={prevStep} disabled={currentStep === 'database'}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" /> Previous
|
||||
</Button>
|
||||
{currentStep !== 'schedule' ? (
|
||||
<Button type="button" onClick={nextStep} disabled={currentStep === 'database' && connectionStatus !== 'success'}>
|
||||
Next <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{formData.cronExpression ? 'Schedule Backup' : 'Run Backup Now'}
|
||||
</Button>
|
||||
)}
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
) : (
|
||||
<HistoryView />
|
||||
)}
|
||||
|
||||
{/* Real-time Backup Progress Modal */}
|
||||
<Dialog open={isBackupInProgress} onOpenChange={setIsBackupInProgress}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Backup in Progress...</DialogTitle>
|
||||
<DialogDescription>Please keep this window open until the process is complete. Logs are streamed from the server.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="mt-4 h-64 overflow-y-auto rounded-md bg-muted p-4 font-mono text-xs selection:bg-primary selection:text-primary-foreground">
|
||||
{backupLogs.map((log, index) => (<p key={index} className="whitespace-pre-wrap">{log}</p>))}
|
||||
</div>
|
||||
<DialogFooter className="sm:justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{backupStatus === 'completed' && <><CheckCircle className="h-5 w-5 text-green-500" /><p className="text-sm text-green-500">Backup completed successfully!</p></>}
|
||||
{backupStatus === 'failed' && <><XCircle className="h-5 w-5 text-red-500" /><p className="text-sm text-red-500">Backup failed. Check logs for details.</p></>}
|
||||
{backupStatus === 'pending' && <><Loader2 className="h-5 w-5 animate-spin" /><p className="text-sm text-muted-foreground">Processing...</p></>}
|
||||
</div>
|
||||
<Button onClick={() => { setIsBackupInProgress(false); if (backupStatus !== 'pending') setView('history'); }}>Close</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Sub-components for Form Steps with defined Prop Types ---
|
||||
|
||||
type DatabaseStepProps = {
|
||||
formData: BackupFormData;
|
||||
connectionStatus: ConnectionStatus;
|
||||
onTestConnection: () => void;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onSelectChange: (value: string) => void;
|
||||
onCheckboxChange: (checked: boolean) => void;
|
||||
};
|
||||
|
||||
const DatabaseStepContent = ({ formData, connectionStatus, onTestConnection, onChange, onSelectChange, onCheckboxChange }: DatabaseStepProps) => (
|
||||
<CardContent className="space-y-6 pt-6">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dbType">Database Type</Label>
|
||||
<Select onValueChange={onSelectChange} defaultValue={formData.dbType}>
|
||||
<SelectTrigger id="dbType"><SelectValue /></SelectTrigger>
|
||||
<SelectContent><SelectItem value="postgresql">PostgreSQL</SelectItem></SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2"><Label htmlFor="dbHost">Host</Label><Input id="dbHost" name="dbHost" value={formData.dbHost} onChange={onChange} placeholder="e.g., db.example.com" required /></div>
|
||||
<div className="space-y-2"><Label htmlFor="dbPort">Port</Label><Input id="dbPort" name="dbPort" value={formData.dbPort} onChange={onChange} required /></div>
|
||||
<div className="space-y-2"><Label htmlFor="dbUser">User</Label><Input id="dbUser" name="dbUser" value={formData.dbUser} onChange={onChange} placeholder="e.g., backup_user" required /></div>
|
||||
<div className="space-y-2"><Label htmlFor="dbPassword">Password</Label><Input id="dbPassword" name="dbPassword" type="password" value={formData.dbPassword} onChange={onChange} /></div>
|
||||
<div className="space-y-2"><Label htmlFor="dbName">Database Name</Label><Input id="dbName" name="dbName" value={formData.dbName} onChange={onChange} placeholder="e.g., production_db" required /></div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 pt-2">
|
||||
<Checkbox id="dbRequireSsl" checked={formData.dbRequireSsl} onCheckedChange={onCheckboxChange} />
|
||||
<label htmlFor="dbRequireSsl" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Require SSL Connection</label>
|
||||
</div>
|
||||
<div className="flex items-center justify-end space-x-2 pt-4 border-t mt-4">
|
||||
{connectionStatus === 'success' && <CheckCircle className="h-5 w-5 text-green-500" />}
|
||||
{connectionStatus === 'error' && <XCircle className="h-5 w-5 text-red-500" />}
|
||||
<Button type="button" variant="outline" onClick={onTestConnection} disabled={connectionStatus === 'testing'}>
|
||||
{connectionStatus === 'testing' && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Test Connection
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
);
|
||||
|
||||
type S3StepProps = {
|
||||
formData: BackupFormData;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
};
|
||||
|
||||
const S3StepContent = ({ formData, onChange }: S3StepProps) => (
|
||||
<CardContent className="space-y-4 pt-6">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2 sm:col-span-2"><Label htmlFor="s3Endpoint">S3-Compatible Endpoint URL</Label><Input id="s3Endpoint" name="s3Endpoint" value={formData.s3Endpoint} onChange={onChange} placeholder="e.g., s3.us-west-2.amazonaws.com" required /></div>
|
||||
<div className="space-y-2"><Label htmlFor="s3BucketName">Bucket Name</Label><Input id="s3BucketName" name="s3BucketName" value={formData.s3BucketName} onChange={onChange} required /></div>
|
||||
<div className="space-y-2"><Label htmlFor="s3Region">Region</Label><Input id="s3Region" name="s3Region" value={formData.s3Region} onChange={onChange} required /></div>
|
||||
<div className="space-y-2"><Label htmlFor="s3AccessKey">Access Key</Label><Input id="s3AccessKey" name="s3AccessKey" value={formData.s3AccessKey} type="password" onChange={onChange} required /></div>
|
||||
<div className="space-y-2"><Label htmlFor="s3SecretKey">Secret Key</Label><Input id="s3SecretKey" name="s3SecretKey" type="password" value={formData.s3SecretKey} onChange={onChange} required /></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
);
|
||||
|
||||
type ScheduleStepProps = {
|
||||
formData: BackupFormData;
|
||||
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
};
|
||||
|
||||
const ScheduleStepContent = ({ formData, onChange }: ScheduleStepProps) => (
|
||||
<CardContent className="space-y-4 pt-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cronExpression">Cron Expression (Optional)</Label>
|
||||
<Input id="cronExpression" name="cronExpression" placeholder="e.g., 0 2 * * * (for 2 AM daily)" value={formData.cronExpression} onChange={onChange} />
|
||||
<p className="text-sm text-muted-foreground">Leave empty to run backup once immediately. Use <a href="https://crontab.guru/" target="_blank" rel="noopener noreferrer" className="text-primary underline">crontab.guru</a> to build expressions.</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
);
|
||||
|
||||
/**
|
||||
* Component to display the history of backup jobs
|
||||
*/
|
||||
function HistoryView() {
|
||||
const [records, setRecords] = useState<BackupRecord[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRecords = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/backups');
|
||||
if(response.ok) {
|
||||
const data = await response.json();
|
||||
setRecords(data);
|
||||
} else {
|
||||
toast.error("Could not fetch backup history.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch backup records:", error);
|
||||
toast.error("Could not fetch backup history.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchRecords();
|
||||
const interval = setInterval(fetchRecords, 5000); // Refresh every 5 seconds
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-4xl animate-in fade-in-50 duration-500">
|
||||
<CardHeader>
|
||||
<CardTitle>Backup History</CardTitle>
|
||||
<CardDescription>A list of all scheduled and completed backup jobs. Refreshes automatically.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading && records.length === 0 ? (
|
||||
<div className="flex flex-col justify-center items-center p-8 gap-4">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
<p className="text-muted-foreground">Loading history...</p>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<p className="text-center text-muted-foreground p-8">No backup jobs found yet.</p>
|
||||
) : (
|
||||
<div className="border rounded-md">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Database</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Created At</TableHead>
|
||||
<TableHead>Filename / Error</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((record) => (
|
||||
<TableRow key={record.id}>
|
||||
<TableCell className="font-medium flex items-center gap-2"><Database size={16}/> {record.dbName}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={record.status === 'COMPLETED' ? 'default' : record.status === 'FAILED' ? 'destructive' : 'secondary'}>
|
||||
{(record.status === 'QUEUED' || record.status === 'PROCESSING') && <Loader2 className="mr-2 h-3 w-3 animate-spin" />}
|
||||
{record.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{new Date(record.createdAt).toLocaleString()}</TableCell>
|
||||
<TableCell className="text-xs max-w-xs truncate" title={record.fileName || record.error}>{record.fileName || record.error}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{record.status === 'COMPLETED' && record.downloadUrl && (
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<a href={record.downloadUrl} target="_blank" rel="noopener noreferrer">
|
||||
<Download className="mr-2 h-4 w-4"/> Download
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
المرجع في مشكلة جديدة
حظر مستخدم