mirror of
https://github.com/coder/coder.git
synced 2025-07-12 00:14:10 +00:00
feat: Add minor settings improvements (#4626)
This commit is contained in:
Bruno Quaresma
GitHub
@ -6,7 +6,7 @@ import React from "react"
|
||||
|
||||
export const Header: React.FC<{
|
||||
title: string | JSX.Element
|
||||
description: string | JSX.Element
|
||||
description?: string | JSX.Element
|
||||
secondary?: boolean
|
||||
docsHref?: string
|
||||
}> = ({ title, description, docsHref, secondary }) => {
|
||||
@ -18,7 +18,9 @@ export const Header: React.FC<{
|
||||
<h1 className={`${styles.title} ${secondary ? "secondary" : ""}`}>
|
||||
{title}
|
||||
</h1>
|
||||
<span className={styles.description}>{description}</span>
|
||||
{description && (
|
||||
<span className={styles.description}>{description}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{docsHref && (
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { makeStyles } from "@material-ui/core/styles"
|
||||
import React, { PropsWithChildren } from "react"
|
||||
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
|
||||
import { DisabledBadge, EnabledBadge } from "./Badges"
|
||||
|
||||
export const OptionName: React.FC<PropsWithChildren> = ({ children }) => {
|
||||
const styles = useStyles()
|
||||
@ -14,8 +15,39 @@ export const OptionDescription: React.FC<PropsWithChildren> = ({
|
||||
return <span className={styles.optionDescription}>{children}</span>
|
||||
}
|
||||
|
||||
const NotSet: React.FC = () => {
|
||||
const styles = useStyles()
|
||||
|
||||
return <span className={styles.optionValue}>Not set</span>
|
||||
}
|
||||
|
||||
export const OptionValue: React.FC<PropsWithChildren> = ({ children }) => {
|
||||
const styles = useStyles()
|
||||
|
||||
if (typeof children === "boolean") {
|
||||
return children ? <EnabledBadge /> : <DisabledBadge />
|
||||
}
|
||||
|
||||
if (Array.isArray(children)) {
|
||||
if (children.length === 0) {
|
||||
return <NotSet />
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className={styles.optionValueList}>
|
||||
{children.map((item) => (
|
||||
<li key={item} className={styles.optionValue}>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
if (children === "") {
|
||||
return <NotSet />
|
||||
}
|
||||
|
||||
return <span className={styles.optionValue}>{children}</span>
|
||||
}
|
||||
|
||||
@ -23,18 +55,31 @@ const useStyles = makeStyles((theme) => ({
|
||||
optionName: {
|
||||
display: "block",
|
||||
},
|
||||
|
||||
optionDescription: {
|
||||
display: "block",
|
||||
color: theme.palette.text.secondary,
|
||||
fontSize: 14,
|
||||
marginTop: theme.spacing(0.5),
|
||||
},
|
||||
|
||||
optionValue: {
|
||||
fontSize: 14,
|
||||
fontFamily: MONOSPACE_FONT_FAMILY,
|
||||
overflowWrap: "anywhere",
|
||||
userSelect: "all",
|
||||
|
||||
"& ul": {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
},
|
||||
|
||||
optionValueList: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
listStylePosition: "inside",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: theme.spacing(0.5),
|
||||
},
|
||||
}))
|
||||
|
||||
64
site/src/components/DeploySettingsLayout/OptionsTable.tsx
Normal file
64
site/src/components/DeploySettingsLayout/OptionsTable.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import { makeStyles } from "@material-ui/core/styles"
|
||||
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 { DeploymentFlags } from "api/typesGenerated"
|
||||
import {
|
||||
OptionDescription,
|
||||
OptionName,
|
||||
OptionValue,
|
||||
} from "components/DeploySettingsLayout/Option"
|
||||
import React from "react"
|
||||
|
||||
const OptionsTable: React.FC<{ options: Partial<DeploymentFlags> }> = ({
|
||||
options,
|
||||
}) => {
|
||||
const styles = useStyles()
|
||||
|
||||
return (
|
||||
<TableContainer>
|
||||
<Table className={styles.table}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width="50%">Option</TableCell>
|
||||
<TableCell width="50%">Value</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{Object.values(options).map((option) => {
|
||||
return (
|
||||
<TableRow key={option.flag}>
|
||||
<TableCell>
|
||||
<OptionName>{option.name}</OptionName>
|
||||
<OptionDescription>{option.description}</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>{option.value}</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
table: {
|
||||
"& td": {
|
||||
paddingTop: theme.spacing(3),
|
||||
paddingBottom: theme.spacing(3),
|
||||
},
|
||||
|
||||
"& td:last-child, & th:last-child": {
|
||||
paddingLeft: theme.spacing(4),
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
export default OptionsTable
|
||||
@ -1,9 +1,3 @@
|
||||
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 {
|
||||
Badges,
|
||||
DisabledBadge,
|
||||
@ -11,21 +5,25 @@ import {
|
||||
} from "components/DeploySettingsLayout/Badges"
|
||||
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
|
||||
import { Header } from "components/DeploySettingsLayout/Header"
|
||||
import {
|
||||
OptionDescription,
|
||||
OptionName,
|
||||
OptionValue,
|
||||
} from "components/DeploySettingsLayout/Option"
|
||||
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
|
||||
import { Stack } from "components/Stack/Stack"
|
||||
import React from "react"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
import { pageTitle } from "util/page"
|
||||
|
||||
const AuthSettingsPage: React.FC = () => {
|
||||
const { deploymentFlags } = useDeploySettings()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{pageTitle("Authentication Settings")}</title>
|
||||
</Helmet>
|
||||
|
||||
<Stack direction="column" spacing={6}>
|
||||
<div>
|
||||
<Header title="Authentication" />
|
||||
|
||||
<Header
|
||||
title="Login with OpenID Connect"
|
||||
secondary
|
||||
@ -41,121 +39,16 @@ const AuthSettingsPage: React.FC = () => {
|
||||
)}
|
||||
</Badges>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width="50%">Option</TableCell>
|
||||
<TableCell width="50%">Value</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oidc_client_id.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oidc_client_id.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oidc_client_id.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oidc_client_secret.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oidc_client_secret.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oidc_client_secret.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oidc_allow_signups.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oidc_allow_signups.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oidc_allow_signups.value.toString()}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oidc_email_domain.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oidc_email_domain.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oidc_email_domain.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oidc_issuer_url.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oidc_issuer_url.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oidc_issuer_url.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>{deploymentFlags.oidc_scopes.name}</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oidc_scopes.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
<ul>
|
||||
{deploymentFlags.oidc_scopes.value.map((scope) => (
|
||||
<li key={scope}>{scope}</li>
|
||||
))}
|
||||
</ul>
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<OptionsTable
|
||||
options={{
|
||||
oidc_client_id: deploymentFlags.oidc_client_id,
|
||||
oidc_client_secret: deploymentFlags.oidc_client_secret,
|
||||
oidc_allow_signups: deploymentFlags.oidc_allow_signups,
|
||||
oidc_email_domain: deploymentFlags.oidc_email_domain,
|
||||
oidc_issuer_url: deploymentFlags.oidc_issuer_url,
|
||||
oidc_scopes: deploymentFlags.oidc_scopes,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -174,137 +67,21 @@ const AuthSettingsPage: React.FC = () => {
|
||||
)}
|
||||
</Badges>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width="50%">Option</TableCell>
|
||||
<TableCell width="50%">Value</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oauth2_github_client_id.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oauth2_github_client_id.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oauth2_github_client_id.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oauth2_github_client_secret.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oauth2_github_client_secret.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oauth2_github_client_secret.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oauth2_github_allow_signups.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oauth2_github_allow_signups.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oauth2_github_allow_signups.value.toString()}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oauth2_github_allowed_organizations.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{
|
||||
deploymentFlags.oauth2_github_allowed_organizations
|
||||
.description
|
||||
}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
<ul>
|
||||
{deploymentFlags.oauth2_github_allowed_organizations.value.map(
|
||||
(org) => (
|
||||
<li key={org}>{org}</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oauth2_github_allowed_teams.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.oauth2_github_allowed_teams.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
<ul>
|
||||
{deploymentFlags.oauth2_github_allowed_teams.value.map(
|
||||
(team) => (
|
||||
<li key={team}>{team}</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.oauth2_github_enterprise_base_url.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{
|
||||
deploymentFlags.oauth2_github_enterprise_base_url
|
||||
.description
|
||||
}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.oauth2_github_enterprise_base_url.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<OptionsTable
|
||||
options={{
|
||||
oauth2_github_client_id: deploymentFlags.oauth2_github_client_id,
|
||||
oauth2_github_client_secret:
|
||||
deploymentFlags.oauth2_github_client_secret,
|
||||
oauth2_github_allow_signups:
|
||||
deploymentFlags.oauth2_github_allow_signups,
|
||||
oauth2_github_allowed_organizations:
|
||||
deploymentFlags.oauth2_github_allowed_organizations,
|
||||
oauth2_github_allowed_teams:
|
||||
deploymentFlags.oauth2_github_allowed_teams,
|
||||
oauth2_github_enterprise_base_url:
|
||||
deploymentFlags.oauth2_github_enterprise_base_url,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</>
|
||||
|
||||
@ -1,83 +1,32 @@
|
||||
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 { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
|
||||
import { Header } from "components/DeploySettingsLayout/Header"
|
||||
import {
|
||||
OptionDescription,
|
||||
OptionName,
|
||||
OptionValue,
|
||||
} from "components/DeploySettingsLayout/Option"
|
||||
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
|
||||
import React from "react"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
import { pageTitle } from "util/page"
|
||||
|
||||
const GeneralSettingsPage: React.FC = () => {
|
||||
const { deploymentFlags } = useDeploySettings()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{pageTitle("General Settings")}</title>
|
||||
</Helmet>
|
||||
|
||||
<Header
|
||||
title="General"
|
||||
description="Information about your Coder deployment."
|
||||
docsHref="https://coder.com/docs/coder-oss/latest/admin/configure"
|
||||
/>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width="50%">Option</TableCell>
|
||||
<TableCell width="50%">Value</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>{deploymentFlags.access_url.name}</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.access_url.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>{deploymentFlags.access_url.value}</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>{deploymentFlags.address.name}</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.address.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>{deploymentFlags.address.value}</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.wildcard_access_url.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.wildcard_access_url.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.wildcard_access_url.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<OptionsTable
|
||||
options={{
|
||||
access_url: deploymentFlags.access_url,
|
||||
address: deploymentFlags.address,
|
||||
wildcard_access_url: deploymentFlags.wildcard_access_url,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,120 +1,34 @@
|
||||
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 {
|
||||
DisabledBadge,
|
||||
EnabledBadge,
|
||||
} from "components/DeploySettingsLayout/Badges"
|
||||
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
|
||||
import { Header } from "components/DeploySettingsLayout/Header"
|
||||
import {
|
||||
OptionDescription,
|
||||
OptionName,
|
||||
OptionValue,
|
||||
} from "components/DeploySettingsLayout/Option"
|
||||
import { Stack } from "components/Stack/Stack"
|
||||
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
|
||||
import React from "react"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
import { pageTitle } from "util/page"
|
||||
|
||||
const NetworkSettingsPage: React.FC = () => {
|
||||
const { deploymentFlags } = useDeploySettings()
|
||||
|
||||
return (
|
||||
<Stack direction="column" spacing={6}>
|
||||
<div>
|
||||
<Header
|
||||
title="Network"
|
||||
description="Configure your deployment connectivity."
|
||||
docsHref="https://coder.com/docs/coder-oss/latest/networking"
|
||||
/>
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{pageTitle("Network Settings")}</title>
|
||||
</Helmet>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width="50%">Option</TableCell>
|
||||
<TableCell width="50%">Value</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.derp_server_enabled.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.derp_server_enabled.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
<Header
|
||||
title="Network"
|
||||
description="Configure your deployment connectivity."
|
||||
docsHref="https://coder.com/docs/coder-oss/latest/admin/networking"
|
||||
/>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.derp_server_enabled.value ? (
|
||||
<EnabledBadge />
|
||||
) : (
|
||||
<DisabledBadge />
|
||||
)}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.derp_server_region_name.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.derp_server_region_name.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.derp_server_region_name.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.derp_server_stun_address.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.derp_server_stun_address.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.derp_server_stun_address.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.derp_config_url.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.derp_config_url.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.derp_config_url.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</Stack>
|
||||
<OptionsTable
|
||||
options={{
|
||||
derp_server_enabled: deploymentFlags.derp_server_enabled,
|
||||
derp_server_region_name: deploymentFlags.derp_server_region_name,
|
||||
derp_server_stun_address: deploymentFlags.derp_server_stun_address,
|
||||
derp_config_url: deploymentFlags.derp_config_url,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,3 @@
|
||||
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 { useActor } from "@xstate/react"
|
||||
import { FeatureNames } from "api/types"
|
||||
import {
|
||||
@ -14,13 +8,11 @@ import {
|
||||
} from "components/DeploySettingsLayout/Badges"
|
||||
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
|
||||
import { Header } from "components/DeploySettingsLayout/Header"
|
||||
import {
|
||||
OptionDescription,
|
||||
OptionName,
|
||||
OptionValue,
|
||||
} from "components/DeploySettingsLayout/Option"
|
||||
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
|
||||
import { Stack } from "components/Stack/Stack"
|
||||
import React, { useContext } from "react"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
import { pageTitle } from "util/page"
|
||||
import { XServiceContext } from "xServices/StateContext"
|
||||
|
||||
const SecuritySettingsPage: React.FC = () => {
|
||||
@ -29,201 +21,83 @@ const SecuritySettingsPage: React.FC = () => {
|
||||
const [entitlementsState] = useActor(xServices.entitlementsXService)
|
||||
|
||||
return (
|
||||
<Stack direction="column" spacing={6}>
|
||||
<div>
|
||||
<Header
|
||||
title="Security"
|
||||
description="Ensure your Coder deployment is secure."
|
||||
/>
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{pageTitle("Security Settings")}</title>
|
||||
</Helmet>
|
||||
<Stack direction="column" spacing={6}>
|
||||
<div>
|
||||
<Header
|
||||
title="Security"
|
||||
description="Ensure your Coder deployment is secure."
|
||||
/>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width="50%">Option</TableCell>
|
||||
<TableCell width="50%">Value</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.ssh_keygen_algorithm.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.ssh_keygen_algorithm.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
<OptionsTable
|
||||
options={{
|
||||
ssh_keygen_algorithm: deploymentFlags.ssh_keygen_algorithm,
|
||||
secure_auth_cookie: deploymentFlags.secure_auth_cookie,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.ssh_keygen_algorithm.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.secure_auth_cookie.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.secure_auth_cookie.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
<div>
|
||||
<Header
|
||||
title="Audit Logging"
|
||||
secondary
|
||||
description="Allow auditors to monitor user operations in your deployment."
|
||||
docsHref="https://coder.com/docs/coder-oss/latest/admin/audit-logs"
|
||||
/>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.secure_auth_cookie.value ? (
|
||||
<EnabledBadge />
|
||||
) : (
|
||||
<DisabledBadge />
|
||||
)}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
<Badges>
|
||||
{entitlementsState.context.entitlements.features[
|
||||
FeatureNames.AuditLog
|
||||
].enabled ? (
|
||||
<EnabledBadge />
|
||||
) : (
|
||||
<DisabledBadge />
|
||||
)}
|
||||
<EnterpriseBadge />
|
||||
</Badges>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Header
|
||||
title="Audit Logging"
|
||||
secondary
|
||||
description="Allow auditors to monitor user operations in your deployment."
|
||||
docsHref="https://coder.com/docs/coder-oss/latest/admin/audit-logs"
|
||||
/>
|
||||
<div>
|
||||
<Header
|
||||
title="Browser Only Connections"
|
||||
secondary
|
||||
description="Block all workspace access via SSH, port forward, and other non-browser connections."
|
||||
docsHref="https://coder.com/docs/coder-oss/latest/networking#browser-only-connections-enterprise"
|
||||
/>
|
||||
|
||||
<Badges>
|
||||
{entitlementsState.context.entitlements.features[
|
||||
FeatureNames.AuditLog
|
||||
].enabled ? (
|
||||
<EnabledBadge />
|
||||
) : (
|
||||
<DisabledBadge />
|
||||
)}
|
||||
<EnterpriseBadge />
|
||||
</Badges>
|
||||
</div>
|
||||
<Badges>
|
||||
{entitlementsState.context.entitlements.features[
|
||||
FeatureNames.BrowserOnly
|
||||
].enabled ? (
|
||||
<EnabledBadge />
|
||||
) : (
|
||||
<DisabledBadge />
|
||||
)}
|
||||
<EnterpriseBadge />
|
||||
</Badges>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Header
|
||||
title="Browser Only Connections"
|
||||
secondary
|
||||
description="Block all workspace access via SSH, port forward, and other non-browser connections."
|
||||
docsHref="https://coder.com/docs/coder-oss/latest/networking#browser-only-connections-enterprise"
|
||||
/>
|
||||
<div>
|
||||
<Header
|
||||
title="TLS"
|
||||
secondary
|
||||
description="Ensure TLS is properly configured for your Coder deployment."
|
||||
/>
|
||||
|
||||
<Badges>
|
||||
{entitlementsState.context.entitlements.features[
|
||||
FeatureNames.BrowserOnly
|
||||
].enabled ? (
|
||||
<EnabledBadge />
|
||||
) : (
|
||||
<DisabledBadge />
|
||||
)}
|
||||
<EnterpriseBadge />
|
||||
</Badges>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Header
|
||||
title="TLS"
|
||||
secondary
|
||||
description="Ensure TLS is properly configured for your Coder deployment."
|
||||
/>
|
||||
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell width="50%">Option</TableCell>
|
||||
<TableCell width="50%">Value</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>{deploymentFlags.tls_enable.name}</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.tls_enable.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.tls_enable.value ? (
|
||||
<EnabledBadge />
|
||||
) : (
|
||||
<DisabledBadge />
|
||||
)}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>{deploymentFlags.tls_cert_files.name}</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.tls_cert_files.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
<ul>
|
||||
{deploymentFlags.tls_cert_files.value.map(
|
||||
(file, index) => (
|
||||
<li key={index}>{file}</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>{deploymentFlags.tls_key_files.name}</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.tls_key_files.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
<ul>
|
||||
{deploymentFlags.tls_key_files.value.map(
|
||||
(file, index) => (
|
||||
<li key={index}>{file}</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<OptionName>
|
||||
{deploymentFlags.tls_min_version.name}
|
||||
</OptionName>
|
||||
<OptionDescription>
|
||||
{deploymentFlags.tls_min_version.description}
|
||||
</OptionDescription>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<OptionValue>
|
||||
{deploymentFlags.tls_min_version.value}
|
||||
</OptionValue>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</Stack>
|
||||
<OptionsTable
|
||||
options={{
|
||||
tls_enable: deploymentFlags.tls_enable,
|
||||
tls_cert_files: deploymentFlags.tls_cert_files,
|
||||
tls_key_files: deploymentFlags.tls_key_files,
|
||||
tls_min_version: deploymentFlags.tls_min_version,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user