Skip to content

[dashboard] display credit usage #15295

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 2 commits into from
Dec 12, 2022
Merged

[dashboard] display credit usage #15295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5f7c59
[dashboard] display credit usage
svenefftinge Dec 12, 2022
527f567
[dashboard] more space for coins
svenefftinge Dec 12, 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
4 changes: 3 additions & 1 deletion components/dashboard/src/components/UsageBasedBillingConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,9 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
<div className="flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
<div className="uppercase text-sm text-gray-400 dark:text-gray-500">Balance</div>
<div className="mt-1 text-xl font-semibold flex-grow">
<span className="text-gray-900 dark:text-gray-100">{balance}</span>
<span className="text-gray-900 dark:text-gray-100">
{balance.toLocaleString(undefined, { maximumFractionDigits: 2 })}
</span>
Copy link
Member Author

@svenefftinge svenefftinge Dec 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

drive-by, fixes #15285

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks! Today I learned about Number.toLocaleString(). 💡

<span className="text-gray-400 dark:text-gray-500"> Credits</span>
</div>
<div className="mt-4 text-sm flex text-gray-400 dark:text-gray-500">
Expand Down
15 changes: 13 additions & 2 deletions components/dashboard/src/components/WorkspaceClass.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,23 @@ function WorkspaceClass(props: WorkspaceClassProps) {
>
{props.description}
</div>
<div className="text-xl font-semibold mt-1 mb-4">
<svg viewBox="0 -4 50 50" xmlns="http://www.w3.org/2000/svg">
<div className="text-xl my-1 flex-row flex align-middle">
<svg
viewBox={"0 -4 " + 2.5 * (props.powerUps || 1) + " 2"}
xmlns="http://www.w3.org/2000/svg"
className="h-3 my-1 mr-1"
>
{Array.from(Array(props.powerUps).keys()).map((i) => {
return <ellipse cx={0.8 + i * 2.5} cy="-3" rx="0.8" ry="0.8" style={{ fill: "#FFB45B" }} />;
})}
</svg>
<div
className={`text-sm font-normal truncate w-full ${
props.selected ? "text-gray-300 dark:text-gray-500" : "text-gray-500 dark:text-gray-400"
}`}
>
{(props?.powerUps || 1) * 10} credits/hour
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/settings/selectClass.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
{supportedClasses.map((c) => {
return (
<WorkspaceClass
additionalStyles="w-80 h-32"
additionalStyles="w-80"
Copy link
Contributor

@jankeromnes jankeromnes Dec 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Unfortunately, removing the fixed height causes the bottom padding to look enormous 😞 but I didn't have a good suggestion for how to get it right without significant changes. So, maybe let's iterate on the design of the workspace class selector in follow-ups.

Copy link
Member Author

Choose a reason for hiding this comment

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

by enormous you mean more than what is shown in screenshot in the initial comment?

Copy link
Contributor

@jankeromnes jankeromnes Dec 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I mean the empty vertical space between the dot and the bottom border of the card:

Before

Screenshot 2022-12-12 at 15 09 52

After

Screenshot 2022-12-12 at 15 10 10

Copy link
Member Author

Choose a reason for hiding this comment

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

Ah, ok that is intentional. cc @gtsiolis

Copy link
Contributor

@gtsiolis gtsiolis Dec 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Padding changes look (acceptable). ✔️

I'd separate the consumption rate (10 credits/hour) from the resources (dot) indicator (● ●) information to scale better, but can be done along with more spacing improvements later when we introduce more than two workspace classes.

Thanks for the ping, @svenefftinge! 🏓
Thanks for caring about the spacing, @jankeromnes! ✨

selected={workspaceClass === c.id}
onClick={() => actuallySetWorkspaceClass(c.id)}
category={c.category}
Expand Down
4 changes: 2 additions & 2 deletions components/server/ee/src/workspace/gitpod-server-impl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2155,7 +2155,7 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
try {
customer = (await this.billingService.getStripeCustomer({ attributionId })).customer;
} catch (e) {
console.error(e);
Copy link
Member Author

Choose a reason for hiding this comment

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

unrelated drive-by change

log.error(e);
}
if (customer) {
// NOTE: this is a temporary workaround, as long as we're not automatically re-create the customer
Expand All @@ -2171,7 +2171,7 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
return;
}

// otherwise we need to create a new costomer.
// otherwise we need to create a new customer.
try {
await this.billingService.createStripeCustomer({
attributionId,
Expand Down
2 changes: 1 addition & 1 deletion components/usage/pkg/stripe/stripe.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ func (c *Client) GetCustomerByAttributionID(ctx context.Context, attributionID s
}

if len(customers) == 0 {
return nil, status.Errorf(codes.NotFound, "no team customer found for attribution_id: %s", attributionID)
Copy link
Member Author

Choose a reason for hiding this comment

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

unrelated drive-by change

return nil, status.Errorf(codes.NotFound, "no customer found for attribution_id: %s", attributionID)
}
if len(customers) > 1 {
return nil, status.Errorf(codes.FailedPrecondition, "found multiple customers for attributiuon_id: %s", attributionID)
Expand Down