1- import { useRef , useState , FC } from "react" ;
2- import { makeStyles , useTheme } from "@mui/styles " ;
1+ import { type FC , useRef , useState } from "react" ;
2+ import { useTheme } from "@emotion/react " ;
33import { Theme } from "@mui/material/styles" ;
4+ import type { WorkspaceAgent , DERPRegion } from "api/typesGenerated" ;
45import {
56HelpTooltipText ,
67HelpPopover ,
78HelpTooltipTitle ,
89} from "components/HelpTooltip/HelpTooltip" ;
910import { Stack } from "components/Stack/Stack" ;
10- import { WorkspaceAgent , DERPRegion } from "api/typesGenerated" ;
1111import { getLatencyColor } from "utils/latency" ;
1212
1313const getDisplayLatency = ( theme :Theme , agent :WorkspaceAgent ) => {
@@ -30,12 +30,11 @@ const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
3030} ;
3131
3232export const AgentLatency :FC < { agent :WorkspaceAgent } > = ( { agent} ) => {
33- const theme : Theme = useTheme ( ) ;
33+ const theme = useTheme ( ) ;
3434const anchorRef = useRef < HTMLButtonElement > ( null ) ;
3535const [ isOpen , setIsOpen ] = useState ( false ) ;
3636const id = isOpen ?"latency-popover" :undefined ;
3737const latency = getDisplayLatency ( theme , agent ) ;
38- const styles = useStyles ( ) ;
3938
4039if ( ! latency || ! agent . latency ) {
4140return null ;
@@ -49,8 +48,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
4948ref = { anchorRef }
5049onMouseEnter = { ( ) => setIsOpen ( true ) }
5150onMouseLeave = { ( ) => setIsOpen ( false ) }
52- className = { styles . trigger }
53- style = { { color :latency . color } }
51+ css = { { cursor :"pointer" , color :latency . color } }
5452>
5553{ Math . round ( Math . round ( latency . latency_ms ) ) } ms
5654</ span >
@@ -67,7 +65,11 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
6765 first row is the preferred relay.
6866</ HelpTooltipText >
6967< HelpTooltipText >
70- < Stack direction = "column" spacing = { 1 } className = { styles . regions } >
68+ < Stack
69+ direction = "column"
70+ spacing = { 1 }
71+ css = { { marginTop :theme . spacing ( 2 ) } }
72+ >
7173{ Object . entries ( agent . latency )
7274. sort ( ( [ , a ] , [ , b ] ) => a . latency_ms - b . latency_ms )
7375. map ( ( [ regionName , region ] ) => (
@@ -76,7 +78,11 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
7678key = { regionName }
7779spacing = { 0.5 }
7880justifyContent = "space-between"
79- className = { region . preferred ?styles . preferred :undefined }
81+ css = {
82+ region . preferred && {
83+ color :theme . palette . text . primary ,
84+ }
85+ }
8086>
8187< strong > { regionName } </ strong >
8288{ Math . round ( region . latency_ms ) } ms
@@ -88,15 +94,3 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
8894</ >
8995) ;
9096} ;
91-
92- const useStyles = makeStyles ( ( theme ) => ( {
93- trigger :{
94- cursor :"pointer" ,
95- } ,
96- regions :{
97- marginTop :theme . spacing ( 2 ) ,
98- } ,
99- preferred :{
100- color :theme . palette . text . primary ,
101- } ,
102- } ) ) ;