Oct 16, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
 import {useRef, useState, FC } from "react";
 import {makeStyles,useTheme } from "@mui/styles";
 import {type FC, useRef, useState } from "react";
 import { useTheme } from "@emotion/react";
 import { Theme } from "@mui/material/styles";
 import type { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
 import {
  HelpTooltipText,
  HelpPopover,
  HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";
 import { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
 import { getLatencyColor } from "utils/latency";

 const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
 };

 export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
  const theme: Theme = useTheme();
  const theme = useTheme();
  const anchorRef = useRef<HTMLButtonElement>(null);
  const [isOpen, setIsOpen] = useState(false);
  const id = isOpen ? "latency-popover" : undefined;
  const latency = getDisplayLatency(theme, agent);
  const styles = useStyles();

  if (!latency || !agent.latency) {
    return null;
        ref={anchorRef}
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
        className={styles.trigger}
        style={{ color: latency.color }}
        css={{ cursor: "pointer", color: latency.color }}
      >
        {Math.round(Math.round(latency.latency_ms))}ms
      </span>
          first row is the preferred relay.
        </HelpTooltipText>
        <HelpTooltipText>
          <Stack direction="column" spacing={1} className={styles.regions}>
          <Stack
            direction="column"
            spacing={1}
            css={{ marginTop: theme.spacing(2) }}
          >
            {Object.entries(agent.latency)
              .sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
              .map(([regionName, region]) => (
                  key={regionName}
                  spacing={0.5}
                  justifyContent="space-between"
                  className={region.preferred ? styles.preferred : undefined}
                  css={
                    region.preferred && {
                      color: theme.palette.text.primary,
                    }
                  }
                >
                  <strong>{regionName}</strong>
                  {Math.round(region.latency_ms)}ms
    </>
  );
 };

 const useStyles = makeStyles((theme) => ({
  trigger: {
    cursor: "pointer",
  },
  regions: {
    marginTop: theme.spacing(2),
  },
  preferred: {
    color: theme.palette.text.primary,
  },
 }));
Original file line number	Diff line number	Diff line change
		@@ -1,13 +1,13 @@
		import {useRef, useState, FC } from "react";
		import {makeStyles,useTheme } from "@mui/styles";
		import {type FC, useRef, useState } from "react";
		import { useTheme } from "@emotion/react";
		import { Theme } from "@mui/material/styles";
		import type { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
		import {
		HelpTooltipText,
		HelpPopover,
		HelpTooltipTitle,
		} from "components/HelpTooltip/HelpTooltip";
		import { Stack } from "components/Stack/Stack";
		import { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
		import { getLatencyColor } from "utils/latency";

		const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
Expand All		@@ -30,12 +30,11 @@ const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
		};

		export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
		const theme: Theme = useTheme();
		const theme = useTheme();
		const anchorRef = useRef<HTMLButtonElement>(null);
		const [isOpen, setIsOpen] = useState(false);
		const id = isOpen ? "latency-popover" : undefined;
		const latency = getDisplayLatency(theme, agent);
		const styles = useStyles();

		if (!latency \|\| !agent.latency) {
		return null;
Expand All		@@ -49,8 +48,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
		ref={anchorRef}
		onMouseEnter={() => setIsOpen(true)}
		onMouseLeave={() => setIsOpen(false)}
		className={styles.trigger}
		style={{ color: latency.color }}
		css={{ cursor: "pointer", color: latency.color }}
		>
		{Math.round(Math.round(latency.latency_ms))}ms
		</span>
Expand All		@@ -67,7 +65,11 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
		first row is the preferred relay.
		</HelpTooltipText>
		<HelpTooltipText>
		<Stack direction="column" spacing={1} className={styles.regions}>
		<Stack
		direction="column"
		spacing={1}
		css={{ marginTop: theme.spacing(2) }}
		>
		{Object.entries(agent.latency)
		.sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
		.map(([regionName, region]) => (
Expand All		@@ -76,7 +78,11 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
		key={regionName}
		spacing={0.5}
		justifyContent="space-between"
		className={region.preferred ? styles.preferred : undefined}
		css={
		region.preferred && {
		color: theme.palette.text.primary,
		}
		}
		>
		<strong>{regionName}</strong>
		{Math.round(region.latency_ms)}ms
Expand All		@@ -88,15 +94,3 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
		</>
		);
		};

		const useStyles = makeStyles((theme) => ({
		trigger: {
		cursor: "pointer",
		},
		regions: {
		marginTop: theme.spacing(2),
		},
		preferred: {
		color: theme.palette.text.primary,
		},
		}));