build: css files dir

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

@@ -42,12 +42,14 @@ const projectColumns = [
   {
     title: 'Token Quota',
     dataIndex: 'quota',
-    key: 'quota'
+    key: 'quota',
+    render: (text: any, record: any) => <span>{record.quota}k</span>
   },
   {
     title: 'Token Utilization',
     dataIndex: 'utilization',
-    key: 'utilization'
+    key: 'utilization',
+    render: (text: any, record: any) => <span>{record.utilization}%</span>
   },
   {
     title: 'Members',

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

@@ -1,3 +1,4 @@
+import { PageContainer } from '@ant-design/pro-components';
 import { Card, Col, Row, Space } from 'antd';
 import React from 'react';
 import { overviewConfigs } from '../config';
@@ -62,17 +63,19 @@ const Overview: React.FC = (props) => {
     );
   };
   return (
-    <Row gutter={[20, 20]} className={styles.row}>
-      {overviewConfigs.map((config, index) => (
-        <Col span={5} key={config.key}>
-          {renderCardItem({
-            label: config.label,
-            value: renderValue(data[config.key] || 0),
-            bgColor: config.backgroundColor
-          })}
-        </Col>
-      ))}
-    </Row>
+    <PageContainer ghost title={false}>
+      <Row gutter={[20, 20]} className={styles.row}>
+        {overviewConfigs.map((config, index) => (
+          <Col span={5} key={config.key}>
+            {renderCardItem({
+              label: config.label,
+              value: renderValue(data[config.key] || 0),
+              bgColor: config.backgroundColor
+            })}
+          </Col>
+        ))}
+      </Row>
+    </PageContainer>
   );
 };
 

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

@@ -1,12 +1,28 @@
 import LineChart from '@/components/charts/line-chart';
