[dashboard] display credit usage

Author: svenefftinge

components/dashboard/src/components/UsageBasedBillingConfig.tsx

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

components/dashboard/src/components/WorkspaceClass.tsx

@@ -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 * (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>

components/dashboard/src/settings/selectClass.tsx

@@ -48,7 +48,7 @@ export default function SelectWorkspaceClass(props: SelectWorkspaceClassProps) {
             {supportedClasses.map((c) => {
                 return (
                     <WorkspaceClass
-                        additionalStyles="w-80 h-32"
+                        additionalStyles="w-80"
                         selected={workspaceClass === c.id}
                         onClick={() => actuallySetWorkspaceClass(c.id)}
                         category={c.category}

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

@@ -2155,7 +2155,7 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         try {
             customer = (await this.billingService.getStripeCustomer({ attributionId })).customer;
         } catch (e) {
-            console.error(e);
+            log.error(e);
         }
         if (customer) {
             // NOTE: this is a temporary workaround, as long as we're not automatically re-create the customer
@@ -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,

components/usage/pkg/stripe/stripe.go

@@ -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)
+		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)