fix: usage locales

config/routes.ts

@@ -319,7 +319,7 @@ const baseRoutes = [
     // Cross-resource consumption (tokens + GPU/CPU instances + storage).
     // A folder so it matches the other top-level groups; more usage views can
     // graduate in here later.
-    name: 'usage',
+    name: 'billingAndUsage',
     path: '/usage',
     key: 'usageGroup',
     icon: 'icon-usage-outlined',

src/locales/en-US/usage.ts

@@ -21,6 +21,11 @@ export default {
   'usage.filter.granularity.day': 'Day',
   'usage.filter.granularity.week': 'Week',
   'usage.filter.granularity.month': 'Month',
+  'usage.tabs.summary': 'Summary',
+  'usage.tabs.tokens': 'Tokens',
+  'usage.tabs.gpuInstances': 'GPU Instances',
+  'usage.tabs.storage': 'Storage',
+  'usage.tabs.resourceEvents': 'Resource Events',
   'usage.tabs.models': 'Models',
   'usage.tabs.apikeys': 'API Keys',
   'usage.tabs.users': 'User',

src/locales/ja-JP/usage.ts

@@ -21,6 +21,11 @@ export default {
   'usage.filter.granularity.day': 'Day',
   'usage.filter.granularity.week': 'Week',
   'usage.filter.granularity.month': 'Month',
+  'usage.tabs.summary': '概要',
+  'usage.tabs.tokens': 'トークン',
+  'usage.tabs.gpuInstances': 'GPU インスタンス',
+  'usage.tabs.storage': 'ストレージ',
+  'usage.tabs.resourceEvents': 'リソースイベント',
   'usage.tabs.models': 'Models',
   'usage.tabs.apikeys': 'API Keys',
   'usage.tabs.users': 'User',

src/locales/ru-RU/usage.ts

@@ -21,6 +21,11 @@ export default {
   'usage.filter.granularity.day': 'Day',
   'usage.filter.granularity.week': 'Week',
   'usage.filter.granularity.month': 'Month',
+  'usage.tabs.summary': 'Обзор',
+  'usage.tabs.tokens': 'Токены',
+  'usage.tabs.gpuInstances': 'GPU-инстансы',
+  'usage.tabs.storage': 'Хранилище',
+  'usage.tabs.resourceEvents': 'События ресурсов',
   'usage.tabs.models': 'Models',
   'usage.tabs.apikeys': 'API Keys',
   'usage.tabs.users': 'User',

src/locales/tr-TR/usage.ts

@@ -21,6 +21,11 @@ export default {
   'usage.filter.granularity.day': 'Day',
   'usage.filter.granularity.week': 'Week',
   'usage.filter.granularity.month': 'Month',
+  'usage.tabs.summary': 'Özet',
+  'usage.tabs.tokens': 'Token',
+  'usage.tabs.gpuInstances': 'GPU Örnekleri',
+  'usage.tabs.storage': 'Depolama',
+  'usage.tabs.resourceEvents': 'Kaynak Olayları',
   'usage.tabs.models': 'Models',
   'usage.tabs.apikeys': 'API Keys',
   'usage.tabs.users': 'User',

src/locales/zh-CN/usage.ts

@@ -21,6 +21,11 @@ export default {
   'usage.filter.granularity.day': '按天',
   'usage.filter.granularity.week': '按周',
   'usage.filter.granularity.month': '按月',
+  'usage.tabs.summary': '总览',
+  'usage.tabs.tokens': 'Token',
+  'usage.tabs.gpuInstances': 'GPU 实例',
+  'usage.tabs.storage': '存储',
+  'usage.tabs.resourceEvents': '资源事件',
   'usage.tabs.models': '模型',
   'usage.tabs.apikeys': 'API 密钥',
   'usage.tabs.users': '用户',

src/pages/gpu-service/instances/components/instance-type-cell.tsx

@@ -51,7 +51,14 @@ const InstanceTypeCell: React.FC<{
               <IconFont type={sec.icon} />
               <span>{sec.name}</span>
             </div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+                width: '100%'
+              }}
+            >
               {rows.map(([label, value], i) => (
                 <div
                   key={i}
@@ -60,7 +67,15 @@ const InstanceTypeCell: React.FC<{
                   <span style={{ opacity: 0.65, minWidth: 96 }}>
                     {label || ''}
                   </span>
-                  <span>{value}</span>
+                  <span
+                    style={{
+                      display: 'flex',
+                      flex: 1,
+                      justifyContent: 'flex-end'
+                    }}
+                  >
+                    {value}
+                  </span>
                 </div>
               ))}
             </div>

src/pages/gpu-service/instances/forms/index.tsx

@@ -245,7 +245,12 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
       const unitResourcesParsed = instanceType?.spec?.unitResourcesParsed;
       const { count = 0 } = options;
 
-      return {
+      console.log('building resources data with', {
+        unitResourcesParsed,
+        count
+      });
+
+      const result = {
         accelerator: _.toString(count),
         cpu: unitResourcesParsed?.cpu?.cores
           ? count * unitResourcesParsed?.cpu?.cores
@@ -254,6 +259,8 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
           ? count * unitResourcesParsed?.ram?.value
           : null
       };
+      console.log('built resources data', result);
+      return result;
     };
 
     const buildResourcesDataForSubmit = (values: FormData) => {
@@ -475,7 +482,6 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
       },
       getFieldsValue: () => form.getFieldsValue(),
       applyInstanceType: (instanceType?: InstanceTypeItem) => {
-        console.log('applying instance type', instanceType);
         if (!instanceType) {
           resolveAndApply(undefined, 0);
           return;

src/pages/gpu-service/instances/forms/instance-type.tsx

@@ -273,7 +273,10 @@ const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
           </div>
           {isGPU && (
             <div style={{ flex: 1 }}>
-              <Form.Item<FormData> name={['spec', 'resources', 'cpu']}>
+              <Form.Item<FormData>
+                name={['spec', 'resources', 'cpu']}
+                key="cpu_input"
+              >
                 <InputNumber
                   label={'CPU'}
                   max={onceMaxRequest?.cpu ?? undefined}

src/pages/usage/index.tsx

@@ -13,7 +13,7 @@
  * The previous implementation lived in this file; it now lives in
  * ``components/token-tab.tsx`` so we can host it as a tab pane.
  */
-import { useAccess } from '@umijs/max';
+import { useAccess, useIntl } from '@umijs/max';
 import { Tabs, TabsProps } from 'antd';
 import React, { useMemo, useState } from 'react';
 import GpuInstancesTab from './components/gpu-instances-tab';
@@ -24,6 +24,7 @@ import TokenTab from './components/token-tab';
 
 const Usage: React.FC = () => {
   const access = useAccess();
+  const intl = useIntl();
   // Land on the cross-resource Summary by default.
   const [activeKey, setActiveKey] = useState<string>('summary');
 
@@ -31,31 +32,31 @@ const Usage: React.FC = () => {
     () => [
       {
         key: 'summary',
-        label: 'Summary',
+        label: intl.formatMessage({ id: 'usage.tabs.summary' }),
         children: <SummaryTab />
       },
       {
         key: 'tokens',
-        label: 'Tokens',
+        label: intl.formatMessage({ id: 'usage.tabs.tokens' }),
         children: <TokenTab />
       },
       {
         key: 'gpu-instances',
-        label: 'GPU Instances',
+        label: intl.formatMessage({ id: 'usage.tabs.gpuInstances' }),
         children: <GpuInstancesTab />
       },
       {
         key: 'storage',
-        label: 'Storage',
+        label: intl.formatMessage({ id: 'usage.tabs.storage' }),
         children: <StorageTab />
       },
       {
         key: 'resource-events',
-        label: 'Resource Events',
+        label: intl.formatMessage({ id: 'usage.tabs.resourceEvents' }),
         children: <ResourceEvents />
       }
     ],
-    []
+    [intl]
   );
 
   // Users who can't see GPU Service (MaaS-only: no cluster, no resource usage)