Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: UI for canceling workspace builds#1735

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.

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

Already on GitHub?Sign in to your account

Merged
presleyp merged 10 commits intomainfromcancel/presleyp/233
May 25, 2022
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
6 changes: 6 additions & 0 deletionssite/src/api/api.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
import axios, { AxiosRequestHeaders } from "axios"
import * as Types from "./types"
import { WorkspaceBuildTransition } from "./types"
import * as TypesGen from "./typesGenerated"

Expand DownExpand Up@@ -161,6 +162,11 @@ export const startWorkspace = postWorkspaceBuild("start")
export const stopWorkspace = postWorkspaceBuild("stop")
export const deleteWorkspace = postWorkspaceBuild("delete")

export const cancelWorkspaceBuild = async (workspaceBuildId: TypesGen.WorkspaceBuild["id"]): Promise<Types.Message> => {
const response = await axios.patch(`/api/v2/workspacebuilds/${workspaceBuildId}/cancel`)
return response.data
}

export const createUser = async (user: TypesGen.CreateUserRequest): Promise<TypesGen.User> => {
const response = await axios.post<TypesGen.User>("/api/v2/users", user)
return response.data
Expand Down
2 changes: 2 additions & 0 deletionssite/src/api/types.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,3 +12,5 @@ export interface ReconnectingPTYRequest {
}

export type WorkspaceBuildTransition = "start" | "stop" | "delete"

export type Message = { message: string }
1 change: 0 additions & 1 deletionsite/src/components/Workspace/Workspace.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,6 @@ Started.args = {
workspace: MockWorkspace,
handleStart: action("start"),
handleStop: action("stop"),
handleRetry: action("retry"),
resources: [MockWorkspaceResource, MockWorkspaceResource2],
builds: [MockWorkspaceBuild],
}
Expand Down
6 changes: 3 additions & 3 deletionssite/src/components/Workspace/Workspace.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,8 +14,8 @@ import { WorkspaceStats } from "../WorkspaceStats/WorkspaceStats"
export interface WorkspaceProps {
handleStart: () => void
handleStop: () => void
handleRetry: () => void
handleUpdate: () => void
handleCancel: () => void
workspace: TypesGen.Workspace
resources?: TypesGen.WorkspaceResource[]
getResourcesError?: Error
Expand All@@ -28,8 +28,8 @@ export interface WorkspaceProps {
export const Workspace: React.FC<WorkspaceProps> = ({
handleStart,
handleStop,
handleRetry,
handleUpdate,
handleCancel,
workspace,
resources,
getResourcesError,
Expand All@@ -55,8 +55,8 @@ export const Workspace: React.FC<WorkspaceProps> = ({
workspace={workspace}
handleStart={handleStart}
handleStop={handleStop}
handleRetry={handleRetry}
handleUpdate={handleUpdate}
handleCancel={handleCancel}
/>
</div>
</div>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,14 +14,4 @@ export const Example = Template.bind({})
Example.args = {
icon: <PlayArrowRoundedIcon />,
label: "Start workspace",
loadingLabel: "Starting workspace",
isLoading: false,
}

export const Loading = Template.bind({})
Loading.args = {
icon: <PlayArrowRoundedIcon />,
label: "Start workspace",
loadingLabel: "Starting workspace",
isLoading: true,
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,17 @@
import Button from "@material-ui/core/Button"
import CircularProgress from "@material-ui/core/CircularProgress"
import { makeStyles } from "@material-ui/core/styles"
import React from "react"

export interface WorkspaceActionButtonProps {
label: string
loadingLabel: string
isLoading: boolean
icon: JSX.Element
onClick: () => void
className?: string
}

export const WorkspaceActionButton: React.FC<WorkspaceActionButtonProps> = ({
label,
loadingLabel,
isLoading,
icon,
onClick,
className,
}) => {
const styles = useStyles()

export const WorkspaceActionButton: React.FC<WorkspaceActionButtonProps> = ({ label, icon, onClick, className }) => {
return (
<Button
className={className}
startIcon={isLoading ? <CircularProgress size={12} className={styles.spinner} /> : icon}
onClick={onClick}
disabled={isLoading}
>
{isLoading ? loadingLabel : label}
<Button className={className} startIcon={icon} onClick={onClick}>
{label}
</Button>
)
}

const useStyles = makeStyles((theme) => ({
spinner: {
color: theme.palette.text.disabled,
marginRight: theme.spacing(1),
},
}))
49 changes: 30 additions & 19 deletionssite/src/components/WorkspaceActions/WorkspaceActions.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import Button from "@material-ui/core/Button"
import Link from "@material-ui/core/Link"
import { makeStyles } from "@material-ui/core/styles"
import CancelIcon from "@material-ui/icons/Cancel"
import CloudDownloadIcon from "@material-ui/icons/CloudDownload"
import PlayArrowRoundedIcon from "@material-ui/icons/PlayArrowRounded"
import ReplayIcon from "@material-ui/icons/Replay"
import StopIcon from "@material-ui/icons/Stop"
import React from "react"
import { Link as RouterLink } from "react-router-dom"
Expand All@@ -17,7 +17,7 @@ export const Language = {
stopping: "Stopping workspace",
start: "Start workspace",
starting: "Starting workspace",
retry: "Retry",
cancel: "Cancel action",
update: "Update workspace",
}

Expand All@@ -28,20 +28,32 @@ export const Language = {
const canAcceptJobs = (workspaceStatus: WorkspaceStatus) =>
["started", "stopped", "deleted", "error", "canceled"].includes(workspaceStatus)

/**
* Jobs that are in progress (queued or pending) can be canceled.
* @param workspaceStatus WorkspaceStatus
* @returns boolean
*/
const canCancelJobs = (workspaceStatus: WorkspaceStatus) =>
["starting", "stopping", "deleting"].includes(workspaceStatus)

const canStart = (workspaceStatus: WorkspaceStatus) => ["stopped", "canceled", "error"].includes(workspaceStatus)

const canStop = (workspaceStatus: WorkspaceStatus) => ["started", "canceled", "error"].includes(workspaceStatus)

export interface WorkspaceActionsProps {
workspace: Workspace
handleStart: () => void
handleStop: () => void
handleRetry: () => void
handleUpdate: () => void
handleCancel: () => void
}

export const WorkspaceActions: React.FC<WorkspaceActionsProps> = ({
workspace,
handleStart,
handleStop,
handleRetry,
handleUpdate,
handleCancel,
}) => {
const styles = useStyles()
const workspaceStatus = getWorkspaceStatus(workspace.latest_build)
Expand All@@ -51,31 +63,30 @@ export const WorkspaceActions: React.FC<WorkspaceActionsProps> = ({
<Link underline="none" component={RouterLink} to="edit">
<Button variant="outlined">Settings</Button>
</Link>
{(workspaceStatus === "started" || workspaceStatus === "stopping") && (
{canStart(workspaceStatus) && (
<WorkspaceActionButton
className={styles.actionButton}
icon={<PlayArrowRoundedIcon />}
onClick={handleStart}
label={Language.start}
/>
)}
{canStop(workspaceStatus) && (
<WorkspaceActionButton
className={styles.actionButton}
icon={<StopIcon />}
onClick={handleStop}
label={Language.stop}
loadingLabel={Language.stopping}
isLoading={workspaceStatus === "stopping"}
/>
)}
{(workspaceStatus === "stopped" || workspaceStatus === "starting") && (
{canCancelJobs(workspaceStatus) && (
<WorkspaceActionButton
className={styles.actionButton}
icon={<PlayArrowRoundedIcon />}
onClick={handleStart}
label={Language.start}
loadingLabel={Language.starting}
isLoading={workspaceStatus === "starting"}
icon={<CancelIcon />}
onClick={handleCancel}
label={Language.cancel}
/>
)}
{workspaceStatus === "error" && (
<Button className={styles.actionButton} startIcon={<ReplayIcon />} onClick={handleRetry}>
{Language.retry}
</Button>
)}
{workspace.outdated && canAcceptJobs(workspaceStatus) && (
<Button className={styles.actionButton} startIcon={<CloudDownloadIcon />} onClick={handleUpdate}>
{Language.update}
Expand All@@ -89,6 +100,6 @@ const useStyles = makeStyles((theme) => ({
actionButton: {
// Set fixed width for the action buttons so they will not change the size
// during the transitions
width: theme.spacing(30),
width: theme.spacing(27),
},
}))
45 changes: 10 additions & 35 deletionssite/src/pages/WorkspacePage/WorkspacePage.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { Workspace } from "../../api/typesGenerated"
import { Language } from "../../components/WorkspaceActions/WorkspaceActions"
import {
MockBuilds,
MockCanceledWorkspace,
MockCancelingWorkspace,
MockDeletedWorkspace,
MockDeletingWorkspace,
Expand DownExpand Up@@ -86,45 +87,16 @@ describe("Workspace Page", () => {
.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
it("requests cancellation when the user presses Cancel", async () => {
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",
},
}),
)
return res(ctx.status(200), ctx.json(MockStartingWorkspace))
}),
)
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)
const cancelWorkspaceMock = jest
.spyOn(api, "cancelWorkspaceBuild")
.mockImplementation(() => Promise.resolve({ message: "job canceled" }))
await testButton(Language.cancel, cancelWorkspaceMock)
})
it("requests a template when the user presses Update", async () => {
const getTemplateMock = jest.spyOn(api, "getTemplate").mockResolvedValueOnce(MockTemplate)
Expand DownExpand Up@@ -153,6 +125,9 @@ describe("Workspace Page", () => {
it("shows the Canceling status when the workspace is canceling", async () => {
await testStatus(MockCancelingWorkspace, DisplayStatusLanguage.canceling)
})
it("shows the Canceled status when the workspace is canceling", async () => {
await testStatus(MockCanceledWorkspace, DisplayStatusLanguage.canceled)
})
it("shows the Deleting status when the workspace is deleting", async () => {
await testStatus(MockDeletingWorkspace, DisplayStatusLanguage.deleting)
})
Expand Down
2 changes: 1 addition & 1 deletionsite/src/pages/WorkspacePage/WorkspacePage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -36,8 +36,8 @@ export const WorkspacePage: React.FC = () => {
workspace={workspace}
handleStart={() => workspaceSend("START")}
handleStop={() => workspaceSend("STOP")}
handleRetry={() => workspaceSend("RETRY")}
handleUpdate={() => workspaceSend("UPDATE")}
handleCancel={() => workspaceSend("CANCEL")}
resources={resources}
getResourcesError={getResourcesError instanceof Error ? getResourcesError : undefined}
builds={builds}
Expand Down
6 changes: 5 additions & 1 deletionsite/src/testHelpers/entities.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -182,7 +182,7 @@ export const MockDeletingWorkspace: TypesGen.Workspace = {
}
export const MockDeletedWorkspace: TypesGen.Workspace = { ...MockWorkspace, latest_build: MockWorkspaceBuildDelete }

export const MockOutdatedWorkspace: TypesGen.Workspace = { ...MockWorkspace, outdated: true }
export const MockOutdatedWorkspace: TypesGen.Workspace = { ...MockFailedWorkspace, outdated: true }

export const MockWorkspaceAgent: TypesGen.WorkspaceAgent = {
architecture: "amd64",
Expand DownExpand Up@@ -506,3 +506,7 @@ export const MockWorkspaceBuildLogs: TypesGen.ProvisionerJobLog[] = [
output: "",
},
]

export const MockCancellationMessage = {
message: "Job successfully canceled",
}
3 changes: 3 additions & 0 deletionssite/src/testHelpers/handlers.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -130,4 +130,7 @@ export const handlers = [
rest.get("/api/v2/workspacebuilds/:workspaceBuildId/logs", (req, res, ctx) => {
return res(ctx.status(200), ctx.json(M.MockWorkspaceBuildLogs))
}),
rest.patch("/api/v2/workspacebuilds/:workspaceBuildId/cancel", (req, res, ctx) => {
return res(ctx.status(200), ctx.json(M.MockCancellationMessage))
}),
]
4 changes: 2 additions & 2 deletionssite/src/util/workspace.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -58,8 +58,8 @@ export const DisplayStatusLanguage = {
stopped: "Stopped",
deleting: "Deleting",
deleted: "Deleted",
canceling: "Canceling",
canceled: "Canceled",
canceling: "Canceling action",
canceled: "Canceled action",
failed: "Failed",
queued: "Queued",
}
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp