May 11, 2023 · May 9, 2023 · May 9, 2023 · May 10, 2023 · May 10, 2023 · May 10, 2023
diff --git a/coderd/coderd.go b/coderd/coderd.go
 return []string{}
 })
 r.NotFound(cspMW(compressHandler(http.HandlerFunc(api.siteHandler.ServeHTTP))).ServeHTTP)

 // This must be before all middleware to improve the response time.
 // So make a new router, and mount the old one as the root.
 rootRouter := chi.NewRouter()
 // This is the only route we add before all the middleware.
 // We want to time the latency of the request, so any middleware will
 // interfere with that timing.
 rootRouter.Get("/latency-check", LatencyCheck(api.AccessURL))
 rootRouter.Mount("/", r)
 api.RootHandler = rootRouter

 return api
 }

diff --git a/coderd/coderd_test.go b/coderd/coderd_test.go
 require.Equal(t, http.StatusOK, res.StatusCode)
 }

 func TestFastLatencyCheck(t *testing.T) {
 t.Parallel()
 client := coderdtest.New(t, nil)
 res, err := client.Request(context.Background(), http.MethodGet, "/latency-check", nil)
 require.NoError(t, err)
 defer res.Body.Close()
 require.Equal(t, http.StatusOK, res.StatusCode)
 }

 func TestHealthz(t *testing.T) {
 t.Parallel()
 client := coderdtest.New(t, nil)
diff --git a/coderd/latencycheck.go b/coderd/latencycheck.go
 package coderd

 import (
 "net/http"
 "net/url"
 "strings"
 )

 func LatencyCheck(allowedOrigins ...*url.URL) http.HandlerFunc {
 allowed := make([]string, 0, len(allowedOrigins))
 for _, origin := range allowedOrigins {
 // Allow the origin without a path
 tmp := *origin
 tmp.Path = ""
 allowed = append(allowed, strings.TrimSuffix(origin.String(), "/"))
 }
 origins := strings.Join(allowed, ",")
 return func(rw http.ResponseWriter, r *http.Request) {
 // Allowing timing information to be shared. This allows the browser
 // to exclude TLS handshake timing.
 rw.Header().Set("Timing-Allow-Origin", origins)
 rw.WriteHeader(http.StatusOK)
 }
 }
diff --git a/enterprise/coderd/workspaceproxy_test.go b/enterprise/coderd/workspaceproxy_test.go
 })

 t.Run("GoingAway", func(t *testing.T) {
 t.Skip("This is flakey in CI because it relies on internal go routine timing. Should refactor.")
 t.Parallel()

 dv := coderdtest.DeploymentValues(t)
diff --git a/enterprise/wsproxy/wsproxy.go b/enterprise/wsproxy/wsproxy.go

 "cdr.dev/slog"
 "github.com/coder/coder/buildinfo"
 "github.com/coder/coder/coderd"
 "github.com/coder/coder/coderd/httpapi"
 "github.com/coder/coder/coderd/httpmw"
 "github.com/coder/coder/coderd/tracing"
 SecureAuthCookie: opts.SecureAuthCookie,
 }

 // The primary coderd dashboard needs to make some GET requests to
 // the workspace proxies to check latency.
 corsMW := cors.Handler(cors.Options{
 AllowedOrigins: []string{
 // Allow the dashboard to make requests to the proxy for latency
 // checks.
 opts.DashboardURL.String(),
 },
 // Only allow GET requests for latency checks.
 AllowedMethods: []string{http.MethodOptions, http.MethodGet},
 AllowedHeaders: []string{"Accept", "Content-Type", "X-LATENCY-CHECK", "X-CSRF-TOKEN"},
 // Do not send any cookies
 AllowCredentials: false,
 })

 // Routes
 apiRateLimiter := httpmw.RateLimit(opts.APIRateLimit, time.Minute)
 // Persistent middlewares to all routes
 httpmw.ExtractRealIP(s.Options.RealIPConfig),
 httpmw.Logger(s.Logger),
 httpmw.Prometheus(s.PrometheusRegistry),
 // The primary coderd dashboard needs to make some GET requests to
 // the workspace proxies to check latency.
 cors.Handler(cors.Options{
 AllowedOrigins: []string{
 // Allow the dashboard to make requests to the proxy for latency
 // checks.
 opts.DashboardURL.String(),
 },
 // Only allow GET requests for latency checks.
 AllowedMethods: []string{http.MethodGet},
 AllowedHeaders: []string{"Accept", "Content-Type"},
 // Do not send any cookies
 AllowCredentials: false,
 }),
 corsMW,

 // HandleSubdomain is a middleware that handles all requests to the
 // subdomain-based workspace apps.
 })
 })

 // See coderd/coderd.go for why we need this.
 rootRouter := chi.NewRouter()
 // Make sure to add the cors middleware to the latency check route.
 rootRouter.Get("/latency-check", corsMW(coderd.LatencyCheck(s.DashboardURL, s.AppServer.AccessURL)).ServeHTTP)
 rootRouter.Mount("/", r)
 s.Handler = rootRouter

 return s, nil
 }

