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

use same disk usage chart component for root and extra fs

Browse Source
This commit is contained in:
Henry Dollman
2024-09-23 13:42:44 -04:00
parent 4ee169fea5
commit 78a9086b55
3 changed files with 30 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
beszel/site/src/components/charts/disk-chart.tsx
View File

@@ -1,8 +1,17 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
import { useMemo } from 'react'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
twoDecimalString,
toFixedFloat,
getSizeVal,
getSizeUnit,
} from '@/lib/utils'
// import { useMemo } from 'react'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
@@ -11,17 +20,17 @@ import { SystemStatsRecord } from '@/types'
export default function DiskChart({
ticks,
systemData,
dataKey,
diskSize,
}: {
ticks: number[]
systemData: SystemStatsRecord[]
dataKey: string
diskSize: number
}) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const diskSize = useMemo(() => {
return Math.round(systemData.at(-1)?.stats.d ?? NaN)
}, [systemData])
return (
<div>
{/* {!yAxisSet && <Spinner />} */}
@@ -51,8 +60,8 @@ export default function DiskChart({
tickLine={false}
axisLine={false}
tickFormatter={(value) =>
updateYAxisWidth(toFixedFloat(getSizeVal(value), 2) + getSizeUnit(value))
}
updateYAxisWidth(toFixedFloat(getSizeVal(value), 2) + getSizeUnit(value))
}
/>
<XAxis
dataKey="created"
@@ -79,7 +88,7 @@ updateYAxisWidth(toFixedFloat(getSizeVal(value), 2) + getSizeUnit(value))
}
/>
<Area
dataKey="stats.du"
dataKey={dataKey}
name="Disk Usage"
type="monotoneX"
fill="hsl(var(--chart-4))"

89
beszel/site/src/components/charts/extra-fs-disk-chart.tsx
View File

@@ -1,89 +0,0 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
import { useMemo } from 'react'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
export default function ExFsDiskChart({
ticks,
systemData,
fs,
}: {
ticks: number[]
systemData: SystemStatsRecord[]
fs: string
}) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const diskSize = useMemo(() => {
const size = systemData.at(-1)?.stats.efs?.[fs].d ?? 0
return size > 10 ? Math.round(size) : size
}, [systemData])
return (
<div>
<ChartContainer
config={{}}
className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
'opacity-100': yAxisWidth,
})}
>
<AreaChart
accessibilityLayer
data={systemData}
margin={{
top: 10,
}}
>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
width={yAxisWidth}
domain={[0, diskSize]}
tickCount={9}
minTickGap={6}
tickLine={false}
axisLine={false}
tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
/>
<XAxis
dataKey="created"
domain={[ticks[0], ticks.at(-1)!]}
ticks={ticks}
type="number"
scale={'time'}
minTickGap={35}
tickMargin={8}
axisLine={false}
tickFormatter={chartTimeData[chartTime].format}
/>
<ChartTooltip
animationEasing="ease-out"
animationDuration={150}
content={
<ChartTooltipContent
labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
contentFormatter={(item) => twoDecimalString(item.value) + ' GB'}
indicator="line"
/>
}
/>
<Area
dataKey={`stats.efs.${fs}.du`}
name="Disk Usage"
type="monotoneX"
fill="hsl(var(--chart-4))"
fillOpacity={0.4}
stroke="hsl(var(--chart-4))"
isAnimationActive={false}
/>
</AreaChart>
</ChartContainer>
</div>
)
}

15
beszel/site/src/components/routes/system.tsx
View File

@@ -38,7 +38,6 @@ const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
const SwapChart = lazy(() => import('../charts/swap-chart'))
const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
const ExFsDiskChart = lazy(() => import('../charts/extra-fs-disk-chart'))
const ExFsDiskIoChart = lazy(() => import('../charts/extra-fs-disk-io-chart'))
export default function SystemDetail({ name }: { name: string }) {
@@ -377,7 +376,12 @@ export default function SystemDetail({ name }: { name: string }) {
)}
<ChartCard grid={grid} title="Disk Space" description="Usage of root partition">
<DiskChart ticks={ticks} systemData={systemStats} />
<DiskChart
ticks={ticks}
systemData={systemStats}
dataKey="stats.du"
diskSize={Math.round(systemStats.at(-1)?.stats.d ?? NaN)}
/>
</ChartCard>
<ChartCard grid={grid} title="Disk I/O" description="Throughput of root filesystem">
@@ -427,7 +431,12 @@ export default function SystemDetail({ name }: { name: string }) {
title={`${extraFsName} Usage`}
description={`Disk usage of ${extraFsName}`}
>
<ExFsDiskChart ticks={ticks} systemData={systemStats} fs={extraFsName} />
<DiskChart
ticks={ticks}
systemData={systemStats}
dataKey={`stats.efs.${extraFsName}.du`}
diskSize={Math.round(systemStats.at(-1)?.stats.efs?.[extraFsName].d ?? NaN)}
/>
</ChartCard>
<ChartCard
grid={grid}