Skip to content

feat: resources card #1627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
May 20, 2022
Merged

feat: resources card #1627

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
448070b
Set up table
presleyp May 18, 2022
99e63e5
Format
presleyp May 18, 2022
7b318ee
Hook up api and test - bug assigning resources
presleyp May 18, 2022
8cfb56a
Remove debugging code
presleyp May 18, 2022
2a3897c
Merge branch 'main' into resources/presleyp/1031
presleyp May 18, 2022
c5b60dd
Format
presleyp May 18, 2022
c4257a2
Remove unnecessary cards
presleyp May 18, 2022
be67df8
Fix test
presleyp May 20, 2022
85a869d
Fix assignment
presleyp May 20, 2022
1289ad2
Fix tests
presleyp May 20, 2022
abc7703
Lint
presleyp May 20, 2022
416be20
Merge branch 'main' into resources/presleyp/1031
presleyp May 20, 2022
c300c07
Merge branch 'main' into resources/presleyp/1031
presleyp May 20, 2022
13ba13c
Merge branch 'main' of github.com:coder/coder into resources/presleyp…
BrunoQuaresma May 20, 2022
85c2ac8
Refactor design
BrunoQuaresma May 20, 2022
e7b1110
Refactor resources table
BrunoQuaresma May 20, 2022
f645de3
Fix tests
BrunoQuaresma May 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/src/components/BuildsTable/BuildsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const BuildsTable: React.FC<BuildsTableProps> = ({ builds, className }) =
const styles = useStyles()

