diff --git a/doc/api/graphql/reference/_index.md b/doc/api/graphql/reference/_index.md index 4aefb70d19f546a53ab5d9ce075b294ede8de8f3..80fe1158642b1d7b42e874c09955252b71ef7027 100644 --- a/doc/api/graphql/reference/_index.md +++ b/doc/api/graphql/reference/_index.md @@ -30973,6 +30973,18 @@ Describes the subscription history of a given namespace. | `seatsInUse` | [`Int`](#int) | Seats being used in subscription. | | `startDate` | [`Time`](#time) | Subscription start date. | +### `GitlabSubscriptionOneTimeCredits` + +Describes the usage of one time credits for the subscription. + +#### Fields + +| Name | Type | Description | +| ---- | ---- | ----------- | +| `creditsUsed` | [`Float`](#float) | GitLab Credits used from the one time credits allocation. | +| `totalCredits` | [`Float`](#float) | Total of GitLab Credits allocated as one time credits. | +| `totalCreditsRemaining` | [`Float`](#float) | Total of GitLab Credits remaining from the one time credits allocation. | + ### `GitlabSubscriptionOverage` Describes the overage usage of consumables for the subscription. @@ -31006,7 +31018,8 @@ Describes the usage of consumables under the subscription. | Name | Type | Description | | ---- | ---- | ----------- | | `endDate` | [`ISO8601Date`](#iso8601date) | End date of the period covered by the usage data. | -| `lastUpdated` | [`ISO8601DateTime`](#iso8601datetime) | Date and time when the usage data was last updated. | +| `lastEventTransactionAt` | [`ISO8601DateTime`](#iso8601datetime) | Date and time when the last usage event resulted in a wallet transaction. | +| `oneTimeCredits` | [`GitlabSubscriptionOneTimeCredits`](#gitlabsubscriptiononetimecredits) | One time credits usage for the subscription. | | `overage` | [`GitlabSubscriptionOverage`](#gitlabsubscriptionoverage) | Overage statistics. | | `poolUsage` | [`GitlabSubscriptionPoolUsage`](#gitlabsubscriptionpoolusage) | Consumption usage for the subscription shared pool. | | `purchaseCreditsPath` | [`String`](#string) | URL to purchase GitLab Credits. | @@ -31075,6 +31088,7 @@ Describes the usage of consumables by users under the subscription. | Name | Type | Description | | ---- | ---- | ----------- | +| `creditsUsed` | [`Float`](#float) | GitLab Credits used by consumers of the subscription. | | `dailyUsage` | [`[GitlabSubscriptionDailyUsage!]`](#gitlabsubscriptiondailyusage) | Array of daily usage of GitLab Credits. | | `totalUsersUsingCredits` | [`Int`](#int) | Total number of users consuming GitLab Credits. | | `totalUsersUsingOverage` | [`Int`](#int) | Total number of users consuming overage. | diff --git a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js index 18df9de83a2154469b47da1d5fabebd6cac1ed7c..4418b8505276fe2a2cdb5c3141f2bc38fba617ed 100644 --- a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js +++ b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.stories.js @@ -12,6 +12,7 @@ import { usageDataNoPoolNoOverage, usageDataNoPoolWithOverage, usageDataWithPoolWithOverage, + usageDataWithOtcCredits, } from 'ee_jest/usage_quotas/usage_billing/mock_data'; import { createMockClient } from 'helpers/mock_apollo_helper'; import axios from '~/lib/utils/axios_utils'; @@ -140,6 +141,21 @@ export const NoPoolNoOverage = { }, }; +export const WithOtcCredits = { + render: (...args) => { + const restUsageDataHandler = () => Promise.resolve([200, mockUsageDataWithoutPool]); + const getSubscriptionUsersUsageQueryHandler = () => Promise.resolve(usageDataWithOtcCredits); + + const getSubscriptionUsageQueryHandler = () => Promise.resolve(usageDataWithOtcCredits); + + return createTemplate({ + restUsageDataHandler, + getSubscriptionUsersUsageQueryHandler, + getSubscriptionUsageQueryHandler, + })(...args); + }, +}; + export const LoadingState = { render: (...args) => { // Never resolved diff --git a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue index 63d46a57b9e7fecbdba38778aec827196dfa2e20..73e2f2001ca0f32b91ee50e62b43cdfee240d047 100644 --- a/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue +++ b/ee/app/assets/javascripts/usage_quotas/usage_billing/components/app.vue @@ -12,6 +12,7 @@ import PurchaseCommitmentCard from './purchase_commitment_card.vue'; import UsageByUserTab from './usage_by_user_tab.vue'; import CurrentUsageCard from './current_usage_card.vue'; import CurrentOverageUsageCard from './current_overage_usage_card.vue'; +import OneTimeCreditsCard from './one_time_credits_card.vue'; export default { name: 'UsageBillingApp', @@ -23,6 +24,7 @@ export default { CurrentUsageCard, CurrentOverageUsageCard, UserDate, + OneTimeCreditsCard, }, apollo: { subscriptionUsage: { @@ -76,6 +78,12 @@ export default { isLoading() { return this.isFetchingData || this.$apollo.queries.subscriptionUsage.loading; }, + remainingOtcCredits() { + return this.subscriptionUsage?.oneTimeCredits?.creditsUsed; + }, + otcCredits() { + return this.subscriptionUsage?.oneTimeCredits?.totalCredits; + }, }, async mounted() { await this.fetchUsageData(); @@ -107,10 +115,10 @@ export default { -