move gh button + update agent display in table

beszel/internal/agent/agent.go

@@ -141,10 +141,10 @@ func (a *Agent) getSystemStats() (*system.Info, *system.Stats) {
 	}
 
 	systemInfo := &system.Info{
-		Cpu:     systemStats.Cpu,
-		MemPct:  systemStats.MemPct,
-		DiskPct: systemStats.DiskPct,
-		Vers:    beszel.Version,
+		Cpu:          systemStats.Cpu,
+		MemPct:       systemStats.MemPct,
+		DiskPct:      systemStats.DiskPct,
+		AgentVersion: beszel.Version,
 	}
 
 	// add host info
@@ -164,7 +164,6 @@ func (a *Agent) getSystemStats() (*system.Info, *system.Stats) {
 	}
 
 	return systemInfo, systemStats
-
 }
 
 func (a *Agent) getDockerStats() ([]*container.Stats, error) {

beszel/internal/entities/system/system.go

@@ -41,11 +41,11 @@ type Info struct {
 	Threads  int    `json:"t"`
 	CpuModel string `json:"m"`
 	// Os       string  `json:"o"`
-	Uptime  uint64  `json:"u"`
-	Cpu     float64 `json:"cpu"`
-	MemPct  float64 `json:"mp"`
-	DiskPct float64 `json:"dp"`
-	Vers    string  `json:"v"`
+	Uptime       uint64  `json:"u"`
+	Cpu          float64 `json:"cpu"`
+	MemPct       float64 `json:"mp"`
+	DiskPct      float64 `json:"dp"`
+	AgentVersion string  `json:"v"`
 }
 
 // Final data structure to return to the hub

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

@@ -14,7 +14,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { $publicKey, pb } from '@/lib/stores'
 import { Copy, Plus } from 'lucide-react'
-import { useState, useRef, MutableRefObject, useEffect } from 'react'
+import { useState, useRef, MutableRefObject } from 'react'
 import { useStore } from '@nanostores/react'
 import { copyToClipboard } from '@/lib/utils'
 
@@ -38,16 +38,6 @@ export function AddSystemButton() {
       # FILESYSTEM: /dev/sda1 # set to the correct filesystem for disk I/O stats`)
 	}
 
-	useEffect(() => {
-		if (publicKey || !open) {
-			return
-		}
-		// get public key
-		pb.send('/api/beszel/getkey', {}).then(({ key }) => {
-			$publicKey.set(key)
-		})
-	}, [open])
-
 	async function handleSubmit(e: SubmitEvent) {
 		e.preventDefault()
 		const formData = new FormData(e.target as HTMLFormElement)

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

@@ -1,30 +1,57 @@
 import { Suspense, lazy, useEffect } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { $hubVersion } from '@/lib/stores'
+import { useStore } from '@nanostores/react'
+import { GithubIcon } from 'lucide-react'
+import { Separator } from '../ui/separator'
 
 const SystemsTable = lazy(() => import('../systems-table/systems-table'))
 
 export default function () {
+	const hubVersion = useStore($hubVersion)
+
 	useEffect(() => {
 		document.title = 'Dashboard / Beszel'
 	}, [])
 
 	return (
-		<Card>
-			<CardHeader className="pb-2 md:pb-5 px-4 sm:px-7 max-sm:pt-5">
-				<CardTitle className="mb-1.5">All Systems</CardTitle>
-				<CardDescription>
-					Updated in real time. Press{' '}
-					<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-						<span className="text-xs">⌘</span>K
-					</kbd>{' '}
-					to open the command palette.
-				</CardDescription>
-			</CardHeader>
-			<CardContent className="max-sm:p-2">
-				<Suspense>
-					<SystemsTable />
-				</Suspense>
-			</CardContent>
-		</Card>
+		<>
+			<Card>
+				<CardHeader className="pb-2 md:pb-5 px-4 sm:px-7 max-sm:pt-5">
+					<CardTitle className="mb-1.5">All Systems</CardTitle>
+					<CardDescription>
+						Updated in real time. Press{' '}
+						<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+							<span className="text-xs">⌘</span>K
+						</kbd>{' '}
+						to open the command palette.
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="max-sm:p-2">
+					<Suspense>
+						<SystemsTable />
+					</Suspense>
+				</CardContent>
+			</Card>
+			{hubVersion && (
+				<div className="flex gap-1.5 justify-end items-center pr-3 sm:pr-7 mt-3.5 text-xs opacity-80">
+					<a
+						href="https://github.com/henrygd/beszel"
+						target="_blank"
+						className="flex items-center gap-0.5 text-muted-foreground hover:text-foreground duration-75"
+					>
+						<GithubIcon className="h-3 w-3" /> GitHub
+					</a>
+					<Separator orientation="vertical" className="h-3 bg-muted-foreground" />
+					<a
+						href="https://github.com/henrygd/beszel/releases"
+						target="_blank"
+						className="text-muted-foreground hover:text-foreground duration-75"
+					>
+						Beszel {hubVersion}
+					</a>
+				</div>
+			)}
+		</>
 	)
 }

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

@@ -55,10 +55,10 @@ import {
 	PauseCircleIcon,
 	PlayCircleIcon,
 	Trash2Icon,
-	Wifi,
+	WifiIcon,
 } from 'lucide-react'
 import { useMemo, useState } from 'react'
-import { $systems, pb } from '@/lib/stores'
+import { $hubVersion, $systems, pb } from '@/lib/stores'
 import { useStore } from '@nanostores/react'
 import { AddSystemButton } from '../add-system'
 import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils'
@@ -83,7 +83,12 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
 	)
 }
 
