coder · Emyrk · Apr 28, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 25, 2023
diff --git a/coderd/workspaceapps/proxy.go b/coderd/workspaceapps/proxy.go
@@ -618,6 +618,12 @@ func (s *Server) workspaceAgentPTY(rw http.ResponseWriter, r *http.Request) {
 
 	conn, err := websocket.Accept(rw, r, &websocket.AcceptOptions{
 		CompressionMode: websocket.CompressionDisabled,
+		// Always allow websockets from the primary dashboard URL.
+		// Terminals are opened there and connect to the proxy.
+		OriginPatterns: []string{
+			s.DashboardURL.Host,
+			s.AccessURL.Host,
+		},
 	})
 	if err != nil {
 		httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{

diff --git a/enterprise/coderd/workspaceproxy.go b/enterprise/coderd/workspaceproxy.go
@@ -7,6 +7,7 @@ import (
 	"fmt"
 	"net/http"
 	"net/url"
+	"strings"
 	"time"
 
 	"github.com/google/uuid"
@@ -57,26 +58,31 @@ func (api *API) regions(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	proxyHealth := api.ProxyHealth.HealthStatus()
-	for _, proxy := range proxies {
-		if proxy.Deleted {
-			continue
-		}
-
-		health, ok := proxyHealth[proxy.ID]
-		if !ok {
-			health.Status = proxyhealth.Unknown
+	// Only add additional regions if the proxy health is enabled.
+	// If it is nil, it is because the moons feature flag is not on.
+	// By default, we still want to return the primary region.
+	if api.ProxyHealth != nil {
+		proxyHealth := api.ProxyHealth.HealthStatus()
+		for _, proxy := range proxies {
+			if proxy.Deleted {
+				continue
+			}
+
+			health, ok := proxyHealth[proxy.ID]
+			if !ok {
+				health.Status = proxyhealth.Unknown
+			}
+
+			regions = append(regions, codersdk.Region{
+				ID:               proxy.ID,
+				Name:             proxy.Name,
+				DisplayName:      proxy.DisplayName,
+				IconURL:          proxy.Icon,
+				Healthy:          health.Status == proxyhealth.Healthy,
+				PathAppURL:       proxy.Url,
+				WildcardHostname: proxy.WildcardHostname,
+			})
 		}
-
-		regions = append(regions, codersdk.Region{
-			ID:               proxy.ID,
-			Name:             proxy.Name,
-			DisplayName:      proxy.DisplayName,
-			IconURL:          proxy.Icon,
-			Healthy:          health.Status == proxyhealth.Healthy,
-			PathAppURL:       proxy.Url,
-			WildcardHostname: proxy.WildcardHostname,
-		})
 	}
 
 	httpapi.Write(ctx, rw, http.StatusOK, codersdk.RegionsResponse{
@@ -156,6 +162,20 @@ func (api *API) postWorkspaceProxy(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	if strings.ToLower(req.Name) == "primary" {
+		httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{
+			Message: `The name "primary" is reserved for the primary region.`,
+			Detail:  "Cannot name a workspace proxy 'primary'.",
+			Validations: []codersdk.ValidationError{
+				{
+					Field:  "name",
+					Detail: "Reserved name",
+				},
+			},
+		})
+		return
+	}
+
 	id := uuid.New()
 	secret, err := cryptorand.HexString(64)
 	if err != nil {

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"),
 )
@@ -272,6 +276,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,14 @@ 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`)
@@ -1245,3 +1253,13 @@ export const watchBuildLogsByBuildId = (
   })
   return socket
 }
+
+export const issueReconnectingPTYSignedToken = async (
+  params: TypesGen.IssueReconnectingPTYSignedTokenRequest,
+): Promise<TypesGen.IssueReconnectingPTYSignedTokenResponse> => {
+  const response = await axios.post(
+    "/api/v2/applications/reconnecting-pty-signed-token",
+    params,
+  )
+  return response.data
+}
diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
@@ -1,17 +1,32 @@
 import { Story } from "@storybook/react"
 import {
+  MockPrimaryRegion,
+  MockRegions,
   MockWorkspace,
   MockWorkspaceAgent,
   MockWorkspaceApp,
 } from "testHelpers/entities"
 import { AppLink, AppLinkProps } from "./AppLink"
+import { ProxyContext, getURLs } from "contexts/ProxyContext"
 
 export default {
   title: "components/AppLink",
   component: AppLink,
 }
 
-const Template: Story<AppLinkProps> = (args) => <AppLink {...args} />
+const Template: Story<AppLinkProps> = (args) => (
+  <ProxyContext.Provider
+    value={{
+      proxy: getURLs(MockRegions, MockPrimaryRegion),
+      isLoading: false,
+      setProxy: () => {
+        return
+      },
+    }}
+  >
+    <AppLink {...args} />
+  </ProxyContext.Provider>
+)
 
 export const WithIcon = Template.bind({})
 WithIcon.args = {

diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -10,25 +10,24 @@ import * as TypesGen from "../../api/typesGenerated"
 import { generateRandomString } from "../../utils/random"
 import { BaseIcon } from "./BaseIcon"
 import { ShareIcon } from "./ShareIcon"
+import { useProxy } from "contexts/ProxyContext"
 
 const Language = {
   appTitle: (appName: string, identifier: string): string =>
     `${appName} - ${identifier}`,
 }
 
 export interface AppLinkProps {
-  appsHost?: string
   workspace: TypesGen.Workspace
   app: TypesGen.WorkspaceApp
   agent: TypesGen.WorkspaceAgent
 }
 
-export const AppLink: FC<AppLinkProps> = ({
-  appsHost,
-  app,
-  workspace,
-  agent,
-}) => {
+export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
+  const { proxy } = useProxy()
+  const preferredPathBase = proxy.preferredPathAppURL
+  const appsHost = proxy.preferredWildcardHostname
+
   const styles = useStyles()
   const username = workspace.owner_name
 
@@ -43,14 +42,15 @@ 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)}`
   }
+
   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/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx
@@ -13,7 +13,6 @@ import { Outlet } from "react-router-dom"
 import { dashboardContentBottomPadding } from "theme/constants"
 import { updateCheckMachine } from "xServices/updateCheck/updateCheckXService"
 import { Navbar } from "../Navbar/Navbar"
-import { DashboardProvider } from "./DashboardProvider"
 
 export const DashboardLayout: FC = () => {
   const styles = useStyles()
@@ -28,7 +27,7 @@ export const DashboardLayout: FC = () => {
   const canViewDeployment = Boolean(permissions.viewDeploymentValues)
 
   return (
-    <DashboardProvider>
+    <>
       <ServiceBanner />
       {canViewDeployment && <LicenseBanner />}
 
@@ -57,7 +56,7 @@ export const DashboardLayout: FC = () => {
 
         <DeploymentBanner />
       </div>
-    </DashboardProvider>
+    </>
   )
 }
 

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,6 +43,7 @@ export const portForwardURL = (
 
 const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
   const { host, workspaceName, agentName, agentId, username } = props
+
   const styles = useStyles()
   const [port, setPort] = useState("3000")
   const urlExample = portForwardURL(

diff --git a/site/src/components/RequireAuth/RequireAuth.tsx b/site/src/components/RequireAuth/RequireAuth.tsx
@@ -4,6 +4,8 @@ import { Navigate, useLocation } from "react-router"
 import { Outlet } from "react-router-dom"
 import { embedRedirect } from "../../utils/redirect"
 import { FullScreenLoader } from "../Loader/FullScreenLoader"
+import { DashboardProvider } from "components/Dashboard/DashboardProvider"
+import { ProxyProvider } from "contexts/ProxyContext"
 
 export const RequireAuth: FC = () => {
   const [authState] = useAuth()
@@ -21,6 +23,14 @@ export const RequireAuth: FC = () => {
   ) {
     return <FullScreenLoader />
   } else {
-    return <Outlet />
+    // Authenticated pages have access to some contexts for knowing enabled experiments
+    // and where to route workspace connections.
+    return (
+      <DashboardProvider>
+        <ProxyProvider>
+          <Outlet />
+        </ProxyProvider>
+      </DashboardProvider>
+    )
   }
 }