basic usage display (#4634)

Co-authored-by: Mauricio Araujo <[email protected]>
porter-dev · May 15, 2024 · 3bfe751 · 3bfe751
1 parent 7799df5
commit 3bfe751
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 203 deletions.
diff --git a/api/server/handlers/billing/plan.go b/api/server/handlers/billing/plan.go
@@ -149,7 +149,7 @@ func (c *ListCustomerUsageHandler) ServeHTTP(w http.ResponseWriter, r *http.Requ
 		telemetry.AttributeKV{Key: "subscription_id", Value: plan.ID},
 	)
 
-	usage, err := c.Config().BillingManager.LagoClient.ListCustomerUsage(ctx, plan.CustomerID, plan.ID, req.CurrentPeriod)
+	usage, err := c.Config().BillingManager.LagoClient.ListCustomerUsage(ctx, plan.CustomerID, plan.ID, req.CurrentPeriod, req.PreviousPeriods)
 	if err != nil {
 		err := telemetry.Error(ctx, span, err, "error listing customer usage")
 		c.HandleAPIError(w, r, apierrors.NewErrInternal(err))

diff --git a/api/types/billing_usage.go b/api/types/billing_usage.go
@@ -8,6 +8,9 @@ type ListCreditGrantsResponse struct {
 
 // ListCustomerUsageRequest is the request to list usage for a customer
 type ListCustomerUsageRequest struct {
+	// PreviousPeriods is the number of previous periods to include in the response.
+	PreviousPeriods int `json:"previous_periods,omitempty"`
+	// CurrentPeriod is whether to return only usage for the current billing period.
 	CurrentPeriod bool `json:"current_period,omitempty"`
 }
 

diff --git a/dashboard/src/lib/hooks/useLago.ts b/dashboard/src/lib/hooks/useLago.ts
@@ -30,7 +30,7 @@ type TGetInvoices = {
 };
 
 type TGetUsage = {
-  usage: Usage | null;
+  usageList: Usage[] | null;
 };
 
 type TGetReferralDetails = {
@@ -108,16 +108,15 @@ export const useCustomerPlan = (): TGetPlan => {
 };
 
 export const useCustomerUsage = (
-  startingOn: Date | null,
-  endingBefore: Date | null,
+  previousPeriods: number,
   currentPeriod: boolean
 ): TGetUsage => {
   const { currentProject } = useContext(Context);
 
   // Fetch customer usage
   const usageReq = useQuery(
-    ["listCustomerUsage", currentProject?.id],
-    async (): Promise<Usage | null> => {
+    ["listCustomerUsage", currentProject?.id, previousPeriods, currentPeriod],
+    async (): Promise<Usage[] | null> => {
       if (!currentProject?.metronome_enabled) {
         return null;
       }
@@ -126,23 +125,18 @@ export const useCustomerUsage = (
         return null;
       }
 
-      if (startingOn === null || endingBefore === null) {
-        return null;
-      }
-
       try {
         const res = await api.getCustomerUsage(
           "<token>",
           {
-            starting_on: startingOn.toISOString(),
-            ending_before: endingBefore.toISOString(),
+            previous_periods: previousPeriods,
             current_period: currentPeriod,
           },
           {
             project_id: currentProject?.id,
           }
         );
-        const usage = UsageValidator.parse(res.data);
+        const usage = UsageValidator.array().parse(res.data);
         return usage;
       } catch (error) {
         return null;
@@ -151,7 +145,7 @@ export const useCustomerUsage = (
   );
 
   return {
-    usage: usageReq.data ?? null,
+    usageList: usageReq.data ?? null,
   };
 };
 

diff --git a/dashboard/src/main/home/project-settings/ProjectSettings.tsx b/dashboard/src/main/home/project-settings/ProjectSettings.tsx
@@ -96,15 +96,15 @@ function ProjectSettings(props: any) {
         });
       }
 
-      // if (
-      //   currentProject?.billing_enabled &&
-      //   currentProject?.metronome_enabled
-      // ) {
-      //   tabOpts.push({
-      //     value: "usage",
-      //     label: "Usage",
-      //   });
-      // }
+      if (
+        currentProject?.billing_enabled &&
+        currentProject?.metronome_enabled
+      ) {
+        tabOpts.push({
+          value: "usage",
+          label: "Usage",
+        });
+      }
 
       tabOpts.push({
         value: "additional-settings",