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

use same disk I/O chart component for root and extra fs

Browse Source
This commit is contained in:
Henry Dollman
2024-09-23 13:56:15 -04:00
parent 78a9086b55
commit 55d1c00903
3 changed files with 27 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,9 +17,11 @@ import { SystemStatsRecord } from '@/types'
export default function DiskIoChart({
ticks,
systemData,
dataKeys,
}: {
ticks: number[]
systemData: SystemStatsRecord[]
dataKeys: string[]
}) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
@@ -77,26 +79,21 @@ export default function DiskIoChart({
/>
}
/>
<Area
dataKey="stats.dw"
name="Write"
type="monotoneX"
fill="hsl(var(--chart-3))"
fillOpacity={0.3}
stroke="hsl(var(--chart-3))"
// animationDuration={1200}
isAnimationActive={false}
/>
<Area
dataKey="stats.dr"
name="Read"
type="monotoneX"
fill="hsl(var(--chart-1))"
fillOpacity={0.3}
stroke="hsl(var(--chart-1))"
// animationDuration={1200}
isAnimationActive={false}
/>
{dataKeys.map((dataKey, i) => {
const action = i ? 'Read' : 'Write'
const color = i ? 'hsl(var(--chart-1))' : 'hsl(var(--chart-3))'
return (
<Area
dataKey={dataKey}
name={action}
type="monotoneX"
fill={color}
fillOpacity={0.3}
stroke={color}
isAnimationActive={false}
/>
)
})}
</AreaChart>
</ChartContainer>
</div>

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

@@ -1,106 +0,0 @@
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
import {
useYAxisWidth,
chartTimeData,
cn,
formatShortDate,
toFixedWithoutTrailingZeros,
twoDecimalString,
} from '@/lib/utils'
// import Spinner from '../spinner'
import { useStore } from '@nanostores/react'
import { $chartTime } from '@/lib/stores'
import { SystemStatsRecord } from '@/types'
export default function ExFsDiskIoChart({
ticks,
systemData,
fs,
}: {
ticks: number[]
systemData: SystemStatsRecord[]
fs: string
}) {
const chartTime = useStore($chartTime)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
return (
<div>
{/* {!yAxisSet && <Spinner />} */}
<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={{
left: 0,
right: 0,
top: 10,
bottom: 0,
}}
>
<CartesianGrid vertical={false} />
<YAxis
className="tracking-tighter"
width={yAxisWidth}
// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
tickFormatter={(value) => {
const val = toFixedWithoutTrailingZeros(value, 2)
return updateYAxisWidth(val + ' MB/s')
}}
tickLine={false}
axisLine={false}
/>
<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) + ' MB/s'}
indicator="line"
/>
}
/>
<Area
dataKey={`stats.efs.${fs}.w`}
name="Write"
type="monotoneX"
fill="hsl(var(--chart-3))"
fillOpacity={0.3}
stroke="hsl(var(--chart-3))"
// animationDuration={1200}
isAnimationActive={false}
/>
<Area
dataKey={`stats.efs.${fs}.r`}
name="Read"
type="monotoneX"
fill="hsl(var(--chart-1))"
fillOpacity={0.3}
stroke="hsl(var(--chart-1))"
// animationDuration={1200}
isAnimationActive={false}
/>
</AreaChart>
</ChartContainer>
</div>
)
}

13
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 ExFsDiskIoChart = lazy(() => import('../charts/extra-fs-disk-io-chart'))
export default function SystemDetail({ name }: { name: string }) {
const systems = useStore($systems)
@@ -385,7 +384,11 @@ export default function SystemDetail({ name }: { name: string }) {
</ChartCard>
<ChartCard grid={grid} title="Disk I/O" description="Throughput of root filesystem">
<DiskIoChart ticks={ticks} systemData={systemStats} />
<DiskIoChart
ticks={ticks}
systemData={systemStats}
dataKeys={['stats.dw', 'stats.dr']}
/>
</ChartCard>
<ChartCard
@@ -443,7 +446,11 @@ export default function SystemDetail({ name }: { name: string }) {
title={`${extraFsName} I/O`}
description={`Throughput of of ${extraFsName}`}
>
<ExFsDiskIoChart ticks={ticks} systemData={systemStats} fs={extraFsName} />
<DiskIoChart
ticks={ticks}
systemData={systemStats}
dataKeys={[`stats.efs.${extraFsName}.w`, `stats.efs.${extraFsName}.r`]}
/>
</ChartCard>
</div>
)