80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import { AlertInfo, deleteAlert, getAlerts } from '@/api/alerts'
|
|
import { ConfirmModal } from '@/components/ConfirmModal'
|
|
import { DataTable } from '@/components/DataTable'
|
|
import { useState } from 'preact/hooks'
|
|
import { useMutation, useQuery } from 'react-query'
|
|
import { AlertFormModal } from './components/AlertFormModal'
|
|
|
|
export const AlertsTable = () => {
|
|
const alerts = useQuery('/alerts', () => getAlerts())
|
|
|
|
const deleteMutation = useMutation(deleteAlert, {
|
|
onSuccess: () => {
|
|
alerts.refetch()
|
|
setShowDelete(undefined)
|
|
},
|
|
})
|
|
|
|
const [showNew, setShowNew] = useState(false)
|
|
const [edited, setEdited] = useState<AlertInfo>()
|
|
const [showDelete, setShowDelete] = useState<AlertInfo>()
|
|
|
|
return (
|
|
<div className="alerts">
|
|
<div className="section-title">
|
|
<h2>Alerts</h2>
|
|
<button onClick={() => alerts.refetch()}>Refresh</button>
|
|
<button onClick={() => setShowNew(true)}>Add alert</button>
|
|
</div>
|
|
|
|
<div className="box-shadow">
|
|
<DataTable
|
|
data={alerts.data ?? []}
|
|
columns={[
|
|
{ key: 'name', title: 'Name', render: (c) => c.name, scale: 1 },
|
|
{
|
|
key: 'lastStatus',
|
|
title: 'Last status',
|
|
render: (c) => c.lastStatus,
|
|
width: '10rem',
|
|
},
|
|
{
|
|
key: 'actions',
|
|
title: 'Actions',
|
|
width: '10rem',
|
|
className: 'actions',
|
|
render: (c) => (
|
|
<div>
|
|
<button onClick={() => setEdited(c)}>Edit</button>
|
|
<button onClick={() => setShowDelete(c)}>Delete</button>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{(showNew || edited) && (
|
|
<AlertFormModal
|
|
open
|
|
alert={edited}
|
|
onClose={() => {
|
|
setEdited(undefined)
|
|
setShowNew(false)
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{showDelete && (
|
|
<ConfirmModal
|
|
open
|
|
onConfirm={() => deleteMutation.mutate(showDelete.id)}
|
|
onCancel={() => setShowDelete(undefined)}
|
|
>
|
|
Are you sure you want to delete {showDelete.name} alert?
|
|
</ConfirmModal>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|