From dc01b4172c201e8fd34a20737b68503519521179 Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Wed, 27 Aug 2025 17:44:15 +0300
Subject: [PATCH 1/7] Add usage billing app skeleton with its story

---
 .../usage_billing/components/app.stories.js   | 14 +++++
 .../usage_billing/components/app.vue          | 56 +++++++++++++++++++
 .../usage_billing/components/app_spec.js      | 33 +++++++++++
 locale/gitlab.pot                             | 24 ++++++++
 4 files changed, 127 insertions(+)
 create mode 100644 ee/app/assets/javascripts/usage_billing/components/app.stories.js
 create mode 100644 ee/app/assets/javascripts/usage_billing/components/app.vue
 create mode 100644 ee/spec/frontend/usage_billing/components/app_spec.js

diff --git a/ee/app/assets/javascripts/usage_billing/components/app.stories.js b/ee/app/assets/javascripts/usage_billing/components/app.stories.js
new file mode 100644
index 00000000000000..e71a8fa00ce529
--- /dev/null
+++ b/ee/app/assets/javascripts/usage_billing/components/app.stories.js
@@ -0,0 +1,14 @@
+import UsageBillingApp from './app.vue';
+
+export default {
+  component: UsageBillingApp,
+  title: 'ee/usage_billing/App',
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { UsageBillingApp },
+  template: '<usage-billing-app v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
diff --git a/ee/app/assets/javascripts/usage_billing/components/app.vue b/ee/app/assets/javascripts/usage_billing/components/app.vue
new file mode 100644
index 00000000000000..b798a658ada936
--- /dev/null
+++ b/ee/app/assets/javascripts/usage_billing/components/app.vue
@@ -0,0 +1,56 @@
+<script>
+import { GlCard, GlButton, GlTabs, GlTab } from '@gitlab/ui';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
+
+export default {
+  name: 'UsageBillingApp',
+  components: {
+    GlCard,
+    GlButton,
+    GlTabs,
+    GlTab,
+    PageHeading,
+  },
+};
+</script>
+<template>
+  <main>
+    <page-heading>
+      <template #heading>
+        <div data-testid="usage-billing-title">{{ s__('UsageBilling|Usage Billing') }}</div>
+      </template>
+      <template #actions>
+        <gl-button>{{ s__('UsageBilling|Export usage data') }}</gl-button>
+        <gl-button>{{ s__('UsageBilling|Set usage alerts') }}</gl-button>
+      </template>
+    </page-heading>
+
+    <section class="gl-flex gl-flex-col gl-gap-5 md:gl-flex-row">
+      <gl-card class="gl-flex-1 gl-bg-transparent">
+        <h2 class="gl-font-heading gl-heading-scale-400 gl-mb-3">
+          {{ s__('UsageBilling|Current month usage') }}
+        </h2>
+      </gl-card>
+
+      <gl-card class="gl-flex-1 gl-bg-transparent">
+        <h2 class="gl-font-heading gl-heading-scale-400 gl-mb-3">
+          {{ s__('UsageBilling|Purchase a monthly commitment') }}
+        </h2>
+      </gl-card>
+    </section>
+    <gl-tabs class="gl-mt-5">
+      <gl-tab :title="s__('UsageBilling|Usage trends')">
+        {{ s__('UsageBilling|Usage trends') }}
+      </gl-tab>
+      <gl-tab :title="s__('UsageBilling|Usage by user')">
+        {{ s__('UsageBilling|Usage by user') }}
+      </gl-tab>
+      <gl-tab :title="s__('UsageBilling|Usage by feature (agent)')">
+        {{ s__('UsageBilling|Usage by feature (agent)') }}
+      </gl-tab>
+      <gl-tab :title="s__('UsageBilling|Usage by project')">
+        {{ s__('UsageBilling|Usage by project') }}
+      </gl-tab>
+    </gl-tabs>
+  </main>
+</template>
diff --git a/ee/spec/frontend/usage_billing/components/app_spec.js b/ee/spec/frontend/usage_billing/components/app_spec.js
new file mode 100644
index 00000000000000..ddadd2bcfd3bb8
--- /dev/null
+++ b/ee/spec/frontend/usage_billing/components/app_spec.js
@@ -0,0 +1,33 @@
+import { GlTab } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import UsageBillingApp from 'ee/usage_billing/components/app.vue';
+
+describe('UsageBillingApp', () => {
+  /** @type {import('helpers/vue_test_utils_helper').ExtendedWrapper} */
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(UsageBillingApp);
+  };
+
+  const findTabs = () => wrapper.findAllComponents(GlTab);
+
+  describe('rendering elements', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the page title', () => {
+      expect(wrapper.findByTestId('usage-billing-title').text()).toBe('Usage Billing');
+    });
+
+    it('renders the correct tabs', () => {
+      const tabs = findTabs();
+
+      expect(tabs.at(0).text()).toBe('Usage trends');
+      expect(tabs.at(1).text()).toBe('Usage by user');
+      expect(tabs.at(2).text()).toBe('Usage by feature (agent)');
+      expect(tabs.at(3).text()).toBe('Usage by project');
+    });
+  });
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5f434d8c1b9afa..5003c0a9b4087a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -68713,9 +68713,33 @@ msgstr ""
 msgid "Usage trends"
 msgstr ""
 
