coder · BrunoQuaresma · Jun 5, 2023 · Jun 2, 2023 · Jun 2, 2023 · Jun 5, 2023
diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
@@ -2,7 +2,7 @@ import Drawer from "@mui/material/Drawer"
 import IconButton from "@mui/material/IconButton"
 import List from "@mui/material/List"
 import ListItem from "@mui/material/ListItem"
-import { makeStyles, useTheme } from "@mui/styles"
+import { makeStyles } from "@mui/styles"
 import MenuIcon from "@mui/icons-material/Menu"
 import { CoderIcon } from "components/Icons/CoderIcon"
 import { FC, useRef, useState } from "react"
@@ -20,10 +20,9 @@ import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutl
 import { ProxyContextValue } from "contexts/ProxyContext"
 import { displayError } from "components/GlobalSnackbar/utils"
 import Divider from "@mui/material/Divider"
-import HelpOutline from "@mui/icons-material/HelpOutline"
-import Tooltip from "@mui/material/Tooltip"
 import Skeleton from "@mui/material/Skeleton"
 import { BUTTON_SM_HEIGHT } from "theme/theme"
+import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency"
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`
 
@@ -232,7 +231,6 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
             </Box>
             {selectedProxy.display_name}
             <ProxyStatusLatency
-              proxy={selectedProxy}
               latency={latencies?.[selectedProxy.id]?.latencyMS}
             />
           </Box>
@@ -277,10 +275,7 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
                 />
               </Box>
               {proxy.display_name}
-              <ProxyStatusLatency
-                proxy={proxy}
-                latency={latencies?.[proxy.id]?.latencyMS}
-              />
+              <ProxyStatusLatency latency={latencies?.[proxy.id]?.latencyMS} />
             </Box>
           </MenuItem>
         ))}
@@ -301,42 +296,6 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
   )
 }
 
-const ProxyStatusLatency: FC<{ proxy: TypesGen.Region; latency?: number }> = ({
-  proxy,
-  latency,
-}) => {
-  const theme = useTheme()
-  let color = theme.palette.success.light
-
-  if (!latency) {
-    return (
-      <Tooltip title="Latency not available">
-        <HelpOutline
-          sx={{
-            ml: "auto",
-            fontSize: "14px !important",
-            color: (theme) => theme.palette.text.secondary,
-          }}
-        />
-      </Tooltip>
-    )
-  }
-
-  if (latency >= 300) {
-    color = theme.palette.error.light
-  }
-
-  if (!proxy.healthy || latency >= 100) {
-    color = theme.palette.warning.light
-  }
-
-  return (
-    <Box sx={{ color, fontSize: 13, marginLeft: "auto" }}>
-      {latency.toFixed(0)}ms
-    </Box>
-  )
-}
-
 const useStyles = makeStyles((theme) => ({
   root: {
     height: navHeight,

diff --git a/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx b/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
@@ -0,0 +1,31 @@
+import { useTheme } from "@mui/material/styles"
+import HelpOutline from "@mui/icons-material/HelpOutline"
+import Box from "@mui/material/Box"
+import Tooltip from "@mui/material/Tooltip"
+import { FC } from "react"
+import { getLatencyColor } from "utils/latency"
+
+export const ProxyStatusLatency: FC<{ latency?: number }> = ({ latency }) => {
+  const theme = useTheme()
+  const color = getLatencyColor(theme, latency)
+
+  if (!latency) {
+    return (
+      <Tooltip title="Latency not available">
+        <HelpOutline
+          sx={{
+            ml: "auto",
+            fontSize: "14px !important",
+            color,
+          }}
+        />
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Box sx={{ color, fontSize: 13, marginLeft: "auto" }}>
+      {latency.toFixed(0)}ms
+    </Box>
+  )
+}
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
@@ -8,7 +8,7 @@ import {
 } from "components/Tooltips/HelpTooltip"
 import { Stack } from "components/Stack/Stack"
 import { WorkspaceAgent, DERPRegion } from "api/typesGenerated"
-import { getLatencyColor } from "utils/colors"
+import { getLatencyColor } from "utils/latency"
 
 const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
   // Find the right latency to display

diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -1,5 +1,5 @@
 import Button from "@mui/material/Button"
-import { makeStyles } from "@mui/styles"
+import { makeStyles, useTheme } from "@mui/styles"
 import WarningIcon from "@mui/icons-material/ErrorOutlineRounded"
 import RefreshOutlined from "@mui/icons-material/RefreshOutlined"
 import { useMachine } from "@xstate/react"
@@ -20,6 +20,12 @@ import { terminalMachine } from "../../xServices/terminal/terminalXService"
 import { useProxy } from "contexts/ProxyContext"
 import { combineClasses } from "utils/combineClasses"
 import Box from "@mui/material/Box"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
+import { Region } from "api/typesGenerated"
+import { getLatencyColor } from "utils/latency"
+import Popover from "@mui/material/Popover"
+import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency"
+import { alpha } from "@mui/material/styles"
 
 export const Language = {
   workspaceErrorMessagePrefix: "Unable to fetch workspace: ",
@@ -85,6 +91,12 @@ const TerminalPage: FC<
   const shouldDisplayStartupError = workspaceAgent
     ? workspaceAgent.lifecycle_state === "start_error"
     : false
+  const dashboard = useDashboard()
+  const proxyContext = useProxy()
+  const selectedProxy = proxyContext.proxy.proxy
+  const latency = selectedProxy
+    ? proxyContext.proxyLatencies[selectedProxy.id]
+    : undefined
 
   // handleWebLink handles opening of URLs in the terminal!
   const handleWebLink = useCallback(
@@ -347,11 +359,103 @@ const TerminalPage: FC<
           ref={xtermRef}
           data-testid="terminal"
         />
+        {dashboard.experiments.includes("moons") &&
+          selectedProxy &&
+          latency && (
+            <Latency proxy={selectedProxy} latency={latency.latencyMS} />
+          )}
       </Box>
     </>
   )
 }
 
+const Latency = ({ proxy, latency }: { proxy: Region; latency?: number }) => {
+  const theme = useTheme()
+  const color = getLatencyColor(theme, latency)
+  const anchorRef = useRef<HTMLButtonElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <Box sx={{ position: "fixed", bottom: 24, right: 24, zIndex: 10 }}>
+      <Box
+        ref={anchorRef}
+        component="button"
+        aria-label="Terminal latency"
+        aria-haspopup="true"
+        onMouseEnter={() => setIsOpen(true)}
+        onMouseLeave={() => setIsOpen(false)}
+        sx={{
+          padding: 0.75,
+          border: `1px solid ${alpha(color, 0.5)}`,
+          borderRadius: 9999,
+          background: "none",
+          cursor: "pointer",
+        }}
+      >
+        <Box
+          sx={{
+            height: 8,
+            width: 8,
+            backgroundColor: color,
+            border: 0,
+            borderRadius: 9999,
+          }}
+        />
+      </Box>
+      <Popover
+        id="latency-popover"
+        disableRestoreFocus
+        anchorEl={anchorRef.current}
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        sx={{
+          pointerEvents: "none",
+          "& .MuiPaper-root": {
+            padding: (theme) => theme.spacing(1, 2),
+            marginTop: -1,
+          },
+        }}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+      >
+        <Box
+          sx={{
+            fontSize: 13,
+            color: (theme) => theme.palette.text.secondary,
+            fontWeight: 500,
+          }}
+        >
+          Selected proxy
+        </Box>
+        <Box
+          sx={{ fontSize: 14, display: "flex", gap: 3, alignItems: "center" }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <Box width={12} height={12} lineHeight={0}>
+              <Box
+                component="img"
+                src={proxy.icon_url}
+                alt=""
+                sx={{ objectFit: "contain" }}
+                width="100%"
+                height="100%"
+              />
+            </Box>
+            {proxy.display_name}
+          </Box>
+          <ProxyStatusLatency latency={latency} />
+        </Box>
+      </Popover>
+    </Box>
+  )
+}
+
 const useReloading = (isDisconnected: boolean) => {
   const [status, setStatus] = useState<"reloading" | "notReloading">(
     "notReloading",

diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -12,7 +12,7 @@ import {
 import { makeStyles } from "@mui/styles"
 import { combineClasses } from "utils/combineClasses"
 import { ProxyLatencyReport } from "contexts/useProxyLatency"
-import { getLatencyColor } from "utils/colors"
+import { getLatencyColor } from "utils/latency"
 import { alpha } from "@mui/material/styles"
 
 export const ProxyRow: FC<{

diff --git a/site/src/utils/colors.ts b/site/src/utils/colors.ts
@@ -1,5 +1,3 @@
-import { Theme } from "@mui/material/styles"
-
 // Used to convert our theme colors to Hex since monaco theme only support hex colors
 // From https://www.jameslmilner.com/posts/converting-rgb-hex-hsl-colors/
 export function hslToHex(hsl: string): string {
@@ -23,15 +21,3 @@ export function hslToHex(hsl: string): string {
   }
   return `#${f(0)}${f(8)}${f(4)}`
 }
-
-// getLatencyColor is the text color to use for a given latency
-// in milliseconds.
-export const getLatencyColor = (theme: Theme, latency: number) => {
-  let color = theme.palette.success.light
-  if (latency >= 150 && latency < 300) {
-    color = theme.palette.warning.light
-  } else if (latency >= 300) {
-    color = theme.palette.error.light
-  }
-  return color
-}
diff --git a/site/src/utils/latency.ts b/site/src/utils/latency.ts
@@ -0,0 +1,16 @@
+import { Theme } from "@mui/material/styles"
+
+export const getLatencyColor = (theme: Theme, latency?: number) => {
+  if (!latency) {
+    return theme.palette.text.secondary
+  }
+
+  let color = theme.palette.success.light
+
+  if (latency >= 150 && latency < 300) {
+    color = theme.palette.warning.light
+  } else if (latency >= 300) {
+    color = theme.palette.error.light
+  }
+  return color
+}