fix: table list action

src/pages/dashboard/components/active-table.tsx

@@ -1,8 +1,7 @@
 import PageTools from '@/components/page-tools';
-import ProgressBar from '@/components/progress-bar';
+import { convertFileSize } from '@/utils';
 import { useIntl } from '@umijs/max';
 import { Col, Row, Table } from 'antd';
-import _ from 'lodash';
 import { useContext } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
@@ -77,21 +76,19 @@ const ActiveTable = () => {
       dataIndex: 'name',
       key: 'name'
     },
+    // {
+    //   title: intl.formatMessage({ id: 'dashboard.gpuutilization' }),
+    //   dataIndex: 'gpu_utilization',
+    //   key: 'gpu_utilization',
+    //   render: (text: any, record: any) => (
+    //     <ProgressBar percent={_.round(text, 0)}></ProgressBar>
+    //   )
+    // },
     {
-      title: intl.formatMessage({ id: 'dashboard.gpuutilization' }),
-      dataIndex: 'gpu_utilization',
-      key: 'gpu_utilization',
-      render: (text: any, record: any) => (
-        <ProgressBar percent={_.round(text, 0)}></ProgressBar>
-      )
-    },
-    {
-      title: intl.formatMessage({ id: 'dashboard.vramutilization' }),
-      dataIndex: 'gpu_memory_utilization',
+      title: intl.formatMessage({ id: 'dashboard.allocatevram' }),
+      dataIndex: 'allocate_gpu_memory_utilization',
       key: 'gpu_memory_utilization',
-      render: (text: any, record: any) => (
-        <ProgressBar percent={_.round(text, 0)}></ProgressBar>
-      )
+      render: (text: any, record: any) => <span>{convertFileSize(text)}</span>
     },
     {
       title: intl.formatMessage({ id: 'dashboard.runninginstances' }),
@@ -99,7 +96,7 @@ const ActiveTable = () => {
       key: 'instance_count'
     },
     {
-      title: 'Tokens',
+      title: intl.formatMessage({ id: 'dashboard.tokens' }),
       dataIndex: 'token_count',
       key: 'token_count'
     }

src/pages/dashboard/components/over-view.tsx

@@ -57,9 +57,9 @@ const Overview: React.FC = () => {
           <Col
             xs={{ flex: '100%' }}
             sm={{ flex: '50%' }}
-            md={{ flex: '30%' }}
-            lg={{ flex: '20%' }}
-            xl={{ flex: '20%' }}
+            md={{ flex: '50%' }}
+            lg={{ flex: '25%' }}
+            xl={{ flex: '25%' }}
             key={config.key}
           >
             {renderCardItem({

src/pages/dashboard/components/resource-utilization.tsx

@@ -67,7 +67,7 @@ const UtilizationOvertime: React.FC = () => {
     const list: { value: number; time: string; type: string }[] = [];
     _.each(typeList, (type: any) => {
       const dataList = _.map(_.get(data, type, []), (item: any) => {
-        const value = _.get(item, 'value', 0);
+        const value = _.round(_.get(item, 'value', 0), 1);
         const time = dayjs(item.timestamp * 1000).format('HH:mm:ss');
         const itemtype = _.get(TypeKeyMap, [type, 'intl'], false)
           ? intl.formatMessage({

src/pages/dashboard/components/usage.tsx

@@ -92,6 +92,19 @@ const tokenUsage = TokensData.map((val, i) => {
   };
 });
 
+const getCurrentMonthDays = () => {
+  const now = dayjs();
+  const firstDayOfMonth = now.startOf('month');
+  const dateRange = [];
+  let currentDate = firstDayOfMonth;
+
+  while (currentDate.isBefore(now) || currentDate.isSame(now, 'day')) {
+    dateRange.push(currentDate.format('YYYY-MM-DD'));
+    currentDate = currentDate.add(1, 'day');
+  }
+  return dateRange;
+};
+
 const Usage = () => {
   const intl = useIntl();
   const { size } = useWindowResize();
@@ -105,8 +118,11 @@ const Usage = () => {
   const [userData, setUserData] = useState<{ name: string; value: number }[]>(
     []
   );
+  const [dateRange, setDateRange] = useState<string[]>(getCurrentMonthDays());
+
   const data = useContext(DashboardContext)?.model_usage || {};
 
+  console.log('dateRange', dateRange);
   const handleSelectDate = (dateString: string) => {};
 
   const generateData = () => {
@@ -126,26 +142,67 @@ const Usage = () => {
 
     _.each(data.api_request_history, (item: any) => {
       requestList.push({
-        time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
+        time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
         value: item.value
       });
     });
 
-    _.each(data.completion_token_history, (item: any) => {
-      tokenList.push({
-        time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
-        name: 'completion_token',
-        color: 'rgba(84, 204, 152,0.8)',
-        value: item.value
+    _.each(dateRange, (date: string) => {
+      // tokens data
+      const item = _.find(data.completion_token_history, (item: any) => {
+        return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
       });
-    });
-    _.each(data.prompt_token_history, (item: any) => {
-      tokenList.push({
-        time: dayjs(item.timestamp * 1000).format('YYYY-MM'),
-        name: 'prompt_token',
-        color: 'rgba(0, 170, 173, 0.8)',
-        value: item.value
+      if (!item) {
+        tokenList.push({
+          time: date,
+          name: 'completion_token',
+          color: 'rgba(84, 204, 152,0.8)',
+          value: 0
+        });
+      } else {
+        tokenList.push({
+          time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD'),
+          name: 'completion_token',
+          color: 'rgba(84, 204, 152,0.8)',
+          value: item.value
+        });
+      }
+
+      const promptItem = _.find(data.prompt_token_history, (item: any) => {
+        return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
       });
+      if (!promptItem) {
+        tokenList.push({
+          time: date,
+          name: 'prompt_token',
+          color: 'rgba(0, 170, 173, 0.8)',
+          value: 0
+        });
+      } else {
+        tokenList.push({
+          time: dayjs(promptItem.timestamp * 1000).format('YYYY-MM-DD'),
+          name: 'prompt_token',
+          color: 'rgba(0, 170, 173, 0.8)',
+          value: promptItem.value
+        });
+      }
+
+      // api request data
+      const requestItem = _.find(data.api_request_history, (item: any) => {
+        return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
+      });
+
+      if (!requestItem) {
+        requestList.push({
+          time: date,
+          value: 0
+        });
+      } else {
+        requestList.push({
+          time: dayjs(requestItem.timestamp * 1000).format('YYYY-MM-DD'),
+          value: requestItem.value
+        });
+      }
     });
 
     _.each(data.top_users, (item: any) => {
@@ -190,7 +247,7 @@ const Usage = () => {
           </span>
         }
         right={
-          <RangePicker
+          <DatePicker
             onChange={handleSelectDate}
             style={{ width: 300 }}
             picker="month"

src/pages/dashboard/config/index.ts

@@ -11,12 +11,12 @@ export const overviewConfigs = [
     backgroundColor: 'var(--color-white-1)'
     // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
-  {
-    key: 'allocatedGpus',
-    label: 'dashboard.allocategpus',
-    backgroundColor: 'var(--color-white-1)'
-    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
-  },
+  // {
+  //   key: 'allocatedGpus',
+  //   label: 'dashboard.allocategpus',
+  //   backgroundColor: 'var(--color-white-1)'
+  //   // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
+  // },
   {
     key: 'model_count',
     label: 'dashboard.models',