fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 17:59:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

site charts and style updates

Browse Source
This commit is contained in:
Henry Dollman
2024-07-21 13:38:57 -04:00
parent 80e322d3d5
commit 1b7724017d
10 changed files with 38 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
hub/site/src/components/charts/bandwidth-chart.tsx
View File

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

4
hub/site/src/components/charts/cpu-chart.tsx
View File

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

4
hub/site/src/components/charts/disk-chart.tsx
View File

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

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

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

11
hub/site/src/components/charts/mem-chart.tsx
View File

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

16
hub/site/src/components/command-palette.tsx
View File

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

2
hub/site/src/components/routes/home.tsx
View File

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

2
hub/site/src/components/routes/server.tsx
View File

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

2
hub/site/src/components/server-table/systems-table.tsx
View File

@@ -73,7 +73,7 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {
<span <span
className={cn( className={cn(
'absolute inset-0 w-full h-full origin-left', '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}%)` }} style={{ transform: `scalex(${val}%)` }}
></span> ></span>

14
hub/site/src/main.tsx
View File

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