chore: dashbord ui

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

@@ -0,0 +1,161 @@
+import ContentWrapper from '@/components/content-wrapper';
+import { Col, Row, Table } from 'antd';
+
+const modelColumns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name'
+  },
+  {
+    title: 'Allocated GPUs',
+    dataIndex: 'allocated',
+    key: 'allocated',
+    render: (text: any, record: any) => <span>{record.gpu.allocated}</span>
+  },
+  {
+    title: 'GPU Utilization',
+    dataIndex: 'utilization',
+    key: 'utilization',
+    render: (text: any, record: any) => <span>{record.gpu.utilization}</span>
+  },
+  {
+    title: 'Running Instances',
+    dataIndex: 'running',
+    key: 'running',
+    render: (text: any, record: any) => <span>{record.instances.running}</span>
+  },
+  {
+    title: 'Pending Instances',
+    dataIndex: 'pending',
+    key: 'pending',
+    render: (text: any, record: any) => <span>{record.instances.pending}</span>
+  }
+];
+
+const projectColumns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name'
+  },
+  {
+    title: 'Token Quota',
+    dataIndex: 'quota',
+    key: 'quota'
+  },
+  {
+    title: 'Token Utilization',
+    dataIndex: 'utilization',
+    key: 'utilization'
+  },
+  {
+    title: 'Members',
+    dataIndex: 'members',
+    key: 'members'
+  }
+];
+
+const modelData = [
+  {
+    id: 1,
+    name: 'qwen2',
+    gpu: { allocated: 4, utilization: '50%' },
+    instances: { running: 1, pending: 0 }
+  },
+  {
+    id: 2,
+    name: 'llama3:70b',
+    gpu: { allocated: 3, utilization: '70%' },
+    instances: { running: 1, pending: 0 }
+  },
+  {
+    id: 3,
+    name: 'llama3',
+    gpu: { allocated: 5, utilization: '20%' },
+    instances: { running: 1, pending: 0 }
+  },
+  {
+    id: 4,
+    name: 'gemma',
+    gpu: { allocated: 1, utilization: '25%' },
+    instances: { running: 1, pending: 0 }
+  },
+  {
+    id: 5,
+    name: 'phi3',
+    gpu: { allocated: 2, utilization: '46%' },
+    instances: { running: 1, pending: 0 }
+  }
+];
+
+const projectData = [
+  {
+    id: 1,
+    name: 'copilot-dev',
+    quota: 100,
+    utilization: 50,
+    members: 4
+  },
+  {
+    id: 2,
+    name: 'rag-wiki',
+    quota: 200,
+    utilization: 70,
+    members: 3
+  },
+  {
+    id: 3,
+    name: 'smart-auto-agent',
+    quota: 100,
+    utilization: 20,
+    members: 5
+  },
+  {
+    id: 4,
+    name: 'office-auto-docs',
+    quota: 100,
+    utilization: 25,
+    members: 1
+  },
+  {
+    id: 5,
+    name: 'smart-customer-service',
+    quota: 100,
+    utilization: 46,
+    members: 2
+  }
+];
+const ActiveTable = () => {
+  return (
+    <Row>
+      <Col span={12}>
+        <ContentWrapper
+          contentStyle={{ paddingRight: 0 }}
+          title={<span style={{ lineHeight: '48px' }}>Active Models</span>}
+        >
+          <Table
+            columns={modelColumns}
+            dataSource={modelData}
+            pagination={false}
+            rowKey="id"
+          />
+        </ContentWrapper>
+      </Col>
+      <Col span={12}>
+        <ContentWrapper
+          title={<span style={{ lineHeight: '48px' }}>Active Projects</span>}
+        >
+          <Table
+            columns={projectColumns}
+            dataSource={projectData}
+            pagination={false}
+            rowKey="id"
+          />
+        </ContentWrapper>
+      </Col>
+    </Row>
+  );
+};
+
+export default ActiveTable;

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

@@ -1,6 +1,5 @@
-import PageTools from '@/components/page-tools';
+import LineChart from '@/components/charts/line-chart';
 import { generateRandomArray } from '@/utils';
-import { Line } from '@ant-design/plots';
 import _ from 'lodash';
 
 const mockData = {
@@ -43,50 +42,10 @@ const UtilizationOvertime: React.FC = () => {
   };
   const data = generateData();
 
-  const handleSelectDate = (date: string) => {
-    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: {
-      x: {
-        textStyle: {
-          autoRoate: true
-        }
-      }
-    },
-    point: {
-      shapeField: 'circle',
-      sizeField: 2
-    },
-    style: {
-      lineWidth: 1.4
-    },
-    legend: {
-      color: {
-        layout: { justifyContent: 'center' }
-      }
-    },
-    tooltip: {
-      title: 'time',
-      items: [{ channel: 'y' }]
-    }
-    // label: {
-    //   autoRotate: true
-    // }
-  };
   // <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
   return (
     <>
-      <PageTools marginBottom={10} marginTop={0} left={false} right={false} />
-      <Line height={400} data={data} {...config} />
+      <LineChart height={400} data={data} />
     </>
   );
 };

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

