combine hub and agent repos

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

@@ -0,0 +1,100 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import Spinner from '../spinner'
+
+const chartConfig = {
+	recv: {
+		label: 'Received',
+		color: 'hsl(var(--chart-2))',
+	},
+	sent: {
+		label: 'Sent',
+		color: 'hsl(var(--chart-5))',
+	},
+} satisfies ChartConfig
+
+export default function BandwidthChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; sent: number; recv: number }[]
+	ticks: number[]
+}) {
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					left: 0,
+					right: 0,
+					top: 10,
+					bottom: 0,
+				}}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					className="tracking-tighter"
+					width={80}
+					domain={[0, 'auto']}
+					// ticks={ticks}
+					tickCount={9}
+					minTickGap={8}
+					tickLine={false}
+					axisLine={false}
+					unit={' MB/s'}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					content={
+						<ChartTooltipContent
+							unit=" MB/s"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="sent"
+					type="monotoneX"
+					fill="var(--color-sent)"
+					fillOpacity={0.4}
+					stroke="var(--color-sent)"
+					animationDuration={1200}
+				/>
+				<Area
+					dataKey="recv"
+					type="monotoneX"
+					fill="var(--color-recv)"
+					fillOpacity={0.4}
+					stroke="var(--color-recv)"
+					animationDuration={1200}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

hub/site/src/components/charts/chart-time-select.tsx

@@ -0,0 +1,34 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/components/ui/select'
+import { $chartTime } from '@/lib/stores'
+import { chartTimeData, cn } from '@/lib/utils'
+import { ChartTimes } from '@/types'
+import { useStore } from '@nanostores/react'
+
+export default function ChartTimeSelect({ className }: { className?: string }) {
+	const chartTime = useStore($chartTime)
+
+	return (
+		<Select
+			defaultValue="1h"
+			value={chartTime}
+			onValueChange={(value: ChartTimes) => $chartTime.set(value)}
+		>
+			<SelectTrigger className={cn(className, 'w-40 px-5')}>
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				{Object.entries(chartTimeData).map(([value, { label }]) => (
+					<SelectItem key={label} value={value}>
+						{label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	)
+}

hub/site/src/components/charts/container-cpu-chart.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { useMemo } from 'react'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import Spinner from '../spinner'
+
+export default function ContainerCpuChart({
+	chartData,
+	ticks,
+}: {
+	chartData: Record<string, number | string>[]
+	ticks: number[]
+}) {
+	const chartConfig = useMemo(() => {
+		let config = {} as Record<
+			string,
+			{
+				label: string
+				color: string
+			}
+		>
+		const totalUsage = {} as Record<string, number>
+		for (let stats of chartData) {
+			for (let key in stats) {
+				if (key === 'time') {
+					continue
+				}
+				if (!(key in totalUsage)) {
+					totalUsage[key] = 0
+				}
+				// @ts-ignore
+				totalUsage[key] += stats[key]
+			}
+		}
+		let keys = Object.keys(totalUsage)
+		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
+		const length = keys.length
+		for (let i = 0; i < length; i++) {
+			const key = keys[i]
+			const hue = ((i * 360) / length) % 360
+			config[key] = {
+				label: key,
+				color: `hsl(${hue}, 60%, 55%)`,
+			}
+		}
+		return config satisfies ChartConfig
+	}, [chartData])
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					top: 10,
+				}}
+				reverseStackOrder={true}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
+					width={47}
+					tickLine={false}
+					axisLine={false}
+					unit={'%'}
+					tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
+				/>
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					animationEasing="ease-out"
+					animationDuration={150}
+					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+					// @ts-ignore
+					itemSorter={(a, b) => b.value - a.value}
+					content={<ChartTooltipContent unit="%" indicator="line" />}
+				/>
+				{Object.keys(chartConfig).map((key) => (
+					<Area
+						key={key}
+						// isAnimationActive={chartData.length < 20}
+						animateNewValues={false}
+						animationDuration={1200}
+						dataKey={key}
+						type="monotoneX"
+						fill={chartConfig[key].color}
+						fillOpacity={0.4}
+						stroke={chartConfig[key].color}
+						stackId="a"
+					/>
+				))}
+			</AreaChart>
+		</ChartContainer>
+	)
+}

hub/site/src/components/charts/container-mem-chart.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { useMemo } from 'react'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import Spinner from '../spinner'
+
+export default function ({
+	chartData,
+	ticks,
+}: {
+	chartData: Record<string, number | string>[]
+	ticks: number[]
+}) {
+	const chartConfig = useMemo(() => {
+		let config = {} as Record<
+			string,
+			{
+				label: string
+				color: string
+			}
+		>
+		const totalUsage = {} as Record<string, number>
+		for (let stats of chartData) {
+			for (let key in stats) {
+				if (key === 'time') {
+					continue
+				}
+				if (!(key in totalUsage)) {
+					totalUsage[key] = 0
+				}
+				// @ts-ignore
+				totalUsage[key] += stats[key]
+			}
+		}
+		let keys = Object.keys(totalUsage)
+		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
+		const length = keys.length
+		for (let i = 0; i < length; i++) {
+			const key = keys[i]
+			const hue = ((i * 360) / length) % 360
+			config[key] = {
+				label: key,
+				color: `hsl(${hue}, 60%, 55%)`,
+			}
+		}
+		return config satisfies ChartConfig
+	}, [chartData])
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				reverseStackOrder={true}
+				margin={{
+					top: 10,
+				}}
+
+				// reverseStackOrder={true}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					domain={[0, (max: number) => Math.ceil(max)]}
+					// tickCount={9}
+					allowDecimals={false}
+					tickLine={false}
+					axisLine={false}
+					unit={' GB'}
+					tickFormatter={(x) => {
+						x = x / 1024
+						return x % 1 === 0 ? x : x.toFixed(1)
+					}}
+				/>
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					animationEasing="ease-out"
+					animationDuration={150}
+					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+					// @ts-ignore
+					itemSorter={(a, b) => b.value - a.value}
+					content={<ChartTooltipContent unit=" MiB" indicator="line" />}
+				/>
+				{Object.keys(chartConfig).map((key) => (
+					<Area
+						key={key}
+						isAnimationActive={chartData.length < 20}
+						animateNewValues={false}
+						animationDuration={1200}
+						dataKey={key}
+						type="monotoneX"
+						fill={chartConfig[key].color}
+						fillOpacity={0.4}
+						stroke={chartConfig[key].color}
+						stackId="a"
+					/>
+				))}
+			</AreaChart>
+		</ChartContainer>
+	)
+}

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

@@ -0,0 +1,81 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { chartTimeData, formatShortDate } from '@/lib/utils'
+import Spinner from '../spinner'
+import { useStore } from '@nanostores/react'
+import { $chartTime } from '@/lib/stores'
+
+const chartConfig = {
+	cpu: {
+		label: 'CPU Usage',
+		color: 'hsl(var(--chart-1))',
+	},
+} satisfies ChartConfig
+
+export default function CpuChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; cpu: number }[]
+	ticks: number[]
+}) {
+	const chartTime = useStore($chartTime)
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					domain={[0, (max: number) => Math.ceil(max)]}
+					width={47}
+					tickLine={false}
+					axisLine={false}
+					unit={'%'}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					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="%"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="cpu"
+					type="monotoneX"
+					fill="var(--color-cpu)"
+					fillOpacity={0.4}
+					stroke="var(--color-cpu)"
+					animationDuration={1200}
+					// animationEasing="ease-out"
+					// animateNewValues={false}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

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

@@ -0,0 +1,102 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { useMemo } from 'react'
+import Spinner from '../spinner'
+
+const chartConfig = {
+	diskUsed: {
+		label: 'Disk Usage',
+		color: 'hsl(var(--chart-4))',
+	},
+} satisfies ChartConfig
+
+export default function DiskChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; disk: number; diskUsed: number }[]
+	ticks: number[]
+}) {
+	const diskSize = useMemo(() => {
+		return Math.round(chartData[0]?.disk)
+	}, [chartData])
+
+	// const ticks = useMemo(() => {
+	// 	let ticks = [0]
+	// 	for (let i = 1; i < diskSize; i += diskSize / 5) {
+	// 		ticks.push(Math.trunc(i))
+	// 	}
+	// 	ticks.push(diskSize)
+	// 	return ticks
+	// }, [diskSize])
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					left: 0,
+					right: 0,
+					top: 10,
+					bottom: 0,
+				}}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					className="tracking-tighter"
+					width={75}
+					domain={[0, diskSize]}
+					// ticks={ticks}
+					tickCount={9}
+					minTickGap={8}
+					tickLine={false}
+					axisLine={false}
+					unit={' GB'}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					content={
+						<ChartTooltipContent
+							unit=" GB"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="diskUsed"
+					type="monotoneX"
+					fill="var(--color-diskUsed)"
+					fillOpacity={0.4}
+					stroke="var(--color-diskUsed)"
+					animationDuration={1200}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

hub/site/src/components/charts/disk-io-chart.tsx

@@ -0,0 +1,100 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import Spinner from '../spinner'
+
+const chartConfig = {
+	read: {
+		label: 'Read',
+		color: 'hsl(var(--chart-1))',
+	},
+	write: {
+		label: 'Write',
+		color: 'hsl(var(--chart-3))',
+	},
+} satisfies ChartConfig
+
+export default function DiskIoChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; read: number; write: number }[]
+	ticks: number[]
+}) {
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					left: 0,
+					right: 0,
+					top: 10,
+					bottom: 0,
+				}}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					className="tracking-tighter"
+					width={80}
+					domain={[0, 'auto']}
+					// ticks={ticks}
+					tickCount={9}
+					minTickGap={8}
+					tickLine={false}
+					axisLine={false}
+					unit={' MB/s'}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					content={
+						<ChartTooltipContent
+							unit=" MB/s"
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="write"
+					type="monotoneX"
+					fill="var(--color-write)"
+					fillOpacity={0.4}
+					stroke="var(--color-write)"
+					animationDuration={1200}
+				/>
+				<Area
+					dataKey="read"
+					type="monotoneX"
+					fill="var(--color-read)"
+					fillOpacity={0.4}
+					stroke="var(--color-read)"
+					animationDuration={1200}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}

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