return (
<Table className={className}>
<Table className={className} data-testid="builds-table">
<TableHead>
<TableRow>
<TableCell width="20%">{Language.actionLabel}</TableCell>
Expand Down
66 changes: 66 additions & 0 deletions site/src/components/Resources/Resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import Table from "@material-ui/core/Table"
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import TableHead from "@material-ui/core/TableHead"
import TableRow from "@material-ui/core/TableRow"
import React from "react"
import { WorkspaceResource } from "../../api/typesGenerated"
import { TableHeaderRow } from "../TableHeaders/TableHeaders"
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"

const Language = {
resources: "Resources",
resourceLabel: "Resource",
agentsLabel: "Agents",
agentLabel: "Agent",
statusLabel: "Status",
}

interface ResourcesProps {
resources?: WorkspaceResource[]
getResourcesError?: Error
}

export const Resources: React.FC<ResourcesProps> = ({ resources, getResourcesError }) => {
return (
<WorkspaceSection title={Language.resources}>
{getResourcesError ? (
{ getResourcesError }
) : (
<Table>
<TableHead>
<TableHeaderRow>
<TableCell size="small">{Language.resourceLabel}</TableCell>
<TableCell size="small">{Language.agentsLabel}</TableCell>
</TableHeaderRow>
</TableHead>
<TableBody>
{resources?.map((resource) => (
<TableRow key={resource.id}>
<TableCell size="small">{resource.name}</TableCell>
<TableCell>
<Table>
<TableHead>
<TableHeaderRow>
<TableCell size="small">{Language.agentLabel}</TableCell>
<TableCell size="small">{Language.statusLabel}</TableCell>
</TableHeaderRow>
</TableHead>
<TableBody>
{resource.agents?.map((agent) => (
<TableRow key={`${resource.id}-${agent.id}`}>
<TableCell size="small">{agent.name}</TableCell>
<TableCell size="small">{agent.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</WorkspaceSection>
)
}
8 changes: 7 additions & 1 deletion site/src/components/Workspace/Workspace.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { action } from "@storybook/addon-actions"
import { Story } from "@storybook/react"
import React from "react"
import { MockOutdatedWorkspace, MockWorkspace } from "../../testHelpers/renderHelpers"
import {
MockOutdatedWorkspace,
MockWorkspace,
MockWorkspaceResource,
MockWorkspaceResource2,
} from "../../testHelpers/renderHelpers"
import { Workspace, WorkspaceProps } from "./Workspace"

export default {
Expand All @@ -19,6 +24,7 @@ Started.args = {
handleStop: action("stop"),
handleRetry: action("retry"),
workspaceStatus: "started",
resources: [MockWorkspaceResource, MockWorkspaceResource2],
}

export const Starting = Template.bind({})
Expand Down
28 changes: 6 additions & 22 deletions site/src/components/Workspace/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { makeStyles } from "@material-ui/core/styles"
import Typography from "@material-ui/core/Typography"
import React from "react"
import * as TypesGen from "../../api/typesGenerated"
import { WorkspaceStatus } from "../../util/workspace"
import { BuildsTable } from "../BuildsTable/BuildsTable"
import { Resources } from "../Resources/Resources"
import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
Expand All @@ -17,6 +17,8 @@ export interface WorkspaceProps {
handleRetry: () => void
handleUpdate: () => void
workspaceStatus: WorkspaceStatus
resources?: TypesGen.WorkspaceResource[]
getResourcesError?: Error
builds?: TypesGen.WorkspaceBuild[]
}

Expand All @@ -30,6 +32,8 @@ export const Workspace: React.FC<WorkspaceProps> = ({
handleRetry,
handleUpdate,
workspaceStatus,
resources,
getResourcesError,
builds,
}) => {
const styles = useStyles()
Expand All @@ -45,18 +49,10 @@ export const Workspace: React.FC<WorkspaceProps> = ({
handleUpdate={handleUpdate}
workspaceStatus={workspaceStatus}
/>
<Resources resources={resources} getResourcesError={getResourcesError} />
<div className={styles.horizontal}>
<div className={styles.sidebarContainer}>
<WorkspaceSection title="Applications">
<Placeholder />
</WorkspaceSection>
<WorkspaceSchedule workspace={workspace} />
<WorkspaceSection title="Dev URLs">
<Placeholder />
</WorkspaceSection>
<WorkspaceSection title="Resources">
<Placeholder />
</WorkspaceSection>
</div>
<div className={styles.timelineContainer}>
<WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
Expand All @@ -69,18 +65,6 @@ export const Workspace: React.FC<WorkspaceProps> = ({
)
}

/**
* Temporary placeholder component until we have the sections implemented
* Can be removed once the Workspace page has all the necessary sections
*/
const Placeholder: React.FC = () => {
return (
<div style={{ textAlign: "center", opacity: "0.5" }}>
<Typography variant="caption">Not yet implemented</Typography>
</div>
)
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

export const useStyles = makeStyles(() => {
return {
root: {
Expand Down
213 changes: 117 additions & 96 deletions site/src/pages/WorkspacePage/WorkspacePage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
MockStoppingWorkspace,
MockTemplate,
MockWorkspace,
MockWorkspaceAgent,
MockWorkspaceAgentDisconnected,
MockWorkspaceBuild,
renderWithAuth,
} from "../../testHelpers/renderHelpers"
Expand Down Expand Up @@ -63,103 +65,122 @@ describe("Workspace Page", () => {
const workspaceName = screen.getByText(MockWorkspace.name)
expect(workspaceName).toBeDefined()
})
it("shows the status of the workspace", async () => {
await renderWorkspacePage()
const status = screen.getByRole("status")
expect(status).toHaveTextContent("Running")
})
it("requests a stop job when the user presses Stop", async () => {
const stopWorkspaceMock = jest.spyOn(api, "stopWorkspace").mockResolvedValueOnce(MockWorkspaceBuild)
await testButton(Language.stop, stopWorkspaceMock)
})
it("requests a start job when the user presses Start", async () => {
server.use(
rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
return res(ctx.status(200), ctx.json(MockStoppedWorkspace))
}),
)
const startWorkspaceMock = jest
.spyOn(api, "startWorkspace")
.mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
await testButton(Language.start, startWorkspaceMock)
})
it("requests a start job when the user presses Retry after trying to start", async () => {
// Use a workspace that failed during start
server.use(
rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
...MockFailedWorkspace,
latest_build: {
...MockFailedWorkspace.latest_build,
transition: "start",
},
}),
)
}),
)
const startWorkSpaceMock = jest.spyOn(api, "startWorkspace").mockResolvedValueOnce(MockWorkspaceBuild)
await testButton(Language.retry, startWorkSpaceMock)
})
it("requests a stop job when the user presses Retry after trying to stop", async () => {
// Use a workspace that failed during stop
server.use(
rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
...MockFailedWorkspace,
latest_build: {
...MockFailedWorkspace.latest_build,
transition: "stop",
},
}),
)
}),
)
const stopWorkspaceMock = jest
.spyOn(api, "stopWorkspace")
.mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
await testButton(Language.retry, stopWorkspaceMock)
})
it("requests a template when the user presses Update", async () => {
const getTemplateMock = jest.spyOn(api, "getTemplate").mockResolvedValueOnce(MockTemplate)
server.use(
rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
return res(ctx.status(200), ctx.json(MockOutdatedWorkspace))
}),
)
await testButton(Language.update, getTemplateMock)
})
it("shows the Stopping status when the workspace is stopping", async () => {
await testStatus(MockStoppingWorkspace, Language.stopping)
})
it("shows the Stopped status when the workspace is stopped", async () => {
await testStatus(MockStoppedWorkspace, Language.stopped)
describe("Status", () => {
it("shows the status of the workspace", async () => {
await renderWorkspacePage()
const status = screen.getByRole("status")
expect(status).toHaveTextContent("Running")
})
it("requests a stop job when the user presses Stop", async () => {
const stopWorkspaceMock = jest.spyOn(api, "stopWorkspace").mockResolvedValueOnce(MockWorkspaceBuild)
await testButton(Language.stop, stopWorkspaceMock)
})
it("requests a start job when the user presses Start", async () => {
server.use(
rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
return res(ctx.status(200), ctx.json(MockStoppedWorkspace))
}),
)
const startWorkspaceMock = jest
.spyOn(api, "startWorkspace")
.mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
await testButton(Language.start, startWorkspaceMock)
})
it("requests a start job when the user presses Retry after trying to start", async () => {
// Use a workspace that failed during start
server.use(
rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
...MockFailedWorkspace,
latest_build: {
...MockFailedWorkspace.latest_build,
transition: "start",
},
}),
)
}),
)
const startWorkSpaceMock = jest.spyOn(api, "startWorkspace").mockResolvedValueOnce(MockWorkspaceBuild)
await testButton(Language.retry, startWorkSpaceMock)
})
it("requests a stop job when the user presses Retry after trying to stop", async () => {
// Use a workspace that failed during stop
server.use(
rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
...MockFailedWorkspace,
latest_build: {
...MockFailedWorkspace.latest_build,
transition: "stop",
},
}),
)
}),
)
const stopWorkspaceMock = jest
.spyOn(api, "stopWorkspace")
.mockImplementation(() => Promise.resolve(MockWorkspaceBuild))
await testButton(Language.retry, stopWorkspaceMock)
})
it("requests a template when the user presses Update", async () => {
const getTemplateMock = jest.spyOn(api, "getTemplate").mockResolvedValueOnce(MockTemplate)
server.use(
rest.get(`/api/v2/workspaces/${MockWorkspace.id}`, (req, res, ctx) => {
return res(ctx.status(200), ctx.json(MockOutdatedWorkspace))
}),
)
await testButton(Language.update, getTemplateMock)
})
it("shows the Stopping status when the workspace is stopping", async () => {
await testStatus(MockStoppingWorkspace, Language.stopping)
})
it("shows the Stopped status when the workspace is stopped", async () => {
await testStatus(MockStoppedWorkspace, Language.stopped)
})
it("shows the Building status when the workspace is starting", async () => {
await testStatus(MockStartingWorkspace, Language.starting)
})
it("shows the Running status when the workspace is started", async () => {
await testStatus(MockWorkspace, Language.started)
})
it("shows the Error status when the workspace is failed or canceled", async () => {
await testStatus(MockFailedWorkspace, Language.error)
})
it("shows the Loading status when the workspace is canceling", async () => {
await testStatus(MockCancelingWorkspace, Language.canceling)
})
it("shows the Deleting status when the workspace is deleting", async () => {
await testStatus(MockDeletingWorkspace, Language.deleting)
})
it("shows the Deleted status when the workspace is deleted", async () => {
await testStatus(MockDeletedWorkspace, Language.deleted)
})
})
it("shows the Building status when the workspace is starting", async () => {
await testStatus(MockStartingWorkspace, Language.starting)
})
it("shows the Running status when the workspace is started", async () => {
await testStatus(MockWorkspace, Language.started)
})
it("shows the Error status when the workspace is failed or canceled", async () => {
await testStatus(MockFailedWorkspace, Language.error)
})
it("shows the Loading status when the workspace is canceling", async () => {
await testStatus(MockCancelingWorkspace, Language.canceling)
})
it("shows the Deleting status when the workspace is deleting", async () => {
await testStatus(MockDeletingWorkspace, Language.deleting)
})
it("shows the Deleted status when the workspace is deleted", async () => {
await testStatus(MockDeletedWorkspace, Language.deleted)

describe("Resources", () => {
it("shows the status of each agent in each resource", async () => {
renderWithAuth(<WorkspacePage />, { route: `/workspaces/${MockWorkspace.id}`, path: "/workspaces/:workspace" })
const agent1Names = await screen.findAllByText(MockWorkspaceAgent.name)
expect(agent1Names.length).toEqual(2)
const agent2Names = await screen.findAllByText(MockWorkspaceAgentDisconnected.name)
expect(agent2Names.length).toEqual(2)
const agent1Status = await screen.findAllByText(MockWorkspaceAgent.status)
expect(agent1Status.length).toEqual(2)
const agent2Status = await screen.findAllByText(MockWorkspaceAgentDisconnected.status)
expect(agent2Status.length).toEqual(2)
})
})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

it("shows the timeline build", async () => {
await renderWorkspacePage()
const table = await screen.findByRole("table")
const rows = table.querySelectorAll("tbody > tr")
expect(rows).toHaveLength(MockBuilds.length)

describe("Timeline", () => {
it("shows the timeline build", async () => {
await renderWorkspacePage()
const table = await screen.findByTestId("builds-table")
const rows = table.querySelectorAll("tbody > tr")
expect(rows).toHaveLength(MockBuilds.length)
})
})
})
Loading