chore: dashboard api

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

@@ -1,6 +1,9 @@
-// import div from '@/components/content-wrapper';
 import PageTools from '@/components/page-tools';
+import ProgressBar from '@/components/progress-bar';
 import { Col, Row, Table } from 'antd';
+import _ from 'lodash';
+import { useContext } from 'react';
+import { DashboardContext } from '../config/dashboard-context';
 
 const modelColumns = [
   {
@@ -9,28 +12,30 @@ const modelColumns = [
     key: 'name'
   },
   {
-    title: 'Allocated GPUs',
-    dataIndex: 'allocated',
-    key: 'allocated',
-    render: (text: any, record: any) => <span>{record.gpu.allocated}</span>
+    title: 'GPU Utilization',
+    dataIndex: 'gpu_utilization',
+    key: 'gpu_utilization',
+    render: (text: any, record: any) => (
+      <ProgressBar percent={_.round(text, 2)}></ProgressBar>
+    )
   },
   {
-    title: 'GPU Utilization',
-    dataIndex: 'utilization',
-    key: 'utilization',
-    render: (text: any, record: any) => <span>{record.gpu.utilization}</span>
+    title: 'VRAM Utilization',
+    dataIndex: 'gpu_memory_utilization',
+    key: 'gpu_memory_utilization',
+    render: (text: any, record: any) => (
+      <ProgressBar percent={_.round(text, 2)}></ProgressBar>
+    )
   },
   {
     title: 'Running Instances',
-    dataIndex: 'running',
-    key: 'running',
-    render: (text: any, record: any) => <span>{record.instances.running}</span>
+    dataIndex: 'instance_count',
+    key: 'instance_count'
   },
   {
-    title: 'Pending Instances',
-    dataIndex: 'pending',
-    key: 'pending',
-    render: (text: any, record: any) => <span>{record.instances.pending}</span>
+    title: 'Tokens',
+    dataIndex: 'token_count',
+    key: 'token_count'
   }
 ];
 
@@ -59,39 +64,6 @@ const projectColumns = [
   }
 ];
 
-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,
@@ -130,6 +102,7 @@ const projectData = [
   }
 ];
 const ActiveTable = () => {
+  const data = useContext(DashboardContext).active_models || [];
   return (
     <Row gutter={[20, 0]}>
       <Col xs={24} sm={24} md={24} lg={24} xl={24}>
@@ -147,7 +120,7 @@ const ActiveTable = () => {
         <div>
           <Table
             columns={modelColumns}
-            dataSource={modelData}
+            dataSource={data}
             pagination={false}
             rowKey="id"
           />