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

fix(style): cluster detail locale

Browse Source
This commit is contained in:
jialin
2026-06-05 22:29:39 +08:00
committed by jialin
parent 76618aa3a1
commit 0cabbeb81c
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/cluster-management/components/detail/cluster-basic.tsx
+9 -3
View File
@@ -143,17 +143,23 @@ const ClusterBasic: React.FC<{ clusterId: number }> = ({ clusterId }) => {
<span className="value">
{clusterDetail.ready_workers}/{clusterDetail.workers}
</span>
<span className="label">Workers</span>
<span className="label">
{intl.formatMessage({ id: 'resources.nodes' })}
</span>
</div>
<div className="item">
<IconFont type="icon-rocket-launch-fill"></IconFont>
<span className="value">{clusterDetail.models}</span>
<span className="label">Deployments</span>
<span className="label">
{intl.formatMessage({ id: 'clusters.table.deployments' })}
</span>
</div>
<div className="item">
<IconFont type="icon-gpu"></IconFont>
<span className="value">{clusterDetail.gpus}</span>
<span className="label">GPUs</span>
<span className="label">
{intl.formatMessage({ id: 'menu.resources.gpus' })}
</span>
</div>
</Resources>
</div>
src/pages/cluster-management/components/detail/cluster-system-load.tsx
+16 -7
View File
@@ -1,4 +1,5 @@
import { CardWrapper } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Col, Progress, Row, Tag } from 'antd';
import { round } from 'lodash';
import React, { useEffect } from 'react';
@@ -38,6 +39,7 @@ const Container = styled.div`
const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
const { systemLoad, fetchClusterSystemLoad } = useClusterSystemLoad();
const intl = useIntl();
useEffect(() => {
if (clusterId) {
@@ -74,14 +76,15 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
};
console.log('systemLoad', systemLoad);
return (
<Row gutter={16} style={{ marginTop: 24 }}>
<Col span={6}>
<CardWrapper style={{ padding: '16px', height: 120 }}>
<Container>
<div className="title">
<span>GPU Utilization</span>
<span>
{intl.formatMessage({ id: 'dashboard.gpuutilization' })}
</span>
</div>
<div className="value-wrapper">
<div className="value">
@@ -101,14 +104,16 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
<CardWrapper style={{ padding: '16px', height: 120 }}>
<Container>
<div className="title">
<span>VRAM Utilization</span>
<span>
{intl.formatMessage({ id: 'dashboard.vramutilization' })}
</span>
</div>
<div className="value-wrapper">
<div className="value">{`${round(systemLoad.current.vram, 1)}%`}</div>
<div className="chart">
{renderStepsProgress(round(systemLoad.current.vram, 1), {
color: 'purple',
text: 'VRAM'
text: intl.formatMessage({ id: 'dashboard.vram' })
})}
</div>
</div>
@@ -119,7 +124,9 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
<CardWrapper style={{ padding: '16px', height: 120 }}>
<Container>
<div className="title">
<span>CPU Utilization</span>
<span>
{intl.formatMessage({ id: 'dashboard.cpuutilization' })}
</span>
</div>
<div className="value-wrapper">
<div className="value">
@@ -139,7 +146,9 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
<CardWrapper style={{ padding: '16px', height: 120 }}>
<Container>
<div className="title">
<span>Memo Utilization</span>
<span>
{intl.formatMessage({ id: 'dashboard.memoryutilization' })}
</span>
</div>
<div className="value-wrapper">
<div className="value">
@@ -148,7 +157,7 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
<div className="chart">
{renderStepsProgress(round(systemLoad.current.ram, 1), {
color: 'green',
text: 'RAM'
text: intl.formatMessage({ id: 'dashboard.memory' })
})}
</div>
</div>