From cf402aa10af56738e1ae7e1a0ae66ff18a158bcf Mon Sep 17 00:00:00 2001 From: Ammar Alakkad Date: Wed, 22 Oct 2025 12:57:31 +0300 Subject: [PATCH] Temp changes that is not final --- .../components/usage_by_user_tab.vue | 83 +++++++++++++++++-- ...get_subscription_users_usage.query.graphql | 6 +- .../components/usage_by_user_tab_spec.js | 13 ++- .../usage_quotas/usage_billing/mock_data.js | 8 ++ 4 files changed, 91 insertions(+), 19 deletions(-) diff --git a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/usage_by_user_tab.vue b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/usage_by_user_tab.vue index 29af5ffe9087d2..2a9175d3541a0d 100644 --- a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/usage_by_user_tab.vue +++ b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/usage_by_user_tab.vue @@ -5,6 +5,7 @@ import { s__, __ } from '~/locale'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { logError } from '~/lib/logger'; import { captureException } from '~/sentry/sentry_browser_wrapper'; +import { numberToMetricPrefix } from '~/lib/utils/number_utils'; import getSubscriptionUsersUsageQuery from '../graphql/get_subscription_users_usage.query.graphql'; import { PAGE_SIZE } from '../constants'; @@ -107,8 +108,25 @@ export default { }, })); }, + hasOnDemandCredits() { + // TODO: populate this propery from backend + return true; + }, + blockedUsers() { + // TODO: populate this propery from backend + return 4; + }, + onDemandUsers() { + // TODO: populate this propery from backend + return 2; + }, + creditsUsed() { + // TODO: populate this propery from backend + return 150623; + }, }, methods: { + numberToMetricPrefix, /** @param { Usage } usage */ getTotalUsage(usage) { return usage.creditsUsed + usage.poolCreditsUsed + usage.overageCreditsUsed; @@ -179,26 +197,73 @@ export default {
-
{{ usersUsage.totalUsers }}
-
{{ s__('UsageBilling|Total users (active users)') }}
+
+ {{ usersUsage.totalUsersUsingCredits }} +
+
+ {{ s__('UsageBilling|users using included GitLab Credits') }} +
- +
-
- {{ usersUsage.totalUsersUsingAllocation }} +
+ {{ usersUsage.totalUsersUsingPool }}
-
{{ s__('UsageBilling|Users using allocation') }}
+
+ {{ + n__( + 'UsageBilling|user is using monthly credits', + 'UsageBilling|users are using monthly credits', + usersUsage.totalUsersUsingOverage, + ) + }} +
+ +
-
- {{ usersUsage.totalUsersBlocked }} +
+ {{ numberToMetricPrefix(creditsUsed) }}
-
{{ s__('UsageBilling|Users blocked') }}
+
+ {{ s__('UsageBilling|Credits used this billing period') }} +
diff --git a/ee/app/assets/javascripts/usage_quotas/usage_billing/graphql/get_subscription_users_usage.query.graphql b/ee/app/assets/javascripts/usage_quotas/usage_billing/graphql/get_subscription_users_usage.query.graphql index 49bd3e86827a29..0f9ace4c4722a8 100644 --- a/ee/app/assets/javascripts/usage_quotas/usage_billing/graphql/get_subscription_users_usage.query.graphql +++ b/ee/app/assets/javascripts/usage_quotas/usage_billing/graphql/get_subscription_users_usage.query.graphql @@ -7,9 +7,9 @@ query getSubscriptionUsersUsage( ) { subscriptionUsage(namespacePath: $namespacePath) { usersUsage { - # totalUsersUsingCredits - # totalUsersUsingPool - # totalUsersUsingOverage + totalUsersUsingCredits + totalUsersUsingPool + totalUsersUsingOverage users(first: $first, last: $last, after: $after, before: $before) { nodes { id diff --git a/ee/spec/frontend/usage_quotas/usage_billing/components/usage_by_user_tab_spec.js b/ee/spec/frontend/usage_quotas/usage_billing/components/usage_by_user_tab_spec.js index f210a6e19f9116..1e067c2a4f7fc6 100644 --- a/ee/spec/frontend/usage_quotas/usage_billing/components/usage_by_user_tab_spec.js +++ b/ee/spec/frontend/usage_quotas/usage_billing/components/usage_by_user_tab_spec.js @@ -59,10 +59,7 @@ describe('UsageByUserTab', () => { getSubscriptionUsersUsageQueryHandler.mockResolvedValue(mockUsersUsageDataWithPool); }); - // NOTE: with limited GraphQL API, we can't test this functionality at the moment - // TODO: tests to be restored within https://gitlab.com/gitlab-org/gitlab/-/issues/573644 - /* eslint-disable jest/no-disabled-tests */ - describe.skip('rendering cards', () => { + describe('rendering cards', () => { beforeEach(async () => { createComponent(); await waitForPromises(); @@ -71,9 +68,11 @@ describe('UsageByUserTab', () => { it('renders total users card', () => { const cards = findCards(); - expect(cards.at(0).text()).toMatchInterpolatedText('50 Total users (active users)'); - expect(cards.at(1).text()).toMatchInterpolatedText('35 Users using allocation'); - expect(cards.at(2).text()).toMatchInterpolatedText('10 Users blocked'); + expect(cards.at(0).text()).toMatchInterpolatedText('10 total users (active users)'); + expect(cards.at(1).text()).toMatchInterpolatedText( + '15 users using included GitLab Credits', + ); + expect(cards.at(2).text()).toMatchInterpolatedText('1 user is blocked'); }); }); diff --git a/ee/spec/frontend/usage_quotas/usage_billing/mock_data.js b/ee/spec/frontend/usage_quotas/usage_billing/mock_data.js index e90f3cc144e7cc..08bcb3c3bcbbaf 100644 --- a/ee/spec/frontend/usage_quotas/usage_billing/mock_data.js +++ b/ee/spec/frontend/usage_quotas/usage_billing/mock_data.js @@ -69,6 +69,8 @@ export const mockUsersUsageDataWithoutPool = { // overall statistics totalUsers: 50, totalUsersUsingAllocation: 35, + totalUsersUsingCredits: 10, + totalUsersUsingOverage: 0, totalUsersUsingPool: null, // or 0 totalUsersBlocked: 10, avgCreditsPerUser: 150, @@ -224,6 +226,8 @@ export const mockUsersUsageDataWithPool = { // overall statistics totalUsers: 50, totalUsersUsingAllocation: 35, + totalUsersUsingCredits: 10, + totalUsersUsingOverage: 1, totalUsersUsingPool: 15, totalUsersBlocked: 10, @@ -405,6 +409,8 @@ export const mockUsersUsageDataWithOverage = { usersUsage: { totalUsers: 50, totalUsersUsingAllocation: 35, + totalUsersUsingCredits: 10, + totalUsersUsingOverage: 8, totalUsersUsingPool: 15, totalUsersBlocked: 10, @@ -549,6 +555,8 @@ export const mockUsersUsageDataWithZeroAllocation = { usersUsage: { totalUsers: 5, totalUsersUsingAllocation: 2, + totalUsersUsingCredits: 10, + totalUsersUsingOverage: 0, totalUsersUsingPool: 0, totalUsersBlocked: 1, -- GitLab