build: output files to dir

src/pages/dashboard/components/model-bills.tsx

@@ -161,7 +161,7 @@ const ModelBills: React.FC = () => {
       <PageTools
         marginBottom={10}
         marginTop={0}
-        left={<span>Bills by model</span>}
+        left={false}
         right={
           <Space>
             <Select

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

@@ -1,12 +1,15 @@
-import { Card, Col, Row } from 'antd';
+import { Card, Col, Row, Space } from 'antd';
+import React from 'react';
 import { overviewConfigs } from '../config';
+import '../styles/index.less';
 import styles from './over-view.less';
 
-const CardItem: React.FC<{ label: string; value: number; bgColor: string }> = ({
-  label,
-  value,
-  bgColor
+const renderCardItem = (data: {
+  label: string;
+  value: React.ReactNode;
+  bgColor: string;
 }) => {
+  const { label, value, bgColor } = data;
   return (
     <Card
       bordered={false}
@@ -21,16 +24,52 @@ const CardItem: React.FC<{ label: string; value: number; bgColor: string }> = ({
   );
 };
 const Overview: React.FC = (props) => {
-  const { data = {} } = props;
+  // const { data = {} } = props;
+  const data = {
+    workers: 8,
+    models: {
+      healthy: 10,
+      warning: 2,
+      error: 1
+    },
+    gpus: 30,
+    allocatedGpus: 12,
+    instances: {
+      healthy: 32,
+      warning: 3,
+      error: 2
+    }
+  };
+
+  const renderValue = (
+    value:
+      | number
+      | {
+          healthy: number;
+          warning: number;
+          error: number;
+        }
+  ) => {
+    if (typeof value === 'number') {
+      return value;
+    }
+    return (
+      <Space className="value-box">
+        <span className={'value-healthy'}>{value.healthy}</span>
+        <span className={'value-warning'}>{value.warning}</span>
+        <span className={'value-error'}>{value.error}</span>
+      </Space>
+    );
+  };
   return (
     <Row gutter={[20, 20]} className={styles.row}>
       {overviewConfigs.map((config, index) => (
         <Col span={5} key={config.key}>
-          <CardItem
-            label={config.label}
-            value={data[config.key] || 0}
-            bgColor={config.backgroundColor}
-          />
+          {renderCardItem({
+            label: config.label,
+            value: renderValue(data[config.key] || 0),
+            bgColor: config.backgroundColor
+          })}
         </Col>
       ))}
     </Row>

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

@@ -1,15 +1,21 @@
 import PageTools from '@/components/page-tools';
+import { generateRandomArray } from '@/utils';
 import { Line } from '@ant-design/plots';
-import { DatePicker } from 'antd';
 import _ from 'lodash';
 
+const mockData = {
+  GPU: generateRandomArray(),
+  CPU: generateRandomArray(),
+  Memory: generateRandomArray(),
+  VRAM: generateRandomArray()
+};
 const UtilizationOvertime: React.FC = () => {
   const timeList = [
-    '01:00:00',
-    '02:00:00',
-    '03:00:00',
-    '04:00:00',
-    '05:00:00',
+    // '01:00:00',
+    // '02:00:00',
+    // '03:00:00',
+    // '04:00:00',
+    // '05:00:00',
     '06:00:00',
     '07:00:00',
     '08:00:00',
@@ -21,7 +27,7 @@ const UtilizationOvertime: React.FC = () => {
     '14:00:00',
     '15:00:00'
   ];
-  const typeList = ['GPU', 'CPU', 'Memory'];
+  const typeList = ['GPU', 'CPU', 'Memory', 'VRAM'];
   const generateData = () => {
     const data = [];
     for (let i = 0; i < timeList.length; i++) {
@@ -29,7 +35,7 @@ const UtilizationOvertime: React.FC = () => {
         data.push({
           time: timeList[i],
           type: typeList[j],
-          value: _.round(Math.random(), 3)
+          value: _.get(mockData, typeList[j])[i]
         });
       }
     }
@@ -41,10 +47,12 @@ const UtilizationOvertime: React.FC = () => {
     console.log('dateString============', date);
   };
   const config = {
+    // title: 'Resource Utilization',
     xField: 'time',
     yField: 'value',
     color: ['red', 'blue', 'green'],
     colorField: 'type',
+    autoFit: true,
     slider: false,
     shapeField: 'smooth',
     axis: {
@@ -69,21 +77,15 @@ const UtilizationOvertime: React.FC = () => {
     tooltip: {
       title: 'time',
       items: [{ channel: 'y' }]
-    },
-    label: {
-      autoRotate: true
     }
+    // label: {
+    //   autoRotate: true
+    // }
   };
+  // <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
   return (
     <>
-      <PageTools
-        marginBottom={10}
-        marginTop={0}
-        left={<span>Utilization Over Time</span>}
-        right={
-          <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
-        }
-      />
+      <PageTools marginBottom={10} marginTop={0} left={false} right={false} />
       <Line height={400} data={data} {...config} />
     </>
   );