Skip to content

Commit 810877d

Browse files
asuzuki-jumptradingasuzuki-jumptrading
committed
chore: use ws values for gossip startup
1 parent 5190db8 commit 810877d

File tree

6 files changed

+142
-80
lines changed

6 files changed

+142
-80
lines changed

‎src/features/StartupProgress/Firedancer/Bars.tsx‎

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { Flex, Text } from "@radix-ui/themes";
2-
31
import styles from "./bars.module.css";
42
import clsx from "clsx";
53
import { useMeasure } from "react-use";
@@ -26,36 +24,33 @@ export function Bars({ title, value, max }: BarsProps) {
2624
const usedWidth = barCount * (barWidth + barGap);
2725

2826
return (
29-
<Flex direction="column" gap="10px" className={styles.barsContainer}>
30-
{title && <Text className={styles.title}>{title}</Text>}
31-
<svg
32-
ref={ref}
33-
preserveAspectRatio="none"
34-
width="100%"
35-
viewBox={`0 0 ${usedWidth} ${viewBoxHeight}`}
36-
xmlns="http://www.w3.org/2000/svg"
37-
>
38-
{Array.from({ length: barCount }, (_, i) => {
39-
const isHigh = i >= barCount * 0.95;
40-
const isMid = !isHigh && i >= barCount * 0.85;
41-
42-
return (
43-
<rect
44-
key={i}
45-
x={i * (usedWidth / barCount)}
46-
width={barWidth}
47-
height={viewBoxHeight}
48-
ry={barWidth * 2}
49-
className={clsx({
50-
[styles.threshold]: i === currentIndex,
51-
[styles.filled]: i < currentIndex,
52-
[styles.high]: isHigh,
53-
[styles.mid]: isMid,
54-
})}
55-
/>
56-
);
57-
})}
58-
</svg>
59-
</Flex>
27+
<svg
28+
ref={ref}
29+
preserveAspectRatio="none"
30+
width="100%"
31+
viewBox={`0 0 ${usedWidth} ${viewBoxHeight}`}
32+
xmlns="http://www.w3.org/2000/svg"
33+
>
34+
{Array.from({ length: barCount }, (_, i) => {
35+
const isHigh = i >= barCount * 0.95;
36+
const isMid = !isHigh && i >= barCount * 0.85;
37+
38+
return (
39+
<rect
40+
key={i}
41+
x={i * (usedWidth / barCount)}
42+
width={barWidth}
43+
height={viewBoxHeight}
44+
ry={barWidth * 2}
45+
className={clsx({
46+
[styles.threshold]: i === currentIndex,
47+
[styles.filled]: i < currentIndex,
48+
[styles.high]: isHigh,
49+
[styles.mid]: isMid,
50+
})}
51+
/>
52+
);
53+
})}
54+
</svg>
6055
);
6156
}

‎src/features/StartupProgress/Firedancer/GossipProgress.tsx‎

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,71 @@ import styles from "./gossip.module.css";
44
import { Bars } from "./Bars";
55
import { useAtomValue } from "jotai";
66
import { gossipNetworkStatsAtom } from "../../../api/atoms";
7+
import { formatBytesAsBits, getFmtStake } from "../../../utils";
8+
9+
const MAX_THROUGHPUT_BYTES = 1_8750_000; // 150Mbit
710

