feat(site): add latency to the terminal (#7801)

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
-}

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
+}