@@ -0,0 +1,68 @@
+import GaugeChart from '@/components/charts/gauge';
+import PageTools from '@/components/page-tools';
+import { Col, DatePicker, Row } from 'antd';
+import ResourceUtilization from './resource-utilization';
+
+const SystemLoad = () => {
+  const handleSelectDate = (date: string) => {
+    console.log('dateString============', date);
+  };
+
+  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>
+  );
+};
+
+export default SystemLoad;

src/pages/dashboard/components/usage.tsx

@@ -0,0 +1,156 @@
+import ColumnBar from '@/components/charts/column-bar';
+import HBar from '@/components/charts/h-bar';
+import PageTools from '@/components/page-tools';
+import { generateRandomArray } from '@/utils';
+import { PageContainer } from '@ant-design/pro-components';
+import { Col, DatePicker, Row } from 'antd';
+
+const times = [
+  'june 1',
+  'june 2',
+  'june 3',
+  'june 4',
+  'june 5',
+  'june 6',
+  'june 7'
+];
+
+const users = ['Jim', 'Lucy', 'Lily', 'Tom', 'Jack', 'Rose', 'Jerry'];
+const projects = [
+  'copilot-dev',
+  'rag-wiki',
+  'smart-auto-agent',
+  'office-auto-docs',
+  'smart-customer-service'
+];
+
+const APIRequestData = generateRandomArray({
+  length: times.length,
+  max: 100,
+  min: 0,
+  offset: 10
+});
+
+const TokensData = generateRandomArray({
+  length: times.length,
+  max: 2000,
+  min: 200,
+  offset: 200
+});
+
+const usersData = generateRandomArray({
+  length: users.length,
+  max: 100,
+  min: 0,
+  offset: 10
+});
+
+const projectsData = generateRandomArray({
+  length: projects.length,
+  max: 100,
+  min: 0,
+  offset: 10
+});
+
+const userDataList = usersData
+  .map((val, i) => {
+    return {
+      time: users[i],
+      value: val
+    };
+  })
+  .sort((a, b) => b.value - a.value);
+
+const projectDataList = projectsData
+  .map((val, i) => {
+    return {
+      time: projects[i],
+      value: val
+    };
+  })
+  .sort((a, b) => b.value - a.value);
+
+const dataList = APIRequestData.map((val, i) => {
+  console.log('val', val);
+  return {
+    time: times[i],
+    value: val
+  };
+});
+const tokenUsage = TokensData.map((val, i) => {
+  console.log('val', val);
+  return {
+    time: times[i],
+    value: val
+  };
+});
+
+const Usage = () => {
+  const handleSelectDate = (dateString: string) => {
+    console.log('dateString============', dateString);
+  };
+  return (
+    <>
+      <PageContainer ghost title="Usage">
+        <PageTools
+          marginBottom={10}
+          marginTop={0}
+          left={false}
+          right={
+            <DatePicker onChange={handleSelectDate} style={{ width: 300 }} />
+          }
+        />
+      </PageContainer>
+      <Row style={{ width: '100%' }}>
+        <Col span={12}>
+          <PageContainer title={false}>
+            <ColumnBar
+              title="API Request"
+              data={dataList}
+              xField="time"
+              yField="value"
+              height={360}
+            ></ColumnBar>
+          </PageContainer>
+        </Col>
+        <Col span={12}>
+          <PageContainer title={false}>
+            <ColumnBar
+              title="Tokens"
+              data={tokenUsage}
+              xField="time"
+              yField="value"
+              height={360}
+            ></ColumnBar>
+          </PageContainer>
+        </Col>
+      </Row>
+      <Row style={{ width: '100%' }}>
+        <Col span={12}>
+          <PageContainer title={false}>
+            <HBar
+              title="Top Users"
+              data={userDataList}
+              xField="time"
+              yField="value"
+              height={360}
+            ></HBar>
+          </PageContainer>
+        </Col>
+        <Col span={12}>
+          <PageContainer title={false}>
+            <HBar
+              title="Top Projects"
+              data={projectDataList}
+              xField="time"
+              yField="value"
+              height={360}
+            ></HBar>
+          </PageContainer>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default Usage;