From ab2f15c8962187b77962752289932e77f5c3291b Mon Sep 17 00:00:00 2001
From: Vault Automation <github-team-secure-vault-core@hashicorp.com>
Date: Wed, 6 May 2026 16:38:21 -0600
Subject: [PATCH] [UI] Update billing request to filter by current month and
 previous month (#14563) (#14584) (#14585)

* Update so it returns the current month and previous month data

* Add playwright tests and ensure timezone is UTC

Co-authored-by: Kianna <30884335+kiannaquach@users.noreply.github.com>
---
 ui/app/components/billing/page/overview.ts    |  9 ++++-
 .../billing-metrics-dashboard.spec.ts         | 34 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/billing/page/overview.ts b/ui/app/components/billing/page/overview.ts
index 260f60ffe1..31676dac01 100644
--- a/ui/app/components/billing/page/overview.ts
+++ b/ui/app/components/billing/page/overview.ts
@@ -8,6 +8,8 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { normalizeMetricData, NormalizedBillingMetrics } from 'vault/utils/metrics-helpers';
+import { subMonths } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
 
 import type ApiService from 'vault/services/api';
 import type { Month, NormalizedMetricsData } from 'vault/vault/billing/overview';
@@ -87,8 +89,13 @@ export default class BillingPageOverview extends Component {
   }
 
   fetchBillingMetrics = async () => {
+    const today = new Date();
+    const currentMonth = formatInTimeZone(today, 'UTC', 'yyyy-MM');
+    const previousMonth = formatInTimeZone(subMonths(today, 1), 'UTC', 'yyyy-MM');
+
     const response: SystemReadBillingOverviewResponse | null | undefined =
-      await this.api.sys.systemReadBillingOverview();
+      await this.api.sys.systemReadBillingOverview(currentMonth, undefined, previousMonth);
+
     this.months = (response?.months?.slice(0, 2) as Month[]) || [];
     const updatedMonthFromSelectedMonth = this.months.find(
       (month: Month) => month.month === this.selectedDateOption?.month
diff --git a/ui/e2e/tests/superuser/billing-metrics-dashboard.spec.ts b/ui/e2e/tests/superuser/billing-metrics-dashboard.spec.ts
index edbdc58e55..147f524173 100644
--- a/ui/e2e/tests/superuser/billing-metrics-dashboard.spec.ts
+++ b/ui/e2e/tests/superuser/billing-metrics-dashboard.spec.ts
@@ -5,6 +5,7 @@
 
 import { test, expect } from '@playwright/test';
 import { METRICS_DATA_RESPONSE } from '../../../tests/helpers/billing/stubs';
+import { formatInTimeZone } from 'date-fns-tz';
 
 test('billing metrics dashboard workflow', async ({ page }) => {
   await test.step('navigate to billing metrics page and mock data', async () => {
@@ -66,3 +67,36 @@ test('billing metrics dashboard workflow', async ({ page }) => {
     );
   });
 });
+
+test('billing metrics dashboard api returns two months of data', async ({ page }) => {
+  await page.route('**/sys/license/features', async (route) =>
+    route.fulfill({ json: { features: ['Consumption Billing'] } })
+  );
+
+  await page.goto('dashboard');
+
+  // Set up response listener before clicking the link
+  const responsePromise = page.waitForResponse('**/sys/billing/overview**');
+  await page.getByRole('link', { name: 'Billing metrics' }).click();
+
+  // Wait for the API response and get the actual months returned
+  const response = await responsePromise;
+  const data = await response.json();
+  const months = data.data?.months || [];
+
+  // Verify we have at least 2 months of data
+  expect(months.length).toEqual(2);
+
+  // Verify both months appear in the dropdown options
+  const currentMonth = new Date(months[0].month);
+  const previousMonth = new Date(months[1].month);
+
+  // Click the date range dropdown to verify both months are available
+  await page.getByRole('button', { name: formatInTimeZone(currentMonth, 'UTC', 'MMMM') }).click();
+  await expect(page.getByRole('option', { name: formatInTimeZone(currentMonth, 'UTC', 'MMMM') })).toHaveText(
+    formatInTimeZone(currentMonth, 'UTC', 'MMMM yyyy')
+  );
+  await expect(page.getByRole('option', { name: formatInTimeZone(previousMonth, 'UTC', 'MMMM') })).toHaveText(
+    formatInTimeZone(previousMonth, 'UTC', 'MMMM yyyy')
+  );
+});