feat: Add deployment settings page

This allows deployment admins to view options set on their deployments.
coder · kylecarbs · Oct 17, 2022 · Sep 20, 2022 · Sep 20, 2022 · Sep 22, 2022
commit c064adb0256324f6de67264e23f43a0b4f56dc5f
diff --git a/codersdk/flags.go b/codersdk/flags.go
@@ -38,7 +38,7 @@ type DeploymentFlags struct {
 	OAuth2GithubEnterpriseBaseURL    *StringFlag      `json:"oauth2_github_enterprise_base_url" typescript:",notnull"`
 	OIDCAllowSignups                 *BoolFlag        `json:"oidc_allow_signups" typescript:",notnull"`
 	OIDCClientID                     *StringFlag      `json:"oidc_client_id" typescript:",notnull"`
-	OIDCClientSecret                 *StringFlag      `json:"oidc_cliet_secret" typescript:",notnull"`
+	OIDCClientSecret                 *StringFlag      `json:"oidc_client_secret" typescript:",notnull"`
 	OIDCEmailDomain                  *StringFlag      `json:"oidc_email_domain" typescript:",notnull"`
 	OIDCIssuerURL                    *StringFlag      `json:"oidc_issuer_url" typescript:",notnull"`
 	OIDCScopes                       *StringArrayFlag `json:"oidc_scopes" typescript:",notnull"`
@@ -49,7 +49,7 @@ type DeploymentFlags struct {
 	TLSCertFiles                     *StringArrayFlag `json:"tls_cert_files" typescript:",notnull"`
 	TLSClientCAFile                  *StringFlag      `json:"tls_client_ca_file" typescript:",notnull"`
 	TLSClientAuth                    *StringFlag      `json:"tls_client_auth" typescript:",notnull"`
-	TLSKeyFiles                      *StringArrayFlag `json:"tls_key_tiles" typescript:",notnull"`
+	TLSKeyFiles                      *StringArrayFlag `json:"tls_key_files" typescript:",notnull"`
 	TLSMinVersion                    *StringFlag      `json:"tls_min_version" typescript:",notnull"`
 	TraceEnable                      *BoolFlag        `json:"trace_enable" typescript:",notnull"`
 	SecureAuthCookie                 *BoolFlag        `json:"secure_auth_cookie" typescript:",notnull"`

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -74,12 +74,12 @@ const GeneralSettingsPage = lazy(
 const SecuritySettingsPage = lazy(
   () => import("./pages/DeploySettingsPage/SecuritySettingsPage"),
 )
-const MetricsSettingsPage = lazy(
-  () => import("./pages/DeploySettingsPage/MetricsSettingsPage"),
-)
 const AuthSettingsPage = lazy(
   () => import("./pages/DeploySettingsPage/AuthSettingsPage"),
 )
+const NetworkSettingsPage = lazy(
+  () => import("./pages/DeploySettingsPage/NetworkSettingsPage"),
+)
 
 export const AppRouter: FC = () => {
   const xServices = useContext(XServiceContext)
@@ -280,14 +280,14 @@ export const AppRouter: FC = () => {
             }
           />
           <Route
-            path="metrics"
+            path="network"
             element={
               <AuthAndFrame>
                 <RequirePermission
                   isFeatureVisible={Boolean(permissions?.viewDeploymentFlags)}
                 >
                   <DeploySettingsLayout>
-                    <MetricsSettingsPage />
+                    <NetworkSettingsPage />
                   </DeploySettingsLayout>
                 </RequirePermission>
               </AuthAndFrame>

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -647,3 +647,9 @@ export const getDeploymentFlags =
     const response = await axios.get(`/api/v2/flags/deployment`)
     return response.data
   }
+
+export const getReplicas =
+  async (): Promise<TypesGen.Replica[]> => {
+    const response = await axios.get(`/api/v2/replicas`)
+    return response.data
+  }
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -293,7 +293,7 @@ export interface DeploymentFlags {
   readonly oauth2_github_enterprise_base_url: StringFlag
   readonly oidc_allow_signups: BoolFlag
   readonly oidc_client_id: StringFlag
-  readonly oidc_cliet_secret: StringFlag
+  readonly oidc_client_secret: StringFlag
   readonly oidc_email_domain: StringFlag
   readonly oidc_issuer_url: StringFlag
   readonly oidc_scopes: StringArrayFlag
@@ -304,7 +304,7 @@ export interface DeploymentFlags {
   readonly tls_cert_files: StringArrayFlag
   readonly tls_client_ca_file: StringFlag
   readonly tls_client_auth: StringFlag
-  readonly tls_key_tiles: StringArrayFlag
+  readonly tls_key_files: StringArrayFlag
   readonly tls_min_version: StringFlag
   readonly trace_enable: BoolFlag
   readonly secure_auth_cookie: BoolFlag

diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx
@@ -7,27 +7,32 @@ import React from "react"
 export const Header: React.FC<{
   title: string | JSX.Element
   description: string | JSX.Element
-  docsHref: string
-}> = ({ title, description, docsHref }) => {
+  secondary?: boolean
+  docsHref?: string
+}> = ({ title, description, docsHref, secondary }) => {
   const styles = useStyles()
 
   return (
     <Stack alignItems="baseline" direction="row" justifyContent="space-between">
       <div className={styles.headingGroup}>
-        <h1 className={styles.title}>{title}</h1>
+        <h1 className={`${styles.title} ${secondary ? "secondary" : ""}`}>
+          {title}
+        </h1>
         <span className={styles.description}>{description}</span>
       </div>
 
-      <Button
-        size="small"
-        startIcon={<LaunchOutlined />}
-        component="a"
-        href={docsHref}
-        target="_blank"
-        variant="outlined"
-      >
-        Read the docs
-      </Button>
+      {docsHref && (
+        <Button
+          size="small"
+          startIcon={<LaunchOutlined />}
+          component="a"
+          href={docsHref}
+          target="_blank"
+          variant="outlined"
+        >
+          Read the docs
+        </Button>
+      )}
     </Stack>
   )
 }
@@ -47,6 +52,11 @@ const useStyles = makeStyles((theme) => ({
     margin: 0,
     marginBottom: theme.spacing(0.5),
     gap: theme.spacing(1),
+
+    "&.secondary": {
+      fontSize: 24,
+      fontWeight: 500,
+    },
   },
 
   description: {

diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -32,5 +32,9 @@ const useStyles = makeStyles((theme) => ({
   optionValue: {
     fontSize: 14,
     fontFamily: MONOSPACE_FONT_FAMILY,
+
+    "& ul": {
+      padding: theme.spacing(2),
+    },
   },
 }))
diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
@@ -1,8 +1,8 @@
 import { makeStyles } from "@material-ui/core/styles"
 import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
-import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
 import LockRounded from "@material-ui/icons/LockRounded"
-import BarChartOutlined from "@material-ui/icons/BarChartOutlined"
+import Globe from "@material-ui/icons/Public"
+import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
 import { Stack } from "components/Stack/Stack"
 import React, { ElementType, PropsWithChildren, ReactNode } from "react"
 import { NavLink } from "react-router-dom"
@@ -49,22 +49,22 @@ export const Sidebar: React.FC = () => {
         General
       </SidebarNavItem>
       <SidebarNavItem
-        href="../security"
-        icon={<SidebarNavItemIcon icon={LockRounded} />}
+        href="../auth"
+        icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
       >
-        Security
+        Authentication
       </SidebarNavItem>
       <SidebarNavItem
-        href="../metrics"
-        icon={<SidebarNavItemIcon icon={BarChartOutlined} />}
+        href="../network"
+        icon={<SidebarNavItemIcon icon={Globe} />}
       >
-        Metrics / observability
+        Network
       </SidebarNavItem>
       <SidebarNavItem
-        href="../auth"
-        icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
+        href="../security"
+        icon={<SidebarNavItemIcon icon={LockRounded} />}
       >
-        Authentication
+        Security
       </SidebarNavItem>
     </nav>
   )

diff --git a/site/src/components/Navbar/Navbar.tsx b/site/src/components/Navbar/Navbar.tsx
@@ -17,15 +17,15 @@ export const Navbar: React.FC = () => {
   const canViewAuditLog =
     featureVisibility[FeatureNames.AuditLog] &&
     Boolean(permissions?.viewAuditLog)
-  const canViewAdmin = Boolean(permissions?.viewDeploymentFlags)
+  const canViewDeployment = Boolean(permissions?.viewDeploymentFlags)
   const onSignOut = () => authSend("SIGN_OUT")
 
   return (
     <NavbarView
       user={me}
       onSignOut={onSignOut}
       canViewAuditLog={canViewAuditLog}
-      canViewAdmin={canViewAdmin}
+      canViewDeployment={canViewDeployment}
     />
   )
 }
diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -17,24 +17,24 @@ export interface NavbarViewProps {
   user?: TypesGen.User
   onSignOut: () => void
   canViewAuditLog: boolean
-  canViewAdmin: boolean
+  canViewDeployment: boolean
 }
 
 export const Language = {
   workspaces: "Workspaces",
   templates: "Templates",
   users: "Users",
   audit: "Audit",
-  admin: "Admin",
+  deployment: "Deployment",
 }
 
 const NavItems: React.FC<
   React.PropsWithChildren<{
     className?: string
     canViewAuditLog: boolean
-    canViewAdmin: boolean
+    canViewDeployment: boolean
   }>
-> = ({ className, canViewAuditLog, canViewAdmin }) => {
+> = ({ className, canViewAuditLog, canViewDeployment }) => {
   const styles = useStyles()
   const location = useLocation()
 
@@ -71,10 +71,10 @@ const NavItems: React.FC<
           </NavLink>
         </ListItem>
       )}
-      {canViewAdmin && (
+      {canViewDeployment && (
         <ListItem button className={styles.item}>
-          <NavLink className={styles.link} to="/admin">
-            {Language.admin}
+          <NavLink className={styles.link} to="/settings/deployment">
+            {Language.deployment}
           </NavLink>
         </ListItem>
       )}
@@ -85,7 +85,7 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
   user,
   onSignOut,
   canViewAuditLog,
-  canViewAdmin,
+  canViewDeployment,
 }) => {
   const styles = useStyles()
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -114,7 +114,7 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
             </div>
             <NavItems
               canViewAuditLog={canViewAuditLog}
-              canViewAdmin={canViewAdmin}
+              canViewDeployment={canViewDeployment}
             />
           </div>
         </Drawer>
@@ -126,7 +126,7 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
         <NavItems
           className={styles.desktopNavItems}
           canViewAuditLog={canViewAuditLog}
-          canViewAdmin={canViewAdmin}
+          canViewDeployment={canViewDeployment}
         />
 
         <div className={styles.profileButton}>

diff --git a/site/src/components/ReplicasTable/ReplicasTable.stories.tsx b/site/src/components/ReplicasTable/ReplicasTable.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import { ReplicasTable, ReplicasTableProps } from "./ReplicasTable"
+
+export default {
+  title: "components/ReplicasTable",
+  component: ReplicasTable,
+}
+
+const Template: Story<ReplicasTableProps> = (args) => <ReplicasTable {...args} />
+
+export const Single = Template.bind({})
+Single.args = {
+}
diff --git a/site/src/components/ReplicasTable/ReplicasTable.tsx b/site/src/components/ReplicasTable/ReplicasTable.tsx
@@ -0,0 +1,41 @@
+import { FC } from "react"
+import Table from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
+import TableHead from "@material-ui/core/TableHead"
+import TableRow from "@material-ui/core/TableRow"
+import { Replica } from "api/typesGenerated"
+
+export interface ReplicasTableProps {
+    replicas: Replica[]
+}
+
+export const ReplicasTable: FC<ReplicasTableProps> = ({ replicas }) => {
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell width="33%">Hostname</TableCell>
+            <TableCell width="33%">Info</TableCell>
+            <TableCell width="33%">State</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {replicas.map((replica) => (
+            <TableRow key={replica.id}>
+              <TableCell>
+                {replica.hostname}
+              </TableCell>
+              <TableCell>
+                Database Latency: {replica.database_latency / 1000}ms Relay
+                Address: {replica.relay_address}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}