@@ -0,0 +1,110 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+import { formatShortDate, hourWithMinutes } from '@/lib/utils'
+import { useMemo } from 'react'
+import Spinner from '../spinner'
+
+export default function MemChart({
+	chartData,
+	ticks,
+}: {
+	chartData: { time: number; mem: number; memUsed: number; memCache: number }[]
+	ticks: number[]
+}) {
+	const totalMem = useMemo(() => {
+		return Math.ceil(chartData[0]?.mem)
+	}, [chartData])
+
+	const chartConfig = useMemo(
+		() => ({
+			memCache: {
+				label: 'Cache / Buffers',
+				color: 'hsl(var(--chart-2))',
+			},
+			memUsed: {
+				label: 'Used',
+				color: 'hsl(var(--chart-2))',
+			},
+		}),
+		[]
+	) satisfies ChartConfig
+
+	if (!chartData.length || !ticks.length) {
+		return <Spinner />
+	}
+
+	return (
+		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			<AreaChart
+				accessibilityLayer
+				data={chartData}
+				margin={{
+					top: 10,
+				}}
+			>
+				<CartesianGrid vertical={false} />
+				<YAxis
+					// use "ticks" instead of domain / tickcount if need more control
+					domain={[0, totalMem]}
+					tickCount={9}
+					tickLine={false}
+					allowDecimals={false}
+					axisLine={false}
+					tickFormatter={(v) => `${v} GB`}
+				/>
+				{/* todo: short time if first date is same day, otherwise short date */}
+				<XAxis
+					dataKey="time"
+					domain={[ticks[0], ticks.at(-1)!]}
+					ticks={ticks}
+					type="number"
+					scale={'time'}
+					tickLine={true}
+					axisLine={false}
+					tickMargin={8}
+					minTickGap={30}
+					tickFormatter={hourWithMinutes}
+				/>
+				<ChartTooltip
+					// cursor={false}
+					animationEasing="ease-out"
+					animationDuration={150}
+					content={
+						<ChartTooltipContent
+							unit="GB"
+							// @ts-ignore
+							itemSorter={(a, b) => a.name.localeCompare(b.name)}
+							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+							indicator="line"
+						/>
+					}
+				/>
+				<Area
+					dataKey="memUsed"
+					type="monotoneX"
+					fill="var(--color-memUsed)"
+					fillOpacity={0.4}
+					stroke="var(--color-memUsed)"
+					stackId="a"
+					animationDuration={1200}
+				/>
+				<Area
+					dataKey="memCache"
+					type="monotoneX"
+					fill="var(--color-memCache)"
+					fillOpacity={0.2}
+					strokeOpacity={0.3}
+					stroke="var(--color-memCache)"
+					stackId="a"
+					animationDuration={1200}
+				/>
+			</AreaChart>
+		</ChartContainer>
+	)
+}