chore: export table title

src/config/theme/light.ts

@@ -25,6 +25,9 @@ export default {
     Tabs: {
       titleFontSizeLG: 14
     },
+    DatePicker: {
+      fontSizeLG: 14
+    },
     Menu: {
       iconSize: 16,
       iconMarginInlineEnd: 12,

src/locales/en-US/dashboard.ts

@@ -21,5 +21,11 @@ export default {
   'dashboard.activeModels': 'Active Models',
   'dashboard.runninginstances': 'Running Instances',
   'dashboard.activeModels.name': 'Model Name',
-  'dashboard.allocatevram': 'Allocated VRAM / RAM'
+  'dashboard.allocatevram': 'Allocated VRAM / RAM',
+  'dashboard.usage.selectuser': 'Select users',
+  'dashboard.usage.selectmodel': 'Select models',
+  'dashboard.usage.export': 'Export Data',
+  'dashboard.usage.export.user': 'User',
+  'dashboard.usage.export.model': 'Model',
+  'dashboard.usage.export.date': 'Date'
 };

src/locales/ja-JP/dashboard.ts

@@ -21,5 +21,20 @@ export default {
   'dashboard.activeModels': 'アクティブなモデル',
   'dashboard.runninginstances': '稼働中のインスタンス',
   'dashboard.activeModels.name': 'モデル名',
-  'dashboard.allocatevram': '割り当て済みVRAM / メモリ'
+  'dashboard.allocatevram': '割り当て済みVRAM / メモリ',
+  'dashboard.usage.selectuser': 'Select users',
+  'dashboard.usage.selectmodel': 'Select models',
+  'dashboard.usage.export': 'Export Data',
+  'dashboard.usage.export.user': 'User',
+  'dashboard.usage.export.model': 'Model',
+  'dashboard.usage.export.date': 'Date'
 };
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+// 1. 'dashboard.usage.selectuser': 'Select users',
+// 2. 'dashboard.usage.selectmodel': 'Select models',
+// 3. 'dashboard.usage.export': 'Export Data',
+// 4. 'dashboard.usage.export.user': 'User',
+// 5. 'dashboard.usage.export.model': 'Model',
+// 6. 'dashboard.usage.export.date': 'Date'
+// ========== End of To-Do List ==========

src/locales/ru-RU/dashboard.ts

@@ -21,5 +21,20 @@ export default {
   'dashboard.activeModels': 'Активные модели',
   'dashboard.runninginstances': 'Запущенные инстансы',
   'dashboard.activeModels.name': 'Название модели',
-  'dashboard.allocatevram': 'Выделено VRAM / ОЗУ'
+  'dashboard.allocatevram': 'Выделено VRAM / ОЗУ',
+  'dashboard.usage.selectuser': 'Select users',
+  'dashboard.usage.selectmodel': 'Select models',
+  'dashboard.usage.export': 'Export Data',
+  'dashboard.usage.export.user': 'User',
+  'dashboard.usage.export.model': 'Model',
+  'dashboard.usage.export.date': 'Date'
 };
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+// 1. 'dashboard.usage.selectuser': 'Select users',
+// 2. 'dashboard.usage.selectmodel': 'Select models',
+// 3. 'dashboard.usage.export': 'Export Data',
+// 4. 'dashboard.usage.export.user': 'User',
+// 5. 'dashboard.usage.export.model': 'Model',
+// 6. 'dashboard.usage.export.date': 'Date'
+// ========== End of To-Do List ==========

src/locales/zh-CN/dashboard.ts

@@ -21,5 +21,11 @@ export default {
   'dashboard.activeModels': '活跃模型',
   'dashboard.activeModels.name': '模型名称',
   'dashboard.runninginstances': '运行实例',
-  'dashboard.allocatevram': '已分配显存 / 内存'
+  'dashboard.allocatevram': '已分配显存 / 内存',
+  'dashboard.usage.selectuser': '选择用户',
+  'dashboard.usage.selectmodel': '选择模型',
+  'dashboard.usage.export': '导出数据',
+  'dashboard.usage.export.user': '用户',
+  'dashboard.usage.export.model': '模型',
+  'dashboard.usage.export.date': '日期'
 };

src/pages/dashboard/components/usage-inner/export-data.tsx

@@ -33,7 +33,7 @@ const ExportData: React.FC<{
 
   return (
     <ScrollerModal
-      title={'Export Data'}
+      title={intl.formatMessage({ id: 'dashboard.usage.export' })}
       open={open}
       centered={false}
       onCancel={onCancel}
@@ -66,9 +66,23 @@ const ExportData: React.FC<{
       }
     >
       <Space>
-        <DatePicker.RangePicker></DatePicker.RangePicker>
-        <Select placeholder="Select user"></Select>
-        <Select placeholder="Select model"></Select>
+        <DatePicker.RangePicker style={{ width: 240 }}></DatePicker.RangePicker>
+        <Select
+          mode="multiple"
+          maxTagCount={1}
+          placeholder={intl.formatMessage({
+            id: 'dashboard.usage.selectuser'
+          })}
+          style={{ width: 160 }}
+        ></Select>
+        <Select
+          mode="multiple"
+          maxTagCount={1}
+          placeholder={intl.formatMessage({
+            id: 'dashboard.usage.selectmodel'
+          })}
+          style={{ width: 160 }}
+        ></Select>
       </Space>
       <Table
         columns={exportTableColumns}

src/pages/dashboard/components/usage-inner/index.tsx

@@ -67,9 +67,25 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
           </TitleWrapper>
           <FilterWrapper>
             <div className="selection">
-              <DatePicker.RangePicker></DatePicker.RangePicker>
-              <Select placeholder="Select user"></Select>
-              <Select placeholder="Select model"></Select>
+              <DatePicker.RangePicker
+                style={{ width: 240 }}
+              ></DatePicker.RangePicker>
+              <Select
+                mode="multiple"
+                maxTagCount={1}
+                placeholder={intl.formatMessage({
+                  id: 'dashboard.usage.selectuser'
+                })}
+                style={{ width: 160 }}
+              ></Select>
+              <Select
+                mode="multiple"
+                maxTagCount={1}
+                placeholder={intl.formatMessage({
+                  id: 'dashboard.usage.selectmodel'
+                })}
+                style={{ width: 160 }}
+              ></Select>
             </div>
             <Button
               type="text"

src/pages/usage/components/dahboard-inner.tsx

@@ -33,7 +33,6 @@ const Page: React.FC<{ setLoading: (loading: boolean) => void }> = ({
   return (
     <DashboardContext.Provider value={{ ...data, fetchData: getDashboardData }}>
       <Overview></Overview>
-      {/* <SystemLoad></SystemLoad> */}
       <PageTools
         left={
           <Space>