diff --git a/beszel/site/src/components/charts/area-chart.tsx b/beszel/site/src/components/charts/area-chart.tsx index b321ee2..b7b13de 100644 --- a/beszel/site/src/components/charts/area-chart.tsx +++ b/beszel/site/src/components/charts/area-chart.tsx @@ -35,6 +35,7 @@ export default memo(function AreaChartDefault({ chartData, max, tickFormatter, + contentFormatter, }: { maxToggled?: boolean unit?: string @@ -42,6 +43,7 @@ export default memo(function AreaChartDefault({ chartData: ChartData max?: number tickFormatter?: (value: number) => string + contentFormatter?: (value: number) => string }) { const { yAxisWidth, updateYAxisWidth } = useYAxisWidth() const { i18n } = useLingui() @@ -115,7 +117,12 @@ export default memo(function AreaChartDefault({ content={ formatShortDate(data[0].payload.created)} - contentFormatter={(item) => decimalString(item.value) + unit} + contentFormatter={({ value }) => { + if (contentFormatter) { + return contentFormatter(value) + } + return decimalString(value) + unit + }} // indicator="line" /> } diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index a9b3185..27aa66f 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -125,7 +125,7 @@ export default function SystemDetail({ name }: { name: string }) { document.title = `${name} / Beszel` return () => { if (!persistChartTime.current) { - $chartTime.set($userSettings.get().chartTime) + $chartTime.set($userSettings.get().chartTime) } persistChartTime.current = false setSystemStats([]) @@ -294,7 +294,7 @@ export default function SystemDetail({ name }: { name: string }) { const distanceToBottom = wrapperRect.bottom - chartRect.bottom setBottomSpacing(tooltipHeight - distanceToBottom) }, [netCardRef, containerData]) - + // keyboard navigation between systems useEffect(() => { if (!systems.length) { @@ -304,8 +304,8 @@ export default function SystemDetail({ name }: { name: string }) { if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) { return } - const currentIndex = systems.findIndex(s => s.name === name) - if (currentIndex === -1 || systems.length <= 1) { + const currentIndex = systems.findIndex((s) => s.name === name) + if (currentIndex === -1 || systems.length <= 1) { return } switch (e.key) { @@ -313,12 +313,12 @@ export default function SystemDetail({ name }: { name: string }) { case "h": const prevIndex = (currentIndex - 1 + systems.length) % systems.length persistChartTime.current = true - return navigate(getPagePath($router, "system", { name: systems[prevIndex].name})) + return navigate(getPagePath($router, "system", { name: systems[prevIndex].name })) case "ArrowRight": case "l": const nextIndex = (currentIndex + 1) % systems.length persistChartTime.current = true - return navigate(getPagePath($router, "system", { name: systems[nextIndex].name})) + return navigate(getPagePath($router, "system", { name: systems[nextIndex].name })) } } return listen(document, "keyup", handleKeyUp) @@ -555,6 +555,10 @@ export default function SystemDetail({ name }: { name: string }) {
{Object.keys(systemStats.at(-1)?.stats.g ?? {}).map((id) => { const gpu = systemStats.at(-1)?.stats.g?.[id] as GPUData + const sizeFormatter = (value: number, decimals?: number) => { + const { v, u } = getSizeAndUnit(value, false) + return toFixedFloat(v, decimals || 1) + u + } return (
{ - const { v, u } = getSizeAndUnit(value, false) - return toFixedFloat(v, 1) + u - }} + tickFormatter={sizeFormatter} + contentFormatter={(value) => sizeFormatter(value, 2)} />
diff --git a/beszel/site/src/components/systems-table/systems-table.tsx b/beszel/site/src/components/systems-table/systems-table.tsx index 993aee6..c41d695 100644 --- a/beszel/site/src/components/systems-table/systems-table.tsx +++ b/beszel/site/src/components/systems-table/systems-table.tsx @@ -554,7 +554,7 @@ const SystemTableRow = memo( ))} ) - }, [system, colLength, t]) + }, [system, system.status, colLength, t]) } ) @@ -627,9 +627,9 @@ const ActionsButton = memo(({ system }: { system: SystemRecord }) => { const [editOpen, setEditOpen] = useState(false) let editOpened = useRef(false) const { t } = useLingui() + const { id, status, host, name } = system return useMemo(() => { - const { id, status, host, name } = system return ( <> @@ -717,7 +717,7 @@ const ActionsButton = memo(({ system }: { system: SystemRecord }) => { ) - }, [system.id, t, deleteOpen, editOpen]) + }, [id, status, host, name, t, deleteOpen, editOpen]) }) function IndicatorDot({ system, className }: { system: SystemRecord; className?: ClassValue }) {