jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 02:36:17 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

change alert history pagination to use local storage instead of saving to user settings

Browse Source
This commit is contained in:
henrygd
2025-11-14 13:54:23 -05:00
parent 77fe63fb63
commit bd41ad813c
3 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
internal/site/src/components/routes/settings/alerts-history-data-table.tsx
View File

@@ -41,11 +41,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
import { useToast } from "@/components/ui/use-toast" import { useToast } from "@/components/ui/use-toast"
import { alertInfo } from "@/lib/alerts" import { alertInfo } from "@/lib/alerts"
import { pb } from "@/lib/api" import { pb } from "@/lib/api"
import { $userSettings } from "@/lib/stores" import { cn, formatDuration, formatShortDate, useBrowserStorage } from "@/lib/utils"
import { cn, formatDuration, formatShortDate } from "@/lib/utils"
import type { AlertsHistoryRecord } from "@/types" import type { AlertsHistoryRecord } from "@/types"
import { saveSettings } from "./layout"
import { useStore } from "@nanostores/react"
import { alertsHistoryColumns } from "../../alerts-history-columns" import { alertsHistoryColumns } from "../../alerts-history-columns"
const SectionIntro = memo(() => { const SectionIntro = memo(() => {
@@ -70,13 +67,12 @@ export default function AlertsHistoryDataTable() {
const [globalFilter, setGlobalFilter] = useState("") const [globalFilter, setGlobalFilter] = useState("")
const { toast } = useToast() const { toast } = useToast()
const [deleteOpen, setDeleteDialogOpen] = useState(false) const [deleteOpen, setDeleteDialogOpen] = useState(false)
const userSettings = useStore($userSettings)
// Initialize pagination with user preference // Store pagination preference in local storage
const [pagination, setPagination] = useState<PaginationState>(() => ({ const [pagination, setPagination] = useBrowserStorage<PaginationState>("ah-pagination", {
pageIndex: 0, pageIndex: 0,
pageSize: userSettings.alertHistoryPageSize || 10, pageSize: 10,
})) })
useEffect(() => { useEffect(() => {
let unsubscribe: (() => void) | undefined let unsubscribe: (() => void) | undefined
@@ -331,13 +327,10 @@ export default function AlertsHistoryDataTable() {
<Select <Select
value={`${table.getState().pagination.pageSize}`} value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => { onValueChange={(value) => {
const newPageSize = Number(value); table.setPageSize(Number(value));
table.setPageSize(newPageSize);
// Save the preference to user settings and backend
saveSettings({ alertHistoryPageSize: newPageSize });
}} }}
> >
<SelectTrigger className="w-[4.8em]" id="rows-per-page"> <SelectTrigger className="w-18" id="rows-per-page">
<SelectValue placeholder={table.getState().pagination.pageSize} /> <SelectValue placeholder={table.getState().pagination.pageSize} />
</SelectTrigger> </SelectTrigger>
<SelectContent side="top"> <SelectContent side="top">

1
internal/site/src/lib/stores.ts
View File

@@ -48,7 +48,6 @@ export const $userSettings = map<UserSettings>({
emails: [pb.authStore.record?.email || ""], emails: [pb.authStore.record?.email || ""],
unitNet: Unit.Bytes, unitNet: Unit.Bytes,
unitTemp: Unit.Celsius, unitTemp: Unit.Celsius,
alertHistoryPageSize: 10,
}) })
// update chart time on change // update chart time on change
listenKeys($userSettings, ["chartTime"], ({ chartTime }) => $chartTime.set(chartTime)) listenKeys($userSettings, ["chartTime"], ({ chartTime }) => $chartTime.set(chartTime))

1
internal/site/src/types.d.ts vendored
View File

@@ -281,7 +281,6 @@ export interface UserSettings {
colorWarn?: number colorWarn?: number
colorCrit?: number colorCrit?: number
hourFormat?: HourFormat hourFormat?: HourFormat
alertHistoryPageSize?: number
layoutWidth?: number layoutWidth?: number
} }