feat: Workspace StatusBar #1362

presleyp · 2022-05-10T15:03:16Z

Adds a status bar to the workspace page with:

Start button visible when the workspace is stopped
Stop button visible when the workspace is started
Retry button visible when the workspace is in a bad state
Update button visible when the workspace is out of date
Status chip saying Running, Building, Stopped, Stopping, Deleting, Deleted, Loading Status, or Build Failed
Settings link

It's so big, but collapsing start and stop made it hard to distinguish retry from toggle

codecov · 2022-05-10T15:10:35Z

Codecov Report

Merging #1362 (259d517) into main (50ad2f8) will decrease coverage by 0.02%.
The diff coverage is 63.41%.

@@            Coverage Diff             @@
##             main    #1362      +/-   ##
==========================================
- Coverage   67.10%   67.07%   -0.03%     
==========================================
  Files         291      293       +2     
  Lines       19527    19631     +104     
  Branches      258      274      +16     
==========================================
+ Hits        13104    13168      +64     
- Misses       5073     5111      +38     
- Partials     1350     1352       +2

Flag	Coverage Δ
unittest-go-macos-latest	`54.25% <ø> (-0.06%)`	⬇️
unittest-go-postgres-	`65.64% <ø> (+0.13%)`	⬆️
unittest-go-ubuntu-latest	`56.56% <ø> (+0.01%)`	⬆️
unittest-go-windows-2022	`52.55% <ø> (-0.10%)`	⬇️
unittest-js	`73.84% <63.41%> (-0.90%)`	⬇️

Impacted Files	Coverage Δ
site/src/AppRouter.tsx	`0.00% <0.00%> (ø)`
...es/WorkspaceSettingsPage/WorkspaceSettingsPage.tsx	`0.00% <0.00%> (ø)`
site/src/testHelpers/handlers.ts	`58.82% <0.00%> (-6.40%)`	⬇️
site/src/xServices/workspace/workspaceXService.ts	`38.29% <20.00%> (-20.80%)`	⬇️
site/src/pages/WorkspacePage/WorkspacePage.tsx	`80.00% <50.00%> (-11.67%)`	⬇️
site/src/xServices/workspace/workspaceSelectors.ts	`53.84% <53.84%> (ø)`
site/src/api/api.ts	`69.14% <62.50%> (-0.62%)`	⬇️
...mponents/WorkspaceStatusBar/WorkspaceStatusBar.tsx	`90.32% <90.32%> (ø)`
site/src/components/Workspace/Workspace.tsx	`100.00% <100.00%> (ø)`
...c/components/WorkspaceSection/WorkspaceSection.tsx	`100.00% <100.00%> (ø)`
... and 10 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 50ad2f8...259d517. Read the comment docs.

site/src/xServices/workspace/workspaceXService.ts

BrunoQuaresma

LGTM

presleyp · 2022-05-13T21:19:39Z

site/src/xServices/workspace/workspaceSelectors.ts

+  delete: "deleted",
+}
+
+export const selectWorkspaceStatus = (state: State<WorkspaceContext, WorkspaceEvent>): WorkspaceStatus => {


@BrunoQuaresma this is how I'm translating workspace build and job info into the user-facing workspace status.

presleyp · 2022-05-13T21:21:10Z

site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx

+  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",


@BrunoQuaresma and these show how I translate that workspace status into the actual language.

greyscaled

Very nicely handled. Pulled the code, ran it and tested it including deleting the workspace from the CLI and monitoring the network and UI.

The state machine looks great to me.

All comments are either informational or minor, not meant to block.

greyscaled · 2022-05-13T21:26:10Z

site/src/api/api.ts

@@ -132,6 +132,21 @@ export const getWorkspaceResources = async (workspaceBuildID: string): Promise<T
  return response.data
 }

+const postWorkspaceBuild =
+  (transition: string) =>


Suggestion(if-minor): Could this be:

(transition: WorkspaceBuildTransition) =>

site/src/pages/WorkspacePage/WorkspacePage.tsx

greyscaled · 2022-05-14T00:56:25Z

site/src/pages/WorkspacePage/WorkspacePage.test.tsx

