[server][dashboard] Fetch and use the actual cost center billing cycle dates in usage-based Billing pages

Author: jankeromnes

components/dashboard/src/components/UsageBasedBillingConfig.tsx

@@ -45,8 +45,8 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
 
     const localStorageKey = `pendingStripeSubscriptionFor${attributionId}`;
     const now = dayjs().utc(true);
-    const billingPeriodFrom = now.startOf("month");
-    const billingPeriodTo = now.endOf("month");
+    const [billingCycleFrom, setBillingCycleFrom] = useState<dayjs.Dayjs>(now.startOf("month"));
+    const [billingCycleTo, setBillingCycleTo] = useState<dayjs.Dayjs>(now.endOf("month"));
 
     useEffect(() => {
         if (!attributionId) {
@@ -56,12 +56,14 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
             setStripeSubscriptionId(undefined);
             setIsLoadingStripeSubscription(true);
             try {
-                const [subscriptionId, limit] = await Promise.all([
+                const [subscriptionId, costCenter] = await Promise.all([
                     getGitpodService().server.findStripeSubscriptionId(attributionId),
-                    getGitpodService().server.getUsageLimit(attributionId),
+                    getGitpodService().server.getCostCenter(attributionId),
                 ]);
                 setStripeSubscriptionId(subscriptionId);
-                setUsageLimit(limit);
+                setUsageLimit(costCenter?.spendingLimit);
+                setBillingCycleFrom((dayjs(costCenter?.billingCycleStart) || now.startOf("month")).utc(true));
+                setBillingCycleTo((dayjs(costCenter?.nextBillingTime) || now.endOf("month")).utc(true));
             } catch (error) {
                 console.error("Could not get Stripe subscription details.", error);
                 setErrorMessage(`Could not get Stripe subscription details. ${error?.message || String(error)}`);
@@ -178,12 +180,12 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
             const response = await getGitpodService().server.listUsage({
                 attributionId,
                 order: Ordering.ORDERING_DESCENDING,
-                from: billingPeriodFrom.toDate().getTime(),
+                from: billingCycleFrom.toDate().getTime(),
                 to: Date.now(),
             });
             setCurrentUsage(response.creditsUsed);
         })();
-    }, [attributionId]);
+    }, [attributionId, billingCycleFrom]);
 
     const showSpinner = !attributionId || isLoadingStripeSubscription || !!pendingStripeSubscription;
     const showBalance = !showSpinner && !(AttributionId.parse(attributionId)?.kind === "team" && !stripeSubscriptionId);
@@ -255,8 +257,15 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
                             <div className="flex-grow">
                                 <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Period</div>
                                 <div className="text-sm font-medium text-gray-500 dark:text-gray-400">
-                                    <span className="font-semibold">{`${billingPeriodFrom.format("MMMM YYYY")}`}</span>{" "}
-                                    {`(${billingPeriodFrom.format("MMM D")}` + ` - ${billingPeriodTo.format("MMM D")})`}
+                                    <span className="font-semibold">{`${billingCycleFrom.format("MMMM YYYY")}`}</span> (
+                                    <span title={billingCycleFrom.toDate().toUTCString().replace("GMT", "UTC")}>
+                                        {billingCycleFrom.format("MMM D")}
+                                    </span>{" "}
+                                    -{" "}
+                                    <span title={billingCycleTo.toDate().toUTCString().replace("GMT", "UTC")}>
+                                        {billingCycleTo.format("MMM D")}
+                                    </span>
+                                    )
                                 </div>
                             </div>
                             <div>

components/gitpod-protocol/src/gitpod-service.ts

@@ -62,6 +62,7 @@ import { InstallationAdminSettings, TelemetryData } from "./installation-admin-p
 import { ListUsageRequest, ListUsageResponse } from "./usage";
 import { SupportedWorkspaceClass } from "./workspace-class";
 import { BillingMode } from "./billing-mode";