811
export function GossipProgress() {
912
const networkStats = useAtomValue(gossipNetworkStatsAtom);
1013
if (!networkStats) return null;
1114

12-
const { health } = networkStats;
15+
const { health, ingress, egress } = networkStats;
16+
17+
const connectedStake =
18+
health.connected_stake == null ? null : getFmtStake(health.connected_stake);
19+
20+
const ingressThroughput =
21+
ingress.total_throughput == null
22+
? undefined
23+
: formatBytesAsBits(ingress.total_throughput);
24+
25+
const egressThroughput =
26+
egress.total_throughput == null
27+
? undefined
28+
: formatBytesAsBits(egress.total_throughput);
1329

1430
return (
1531
<Flex gapX="162px">
1632
<Flex direction="column" gap="20px">
1733
<Flex justify="between" gap="20px" align="stretch">
1834
<GossipCard
1935
title="Staked Peers"
20-
value={health.connected_staked_peers ?? null}
36+
value={health.connected_staked_peers}
2137
/>
2238
<GossipCard
2339
title="Unstaked Peers"
24-
value={health.connected_unstaked_peers ?? null}
40+
value={health.connected_unstaked_peers}
2541
/>
26-
<GossipCard title="Snapshot Peers" value={0} />
42+
<GossipCard title="Connected Stake" value={connectedStake} />
2743
</Flex>
2844

29-
<Bars title="Ingress" value={19} max={20} />
30-
<Bars title="Egress" value={5} max={20} />
45+
<Flex direction="column" gap="10px">
46+
<Text className={styles.barTitle}>Ingress</Text>
47+
<Text className={styles.barValue}>
48+
{ingressThroughput
49+
? `${ingressThroughput.value} ${ingressThroughput.unit}`
50+
: "-- Mbit"}
51+
</Text>
52+
<Bars
53+
title="Ingress"
54+
value={ingress.total_throughput ?? 0}
55+
max={MAX_THROUGHPUT_BYTES}
56+
/>
57+
</Flex>
58+
59+
<Flex direction="column" gap="10px">
60+
<Text className={styles.barTitle}>Egress</Text>
61+
<Text className={styles.barValue}>
62+
{egressThroughput
63+
? `${egressThroughput.value} ${egressThroughput.unit}`
64+
: "-- Mbit"}
65+
</Text>
66+
<Bars
67+
title="Egress"
68+
value={egress.total_throughput ?? 0}
69+
max={MAX_THROUGHPUT_BYTES}
70+
/>
71+
</Flex>
3172
</Flex>
3273
<Text>Stake Discovered</Text>
3374
</Flex>
@@ -36,7 +77,7 @@ export function GossipProgress() {
3677

3778
interface GossipCardProps {
3879
title: string;
39-
value: number | null;
80+
value?: number | string | null;
4081
}
4182
function GossipCard({ title, value }: GossipCardProps) {
4283
return (

‎src/features/StartupProgress/Firedancer/SnapshotLoadingCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import byteSize from "byte-size";
55
import clsx from "clsx";
66
import { Bars } from "./Bars";
77

8-
const MAX_THROUGHPUT = 300000000;
8+
const MAX_THROUGHPUT = 300_000_000;
99

1010
interface SnapshotLoadingCardProps {
1111
title: string;

‎src/features/StartupProgress/Firedancer/bars.module.css‎

Lines changed: 24 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,33 @@
1-
.bars-container {
2-
color: var(--boot-progress-primary-text-color);
3-
font-size: 18px;
4-
font-style: normal;
5-
font-weight: 400;
6-
line-height: normal;
1+
svg {
2+
width: 100%;
3+
height: 77px;
74

8-
.title {
9-
font-size: 28px;
10-
font-style: normal;
11-
font-weight: 400;
12-
line-height: normal;
13-
}
14-
15-
svg {
16-
width: 100%;
17-
height: 77px;
5+
rect {
6+
fill: var(--boot-progress-gossip-bars-color);
7+
&.threshold {
8+
fill: var(--app-teal);
9+
}
10+
&.filled {
11+
fill: var(--boot-progress-gossip-filled-bar-color);
12+
}
1813

19-
rect {
20-
fill: var(--boot-progress-gossip-bars-color);
21-
&.threshold {
22-
fill: var(--app-teal);
23-
}
14+
&.mid {
15+
fill: var(--boot-progress-gossip-mid-bar-color);
2416
&.filled {
25-
fill: var(--boot-progress-gossip-filled-bar-color);
17+
fill: var(--boot-progress-gossip-mid-filled-bar-color);
2618
}
27-
28-
&.mid {
29-
fill: var(--boot-progress-gossip-mid-bar-color);
30-
&.filled {
31-
fill: var(--boot-progress-gossip-mid-filled-bar-color);
32-
}
33-
&.threshold {
34-
fill: var(--boot-progress-gossip-mid-threshold-bar-color);
35-
}
19+
&.threshold {
20+
fill: var(--boot-progress-gossip-mid-threshold-bar-color);
3621
}
22+
}
3723

38-
&.high {
39-
fill: var(--boot-progress-gossip-high-bar-color);
40-
&.filled {
41-
fill: var(--boot-progress-gossip-high-filled-bar-color);
42-
}
43-
&.threshold {
44-
fill: var(--boot-progress-gossip-high-threshold-bar-color);
45-
}
24+
&.high {
25+
fill: var(--boot-progress-gossip-high-bar-color);
26+
&.filled {
27+
fill: var(--boot-progress-gossip-high-filled-bar-color);
28+
}
29+
&.threshold {
30+
fill: var(--boot-progress-gossip-high-threshold-bar-color);
4631
}
4732
}
4833
}

‎src/features/StartupProgress/Firedancer/gossip.module.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,19 @@
2222
line-height: normal;
2323
}
2424
}
25+
26+
.bar-title {
27+
color: var(--boot-progress-primary-text-color);
28+
font-size: 28px;
29+
font-style: normal;
30+
font-weight: 400;
31+
line-height: normal;
32+
}
33+
34+
.bar-value {
35+
color: var(--boot-progress-primary-text-color);
36+
font-size: 18px;
37+
font-style: normal;
38+
font-weight: 400;
39+
line-height: normal;
40+
}

‎src/utils.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,28 @@ export function copyToClipboard(copyValue: string) {
145145
document.body.removeChild(copyEl);
146146
}
147147
}
148+
149+
export function formatBytesAsBits(bytes: number): {
150+
value: number;
151+
unit: string;
152+
} {
153+
const bits = bytes * 8;
154+
if (bits < 1_000) return { value: bits, unit: "bit" };
155+
if (bits < 1_000_000)
156+
return { value: getRoundedBitsValue(bits / 1_000), unit: "Kbit" };
157+
if (bits < 1_000_000_000) {
158+
return { value: getRoundedBitsValue(bits / 1_000_000), unit: "Mbit" };
159+
}
160+
161+
return { value: getRoundedBitsValue(bits / 1_000_000_000), unit: "Gbit" };
162+
}
163+
164+
/**
165+
* Round to 1 decimal place if value is <= 10, otherwise round to nearest integer
166+
*/
167+
function getRoundedBitsValue(value: number) {
168+
if (value >= 9.5) return Math.round(value);
169+
170+
// 1 decimal place
171+
return Math.round(value * 10) / 10;
172+
}

0 commit comments

Comments
 (0)