Show workspace details in usage list view

[laushinka]

@jldec updated Aug 9

Workspace details in a dropdown or inline in each row
Let's increase the page size to 50 for now (#12122)

Must haves

• usage type: prebuild OR workspace
• class (large / default)
• workspace ID
• repository context (link)
• started date/time (actual) ([usage] Use actual date for start time #12123)
• User ID or name

**Nice to have (ok skip for now) **

• Project (link)
• Stopped date/time (actual)

From Figma

NOTE: Other design changes are discussed in separate issue #11953

[svenefftinge]

Looks great, some thoughts I had:

• some of the header titles don't make sense
• project (instead of 'repository) should be a top-level property
• status doesn't make so much sense here IMHO
• session would probably confuse users more than it helps. Maybe we omit it and work with workspace id plus started time to reference an instance?
• Monthly Usage could be something like Usage in Period. Sounds like an average otherwise. Also, I believe we are going to allow more flexibility with the period selection in the future.
• Last Active could be just Date without using moment but an absolute time stamp. Makes IMHO more sense when looking into things form the past and sort, filtering them.

[gtsiolis]

Some thoughts on the feedback points from bottom to top, while keeping in mind this is still work-in-progress:

Last Active could be just Date without using moment but an absolute time stamp. Makes IMHO more sense when looking into things form the past and sort, filtering them.

Good point! 🤝

Monthly Usage could be something like Usage in Period. Sounds like an average otherwise.

Agree, we've already changed this to Total Usage in the proposed changes in #11526 which will make more sense once we introduce the option to drill down to usage types like workspaces, prebuilds, etc., see early designs in the relevant discussion (internal). Feedback is welcome! ✔️

Also, I believe we are going to allow more flexibility with the period selection in the future.

Yes! See #11526 (comment).

session would probably confuse users more than it helps. Maybe we omit it and work with workspace id plus started time to reference an instance?

This was inspired from a past discussion in #10328 (comment) with the intent to start exposing users to the concept of session which could be useful also on the workspaces list later. However, I agree we could skip that for now and re-introduce later. 🤝

status doesn't make so much sense here IMHO

This is related to whether we surface running workspace or prebuilds in this list, no? So far, the consensus I've seen is to include running workspaces (see. relevant discussion (internal)) but I'm not sure about the current implementation. If we are going to include running workspaces, we'd have to make sure the STOPPED time remains blank or includes an indicator this is still running, etc.

project (instead of 'repository) should be a top-level property

Good point! This was probably left outside while tackling data structure which is different for workspaces and prebuilds, like the workspace ID v. prebuild ID and workspace owner vs. missing prebuild triggerer (see relevant note (internal)).

some of the header titles don't make sense

---

Thanks @laushinka for opening this and @svenefftinge for the feedback!

[gtsiolis]

Posting a new iteration of the workspaces details, including font color, weight, and alignment on the table in the scope of #11527. Changes from the last iteration include the following:

1. Toned down left sidebar elements
2. Surface workspace or prebuild ID on the visible row details
3. Included (optional) project column in the details
4. Experimenting with same color active row and details panel
5. Split user avatar and moved to end of the row just before the toggle icon to provide better visual balance when the avatar is missing for prebuilds.
6. Introduced an icon indicator ⚪ + ⬜ for differentiating workspaces and prebuilds without the need to repeat the type with text while also carrying the icon used in the workspaces list for workspaces' status.

Light Theme	Dark Theme

See design specs.

[gtsiolis]

Adding below the updated design specs for the usage list after this morning's discussion and pairing session with @laushinka and @jldec. 🍐

Usage (List)

See design specs.