@@ -1,8 +1,57 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */


Question(minor): Would you find it useful for this to be disabled in all test.tsx files? We can certainly make that override at the configuration-level.

Yeah I think that's what we intended to do

greyscaled · 2022-05-14T01:03:31Z

site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx

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


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?

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

@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!

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.

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

site/src/xServices/workspace/workspaceSelectors.ts

greyscaled · 2022-05-14T01:52:14Z

site/src/xServices/workspace/workspaceXService.ts

+          pollingWorkspace: {
+            initial: "refreshingWorkspace",
+            states: {
+              refreshingWorkspace: {
+                entry: "clearRefreshWorkspaceError",
+                invoke: {
+                  id: "refreshWorkspace",
+                  src: "refreshWorkspace",
+                  onDone: { target: "waiting", actions: "assignWorkspace" },
+                  onError: { target: "waiting", actions: "assignRefreshWorkspaceError" },
+                },
+              },
+              waiting: {
+                after: {
+                  1000: "refreshingWorkspace",
+                },
+              },
+            },


Comment(informing):

@f0ssel - we both understand the implications of the web client polling on the workspaces page, w.r.t scale and monitoring of network traffic.

I wanted to:

Inform you of this (TL:DR a workspace page (via workspace id) will continuously poll on a 1-second interval). The response is always 200, even for a deleted or stopped workspace.

Get your thoughts about this design and the 1-second interval, and if there's any other concerns you have

I am making this comment without any intent of blocking this PR, but just to understand the implications and inquire about http vs wss here.

State machine diagram associated to this code:

Yeah, I was initially going to use a 1 sec interval for polling while building, and 5 seconds for just updating status, but I ended up using the same code for both so I went with 1 second. But let me know what you think! If we put statuses on the workspace list page, there will be more polling.

greyscaled · 2022-05-14T02:02:42Z

I added @f0ssel as a reviewer specifically for #1362 (comment) but want to emphasize this is more for informing and breaking out a separate discussion, than something that is required now for merge.

Co-authored-by: G r e y <grey@coder.com>

Kira-Pilot

Nice job!! I really appreciated the workspaces writeup you made last week; that really helped me understand this better.

* Move component and prep * Make WorkspaceSection more reusable * Lay out elements * Layout tweaks * Add outdated to Workspace type * Fill out status bar component * Format * Add transition to types * Add api handlers for build toggle * Format * Parallelize machine * Lay out basics of build submachine * Pipe start and stop events through - needs status * Attempt at a machine It's so big, but collapsing start and stop made it hard to distinguish retry from toggle * Update mock * Render status and buttons * Fix type error on template page * Move Settings * Format * Keep refreshed workspace * Make it switch workspaces * Lint * Fix relative api path * Test * Fix polling * Add loading workspace state * Format * Add stub settings page * Format * Lint * Get rid of let * Add update * Make start use version id Important for update * Fix imports * Add polling for outdated * Rely on context instead of finite state for status * Handle canceling * Fix tests * Format * Display errors so users know when button presses didn't work * Fix api typo, remove logging * Lint * Simplify type Co-authored-by: G r e y <grey@coder.com> * Add type, extract helper Co-authored-by: G r e y <grey@coder.com>

presleyp added 23 commits May 5, 2022 05:05

Move component and prep

b1cc9d6

Make WorkspaceSection more reusable

0da5e7e

Lay out elements

580e801

Layout tweaks

b995f4a

Add outdated to Workspace type

e7dc082

Fill out status bar component

7f6bbda

Merge branch 'main' into statusbar/presleyp/1032

08b01c0

Format

1bc3e35

Add transition to types

ccbf527

Add api handlers for build toggle

f6bcbaa

Format

db348a6

Parallelize machine

8d5fcfd

Lay out basics of build submachine

62c40f4

Pipe start and stop events through - needs status

eaa353d

Attempt at a machine

399390e

It's so big, but collapsing start and stop made it hard to distinguish retry from toggle

Update mock

c100ec5

Render status and buttons

903e8ee

Fix type error on template page

e8e81ce

Move Settings

2226fea

Format

df0bc5b

Keep refreshed workspace

14bd598

Merge branch 'main' into statusbar/presleyp/1032

c93dde3

Make it switch workspaces

1093103

presleyp self-assigned this May 10, 2022

presleyp added 3 commits May 10, 2022 15:18

Lint

478db51

Fix relative api path

40a62a8

Test

bd3a026

BrunoQuaresma reviewed May 10, 2022

View reviewed changes

site/src/xServices/workspace/workspaceXService.ts Outdated Show resolved Hide resolved

BrunoQuaresma approved these changes May 10, 2022

View reviewed changes

presleyp added 10 commits May 12, 2022 19:37

Add polling for outdated

1a09166

Merge branch 'main' into statusbar/presleyp/1032

aee54a0

Rely on context instead of finite state for status

e9758c7

Handle canceling

87fee06

Fix tests

b3f6b8c

Format

39e84d9

Display errors so users know when button presses didn't work

06abf62

Fix api typo, remove logging

8552ea2

Lint

72c856e

Merge branch 'main' into statusbar/presleyp/1032

259d517

presleyp marked this pull request as ready for review May 13, 2022 21:16

presleyp requested a review from a team as a code owner May 13, 2022 21:16

presleyp commented May 13, 2022

View reviewed changes

greyscaled approved these changes May 14, 2022

View reviewed changes

greyscaled requested a review from f0ssel May 14, 2022 02:01

misskniss added the V2 BETA label May 15, 2022

misskniss added this to the V2 Beta milestone May 15, 2022

Simplify type

24829be

Co-authored-by: G r e y <grey@coder.com>

Kira-Pilot approved these changes May 16, 2022

View reviewed changes

Add type, extract helper

542d865

presleyp enabled auto-merge (squash) May 16, 2022 16:32

presleyp merged commit b06ef0a into main May 16, 2022

presleyp deleted the statusbar/presleyp/1032 branch May 16, 2022 16:34

presleyp mentioned this pull request May 16, 2022

Implement the Update button on the workspace status bar #1364

Closed

greyscaled mentioned this pull request May 24, 2022

Add retry to frontend API calls #912

Closed

2 tasks

nadzeyav mentioned this pull request May 31, 2022

Bug: Workspace page: Stop and Start workspace buttons are displayed for workspace in Failed status #1913

Closed

greyscaled mentioned this pull request Jun 13, 2022

Dashboard spams /users/{name}/workspace/{name} route on workspaces page #2260

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Workspace StatusBar #1362

feat: Workspace StatusBar #1362

presleyp commented May 10, 2022 •

edited

Loading

codecov bot commented May 10, 2022 •

edited

Loading

BrunoQuaresma left a comment

presleyp May 13, 2022

presleyp May 13, 2022

greyscaled left a comment

greyscaled May 13, 2022

greyscaled May 14, 2022 •

edited

Loading

presleyp May 16, 2022

greyscaled May 14, 2022 •

edited

Loading

Kira-Pilot May 16, 2022

presleyp May 16, 2022

Kira-Pilot May 16, 2022

presleyp May 16, 2022

greyscaled May 14, 2022 •

edited

Loading

presleyp May 16, 2022

greyscaled commented May 14, 2022

Kira-Pilot left a comment

		@@ -1,8 +1,57 @@
		/* eslint-disable @typescript-eslint/no-floating-promises */

feat: Workspace StatusBar #1362

feat: Workspace StatusBar #1362

Conversation

presleyp commented May 10, 2022 • edited Loading

codecov bot commented May 10, 2022 • edited Loading

Codecov Report

BrunoQuaresma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greyscaled left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greyscaled May 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greyscaled May 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greyscaled May 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greyscaled commented May 14, 2022

Kira-Pilot left a comment

Choose a reason for hiding this comment

presleyp commented May 10, 2022 •

edited

Loading

codecov bot commented May 10, 2022 •

edited

Loading

greyscaled May 14, 2022 •

edited

Loading

greyscaled May 14, 2022 •

edited

Loading

greyscaled May 14, 2022 •

edited

Loading