snapix/frontend/src/components/BackupForm.jsx
2025-06-10 13:17:49 +03:00

75 lines
2.1 KiB
JavaScript

import { useState, useEffect } from 'react';
import { getNamespaces, getPVCs, createBackup } from '../service';
import '../style/BackupForm.css';
import { Button, Input, Select, Option } from '@mui/base';
function BackupForm() {
const [namespaces, setNamespaces] = useState([]);
const [pvcs, setPvcs] = useState([]);
const [namespace, setNamespace] = useState('');
const [pvc, setPvc] = useState('');
const [backupName, setBackupName] = useState('');
useEffect(() => {
getNamespaces().then(setNamespaces);
}, []);
useEffect(() => {
if (namespace) {
getPVCs(namespace).then(setPvcs);
} else {
setPvcs([]);
}
}, [namespace]);
const handleSubmit = async () => {
try {
await createBackup({ namespace, pvcName: pvc, backupName });
alert('✅ Backup created successfully!');
} catch (error) {
console.error(error);
alert('❌ Backup failed');
}
};
return (
<div className="form-container BackupForm">
<h3>📦 Create Backup</h3>
<div className="form-group">
<label>Namespace</label>
<Select value={namespace} onChange={(e) => setNamespace(e.target.value)}>
<Option value="">-- Select Namespace --</Option>
{namespaces.map((ns) => (
<Option key={ns} value={ns}>{ns}</Option>
))}
</Select>
</div>
<div className="form-group">
<label>PVC</label>
<Select value={pvc} onChange={(e) => setPvc(e.target.value)} disabled={!namespace}>
<Option value="">-- Select PVC --</Option>
{pvcs.map((p) => (
<Option key={p} value={p}>{p}</Option>
))}
</Select>
</div>
<div className="form-group">
<label>Backup Name</label>
<Input
type="text"
value={backupName}
onChange={(e) => setBackupName(e.target.value)}
/>
</div>
<Button className="btn" onClick={handleSubmit} disabled={!namespace || !pvc || !backupName}>
Create Backup
</Button>
</div>
);
}
export default BackupForm;