-import { generateRandomArray } from '@/utils';
+import { generateFluctuatingData } from '@/utils';
 import _ from 'lodash';
 
 const mockData = {
-  GPU: generateRandomArray(),
-  CPU: generateRandomArray(),
-  Memory: generateRandomArray(),
-  VRAM: generateRandomArray()
+  GPU: generateFluctuatingData({
+    total: 17,
+    max: 80,
+    min: 20
+  }),
+  CPU: generateFluctuatingData({
+    total: 17,
+    max: 70,
+    min: 10
+  }),
+  Memory: generateFluctuatingData({
+    total: 17,
+    max: 60,
+    min: 20
+  }),
+  VRAM: generateFluctuatingData({
+    total: 17,
+    max: 90,
+    min: 15
+  })
 };
 const UtilizationOvertime: React.FC = () => {
   const timeList = [
@@ -15,8 +31,8 @@ const UtilizationOvertime: React.FC = () => {
     // '03:00:00',
     // '04:00:00',
     // '05:00:00',
-    '06:00:00',
-    '07:00:00',
+    // '06:00:00',
+    // '07:00:00',
     '08:00:00',
     '09:00:00',
     '10:00:00',
@@ -24,7 +40,16 @@ const UtilizationOvertime: React.FC = () => {
     '12:00:00',
     '13:00:00',
     '14:00:00',
-    '15:00:00'
+    '15:00:00',
+    '16:00:00',
+    '17:00:00',
+    '18:00:00',
+    '19:00:00',
+    '20:00:00',
+    '21:00:00',
+    '22:00:00',
+    '23:00:00',
+    '24:00:00'
   ];
   const typeList = ['GPU', 'CPU', 'Memory', 'VRAM'];
   const generateData = () => {

src/pages/dashboard/components/system-load.tsx

@@ -1,5 +1,6 @@
 import GaugeChart from '@/components/charts/gauge';
 import PageTools from '@/components/page-tools';
+import { PageContainer } from '@ant-design/pro-components';
 import { Col, DatePicker, Row } from 'antd';
 import ResourceUtilization from './resource-utilization';
 
@@ -9,59 +10,61 @@ const SystemLoad = () => {
   };
 
   return (
-    <div className="system-load">
-      <PageTools
-        marginBottom={10}
-        marginTop={0}
-        left={false}
-        right={
-          <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
-        }
-      />
-      <ResourceUtilization />
-      <Row style={{ width: '100%' }}>
-        <Col span={6}>
-          <GaugeChart
-            title="GPU Compute Utilization"
-            total={100}
-            target={20}
-            // height={320}
-            thresholds={[50, 70, 100]}
-            rangColor={['#54cc98', '#ffd666', '#ff7875']}
-          ></GaugeChart>
-        </Col>
-        <Col span={6}>
-          <GaugeChart
-            title="GPU Memory Utilization"
-            total={100}
-            target={30}
-            // height={320}
-            thresholds={[50, 70, 100]}
-            rangColor={['#54cc98', '#ffd666', '#ff7875']}
-          ></GaugeChart>
-        </Col>
-        <Col span={6}>
-          <GaugeChart
-            title="CPU Compute Utilization"
-            total={100}
-            target={40}
-            // height={320}
-            thresholds={[50, 70, 100]}
-            rangColor={['#54cc98', '#ffd666', '#ff7875']}
-          ></GaugeChart>
-        </Col>
-        <Col span={6}>
-          <GaugeChart
-            title="CPU Memory Utilization"
-            total={100}
-            target={70}
-            // height={320}
-            thresholds={[50, 70, 100]}
-            rangColor={['#54cc98', '#ffd666', '#ff7875']}
-          ></GaugeChart>
-        </Col>
-      </Row>
-    </div>
+    <PageContainer ghost title="System Load">
+      <div className="system-load">
+        <PageTools
+          marginBottom={10}
+          marginTop={0}
+          left={false}
+          right={
+            <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
+          }
+        />
+        <ResourceUtilization />
+        <Row style={{ width: '100%' }}>
+          <Col span={6}>
+            <GaugeChart
+              title="GPU Compute Utilization"
+              total={100}
+              target={20}
+              // height={320}
+              thresholds={[50, 70, 100]}
+              rangColor={['#54cc98', '#ffd666', '#ff7875']}
+            ></GaugeChart>
+          </Col>
+          <Col span={6}>
+            <GaugeChart
+              title="GPU Memory Utilization"
+              total={100}
+              target={30}
+              // height={320}
+              thresholds={[50, 70, 100]}
+              rangColor={['#54cc98', '#ffd666', '#ff7875']}
+            ></GaugeChart>
+          </Col>
+          <Col span={6}>
+            <GaugeChart
+              title="CPU Compute Utilization"
+              total={100}
+              target={40}
+              // height={320}
+              thresholds={[50, 70, 100]}
+              rangColor={['#54cc98', '#ffd666', '#ff7875']}
+            ></GaugeChart>
+          </Col>
+          <Col span={6}>
+            <GaugeChart
+              title="CPU Memory Utilization"
+              total={100}
+              target={70}
+              // height={320}
+              thresholds={[50, 70, 100]}
+              rangColor={['#54cc98', '#ffd666', '#ff7875']}
+            ></GaugeChart>
+          </Col>
+        </Row>
+      </div>
+    </PageContainer>
   );
 };
 

src/pages/dashboard/components/usage.tsx

@@ -133,7 +133,7 @@ const Usage = () => {
               data={userDataList}
               xField="time"
               yField="value"
-              height={360}
+              height={400}
             ></HBar>
           </PageContainer>
         </Col>
@@ -144,7 +144,7 @@ const Usage = () => {
               data={projectDataList}
               xField="time"
               yField="value"
-              height={360}
+              height={400}
             ></HBar>
           </PageContainer>
         </Col>

src/pages/dashboard/index.tsx

@@ -1,5 +1,4 @@
 import DividerLine from '@/components/divider-line';
-import { PageContainer } from '@ant-design/pro-components';
 import ActiveTable from './components/active-table';
 import Overview from './components/over-view';
 import SystemLoad from './components/system-load';
@@ -8,13 +7,9 @@ import Usage from './components/usage';
 const Dashboard: React.FC = () => {
   return (
     <>
-      <PageContainer ghost title={false}>
-        <Overview></Overview>
-      </PageContainer>
+      <Overview></Overview>
       <DividerLine></DividerLine>
-      <PageContainer ghost title="System Load">
-        <SystemLoad></SystemLoad>
-      </PageContainer>
+      <SystemLoad></SystemLoad>
       <DividerLine></DividerLine>
       <Usage></Usage>
       <DividerLine></DividerLine>