add more cpu metrics (#1356)

- adds monitoring for cpu state time and per-core usage

Co-authored-by: Sven van Ginkel <svenvanginkel@icloud.com>

internal/site/src/components/charts/area-chart.tsx

@@ -17,6 +17,7 @@ export type DataPoint = {
 	dataKey: (data: SystemStatsRecord) => number | undefined
 	color: number | string
 	opacity: number
+	stackId?: string | number
 }
 
 export default function AreaChartDefault({
@@ -29,19 +30,23 @@ export default function AreaChartDefault({
 	domain,
 	legend,
 	itemSorter,
+	reverseStackOrder = false,
+	hideYAxis = false,
 }: // logRender = false,
-{
-	chartData: ChartData
-	max?: number
-	maxToggled?: boolean
-	tickFormatter: (value: number, index: number) => string
-	contentFormatter: ({ value, payload }: { value: number; payload: SystemStatsRecord }) => string
-	dataPoints?: DataPoint[]
-	domain?: [number, number]
-	legend?: boolean
-	itemSorter?: (a: any, b: any) => number
-	// logRender?: boolean
-}) {
+	{
+		chartData: ChartData
+		max?: number
+		maxToggled?: boolean
+		tickFormatter: (value: number, index: number) => string
+		contentFormatter: ({ value, payload }: { value: number; payload: SystemStatsRecord }) => string
+		dataPoints?: DataPoint[]
+		domain?: [number, number]
+		legend?: boolean
+		itemSorter?: (a: any, b: any) => number
+		reverseStackOrder?: boolean
+		hideYAxis?: boolean
+		// logRender?: boolean
+	}) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: ignore
@@ -56,12 +61,13 @@ export default function AreaChartDefault({
 			<div>
 				<ChartContainer
 					className={cn("h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity", {
-						"opacity-100": yAxisWidth,
+						"opacity-100": yAxisWidth || hideYAxis,
+						"ps-4": hideYAxis,
 					})}
 				>
-					<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
+					<AreaChart reverseStackOrder={reverseStackOrder} accessibilityLayer data={chartData.systemStats} margin={hideYAxis ? { ...chartMargin, left: 5 } : chartMargin}>
 						<CartesianGrid vertical={false} />
-						<YAxis
+						{!hideYAxis && <YAxis
 							direction="ltr"
 							orientation={chartData.orientation}
 							className="tracking-tighter"
@@ -70,7 +76,7 @@ export default function AreaChartDefault({
 							tickFormatter={(value, index) => updateYAxisWidth(tickFormatter(value, index))}
 							tickLine={false}
 							axisLine={false}
-						/>
+						/>}
 						{xAxis(chartData)}
 						<ChartTooltip
 							animationEasing="ease-out"
@@ -99,6 +105,7 @@ export default function AreaChartDefault({
 									fillOpacity={dataPoint.opacity}
 									stroke={color}
 									isAnimationActive={false}
+									stackId={dataPoint.stackId}
 								/>
 							)
 						})}

internal/site/src/components/charts/hooks.ts

@@ -69,7 +69,7 @@ export function useContainerChartConfigs(containerData: ChartData["containerData
 				const hue = ((i * 360) / count) % 360
 				chartConfig[containerName] = {
 					label: containerName,
-					color: `hsl(${hue}, 60%, 55%)`,
+					color: `hsl(${hue}, var(--chart-saturation), var(--chart-lightness))`,
 				}
 			}