Show last 10 log lines in settings section

This commit is contained in:
Oliver Hofmann 2026-05-10 10:15:48 +02:00
parent a9b0168c71
commit ca55783b90
2 changed files with 54 additions and 3 deletions

View File

@ -76,7 +76,7 @@ const EMPTY_KEY_FORM = {
name: '', expires_at: '', daily_tokens: '', monthly_tokens: '', daily_requests: '', monthly_requests: '', name: '', expires_at: '', daily_tokens: '', monthly_tokens: '', daily_requests: '', monthly_requests: '',
}; };
function SettingsSection({ password }) { function SettingsSection({ password, refreshKey }) {
const [settings, setSettings] = useState(null); const [settings, setSettings] = useState(null);
const [availableModels, setAvailableModels] = useState([]); const [availableModels, setAvailableModels] = useState([]);
const [modelsLoading, setModelsLoading] = useState(false); const [modelsLoading, setModelsLoading] = useState(false);
@ -85,6 +85,8 @@ function SettingsSection({ password }) {
const [appVersion, setAppVersion] = useState(null); const [appVersion, setAppVersion] = useState(null);
const [saved, setSaved] = useState(false); const [saved, setSaved] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [usageLog, setUsageLog] = useState([]);
const [errorLog, setErrorLog] = useState([]);
const fetchModels = async (url, currentModel) => { const fetchModels = async (url, currentModel) => {
setModelsLoading(true); setModelsLoading(true);
@ -112,14 +114,18 @@ function SettingsSection({ password }) {
Promise.all([ Promise.all([
axios.get('/api/settings', { headers }), axios.get('/api/settings', { headers }),
axios.get('/api/proxy-info', { headers }), axios.get('/api/proxy-info', { headers }),
]).then(([settingsRes, proxyRes]) => { axios.get('/api/logs/usage', { headers }),
axios.get('/api/logs/error', { headers }),
]).then(([settingsRes, proxyRes, usageRes, errorRes]) => {
const s = settingsRes.data; const s = settingsRes.data;
setSettings(s); setSettings(s);
setProxyEndpoint(proxyRes.data.endpoint); setProxyEndpoint(proxyRes.data.endpoint);
setAppVersion(proxyRes.data.version); setAppVersion(proxyRes.data.version);
setUsageLog(usageRes.data.lines);
setErrorLog(errorRes.data.lines);
fetchModels(s.ollama_url, s.force_model); fetchModels(s.ollama_url, s.force_model);
}).catch(() => setError('Einstellungen konnten nicht geladen werden.')); }).catch(() => setError('Einstellungen konnten nicht geladen werden.'));
}, []); }, [refreshKey]);
const handleSave = async (e) => { const handleSave = async (e) => {
e.preventDefault(); e.preventDefault();
@ -192,6 +198,18 @@ function SettingsSection({ password }) {
{saved && <div className="success">Gespeichert.</div>} {saved && <div className="success">Gespeichert.</div>}
<button type="submit">Speichern</button> <button type="submit">Speichern</button>
</form> </form>
<div className="log-section">
<h3>Nutzungslog (letzte 10 Einträge)</h3>
<pre className="log-pre">
{usageLog.length > 0 ? usageLog.join('\n') : '— keine Einträge —'}
</pre>
{errorLog.length > 0 && (
<>
<h3>Fehlerlog</h3>
<pre className="log-pre log-pre-error">{errorLog.join('\n')}</pre>
</>
)}
</div>
</section> </section>
); );
} }

View File

@ -452,3 +452,36 @@ tr:hover {
.btn-cancel:hover { .btn-cancel:hover {
background: #7f8c8d; background: #7f8c8d;
} }
.log-section {
margin-top: 24px;
border-top: 1px solid #eee;
padding-top: 16px;
}
.log-section h3 {
font-size: 13px;
font-weight: 600;
color: #555;
margin: 0 0 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.log-pre {
background: #1e2a35;
color: #c8d6df;
font-family: 'Menlo', 'Consolas', monospace;
font-size: 11px;
line-height: 1.6;
padding: 10px 14px;
border-radius: 4px;
margin: 0 0 14px;
overflow-x: auto;
white-space: pre;
}
.log-pre-error {
background: #2d1b1b;
color: #f5a0a0;
}