Skip to content

Commit 2f6ffef

Browse files
bpmctbpmct
committed
kickoff
1 parent 77fd34b commit 2f6ffef

File tree

5 files changed

+180
-0
lines changed

5 files changed

+180
-0
lines changed

‎site/src/AppRouter.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ const GeneralSettingsPage = lazy(
7474
"./pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage"
7575
),
7676
)
77+
const BuildSettingsPage = lazy(
78+
() =>
79+
import("./pages/DeploySettingsPage/BuildSettingsPage/BuildSettingsPage"),
80+
)
7781
const SecuritySettingsPage = lazy(
7882
() =>
7983
import(
@@ -188,6 +192,7 @@ export const AppRouter: FC = () => {
188192
element={<DeploySettingsLayout />}
189193
>
190194
<Route path="general" element={<GeneralSettingsPage />} />
195+
<Route path="builds" element={<BuildSettingsPage />} />
191196
<Route path="security" element={<SecuritySettingsPage />} />
192197
<Route path="appearance" element={<AppearanceSettingsPage />} />
193198
<Route path="network" element={<NetworkSettingsPage />} />

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
44
import LockRounded from "@material-ui/icons/LockOutlined"
55
import Globe from "@material-ui/icons/PublicOutlined"
66
import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
7+
import CloudQueueIcon from "@material-ui/icons/CloudQueue"
78
import { GitIcon } from "components/Icons/GitIcon"
89
import { Stack } from "components/Stack/Stack"
910
import { ElementType, PropsWithChildren, ReactNode, FC } from "react"
@@ -48,6 +49,12 @@ export const Sidebar: React.FC = () => {
4849
>
4950
General
5051
</SidebarNavItem>
52+
<SidebarNavItem
53+
href="builds"
54+
icon={<SidebarNavItemIcon icon={CloudQueueIcon} />}
55+
>
56+
Builds
57+
</SidebarNavItem>
5158
<SidebarNavItem
5259
href="appearance"
5360
icon={<SidebarNavItemIcon icon={Brush} />}

‎site/src/pages/DeploySettingsPage/BuildSettingsPage/BuildSettingsPage.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
2+
import { FC } from "react"
3+
import { Helmet } from "react-helmet-async"
4+
import { pageTitle } from "util/page"
5+
import { BuildSettingsPageView } from "./BuildSettingsPageView"
6+
7+
const GeneralSettingsPage: FC = () => {
8+
const { deploymentConfig, deploymentDAUs, getDeploymentDAUsError } =
9+
useDeploySettings()
10+
11+
return (
12+
<>
13+
<Helmet>
14+
<title>{pageTitle("Builds")}</title>
15+
</Helmet>
16+
<BuildSettingsPageView
17+
deploymentConfig={deploymentConfig}
18+
deploymentDAUs={deploymentDAUs}
19+
getDeploymentDAUsError={getDeploymentDAUsError}
20+
/>
21+
</>
22+
)
23+
}
24+
25+
export default GeneralSettingsPage

‎site/src/pages/DeploySettingsPage/BuildSettingsPage/BuildSettingsPageView.stories.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { ComponentMeta, Story } from "@storybook/react"
2+
import {
3+
makeMockApiError,
4+
MockDeploymentDAUResponse,
5+
} from "testHelpers/entities"
6+
import {
7+
BuildSettingsPageView,
8+
BuildSettingsPageViewProps,
9+
} from "./BuildSettingsPageView"
10+
11+
export default {
12+
title: "pages/BuildSettingsPageView",
13+
component: BuildSettingsPageView,
14+
argTypes: {
15+
deploymentConfig: {
16+
defaultValue: {
17+
access_url: {
18+
name: "Access URL",
19+
usage:
20+
"External URL to access your deployment. This must be accessible by all provisioned workspaces.",
21+
value: "https://dev.coder.com",
22+
},
23+
wildcard_access_url: {
24+
name: "Wildcard Access URL",
25+
usage:
26+
'Specifies the wildcard hostname to use for workspace applications in the form "*.example.com".',
27+
value: "*--apps.dev.coder.com",
28+
},
29+
},
30+
},
31+
deploymentDAUs: {
32+
defaultValue: MockDeploymentDAUResponse,
33+
},
34+
},
35+
} as ComponentMeta<typeof BuildSettingsPageView>
36+
37+
const Template: Story<BuildSettingsPageViewProps> = (args) => (
38+
<BuildSettingsPageView {...args} />
39+
)
40+
export const Page = Template.bind({})
41+
42+
export const NoDAUs = Template.bind({})
43+
NoDAUs.args = {
44+
deploymentDAUs: undefined,
45+
}
46+
47+
export const DAUError = Template.bind({})
48+
DAUError.args = {
49+
deploymentDAUs: undefined,
50+
getDeploymentDAUsError: makeMockApiError({ message: "Error fetching DAUs." }),
51+
}

‎site/src/pages/DeploySettingsPage/BuildSettingsPage/BuildSettingsPageView.tsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { DeploymentConfig, DeploymentDAUsResponse } from "api/typesGenerated"
2+
import { AlertBanner } from "components/AlertBanner/AlertBanner"
3+
import { DAUChart } from "components/DAUChart/DAUChart"
4+
import { Header } from "components/DeploySettingsLayout/Header"
5+
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
6+
import { Stack } from "components/Stack/Stack"
7+
import Grid from "@material-ui/core/Grid"
8+
import { colors } from "theme/colors"
9+
import Box from "@material-ui/core/Box"
10+
import { makeStyles, Theme } from "@material-ui/core/styles"
11+
12+
export type BuildSettingsPageViewProps = {
13+
deploymentConfig: Pick<
14+
DeploymentConfig,
15+
"provisioner" | "wildcard_access_url"
16+
>
17+
deploymentDAUs?: DeploymentDAUsResponse
18+
getDeploymentDAUsError: unknown
19+
}
20+
21+
const BuildStatus = (props: {
22+
color: string
23+
builds: number
24+
name: string
25+
}) => {
26+
return (
27+
<Box bgcolor={props.color} style={{ textAlign: "center", padding: 12 }}>
28+
<p style={{ fontSize: 32 }}>{props.builds}</p>
29+
<p style={{ fontSize: 18 }}>{props.name}</p>
30+
</Box>
31+
)
32+
}
33+
34+
export const BuildSettingsPageView = ({
35+
deploymentConfig,
36+
deploymentDAUs,
37+
getDeploymentDAUsError,
38+
}: BuildSettingsPageViewProps): JSX.Element => {
39+
const classes = useStyles()
40+
41+
return (
42+
<>
43+
<Header
44+
title="Workspace builds"
45+
description="Information about your build queue and configuration."
46+
docsHref="hthttps://coder.com/docs/v2/latest/admin/scale"
47+
/>
48+
49+
<div className={classes.buildGrid}>
50+
<Grid container spacing={3}>
51+
<Grid item xs={3}>
52+
<BuildStatus builds={324} color="success.main" name="Running" />
53+
</Grid>
54+
<Grid item xs={3}>
55+
<BuildStatus builds={12} color={colors.orange[9]} name="Building" />
56+
</Grid>
57+
<Grid item xs={3}>
58+
<BuildStatus builds={3} color="primary.main" name="Pending" />
59+
</Grid>
60+
<Grid item xs={3}>
61+
<BuildStatus builds={9} color={colors.red[8]} name="Failed" />
62+
</Grid>
63+
</Grid>
64+
</div>
65+
66+
<Stack spacing={4}>
67+
{Boolean(getDeploymentDAUsError) && (
68+
<AlertBanner error={getDeploymentDAUsError} severity="error" />
69+
)}
70+
{deploymentDAUs && <DAUChart daus={deploymentDAUs} />}
71+
<OptionsTable
72+
options={{
73+
provisoner_daemons: deploymentConfig.provisioner.daemons,
74+
replicas: {
75+
flag: "asd",
76+
name: "Replicas",
77+
usage:
78+
"Improves reliability and runs its a unique set of provisioner daemons.",
79+
value: "4",
80+
},
81+
}}
82+
/>
83+
</Stack>
84+
</>
85+
)
86+
}
87+
88+
const useStyles = makeStyles<Theme>((theme) => ({
89+
buildGrid: () => ({
90+
marginBottom: theme.spacing(3),
91+
}),
92+
}))

0 commit comments

Comments
 (0)