change server verbiage to system

hub/site/src/components/add-system.tsx

@@ -19,7 +19,7 @@ import { useStore } from '@nanostores/react'
 import { copyToClipboard } from '@/lib/utils'
 import { SystemStats } from '@/types'
 
-export function AddServerButton() {
+export function AddSystemButton() {
 	const [open, setOpen] = useState(false)
 	const port = useRef() as MutableRefObject<HTMLInputElement>
 	const publicKey = useStore($publicKey)

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

@@ -1,7 +1,4 @@
-'use client'
-
 import {
-	Database,
 	DatabaseBackupIcon,
 	Github,
 	LayoutDashboard,
@@ -30,7 +27,7 @@ import { navigate } from './router'
 
 export default function CommandPalette() {
 	const [open, setOpen] = useState(false)
-	const servers = useStore($systems)
+	const systems = useStore($systems)
 
 	useEffect(() => {
 		const down = (e: KeyboardEvent) => {
@@ -72,22 +69,26 @@ export default function CommandPalette() {
 						<CommandShortcut>GitHub</CommandShortcut>
 					</CommandItem>
 				</CommandGroup>
-				<CommandSeparator />
-				<CommandGroup heading="Servers">
-					{servers.map((server) => (
-						<CommandItem
-							key={server.id}
-							onSelect={() => {
-								navigate(`/server/${server.name}`)
-								setOpen((open) => !open)
-							}}
-						>
-							<Server className="mr-2 h-4 w-4" />
-							<span>{server.name}</span>
-							<CommandShortcut>{server.host}</CommandShortcut>
-						</CommandItem>
-					))}
-				</CommandGroup>
+				{systems.length > 0 && (
+					<>
+						<CommandSeparator />
+						<CommandGroup heading="Systems">
+							{systems.map((system) => (
+								<CommandItem
+									key={system.id}
+									onSelect={() => {
+										navigate(`/system/${system.name}`)
+										setOpen(false)
+									}}
+								>
+									<Server className="mr-2 h-4 w-4" />
+									<span>{system.name}</span>
+									<CommandShortcut>{system.host}</CommandShortcut>
+								</CommandItem>
+							))}
+						</CommandGroup>
+					</>
+				)}
 				{isAdmin() && (
 					<>
 						<CommandSeparator />
@@ -95,6 +96,7 @@ export default function CommandPalette() {
 							<CommandItem
 								keywords={['pocketbase']}
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/', '_blank')
 								}}
 							>
@@ -104,6 +106,7 @@ export default function CommandPalette() {
 							</CommandItem>
 							<CommandItem
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/#/logs', '_blank')
 								}}
 							>
@@ -113,6 +116,7 @@ export default function CommandPalette() {
 							</CommandItem>
 							<CommandItem
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/#/settings/backups', '_blank')
 								}}
 							>
@@ -123,6 +127,7 @@ export default function CommandPalette() {
 							<CommandItem
 								keywords={['oauth', 'oicd']}
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/#/settings/auth-providers', '_blank')
 								}}
 							>
@@ -133,6 +138,7 @@ export default function CommandPalette() {
 							<CommandItem
 								keywords={['email']}
 								onSelect={() => {
+									setOpen(false)
 									window.open('/_/#/settings/mail', '_blank')
 								}}
 							>

hub/site/src/components/router.tsx

@@ -3,7 +3,7 @@ import { createRouter } from '@nanostores/router'
 export const $router = createRouter(
 	{
 		home: '/',
-		server: '/server/:name',
+		server: '/system/:name',
 		'forgot-password': '/forgot-password',
 	},
 	{ links: false }

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

@@ -1,7 +1,7 @@
 import { Suspense, lazy, useEffect } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
 
-const SystemsTable = lazy(() => import('../server-table/systems-table'))
+const SystemsTable = lazy(() => import('../systems-table/systems-table'))
 
 export default function () {
 	useEffect(() => {

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

@@ -20,14 +20,14 @@ const DiskIoChart = lazy(() => import('../charts/disk-io-chart'))
 const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
 
 export default function ServerDetail({ name }: { name: string }) {
-	const servers = useStore($systems)
+	const systems = useStore($systems)
 	const updatedSystem = useStore($updatedSystem)
 	const chartTime = useStore($chartTime)
 	const [ticks, setTicks] = useState([] as number[])
 	const [server, setServer] = useState({} as SystemRecord)
 	const [containers, setContainers] = useState([] as ContainerStatsRecord[])
 
-	const [serverStats, setServerStats] = useState([] as SystemStatsRecord[])
+	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
 	const [cpuChartData, setCpuChartData] = useState([] as { time: number; cpu: number }[])
 	const [memChartData, setMemChartData] = useState(
 		[] as { time: number; mem: number; memUsed: number; memCache: number }[]
@@ -57,7 +57,7 @@ export default function ServerDetail({ name }: { name: string }) {
 	}, [name])
 
 	const resetCharts = useCallback(() => {
-		setServerStats([])
+		setSystemStats([])
 		setCpuChartData([])
 		setMemChartData([])
 		setDiskChartData([])
@@ -72,11 +72,11 @@ export default function ServerDetail({ name }: { name: string }) {
 		if (server.id && server.name === name) {
 			return
 		}
-		const matchingServer = servers.find((s) => s.name === name) as SystemRecord
+		const matchingServer = systems.find((s) => s.name === name) as SystemRecord
 		if (matchingServer) {
 			setServer(matchingServer)
 		}
-	}, [name, server, servers])
+	}, [name, server, systems])
 
 	// get stats
 	useEffect(() => {
@@ -95,7 +95,7 @@ export default function ServerDetail({ name }: { name: string }) {
 			})
 			.then((records) => {
 				// console.log('sctats', records)
-				setServerStats(records)
+				setSystemStats(records)
 			})
 	}, [server, chartTime])
 
@@ -107,7 +107,7 @@ export default function ServerDetail({ name }: { name: string }) {
 
 	// create cpu / mem / disk data for charts
 	useEffect(() => {
-		if (!serverStats.length) {
+		if (!systemStats.length) {
 			return
 		}
 		const cpuData = [] as typeof cpuChartData
@@ -115,7 +115,7 @@ export default function ServerDetail({ name }: { name: string }) {
 		const diskData = [] as typeof diskChartData
 		const diskIoData = [] as typeof diskIoChartData
 		const networkData = [] as typeof bandwidthChartData
-		for (let { created, stats } of serverStats) {
+		for (let { created, stats } of systemStats) {
 			const time = new Date(created).getTime()
 			cpuData.push({ time, cpu: stats.cpu })
 			memData.push({
@@ -133,17 +133,17 @@ export default function ServerDetail({ name }: { name: string }) {
 		setDiskChartData(diskData)
 		setDiskIoChartData(diskIoData)
 		setBandwidthChartData(networkData)
-	}, [serverStats])
+	}, [systemStats])
 
 	useEffect(() => {
-		if (!serverStats.length) {
+		if (!systemStats.length) {
 			return
 		}
 		const now = new Date()
 		const startTime = chartTimeData[chartTime].getOffset(now)
 		const scale = scaleTime([startTime.getTime(), now], [0, cpuChartData.length])
 		setTicks(scale.ticks().map((d) => d.getTime()))
-	}, [chartTime, serverStats])
+	}, [chartTime, systemStats])
 
 	// get container stats
 	useEffect(() => {

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

@@ -59,7 +59,7 @@ import {
 import { useMemo, useState } from 'react'
 import { $systems, pb } from '@/lib/stores'
 import { useStore } from '@nanostores/react'
-import { AddServerButton } from '../add-server'
+import { AddSystemButton } from '../add-system'
 import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils'
 import AlertsButton from '../table-alerts'
 import { navigate } from '../router'
@@ -133,7 +133,7 @@ export default function SystemsTable() {
 						</span>
 					)
 				},
-				header: ({ column }) => sortableHeader(column, 'Server', Server),
+				header: ({ column }) => sortableHeader(column, 'System', Server),
 			},
 			{
 				accessorKey: 'info.cpu',
@@ -259,7 +259,7 @@ export default function SystemsTable() {
 						className="max-w-sm"
 					/>
 					<div className={cn('ml-auto flex gap-2', isReadOnlyUser() && 'hidden')}>
-						<AddServerButton />
+						<AddSystemButton />
 					</div>
 				</div>
 				<div className="rounded-md border overflow-hidden">
@@ -291,7 +291,7 @@ export default function SystemsTable() {
 										onClick={(e) => {
 											const target = e.target as HTMLElement
 											if (!target.closest('[data-nolink]') && e.currentTarget.contains(target)) {
-												navigate(`/server/${row.original.name}`)
+												navigate(`/system/${row.original.name}`)
 											}
 										}}
 									>
@@ -314,7 +314,7 @@ export default function SystemsTable() {
 							) : (
 								<TableRow>
 									<TableCell colSpan={columns.length} className="h-24 text-center">
-										No servers found
+										No systems found
 									</TableCell>
 								</TableRow>
 							)}