From 3507ddc3cfb98793797f38efc079a6b147097195 Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Sun, 8 Feb 2026 01:10:26 +1100 Subject: [PATCH] feat: refactor `` colors (#21808) This pull-request finds all of our previous instances of the MUI-based Latency `color`'s and updates them to use the equivalents form the Tailwind package. --- site/src/components/Latency/Latency.tsx | 11 ++---- site/src/modules/resources/AgentLatency.tsx | 32 +++++++-------- site/src/pages/HealthPage/DERPRegionPage.tsx | 31 +++++---------- .../TemplateInsightsPage.tsx | 9 ++--- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 21 ++++------ site/src/utils/latency.ts | 39 ++++++++++++------- 6 files changed, 65 insertions(+), 78 deletions(-) diff --git a/site/src/components/Latency/Latency.tsx b/site/src/components/Latency/Latency.tsx index 9341d57507..ded20ccb14 100644 --- a/site/src/components/Latency/Latency.tsx +++ b/site/src/components/Latency/Latency.tsx @@ -1,4 +1,3 @@ -import { useTheme } from "@emotion/react"; import CircularProgress from "@mui/material/CircularProgress"; import { Abbr } from "components/Abbr/Abbr"; import { @@ -22,9 +21,8 @@ export const Latency: FC = ({ isLoading, className, }) => { - const theme = useTheme(); // Always use the no latency color for loading. - const color = getLatencyColor(theme, isLoading ? undefined : latency); + const latencyColor = getLatencyColor(isLoading ? undefined : latency); if (isLoading) { return ( @@ -40,7 +38,7 @@ export const Latency: FC = ({ className, )} > - + Loading latency... @@ -54,8 +52,7 @@ export const Latency: FC = ({ Latency not available @@ -64,7 +61,7 @@ export const Latency: FC = ({ } return ( -
+
Latency: {latency.toFixed(0)} ms diff --git a/site/src/modules/resources/AgentLatency.tsx b/site/src/modules/resources/AgentLatency.tsx index 2e50c63d0c..a47b7563d9 100644 --- a/site/src/modules/resources/AgentLatency.tsx +++ b/site/src/modules/resources/AgentLatency.tsx @@ -1,4 +1,3 @@ -import { type Theme, useTheme } from "@emotion/react"; import type { DERPRegion, WorkspaceAgent } from "api/typesGenerated"; import { HelpTooltip, @@ -7,11 +6,11 @@ import { HelpTooltipTitle, HelpTooltipTrigger, } from "components/HelpTooltip/HelpTooltip"; -import { Stack } from "components/Stack/Stack"; import type { FC } from "react"; +import { cn } from "utils/cn"; import { getLatencyColor } from "utils/latency"; -const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => { +const getDisplayLatency = (agent: WorkspaceAgent) => { // Find the right latency to display const latencyValues = Object.values(agent.latency ?? {}); const latency = @@ -26,7 +25,7 @@ const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => { return { ...latency, - color: getLatencyColor(theme, latency.latency_ms), + color: getLatencyColor(latency.latency_ms), }; }; @@ -35,8 +34,7 @@ interface AgentLatencyProps { } export const AgentLatency: FC = ({ agent }) => { - const theme = useTheme(); - const latency = getDisplayLatency(theme, agent); + const latency = getDisplayLatency(agent); if (!latency || !agent.latency) { return null; @@ -48,7 +46,7 @@ export const AgentLatency: FC = ({ agent }) => { {Math.round(latency.latency_ms)}ms @@ -59,26 +57,22 @@ export const AgentLatency: FC = ({ agent }) => { This is the latency overhead on non peer to peer connections. The first row is the preferred relay. - +
{Object.entries(agent.latency) .sort(([, a], [, b]) => a.latency_ms - b.latency_ms) .map(([regionName, region]) => ( - {regionName} {Math.round(region.latency_ms)}ms - +
))} - +
); diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx index a3aaea5425..af51b794f1 100644 --- a/site/src/pages/HealthPage/DERPRegionPage.tsx +++ b/site/src/pages/HealthPage/DERPRegionPage.tsx @@ -14,6 +14,7 @@ import { import { ChevronLeftIcon, CodeIcon, HashIcon } from "lucide-react"; import type { FC } from "react"; import { Link, useOutletContext, useParams } from "react-router"; +import { cn } from "utils/cn"; import { getLatencyColor } from "utils/latency"; import { pageTitle } from "utils/page"; import { @@ -115,9 +116,10 @@ const DERPRegionPage: FC = () => { {reports.map((report) => { report = report as DERPNodeReport; // Can technically be null const { node, client_logs: logs } = report; - const latencyColor = getLatencyColor( - theme, + const latencyColor = getLatencyColor(report.round_trip_ping_ms); + const latencyBackground = getLatencyColor( report.round_trip_ping_ms, + "background", ); return (
{ } + className={latencyColor} + icon={} > {report.round_trip_ping_ms}ms @@ -174,25 +176,12 @@ const DERPRegionPage: FC = () => { ); }; -type StatusCircleProps = { color: string }; +type StatusCircleProps = { background: string }; -const StatusCircle: FC = ({ color }) => { +const StatusCircle: FC = ({ background }) => { return ( -
-
+
+
); }; diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx index 35b124734c..6e7196c7d4 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx @@ -290,7 +290,6 @@ const UsersLatencyPanel: FC = ({ className, ...panelProps }) => { - const theme = useTheme(); return ( @@ -321,10 +320,10 @@ const UsersLatencyPanel: FC = ({
{row.username}
{row.latency_ms.p50.toFixed(0)}ms
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx index ac8aee23da..000b74e3d6 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx @@ -11,6 +11,7 @@ import { import { TableCell, TableRow } from "components/Table/Table"; import type { ProxyLatencyReport } from "contexts/useProxyLatency"; import type { FC, ReactNode } from "react"; +import { cn } from "utils/cn"; import { getLatencyColor } from "utils/latency"; interface ProxyRowProps { @@ -19,8 +20,6 @@ interface ProxyRowProps { } export const ProxyRow: FC = ({ proxy, latency }) => { - const theme = useTheme(); - // If we have a more specific proxy status, use that. // All users can see healthy/unhealthy, some can see more. let statusBadge = ; @@ -75,23 +74,19 @@ export const ProxyRow: FC = ({ proxy, latency }) => {
{statusBadge}
{latency ? `${latency.latencyMS.toFixed(0)} ms` : "Not available"} {shouldShowMessages && ( - + { - if (!latency) { - return theme.palette.text.secondary; - } +type LatencyLevel = keyof typeof latencyColors; - let color = theme.roles.success.fill.solid; - - if (latency >= 150 && latency < 300) { - color = theme.roles.warning.fill.solid; - } else if (latency >= 300) { - color = theme.roles.error.fill.solid; - } - return color; +const getLatencyLevel = (latency?: number): LatencyLevel => { + if (!latency) return "unknown"; + if (latency < 150) return "good"; + if (latency < 300) return "warning"; + return "critical"; }; + +export const getLatencyColor = ( + latency?: number, + type: "text" | "background" = "text", +) => latencyColors[getLatencyLevel(latency)][type];