fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-20 10:19:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

set alert to inactive if value or minute is updated

Browse Source
This commit is contained in:
Henry Dollman
2024-10-17 11:12:04 -04:00
parent 34a8053967
commit 94e9d4f270
1 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
beszel/site/src/components/table-alerts.tsx
View File

@@ -161,20 +161,25 @@ function AlertWithSlider({
Icon: React.FC<React.SVGProps<SVGSVGElement>> Icon: React.FC<React.SVGProps<SVGSVGElement>>
}) { }) {
const [pendingChange, setPendingChange] = useState(false) const [pendingChange, setPendingChange] = useState(false)
const [liveValue, setLiveValue] = useState(80) const [value, setValue] = useState(80)
const [liveMinutes, setLiveMinutes] = useState(10) const [min, setMin] = useState(10)
const key = name.replaceAll(' ', '-') const key = name.replaceAll(' ', '-')
const alert = useMemo(() => { const alert = useMemo(() => {
const alert = alerts.find((alert) => alert.name === name) const alert = alerts.find((alert) => alert.name === name)
if (alert) { if (alert) {
setLiveValue(alert.value) setValue(alert.value)
setLiveMinutes(alert.min || 1) setMin(alert.min || 1)
} }
return alert return alert
}, [alerts]) }, [alerts])
const updateAlert = (obj: Partial<AlertRecord>) => {
obj.triggered = false
alert && pb.collection('alerts').update(alert.id, obj)
}
return ( return (
<div className="rounded-lg border border-muted-foreground/15 hover:border-muted-foreground/20 transition-colors duration-100 group"> <div className="rounded-lg border border-muted-foreground/15 hover:border-muted-foreground/20 transition-colors duration-100 group">
<label <label
@@ -207,8 +212,8 @@ function AlertWithSlider({
system: system.id, system: system.id,
user: pb.authStore.model!.id, user: pb.authStore.model!.id,
name, name,
value: liveValue, value: value,
min: liveMinutes, min: min,
}) })
} }
} catch (e) { } catch (e) {
@@ -226,20 +231,16 @@ function AlertWithSlider({
<p id={`v${key}`} className="text-sm block h-8"> <p id={`v${key}`} className="text-sm block h-8">
Average exceeds{' '} Average exceeds{' '}
<strong className="text-foreground"> <strong className="text-foreground">
{liveValue} {value}
{unit} {unit}
</strong> </strong>
</p> </p>
<div className="flex gap-3"> <div className="flex gap-3">
<Slider <Slider
aria-labelledby={`v${key}`} aria-labelledby={`v${key}`}
defaultValue={[liveValue]} defaultValue={[value]}
onValueCommit={(val) => { onValueCommit={(val) => updateAlert({ value: val[0] })}
pb.collection('alerts').update(alert.id, { onValueChange={(val) => setValue(val[0])}
value: val[0],
})
}}
onValueChange={(val) => setLiveValue(val[0])}
min={1} min={1}
max={max} max={max}
/> />
@@ -247,19 +248,15 @@ function AlertWithSlider({
</div> </div>
<div> <div>
<p id={`t${key}`} className="text-sm block h-8"> <p id={`t${key}`} className="text-sm block h-8">
For <strong className="text-foreground">{liveMinutes}</strong> minute For <strong className="text-foreground">{min}</strong> minute
{liveMinutes > 1 && 's'} {min > 1 && 's'}
</p> </p>
<div className="flex gap-3"> <div className="flex gap-3">
<Slider <Slider
aria-labelledby={`v${key}`} aria-labelledby={`v${key}`}
defaultValue={[liveMinutes]} defaultValue={[min]}
onValueCommit={(val) => { onValueCommit={(val) => updateAlert({ min: val[0] })}
pb.collection('alerts').update(alert.id, { onValueChange={(val) => setMin(val[0])}
min: val[0],
})
}}
onValueChange={(val) => setLiveMinutes(val[0])}
min={1} min={1}
max={60} max={60}
/> />