Skip to content

feat: Workspace StatusBar #1362

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 52 commits into from
May 16, 2022
Merged

feat: Workspace StatusBar #1362

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
b1cc9d6
Move component and prep
presleyp May 5, 2022
0da5e7e
Make WorkspaceSection more reusable
presleyp May 5, 2022
580e801
Lay out elements
presleyp May 5, 2022
b995f4a
Layout tweaks
presleyp May 6, 2022
e7dc082
Add outdated to Workspace type
presleyp May 6, 2022
7f6bbda
Fill out status bar component
presleyp May 6, 2022
08b01c0
Merge branch 'main' into statusbar/presleyp/1032
presleyp May 6, 2022
1bc3e35
Format
presleyp May 6, 2022
ccbf527
Add transition to types
presleyp May 6, 2022
f6bcbaa
Add api handlers for build toggle
presleyp May 9, 2022
db348a6
Format
presleyp May 9, 2022
8d5fcfd
Parallelize machine
presleyp May 9, 2022
62c40f4
Lay out basics of build submachine
presleyp May 9, 2022
eaa353d
Pipe start and stop events through - needs status
presleyp May 9, 2022
399390e
Attempt at a machine
presleyp May 10, 2022
c100ec5
Update mock
presleyp May 10, 2022
903e8ee
Render status and buttons
presleyp May 10, 2022
e8e81ce
Fix type error on template page
presleyp May 10, 2022
2226fea
Move Settings
presleyp May 10, 2022
df0bc5b
Format
presleyp May 10, 2022
14bd598
Keep refreshed workspace
presleyp May 10, 2022
c93dde3
Merge branch 'main' into statusbar/presleyp/1032
presleyp May 10, 2022
1093103
Make it switch workspaces
presleyp May 10, 2022
478db51
Lint
presleyp May 10, 2022
40a62a8
Fix relative api path
presleyp May 10, 2022
bd3a026
Test
presleyp May 10, 2022
9786f6c
Fix polling
presleyp May 10, 2022
7727a1b
Add loading workspace state
presleyp May 10, 2022
4a57152
Format
presleyp May 10, 2022
e3ae1b8
Add stub settings page
presleyp May 11, 2022
2695a29
Format
presleyp May 11, 2022
44e4552
Merge branch 'main' into statusbar/presleyp/1032
presleyp May 11, 2022
d83e5ac
Lint
presleyp May 11, 2022
f909a86
Get rid of let
presleyp May 11, 2022
5dcec61
Merge branch 'main' into statusbar/presleyp/1032
presleyp May 11, 2022
be86750
Add update
presleyp May 12, 2022
992ee0c
Make start use version id
presleyp May 12, 2022
9903c96
Merge branch 'main' into statusbar/presleyp/1032
presleyp May 12, 2022
91d5811
Merge branch 'main' into statusbar/presleyp/1032
presleyp May 12, 2022
9cd386e
Fix imports
presleyp May 12, 2022
1a09166
Add polling for outdated
presleyp May 12, 2022
aee54a0
Merge branch 'main' into statusbar/presleyp/1032
presleyp May 12, 2022
e9758c7
Rely on context instead of finite state for status
presleyp May 12, 2022
87fee06
Handle canceling
presleyp May 13, 2022
b3f6b8c
Fix tests
presleyp May 13, 2022
39e84d9
Format
presleyp May 13, 2022
06abf62
Display errors so users know when button presses didn't work
presleyp May 13, 2022
8552ea2
Fix api typo, remove logging
presleyp May 13, 2022
72c856e
Lint
presleyp May 13, 2022
259d517
Merge branch 'main' into statusbar/presleyp/1032
presleyp May 13, 2022
24829be
Simplify type
presleyp May 16, 2022
542d865
Add type, extract helper
presleyp May 16, 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
Prev Previous commit
Next Next commit
Handle canceling
  • Loading branch information