-function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Icon: any) {
+function sortableHeader(
+	column: Column<SystemRecord, unknown>,
+	name: string,
+	Icon: any,
+	hideSortIcon = false
+) {
 	return (
 		<Button
 			variant="ghost"
@@ -92,13 +97,14 @@ function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Ico
 		>
 			<Icon className="mr-2 h-4 w-4" />
 			{name}
-			<ArrowUpDown className="ml-2 h-4 w-4" />
+			{!hideSortIcon && <ArrowUpDown className="ml-2 h-4 w-4" />}
 		</Button>
 	)
 }
 
 export default function SystemsTable() {
 	const data = useStore($systems)
+	const hubVersion = useStore($hubVersion)
 	const [sorting, setSorting] = useState<SortingState>([])
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 
@@ -136,14 +142,6 @@ export default function SystemsTable() {
 				},
 				header: ({ column }) => sortableHeader(column, 'System', Server),
 			},
-			{
-				accessorKey: 'info.v',
-				cell: (info) => {
-					return(
-						<div>{info.getValue() as string}</div>)
-					},
-					header: ({ column }) => sortableHeader(column, 'Version', Wifi),
-			},
 			{
 				accessorKey: 'info.cpu',
 				cell: CellFormatter,
@@ -159,6 +157,29 @@ export default function SystemsTable() {
 				cell: CellFormatter,
 				header: ({ column }) => sortableHeader(column, 'Disk', HardDrive),
 			},
+			{
+				accessorKey: 'info.v',
+				size: 50,
+				cell: (info) => {
+					const version = info.getValue() as string
+					if (!version || !hubVersion) {
+						return null
+					}
+					return (
+						<span className="flex gap-2 items-center md:pr-5 tabular-nums pl-1.5">
+							<span
+								className={cn(
+									'w-2 h-2 left-0 rounded-full',
+									version === hubVersion ? 'bg-green-500' : 'bg-yellow-500'
+								)}
+								style={{ marginBottom: '-1px' }}
+							></span>
+							<span>{info.getValue() as string}</span>
+						</span>
+					)
+				},
+				header: ({ column }) => sortableHeader(column, 'Agent', WifiIcon, true),
+			},
 			{
 				id: 'actions',
 				size: 120,

beszel/site/src/lib/stores.ts

@@ -20,5 +20,8 @@ export const $alerts = atom([] as AlertRecord[])
 /** SSH public key */
 export const $publicKey = atom('')
 
+/** Beszel hub version */
+export const $hubVersion = atom('')
+
 /** Chart time period */
 export const $chartTime = atom('1h') as WritableAtom<ChartTimes>

beszel/site/src/main.tsx

@@ -3,7 +3,15 @@ import React, { Suspense, lazy, useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
 import Home from './components/routes/home.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
-import { $alerts, $authenticated, $updatedSystem, $systems, pb } from './lib/stores.ts'
+import {
+	$alerts,
+	$authenticated,
+	$updatedSystem,
+	$systems,
+	pb,
+	$publicKey,
+	$hubVersion,
+} from './lib/stores.ts'
 import { ModeToggle } from './components/mode-toggle.tsx'
 import {
 	cn,
@@ -16,7 +24,6 @@ import {
 import { buttonVariants } from './components/ui/button.tsx'
 import {
 	DatabaseBackupIcon,
-	GithubIcon,
 	LockKeyholeIcon,
 	LogOutIcon,
 	LogsIcon,
@@ -27,12 +34,6 @@ import {
 import { useStore } from '@nanostores/react'
 import { Toaster } from './components/ui/toaster.tsx'
 import { Logo } from './components/logo.tsx'
-import {
-	TooltipProvider,
-	Tooltip,
-	TooltipTrigger,
-	TooltipContent,
-} from '@/components/ui/tooltip.tsx'
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -60,6 +61,11 @@ const App = () => {
 		pb.authStore.onChange(() => {
 			$authenticated.set(pb.authStore.isValid)
 		})
+		// get version / public key
+		pb.send('/api/beszel/getkey', {}).then(({ key, v }) => {
+			$publicKey.set(key)
+			$hubVersion.set(v)
+		})
 		// get servers / alerts
 		updateSystemList()
 		updateAlerts()
@@ -137,24 +143,6 @@ const Layout = () => {
 
 					<div className={'flex ml-auto'}>
 						<ModeToggle />
-						<TooltipProvider delayDuration={300}>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<a
-										title={'Github'}
-										aria-label="Github repo"
-										href={'https://github.com/henrygd/beszel'}
-										target="_blank"
-										className={cn('', buttonVariants({ variant: 'ghost', size: 'icon' }))}
-									>
-										<GithubIcon className="h-[1.2rem] w-[1.2rem]" />
-									</a>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>Github Repository</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<button

beszel/site/src/types.d.ts

@@ -6,7 +6,7 @@ export interface SystemRecord extends RecordModel {
 	status: 'up' | 'down' | 'paused' | 'pending'
 	port: string
 	info: SystemInfo
-	agentVersion: string
+	v: string
 }
 
 export interface SystemInfo {