Add base for proxies

coder · BrunoQuaresma · May 30, 2023 · May 17, 2023 · May 30, 2023 · May 30, 2023
commit 07babacec0404b45217ea3be14f803a6ce7c6f07
diff --git a/site/src/components/Navbar/Navbar.test.tsx b/site/src/components/Navbar/Navbar.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react"
 import { App } from "app"
-import { Language } from "components/NavbarView/NavbarView"
+import { Language } from "./NavbarView"
 import { rest } from "msw"
 import {
   MockEntitlementsWithAuditLog,

diff --git a/site/src/components/Navbar/Navbar.tsx b/site/src/components/Navbar/Navbar.tsx
@@ -4,7 +4,8 @@ import { useFeatureVisibility } from "hooks/useFeatureVisibility"
 import { useMe } from "hooks/useMe"
 import { usePermissions } from "hooks/usePermissions"
 import { FC } from "react"
-import { NavbarView } from "../NavbarView/NavbarView"
+import { NavbarView } from "./NavbarView"
+import { useProxy } from "contexts/ProxyContext"
 
 export const Navbar: FC = () => {
   const { appearance, buildInfo } = useDashboard()
@@ -16,6 +17,7 @@ export const Navbar: FC = () => {
     featureVisibility["audit_log"] && Boolean(permissions.viewAuditLog)
   const canViewDeployment = Boolean(permissions.viewDeploymentValues)
   const onSignOut = () => authSend("SIGN_OUT")
+  const proxyContextValue = useProxy()
 
   return (
     <NavbarView
@@ -26,6 +28,7 @@ export const Navbar: FC = () => {
       onSignOut={onSignOut}
       canViewAuditLog={canViewAuditLog}
       canViewDeployment={canViewDeployment}
+      proxyContextValue={proxyContextValue}
     />
   )
 }
diff --git a/...ponents/NavbarView/NavbarView.stories.tsx → .../components/Navbar/NavbarView.stories.tsx b/...ponents/NavbarView/NavbarView.stories.tsx → .../components/Navbar/NavbarView.stories.tsx
diff --git a/...components/NavbarView/NavbarView.test.tsx → ...src/components/Navbar/NavbarView.test.tsx b/...components/NavbarView/NavbarView.test.tsx → ...src/components/Navbar/NavbarView.test.tsx
@@ -1,7 +1,23 @@
 import { screen } from "@testing-library/react"
-import { MockUser, MockUser2 } from "../../testHelpers/entities"
+import {
+  MockPrimaryWorkspaceProxy,
+  MockUser,
+  MockUser2,
+} from "../../testHelpers/entities"
 import { render } from "../../testHelpers/renderHelpers"
 import { Language as navLanguage, NavbarView } from "./NavbarView"
+import { ProxyContextValue } from "contexts/ProxyContext"
+
+const proxyContextValue: ProxyContextValue = {
+  proxy: {
+    preferredPathAppURL: "",
+    preferredWildcardHostname: "",
+    selectedProxy: MockPrimaryWorkspaceProxy,
+  },
+  isLoading: false,
+  isFetched: true,
+  setProxy: jest.fn(),
+}
 
 describe("NavbarView", () => {
   const noop = () => {
@@ -23,6 +39,7 @@ describe("NavbarView", () => {
   it("workspaces nav link has the correct href", async () => {
     render(
       <NavbarView
+        proxyContextValue={proxyContextValue}
         user={MockUser}
         onSignOut={noop}
         canViewAuditLog
@@ -36,6 +53,7 @@ describe("NavbarView", () => {
   it("templates nav link has the correct href", async () => {
     render(
       <NavbarView
+        proxyContextValue={proxyContextValue}
         user={MockUser}
         onSignOut={noop}
         canViewAuditLog
@@ -49,6 +67,7 @@ describe("NavbarView", () => {
   it("users nav link has the correct href", async () => {
     render(
       <NavbarView
+        proxyContextValue={proxyContextValue}
         user={MockUser}
         onSignOut={noop}
         canViewAuditLog
@@ -70,6 +89,7 @@ describe("NavbarView", () => {
     // When
     render(
       <NavbarView
+        proxyContextValue={proxyContextValue}
         user={mockUser}
         onSignOut={noop}
         canViewAuditLog
@@ -86,6 +106,7 @@ describe("NavbarView", () => {
   it("audit nav link has the correct href", async () => {
     render(
       <NavbarView
+        proxyContextValue={proxyContextValue}
         user={MockUser}
         onSignOut={noop}
         canViewAuditLog
@@ -99,6 +120,7 @@ describe("NavbarView", () => {
   it("audit nav link is hidden for members", async () => {
     render(
       <NavbarView
+        proxyContextValue={proxyContextValue}
         user={MockUser2}
         onSignOut={noop}
         canViewAuditLog={false}
@@ -112,6 +134,7 @@ describe("NavbarView", () => {
   it("deployment nav link has the correct href", async () => {
     render(
       <NavbarView
+        proxyContextValue={proxyContextValue}
         user={MockUser}
         onSignOut={noop}
         canViewAuditLog
@@ -127,6 +150,7 @@ describe("NavbarView", () => {
   it("deployment nav link is hidden for members", async () => {
     render(
       <NavbarView
+        proxyContextValue={proxyContextValue}
         user={MockUser2}
         onSignOut={noop}
         canViewAuditLog={false}

diff --git a/.../src/components/NavbarView/NavbarView.tsx → site/src/components/Navbar/NavbarView.tsx b/.../src/components/NavbarView/NavbarView.tsx → site/src/components/Navbar/NavbarView.tsx
@@ -5,13 +5,25 @@ import ListItem from "@mui/material/ListItem"
 import { makeStyles } from "@mui/styles"
 import MenuIcon from "@mui/icons-material/Menu"
 import { CoderIcon } from "components/Icons/CoderIcon"
-import { useState } from "react"
+import { FC, useRef, useState } from "react"
 import { NavLink, useLocation } from "react-router-dom"
 import { colors } from "theme/colors"
 import * as TypesGen from "../../api/typesGenerated"
 import { navHeight } from "../../theme/constants"
 import { combineClasses } from "../../utils/combineClasses"
 import { UserDropdown } from "../UserDropdown/UsersDropdown"
+import Box from "@mui/material/Box"
+import Menu from "@mui/material/Menu"
+import Button from "@mui/material/Button"
+import MenuItem from "@mui/material/MenuItem"
+import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined"
+import { ProxyContextValue } from "contexts/ProxyContext"
+import { displayError } from "components/GlobalSnackbar/utils"
+import SignalCellular1BarOutlined from "@mui/icons-material/SignalCellular1BarOutlined"
+import SignalCellular2BarOutlined from "@mui/icons-material/SignalCellular2BarOutlined"
+import SignalCellular4BarOutlined from "@mui/icons-material/SignalCellular4BarOutlined"
+import SignalCellularConnectedNoInternet0BarOutlined from "@mui/icons-material/SignalCellularConnectedNoInternet0BarOutlined"
+import { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`
 
@@ -23,6 +35,7 @@ export interface NavbarViewProps {
   onSignOut: () => void
   canViewAuditLog: boolean
   canViewDeployment: boolean
+  proxyContextValue: ProxyContextValue
 }
 
 export const Language = {
@@ -83,14 +96,15 @@ const NavItems: React.FC<
     </List>
   )
 }
-export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
+export const NavbarView: FC<NavbarViewProps> = ({
   user,
   logo_url,
   buildInfo,
   supportLinks,
   onSignOut,
   canViewAuditLog,
   canViewDeployment,
+  proxyContextValue,
 }) => {
   const styles = useStyles()
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -145,7 +159,14 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
           canViewDeployment={canViewDeployment}
         />
 
-        <div className={styles.profileButton}>
+        <Box
+          display="flex"
+          marginLeft={{ lg: "auto" }}
+          gap={2}
+          alignItems="center"
+          paddingRight={2}
+        >
+          <ProxyMenu proxyContextValue={proxyContextValue} />
           {user && (
             <UserDropdown
               user={user}
@@ -154,12 +175,148 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
               onSignOut={onSignOut}
             />
           )}
-        </div>
+        </Box>
       </div>
     </nav>
   )
 }
 
+const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
+  proxyContextValue,
+}) => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const selectedProxy = proxyContextValue.proxy.selectedProxy
+
+  const closeMenu = () => setIsOpen(false)
+
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        onClick={() => setIsOpen(true)}
+        size="small"
+        endIcon={<KeyboardArrowDownOutlined />}
+        sx={{
+          "& .MuiSvgIcon-root": { fontSize: 14 },
+        }}
+      >
+        {selectedProxy ? (
+          <Box display="flex" gap={1} alignItems="center">
+            <Box width={14} height={14} lineHeight={0}>
+              <Box
+                component="img"
+                src={selectedProxy.icon_url}
+                alt=""
+                sx={{ objectFit: "contain" }}
+                width="100%"
+                height="100%"
+              />
+            </Box>
+            {selectedProxy.display_name}
+            <ProxyStatusIcon
+              proxy={selectedProxy}
+              latency={
+                proxyContextValue.proxyLatencies?.[selectedProxy.id]
+                  ?.latencyMS ?? 0
+              }
+            />
+          </Box>
+        ) : (
+          "Select Proxy"
+        )}
+      </Button>
+      <Menu
+        open={isOpen}
+        anchorEl={buttonRef.current}
+        onClick={closeMenu}
+        onClose={closeMenu}
+      >
+        {proxyContextValue.proxies?.map((proxy) => (
+          <MenuItem
+            onClick={() => {
+              if (!proxy.healthy) {
+                displayError("Please select a healthy workspace proxy.")
+                closeMenu()
+                return
+              }
+
+              proxyContextValue.setProxy(proxy)
+              closeMenu()
+            }}
+            key={proxy.id}
+            selected={proxy.id === proxyContextValue.proxy.selectedProxy?.id}
+            sx={{
+              "& .MuiSvgIcon-root": { fontSize: 16 },
+            }}
+          >
+            <Box display="flex" gap={2} alignItems="center" width="100%">
+              <Box width={16} height={16} lineHeight={0}>
+                <Box
+                  component="img"
+                  src={proxy.icon_url}
+                  alt=""
+                  sx={{ objectFit: "contain" }}
+                  width="100%"
+                  height="100%"
+                />
+              </Box>
+              {proxy.display_name}
+              <ProxyStatusIcon
+                proxy={proxy}
+                latency={
+                  proxyContextValue.proxyLatencies?.[proxy.id]?.latencyMS ?? 0
+                }
+                sx={{
+                  marginLeft: "auto",
+                }}
+              />
+            </Box>
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}
+
+const ProxyStatusIcon: FC<
+  { proxy: TypesGen.Region; latency: number } & SvgIconProps
+> = ({ proxy, latency, ...svgProps }) => {
+  if (!proxy.healthy) {
+    return (
+      <SignalCellularConnectedNoInternet0BarOutlined
+        {...svgProps}
+        sx={{ color: (theme) => theme.palette.warning.light, ...svgProps.sx }}
+      />
+    )
+  }
+
+  if (latency >= 150 && latency < 300) {
+    return (
+      <SignalCellular2BarOutlined
+        {...svgProps}
+        sx={{ color: (theme) => theme.palette.warning.light, ...svgProps.sx }}
+      />
+    )
+  }
+
+  if (latency >= 300) {
+    return (
+      <SignalCellular1BarOutlined
+        {...svgProps}
+        sx={{ color: (theme) => theme.palette.error.light, ...svgProps.sx }}
+      />
+    )
+  }
+
+  return (
+    <SignalCellular4BarOutlined
+      {...svgProps}
+      sx={{ color: (theme) => theme.palette.success.light, ...svgProps.sx }}
+    />
+  )
+}
+
 const useStyles = makeStyles((theme) => ({
   root: {
     height: navHeight,
@@ -192,12 +349,6 @@ const useStyles = makeStyles((theme) => ({
       display: "flex",
     },
   },
-  profileButton: {
-    paddingRight: theme.spacing(2),
-    [theme.breakpoints.up("md")]: {
-      marginLeft: "auto",
-    },
-  },
   mobileMenuButton: {
     [theme.breakpoints.up("md")]: {
       display: "none",

diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from "@mui/styles"
 import GroupAdd from "@mui/icons-material/GroupAddOutlined"
 import PersonAdd from "@mui/icons-material/PersonAddOutlined"
 import { useMachine } from "@xstate/react"
-import { USERS_LINK } from "components/NavbarView/NavbarView"
+import { USERS_LINK } from "components/Navbar/NavbarView"
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"
 import { useFeatureVisibility } from "hooks/useFeatureVisibility"
 import { usePermissions } from "hooks/usePermissions"

diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx
@@ -11,7 +11,7 @@ import {
 } from "react"
 import { ProxyLatencyReport, useProxyLatency } from "./useProxyLatency"
 
-interface ProxyContextValue {
+export interface ProxyContextValue {
   proxy: PreferredProxy
   proxies?: Region[]
   proxyLatencies?: Record<string, ProxyLatencyReport>