hub(ui): tabs display for system + major frontend/charts refactoring

- System page tabs display option
- Remove very specific chart components (disk usage, container cpu, etc)
and refactor to use more flexible area and line chart components
- Optimizations around chart handling to decrease mem usage. Charts are
only redrawn now if in view.
- Resolve most of the react dev warnings

Co-authored-by: sveng93 <svenvanginkel@icloud.com>

internal/site/src/components/routes/system/cpu-sheet.tsx

@@ -1,14 +1,14 @@
 import { t } from "@lingui/core/macro"
 import { MoreHorizontalIcon } from "lucide-react"
 import { memo, useRef, useState } from "react"
-import AreaChartDefault, { DataPoint } from "@/components/charts/area-chart"
+import AreaChartDefault, { type DataPoint } from "@/components/charts/area-chart"
 import ChartTimeSelect from "@/components/charts/chart-time-select"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { DialogTitle } from "@/components/ui/dialog"
 import { compareSemVer, decimalString, parseSemVer, toFixedFloat } from "@/lib/utils"
 import type { ChartData, SystemStatsRecord } from "@/types"
-import { ChartCard } from "../system"
+import { ChartCard } from "./chart-card"
 
 const minAgentVersion = parseSemVer("0.15.3")
 
@@ -42,41 +42,54 @@ export default memo(function CpuCoresSheet({
 	const numCores = cpus.length
 	const hasBreakdown = (latest?.cpub?.length ?? 0) > 0
 
+	// make sure all individual core data points have the same y axis domain to make relative comparison easier
+	let highestCpuCorePct = 1
+	if (hasOpened.current) {
+		for (let i = 0; i < numCores; i++) {
+			for (let j = 0; j < chartData.systemStats.length; j++) {
+				const pct = chartData.systemStats[j].stats?.cpus?.[i] ?? 0
+				if (pct > highestCpuCorePct) {
+					highestCpuCorePct = pct
+				}
+			}
+		}
+	}
+
 	const breakdownDataPoints = [
 		{
 			label: "System",
 			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[1],
 			color: 3,
 			opacity: 0.35,
-			stackId: "a"
+			stackId: "a",
 		},
 		{
 			label: "User",
 			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[0],
 			color: 1,
 			opacity: 0.35,
-			stackId: "a"
+			stackId: "a",
 		},
 		{
 			label: "IOWait",
 			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[2],
 			color: 4,
 			opacity: 0.35,
-			stackId: "a"
+			stackId: "a",
 		},
 		{
 			label: "Steal",
 			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[3],
 			color: 5,
 			opacity: 0.35,
-			stackId: "a"
+			stackId: "a",
 		},
 		{
 			label: "Idle",
 			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[4],
 			color: 2,
 			opacity: 0.35,
-			stackId: "a"
+			stackId: "a",
 		},
 		{
 			label: t`Other`,
@@ -86,11 +99,10 @@ export default memo(function CpuCoresSheet({
 			},
 			color: `hsl(80, 65%, 52%)`,
 			opacity: 0.35,
-			stackId: "a"
+			stackId: "a",
 		},
 	] as DataPoint[]
 
-
 	return (
 		<Sheet open={cpuCoresOpen} onOpenChange={setCpuCoresOpen}>
 			<DialogTitle className="sr-only">{t`CPU Usage`}</DialogTitle>
@@ -151,7 +163,7 @@ export default memo(function CpuCoresSheet({
 									dataKey: ({ stats }: SystemStatsRecord) => stats?.cpus?.[i] ?? 1 / (stats?.cpus?.length ?? 1),
 									color: `hsl(${226 + (((i * 360) / Math.max(1, numCores)) % 360)}, var(--chart-saturation), var(--chart-lightness))`,
 									opacity: 0.35,
-									stackId: "a"
+									stackId: "a",
 								}))}
 								tickFormatter={(val) => `${val}%`}
 								contentFormatter={({ value }) => `${value}%`}
@@ -174,7 +186,7 @@ export default memo(function CpuCoresSheet({
 							<AreaChartDefault
 								chartData={chartData}
 								maxToggled={maxValues}
-								legend={false}
+								domain={[0, highestCpuCorePct]}
 								dataPoints={[
 									{
 										label: t`Usage`,