+msgid "UsageBilling|Current month usage"
+msgstr ""
+
+msgid "UsageBilling|Export usage data"
+msgstr ""
+
+msgid "UsageBilling|Purchase a monthly commitment"
+msgstr ""
+
+msgid "UsageBilling|Set usage alerts"
+msgstr ""
+
 msgid "UsageBilling|Usage Billing"
 msgstr ""
 
+msgid "UsageBilling|Usage by feature (agent)"
+msgstr ""
+
+msgid "UsageBilling|Usage by project"
+msgstr ""
+
+msgid "UsageBilling|Usage by user"
+msgstr ""
+
+msgid "UsageBilling|Usage trends"
+msgstr ""
+
 msgid "UsageQuotas|(of %{totalStorageSize})"
 msgstr ""
 
-- 
GitLab


From dfcc8cd4abb2e9467e7dc6ea844bd8ae9e410dcb Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Mon, 1 Sep 2025 15:44:49 +0300
Subject: [PATCH 2/7] Clean up usage app from unneeded tabs and button

---
 .../javascripts/usage_billing/components/app.vue    | 13 +------------
 .../frontend/usage_billing/components/app_spec.js   |  6 ++----
 locale/gitlab.pot                                   | 12 ------------
 3 files changed, 3 insertions(+), 28 deletions(-)

diff --git a/ee/app/assets/javascripts/usage_billing/components/app.vue b/ee/app/assets/javascripts/usage_billing/components/app.vue
index b798a658ada936..55c93012267512 100644
--- a/ee/app/assets/javascripts/usage_billing/components/app.vue
+++ b/ee/app/assets/javascripts/usage_billing/components/app.vue
@@ -1,12 +1,11 @@
 <script>
-import { GlCard, GlButton, GlTabs, GlTab } from '@gitlab/ui';
+import { GlCard, GlTabs, GlTab } from '@gitlab/ui';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 
 export default {
   name: 'UsageBillingApp',
   components: {
     GlCard,
-    GlButton,
     GlTabs,
     GlTab,
     PageHeading,
@@ -19,10 +18,6 @@ export default {
       <template #heading>
         <div data-testid="usage-billing-title">{{ s__('UsageBilling|Usage Billing') }}</div>
       </template>
-      <template #actions>
-        <gl-button>{{ s__('UsageBilling|Export usage data') }}</gl-button>
-        <gl-button>{{ s__('UsageBilling|Set usage alerts') }}</gl-button>
-      </template>
     </page-heading>
 
     <section class="gl-flex gl-flex-col gl-gap-5 md:gl-flex-row">
@@ -45,12 +40,6 @@ export default {
       <gl-tab :title="s__('UsageBilling|Usage by user')">
         {{ s__('UsageBilling|Usage by user') }}
       </gl-tab>
-      <gl-tab :title="s__('UsageBilling|Usage by feature (agent)')">
-        {{ s__('UsageBilling|Usage by feature (agent)') }}
-      </gl-tab>
-      <gl-tab :title="s__('UsageBilling|Usage by project')">
-        {{ s__('UsageBilling|Usage by project') }}
-      </gl-tab>
     </gl-tabs>
   </main>
 </template>
diff --git a/ee/spec/frontend/usage_billing/components/app_spec.js b/ee/spec/frontend/usage_billing/components/app_spec.js
index ddadd2bcfd3bb8..87b00fa65a79f2 100644
--- a/ee/spec/frontend/usage_billing/components/app_spec.js
+++ b/ee/spec/frontend/usage_billing/components/app_spec.js
@@ -24,10 +24,8 @@ describe('UsageBillingApp', () => {
     it('renders the correct tabs', () => {
       const tabs = findTabs();
 
-      expect(tabs.at(0).text()).toBe('Usage trends');
-      expect(tabs.at(1).text()).toBe('Usage by user');
-      expect(tabs.at(2).text()).toBe('Usage by feature (agent)');
-      expect(tabs.at(3).text()).toBe('Usage by project');
+      expect(tabs.at(0).attributes('title')).toBe('Usage trends');
+      expect(tabs.at(1).attributes('title')).toBe('Usage by user');
     });
   });
 });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5003c0a9b4087a..27700ada8871a9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -68716,24 +68716,12 @@ msgstr ""
 msgid "UsageBilling|Current month usage"
 msgstr ""
 
-msgid "UsageBilling|Export usage data"
-msgstr ""
-
 msgid "UsageBilling|Purchase a monthly commitment"
 msgstr ""
 
-msgid "UsageBilling|Set usage alerts"
-msgstr ""
-
 msgid "UsageBilling|Usage Billing"
 msgstr ""
 
-msgid "UsageBilling|Usage by feature (agent)"
-msgstr ""
-
-msgid "UsageBilling|Usage by project"
-msgstr ""
-
 msgid "UsageBilling|Usage by user"
 msgstr ""
 
-- 
GitLab


From 741aac3ff6804d5c2d5069a0dd31a3eef8aa3204 Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Fri, 29 Aug 2025 11:54:35 +0300
Subject: [PATCH 3/7] Initiate usage billing app for self-managed

---
 .../pages/admin/gitlab_duo/usage/index.js     | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js

diff --git a/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js b/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js
new file mode 100644
index 00000000000000..6f1765c00a3323
--- /dev/null
+++ b/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import AdminUsageDashboard from 'ee/usage_billing/components/app.vue';
+
+function initAdminUsageDashboard() {
+  const el = document.getElementById('js-instance-usage-billing-dashboard');
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    name: 'AdminUsageBillingDashboardApp',
+    provide: {},
+    render(createElement) {
+      return createElement(AdminUsageDashboard);
+    },
+  });
+}
+
+initAdminUsageDashboard();
-- 
GitLab