@presleyp
presleyp committed May 13, 2022
commit 87fee0668a27fcc307826e707d421d7cfda3256a
12 changes: 12 additions & 0 deletions site/src/components/Workspace/Workspace.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,18 @@ Stopping.args = { ...Started.args, workspaceStatus: "stopping" }
export const Error = Template.bind({})
Error.args = { ...Started.args, workspaceStatus: "error" }

export const BuildLoading = Template.bind({})
BuildLoading.args = {...Started.args, workspaceStatus: "loading" }

export const Deleting = Template.bind({})
Deleting.args = {...Started.args, workspaceStatus: "deleting"}

export const Deleted = Template.bind({})
Deleted.args = {...Started.args, workspaceStatus: "deleted"}

export const Canceling = Template.bind({})
Canceling.args = {...Started.args, workspaceStatus: "canceling"}

export const NoBreadcrumb = Template.bind({})
NoBreadcrumb.args = { ...Started.args, template: undefined }

Expand Down
7 changes: 5 additions & 2 deletions site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ const Language = {
error: "Build Failed",
loading: "Loading Status",
deleting: "Deleting",
deleted: "Deleted"
deleted: "Deleted",
// "Canceling" would be misleading because it refers to a build, not the workspace.
// So just stall. When it is canceled it will appear as the error workspaceStatus.
canceling: "Loading Status"
}

export interface WorkspaceStatusBarProps {
Expand Down Expand Up @@ -102,7 +105,7 @@ export const WorkspaceStatusBar: React.FC<WorkspaceStatusBarProps> = ({
)}

{/* Workspace will not update while another job is in progress so hide the button until it's usable */}
{workspace.outdated && ["started", "stopped", "error"].includes(workspaceStatus) && (
{workspace.outdated && ["started", "stopped", "deleted", "error"].includes(workspaceStatus) && (
Copy link
Contributor

@greyscaled greyscaled May 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Suggestion(if-minor): This is the type of logic I like to break out as it says something about our model, something like:

const isTerminalWorkspaceStatus = (workspaceStatus) => boolean

We get cheap unit tests, reuse and refined concepts (I don't have to read the code + comment to understand the model, the function name is self-descriptive).

I don't have a satisfying answer yet as to where to put these kinds of model functions. They technically enrich the api package.

Can we discuss at a FE V and skip for now?

Copy link
Member

Choose a reason for hiding this comment

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

Instead of hiding the button, should we just be disabling it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@Kira-Pilot my thinking was that if you see a disabled Update button you might think there's something you should do to enable it (like how a disabled Submit button means fill out your form better), but it's only possible when the template is updated, which you may or may not be able to do. But if you have a different perspective I'm happy to hear it!

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, I can totally see that. I was thinking it might be confusing to have the button disappearing and reappearing but I'm honestly not sure which is preferable. If there are no strong opinions from elsewhere, I suggest we just leave it and see what feedback we get, if any.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@vapurrmaid I extracted the function and left it in the file for now, adding the "where" question to FE V

<Button onClick={handleUpdate} color="primary">
{Language.update}
</Button>
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/WorkspacePage/WorkspacePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { firstOrItem } from "../../util/array"
import { XServiceContext } from "../../xServices/StateContext"
import { selectWorkspaceStatus } from "../../xServices/workspace/workspaceSelectors"

export type WorkspaceStatus = "started" | "starting" | "stopped" | "stopping" | "error" | "loading" | "deleting" | "deleted"
export type WorkspaceStatus = "started" | "starting" | "stopped" | "stopping" | "error" | "loading" | "deleting" | "deleted" | "canceling"

export const WorkspacePage: React.FC = () => {
const { workspace: workspaceQueryParam } = useParams()
Expand Down
2 changes: 1 addition & 1 deletion site/src/xServices/workspace/workspaceSelectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ export const selectWorkspaceStatus = (state: State<WorkspaceContext, WorkspaceEv
case "succeeded": return succeededToStatus[transition]
case "pending": return inProgressToStatus[transition]
case "running": return inProgressToStatus[transition]
case "canceling": return "canceling"
case "canceled": return "error"
case "canceling": return "error"
case "failed": return "error"
}
}