-
+
+ {/* Close button - only show when complete */}
+ {isComplete && onClose && (
+
+ )}
+
-
-
+ {isComplete ? (
+
+ ) : (
+ <>
+
+
+
+ )}
-
-
- Processing
-
+
+ {/* Static title text */}
+ {title && (
- {action}
+ {title}
-
- Please wait...
-
-
+ )}
+
+ {/* Log output */}
+ {logs.length > 0 && (
+
+ {logs.map((log, index) => (
+
+ {log}
+
+ ))}
+
+
+ )}
+
+ {!isComplete && (
+
+ )}
diff --git a/src/app/_components/PBSCredentialsModal.tsx b/src/app/_components/PBSCredentialsModal.tsx
new file mode 100644
index 0000000..e64e3e9
--- /dev/null
+++ b/src/app/_components/PBSCredentialsModal.tsx
@@ -0,0 +1,296 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Lock, CheckCircle, AlertCircle } from 'lucide-react';
+import { useRegisterModal } from './modal/ModalStackProvider';
+import { api } from '~/trpc/react';
+import type { Storage } from '~/server/services/storageService';
+
+interface PBSCredentialsModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ serverId: number;
+ serverName: string;
+ storage: Storage;
+}
+
+export function PBSCredentialsModal({
+ isOpen,
+ onClose,
+ serverId,
+ serverName,
+ storage
+}: PBSCredentialsModalProps) {
+ const [pbsIp, setPbsIp] = useState('');
+ const [pbsDatastore, setPbsDatastore] = useState('');
+ const [pbsPassword, setPbsPassword] = useState('');
+ const [pbsFingerprint, setPbsFingerprint] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+
+ // Extract PBS info from storage object
+ const pbsIpFromStorage = (storage as any).server || null;
+ const pbsDatastoreFromStorage = (storage as any).datastore || null;
+
+ // Fetch existing credentials
+ const { data: credentialData, refetch } = api.pbsCredentials.getCredentialsForStorage.useQuery(
+ { serverId, storageName: storage.name },
+ { enabled: isOpen }
+ );
+
+ // Initialize form with storage config values or existing credentials
+ useEffect(() => {
+ if (isOpen) {
+ if (credentialData?.success && credentialData.credential) {
+ // Load existing credentials
+ setPbsIp(credentialData.credential.pbs_ip);
+ setPbsDatastore(credentialData.credential.pbs_datastore);
+ setPbsPassword(''); // Don't show password
+ setPbsFingerprint(credentialData.credential.pbs_fingerprint || '');
+ } else {
+ // Initialize with storage config values
+ setPbsIp(pbsIpFromStorage || '');
+ setPbsDatastore(pbsDatastoreFromStorage || '');
+ setPbsPassword('');
+ setPbsFingerprint('');
+ }
+ }
+ }, [isOpen, credentialData, pbsIpFromStorage, pbsDatastoreFromStorage]);
+
+ const saveCredentials = api.pbsCredentials.saveCredentials.useMutation({
+ onSuccess: () => {
+ void refetch();
+ onClose();
+ },
+ onError: (error) => {
+ console.error('Failed to save PBS credentials:', error);
+ alert(`Failed to save credentials: ${error.message}`);
+ },
+ });
+
+ const deleteCredentials = api.pbsCredentials.deleteCredentials.useMutation({
+ onSuccess: () => {
+ void refetch();
+ onClose();
+ },
+ onError: (error) => {
+ console.error('Failed to delete PBS credentials:', error);
+ alert(`Failed to delete credentials: ${error.message}`);
+ },
+ });
+
+ useRegisterModal(isOpen, { id: 'pbs-credentials-modal', allowEscape: true, onClose });
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ if (!pbsIp || !pbsDatastore || !pbsFingerprint) {
+ alert('Please fill in all required fields (IP, Datastore, Fingerprint)');
+ return;
+ }
+
+ // Password is optional when updating existing credentials
+ setIsLoading(true);
+ try {
+ await saveCredentials.mutateAsync({
+ serverId,
+ storageName: storage.name,
+ pbs_ip: pbsIp,
+ pbs_datastore: pbsDatastore,
+ pbs_password: pbsPassword || undefined, // Undefined means keep existing password
+ pbs_fingerprint: pbsFingerprint,
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleDelete = async () => {
+ if (!confirm('Are you sure you want to delete the PBS credentials for this storage?')) {
+ return;
+ }
+
+ setIsLoading(true);
+ try {
+ await deleteCredentials.mutateAsync({
+ serverId,
+ storageName: storage.name,
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ if (!isOpen) return null;
+
+ const hasCredentials = credentialData?.success && credentialData.credential;
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
+ PBS Credentials - {storage.name}
+
+
+
+
+
+ {/* Content */}
+
+
+
+ );
+}
+
diff --git a/src/app/_components/ScriptInstallationCard.tsx b/src/app/_components/ScriptInstallationCard.tsx
index 5490fee..6221839 100644
--- a/src/app/_components/ScriptInstallationCard.tsx
+++ b/src/app/_components/ScriptInstallationCard.tsx
@@ -44,6 +44,7 @@ interface ScriptInstallationCardProps {
onSave: () => void;
onCancel: () => void;
onUpdate: () => void;
+ onBackup?: () => void;
onShell: () => void;
onDelete: () => void;
isUpdating: boolean;
@@ -68,6 +69,7 @@ export function ScriptInstallationCard({
onSave,
onCancel,
onUpdate,
+ onBackup,
onShell,
onDelete,
isUpdating,
@@ -307,6 +309,15 @@ export function ScriptInstallationCard({
Update
)}
+ {script.container_id && script.execution_mode === 'ssh' && onBackup && (
+
+ Backup
+
+ )}
{script.container_id && script.execution_mode === 'ssh' && (
(null);
+ const [showStoragesModal, setShowStoragesModal] = useState(false);
+ const [selectedServerForStorages, setSelectedServerForStorages] = useState<{ id: number; name: string } | null>(null);
const handleEdit = (server: Server) => {
setEditingId(server.id);
@@ -251,6 +254,19 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
)}
+
{/* View Public Key button - only show for generated keys */}
{server.key_generated === true && (
@@ -324,6 +340,19 @@ export function ServerList({ servers, onUpdate, onDelete }: ServerListProps) {
serverIp={publicKeyData.serverIp}
/>
)}
+
+ {/* Server Storages Modal */}
+ {selectedServerForStorages && (
+ {
+ setShowStoragesModal(false);
+ setSelectedServerForStorages(null);
+ }}
+ serverId={selectedServerForStorages.id}
+ serverName={selectedServerForStorages.name}
+ />
+ )}
);
}
diff --git a/src/app/_components/ServerStoragesModal.tsx b/src/app/_components/ServerStoragesModal.tsx
new file mode 100644
index 0000000..60d51a2
--- /dev/null
+++ b/src/app/_components/ServerStoragesModal.tsx
@@ -0,0 +1,227 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from './ui/button';
+import { Database, RefreshCw, CheckCircle, Lock, AlertCircle } from 'lucide-react';
+import { useRegisterModal } from './modal/ModalStackProvider';
+import { api } from '~/trpc/react';
+import { PBSCredentialsModal } from './PBSCredentialsModal';
+import type { Storage } from '~/server/services/storageService';
+
+interface ServerStoragesModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ serverId: number;
+ serverName: string;
+}
+
+export function ServerStoragesModal({
+ isOpen,
+ onClose,
+ serverId,
+ serverName
+}: ServerStoragesModalProps) {
+ const [forceRefresh, setForceRefresh] = useState(false);
+ const [selectedPBSStorage, setSelectedPBSStorage] = useState(null);
+
+ const { data, isLoading, refetch } = api.installedScripts.getBackupStorages.useQuery(
+ { serverId, forceRefresh },
+ { enabled: isOpen }
+ );
+
+ // Fetch all PBS credentials for this server to show status indicators
+ const { data: allCredentials } = api.pbsCredentials.getAllCredentialsForServer.useQuery(
+ { serverId },
+ { enabled: isOpen }
+ );
+
+ const credentialsMap = new Map();
+ if (allCredentials?.success) {
+ allCredentials.credentials.forEach(c => {
+ credentialsMap.set(c.storage_name, true);
+ });
+ }
+
+ useRegisterModal(isOpen, { id: 'server-storages-modal', allowEscape: true, onClose });
+
+ const handleRefresh = () => {
+ setForceRefresh(true);
+ void refetch();
+ setTimeout(() => setForceRefresh(false), 1000);
+ };
+
+ if (!isOpen) return null;
+
+ const storages = data?.success ? data.storages : [];
+ const backupStorages = storages.filter(s => s.supportsBackup);
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
+ Storages for {serverName}
+
+
+
+
+
+
+
+
+ {/* Content */}
+
+ {isLoading ? (
+
+
+
Loading storages...
+
+ ) : !data?.success ? (
+
+
+
Failed to load storages
+
+ {data?.error ?? 'Unknown error occurred'}
+
+
+
+ ) : storages.length === 0 ? (
+
+
+
No storages found
+
+ Make sure your server has storages configured.
+
+
+ ) : (
+ <>
+ {data.cached && (
+
+ Showing cached data. Click Refresh to fetch latest from server.
+
+ )}
+
+
+ {storages.map((storage) => {
+ const isBackupCapable = storage.supportsBackup;
+
+ return (
+
+
+
+
{storage.name}
+ {isBackupCapable && (
+
+
+ Backup
+
+ )}
+
+ {storage.type}
+
+ {storage.type === 'pbs' && (
+ credentialsMap.has(storage.name) ? (
+
+
+ Credentials Configured
+
+ ) : (
+
+
+ Credentials Needed
+
+ )
+ )}
+
+
+
+ Content: {storage.content.join(', ')}
+
+ {storage.nodes && storage.nodes.length > 0 && (
+
+ Nodes: {storage.nodes.join(', ')}
+
+ )}
+ {Object.entries(storage)
+ .filter(([key]) => !['name', 'type', 'content', 'supportsBackup', 'nodes'].includes(key))
+ .map(([key, value]) => (
+
+ {key.replace(/_/g, ' ')}: {String(value)}
+
+ ))}
+
+ {storage.type === 'pbs' && (
+
+
+
+ )}
+
+
+ );
+ })}
+
+
+ {backupStorages.length > 0 && (
+
+
+ {backupStorages.length} storage{backupStorages.length !== 1 ? 's' : ''} available for backups
+
+
+ )}
+
+ )}
+
+
+
+ {/* PBS Credentials Modal */}
+ {selectedPBSStorage && (
+
setSelectedPBSStorage(null)}
+ serverId={serverId}
+ serverName={serverName}
+ storage={selectedPBSStorage}
+ />
+ )}
+
+
+ {/* Header */}
+
+
+
+
Select Backup Storage
+
+
+
+
+ {/* Content */}
+
+ {isLoading ? (
+
+
+
Loading storages...
+
+ ) : backupStorages.length === 0 ? (
+
+
+
No backup-capable storages found
+
+ Make sure your server has storages configured with backup content type.
+
+
+
+ ) : (
+ <>
+
+ Select a storage to use for the backup. Only storages that support backups are shown.
+
+
+ {/* Storage List */}
+
+ {backupStorages.map((storage) => (
+
setSelectedStorage(storage)}
+ className={`p-4 border rounded-lg cursor-pointer transition-all ${
+ selectedStorage?.name === storage.name
+ ? 'border-primary bg-primary/10'
+ : 'border-border hover:border-primary/50 hover:bg-accent/50'
+ }`}
+ >
+
+
+
+
{storage.name}
+
+ Backup
+
+
+ {storage.type}
+
+
+
+ Content: {storage.content.join(', ')}
+ {storage.nodes && storage.nodes.length > 0 && (
+ • Nodes: {storage.nodes.join(', ')}
+ )}
+
+
+ {selectedStorage?.name === storage.name && (
+
+ )}
+
+
+ ))}
+
+
+ {/* Refresh Button */}
+
+
+
+
+ )}
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+