98 lines
3.0 KiB
React
98 lines
3.0 KiB
React
// frontend/src/modals/devices/EditLoggingModal.jsx
|
|
import { useState } from 'react'
|
|
import Modal from '@/components/ui/Modal'
|
|
import Button from '@/components/ui/Button'
|
|
import FormField from '@/components/ui/FormField'
|
|
import api from '@/lib/api'
|
|
|
|
const LOG_LEVELS = [
|
|
{ value: '0', label: '(0) Disabled' },
|
|
{ value: '1', label: '(1) Error' },
|
|
{ value: '2', label: '(2) Warning' },
|
|
{ value: '3', label: '(3) Info' },
|
|
{ value: '4', label: '(4) Debug' },
|
|
{ value: '5', label: '(5) Verbose' },
|
|
]
|
|
|
|
export default function EditLoggingModal({ open, onClose, onSaved, attr, id }) {
|
|
const [serialLevel, setSerialLevel] = useState(String(attr?.serialLogLevel ?? 0))
|
|
const [sdLevel, setSdLevel] = useState(String(attr?.sdLogLevel ?? 0))
|
|
const [mqttLevel, setMqttLevel] = useState(String(attr?.mqttLogLevel ?? 0))
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true)
|
|
setError('')
|
|
try {
|
|
await api.put(`/devices/${id}`, {
|
|
device_attributes: {
|
|
serialLogLevel: Number(serialLevel),
|
|
sdLogLevel: Number(sdLevel),
|
|
mqttLogLevel: Number(mqttLevel),
|
|
},
|
|
})
|
|
await onSaved()
|
|
onClose()
|
|
} catch (err) {
|
|
setError(err.message || 'Failed to save.')
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={onClose}
|
|
title="Edit Log Levels"
|
|
size="sm"
|
|
footer={
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-3)' }}>
|
|
<Button variant="ghost" onClick={onClose}>Cancel</Button>
|
|
<Button variant="primary" loading={saving} onClick={handleSave}>Save</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
|
|
<FormField
|
|
label="Serial Log Level"
|
|
name="serialLevel"
|
|
type="select"
|
|
value={serialLevel}
|
|
onChange={(e) => setSerialLevel(e.target.value)}
|
|
>
|
|
{LOG_LEVELS.map((l) => (
|
|
<option key={l.value} value={l.value}>{l.label}</option>
|
|
))}
|
|
</FormField>
|
|
<FormField
|
|
label="SD Card Log Level"
|
|
name="sdLevel"
|
|
type="select"
|
|
value={sdLevel}
|
|
onChange={(e) => setSdLevel(e.target.value)}
|
|
>
|
|
{LOG_LEVELS.map((l) => (
|
|
<option key={l.value} value={l.value}>{l.label}</option>
|
|
))}
|
|
</FormField>
|
|
<FormField
|
|
label="MQTT Log Level"
|
|
name="mqttLevel"
|
|
type="select"
|
|
value={mqttLevel}
|
|
onChange={(e) => setMqttLevel(e.target.value)}
|
|
>
|
|
{LOG_LEVELS.map((l) => (
|
|
<option key={l.value} value={l.value}>{l.label}</option>
|
|
))}
|
|
</FormField>
|
|
{error && (
|
|
<p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-danger)' }}>{error}</p>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|