add swap usage chart

agent/main.go

@@ -73,6 +73,8 @@ func getSystemStats() (*SystemInfo, *SystemStats) {
 		systemStats.MemUsed = bytesToGigabytes(v.Used)
 		systemStats.MemBuffCache = bytesToGigabytes(v.Total - v.Free - v.Used)
 		systemStats.MemPct = twoDecimals(v.UsedPercent)
+		systemStats.Swap = bytesToGigabytes(v.SwapTotal)
+		systemStats.SwapUsed = bytesToGigabytes(v.SwapTotal - v.SwapFree)
 	}
 
 	// disk usage

agent/types.go

@@ -25,6 +25,8 @@ type SystemStats struct {
 	MemUsed      float64 `json:"mu"`
 	MemPct       float64 `json:"mp"`
 	MemBuffCache float64 `json:"mb"`
+	Swap         float64 `json:"s"`
+	SwapUsed     float64 `json:"su"`
 	Disk         float64 `json:"d"`
 	DiskUsed     float64 `json:"du"`
 	DiskPct      float64 `json:"dp"`

hub/site/src/components/charts/swap-chart.tsx

@@ -0,0 +1,82 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import {
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	useYaxisWidth,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+import { SystemStatsRecord } from '@/types'
+import { useMemo, useRef } from 'react'
+
+export default function SwapChart({
+	ticks,
+	systemData,
+}: {
+	ticks: number[]
+	systemData: SystemStatsRecord[]
+}) {
+	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	return (
+		<div ref={chartRef}>
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
+				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.s ?? 0.04, 2)]}
+						width={yAxisWidth}
+						tickLine={false}
+						axisLine={false}
+						unit={' GB'}
+					/>
+					<XAxis
+						dataKey="created"
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						animationEasing="ease-out"
+						animationDuration={150}
+						content={
+							<ChartTooltipContent
+								unit=" GB"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								indicator="line"
+							/>
+						}
+					/>
+					<Area
+						dataKey="stats.su"
+						name="Swap Usage"
+						type="monotoneX"
+						fill="hsl(var(--chart-2))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-2))"
+						isAnimationActive={false}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+}

hub/site/src/components/routes/system.tsx

@@ -19,6 +19,7 @@ const DiskChart = lazy(() => import('../charts/disk-chart'))
 const DiskIoChart = lazy(() => import('../charts/disk-io-chart'))
 const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
 const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
+const SwapChart = lazy(() => import('../charts/swap-chart'))
 
 export default function ServerDetail({ name }: { name: string }) {
 	const systems = useStore($systems)
@@ -231,6 +232,12 @@ export default function ServerDetail({ name }: { name: string }) {
 				</ChartCard>
 			)}
 
+			{(systemStats.at(-1)?.stats.s ?? 0) > 0 && (
+				<ChartCard title="Swap Usage" description="Swap space used by the system">
+					<SwapChart ticks={ticks} systemData={systemStats} />
+				</ChartCard>
+			)}
+
 			<ChartCard
 				title="Disk Usage"
 				description="Usage of partition where the root filesystem is mounted"

hub/site/src/types.d.ts

@@ -38,6 +38,10 @@ export interface SystemStats {
 	mp: number
 	/** memory buffer + cache (gb) */
 	mb: number
+	/** swap space (gb) */
+	s: number
+	/** swap used (gb) */
+	su: number
 	/** disk size (gb) */
 	d: number
 	/** disk used (gb) */

hub/types.go

@@ -34,6 +34,8 @@ type SystemStats struct {
 	MemUsed      float64 `json:"mu"`
 	MemPct       float64 `json:"mp"`
 	MemBuffCache float64 `json:"mb"`
+	Swap         float64 `json:"s"`
+	SwapUsed     float64 `json:"su"`
 	Disk         float64 `json:"d"`
 	DiskUsed     float64 `json:"du"`
 	DiskPct      float64 `json:"dp"`