Skip to content

Commit e4340d9

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add base changes
1 parent b052935 commit e4340d9

File tree

11 files changed

+276
-127
lines changed

11 files changed

+276
-127
lines changed

‎site/src/api/api.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -488,7 +488,7 @@ export function waitForBuild(build: TypesGen.WorkspaceBuild) {
488488
const { job } = await getWorkspaceBuildByNumber(
489489
build.workspace_owner_name,
490490
build.workspace_name,
491-
String(build.build_number),
491+
build.build_number,
492492
)
493493
latestJobInfo = job
494494

@@ -772,7 +772,7 @@ export const getWorkspaceBuilds = async (
772772
export const getWorkspaceBuildByNumber = async (
773773
username = "me",
774774
workspaceName: string,
775-
buildNumber: string,
775+
buildNumber: number,
776776
): Promise<TypesGen.WorkspaceBuild> => {
777777
const response = await axios.get<TypesGen.WorkspaceBuild>(
778778
`/api/v2/users/${username}/workspace/${workspaceName}/builds/${buildNumber}`,

‎site/src/components/BuildIcon/BuildIcon.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined"
2+
import StopOutlined from "@mui/icons-material/StopOutlined"
3+
import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
4+
import { WorkspaceTransition } from "api/typesGenerated"
5+
import { ComponentProps } from "react"
6+
7+
type SVGIcon = typeof PlayArrowOutlined
8+
9+
type SVGIconProps = ComponentProps<SVGIcon>
10+
11+
const iconByTransition: Record<WorkspaceTransition, SVGIcon> = {
12+
start: PlayArrowOutlined,
13+
stop: StopOutlined,
14+
delete: DeleteOutlined,
15+
}
16+
17+
export const BuildIcon = (
18+
props: SVGIconProps & { transition: WorkspaceTransition },
19+
) => {
20+
const Icon = iconByTransition[props.transition]
21+
return <Icon {...props} />
22+
}

‎site/src/components/BuildsTable/BuildAvatar.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import Badge from "@mui/material/Badge"
22
import { useTheme, withStyles } from "@mui/styles"
33
import { FC } from "react"
4-
import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined"
5-
import PauseOutlined from "@mui/icons-material/PauseOutlined"
6-
import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
7-
import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated"
4+
import { WorkspaceBuild } from "api/typesGenerated"
85
import { getDisplayWorkspaceBuildStatus } from "utils/workspace"
96
import { Avatar, AvatarProps } from "components/Avatar/Avatar"
107
import { PaletteIndex } from "theme/theme"
118
import { Theme } from "@mui/material/styles"
9+
import { BuildIcon } from "components/BuildIcon/BuildIcon"
1210

1311
interface StylesBadgeProps {
1412
type: PaletteIndex
@@ -31,12 +29,6 @@ export interface BuildAvatarProps {
3129
size?: AvatarProps["size"]
3230
}
3331

34-
const iconByTransition: Record<WorkspaceTransition, JSX.Element> = {
35-
start: <PlayArrowOutlined />,
36-
stop: <PauseOutlined />,
37-
delete: <DeleteOutlined />,
38-
}
39-
4032
export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
4133
const theme = useTheme<Theme>()
4234
const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build)
@@ -55,7 +47,7 @@ export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
5547
badgeContent={<div></div>}
5648
>
5749
<Avatar size={size} colorScheme="darken">
58-
{iconByTransition[build.transition]}
50+
<BuildIcon transition={build.transition} />
5951
</Avatar>
6052
</StyledBadge>
6153
)

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Box, { BoxProps } from "@mui/material/Box"
2+
import { styled } from "@mui/styles"
3+
import { colors } from "theme/colors"
4+
5+
export const Sidebar = styled((props: BoxProps) => (
6+
<Box {...props} component="nav" />
7+
))(({ theme }) => ({
8+
width: theme.spacing(32),
9+
flexShrink: 0,
10+
borderRight: `1px solid ${theme.palette.divider}`,
11+
height: "100%",
12+
overflowY: "auto",
13+
}))
14+
15+
export const SidebarItem = styled((props: BoxProps & { active?: boolean }) => (
16+
<Box component="button" {...props} />
17+
))(({ theme, active }) => ({
18+
background: active ? colors.gray[13] : "none",
19+
border: "none",
20+
fontSize: 14,
21+
width: "100%",
22+
textAlign: "left",
23+
padding: theme.spacing(0, 3),
24+
cursor: "pointer",
25+
pointerEvents: active ? "none" : "auto",
26+
color: active ? theme.palette.text.primary : theme.palette.text.secondary,
27+
"&:hover": {
28+
background: theme.palette.action.hover,
29+
color: theme.palette.text.primary,
30+
},
31+
paddingTop: theme.spacing(1.25),
32+
paddingBottom: theme.spacing(1.25),
33+
}))
34+
35+
export const SidebarCaption = styled(Box)(({ theme }) => ({
36+
fontSize: 10,
37+
textTransform: "uppercase",
38+
fontWeight: 500,
39+
color: theme.palette.text.secondary,
40+
padding: theme.spacing(1.5, 3),
41+
letterSpacing: "0.5px",
42+
}))

‎site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.stories.tsx

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎site/src/pages/WorkspaceBuildPage/WorkspaceBuildPage.tsx

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { useMachine } from "@xstate/react"
2-
import { FC } from "react"
2+
import { FC, useEffect } from "react"
33
import { Helmet } from "react-helmet-async"
44
import { useParams } from "react-router-dom"
55
import { pageTitle } from "../../utils/page"
66
import { workspaceBuildMachine } from "../../xServices/workspaceBuild/workspaceBuildXService"
77
import { WorkspaceBuildPageView } from "./WorkspaceBuildPageView"
8+
import { useQuery } from "@tanstack/react-query"
9+
import { getWorkspaceBuilds } from "api/api"
10+
import dayjs from "dayjs"
811

912
export const WorkspaceBuildPage: FC = () => {
1013
const params = useParams() as {
@@ -13,12 +16,26 @@ export const WorkspaceBuildPage: FC = () => {
1316
buildNumber: string
1417
}
1518
const workspaceName = params.workspace
16-
const buildNumber = params.buildNumber
19+
const buildNumber = Number(params.buildNumber)
1720
const username = params.username.replace("@", "")
18-
const [buildState] = useMachine(workspaceBuildMachine, {
21+
const [buildState, send] = useMachine(workspaceBuildMachine, {
1922
context: { username, workspaceName, buildNumber, timeCursor: new Date() },
2023
})
2124
const { logs, build } = buildState.context
25+
const { data: builds } = useQuery({
26+
queryKey: ["builds", username, build?.workspace_id],
27+
queryFn: () => {
28+
return getWorkspaceBuilds(
29+
build?.workspace_id ?? "",
30+
dayjs().add(-30, "day").toDate(),
31+
)
32+
},
33+
enabled: Boolean(build),
34+
})
35+
36+
useEffect(() => {
37+
send("RESET", { buildNumber, timeCursor: new Date() })
38+
}, [buildNumber, send])
2239

2340
return (
2441
<>
@@ -32,7 +49,12 @@ export const WorkspaceBuildPage: FC = () => {
3249
</title>
3350
</Helmet>
3451

35-
<WorkspaceBuildPageView logs={logs} build={build} />
52+
<WorkspaceBuildPageView
53+
logs={logs}
54+
build={build}
55+
builds={builds}
56+
activeBuildNumber={buildNumber}
57+
/>
3658
</>
3759
)
3860
}

0 commit comments

Comments
 (0)