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 ca9a4c2cb675657cc2c71c51492906fcd0d89016..2a9175d3541a0dbc7de1afcdac7871896ae8535a 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; @@ -177,17 +195,10 @@ export default {
- -
-
{{ usersUsage.totalUsers }}
-
{{ s__('UsageBilling|total users (active users)') }}
-
-
-
- {{ usersUsage.totalUsersUsingAllocation }} + {{ usersUsage.totalUsersUsingCredits }}
{{ s__('UsageBilling|users using included GitLab Credits') }} @@ -195,22 +206,66 @@ export default {
- +
- {{ usersUsage.totalUsersBlocked }} + {{ usersUsage.totalUsersUsingPool }}
{{ n__( - 'UsageBilling|user is blocked', - 'UsageBilling|users are blocked', - usersUsage.totalUsersBlocked, + 'UsageBilling|user is using monthly credits', + 'UsageBilling|users are using monthly credits', + usersUsage.totalUsersUsingOverage, ) }}
+ + + + +
+
+ {{ numberToMetricPrefix(creditsUsed) }} +
+
+ {{ s__('UsageBilling|Credits used this billing period') }} +
+
+
{ 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 e90f3cc144e7cc744ecb4f1ad3302fd7349c9ad3..08bcb3c3bcbbafa4c7c1d27799e1cda5231bff81 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,