feat(observability): add toggle for request detail recording (#122)

* feat(frontend): add toggle logic for observability configuration

(cherry picked from commit 71cef26df6160290c980710ff4a0d6e7aa926105)

* feat(backend): add toggle logic for observability configuration

(cherry picked from commit fb1a8d90e24f041c41b3039f7189791458b87f87)

---------

Co-authored-by: zx <me@char.moe>
This commit is contained in:
zx07 2026-02-13 20:37:54 +08:00 committed by GitHub
parent 03ab554d1c
commit d9bf4c9e59
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 62 additions and 8 deletions

View file

@ -128,6 +128,23 @@ export default function ProfilePage() {
}
};
const updateObservabilityEnabled = async (enabled) => {
try {
const res = await fetch("/api/settings", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ observabilityEnabled: enabled }),
});
if (res.ok) {
setSettings(prev => ({ ...prev, observabilityEnabled: enabled }));
}
} catch (err) {
console.error("Failed to update observabilityEnabled:", err);
}
};
const observabilityEnabled = settings.observabilityEnabled !== false;
return (
<div className="max-w-2xl mx-auto">
<div className="flex flex-col gap-6">
@ -358,6 +375,21 @@ export default function ProfilePage() {
<h3 className="text-lg font-semibold">Observability</h3>
</div>
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between">
<div>
<p className="font-medium">Enable Observability</p>
<p className="text-sm text-text-muted">
Turn request detail recording on/off globally
</p>
</div>
<Toggle
checked={observabilityEnabled}
onChange={updateObservabilityEnabled}
disabled={loading}
/>
</div>
<div className={cn("flex flex-col gap-4", !observabilityEnabled && "opacity-60")}>
<div className="flex items-center justify-between">
<div>
<p className="font-medium">Max Records</p>
@ -372,7 +404,7 @@ export default function ProfilePage() {
step="100"
value={settings.observabilityMaxRecords || 1000}
onChange={(e) => updateObservabilitySetting("observabilityMaxRecords", parseInt(e.target.value))}
disabled={loading}
disabled={loading || !observabilityEnabled}
className="w-28 text-center"
/>
</div>
@ -391,7 +423,7 @@ export default function ProfilePage() {
step="5"
value={settings.observabilityBatchSize || 20}
onChange={(e) => updateObservabilitySetting("observabilityBatchSize", parseInt(e.target.value))}
disabled={loading}
disabled={loading || !observabilityEnabled}
className="w-28 text-center"
/>
</div>
@ -410,7 +442,7 @@ export default function ProfilePage() {
step="1000"
value={settings.observabilityFlushIntervalMs || 5000}
onChange={(e) => updateObservabilitySetting("observabilityFlushIntervalMs", parseInt(e.target.value))}
disabled={loading}
disabled={loading || !observabilityEnabled}
className="w-28 text-center"
/>
</div>
@ -429,7 +461,7 @@ export default function ProfilePage() {
step="100"
value={settings.observabilityMaxJsonSize || 1024}
onChange={(e) => updateObservabilitySetting("observabilityMaxJsonSize", parseInt(e.target.value))}
disabled={loading}
disabled={loading || !observabilityEnabled}
className="w-28 text-center"
/>
</div>
@ -437,6 +469,7 @@ export default function ProfilePage() {
<p className="text-xs text-text-muted italic pt-2 border-t border-border/50">
Current: Keeps {settings.observabilityMaxRecords || 1000} records, batches every {settings.observabilityBatchSize || 20} requests, max {settings.observabilityMaxJsonSize || 1024}KB per field
</p>
</div>
</div>
</Card>