[server][dashboard] Fetch and use the actual 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 [billingPeriodFrom, setBillingPeriodFrom] = useState<dayjs.Dayjs>(now.startOf("month"));
+    const [billingPeriodTo, setBillingPeriodTo] = useState<dayjs.Dayjs>(now.endOf("month"));
 
     useEffect(() => {
         if (!attributionId) {
@@ -56,12 +56,17 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
             setStripeSubscriptionId(undefined);
             setIsLoadingStripeSubscription(true);
             try {
-                const [subscriptionId, limit] = await Promise.all([
+                const [subscriptionId, limit, billingCycleDates] = await Promise.all([
                     getGitpodService().server.findStripeSubscriptionId(attributionId),
                     getGitpodService().server.getUsageLimit(attributionId),
+                    getGitpodService().server.getCurrentBillingCycleDates(attributionId),
                 ]);
                 setStripeSubscriptionId(subscriptionId);
                 setUsageLimit(limit);
+                if (billingCycleDates) {
+                    setBillingPeriodFrom(dayjs(billingCycleDates.from).utc(true));
+                    setBillingPeriodTo(dayjs(billingCycleDates.to).utc(true));
+                }
             } catch (error) {
                 console.error("Could not get Stripe subscription details.", error);
                 setErrorMessage(`Could not get Stripe subscription details. ${error?.message || String(error)}`);
@@ -183,7 +188,7 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
             });
             setCurrentUsage(response.creditsUsed);
         })();
-    }, [attributionId]);
+    }, [attributionId, billingPeriodFrom]);
 
     const showSpinner = !attributionId || isLoadingStripeSubscription || !!pendingStripeSubscription;
     const showBalance = !showSpinner && !(AttributionId.parse(attributionId)?.kind === "team" && !stripeSubscriptionId);

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

@@ -281,6 +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>;
+    getCurrentBillingCycleDates(attributionId: string): Promise<{ from: string; to: string } | undefined>;
     getUsageLimit(attributionId: string): Promise<number | undefined>;
     setUsageLimit(attributionId: string, usageLimit: number): Promise<void>;
 

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

@@ -2258,6 +2258,29 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         return url;
     }
 
+    async getCurrentBillingCycleDates(
+        ctx: TraceContext,
+        attributionId: string,
+    ): Promise<{ from: string; to: string } | 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");
+        await this.guardCostCenterAccess(ctx, user.id, attrId, "get");
+
+        const { costCenter } = await this.usageService.getCostCenter({ attributionId });
+        if (costCenter?.creationTime && costCenter?.nextBillingTime) {
+            return {
+                from: costCenter.creationTime.toISOString(),
+                to: costCenter.nextBillingTime.toISOString(),
+            };
+        }
+        return undefined;
+    }
+
     async getUsageLimit(ctx: TraceContext, attributionId: string): Promise<number | undefined> {
         const attrId = AttributionId.parse(attributionId);
         if (attrId === undefined) {
@@ -2268,9 +2291,9 @@ export class GitpodServerEEImpl extends GitpodServerImpl {
         const user = this.checkAndBlockUser("getUsageLimit");
         await this.guardCostCenterAccess(ctx, user.id, attrId, "get");
 
-        const costCenter = await this.usageService.getCostCenter({ attributionId });
-        if (costCenter?.costCenter) {
-            return costCenter.costCenter.spendingLimit;
+        const { costCenter } = await this.usageService.getCostCenter({ attributionId });
+        if (costCenter) {
+            return costCenter.spendingLimit;
         }
         return undefined;
     }

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

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

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

@@ -3144,6 +3144,13 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }
 
+    async getCurrentBillingCycleDates(
+        ctx: TraceContext,
+        attributionId: string,
+    ): Promise<{ from: string; to: string } | undefined> {
+        throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
+    }
+
     async getUsageLimit(ctx: TraceContext, attributionId: string): Promise<number | undefined> {
         throw new ResponseError(ErrorCodes.SAAS_FEATURE, `Not implemented in this version`);
     }