move feature from meta-sort to meta-core
This commit is contained in:
Pierre
@@ -0,0 +1,328 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface Mount {
|
||||
id: string;
|
||||
name: string;
|
||||
type: 'nfs' | 'smb' | 'rclone';
|
||||
enabled: boolean;
|
||||
desiredMounted: boolean;
|
||||
mountPath: string;
|
||||
mounted: boolean;
|
||||
error?: string;
|
||||
lastChecked: number;
|
||||
}
|
||||
|
||||
interface RcloneRemote {
|
||||
name: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
const cardStyle: React.CSSProperties = {
|
||||
background: '#16213e',
|
||||
borderRadius: '8px',
|
||||
padding: '1.5rem',
|
||||
marginBottom: '1rem',
|
||||
};
|
||||
|
||||
const buttonStyle: React.CSSProperties = {
|
||||
padding: '0.5rem 1rem',
|
||||
background: '#0f3460',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
marginRight: '0.5rem',
|
||||
};
|
||||
|
||||
const dangerButtonStyle: React.CSSProperties = {
|
||||
...buttonStyle,
|
||||
background: '#7f1d1d',
|
||||
};
|
||||
|
||||
export default function Mounts() {
|
||||
const [mounts, setMounts] = useState<Mount[]>([]);
|
||||
const [remotes, setRemotes] = useState<RcloneRemote[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
type: 'nfs' as 'nfs' | 'smb' | 'rclone',
|
||||
nfsServer: '',
|
||||
nfsPath: '',
|
||||
smbServer: '',
|
||||
smbShare: '',
|
||||
smbUsername: '',
|
||||
smbPassword: '',
|
||||
rcloneRemote: '',
|
||||
rclonePath: '',
|
||||
});
|
||||
|
||||
const fetchMounts = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/mounts');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setMounts(data.mounts || []);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch mounts:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRemotes = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/mounts/rclone/remotes');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setRemotes(data.remotes || []);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch remotes:', err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMounts();
|
||||
fetchRemotes();
|
||||
const interval = setInterval(fetchMounts, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleMount = async (id: string) => {
|
||||
await fetch(`/api/mounts/${id}/mount`, { method: 'POST' });
|
||||
fetchMounts();
|
||||
};
|
||||
|
||||
const handleUnmount = async (id: string) => {
|
||||
await fetch(`/api/mounts/${id}/unmount`, { method: 'POST' });
|
||||
fetchMounts();
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Are you sure you want to delete this mount?')) return;
|
||||
await fetch(`/api/mounts/${id}`, { method: 'DELETE' });
|
||||
fetchMounts();
|
||||
};
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const body: Record<string, unknown> = {
|
||||
name: formData.name,
|
||||
type: formData.type,
|
||||
};
|
||||
|
||||
if (formData.type === 'nfs') {
|
||||
body.nfsServer = formData.nfsServer;
|
||||
body.nfsPath = formData.nfsPath;
|
||||
} else if (formData.type === 'smb') {
|
||||
body.smbServer = formData.smbServer;
|
||||
body.smbShare = formData.smbShare;
|
||||
if (formData.smbUsername) body.smbUsername = formData.smbUsername;
|
||||
if (formData.smbPassword) body.smbPassword = formData.smbPassword;
|
||||
} else if (formData.type === 'rclone') {
|
||||
body.rcloneRemote = formData.rcloneRemote;
|
||||
body.rclonePath = formData.rclonePath;
|
||||
}
|
||||
|
||||
await fetch('/api/mounts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
setShowForm(false);
|
||||
setFormData({
|
||||
name: '',
|
||||
type: 'nfs',
|
||||
nfsServer: '',
|
||||
nfsPath: '',
|
||||
smbServer: '',
|
||||
smbShare: '',
|
||||
smbUsername: '',
|
||||
smbPassword: '',
|
||||
rcloneRemote: '',
|
||||
rclonePath: '',
|
||||
});
|
||||
fetchMounts();
|
||||
};
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: '100%',
|
||||
padding: '0.5rem',
|
||||
marginBottom: '0.5rem',
|
||||
background: '#1a1a2e',
|
||||
border: '1px solid #0f3460',
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ padding: '2rem' }}>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
|
||||
<h1>Mount Management</h1>
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
<a
|
||||
href="/rclone/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ ...buttonStyle, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '0.5rem' }}
|
||||
>
|
||||
rclone UI
|
||||
</a>
|
||||
<button style={buttonStyle} onClick={() => setShowForm(!showForm)}>
|
||||
{showForm ? 'Cancel' : 'Add Mount'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div style={cardStyle}>
|
||||
<h3 style={{ marginBottom: '1rem' }}>Add New Mount</h3>
|
||||
<form onSubmit={handleCreate}>
|
||||
<input
|
||||
style={inputStyle}
|
||||
placeholder="Mount Name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<select
|
||||
style={inputStyle}
|
||||
value={formData.type}
|
||||
onChange={(e) => setFormData({ ...formData, type: e.target.value as 'nfs' | 'smb' | 'rclone' })}
|
||||
>
|
||||
<option value="nfs">NFS</option>
|
||||
<option value="smb">SMB/CIFS</option>
|
||||
<option value="rclone">rclone</option>
|
||||
</select>
|
||||
|
||||
{formData.type === 'nfs' && (
|
||||
<>
|
||||
<input
|
||||
style={inputStyle}
|
||||
placeholder="NFS Server (e.g., 192.168.1.100)"
|
||||
value={formData.nfsServer}
|
||||
onChange={(e) => setFormData({ ...formData, nfsServer: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
style={inputStyle}
|
||||
placeholder="NFS Path (e.g., /export/media)"
|
||||
value={formData.nfsPath}
|
||||
onChange={(e) => setFormData({ ...formData, nfsPath: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{formData.type === 'smb' && (
|
||||
<>
|
||||
<input
|
||||
style={inputStyle}
|
||||
placeholder="SMB Server (e.g., 192.168.1.100)"
|
||||
value={formData.smbServer}
|
||||
onChange={(e) => setFormData({ ...formData, smbServer: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
style={inputStyle}
|
||||
placeholder="Share Name (e.g., media)"
|
||||
value={formData.smbShare}
|
||||
onChange={(e) => setFormData({ ...formData, smbShare: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
style={inputStyle}
|
||||
placeholder="Username (optional)"
|
||||
value={formData.smbUsername}
|
||||
onChange={(e) => setFormData({ ...formData, smbUsername: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
style={inputStyle}
|
||||
type="password"
|
||||
placeholder="Password (optional)"
|
||||
value={formData.smbPassword}
|
||||
onChange={(e) => setFormData({ ...formData, smbPassword: e.target.value })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{formData.type === 'rclone' && (
|
||||
<>
|
||||
<select
|
||||
style={inputStyle}
|
||||
value={formData.rcloneRemote}
|
||||
onChange={(e) => setFormData({ ...formData, rcloneRemote: e.target.value })}
|
||||
required
|
||||
>
|
||||
<option value="">Select Remote</option>
|
||||
{remotes.map((r) => (
|
||||
<option key={r.name} value={r.name}>
|
||||
{r.name} ({r.type})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
style={inputStyle}
|
||||
placeholder="Remote Path (e.g., /path/to/folder)"
|
||||
value={formData.rclonePath}
|
||||
onChange={(e) => setFormData({ ...formData, rclonePath: e.target.value })}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button type="submit" style={buttonStyle}>
|
||||
Create Mount
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mounts.length === 0 ? (
|
||||
<div style={cardStyle}>
|
||||
<p>No mounts configured. Click "Add Mount" to get started.</p>
|
||||
</div>
|
||||
) : (
|
||||
mounts.map((mount) => (
|
||||
<div key={mount.id} style={cardStyle}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<div>
|
||||
<h3>{mount.name}</h3>
|
||||
<p style={{ color: '#888' }}>
|
||||
Type: {mount.type} | Path: {mount.mountPath}
|
||||
</p>
|
||||
<p>
|
||||
Status:{' '}
|
||||
<span style={{ color: mount.mounted ? '#4ade80' : '#f87171' }}>
|
||||
{mount.mounted ? 'Mounted' : 'Not mounted'}
|
||||
</span>
|
||||
</p>
|
||||
{mount.error && (
|
||||
<p style={{ color: '#f87171', marginTop: '0.5rem' }}>Error: {mount.error}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{mount.mounted ? (
|
||||
<button style={buttonStyle} onClick={() => handleUnmount(mount.id)}>
|
||||
Unmount
|
||||
</button>
|
||||
) : (
|
||||
<button style={buttonStyle} onClick={() => handleMount(mount.id)}>
|
||||
Mount
|
||||
</button>
|
||||
)}
|
||||
<button style={dangerButtonStyle} onClick={() => handleDelete(mount.id)}>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user