root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add a billing holder page

Browse Source
This commit is contained in:
jialin
2026-06-08 15:43:21 +08:00
committed by jialin
parent 636190b8e6
commit 09821aab85
13 changed files with 170 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/routes.ts
+13
View File
@@ -338,6 +338,19 @@ const baseRoutes = [
selectedIcon: 'icon-usage-filled',
defaultIcon: 'icon-usage-outlined',
component: './usage/index'
},
{
name: 'billing',
path: '/usage/billing',
key: 'billing',
icon: 'icon-billing-outlined',
selectedIcon: 'icon-billing-filled',
defaultIcon: 'icon-billing-outlined',
// OSS exposes the menu as a teaser for the enterprise billing
// module. The page itself just renders an upsell notice — the real
// billing UI lives in the enterprise plugin and shadows this route
// via `routes.extensions.ts`.
component: './billing'
}
]
},
src/layouts/index.tsx
+1 -1
View File
@@ -327,7 +327,7 @@ export default (props: any) => {
config={{
apiBaseUrl: GPUSTACK_API_BASE_URL,
theme: userSettings.theme,
iconUrl: '//at.alicdn.com/t/c/font_4613488_rwchdketjg8.js',
iconUrl: '//at.alicdn.com/t/c/font_4613488_or5t9922sfk.js',
isDarkTheme: userSettings.isDarkTheme,
defaultColorPrimary: COLOR_PRIMARY
}}
src/locales/en-US/billing.ts
+15
View File
@@ -0,0 +1,15 @@
export default {
'billing.upsell.title': 'Billing is an Enterprise feature',
'billing.upsell.subtitle':
'Track spend, generate invoices, and enforce budgets across teams. Upgrade to GPUStack Enterprise to manage billing.',
'billing.upsell.featuresTitle': 'What you get in Enterprise',
'billing.upsell.feature.usage':
'See cost breakdowns by organization, user, and model',
'billing.upsell.feature.invoices':
'Generate invoices and export billing reports',
'billing.upsell.feature.budgets':
'Set budgets and spending limits with alerts',
'billing.upsell.feature.chargeback':
'Attribute and charge back usage to teams and projects',
'billing.upsell.cta': 'Learn about Enterprise'
};
src/locales/en-US/menu.ts
+1
View File
@@ -38,6 +38,7 @@ export default {
'menu.usage.usage': 'Usage',
'menu.billingAndUsage': 'Usage & Billing',
'menu.billingAndUsage.usage': 'Usage',
'menu.billingAndUsage.billing': 'Billing',
'menu.404': '404',
'menu.resources.clusters': 'Clusters',
'menu.resources.credentials': 'Cloud Credentials',
src/locales/ja-JP/billing.ts
+15
View File
@@ -0,0 +1,15 @@
export default {
'billing.upsell.title': 'Billing is an Enterprise feature',
'billing.upsell.subtitle':
'Track spend, generate invoices, and enforce budgets across teams. Upgrade to GPUStack Enterprise to manage billing.',
'billing.upsell.featuresTitle': 'What you get in Enterprise',
'billing.upsell.feature.usage':
'See cost breakdowns by organization, user, and model',
'billing.upsell.feature.invoices':
'Generate invoices and export billing reports',
'billing.upsell.feature.budgets':
'Set budgets and spending limits with alerts',
'billing.upsell.feature.chargeback':
'Attribute and charge back usage to teams and projects',
'billing.upsell.cta': 'Learn about Enterprise'
};
src/locales/ja-JP/menu.ts
+1
View File
@@ -29,6 +29,7 @@ export default {
'menu.usage.usage': '使用状況',
'menu.billingAndUsage': '使用状況と請求',
'menu.billingAndUsage.usage': '使用状況',
'menu.billingAndUsage.billing': '請求',
'menu.404': '404',
'menu.settings': 'Settings',
'menu.resources.workers': 'Workers',
src/locales/ru-RU/billing.ts
+15
View File
@@ -0,0 +1,15 @@
export default {
'billing.upsell.title': 'Billing is an Enterprise feature',
'billing.upsell.subtitle':
'Track spend, generate invoices, and enforce budgets across teams. Upgrade to GPUStack Enterprise to manage billing.',
'billing.upsell.featuresTitle': 'What you get in Enterprise',
'billing.upsell.feature.usage':
'See cost breakdowns by organization, user, and model',
'billing.upsell.feature.invoices':
'Generate invoices and export billing reports',
'billing.upsell.feature.budgets':
'Set budgets and spending limits with alerts',
'billing.upsell.feature.chargeback':
'Attribute and charge back usage to teams and projects',
'billing.upsell.cta': 'Learn about Enterprise'
};
src/locales/ru-RU/menu.ts
+1
View File
@@ -29,6 +29,7 @@ export default {
'menu.usage.usage': 'Использование',
'menu.billingAndUsage': 'Использование и биллинг',
'menu.billingAndUsage.usage': 'Использование',
'menu.billingAndUsage.billing': 'Биллинг',
'menu.404': 'Ошибка 404',
'menu.resources.workers': 'Воркеры',
'menu.resources.gpus': 'GPUs',
src/locales/tr-TR/billing.ts
+15
View File
@@ -0,0 +1,15 @@
export default {
'billing.upsell.title': 'Billing is an Enterprise feature',
'billing.upsell.subtitle':
'Track spend, generate invoices, and enforce budgets across teams. Upgrade to GPUStack Enterprise to manage billing.',
'billing.upsell.featuresTitle': 'What you get in Enterprise',
'billing.upsell.feature.usage':
'See cost breakdowns by organization, user, and model',
'billing.upsell.feature.invoices':
'Generate invoices and export billing reports',
'billing.upsell.feature.budgets':
'Set budgets and spending limits with alerts',
'billing.upsell.feature.chargeback':
'Attribute and charge back usage to teams and projects',
'billing.upsell.cta': 'Learn about Enterprise'
};
src/locales/tr-TR/menu.ts
+1
View File
@@ -36,6 +36,7 @@ export default {
'menu.usage.usage': 'Kullanım',
'menu.billingAndUsage': 'Kullanım ve Faturalandırma',
'menu.billingAndUsage.usage': 'Kullanım',
'menu.billingAndUsage.billing': 'Faturalandırma',
'menu.404': '404',
'menu.resources.clusters': 'Kümeler',
'menu.resources.credentials': 'Bulut Kimlik Bilgileri',
src/locales/zh-CN/billing.ts
+11
View File
@@ -0,0 +1,11 @@
export default {
'billing.upsell.title': '计费是企业版功能',
'billing.upsell.subtitle':
'在团队间跟踪花费、生成账单并执行预算。升级到 GPUStack 企业版即可管理计费。',
'billing.upsell.featuresTitle': '企业版包含的能力',
'billing.upsell.feature.usage': '按组织、用户与模型查看成本明细',
'billing.upsell.feature.invoices': '生成账单并导出计费报表',
'billing.upsell.feature.budgets': '设置预算与花费上限并触发告警',
'billing.upsell.feature.chargeback': '将用量归属并分摊到团队与项目',
'billing.upsell.cta': '了解企业版'
};
src/locales/zh-CN/menu.ts
+1
View File
@@ -31,6 +31,7 @@ export default {
'menu.usage.usage': '使用量',
'menu.billingAndUsage': '用量与计费',
'menu.billingAndUsage.usage': '用量统计',
'menu.billingAndUsage.billing': '计费',
'menu.404': '404',
'menu.resources.workers': '节点',
'menu.resources.gpus': 'GPU',
src/pages/billing/index.tsx
+80
View File
@@ -0,0 +1,80 @@
import { IconFont } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Result, Typography } from 'antd';
import PageBox from '../_components/page-box';
// OSS-only upsell page for the billing module. The real Billing UI ships
// in the enterprise plugin and shadows this route via
// `routes.extensions.ts` — when the enterprise plugin is loaded, the
// merger removes this entry by name. So this file is what users see on
// the OSS build only.
const Billing: React.FC = () => {
const intl = useIntl();
const features = [
'billing.upsell.feature.usage',
'billing.upsell.feature.invoices',
'billing.upsell.feature.budgets',
'billing.upsell.feature.chargeback'
];
return (
<PageBox>
<div
style={{
// Use a viewport-relative min-height so flex centering has
// something to work against — percentage heights through
// PageBox's wrapper chain don't always resolve. The offset
// accounts for the global header + the page title bar.
minHeight: 'calc(100vh - 180px)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Result
icon={
<IconFont
type="icon-billing-outlined"
style={{ fontSize: 64, color: 'var(--ant-color-primary)' }}
/>
}
title={intl.formatMessage({ id: 'billing.upsell.title' })}
subTitle={intl.formatMessage({ id: 'billing.upsell.subtitle' })}
extra={
<div
style={{
maxWidth: 520,
margin: '0 auto',
textAlign: 'left'
}}
>
<Typography.Title level={5} style={{ marginBottom: 12 }}>
{intl.formatMessage({
id: 'billing.upsell.featuresTitle'
})}
</Typography.Title>
<ul style={{ paddingLeft: 20, marginBottom: 24 }}>
{features.map((id) => (
<li key={id} style={{ marginBottom: 6 }}>
{intl.formatMessage({ id })}
</li>
))}
</ul>
<div style={{ textAlign: 'center' }}>
<Button
type="primary"
href="https://gpustack.ai/enterprise"
target="_blank"
rel="noreferrer"
>
{intl.formatMessage({ id: 'billing.upsell.cta' })}
</Button>
</div>
</div>
}
/>
</div>
</PageBox>
);
};
export default Billing;