root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: display allocated vram on instance

Browse Source
This commit is contained in:
jialin
2026-01-12 14:52:59 +08:00
parent fc76822bdf
commit 42943a33fe
5 changed files with 58 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/cluster-management/components/detail/cluster-basic.tsx
+3 -3
View File
@@ -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
+41 -36
View File
@@ -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>