File size: 3,840 Bytes
fd06b5a 6fa1bad fd06b5a 6fa1bad fd06b5a 6fa1bad fd06b5a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const StorageManager = () => {
const [storageInfo, setStorageInfo] = useState(null);
const [loading, setLoading] = useState(false);
const [cleanupAge, setCleanupAge] = useState(24);
const [message, setMessage] = useState('');
// Use environment variable for backend URL, default to http://localhost:7860
const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:7860';
const fetchStorageInfo = async () => {
setLoading(true);
try {
const response = await axios.get(`${BACKEND_URL}/storage/info`);
setStorageInfo(response.data);
setMessage('');
} catch (error) {
console.error('Error fetching storage info:', error);
setMessage('Failed to fetch storage info');
} finally {
setLoading(false);
}
};
const handleCleanup = async () => {
setLoading(true);
try {
const response = await axios.post(`${BACKEND_URL}/storage/cleanup?max_age_hours=${cleanupAge}`);
setMessage(response.data.message);
fetchStorageInfo(); // Refresh info after cleanup
} catch (error) {
console.error('Error cleaning up storage:', error);
setMessage('Failed to cleanup storage');
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchStorageInfo();
}, []);
return (
<div className="storage-manager" style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', marginTop: '20px' }}>
<h3>📦 Storage Management</h3>
{message && <div className="message" style={{ padding: '10px', backgroundColor: '#f0f0f0', marginBottom: '10px', borderRadius: '4px' }}>{message}</div>}
<div className="storage-info-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px', marginBottom: '20px' }}>
{storageInfo && Object.entries(storageInfo).map(([key, info]) => (
<div key={key} className="storage-card" style={{ padding: '15px', border: '1px solid #eee', borderRadius: '6px', backgroundColor: '#fafafa' }}>
<h4 style={{ textTransform: 'capitalize', marginTop: 0 }}>{key.replace('_', ' ')}</h4>
<p><strong>Files:</strong> {info.file_count !== undefined ? info.file_count : 'N/A'}</p>
<p><strong>Size:</strong> {info.size_mb} MB</p>
{info.cleanup_policy && <p style={{ fontSize: '0.9em', color: '#666' }}>ℹ️ {info.cleanup_policy}</p>}
{info.note && <p style={{ fontSize: '0.9em', color: '#666' }}>ℹ️ {info.note}</p>}
</div>
))}
</div>
<div className="cleanup-controls" style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '15px', backgroundColor: '#fff0f0', borderRadius: '6px' }}>
<span>🧹 <strong>Cleanup Temporary Files:</strong></span>
<label>
Older than:
<input
type="number"
value={cleanupAge}
onChange={(e) => setCleanupAge(e.target.value)}
style={{ width: '60px', marginLeft: '5px', marginRight: '5px' }}
min="1"
/>
hours
</label>
<button
onClick={handleCleanup}
disabled={loading}
style={{ padding: '5px 15px', backgroundColor: '#ff4444', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
>
{loading ? 'Cleaning...' : 'Run Cleanup'}
</button>
</div>
<div style={{ marginTop: '10px', textAlign: 'right' }}>
<button onClick={fetchStorageInfo} style={{ background: 'none', border: 'none', color: '#007bff', cursor: 'pointer', textDecoration: 'underline' }}>
Refresh Info
</button>
</div>
</div>
);
};
export default StorageManager;
|