coder · Emyrk · Apr 28, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 25, 2023
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -38,6 +38,10 @@ const SSHKeysPage = lazy(
 const TokensPage = lazy(
   () => import("./pages/UserSettingsPage/TokensPage/TokensPage"),
 )
+const WorkspaceProxyPage = lazy(
+  () =>
+    import("./pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage"),
+)
 const CreateUserPage = lazy(
   () => import("./pages/UsersPage/CreateUserPage/CreateUserPage"),
 )
@@ -259,6 +263,10 @@ export const AppRouter: FC = () => {
                   <Route index element={<TokensPage />} />
                   <Route path="new" element={<CreateTokenPage />} />
                 </Route>
+                <Route
+                  path="workspace-proxies"
+                  element={<WorkspaceProxyPage />}
+                />
               </Route>
 
               <Route path="/@:username">

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -897,6 +897,15 @@ export const getFile = async (fileId: string): Promise<ArrayBuffer> => {
   return response.data
 }
 
+export const getWorkspaceProxies =
+  async (): Promise<TypesGen.RegionsResponse> => {
+    const response = await axios.get<TypesGen.RegionsResponse>(
+      `/api/v2/regions`,
+      {},
+    )
+    return response.data
+  }
+
 export const getAppearance = async (): Promise<TypesGen.AppearanceConfig> => {
   try {
     const response = await axios.get(`/api/v2/appearance`)

diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -10,6 +10,7 @@ import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../utils/random"
 import { BaseIcon } from "./BaseIcon"
 import { ShareIcon } from "./ShareIcon"
+import { usePreferredProxy } from "hooks/usePreferredProxy"
 
 const Language = {
   appTitle: (appName: string, identifier: string): string =>
@@ -29,6 +30,11 @@ export const AppLink: FC<AppLinkProps> = ({
   workspace,
   agent,
 }) => {
+  const preferredProxy = usePreferredProxy()
+  const preferredPathBase = preferredProxy ? preferredProxy.path_app_url : ""
+  // Use the proxy host subdomain if it's configured.
+  appsHost = preferredProxy ? preferredProxy.wildcard_hostname : appsHost
+
   const styles = useStyles()
   const username = workspace.owner_name
 
@@ -43,14 +49,16 @@ export const AppLink: FC<AppLinkProps> = ({
 
   // The backend redirects if the trailing slash isn't included, so we add it
   // here to avoid extra roundtrips.
-  let href = `/@${username}/${workspace.name}.${
+  let href = `${preferredPathBase}/@${username}/${workspace.name}.${
     agent.name
   }/apps/${encodeURIComponent(appSlug)}/`
   if (app.command) {
-    href = `/@${username}/${workspace.name}.${
+    href = `${preferredPathBase}/@${username}/${workspace.name}.${
       agent.name
     }/terminal?command=${encodeURIComponent(app.command)}`
   }
+
+  // TODO: @emyrk handle proxy subdomains.
   if (appsHost && app.subdomain) {
     const subdomain = `${appSlug}--${agent.name}--${workspace.name}--${username}`
     href = `${window.location.protocol}//${appsHost}/`.replace("*", subdomain)

diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -22,6 +22,24 @@ export const EntitledBadge: FC = () => {
   )
 }
 
+export const HealthyBadge: FC = () => {
+  const styles = useStyles()
+  return (
+    <span className={combineClasses([styles.badge, styles.enabledBadge])}>
+      Healthy
+    </span>
+  )
+}
+
+export const NotHealthyBadge: FC = () => {
+  const styles = useStyles()
+  return (
+    <span className={combineClasses([styles.badge, styles.errorBadge])}>
+      Unhealthy
+    </span>
+  )
+}
+
 export const DisabledBadge: FC = () => {
   const styles = useStyles()
   return (
@@ -92,6 +110,11 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.success.dark,
   },
 
+  errorBadge: {
+    border: `1px solid ${theme.palette.error.light}`,
+    backgroundColor: theme.palette.error.dark,
+  },
+
   disabledBadge: {
     border: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,

diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
@@ -43,10 +43,13 @@ export const portForwardURL = (
 
 const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
   const { host, workspaceName, agentName, agentId, username } = props
+  const preferredProxy = usePreferredProxy()
+  const portHost = preferredProxy ? preferredProxy.wildcard_hostname : host
+
   const styles = useStyles()
   const [port, setPort] = useState("3000")
   const urlExample = portForwardURL(
-    host,
+    portHost,
     parseInt(port),
     agentName,
     workspaceName,
@@ -104,7 +107,7 @@ const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
           {ports &&
             ports.map((p, i) => {
               const url = portForwardURL(
-                host,
+                portHost,
                 p.port,
                 agentName,
                 workspaceName,

diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx
@@ -9,6 +9,8 @@ import { NavLink } from "react-router-dom"
 import { combineClasses } from "utils/combineClasses"
 import AccountIcon from "@material-ui/icons/Person"
 import SecurityIcon from "@material-ui/icons/LockOutlined"
+import PublicIcon from "@material-ui/icons/Public"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
 
 const SidebarNavItem: FC<
   PropsWithChildren<{ href: string; icon: ReactNode }>
@@ -41,6 +43,7 @@ const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
 
 export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
   const styles = useStyles()
+  const dashboard = useDashboard()
 
   return (
     <nav className={styles.sidebar}>
@@ -76,6 +79,14 @@ export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
       >
         Tokens
       </SidebarNavItem>
+      {dashboard.experiments.includes("moons") && (
+        <SidebarNavItem
+          href="workspace-proxies"
+          icon={<SidebarNavItemIcon icon={PublicIcon} />}
+        >
+          Workspace Proxy
+        </SidebarNavItem>
+      )}
     </nav>
   )
 }

diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx
@@ -3,6 +3,7 @@ import { SecondaryAgentButton } from "components/Resources/AgentButton"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../utils/random"
+import { usePreferredProxy } from "hooks/usePreferredProxy"
 
 export const Language = {
   linkText: "Terminal",
@@ -27,7 +28,10 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
   userName = "me",
   workspaceName,
 }) => {
-  const href = `/@${userName}/${workspaceName}${
+  const preferredProxy = usePreferredProxy()
+  const preferredPathBase = preferredProxy ? preferredProxy.path_app_url : ""
+
+  const href = `${preferredPathBase}/@${userName}/${workspaceName}${
     agentName ? `.${agentName}` : ""
   }/terminal`
 

diff --git a/site/src/hooks/usePreferredProxy.ts b/site/src/hooks/usePreferredProxy.ts
@@ -0,0 +1,20 @@
+import { Region } from "api/typesGenerated"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
+
+export const usePreferredProxy = (): Region | undefined => {
+  const dashboard = useDashboard()
+  // Only use preferred proxy if the user has the moons experiment enabled
+  if (!dashboard?.experiments.includes("moons")) {
+    return undefined
+  }
+
+  const str = localStorage.getItem("preferred-proxy")
+  if (str === undefined || str === null) {
+    return undefined
+  }
+  const proxy = JSON.parse(str)
+  if (proxy.id === undefined || proxy.id === null) {
+    return undefined
+  }
+  return proxy
+}
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx
@@ -0,0 +1,104 @@
+import { FC, PropsWithChildren, useState } from "react"
+import { Section } from "components/SettingsLayout/Section"
+import { WorkspaceProxyPageView } from "./WorkspaceProxyView"
+import makeStyles from "@material-ui/core/styles/makeStyles"
+import { Trans } from "react-i18next"
+import { useWorkspaceProxiesData } from "./hooks"
+import { Region } from "api/typesGenerated"
+import { displayError } from "components/GlobalSnackbar/utils"
+// import { ConfirmDeleteDialog } from "./components"
+// import { Stack } from "components/Stack/Stack"
+// import Button from "@material-ui/core/Button"
+// import { Link as RouterLink } from "react-router-dom"
+// import AddIcon from "@material-ui/icons/AddOutlined"
+// import { APIKeyWithOwner } from "api/typesGenerated"
+
+export const WorkspaceProxyPage: FC<PropsWithChildren<unknown>> = () => {
+  const styles = useStyles()
+
+  const description = (
+    <Trans values={{}}>
+      Workspace proxies are used to reduce the latency of connections to a
+      workspace. To get the best experience, choose the workspace proxy that is
+      closest located to you.
+    </Trans>
+  )
+
+  const [preferred, setPreferred] = useState(getPreferredProxy())
+
+  const {
+    data: response,
+    error: getProxiesError,
+    isFetching,
+    isFetched,
+  } = useWorkspaceProxiesData()
+
+  return (
+    <>
+      <Section
+        title="Workspace Proxies"
+        className={styles.section}
+        description={description}
+        layout="fluid"
+      >
+        <WorkspaceProxyPageView
+          proxies={response ? response.regions : []}
+          isLoading={isFetching}
+          hasLoaded={isFetched}
+          getWorkspaceProxiesError={getProxiesError}
+          preferredProxy={preferred}
+          onSelect={(proxy) => {
+            if (!proxy.healthy) {
+              displayError("Please select a healthy workspace proxy.")
+              return
+            }
+            // normProxy is a normalized proxy to
+            const normProxy = {
+              ...proxy,
+              // Trim trailing slashes to be consistent
+              path_app_url: proxy.path_app_url.replace(/\/$/, ""),
+            }
+
+            savePreferredProxy(normProxy)
+            setPreferred(normProxy)
+          }}
+        />
+      </Section>
+    </>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  section: {
+    "& code": {
+      background: theme.palette.divider,
+      fontSize: 12,
+      padding: "2px 4px",
+      color: theme.palette.text.primary,
+      borderRadius: 2,
+    },
+  },
+}))
+
+export default WorkspaceProxyPage
+
+// Exporting to be used in the tests
+export const savePreferredProxy = (proxy: Region): void => {
+  window.localStorage.setItem("preferred-proxy", JSON.stringify(proxy))
+}
+
+export const getPreferredProxy = (): Region | undefined => {
+  const str = localStorage.getItem("preferred-proxy")
+  if (str === undefined || str === null) {
+    return undefined
+  }
+  const proxy = JSON.parse(str)
+  if (proxy.id === undefined || proxy.id === null) {
+    return undefined
+  }
+  return proxy
+}
+
+export const clearPreferredProxy = (): void => {
+  localStorage.removeItem("preferred-proxy")
+}
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -0,0 +1,81 @@
+import { Region } from "api/typesGenerated"
+import { AvatarData } from "components/AvatarData/AvatarData"
+import { Avatar } from "components/Avatar/Avatar"
+import { useClickableTableRow } from "hooks/useClickableTableRow"
+import TableCell from "@material-ui/core/TableCell"
+import TableRow from "@material-ui/core/TableRow"
+import { FC } from "react"
+import {
+  HealthyBadge,
+  NotHealthyBadge,
+} from "components/DeploySettingsLayout/Badges"
+import { makeStyles } from "@material-ui/core/styles"
+import { combineClasses } from "utils/combineClasses"
+
+export const ProxyRow: FC<{
+  proxy: Region
+  onSelectRegion: (proxy: Region) => void
+  preferred: boolean
+}> = ({ proxy, onSelectRegion, preferred }) => {
+  const styles = useStyles()
+
+  const clickable = useClickableTableRow(() => {
+    onSelectRegion(proxy)
+  })
+
+  const classes = [clickable.className]
+
+  if (preferred) {
+    classes.push(styles.preferredrow)
+  }
+
+  return (
+    <TableRow
+      key={proxy.name}
+      data-testid={`${proxy.name}`}
+      {...clickable}
+      // Make sure to include our classname here.
+      className={combineClasses(classes)}
+    >
+      <TableCell>
+        <AvatarData
+          title={
+            proxy.display_name && proxy.display_name.length > 0
+              ? proxy.display_name
+              : proxy.name
+          }
+          avatar={
+            proxy.icon_url !== "" && (
+              <Avatar src={proxy.icon_url} variant="square" fitImage />
+            )
+          }
+        />
+      </TableCell>
+
+      <TableCell>{proxy.path_app_url}</TableCell>
+      <TableCell>
+        <ProxyStatus proxy={proxy} />
+      </TableCell>
+    </TableRow>
+  )
+}
+
+const ProxyStatus: FC<{
+  proxy: Region
+}> = ({ proxy }) => {
+  let icon = <NotHealthyBadge />
+  if (proxy.healthy) {
+    icon = <HealthyBadge />
+  }
+
+  return icon
+}
+
+const useStyles = makeStyles((theme) => ({
+  preferredrow: {
+    // TODO: What is the best way to show what proxy is currently being used?
+    backgroundColor: theme.palette.secondary.main,
+    outline: `3px solid ${theme.palette.secondary.light}`,
+    outlineOffset: -3,
+  },
+}))