display longer records in charts

site/embed.go

@@ -1,17 +1,15 @@
+// Package site handles the Beszel frontend embedding.
 package site
 
 import (
 	"embed"
-	"io/fs"
+
+	"github.com/labstack/echo/v5"
 )
 
 //go:embed all:dist
 var assets embed.FS
 
-func Assets() (fs.FS, error) {
-	return fs.Sub(assets, "dist")
-}
+var Dist = echo.MustSubFS(assets, "dist")
 
-func Icons() (fs.FS, error) {
-	return fs.Sub(assets, "dist/icons")
-}
+var Icons = echo.MustSubFS(assets, "dist/icons")

site/src/components/routes/server.tsx

@@ -73,12 +73,16 @@ export default function ServerDetail({ name }: { name: string }) {
 
 	// get stats
 	useEffect(() => {
-		if (!server.id) {
+		if (!server.id || !chartTime) {
 			return
 		}
 		pb.collection<SystemStatsRecord>('system_stats')
 			.getFullList({
-				filter: `system="${server.id}" && created > "${getPbTimestamp('1h')}"`,
+				filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
+					id: server.id,
+					created: getPbTimestamp(chartTime),
+					type: chartTimeData[chartTime].type,
+				}),
 				fields: 'created,stats',
 				sort: 'created',
 			})
@@ -86,7 +90,7 @@ export default function ServerDetail({ name }: { name: string }) {
 				// console.log('sctats', records)
 				setServerStats(records)
 			})
-	}, [server])
+	}, [server, chartTime])
 
 	useEffect(() => {
 		if (updatedSystem.id === server.id) {

site/src/lib/utils.ts

@@ -123,26 +123,31 @@ export function getPbTimestamp(timeString: ChartTimes) {
 
 export const chartTimeData = {
 	'1h': {
+		type: '1m',
 		label: '1 hour',
 		format: (timestamp: string) => hourWithMinutes(timestamp),
 		getOffset: (endTime: Date) => timeHour.offset(endTime, -1),
 	},
 	'12h': {
+		type: '10m',
 		label: '12 hours',
 		format: (timestamp: string) => hourWithMinutes(timestamp),
 		getOffset: (endTime: Date) => timeHour.offset(endTime, -12),
 	},
 	'24h': {
+		type: '20m',
 		label: '24 hours',
 		format: (timestamp: string) => hourWithMinutes(timestamp),
 		getOffset: (endTime: Date) => timeHour.offset(endTime, -24),
 	},
 	'1w': {
+		type: '120m',
 		label: '1 week',
 		format: (timestamp: string) => formatDay(timestamp),
 		getOffset: (endTime: Date) => timeDay.offset(endTime, -7),
 	},
 	'30d': {
+		type: '480m',
 		label: '30 days',
 		format: (timestamp: string) => formatDay(timestamp),
 		getOffset: (endTime: Date) => timeDay.offset(endTime, -30),