feat: add Network Backup section to Database Management
PC2 can now automatically pull and restore a fresh copy of PC1's database on a daily schedule. Config and API key are stored in local JSON files so they survive database restores. - New networkSyncConfigService: file-based config (network-backup-key.json, network-sync-config.json) that persists through DB restores - New networkSyncService: streams live pg_dump from source PC over HTTP and pipes into psql, then reconnects Prisma and applies missing migrations - 6 new endpoints: get/regenerate API key, serve backup stream (key-auth only), get/save sync config, trigger immediate sync - Hourly cron job that fires only when current hour matches configured syncHour - NetworkBackupManager component: shows this machine's key (show/copy/regen) and receiver config (enable toggle, hour picker 0-23, source URL + key, Save + Sync Now, last sync status) - README setup guide for both PCs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ff
@@ -0,0 +1,318 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Copy, Eye, EyeOff, RefreshCw, Network, RotateCcw } from "lucide-react";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
const HOUR_OPTIONS = Array.from({ length: 24 }, (_, h) => {
|
||||
const label =
|
||||
h === 0
|
||||
? "12:00 AM (midnight)"
|
||||
: h < 12
|
||||
? `${h}:00 AM`
|
||||
: h === 12
|
||||
? "12:00 PM (noon)"
|
||||
: `${h - 12}:00 PM`;
|
||||
return { value: h, label };
|
||||
});
|
||||
|
||||
export function NetworkBackupManager() {
|
||||
const { toast } = useToast();
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [confirmRegenOpen, setConfirmRegenOpen] = useState(false);
|
||||
|
||||
// receiver form state (initialised from query)
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
const [syncHour, setSyncHour] = useState(0);
|
||||
const [sourceUrl, setSourceUrl] = useState("");
|
||||
const [receiverApiKey, setReceiverApiKey] = useState("");
|
||||
const [formLoaded, setFormLoaded] = useState(false);
|
||||
|
||||
// ==============================
|
||||
// Queries
|
||||
// ==============================
|
||||
const { data: keyData } = useQuery({
|
||||
queryKey: ["/db/network-backup-key"],
|
||||
queryFn: async () => {
|
||||
const res = await apiRequest("GET", "/api/database-management/network-backup-key");
|
||||
return res.json() as Promise<{ apiKey: string }>;
|
||||
},
|
||||
});
|
||||
|
||||
useQuery({
|
||||
queryKey: ["/db/network-sync-config"],
|
||||
queryFn: async () => {
|
||||
const res = await apiRequest("GET", "/api/database-management/network-sync-config");
|
||||
const data = await res.json();
|
||||
if (!formLoaded) {
|
||||
setEnabled(data.enabled ?? false);
|
||||
setSyncHour(data.syncHour ?? 0);
|
||||
setSourceUrl(data.sourceUrl ?? "");
|
||||
setReceiverApiKey(data.apiKey ?? "");
|
||||
setFormLoaded(true);
|
||||
}
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
// ==============================
|
||||
// Mutations
|
||||
// ==============================
|
||||
const regenMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await apiRequest("POST", "/api/database-management/network-backup-key/regenerate");
|
||||
return res.json() as Promise<{ apiKey: string }>;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.setQueryData(["/db/network-backup-key"], data);
|
||||
setConfirmRegenOpen(false);
|
||||
toast({ title: "API key regenerated", description: "Update the key on your backup PC." });
|
||||
},
|
||||
onError: () => {
|
||||
toast({ title: "Error", description: "Failed to regenerate key.", variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await apiRequest("PUT", "/api/database-management/network-sync-config", {
|
||||
enabled,
|
||||
syncHour,
|
||||
sourceUrl,
|
||||
apiKey: receiverApiKey,
|
||||
});
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/db/network-sync-config"] });
|
||||
toast({ title: "Network sync settings saved" });
|
||||
},
|
||||
onError: () => {
|
||||
toast({ title: "Error", description: "Failed to save settings.", variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
const syncNowMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await apiRequest("POST", "/api/database-management/network-sync-now");
|
||||
if (!res.ok) {
|
||||
const body = await res.json();
|
||||
throw new Error(body.details || body.error || "Sync failed");
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/db/network-sync-config"] });
|
||||
toast({ title: "Sync complete", description: "Database synced from source PC." });
|
||||
},
|
||||
onError: (err: any) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/db/network-sync-config"] });
|
||||
toast({ title: "Sync failed", description: err.message, variant: "destructive" });
|
||||
},
|
||||
});
|
||||
|
||||
const displayKey = keyData?.apiKey ?? "";
|
||||
const maskedKey = displayKey ? "••••••••-••••-••••-••••-" + displayKey.slice(-12) : "—";
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Network className="h-5 w-5" />
|
||||
Network Backup
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
|
||||
{/* ── Section A: Source role (this machine's API key) ── */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold text-gray-800">This Machine's Backup Key</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Share this key with the backup PC so it can pull a copy of this machine's
|
||||
database. The key survives database restores (stored in a local file).
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
readOnly
|
||||
value={showKey ? displayKey : maskedKey}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
title={showKey ? "Hide key" : "Show key"}
|
||||
onClick={() => setShowKey((v) => !v)}
|
||||
>
|
||||
{showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
title="Copy to clipboard"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(displayKey);
|
||||
toast({ title: "Copied to clipboard" });
|
||||
}}
|
||||
disabled={!displayKey}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
title="Regenerate key"
|
||||
onClick={() => setConfirmRegenOpen(true)}
|
||||
disabled={regenMutation.isPending}
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t" />
|
||||
|
||||
{/* ── Section B: Receiver role (pull config) ── */}
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm font-semibold text-gray-800">Sync from Another PC</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Configure this machine to pull a fresh copy of the database from another PC at
|
||||
a scheduled time each day. Enter the source PC's local IP address and its
|
||||
Backup Key.
|
||||
</p>
|
||||
|
||||
{/* Enable toggle + time picker on same row */}
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
id="network-sync-toggle"
|
||||
checked={enabled}
|
||||
onCheckedChange={setEnabled}
|
||||
/>
|
||||
<label
|
||||
htmlFor="network-sync-toggle"
|
||||
className="text-sm font-medium text-gray-700 cursor-pointer select-none"
|
||||
>
|
||||
Enable daily sync
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-gray-600 whitespace-nowrap">at</label>
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm text-gray-700 bg-white"
|
||||
value={syncHour}
|
||||
onChange={(e) => setSyncHour(Number(e.target.value))}
|
||||
>
|
||||
{HOUR_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-gray-600">Source PC URL</label>
|
||||
<Input
|
||||
placeholder="http://192.168.0.94:3000"
|
||||
value={sourceUrl}
|
||||
onChange={(e) => setSourceUrl(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-gray-600">Source PC API Key</label>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Paste the key from the source PC"
|
||||
value={receiverApiKey}
|
||||
onChange={(e) => setReceiverApiKey(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={() => saveMutation.mutate()}
|
||||
disabled={saveMutation.isPending}
|
||||
>
|
||||
{saveMutation.isPending ? "Saving…" : "Save Settings"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => syncNowMutation.mutate()}
|
||||
disabled={syncNowMutation.isPending || !sourceUrl || !receiverApiKey}
|
||||
title="Pull and restore now (replaces this machine's database)"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4 mr-1" />
|
||||
{syncNowMutation.isPending ? "Syncing…" : "Sync Now"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Last sync status */}
|
||||
<SyncStatus />
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{/* Confirm regenerate dialog */}
|
||||
<AlertDialog open={confirmRegenOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Regenerate backup key?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
The old key will stop working immediately. You will need to update the API key
|
||||
on any backup PC that is currently configured to sync from this machine.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setConfirmRegenOpen(false)}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={() => regenMutation.mutate()}
|
||||
disabled={regenMutation.isPending}
|
||||
>
|
||||
Regenerate
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function SyncStatus() {
|
||||
const { data } = useQuery({
|
||||
queryKey: ["/db/network-sync-config"],
|
||||
queryFn: async () => {
|
||||
const res = await apiRequest("GET", "/api/database-management/network-sync-config");
|
||||
return res.json();
|
||||
},
|
||||
});
|
||||
|
||||
if (!data?.lastSyncAt) return null;
|
||||
|
||||
const date = new Date(data.lastSyncAt).toLocaleString();
|
||||
const ok = data.lastSyncStatus === "success";
|
||||
|
||||
return (
|
||||
<div className={`text-xs rounded p-2 ${ok ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"}`}>
|
||||
{ok ? "✅" : "❌"} Last sync: {date}
|
||||
{!ok && data.lastSyncError && (
|
||||
<span className="block mt-0.5 text-red-500">{data.lastSyncError}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { formatDateToHumanReadable } from "@/utils/dateUtils";
|
||||
import { BackupDestinationManager } from "@/components/database-management/backup-destination-manager";
|
||||
import { NetworkBackupManager } from "@/components/database-management/network-backup-manager";
|
||||
import { ImportDatabaseSection } from "@/components/database-management/import-database-section";
|
||||
|
||||
export default function DatabaseManagementPage() {
|
||||
@@ -261,6 +262,9 @@ export default function DatabaseManagementPage() {
|
||||
{/* Externa Drive automatic backup manager */}
|
||||
<BackupDestinationManager />
|
||||
|
||||
{/* Network Backup (PC-to-PC sync) */}
|
||||
<NetworkBackupManager />
|
||||
|
||||
{/* Import / Restore Database */}
|
||||
<ImportDatabaseSection />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user