|
7 | 7 | HelpTooltipTitle,
|
8 | 8 | }from"components/HelpTooltip/HelpTooltip";
|
9 | 9 | import{Stack}from"components/Stack/Stack";
|
10 |
| -import{TooltipProvider,TooltipTrigger}from"components/Tooltip/Tooltip"; |
| 10 | +import{TooltipTrigger}from"components/Tooltip/Tooltip"; |
11 | 11 | importtype{FC}from"react";
|
12 | 12 | import{getLatencyColor}from"utils/latency";
|
13 | 13 |
|
@@ -43,45 +43,43 @@ export const AgentLatency: FC<AgentLatencyProps> = ({ agent }) => {
|
43 | 43 | }
|
44 | 44 |
|
45 | 45 | return(
|
46 |
| -<TooltipProvider> |
47 |
| -<HelpTooltip> |
48 |
| -<TooltipTriggerasChild> |
49 |
| -<span |
50 |
| -role="presentation" |
51 |
| -aria-label="latency" |
52 |
| -css={{cursor:"pointer",color:latency.color}} |
53 |
| -> |
54 |
| -{Math.round(latency.latency_ms)}ms |
55 |
| -</span> |
56 |
| -</TooltipTrigger> |
57 |
| -<HelpTooltipContent> |
58 |
| -<HelpTooltipTitle>Latency</HelpTooltipTitle> |
59 |
| -<HelpTooltipText> |
60 |
| -This is the latency overhead on non peer to peer connections. The |
61 |
| -first row is the preferred relay. |
62 |
| -</HelpTooltipText> |
63 |
| -<Stackdirection="column"spacing={1}css={{marginTop:16}}> |
64 |
| -{Object.entries(agent.latency) |
65 |
| -.sort(([,a],[,b])=>a.latency_ms-b.latency_ms) |
66 |
| -.map(([regionName,region])=>( |
67 |
| -<Stack |
68 |
| -direction="row" |
69 |
| -key={regionName} |
70 |
| -spacing={0.5} |
71 |
| -justifyContent="space-between" |
72 |
| -css={ |
73 |
| -region.preferred&&{ |
74 |
| -color:theme.palette.text.primary, |
75 |
| -} |
| 46 | +<HelpTooltip> |
| 47 | +<TooltipTriggerasChild> |
| 48 | +<span |
| 49 | +role="presentation" |
| 50 | +aria-label="latency" |
| 51 | +css={{cursor:"pointer",color:latency.color}} |
| 52 | +> |
| 53 | +{Math.round(latency.latency_ms)}ms |
| 54 | +</span> |
| 55 | +</TooltipTrigger> |
| 56 | +<HelpTooltipContent> |
| 57 | +<HelpTooltipTitle>Latency</HelpTooltipTitle> |
| 58 | +<HelpTooltipText> |
| 59 | +This is the latency overhead on non peer to peer connections. The |
| 60 | +first row is the preferred relay. |
| 61 | +</HelpTooltipText> |
| 62 | +<Stackdirection="column"spacing={1}css={{marginTop:16}}> |
| 63 | +{Object.entries(agent.latency) |
| 64 | +.sort(([,a],[,b])=>a.latency_ms-b.latency_ms) |
| 65 | +.map(([regionName,region])=>( |
| 66 | +<Stack |
| 67 | +direction="row" |
| 68 | +key={regionName} |
| 69 | +spacing={0.5} |
| 70 | +justifyContent="space-between" |
| 71 | +css={ |
| 72 | +region.preferred&&{ |
| 73 | +color:theme.palette.text.primary, |
76 | 74 | }
|
77 |
| -> |
78 |
| -<strong>{regionName}</strong> |
79 |
| -{Math.round(region.latency_ms)}ms |
80 |
| -</Stack> |
81 |
| -))} |
82 |
| -</Stack> |
83 |
| -</HelpTooltipContent> |
84 |
| -</HelpTooltip> |
85 |
| -</TooltipProvider> |
| 75 | +} |
| 76 | +> |
| 77 | +<strong>{regionName}</strong> |
| 78 | +{Math.round(region.latency_ms)}ms |
| 79 | +</Stack> |
| 80 | +))} |
| 81 | +</Stack> |
| 82 | +</HelpTooltipContent> |
| 83 | +</HelpTooltip> |
86 | 84 | );
|
87 | 85 | };
|