From 0411ffc4a7d3316f806f1c1b308dc7b21c39f4a0 Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Fri, 29 Aug 2025 11:57:20 +0300
Subject: [PATCH 4/7] Add usage route to GitLab Duo sidebar active routes

---
 ee/lib/sidebars/admin/menus/duo_settings_menu.rb           | 2 +-
 ee/spec/lib/sidebars/admin/menus/duo_settings_menu_spec.rb | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ee/lib/sidebars/admin/menus/duo_settings_menu.rb b/ee/lib/sidebars/admin/menus/duo_settings_menu.rb
index ac55ee778b519c..fcdab45e2af323 100644
--- a/ee/lib/sidebars/admin/menus/duo_settings_menu.rb
+++ b/ee/lib/sidebars/admin/menus/duo_settings_menu.rb
@@ -22,7 +22,7 @@ def sprite_icon
         override :active_routes
         def active_routes
           {
-            controller: [:gitlab_duo, :seat_utilization, :configuration],
+            controller: [:gitlab_duo, :seat_utilization, :configuration, :usage],
             action: %w[show index]
           }
         end
diff --git a/ee/spec/lib/sidebars/admin/menus/duo_settings_menu_spec.rb b/ee/spec/lib/sidebars/admin/menus/duo_settings_menu_spec.rb
index d4d77c6797778d..563869223cf1d1 100644
--- a/ee/spec/lib/sidebars/admin/menus/duo_settings_menu_spec.rb
+++ b/ee/spec/lib/sidebars/admin/menus/duo_settings_menu_spec.rb
@@ -10,6 +10,6 @@
 
   it_behaves_like 'Admin menu without sub menus', active_routes: {
     action: %w[show index],
-    controller: [:gitlab_duo, :seat_utilization, :configuration]
+    controller: [:gitlab_duo, :seat_utilization, :configuration, :usage]
   }
 end
-- 
GitLab


From 1c2e0a00bf05f44ab681b11f3c0ca2299608b2ec Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Mon, 1 Sep 2025 16:08:53 +0300
Subject: [PATCH 5/7] Use span instead of dive inside page-heading

---
 ee/app/assets/javascripts/usage_billing/components/app.vue | 2 +-
 ee/spec/frontend/usage_billing/components/app_spec.js      | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/ee/app/assets/javascripts/usage_billing/components/app.vue b/ee/app/assets/javascripts/usage_billing/components/app.vue
