[usage] Show workspace and user details #12135

laushinka · 2022-08-15T11:31:34Z

Description

Shows the workspace context URL and user details.
Prebuilds don't have user details, so they are shown by a Gitpod name and generic icon.

Related Issue(s)

Fixes #11640

How to test

Join this team.
Ask owner (me or @jldec) to make you owner.
Go to Usage

Release Notes

NONE

Documentation

Werft options:

/werft with-preview
/werft with-payment

laushinka · 2022-08-15T11:52:04Z

/werft run

👍 started the job as gitpod-build-lau-ws-details-11640.4
(with .werft/ from main)

laushinka · 2022-08-16T14:49:34Z

components/dashboard/src/teams/TeamUsage.tsx

+                const extendedResult = await Promise.all(
+                    billedUsageResult.map(async (res) => {
+                        const ws = await server.getWorkspaceForBillableSession(res.workspaceId, attributionId);
+                        if (!res.userId) {


Comments:

I decided on making the extra calls here instead of extending the listBilledUsage in the server because listBilledUsage is currently being called somewhere else as well (when we check the spending limit). That call will be replaced eventually, though. Maybe we can move the calls then, but go with this in this iteration?

Happy to get a review on how to write this convoluted block better 🙏🏽

@laushinka Now I see that we meant with the additional calls. I don't like that they introduce extra API, and really thing the perfect spot for it would be here.WDYT?
Biggest benefit I see is that we would resolve the 1+N situation, and can try to replace it with a single SQL if we do it right.

Agree there would be best - only did this as a temporary solution as I mentioned above because the spending limit also calls listBilledUsage for now.
Will make the change.

jldec

This is awesome - thanks @laushinka

Suggestions for additional polish (non-blocking)

In dark mode the header background should be a darker grey (like you get when you hover over it) and the first line of text in each table row should be lighter than the 2nd line (to make it match readability/emphasis of the first line of each row in light mode)
In the Credits column, the 2nd line (x.x min) should not wrap - but rather use truncate with ellipses like you did for the 1st line of the Timestamp column.

approve and
/hold for technical review

components/dashboard/src/teams/TeamUsage.tsx

components/server/ee/src/workspace/gitpod-server-impl.ts

gtsiolis · 2022-08-18T11:13:50Z

Looking at this now! 👀

gtsiolis

Looks great, @laushinka!

Regarding the question about the icon in #12135 (comment), I accidentally had the option to show the background in exports disabled while working on the designs, see screenshot.

It's fixed now, but here's also the SVG optimized ready to use:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
  <rect width="16" height="16" fill="#D6D3D1" rx="8"/>
  <path fill="#A8A29E" fill-rule="evenodd" d="M8.74323 2.03089c.23787.08748.39963.34485.39963.63583v3.33334h2.28574c.213 0 .4084.13831.5068.3588.0984.22049.0835.48654-.0387.69018L7.89671 13.7157c-.14303.2384-.40206.341-.63993.2536-.23787-.0875-.39963-.3449-.39963-.6359v-3.3333H4.57143c-.21307 0-.40845-.13832-.50684-.35881-.0984-.22049-.08348-.48654.03871-.69019l4-6.66669c.14303-.23838.40205-.341.63993-.25352Z" clip-rule="evenodd"/>
</svg>

🍊 🍊 🍊 🍊

Regarding UX, I couldn't see this in actions as I'm still not an owner of the Gitpod team on this preview environment, but here are some comments from what I can see in the screenshots:

It would be great if we could use some bolder fonts and colors as seen in the initial design specs as this can really make a difference in information hierarchy, see screenshot below
Ideally, the custom icon for the prebuild entry would take the same space and use the same margins as the user avatars in the rest of the list.

CURRENT	DESIGN SPECS

geropl · 2022-08-18T14:25:16Z

@gtsiolis As Laurie is out today I tried to address all you points above ☝️ Does this work: usage view?

(also, made you owner) ✔️

gtsiolis · 2022-08-18T14:27:10Z

Taking another look now! 👀

Thanks, @geropl!

geropl · 2022-08-18T14:29:08Z

@gtsiolis You might need for the new build for avatars to work again - sorry 🙈

gtsiolis

Thanks for making the changes, @geropl!

We're almost there! 🏁

Made some more changes on the fly while having the preview environment up and running. Mostly trivial color and spacing issues.

components/dashboard/src/teams/TeamUsage.tsx

gtsiolis

@geropl I left a couple more comments on the changes.

components/dashboard/src/teams/TeamUsage.tsx

gtsiolis · 2022-08-18T15:35:58Z

components/dashboard/src/teams/TeamUsage.tsx

-                                <ItemsList className="mt-2 text-gray-500">
-                                    <Item header={false} className="grid grid-cols-5 bg-gray-100 mb-5">
-                                        <ItemField className="my-auto">
+                                <ItemsList className="mt-2 text-gray-400 dark:text-gray-500">


thought: We really need to take this component to the next iteration.

geropl · 2022-08-18T15:38:33Z

/werft run with-clean-slate-deployment

👍 started the job as gitpod-build-lau-ws-details-11640.33
(with .werft/ from main)

geropl · 2022-08-18T16:02:08Z

deployment was broken before, did you notice @gtsiolis ? Finally deployed now:

new invite link: https://lau-ws-details-11640.preview.gitpod-dev.com/teams/join?inviteId=e57432f3-64dd-4d70-acc6-4c6fe58c3fef

Do we still need your new suggestions? if yes, I'm happy to merge (later tonight, have to jumpt).

gtsiolis · 2022-08-18T16:54:28Z

@geropl Oh, I didn't notice, let me check again. Could you make me a team owner?

geropl · 2022-08-18T17:36:11Z

Could you make me a team owner?

Done.

gtsiolis · 2022-08-18T17:38:00Z

@geropl I just checked. Besides the margin comment in #12135 (comment), the other three comments in #12135 (review) are still relevant.

geropl · 2022-08-19T06:12:41Z

@gtsiolis Merged and deployed ✨ :

gtsiolis · 2022-08-19T07:19:40Z

@geropl

components/dashboard/src/teams/TeamUsage.tsx

gtsiolis

Left some more minor issues, but we can bundle them with #12221.

components/dashboard/src/teams/TeamUsage.tsx

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

geropl

LGTM, tested and works! ✔️ 🙃

gtsiolis

UX LGTM. Let's ship this! ⛵

geropl · 2022-08-19T11:18:41Z

/unhold

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed labels Aug 15, 2022

laushinka changed the title ~~Show workspace and user details~~ [usage] Show workspace and user details Aug 15, 2022

roboquat added the size/S label Aug 15, 2022

roboquat added size/M and removed size/S labels Aug 15, 2022

laushinka force-pushed the lau/ws-details-11640 branch 4 times, most recently from 8100853 to 493309b Compare August 15, 2022 22:41

roboquat added size/L and removed size/M labels Aug 15, 2022

laushinka force-pushed the lau/ws-details-11640 branch 2 times, most recently from eb8c456 to 45f3a55 Compare August 16, 2022 14:38

roboquat added release-note-none and removed do-not-merge/release-note-label-needed labels Aug 16, 2022

laushinka commented Aug 16, 2022

View reviewed changes

laushinka marked this pull request as ready for review August 16, 2022 15:47

laushinka requested a review from a team August 16, 2022 15:47

roboquat removed the do-not-merge/work-in-progress label Aug 16, 2022

github-actions bot added the team: webapp Issue belongs to the WebApp team label Aug 16, 2022

laushinka force-pushed the lau/ws-details-11640 branch from 45f3a55 to a7373f1 Compare August 16, 2022 15:48

jldec approved these changes Aug 16, 2022

View reviewed changes

roboquat added the do-not-merge/hold label Aug 16, 2022

laushinka force-pushed the lau/ws-details-11640 branch from a7373f1 to 071cfe9 Compare August 16, 2022 22:02

laushinka commented Aug 16, 2022

View reviewed changes

components/dashboard/src/teams/TeamUsage.tsx Show resolved Hide resolved

geropl reviewed Aug 18, 2022

View reviewed changes

components/server/ee/src/workspace/gitpod-server-impl.ts Outdated Show resolved Hide resolved

laushinka force-pushed the lau/ws-details-11640 branch 2 times, most recently from 659738b to 1cb0f58 Compare August 18, 2022 09:30

gtsiolis reviewed Aug 18, 2022

View reviewed changes

geropl force-pushed the lau/ws-details-11640 branch from b15ad85 to 002c226 Compare August 18, 2022 14:28

gtsiolis suggested changes Aug 18, 2022

View reviewed changes

gtsiolis reviewed Aug 19, 2022

View reviewed changes

components/dashboard/src/teams/TeamUsage.tsx Outdated Show resolved Hide resolved

gtsiolis mentioned this pull request Aug 19, 2022

Decrease spacing between the timestamp table header and the sorting icon #12221

Closed

gtsiolis reviewed Aug 19, 2022

View reviewed changes

components/dashboard/src/teams/TeamUsage.tsx Outdated Show resolved Hide resolved

components/dashboard/src/teams/TeamUsage.tsx Show resolved Hide resolved

components/dashboard/src/teams/TeamUsage.tsx Outdated Show resolved Hide resolved

[server, dashboard] Review comments

2afbfa3

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

geropl force-pushed the lau/ws-details-11640 branch from 41c7864 to 2afbfa3 Compare August 19, 2022 08:51

gtsiolis mentioned this pull request Aug 19, 2022

Use a different sorting icon color on dark theme #12225

Closed

geropl requested a review from gtsiolis August 19, 2022 09:53

geropl approved these changes Aug 19, 2022

View reviewed changes

gtsiolis approved these changes Aug 19, 2022

View reviewed changes

roboquat removed the do-not-merge/hold label Aug 19, 2022

roboquat merged commit 18b1a50 into main Aug 19, 2022

roboquat deleted the lau/ws-details-11640 branch August 19, 2022 11:19

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Aug 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[usage] Show workspace and user details #12135

[usage] Show workspace and user details #12135

laushinka commented Aug 15, 2022 •

edited

Loading

laushinka commented Aug 15, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka Aug 16, 2022

geropl Aug 18, 2022

laushinka Aug 18, 2022

jldec left a comment

gtsiolis commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

geropl commented Aug 18, 2022

gtsiolis commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

geropl commented Aug 18, 2022

gtsiolis left a comment •

edited

Loading

gtsiolis left a comment •

edited

Loading

gtsiolis Aug 18, 2022

geropl commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

geropl commented Aug 18, 2022

gtsiolis commented Aug 18, 2022

geropl commented Aug 18, 2022

gtsiolis commented Aug 18, 2022 •

edited

Loading

geropl commented Aug 19, 2022

gtsiolis commented Aug 19, 2022

gtsiolis left a comment

geropl left a comment

gtsiolis left a comment •

edited

Loading

geropl commented Aug 19, 2022

[usage] Show workspace and user details #12135

[usage] Show workspace and user details #12135

Conversation

laushinka commented Aug 15, 2022 • edited Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Werft options:

laushinka commented Aug 15, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka Aug 16, 2022

Choose a reason for hiding this comment

geropl Aug 18, 2022

Choose a reason for hiding this comment

laushinka Aug 18, 2022

Choose a reason for hiding this comment

jldec left a comment

Choose a reason for hiding this comment

gtsiolis commented Aug 18, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

geropl commented Aug 18, 2022

gtsiolis commented Aug 18, 2022 • edited by werft-gitpod-dev-com bot Loading

geropl commented Aug 18, 2022

gtsiolis left a comment • edited Loading

Choose a reason for hiding this comment

gtsiolis left a comment • edited Loading

Choose a reason for hiding this comment

gtsiolis Aug 18, 2022

Choose a reason for hiding this comment

geropl commented Aug 18, 2022 • edited by werft-gitpod-dev-com bot Loading

geropl commented Aug 18, 2022

gtsiolis commented Aug 18, 2022

geropl commented Aug 18, 2022

gtsiolis commented Aug 18, 2022 • edited Loading

geropl commented Aug 19, 2022

gtsiolis commented Aug 19, 2022

gtsiolis left a comment

Choose a reason for hiding this comment

geropl left a comment

Choose a reason for hiding this comment

gtsiolis left a comment • edited Loading

Choose a reason for hiding this comment

geropl commented Aug 19, 2022

laushinka commented Aug 15, 2022 •

edited

Loading

laushinka commented Aug 15, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment •

edited

Loading

gtsiolis left a comment •

edited

Loading

geropl commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Aug 18, 2022 •

edited

Loading

gtsiolis left a comment •

edited

Loading