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

refactor containers table to fix clock issue causing no results (#1337)

Browse Source
This commit is contained in:
henrygd
2025-11-04 13:18:34 -05:00
parent fc0947aa04
commit 2e034bdead
1 changed files with 27 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
internal/site/src/components/containers-table/containers-table.tsx
View File

@@ -35,6 +35,7 @@ import { getPagePath } from "@nanostores/router"
const syntaxTheme = "github-dark-dimmed" const syntaxTheme = "github-dark-dimmed"
export default function ContainersTable({ systemId }: { systemId?: string }) { export default function ContainersTable({ systemId }: { systemId?: string }) {
const loadTime = Date.now()
const [data, setData] = useState<ContainerRecord[]>([]) const [data, setData] = useState<ContainerRecord[]>([])
const [sorting, setSorting] = useBrowserStorage<SortingState>( const [sorting, setSorting] = useBrowserStorage<SortingState>(
`sort-c-${systemId ? 1 : 0}`, `sort-c-${systemId ? 1 : 0}`,
@@ -47,50 +48,47 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
const [globalFilter, setGlobalFilter] = useState("") const [globalFilter, setGlobalFilter] = useState("")
useEffect(() => { useEffect(() => {
const pbOptions = { function fetchData(systemId?: string) {
fields: "id,name,image,cpu,memory,net,health,status,system,updated",
}
const fetchData = (lastXMs: number) => {
const updated = Date.now() - lastXMs
let filter: string
if (systemId) {
filter = pb.filter("system={:system} && updated > {:updated}", { system: systemId, updated })
} else {
filter = pb.filter("updated > {:updated}", { updated })
}
pb.collection<ContainerRecord>("containers") pb.collection<ContainerRecord>("containers")
.getList(0, 2000, { .getList(0, 2000, {
...pbOptions, fields: "id,name,image,cpu,memory,net,health,status,system,updated",
filter, filter: systemId ? pb.filter("system={:system}", { system: systemId }) : undefined,
}) })
.then(({ items }) => setData((curItems) => { .then(({ items }) => items.length && setData((curItems) => {
const containerIds = new Set(items.map(item => item.id)) const lastUpdated = items[0].updated ?? 0
const now = Date.now() const containerIds = new Set()
const newItems = []
for (const item of items) {
if (Math.abs(lastUpdated - item.updated) < 70_000) {
containerIds.add(item.id)
newItems.push(item)
}
}
for (const item of curItems) { for (const item of curItems) {
if (!containerIds.has(item.id) && now - item.updated < 70_000) { if (!containerIds.has(item.id) && lastUpdated - item.updated < 70_000) {
items.push(item) newItems.push(item)
} }
} }
return items return newItems
})) }))
} }
// initial load // initial load
fetchData(70_000) fetchData(systemId)
// if no systemId, poll every 10 seconds // if no systemId, pull system containers after every system update
if (!systemId) { if (!systemId) {
// poll every 10 seconds return $allSystemsById.listen((_value, _oldValue, systemId) => {
const intervalId = setInterval(() => fetchData(10_500), 10_000) // exclude initial load of systems
// clear interval on unmount if (Date.now() - loadTime > 500) {
return () => clearInterval(intervalId) fetchData(systemId)
}
})
} }
// if systemId, fetch containers after the system is updated // if systemId, fetch containers after the system is updated
return listenKeys($allSystemsById, [systemId], (_newSystems) => { return listenKeys($allSystemsById, [systemId], (_newSystems) => {
const changeTime = Date.now() fetchData(systemId)
setTimeout(() => fetchData(Date.now() - changeTime + 1000), 100)
}) })
}, []) }, [])