index 55c93012267512..7e66d6503b5d7e 100644
--- a/ee/app/assets/javascripts/usage_billing/components/app.vue
+++ b/ee/app/assets/javascripts/usage_billing/components/app.vue
@@ -16,7 +16,7 @@ export default {
   <main>
     <page-heading>
       <template #heading>
-        <div data-testid="usage-billing-title">{{ s__('UsageBilling|Usage Billing') }}</div>
+        <span data-testid="usage-billing-title">{{ s__('UsageBilling|Usage Billing') }}</span>
       </template>
     </page-heading>
 
diff --git a/ee/spec/frontend/usage_billing/components/app_spec.js b/ee/spec/frontend/usage_billing/components/app_spec.js
index 87b00fa65a79f2..d99306cbc7d920 100644
--- a/ee/spec/frontend/usage_billing/components/app_spec.js
+++ b/ee/spec/frontend/usage_billing/components/app_spec.js
@@ -17,10 +17,6 @@ describe('UsageBillingApp', () => {
       createComponent();
     });
 
-    it('renders the page title', () => {
-      expect(wrapper.findByTestId('usage-billing-title').text()).toBe('Usage Billing');
-    });
-
     it('renders the correct tabs', () => {
       const tabs = findTabs();
 
-- 
GitLab


From ad9ff0a2b94e7f4688259e875c327aee63075cc2 Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Mon, 1 Sep 2025 16:09:51 +0300
Subject: [PATCH 6/7] Use section instead of main as the enclosing tag

---
 ee/app/assets/javascripts/usage_billing/components/app.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/usage_billing/components/app.vue b/ee/app/assets/javascripts/usage_billing/components/app.vue
index 7e66d6503b5d7e..1ce9ae760f6190 100644
--- a/ee/app/assets/javascripts/usage_billing/components/app.vue
+++ b/ee/app/assets/javascripts/usage_billing/components/app.vue
@@ -13,7 +13,7 @@ export default {
 };
 </script>
 <template>
-  <main>
+  <section>
     <page-heading>
       <template #heading>
         <span data-testid="usage-billing-title">{{ s__('UsageBilling|Usage Billing') }}</span>
@@ -41,5 +41,5 @@ export default {
         {{ s__('UsageBilling|Usage by user') }}
       </gl-tab>
     </gl-tabs>
-  </main>
+  </section>
 </template>
-- 
GitLab


From c7995eafbb6883e986aa18f92ff2064b961ac1d2 Mon Sep 17 00:00:00 2001
From: Ammar Alakkad <am.alakkad@gmail.com>
Date: Mon, 1 Sep 2025 16:15:47 +0300
Subject: [PATCH 7/7] Move usage_billing to be inside usage_quotas folder

---
 ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js | 2 +-
 .../{ => usage_quotas}/usage_billing/components/app.stories.js  | 0
 .../{ => usage_quotas}/usage_billing/components/app.vue         | 0
 .../{ => usage_quotas}/usage_billing/components/app_spec.js     | 2 +-
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename ee/app/assets/javascripts/{ => usage_quotas}/usage_billing/components/app.stories.js (100%)
 rename ee/app/assets/javascripts/{ => usage_quotas}/usage_billing/components/app.vue (100%)
 rename ee/spec/frontend/{ => usage_quotas}/usage_billing/components/app_spec.js (89%)

diff --git a/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js b/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js
index 6f1765c00a3323..c1d00af3b4132b 100644
--- a/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js
+++ b/ee/app/assets/javascripts/pages/admin/gitlab_duo/usage/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import AdminUsageDashboard from 'ee/usage_billing/components/app.vue';
+import AdminUsageDashboard from 'ee/usage_quotas/usage_billing/components/app.vue';
 
 function initAdminUsageDashboard() {
   const el = document.getElementById('js-instance-usage-billing-dashboard');
diff --git a/ee/app/assets/javascripts/usage_billing/components/app.stories.js b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js
similarity index 100%
rename from ee/app/assets/javascripts/usage_billing/components/app.stories.js
rename to ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js
diff --git a/ee/app/assets/javascripts/usage_billing/components/app.vue b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue
similarity index 100%
rename from ee/app/assets/javascripts/usage_billing/components/app.vue
rename to ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue
diff --git a/ee/spec/frontend/usage_billing/components/app_spec.js b/ee/spec/frontend/usage_quotas/usage_billing/components/app_spec.js
similarity index 89%
rename from ee/spec/frontend/usage_billing/components/app_spec.js
rename to ee/spec/frontend/usage_quotas/usage_billing/components/app_spec.js
index d99306cbc7d920..ee225a336106bc 100644
--- a/ee/spec/frontend/usage_billing/components/app_spec.js
+++ b/ee/spec/frontend/usage_quotas/usage_billing/components/app_spec.js
@@ -1,6 +1,6 @@
 import { GlTab } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import UsageBillingApp from 'ee/usage_billing/components/app.vue';
+import UsageBillingApp from 'ee/usage_quotas/usage_billing/components/app.vue';
 
 describe('UsageBillingApp', () => {
   /** @type {import('helpers/vue_test_utils_helper').ExtendedWrapper} */
-- 
GitLab