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

responsive

Browse Source
This commit is contained in:
Henry Dollman
2024-07-21 18:05:49 -04:00
parent ea9a65ad9c
commit cff312a408
2 changed files with 17 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
hub/site/src/components/charts/chart-time-select.tsx
View File

@@ -19,7 +19,7 @@ export default function ChartTimeSelect({ className }: { className?: string }) {
value={chartTime} value={chartTime}
onValueChange={(value: ChartTimes) => $chartTime.set(value)} onValueChange={(value: ChartTimes) => $chartTime.set(value)}
> >
<SelectTrigger className={cn(className, 'w-40 px-5')}> <SelectTrigger className={cn(className, 'px-5')}>
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>

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

@@ -201,9 +201,9 @@ export default function ServerDetail({ name }: { name: string }) {
return ( return (
<div className="grid gap-4 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-2 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>
<div className="flex flex-wrap items-center gap-3 text-sm opacity-90"> <div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
<div className="capitalize flex gap-2 items-center"> <div className="capitalize flex gap-2 items-center">
<span className={cn('relative flex h-3 w-3')}> <span className={cn('relative flex h-3 w-3')}>
{server.status === 'up' && ( {server.status === 'up' && (
@@ -224,16 +224,16 @@ export default function ServerDetail({ name }: { name: string }) {
{server.status} {server.status}
</div> </div>
<Separator orientation="vertical" className="h-4 bg-primary/30" /> <Separator orientation="vertical" className="h-4 bg-primary/30" />
<div className="flex gap-1.5 items-center"> <div className="flex gap-1.5">
<GlobeIcon className="h-4 w-4" /> {server.host} <GlobeIcon className="h-4 w-4 mt-[1px]" /> {server.host}
</div> </div>
{server.info?.u && ( {server.info?.u && (
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<Separator orientation="vertical" className="h-4 bg-primary/30" /> <Separator orientation="vertical" className="h-4 bg-primary/30" />
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div className="flex gap-1.5 items-center"> <div className="flex gap-1.5">
<ClockArrowUp className="h-4 w-4" /> {uptime} <ClockArrowUp className="h-4 w-4 mt-[1px]" /> {uptime}
</div> </div>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Uptime</TooltipContent> <TooltipContent>Uptime</TooltipContent>
@@ -243,8 +243,8 @@ export default function ServerDetail({ name }: { name: string }) {
{server.info?.m && ( {server.info?.m && (
<> <>
<Separator orientation="vertical" className="h-4 bg-primary/30" /> <Separator orientation="vertical" className="h-4 bg-primary/30" />
<div className="flex gap-1.5 items-center"> <div className="flex gap-1.5">
<CpuIcon className="h-4 w-4" /> <CpuIcon className="h-4 w-4 mt-[1px]" />
{server.info.m} ({server.info.c}c / {server.info.t}t) {server.info.m} ({server.info.c}c / {server.info.t}t)
</div> </div>
</> </>
@@ -253,10 +253,7 @@ export default function ServerDetail({ name }: { name: string }) {
</div> </div>
</Card> </Card>
<ChartCard <ChartCard title="Total CPU Usage" description="Average system-wide CPU utilization">
title="Total CPU Usage"
description="Average system-wide CPU utilization as a percentage"
>
<CpuChart chartData={cpuChartData} ticks={ticks} /> <CpuChart chartData={cpuChartData} ticks={ticks} />
</ChartCard> </ChartCard>
@@ -283,14 +280,11 @@ export default function ServerDetail({ name }: { name: string }) {
<DiskChart chartData={diskChartData} ticks={ticks} /> <DiskChart chartData={diskChartData} ticks={ticks} />
</ChartCard> </ChartCard>
<ChartCard <ChartCard title="Disk I/O" description="Throughput of root filesystem">
title="Disk I/O"
description="Throughput of disk where the root filesystem is mounted"
>
<DiskIoChart chartData={diskIoChartData} ticks={ticks} /> <DiskIoChart chartData={diskIoChartData} ticks={ticks} />
</ChartCard> </ChartCard>
<ChartCard title="Bandwidth" description="Throughput of network interfaces"> <ChartCard title="Bandwidth" description="Network traffic of public interfaces">
<BandwidthChart chartData={bandwidthChartData} ticks={ticks} /> <BandwidthChart chartData={bandwidthChartData} ticks={ticks} />
</ChartCard> </ChartCard>
</div> </div>
@@ -308,12 +302,12 @@ function ChartCard({
}) { }) {
return ( return (
<Card className="pb-4 col-span-full"> <Card className="pb-4 col-span-full">
<CardHeader className="pb-5 pt-4"> <CardHeader className="pb-5 pt-4 relative space-y-1">
<CardTitle className="flex gap-2 items-center justify-between -mb-1.5"> <CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
{title}
<ChartTimeSelect className="translate-y-1" />
</CardTitle>
<CardDescription>{description}</CardDescription> <CardDescription>{description}</CardDescription>
<div className="w-full pt-1 sm:w-40 sm:absolute top-1.5 right-3.5">
<ChartTimeSelect />
</div>
</CardHeader> </CardHeader>
<CardContent className={'pl-1 w-[calc(100%-1.6em)] h-52 relative'}> <CardContent className={'pl-1 w-[calc(100%-1.6em)] h-52 relative'}>
<Suspense fallback={<Spinner />}>{children}</Suspense> <Suspense fallback={<Spinner />}>{children}</Suspense>