Skip to content

Commit

Permalink
fix(hostd): home metrics graph width
Browse files Browse the repository at this point in the history
  • Loading branch information
alexfreska committed Nov 27, 2024
1 parent a95d6cc commit 9148f49
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 42 deletions.
5 changes: 5 additions & 0 deletions .changeset/green-baboons-sip.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'hostd': patch
---

Fixed an issue where the metrics graphs were much wider than the screen. Closes https://github.com/SiaFoundation/hostd/issues/500
5 changes: 5 additions & 0 deletions .changeset/spotty-chefs-hang.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@siafoundation/design-system': patch
---

Fixed a bug with ScrollArea where it would adopt its contents width.
2 changes: 1 addition & 1 deletion apps/hostd/components/Home/HomeBandwidth.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { useMetrics } from '../../contexts/metrics'
export function HomeBandwidth() {
const { bandwidth } = useMetrics()
return (
<div className="flex flex-col gap-3 flex-1 overflow-hidden">
<div className="flex flex-col gap-3 flex-1">
<Heading>Bandwidth</Heading>
<DatumScrollArea>
<DatumCardConfigurable
Expand Down
74 changes: 36 additions & 38 deletions apps/hostd/components/Home/HomeOperations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,46 +11,44 @@ import { useMetrics } from '../../contexts/metrics'
export function HomeOperations() {
const { operations } = useMetrics()
return (
<div className="flex gap-3">
<div className="flex flex-col gap-3 flex-1 overflow-hidden">
<Heading>Operations</Heading>
<DatumScrollArea>
<DatumCardConfigurable
category="operations"
label="storage reads"
color={operations.config.data['storageReads'].color}
value={operations.stats['storageReads']}
defaultMode="total"
isLoading={operations.isLoading}
enabledModes={['total', 'average', 'latest']}
valueFormat={humanNumber}
/>
<DatumCardConfigurable
category="operations"
label="storage writes"
color={operations.config.data['storageWrites'].color}
value={operations.stats['storageWrites']}
defaultMode="total"
isLoading={operations.isLoading}
enabledModes={['total', 'average', 'latest']}
valueFormat={humanNumber}
/>
</DatumScrollArea>
<ChartXY
id="hostd/v0/metrics/graphs/operations"
height={300}
data={operations.data}
config={operations.config}
<div className="flex flex-col gap-3 flex-1">
<Heading>Operations</Heading>
<DatumScrollArea>
<DatumCardConfigurable
category="operations"
label="storage reads"
color={operations.config.data['storageReads'].color}
value={operations.stats['storageReads']}
defaultMode="total"
isLoading={operations.isLoading}
actionsLeft={
<>
<Text font="mono" weight="semibold">
Operations
</Text>
</>
}
enabledModes={['total', 'average', 'latest']}
valueFormat={humanNumber}
/>
</div>
<DatumCardConfigurable
category="operations"
label="storage writes"
color={operations.config.data['storageWrites'].color}
value={operations.stats['storageWrites']}
defaultMode="total"
isLoading={operations.isLoading}
enabledModes={['total', 'average', 'latest']}
valueFormat={humanNumber}
/>
</DatumScrollArea>
<ChartXY
id="hostd/v0/metrics/graphs/operations"
height={300}
data={operations.data}
config={operations.config}
isLoading={operations.isLoading}
actionsLeft={
<>
<Text font="mono" weight="semibold">
Operations
</Text>
</>
}
/>
</div>
)
}
2 changes: 1 addition & 1 deletion apps/hostd/components/Home/HomeStorage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { useMetrics } from '../../contexts/metrics'
export function HomeStorage() {
const { storage } = useMetrics()
return (
<div className="flex flex-col gap-3 flex-1 overflow-hidden">
<div className="flex flex-col gap-3 flex-1">
<Heading>Storage</Heading>
<DatumScrollArea>
<DatumCardConfigurable
Expand Down
6 changes: 4 additions & 2 deletions libs/design-system/src/core/ScrollArea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,10 @@ export const ScrollArea = React.forwardRef<
<ScrollAreaPrimitive.Viewport
id={id}
ref={ref}
// Temporary fix until removed upstream: https://github.com/radix-ui/primitives/issues/926
className="w-full h-full [&>div]:!block [&>div]:!h-full"
// Part 1: Temporary fix until removed upstream: https://github.com/radix-ui/primitives/issues/926
// Part 2: After updating radix there was an issues where it would adopt its contents width.
// The following fixed that: https://github.com/radix-ui/primitives/issues/3129
className="w-full h-full [&>div]:!min-w-0 [&>div]:!h-full"
>
{children}
</ScrollAreaPrimitive.Viewport>
Expand Down

0 comments on commit 9148f49

Please sign in to comment.