mirror of
https://github.com/fankes/beszel.git
synced 2025-10-19 17:59:28 +08:00
[Feature] Add Alerts History page (#973)
* Add alert history * refactor * fix one colunm * update migration * add retention
This commit is contained in:
96
beszel/internal/alerts/alerts_history.go
Normal file
96
beszel/internal/alerts/alerts_history.go
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
package alerts
|
||||||
|
|
||||||
|
import (
|
||||||
|
"time"
|
||||||
|
|
||||||
|
"github.com/pocketbase/dbx"
|
||||||
|
"github.com/pocketbase/pocketbase/core"
|
||||||
|
)
|
||||||
|
|
||||||
|
func (am *AlertManager) RecordAlertHistory(alert SystemAlertData) {
|
||||||
|
// Get alert, user, system, name, value
|
||||||
|
alertId := alert.alertRecord.Id
|
||||||
|
userId := ""
|
||||||
|
if errs := am.hub.ExpandRecord(alert.alertRecord, []string{"user"}, nil); len(errs) == 0 {
|
||||||
|
if user := alert.alertRecord.ExpandedOne("user"); user != nil {
|
||||||
|
userId = user.Id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
systemId := alert.systemRecord.Id
|
||||||
|
name := alert.name
|
||||||
|
value := alert.val
|
||||||
|
now := time.Now().UTC()
|
||||||
|
|
||||||
|
if alert.triggered {
|
||||||
|
// Create new alerts_history record
|
||||||
|
collection, err := am.hub.FindCollectionByNameOrId("alerts_history")
|
||||||
|
if err == nil {
|
||||||
|
history := core.NewRecord(collection)
|
||||||
|
history.Set("alert", alertId)
|
||||||
|
history.Set("user", userId)
|
||||||
|
history.Set("system", systemId)
|
||||||
|
history.Set("name", name)
|
||||||
|
history.Set("value", value)
|
||||||
|
history.Set("state", "active")
|
||||||
|
history.Set("created_date", now)
|
||||||
|
history.Set("solved_date", nil)
|
||||||
|
_ = am.hub.Save(history)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Find latest active alerts_history record for this alert and set to solved
|
||||||
|
record, err := am.hub.FindFirstRecordByFilter(
|
||||||
|
"alerts_history",
|
||||||
|
"alert={:alert} && state='active'",
|
||||||
|
dbx.Params{"alert": alertId},
|
||||||
|
)
|
||||||
|
if err == nil && record != nil {
|
||||||
|
record.Set("state", "solved")
|
||||||
|
record.Set("solved_date", now)
|
||||||
|
_ = am.hub.Save(record)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DeleteOldAlertHistory deletes alerts_history records older than the given retention duration
|
||||||
|
func (am *AlertManager) DeleteOldAlertHistory(retention time.Duration) {
|
||||||
|
now := time.Now().UTC()
|
||||||
|
cutoff := now.Add(-retention)
|
||||||
|
_, err := am.hub.DB().NewQuery(
|
||||||
|
"DELETE FROM alerts_history WHERE solved_date IS NOT NULL AND solved_date < {:cutoff}",
|
||||||
|
).Bind(dbx.Params{"cutoff": cutoff}).Execute()
|
||||||
|
if err != nil {
|
||||||
|
am.hub.Logger().Error("failed to delete old alerts_history records", "error", err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper to get retention duration from user settings
|
||||||
|
func getAlertHistoryRetention(settings map[string]interface{}) time.Duration {
|
||||||
|
retStr, _ := settings["alertHistoryRetention"].(string)
|
||||||
|
switch retStr {
|
||||||
|
case "1m":
|
||||||
|
return 30 * 24 * time.Hour
|
||||||
|
case "3m":
|
||||||
|
return 90 * 24 * time.Hour
|
||||||
|
case "6m":
|
||||||
|
return 180 * 24 * time.Hour
|
||||||
|
case "1y":
|
||||||
|
return 365 * 24 * time.Hour
|
||||||
|
default:
|
||||||
|
return 90 * 24 * time.Hour // default 3 months
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// CleanUpAllAlertHistory deletes old alerts_history records for each user based on their retention setting
|
||||||
|
func (am *AlertManager) CleanUpAllAlertHistory() {
|
||||||
|
records, err := am.hub.FindAllRecords("user_settings")
|
||||||
|
if err != nil {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
for _, record := range records {
|
||||||
|
var settings map[string]interface{}
|
||||||
|
if err := record.UnmarshalJSONField("settings", &settings); err != nil {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
am.DeleteOldAlertHistory(getAlertHistoryRetention(settings))
|
||||||
|
}
|
||||||
|
}
|
@@ -293,6 +293,10 @@ func (am *AlertManager) sendSystemAlert(alert SystemAlertData) {
|
|||||||
// app.Logger().Error("failed to save alert record", "err", err)
|
// app.Logger().Error("failed to save alert record", "err", err)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Create Alert History
|
||||||
|
am.RecordAlertHistory(alert)
|
||||||
|
|
||||||
// expand the user relation and send the alert
|
// expand the user relation and send the alert
|
||||||
if errs := am.hub.ExpandRecord(alert.alertRecord, []string{"user"}, nil); len(errs) > 0 {
|
if errs := am.hub.ExpandRecord(alert.alertRecord, []string{"user"}, nil); len(errs) > 0 {
|
||||||
// app.Logger().Error("failed to expand user relation", "errs", errs)
|
// app.Logger().Error("failed to expand user relation", "errs", errs)
|
||||||
|
@@ -219,6 +219,9 @@ func (h *Hub) registerCronJobs(_ *core.ServeEvent) error {
|
|||||||
h.Cron().MustAdd("delete old records", "8 * * * *", h.rm.DeleteOldRecords)
|
h.Cron().MustAdd("delete old records", "8 * * * *", h.rm.DeleteOldRecords)
|
||||||
// create longer records every 10 minutes
|
// create longer records every 10 minutes
|
||||||
h.Cron().MustAdd("create longer records", "*/10 * * * *", h.rm.CreateLongerRecords)
|
h.Cron().MustAdd("create longer records", "*/10 * * * *", h.rm.CreateLongerRecords)
|
||||||
|
// delete old alert history records for each user based on their retention setting
|
||||||
|
h.Cron().MustAdd("delete old alerts_history", "5 */1 * * *", h.AlertManager.CleanUpAllAlertHistory)
|
||||||
|
|
||||||
return nil
|
return nil
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -20,6 +20,9 @@ type UserSettings struct {
|
|||||||
// UnitTemp uint8 `json:"unitTemp"` // 0 for Celsius, 1 for Fahrenheit
|
// UnitTemp uint8 `json:"unitTemp"` // 0 for Celsius, 1 for Fahrenheit
|
||||||
// UnitNet uint8 `json:"unitNet"` // 0 for bytes, 1 for bits
|
// UnitNet uint8 `json:"unitNet"` // 0 for bytes, 1 for bits
|
||||||
// UnitDisk uint8 `json:"unitDisk"` // 0 for bytes, 1 for bits
|
// UnitDisk uint8 `json:"unitDisk"` // 0 for bytes, 1 for bits
|
||||||
|
|
||||||
|
// New field for alert history retention (e.g., "1m", "3m", "6m", "1y")
|
||||||
|
AlertHistoryRetention string `json:"alertHistoryRetention,omitempty"`
|
||||||
}
|
}
|
||||||
|
|
||||||
func NewUserManager(app core.App) *UserManager {
|
func NewUserManager(app core.App) *UserManager {
|
||||||
|
74
beszel/migrations/1_create_alerts_history.go
Normal file
74
beszel/migrations/1_create_alerts_history.go
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
package migrations
|
||||||
|
|
||||||
|
import (
|
||||||
|
"github.com/pocketbase/pocketbase/core"
|
||||||
|
m "github.com/pocketbase/pocketbase/migrations"
|
||||||
|
)
|
||||||
|
|
||||||
|
func init() {
|
||||||
|
m.Register(func(app core.App) error {
|
||||||
|
jsonData := `[
|
||||||
|
{
|
||||||
|
"name": "alerts_history",
|
||||||
|
"type": "base",
|
||||||
|
"system": false,
|
||||||
|
"listRule": "",
|
||||||
|
"deleteRule": "",
|
||||||
|
"viewRule": ""
|
||||||
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "alert",
|
||||||
|
"type": "relation",
|
||||||
|
"required": true,
|
||||||
|
"collectionId": "elngm8x1l60zi2v",
|
||||||
|
"cascadeDelete": true,
|
||||||
|
"maxSelect": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "user",
|
||||||
|
"type": "relation",
|
||||||
|
"required": true,
|
||||||
|
"collectionId": "_pb_users_auth_",
|
||||||
|
"cascadeDelete": true,
|
||||||
|
"maxSelect": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "system",
|
||||||
|
"type": "relation",
|
||||||
|
"required": true,
|
||||||
|
"collectionId": "2hz5ncl8tizk5nx",
|
||||||
|
"cascadeDelete": true,
|
||||||
|
"maxSelect": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "name",
|
||||||
|
"type": "text",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "value",
|
||||||
|
"type": "number",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "state",
|
||||||
|
"type": "select",
|
||||||
|
"required": true,
|
||||||
|
"values": ["active", "solved"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "created_date",
|
||||||
|
"type": "date",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "solved_date",
|
||||||
|
"type": "date",
|
||||||
|
"required": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]`
|
||||||
|
return app.ImportCollectionsByMarshaledJSON([]byte(jsonData), false)
|
||||||
|
}, nil)
|
||||||
|
}
|
342
beszel/site/package-lock.json
generated
342
beszel/site/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -43,6 +43,7 @@
|
|||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"recharts": "^2.15.3",
|
"recharts": "^2.15.3",
|
||||||
|
"sonner": "^2.0.6",
|
||||||
"tailwind-merge": "^2.6.0",
|
"tailwind-merge": "^2.6.0",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"valibot": "^0.42.1"
|
"valibot": "^0.42.1"
|
||||||
|
146
beszel/site/src/components/alerts-history-columns.tsx
Normal file
146
beszel/site/src/components/alerts-history-columns.tsx
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
import { ColumnDef } from "@tanstack/react-table"
|
||||||
|
import { AlertsHistoryRecord } from "@/types"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { ArrowUpDown } from "lucide-react"
|
||||||
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
|
||||||
|
export const alertsHistoryColumns: ColumnDef<AlertsHistoryRecord>[] = [
|
||||||
|
{
|
||||||
|
accessorKey: "system",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
System <ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => <span className="text-center block">{row.original.expand?.system?.name || row.original.system}</span>,
|
||||||
|
enableSorting: true,
|
||||||
|
filterFn: (row, _, filterValue) => {
|
||||||
|
const display = row.original.expand?.system?.name || row.original.system || ""
|
||||||
|
return display.toLowerCase().includes(filterValue.toLowerCase())
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "name",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Name <ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => <span className="text-center block">{row.getValue("name")}</span>,
|
||||||
|
enableSorting: true,
|
||||||
|
filterFn: (row, _, filterValue) => {
|
||||||
|
const value = row.getValue("name") || ""
|
||||||
|
return String(value).toLowerCase().includes(filterValue.toLowerCase())
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "value",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
className="text-right w-full justify-end"
|
||||||
|
>
|
||||||
|
Value <ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => <span className="text-center block">{Math.round(Number(row.getValue("value")))}</span>,
|
||||||
|
enableSorting: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "state",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
className="text-center w-full justify-start"
|
||||||
|
>
|
||||||
|
State <ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const state = row.getValue("state") as string
|
||||||
|
let color = ""
|
||||||
|
if (state === "solved") color = "bg-green-100 text-green-800 border-green-200"
|
||||||
|
else if (state === "active") color = "bg-yellow-100 text-yellow-800 border-yellow-200"
|
||||||
|
return (
|
||||||
|
<span className="text-center block">
|
||||||
|
<Badge className={`capitalize ${color}`}>{state}</Badge>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
enableSorting: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "create_date",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Created <ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-center block">
|
||||||
|
{row.original.created_date ? new Date(row.original.created_date).toLocaleString() : ""}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
enableSorting: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "solved_date",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Solved <ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<span className="text-center block">
|
||||||
|
{row.original.solved_date ? new Date(row.original.solved_date).toLocaleString() : ""}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
enableSorting: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "duration",
|
||||||
|
header: ({ column }) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||||
|
>
|
||||||
|
Duration <ArrowUpDown className="ml-2 h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const created = row.original.created_date ? new Date(row.original.created_date) : null
|
||||||
|
const solved = row.original.solved_date ? new Date(row.original.solved_date) : null
|
||||||
|
if (!created || !solved) return <span className="text-center block"></span>
|
||||||
|
const diffMs = solved.getTime() - created.getTime()
|
||||||
|
if (diffMs < 0) return <span className="text-center block"></span>
|
||||||
|
const totalSeconds = Math.floor(diffMs / 1000)
|
||||||
|
const hours = Math.floor(totalSeconds / 3600)
|
||||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60)
|
||||||
|
const seconds = totalSeconds % 60
|
||||||
|
return (
|
||||||
|
<span className="text-center block">
|
||||||
|
{[
|
||||||
|
hours ? `${hours}h` : null,
|
||||||
|
minutes ? `${minutes}m` : null,
|
||||||
|
`${seconds}s`
|
||||||
|
].filter(Boolean).join(" ")}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
enableSorting: true,
|
||||||
|
},
|
||||||
|
]
|
@@ -0,0 +1,247 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { useStore } from "@nanostores/react"
|
||||||
|
import { $alertsHistory, pb } from "@/lib/stores"
|
||||||
|
import { AlertsHistoryRecord } from "@/types"
|
||||||
|
import {
|
||||||
|
getCoreRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
getFilteredRowModel,
|
||||||
|
useReactTable,
|
||||||
|
flexRender,
|
||||||
|
ColumnFiltersState,
|
||||||
|
SortingState,
|
||||||
|
VisibilityState,
|
||||||
|
} from "@tanstack/react-table"
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { alertsHistoryColumns } from "../../alerts-history-columns"
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox"
|
||||||
|
import { toast } from "sonner"
|
||||||
|
|
||||||
|
export default function AlertsHistoryDataTable() {
|
||||||
|
const alertsHistory = useStore($alertsHistory)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
pb.collection<AlertsHistoryRecord>("alerts_history")
|
||||||
|
.getFullList({
|
||||||
|
sort: "-created_date",
|
||||||
|
expand: "system,user,alert"
|
||||||
|
})
|
||||||
|
.then(records => {
|
||||||
|
$alertsHistory.set(records)
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const [sorting, setSorting] = React.useState<SortingState>([])
|
||||||
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
|
||||||
|
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
|
||||||
|
const [rowSelection, setRowSelection] = React.useState({})
|
||||||
|
const [combinedFilter, setCombinedFilter] = React.useState("")
|
||||||
|
const [globalFilter, setGlobalFilter] = React.useState("")
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: alertsHistory,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
id: "select",
|
||||||
|
header: ({ table }) => (
|
||||||
|
<Checkbox
|
||||||
|
checked={
|
||||||
|
table.getIsAllPageRowsSelected() ||
|
||||||
|
(table.getIsSomePageRowsSelected() && "indeterminate")
|
||||||
|
}
|
||||||
|
onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
|
||||||
|
aria-label="Select all"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Checkbox
|
||||||
|
checked={row.getIsSelected()}
|
||||||
|
onCheckedChange={value => row.toggleSelected(!!value)}
|
||||||
|
aria-label="Select row"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
enableSorting: false,
|
||||||
|
enableHiding: false,
|
||||||
|
},
|
||||||
|
...alertsHistoryColumns,
|
||||||
|
],
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onColumnFiltersChange: setColumnFilters,
|
||||||
|
onColumnVisibilityChange: setColumnVisibility,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
globalFilterFn: (row, _columnId, filterValue) => {
|
||||||
|
const system = row.original.expand?.system?.name || row.original.system || ""
|
||||||
|
const name = row.getValue("name") || ""
|
||||||
|
const search = String(filterValue).toLowerCase()
|
||||||
|
return (
|
||||||
|
system.toLowerCase().includes(search) ||
|
||||||
|
String(name).toLowerCase().includes(search)
|
||||||
|
)
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
columnFilters,
|
||||||
|
columnVisibility,
|
||||||
|
rowSelection,
|
||||||
|
globalFilter,
|
||||||
|
},
|
||||||
|
onGlobalFilterChange: setGlobalFilter,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Bulk delete handler
|
||||||
|
const handleBulkDelete = async () => {
|
||||||
|
if (!window.confirm("Are you sure you want to delete the selected records?")) return
|
||||||
|
const selectedIds = table.getSelectedRowModel().rows.map(row => row.original.id)
|
||||||
|
try {
|
||||||
|
await Promise.all(selectedIds.map(id => pb.collection("alerts_history").delete(id)))
|
||||||
|
$alertsHistory.set(alertsHistory.filter(r => !selectedIds.includes(r.id)))
|
||||||
|
toast.success("Deleted selected records.")
|
||||||
|
} catch (e) {
|
||||||
|
toast.error("Failed to delete some records.")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Export to CSV handler
|
||||||
|
const handleExportCSV = () => {
|
||||||
|
const selectedRows = table.getSelectedRowModel().rows
|
||||||
|
if (!selectedRows.length) return
|
||||||
|
const headers = ["system", "name", "value", "state", "created_date", "solved_date", "duration"]
|
||||||
|
const csvRows = [headers.join(",")]
|
||||||
|
for (const row of selectedRows) {
|
||||||
|
const r = row.original
|
||||||
|
csvRows.push([
|
||||||
|
r.expand?.system?.name || r.system,
|
||||||
|
r.name,
|
||||||
|
r.value,
|
||||||
|
r.state,
|
||||||
|
r.created_date,
|
||||||
|
r.solved_date,
|
||||||
|
(() => {
|
||||||
|
const created = r.created_date ? new Date(r.created_date) : null
|
||||||
|
const solved = r.solved_date ? new Date(r.solved_date) : null
|
||||||
|
if (!created || !solved) return ""
|
||||||
|
const diffMs = solved.getTime() - created.getTime()
|
||||||
|
if (diffMs < 0) return ""
|
||||||
|
const totalSeconds = Math.floor(diffMs / 1000)
|
||||||
|
const hours = Math.floor(totalSeconds / 3600)
|
||||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60)
|
||||||
|
const seconds = totalSeconds % 60
|
||||||
|
return [
|
||||||
|
hours ? `${hours}h` : null,
|
||||||
|
minutes ? `${minutes}m` : null,
|
||||||
|
`${seconds}s`
|
||||||
|
].filter(Boolean).join(" ")
|
||||||
|
})()
|
||||||
|
].map(v => `"${v ?? ""}"`).join(","))
|
||||||
|
}
|
||||||
|
const blob = new Blob([csvRows.join("\n")], { type: "text/csv" })
|
||||||
|
const url = URL.createObjectURL(blob)
|
||||||
|
const a = document.createElement("a")
|
||||||
|
a.href = url
|
||||||
|
a.download = "alerts_history.csv"
|
||||||
|
a.click()
|
||||||
|
URL.revokeObjectURL(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="flex items-center py-4 gap-4">
|
||||||
|
<Input
|
||||||
|
placeholder="Filter system or name..."
|
||||||
|
value={globalFilter}
|
||||||
|
onChange={e => setGlobalFilter(e.target.value)}
|
||||||
|
className="max-w-sm"
|
||||||
|
/>
|
||||||
|
{table.getFilteredSelectedRowModel().rows.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleBulkDelete}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Delete Selected
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={handleExportCSV}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Export Selected
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="rounded-md border overflow-x-auto">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<TableRow key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<TableHead key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(header.column.columnDef.header, header.getContext())}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{table.getRowModel().rows.length ? (
|
||||||
|
table.getRowModel().rows.map(row => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id}
|
||||||
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<TableCell key={cell.id}>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
|
||||||
|
No results.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-end space-x-2 py-4">
|
||||||
|
<div className="text-muted-foreground flex-1 text-sm">
|
||||||
|
{table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
|
||||||
|
</div>
|
||||||
|
<div className="space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.previousPage()}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => table.nextPage()}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@@ -17,11 +17,16 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
|
|||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const { i18n } = useLingui()
|
const { i18n } = useLingui()
|
||||||
|
|
||||||
|
// Add state for alert history retention
|
||||||
|
const [alertHistoryRetention, setAlertHistoryRetention] = useState(userSettings.alertHistoryRetention || "3m")
|
||||||
|
|
||||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
const formData = new FormData(e.target as HTMLFormElement)
|
const formData = new FormData(e.target as HTMLFormElement)
|
||||||
const data = Object.fromEntries(formData) as Partial<UserSettings>
|
const data = Object.fromEntries(formData) as Partial<UserSettings>
|
||||||
|
// Add alertHistoryRetention to data
|
||||||
|
data.alertHistoryRetention = alertHistoryRetention
|
||||||
await saveSettings(data)
|
await saveSettings(data)
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
@@ -182,6 +187,27 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Separator />
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="alertHistoryRetention">
|
||||||
|
<Trans>Alert History Retention</Trans>
|
||||||
|
</Label>
|
||||||
|
<Select
|
||||||
|
name="alertHistoryRetention"
|
||||||
|
value={alertHistoryRetention}
|
||||||
|
onValueChange={setAlertHistoryRetention}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-64 mt-1">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="1m">1 month</SelectItem>
|
||||||
|
<SelectItem value="3m">3 months</SelectItem>
|
||||||
|
<SelectItem value="6m">6 months</SelectItem>
|
||||||
|
<SelectItem value="1y">1 year</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
<Button type="submit" className="flex items-center gap-1.5 disabled:opacity-100" disabled={isLoading}>
|
<Button type="submit" className="flex items-center gap-1.5 disabled:opacity-100" disabled={isLoading}>
|
||||||
{isLoading ? <LoaderCircleIcon className="h-4 w-4 animate-spin" /> : <SaveIcon className="h-4 w-4" />}
|
{isLoading ? <LoaderCircleIcon className="h-4 w-4 animate-spin" /> : <SaveIcon className="h-4 w-4" />}
|
||||||
<Trans>Save Settings</Trans>
|
<Trans>Save Settings</Trans>
|
||||||
|
@@ -7,7 +7,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
|
|||||||
import { useStore } from "@nanostores/react"
|
import { useStore } from "@nanostores/react"
|
||||||
import { $router } from "@/components/router.tsx"
|
import { $router } from "@/components/router.tsx"
|
||||||
import { getPagePath, redirectPage } from "@nanostores/router"
|
import { getPagePath, redirectPage } from "@nanostores/router"
|
||||||
import { BellIcon, FileSlidersIcon, FingerprintIcon, SettingsIcon } from "lucide-react"
|
import { BellIcon, FileSlidersIcon, FingerprintIcon, SettingsIcon, LogsIcon } from "lucide-react"
|
||||||
import { $userSettings, pb } from "@/lib/stores.ts"
|
import { $userSettings, pb } from "@/lib/stores.ts"
|
||||||
import { toast } from "@/components/ui/use-toast.ts"
|
import { toast } from "@/components/ui/use-toast.ts"
|
||||||
import { UserSettings } from "@/types.js"
|
import { UserSettings } from "@/types.js"
|
||||||
@@ -16,6 +16,7 @@ import Notifications from "./notifications.tsx"
|
|||||||
import ConfigYaml from "./config-yaml.tsx"
|
import ConfigYaml from "./config-yaml.tsx"
|
||||||
import { useLingui } from "@lingui/react/macro"
|
import { useLingui } from "@lingui/react/macro"
|
||||||
import Fingerprints from "./tokens-fingerprints.tsx"
|
import Fingerprints from "./tokens-fingerprints.tsx"
|
||||||
|
import AlertsHistoryDataTable from "./alerts-history-data-table"
|
||||||
|
|
||||||
export async function saveSettings(newSettings: Partial<UserSettings>) {
|
export async function saveSettings(newSettings: Partial<UserSettings>) {
|
||||||
try {
|
try {
|
||||||
@@ -71,6 +72,11 @@ export default function SettingsLayout() {
|
|||||||
icon: FileSlidersIcon,
|
icon: FileSlidersIcon,
|
||||||
admin: true,
|
admin: true,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: t`Alerts History`,
|
||||||
|
href: getPagePath($router, "settings", { name: "alerts-history" }),
|
||||||
|
icon: LogsIcon,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const page = useStore($router)
|
const page = useStore($router)
|
||||||
@@ -121,5 +127,7 @@ function SettingsContent({ name }: { name: string }) {
|
|||||||
return <ConfigYaml />
|
return <ConfigYaml />
|
||||||
case "tokens":
|
case "tokens":
|
||||||
return <Fingerprints />
|
return <Fingerprints />
|
||||||
|
case "alerts-history":
|
||||||
|
return <AlertsHistoryDataTable />
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -15,6 +15,9 @@ export const $systems = atom([] as SystemRecord[])
|
|||||||
/** List of alert records */
|
/** List of alert records */
|
||||||
export const $alerts = atom([] as AlertRecord[])
|
export const $alerts = atom([] as AlertRecord[])
|
||||||
|
|
||||||
|
/** List of alerts history records */
|
||||||
|
export const $alertsHistory = atom([] as AlertsHistoryRecord[])
|
||||||
|
|
||||||
/** SSH public key */
|
/** SSH public key */
|
||||||
export const $publicKey = atom("")
|
export const $publicKey = atom("")
|
||||||
|
|
||||||
|
16
beszel/site/src/types.d.ts
vendored
16
beszel/site/src/types.d.ts
vendored
@@ -189,6 +189,17 @@ export interface AlertRecord extends RecordModel {
|
|||||||
// user: string
|
// user: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface AlertsHistoryRecord extends RecordModel {
|
||||||
|
alert: string;
|
||||||
|
user: string;
|
||||||
|
system: string;
|
||||||
|
name: string;
|
||||||
|
value: number;
|
||||||
|
state: "active" | "solved";
|
||||||
|
created_date: string;
|
||||||
|
solved_date?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
export type ChartTimes = "1h" | "12h" | "24h" | "1w" | "30d"
|
export type ChartTimes = "1h" | "12h" | "24h" | "1w" | "30d"
|
||||||
|
|
||||||
export interface ChartTimeData {
|
export interface ChartTimeData {
|
||||||
@@ -202,7 +213,7 @@ export interface ChartTimeData {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export type UserSettings = {
|
export interface UserSettings {
|
||||||
// lang?: string
|
// lang?: string
|
||||||
chartTime: ChartTimes
|
chartTime: ChartTimes
|
||||||
emails?: string[]
|
emails?: string[]
|
||||||
@@ -210,6 +221,9 @@ export type UserSettings = {
|
|||||||
unitTemp?: Unit
|
unitTemp?: Unit
|
||||||
unitNet?: Unit
|
unitNet?: Unit
|
||||||
unitDisk?: Unit
|
unitDisk?: Unit
|
||||||
|
|
||||||
|
// New field for alert history retention (e.g., '1m', '3m', '6m', '1y')
|
||||||
|
alertHistoryRetention?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
type ChartDataContainer = {
|
type ChartDataContainer = {
|
||||||
|
Reference in New Issue
Block a user