chore: display allocated vram on instance

src/pages/cluster-management/components/detail/cluster-basic.tsx

@@ -18,9 +18,9 @@ import { useClusterDetail } from '../../services/use-cluster-detail';
 
 const Container = styled.div`
   display: flex;
-  height: 184px;
+  height: 168px;
   .left {
-    padding: 24px 24px;
+    padding: 16px 24px;
     width: 160px;
     display: flex;
     flex-direction: column;
@@ -42,7 +42,7 @@ const Container = styled.div`
   }
   .right {
     flex: 1;
-    padding-block: 24px;
+    padding-block: 16px;
     padding-inline: 0 24px;
   }
 `;

src/pages/cluster-management/components/detail/cluster-system-load.tsx

@@ -1,5 +1,6 @@
 import CardWrapper from '@/components/card-wrapper';
 import { Col, Progress, Row } from 'antd';
+import { round } from 'lodash';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { useClusterSystemLoad } from '../../services/use-cluster-detail';
@@ -22,7 +23,7 @@ const Container = styled.div`
     .value {
       display: flex;
       flex: 1;
-      gap: 8px;
+      gap: 12px;
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
@@ -41,34 +42,56 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
     }
   }, [clusterId]);
 
+  const renderStepsProgress = (percent: number) => {
+    return (
+      <Progress
+        percent={percent}
+        size={{
+          height: 8
+        }}
+        styles={{
+          root: {
+            width: '100%'
+          },
+          track: {
+            flex: 1
+          },
+          body: {
+            display: 'flex',
+            width: '100%'
+          }
+        }}
+        showInfo={false}
+      ></Progress>
+    );
+  };
+
+  console.log('systemLoad', systemLoad);
+
   return (
     <Row gutter={16} style={{ marginTop: 24 }}>
       <Col span={6}>
-        <CardWrapper>
+        <CardWrapper style={{ padding: '16px', height: 120 }}>
           <Container>
             <div className="title">GPU Utilization</div>
             <div className="value-wrapper">
               <div className="value">
-                <span>44%</span>
-                <Progress
-                  percent={44}
-                  strokeWidth={8}
-                  showInfo={false}
-                ></Progress>
+                <span>{`${round(systemLoad.current.gpu, 1)}%`}</span>
+                {renderStepsProgress(round(systemLoad.current.gpu, 1))}
               </div>
             </div>
           </Container>
         </CardWrapper>
       </Col>
       <Col span={6}>
-        <CardWrapper>
+        <CardWrapper style={{ padding: '16px', height: 120 }}>
           <Container>
             <div className="title">VRAM Utilization</div>
             <div className="value-wrapper">
-              <div className="value">44%</div>
+              <div className="value">{`${round(systemLoad.current.vram, 1)}%`}</div>
               <div className="chart">
                 <Progress
-                  percent={44}
+                  percent={round(systemLoad.current.vram, 1)}
                   type="circle"
                   size={50}
                   strokeWidth={8}
@@ -80,51 +103,33 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
         </CardWrapper>
       </Col>
       <Col span={6}>
-        <CardWrapper>
+        <CardWrapper style={{ padding: '16px', height: 120 }}>
           <Container>
             <div className="title">CPU Utilization</div>
             <div className="value-wrapper">
               <div className="value">
-                <span>44%</span>
-                <Progress
-                  percent={44}
-                  steps={10}
-                  size={{
-                    height: 8
-                  }}
-                  styles={{
-                    root: {
-                      width: '100%'
-                    },
-                    track: {
-                      flex: 1
-                    },
-                    body: {
-                      display: 'flex',
-                      width: '100%'
-                    }
-                  }}
-                  showInfo={false}
-                ></Progress>
+                <span>{`${round(systemLoad.current.cpu, 1)}%`}</span>
+                {renderStepsProgress(round(systemLoad.current.cpu, 1))}
               </div>
             </div>
           </Container>
         </CardWrapper>
       </Col>
       <Col span={6}>
-        <CardWrapper>
+        <CardWrapper style={{ padding: '16px', height: 120 }}>
           <Container>
             <div className="title">Memo Utilization</div>
             <div className="value-wrapper">
               <div className="value">
-                <span>44%</span>
+                <span>{`${round(systemLoad.current.ram, 1)}%`}</span>
               </div>
               <div className="chart">
                 <Progress
-                  percent={44}
+                  percent={round(systemLoad.current.ram, 1)}
                   type="circle"
                   size={50}
                   strokeWidth={8}
+                  showInfo={false}
                 ></Progress>
               </div>
             </div>

src/pages/cluster-management/services/use-cluster-detail.ts

@@ -39,6 +39,7 @@ export const useClusterSystemLoad = () => {
     },
     {
       manual: true,
+      cacheKey: 'cluster-system-load',
       onSuccess: (response) => {
         setSystemLoad({
           current: response.system_load?.current,

src/pages/llmodels/components/catalog-item.tsx

@@ -136,8 +136,8 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
               }}
             >
               {data.activated_size
-                ? `${data.size}${data.size_unit}-A${data.activated_size}${data.size_unit}`
-                : `${data.size}${data.size_unit}`}
+                ? `${data.size}${data.size_unit || 'B'}-A${data.activated_size}${data.size_unit || 'B'}`
+                : `${data.size}${data.size_unit || 'B'}`}
             </AutoTooltip>
           )}
         </div>

src/pages/llmodels/components/instance-item.tsx

@@ -16,6 +16,7 @@ import {
   DownloadOutlined,
   HddFilled,
   InfoCircleOutlined,
+  PieChartFilled,
   ThunderboltFilled
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -491,6 +492,16 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
             ? `(${instanceData.backend_version || modelData?.backend_version})`
             : ''}
         </div>
+        <div className="flex-center">
+          <PieChartFilled className="m-r-5" />
+          {intl.formatMessage({ id: 'models.table.vram.allocated' })}:{' '}
+          {convertFileSize(
+            instanceData.computed_resource_claim?.vram
+              ? calcTotalVram(instanceData.computed_resource_claim?.vram)
+              : 0,
+            1
+          )}
+        </div>
       </div>
     );
   }, [