Add 5-minute auto-reload and last-updated timestamp to admin UI

This commit is contained in:
Oliver Hofmann 2026-05-10 10:20:03 +02:00
parent 02b4ad06ca
commit cf1b3f7786
2 changed files with 35 additions and 7 deletions

View File

@ -222,21 +222,31 @@ function App() {
const [creating, setCreating] = useState(false);
const [editKey, setEditKey] = useState(null);
const [editForm, setEditForm] = useState({});
useEffect(() => {
if (!password) { setLoading(false); return; }
fetchApiKeys().finally(() => setLoading(false));
}, [password]);
const [refreshKey, setRefreshKey] = useState(0);
const [lastUpdated, setLastUpdated] = useState(null);
const fetchApiKeys = async () => {
try {
const res = await axios.get('/api/api-keys', { headers: authHeaders(password) });
setApiKeys(res.data);
setLastUpdated(new Date());
} catch {
setError('API-Keys konnten nicht geladen werden.');
}
};
useEffect(() => {
if (!password) { setLoading(false); return; }
fetchApiKeys().finally(() => setLoading(false));
const timer = setInterval(() => {
fetchApiKeys();
setRefreshKey(k => k + 1);
}, 5 * 60 * 1000);
return () => clearInterval(timer);
}, [password]);
const handleCreate = async (e) => {
e.preventDefault();
setCreating(true);
@ -328,10 +338,17 @@ function App() {
<div className="container">
<div className="header">
<h1>Ollama Proxy Admin</h1>
<div className="header-right">
{lastUpdated && (
<span className="last-updated">
Aktualisiert: {lastUpdated.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
</span>
)}
<button onClick={logout}>Abmelden</button>
</div>
</div>
<SettingsSection password={password} />
<SettingsSection password={password} refreshKey={refreshKey} />
<section>
<h2>Neuer API-Key</h2>

View File

@ -486,3 +486,14 @@ tr:hover {
color: #f5a0a0;
margin-bottom: 0;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.last-updated {
font-size: 12px;
color: #95a5a6;
}