Share colors from the agent row

Emyrk · Emyrk · commit 5c1412fba42e · 2023-05-10T18:33:52.000-05:00
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
@@ -7,6 +7,7 @@ import {
 } from "components/Tooltips/HelpTooltip"
 import { Stack } from "components/Stack/Stack"
 import { WorkspaceAgent, DERPRegion } from "api/typesGenerated"
+import { getLatencyColor } from "utils/colors"
 
 const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
   // Find the right latency to display
@@ -21,17 +22,9 @@ const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
     return undefined
   }
 
-  // Get the color
-  let color = theme.palette.success.light
-  if (latency.latency_ms >= 150 && latency.latency_ms < 300) {
-    color = theme.palette.warning.light
-  } else if (latency.latency_ms >= 300) {
-    color = theme.palette.error.light
-  }
-
   return {
     ...latency,
-    color,
+    color: getLatencyColor(theme, latency.latency_ms),
   }
 }
 
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -12,6 +12,8 @@ import {
 import { makeStyles } from "@material-ui/core/styles"
 import { combineClasses } from "utils/combineClasses"
 import { ProxyLatencyReport } from "contexts/useProxyLatency"
+import { useTheme } from "@material-ui/core/styles"
+import { getLatencyColor } from "utils/colors"
 
 export const ProxyRow: FC<{
   latency?: ProxyLatencyReport
@@ -20,6 +22,7 @@ export const ProxyRow: FC<{
   preferred: boolean
 }> = ({ proxy, onSelectRegion, preferred, latency }) => {
   const styles = useStyles()
+  const theme = useTheme()
 
   const clickable = useClickableTableRow(() => {
     onSelectRegion(proxy)
@@ -56,7 +59,13 @@ export const ProxyRow: FC<{
         <ProxyStatus proxy={proxy} />
       </TableCell>
       <TableCell>
-        {latency ? `${latency.latencyMS.toFixed(1)} ms` : "?"}
+        <span
+          style={{
+            color: latency ? getLatencyColor(theme, latency.latencyMS) : "",
+          }}
+        >
+          {latency ? `${latency.latencyMS.toFixed(1)} ms` : "?"}
+        </span>
       </TableCell>
     </TableRow>
   )
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx
@@ -52,6 +52,7 @@ export const WorkspaceProxyView: FC<
               <TableCell width="40%">Proxy</TableCell>
               <TableCell width="30%">URL</TableCell>
               <TableCell width="10%">Status</TableCell>
+              <TableCell width="20%">Latency</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
diff --git a/site/src/utils/colors.ts b/site/src/utils/colors.ts
@@ -1,3 +1,5 @@
+import { Theme } from "@material-ui/core/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 {
@@ -21,3 +23,15 @@ 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
+}