diff --git a/site/jest.setup.ts b/site/jest.setup.ts
 import { TextEncoder, TextDecoder } from "util"
 import { Blob } from "buffer"
 import jestFetchMock from "jest-fetch-mock"
 import { ProxyLatencyReport } from "contexts/useProxyLatency"
 import { RegionsResponse } from "api/typesGenerated"

 jestFetchMock.enableMocks()

 // useProxyLatency does some http requests to determine latency.
 // This would fail unit testing, or at least make it very slow with
 // actual network requests. So just globally mock this hook.
 jest.mock("contexts/useProxyLatency", () => ({
  useProxyLatency: (proxies?: RegionsResponse) => {
    if (!proxies) {
      return {} as Record<string, ProxyLatencyReport>
    }

    return proxies.regions.reduce((acc, proxy) => {
      acc[proxy.id] = {
        accurate: true,
        // Return a constant latency of 8ms.
        // If you make this random it could break stories.
        latencyMS: 8,
        at: new Date(),
      }
      return acc
    }, {} as Record<string, ProxyLatencyReport>)
  },
 }))

 global.TextEncoder = TextEncoder
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Polyfill for jsdom
 global.TextDecoder = TextDecoder as any
diff --git a/site/package.json b/site/package.json
  "dependencies": {
    "@emoji-mart/data": "1.0.5",
    "@emoji-mart/react": "1.0.1",
    "@fastly/performance-observer-polyfill": "^2.0.0",
    "@emotion/react": "^11.10.8",
    "@emotion/styled": "^11.10.8",
    "@fontsource/ibm-plex-mono": "4.5.10",
diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
  MockWorkspace,
  MockWorkspaceAgent,
  MockWorkspaceApp,
  MockProxyLatencies,
 } from "testHelpers/entities"
 import { AppLink, AppLinkProps } from "./AppLink"
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
 const Template: Story<AppLinkProps> = (args) => (
  <ProxyContext.Provider
    value={{
      proxyLatencies: MockProxyLatencies,
      proxy: getPreferredProxy(MockWorkspaceProxies, MockPrimaryWorkspaceProxy),
      proxies: MockWorkspaceProxies,
      isLoading: false,
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 { Theme } from "@mui/material/styles"
 import {
  HelpTooltipText,
  HelpPopover,
  HelpTooltipTitle,
 } from "components/Tooltips/HelpTooltip"
 import { Stack } from "components/Stack/Stack"
 import { WorkspaceAgent, DERPRegion } from "api/typesGenerated"
 import {Theme } from "@mui/material/styles"
 import {getLatencyColor } from "utils/colors"

 const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
  // Find the right latency to display
    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/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx
  MockWorkspaceAgentStartTimeout,
  MockWorkspaceAgentTimeout,
  MockWorkspaceApp,
  MockProxyLatencies,
 } from "testHelpers/entities"
 import { AgentRow, AgentRowProps } from "./AgentRow"
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
  return (
    <ProxyContext.Provider
      value={{
        proxyLatencies: MockProxyLatencies,
        proxy: getPreferredProxy(proxies, selectedProxy),
        proxies: proxies,
        isLoading: false,
diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
 import { MockWorkspace, MockWorkspaceResource } from "testHelpers/entities"
 import {
  MockProxyLatencies,
  MockWorkspace,
  MockWorkspaceResource,
 } from "testHelpers/entities"
 import { AgentRow } from "./AgentRow"
 import { ResourceCard, ResourceCardProps } from "./ResourceCard"
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
  agentRow: (agent) => (
    <ProxyContext.Provider
      value={{
        proxyLatencies: MockProxyLatencies,
        proxy: getPreferredProxy([], undefined),
        proxies: [],
        isLoading: false,
  agentRow: (agent) => (
    <ProxyContext.Provider
      value={{
        proxyLatencies: MockProxyLatencies,
        proxy: getPreferredProxy([], undefined),
        proxies: [],
        isLoading: false,
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
 import { withReactContext } from "storybook-react-context"
 import EventSource from "eventsourcemock"
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
 import { MockProxyLatencies } from "../../testHelpers/entities"

 export default {
  title: "components/Workspace",
 const Template: Story<WorkspaceProps> = (args) => (
  <ProxyContext.Provider
    value={{
      proxyLatencies: MockProxyLatencies,
      proxy: getPreferredProxy([], undefined),
      proxies: [],
      isLoading: false,
diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx
  useContext,
  useState,
 } from "react"
 import { ProxyLatencyReport, useProxyLatency } from "./useProxyLatency"

 interface ProxyContextValue {
  proxy: PreferredProxy
  proxies?: Region[]
  proxyLatencies?: Record<string, ProxyLatencyReport>
  // isfetched is true when the proxy api call is complete.
  isFetched: boolean
  // isLoading is true if the proxy is in the process of being fetched.
    },
  })

  // Everytime we get a new proxiesResponse, update the latency check
  // to each workspace proxy.
  const proxyLatencies = useProxyLatency(proxiesResp)

  const setAndSaveProxy = (
    selectedProxy?: Region,
    // By default the proxies come from the api call above.
  return (
    <ProxyContext.Provider
      value={{
        proxyLatencies: proxyLatencies,
        proxy: experimentEnabled
          ? proxy
          : {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -805,6 +805,17 @@ func New(options Options) API {
		return []string{}
		})
		r.NotFound(cspMW(compressHandler(http.HandlerFunc(api.siteHandler.ServeHTTP))).ServeHTTP)

		// This must be before all middleware to improve the response time.
		// So make a new router, and mount the old one as the root.
		rootRouter := chi.NewRouter()
		// This is the only route we add before all the middleware.
		// We want to time the latency of the request, so any middleware will
		// interfere with that timing.
		rootRouter.Get("/latency-check", LatencyCheck(api.AccessURL))
		rootRouter.Mount("/", r)
		api.RootHandler = rootRouter

		return api
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -124,6 +124,15 @@ func TestDERPLatencyCheck(t *testing.T) {
		require.Equal(t, http.StatusOK, res.StatusCode)
		}

		func TestFastLatencyCheck(t *testing.T) {
		t.Parallel()
		client := coderdtest.New(t, nil)
		res, err := client.Request(context.Background(), http.MethodGet, "/latency-check", nil)
		require.NoError(t, err)
		defer res.Body.Close()
		require.Equal(t, http.StatusOK, res.StatusCode)
		}

		func TestHealthz(t *testing.T) {
		t.Parallel()
		client := coderdtest.New(t, nil)
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,24 @@
		package coderd

		import (
		"net/http"
		"net/url"
		"strings"
		)

		func LatencyCheck(allowedOrigins ...*url.URL) http.HandlerFunc {
		allowed := make([]string, 0, len(allowedOrigins))
		for _, origin := range allowedOrigins {
		// Allow the origin without a path
		tmp := *origin
		tmp.Path = ""
		allowed = append(allowed, strings.TrimSuffix(origin.String(), "/"))
		}
		origins := strings.Join(allowed, ",")
		return func(rw http.ResponseWriter, r *http.Request) {
		// Allowing timing information to be shared. This allows the browser
		// to exclude TLS handshake timing.
		rw.Header().Set("Timing-Allow-Origin", origins)
		rw.WriteHeader(http.StatusOK)
		}
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -175,6 +175,7 @@ func TestRegions(t *testing.T) {
		})

		t.Run("GoingAway", func(t *testing.T) {
		t.Skip("This is flakey in CI because it relies on internal go routine timing. Should refactor.")
		t.Parallel()

		dv := coderdtest.DeploymentValues(t)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,6 +19,7 @@ import (

		"cdr.dev/slog"
		"github.com/coder/coder/buildinfo"
		"github.com/coder/coder/coderd"
		"github.com/coder/coder/coderd/httpapi"
		"github.com/coder/coder/coderd/httpmw"
		"github.com/coder/coder/coderd/tracing"
Expand DownExpand Up		@@ -186,6 +187,21 @@ func New(ctx context.Context, opts Options) (Server, error) {
		SecureAuthCookie: opts.SecureAuthCookie,
		}

		// The primary coderd dashboard needs to make some GET requests to
		// the workspace proxies to check latency.
		corsMW := cors.Handler(cors.Options{
		AllowedOrigins: []string{
		// Allow the dashboard to make requests to the proxy for latency
		// checks.
		opts.DashboardURL.String(),
		},
		// Only allow GET requests for latency checks.
		AllowedMethods: []string{http.MethodOptions, http.MethodGet},
		AllowedHeaders: []string{"Accept", "Content-Type", "X-LATENCY-CHECK", "X-CSRF-TOKEN"},
		// Do not send any cookies
		AllowCredentials: false,
		})

		// Routes
		apiRateLimiter := httpmw.RateLimit(opts.APIRateLimit, time.Minute)
		// Persistent middlewares to all routes
Expand All		@@ -198,20 +214,7 @@ func New(ctx context.Context, opts Options) (Server, error) {
		httpmw.ExtractRealIP(s.Options.RealIPConfig),
		httpmw.Logger(s.Logger),
		httpmw.Prometheus(s.PrometheusRegistry),
		// The primary coderd dashboard needs to make some GET requests to
		// the workspace proxies to check latency.
		cors.Handler(cors.Options{
		AllowedOrigins: []string{
		// Allow the dashboard to make requests to the proxy for latency
		// checks.
		opts.DashboardURL.String(),
		},
		// Only allow GET requests for latency checks.
		AllowedMethods: []string{http.MethodGet},
		AllowedHeaders: []string{"Accept", "Content-Type"},
		// Do not send any cookies
		AllowCredentials: false,
		}),
		corsMW,

		// HandleSubdomain is a middleware that handles all requests to the
		// subdomain-based workspace apps.
Expand DownExpand Up		@@ -260,6 +263,13 @@ func New(ctx context.Context, opts Options) (Server, error) {
		})
		})

		// See coderd/coderd.go for why we need this.
		rootRouter := chi.NewRouter()
		// Make sure to add the cors middleware to the latency check route.
		rootRouter.Get("/latency-check", corsMW(coderd.LatencyCheck(s.DashboardURL, s.AppServer.AccessURL)).ServeHTTP)
		rootRouter.Mount("/", r)
		s.Handler = rootRouter

		return s, nil
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,9 +6,33 @@ import "jest-location-mock"
		import { TextEncoder, TextDecoder } from "util"
		import { Blob } from "buffer"
		import jestFetchMock from "jest-fetch-mock"
		import { ProxyLatencyReport } from "contexts/useProxyLatency"
		import { RegionsResponse } from "api/typesGenerated"

		jestFetchMock.enableMocks()

		// useProxyLatency does some http requests to determine latency.
		// This would fail unit testing, or at least make it very slow with
		// actual network requests. So just globally mock this hook.
		jest.mock("contexts/useProxyLatency", () => ({
		useProxyLatency: (proxies?: RegionsResponse) => {
		if (!proxies) {
		return {} as Record<string, ProxyLatencyReport>
		}

		return proxies.regions.reduce((acc, proxy) => {
		acc[proxy.id] = {
		accurate: true,
		// Return a constant latency of 8ms.
		// If you make this random it could break stories.
		latencyMS: 8,
		at: new Date(),
		}
		return acc
		}, {} as Record<string, ProxyLatencyReport>)
		},
		}))

		global.TextEncoder = TextEncoder
		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Polyfill for jsdom
		global.TextDecoder = TextDecoder as any
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,6 +30,7 @@
		"dependencies": {
		"@emoji-mart/data": "1.0.5",
		"@emoji-mart/react": "1.0.1",
		"@fastly/performance-observer-polyfill": "^2.0.0",
		"@emotion/react": "^11.10.8",
		"@emotion/styled": "^11.10.8",
		"@fontsource/ibm-plex-mono": "4.5.10",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,6 +5,7 @@ import {
		MockWorkspace,
		MockWorkspaceAgent,
		MockWorkspaceApp,
		MockProxyLatencies,
		} from "testHelpers/entities"
		import { AppLink, AppLinkProps } from "./AppLink"
		import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
Expand All		@@ -17,6 +18,7 @@ export default {
		const Template: Story<AppLinkProps> = (args) => (
		<ProxyContext.Provider
		value={{
		proxyLatencies: MockProxyLatencies,
		proxy: getPreferredProxy(MockWorkspaceProxies, MockPrimaryWorkspaceProxy),
		proxies: MockWorkspaceProxies,
		isLoading: false,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,13 +1,14 @@
		import { useRef, useState, FC } from "react"
		import { makeStyles, useTheme } from "@mui/styles"
		import { Theme } from "@mui/material/styles"
		import {
		HelpTooltipText,
		HelpPopover,
		HelpTooltipTitle,
		} from "components/Tooltips/HelpTooltip"
		import { Stack } from "components/Stack/Stack"
		import { WorkspaceAgent, DERPRegion } from "api/typesGenerated"
		import {Theme } from "@mui/material/styles"
		import {getLatencyColor } from "utils/colors"

		const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
		// Find the right latency to display
Expand All		@@ -22,17 +23,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),
		}
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,6 +16,7 @@ import {
		MockWorkspaceAgentStartTimeout,
		MockWorkspaceAgentTimeout,
		MockWorkspaceApp,
		MockProxyLatencies,
		} from "testHelpers/entities"
		import { AgentRow, AgentRowProps } from "./AgentRow"
		import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext"
Expand DownExpand Up		@@ -56,6 +57,7 @@ const TemplateFC = (
		return (
		<ProxyContext.Provider
		value={{
		proxyLatencies: MockProxyLatencies,
		proxy: getPreferredProxy(proxies, selectedProxy),
		proxies: proxies,
		isLoading: false,
Expand Down