site charts and style updates

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

@@ -46,11 +46,8 @@ export default function BandwidthChart({
 				<CartesianGrid vertical={false} />
 				<YAxis
 					className="tracking-tighter"
-					width={80}
-					domain={[0, 'auto']}
-					// ticks={ticks}
-					tickCount={9}
-					minTickGap={8}
+					width={75}
+					domain={[0, (max: number) => (max < 0.4 ? 0.4 : Math.ceil(max))]}
 					tickLine={false}
 					axisLine={false}
 					unit={' MB/s'}

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

@@ -36,8 +36,8 @@ export default function CpuChart({
 			<AreaChart accessibilityLayer data={chartData} margin={{ top: 10 }}>
 				<CartesianGrid vertical={false} />
 				<YAxis
-					domain={[0, (max: number) => Math.ceil(max)]}
-					width={47}
+					// domain={[0, (max: number) => Math.ceil(max)]}
+					width={48}
 					tickLine={false}
 					axisLine={false}
 					unit={'%'}

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

@@ -56,11 +56,9 @@ export default function DiskChart({
 				<CartesianGrid vertical={false} />
 				<YAxis
 					className="tracking-tighter"
-					width={75}
+					width={diskSize >= 1000 ? 75 : 65}
 					domain={[0, diskSize]}
-					// ticks={ticks}
 					tickCount={9}
-					minTickGap={8}
 					tickLine={false}
 					axisLine={false}
 					unit={' GB'}

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

@@ -46,11 +46,14 @@ export default function DiskIoChart({
 				<CartesianGrid vertical={false} />
 				<YAxis
 					className="tracking-tighter"
-					width={80}
-					domain={[0, 'auto']}
-					// ticks={ticks}
-					tickCount={9}
-					minTickGap={8}
+					width={75}
+					domain={[0, (max: number) => (max < 0.4 ? 0.4 : Math.ceil(max))]}
+					tickFormatter={(value) => {
+						if (value >= 100) {
+							return value.toFixed(0)
+						}
+						return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
+					}}
 					tickLine={false}
 					axisLine={false}
 					unit={' MB/s'}

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

@@ -18,7 +18,8 @@ export default function MemChart({
 	ticks: number[]
 }) {
 	const totalMem = useMemo(() => {
-		return Math.ceil(chartData[0]?.mem)
+		const maxMem = Math.ceil(chartData[0]?.mem)
+		return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
 	}, [chartData])
 
 	const chartConfig = useMemo(
@@ -52,11 +53,11 @@ export default function MemChart({
 				<YAxis
 					// use "ticks" instead of domain / tickcount if need more control
 					domain={[0, totalMem]}
-					tickCount={9}
 					tickLine={false}
-					allowDecimals={false}
+					width={totalMem >= 100 ? 65 : 58}
+					// allowDecimals={false}
 					axisLine={false}
-					tickFormatter={(v) => `${v} GB`}
+					unit={' GB'}
 				/>
 				{/* todo: short time if first date is same day, otherwise short date */}
 				<XAxis
@@ -77,7 +78,7 @@ export default function MemChart({
 					animationDuration={150}
 					content={
 						<ChartTooltipContent
-							unit="GB"
+							unit=" GB"
 							// @ts-ignore
 							itemSorter={(a, b) => a.name.localeCompare(b.name)}
 							labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}

hub/site/src/components/command-palette.tsx

@@ -9,6 +9,7 @@ import {
 	LogsIcon,
 	MailIcon,
 	Server,
+	UsersIcon,
 } from 'lucide-react'
 
 import {
@@ -91,17 +92,18 @@ export default function CommandPalette() {
 						<CommandSeparator />
 						<CommandGroup heading="Admin">
 							<CommandItem
+								keywords={['pocketbase']}
 								onSelect={() => {
-									window.location.href = '/_/'
+									window.open('/_/', '_blank')
 								}}
 							>
-								<Database className="mr-2 h-4 w-4" />
-								<span>PocketBase</span>
+								<UsersIcon className="mr-2 h-4 w-4" />
+								<span>Users</span>
 								<CommandShortcut>Admin</CommandShortcut>
 							</CommandItem>
 							<CommandItem
 								onSelect={() => {
-									window.location.href = '/_/#/logs'
+									window.open('/_/#/logs', '_blank')
 								}}
 							>
 								<LogsIcon className="mr-2 h-4 w-4" />
@@ -110,7 +112,7 @@ export default function CommandPalette() {
 							</CommandItem>
 							<CommandItem
 								onSelect={() => {
-									window.location.href = '/_/#/settings/backups'
+									window.open('/_/#/settings/backups', '_blank')
 								}}
 							>
 								<DatabaseBackupIcon className="mr-2 h-4 w-4" />
@@ -120,7 +122,7 @@ export default function CommandPalette() {
 							<CommandItem
 								keywords={['oauth', 'oicd']}
 								onSelect={() => {
-									window.location.href = '/_/#/settings/auth-providers'
+									window.open('/_/#/settings/auth-providers', '_blank')
 								}}
 							>
 								<LockKeyholeIcon className="mr-2 h-4 w-4" />
@@ -130,7 +132,7 @@ export default function CommandPalette() {
 							<CommandItem
 								keywords={['email']}
 								onSelect={() => {
-									window.location.href = '/_/#/settings/mail'
+									window.open('/_/#/settings/mail', '_blank')
 								}}
 							>
 								<MailIcon className="mr-2 h-4 w-4" />

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

@@ -11,7 +11,7 @@ export default function () {
 	return (
 		<>
 			<Card>
-				<CardHeader>
+				<CardHeader className="pb-5">
 					<CardTitle className={'mb-1.5'}>All Systems</CardTitle>
 					<CardDescription>
 						Updated in real time. Press{' '}

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

@@ -199,7 +199,7 @@ export default function ServerDetail({ name }: { name: string }) {
 	}
 
 	return (
-		<div className="grid gap-5 mb-10">
+		<div className="grid gap-4 mb-10">
 			<Card>
 				<div className="grid gap-1.5 px-6 pt-4 pb-5">
 					<h1 className="text-[1.6rem] font-semibold">{server.name}</h1>

hub/site/src/components/server-table/systems-table.tsx

@@ -73,7 +73,7 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 				<span
 					className={cn(
 						'absolute inset-0 w-full h-full origin-left',
-						(val < 50 && 'bg-green-500') || (val < 80 && 'bg-yellow-500') || 'bg-red-600'
+						(val < 60 && 'bg-green-500') || (val < 90 && 'bg-yellow-500') || 'bg-red-600'
 					)}
 					style={{ transform: `scalex(${val}%)` }}
 				></span>

hub/site/src/main.tsx

@@ -122,7 +122,7 @@ const Layout = () => {
 	return (
 		<>
 			<div className="container">
-				<div className="flex items-center h-16 bg-card px-6 border bt-0 rounded-md my-5">
+				<div className="flex items-center h-16 bg-card px-6 border bt-0 rounded-md my-4">
 					<Link
 						href="/"
 						aria-label="Home"
@@ -132,7 +132,7 @@ const Layout = () => {
 							navigate('/')
 						}}
 					>
-						<Logo className="h-[1.2em] fill-foreground" />
+						<Logo className="h-[1.15em] fill-foreground" />
 					</Link>
 
 					<div className={'flex ml-auto'}>
@@ -171,31 +171,31 @@ const Layout = () => {
 									{isAdmin() && (
 										<>
 											<DropdownMenuItem asChild>
-												<a href="/_/">
+												<a href="/_/" target="_blank">
 													<UsersIcon className="mr-2.5 h-4 w-4" />
 													<span>Users</span>
 												</a>
 											</DropdownMenuItem>
 											<DropdownMenuItem asChild>
-												<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx">
+												<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx" target="_blank">
 													<ServerIcon className="mr-2.5 h-4 w-4" />
 													<span>Systems</span>
 												</a>
 											</DropdownMenuItem>
 											<DropdownMenuItem asChild>
-												<a href="/_/#/logs">
+												<a href="/_/#/logs" target="_blank">
 													<LogsIcon className="mr-2.5 h-4 w-4" />
 													<span>Logs</span>
 												</a>
 											</DropdownMenuItem>
 											<DropdownMenuItem asChild>
-												<a href="/_/#/settings/backups">
+												<a href="/_/#/settings/backups" target="_blank">
 													<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
 													<span>Backups</span>
 												</a>
 											</DropdownMenuItem>
 											<DropdownMenuItem asChild>
-												<a href="/_/#/settings/auth-providers">
+												<a href="/_/#/settings/auth-providers" target="_blank">
 													<LockKeyholeIcon className="mr-2.5 h-4 w-4" />
 													<span>Auth providers</span>
 												</a>