+import { CostCenter } from "@gitpod/usage-api/lib/usage/v1/usage.pb";
 
 export interface GitpodClient {
     onInstanceUpdate(instance: WorkspaceInstance): void;
@@ -280,7 +281,7 @@ export interface GitpodServer extends JsonRpcServer<GitpodClient>, AdminServer,
     createStripeCustomerIfNeeded(attributionId: string, currency: string): Promise<void>;
     subscribeToStripe(attributionId: string, setupIntentId: string, usageLimit: number): Promise<number | undefined>;
     getStripePortalUrl(attributionId: string): Promise<string>;
-    getUsageLimit(attributionId: string): Promise<number | undefined>;
+    getCostCenter(attributionId: string): Promise<CostCenter | undefined>;
     setUsageLimit(attributionId: string, usageLimit: number): Promise<void>;
 
     listUsage(req: ListUsageRequest): Promise<ListUsageResponse>;

components/gitpod-protocol/src/protocol.ts

@@ -8,7 +8,6 @@ import { WorkspaceInstance, PortVisibility } from "./workspace-instance";
 import { RoleOrPermission } from "./permission";
 import { Project } from "./teams-projects-protocol";
 import { createHash } from "crypto";
-import { AttributionId } from "./attribution";
 
 export interface UserInfo {
     name?: string;
@@ -1518,13 +1517,3 @@ export interface StripeConfig {
     individualUsagePriceIds: { [currency: string]: string };
     teamUsagePriceIds: { [currency: string]: string };
 }
-
-export type BillingStrategy = "other" | "stripe";
-export interface CostCenter {
-    readonly id: AttributionId;
-    /**
-     * Unit: credits
-     */
-    spendingLimit: number;
-    billingStrategy: BillingStrategy;
-}

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

@@ -73,6 +73,7 @@ import { AccountStatementProvider } from "../user/account-statement-provider";
 import { GithubUpgradeURL, PlanCoupon } from "@gitpod/gitpod-protocol/lib/payment-protocol";
 import { ListUsageRequest, ListUsageResponse } from "@gitpod/gitpod-protocol/lib/usage";
 import {
+    CostCenter,
     CostCenter_BillingStrategy,
     ListUsageRequest_Ordering,
     UsageServiceClient,
@@ -2261,21 +2262,18 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         return url;
     }
 
-    async getUsageLimit(ctx: TraceContext, attributionId: string): Promise<number | undefined> {
+    async getCostCenter(ctx: TraceContext, attributionId: string): Promise<CostCenter | undefined> {
         const attrId = AttributionId.parse(attributionId);
         if (attrId === undefined) {
             log.error(`Invalid attribution id: ${attributionId}`);
             throw new ResponseError(ErrorCodes.BAD_REQUEST, `Invalid attibution id: ${attributionId}`);
         }
 
-        const user = this.checkAndBlockUser("getUsageLimit");
+        const user = this.checkAndBlockUser("getCostCenter");
         await this.guardCostCenterAccess(ctx, user.id, attrId, "get");
 
-        const costCenter = await this.usageService.getCostCenter({ attributionId });
-        if (costCenter?.costCenter) {
-            return costCenter.costCenter.spendingLimit;
-        }
-        return undefined;
+        const { costCenter } = await this.usageService.getCostCenter({ attributionId });
+        return costCenter;
     }
 
     async setUsageLimit(ctx: TraceContext, attributionId: string, usageLimit: number): Promise<void> {

components/server/src/auth/rate-limiter.ts

@@ -214,7 +214,7 @@ const defaultFunctions: FunctionsConfig = {
     getPrebuildEvents: { group: "default", points: 1 },
     setUsageAttribution: { group: "default", points: 1 },
     listAvailableUsageAttributionIds: { group: "default", points: 1 },
-    getUsageLimit: { group: "default", points: 1 },
+    getCostCenter: { group: "default", points: 1 },
     setUsageLimit: { group: "default", points: 1 },
     getNotifications: { group: "default", points: 1 },
     getSupportedWorkspaceClasses: { group: "default", points: 1 },

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

@@ -181,6 +181,7 @@ import { IDEService } from "../ide-service";
 import { MessageBusIntegration } from "./messagebus-integration";
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import * as grpc from "@grpc/grpc-js";
+import { CostCenter } from "@gitpod/usage-api/lib/usage/v1/usage.pb";
 
 // shortcut
 export const traceWI = (ctx: TraceContext, wi: Omit<LogContext, "userId">) => TraceContext.setOWI(ctx, wi); // userId is already taken care of in WebsocketConnectionManager
@@ -3157,7 +3158,7 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
 
-    async getUsageLimit(ctx: TraceContext, attributionId: string): Promise<number | undefined> {
+    async getCostCenter(ctx: TraceContext, attributionId: string): Promise<CostCenter | undefined> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }