diff --git a/src/pages/cluster-management/cluster-detail.tsx b/src/pages/cluster-management/cluster-detail.tsx
index b12f6549..11045e1f 100644
--- a/src/pages/cluster-management/cluster-detail.tsx
+++ b/src/pages/cluster-management/cluster-detail.tsx
@@ -60,7 +60,7 @@ const ClusterDetailModal = () => {
items={[
{
key: 'workers',
- label: `Workers`,
+ label: intl.formatMessage({ id: 'resources.nodes' }),
icon: ,
children: (
@@ -68,7 +68,7 @@ const ClusterDetailModal = () => {
},
{
key: 'gpus',
- label: `GPUs`,
+ label: intl.formatMessage({ id: 'menu.resources.gpus' }),
icon: ,
children:
},
diff --git a/src/pages/cluster-management/components/detail/cluster-basic.tsx b/src/pages/cluster-management/components/detail/cluster-basic.tsx
index aeba0364..97d2b021 100644
--- a/src/pages/cluster-management/components/detail/cluster-basic.tsx
+++ b/src/pages/cluster-management/components/detail/cluster-basic.tsx
@@ -16,9 +16,9 @@ import { useClusterDetail } from '../../services/use-cluster-detail';
const Container = styled.div`
display: flex;
- height: 168px;
+ height: 146px;
.left {
- padding: 16px 24px;
+ padding: 16px 0px;
width: 124px;
display: flex;
flex-direction: column;
@@ -56,7 +56,7 @@ const Resources = styled.div`
gap: 24px;
align-items: center;
line-height: 22px;
- margin-top: 16px;
+ margin-top: 24px;
.item {
display: flex;
align-items: center;
@@ -134,7 +134,6 @@ const ClusterBasic: React.FC<{ clusterId: number }> = ({ clusterId }) => {
)}
}
- layout="vertical"
items={items}
/>
diff --git a/src/pages/cluster-management/components/detail/cluster-system-load.tsx b/src/pages/cluster-management/components/detail/cluster-system-load.tsx
index 7fdf83a7..729ab45c 100644
--- a/src/pages/cluster-management/components/detail/cluster-system-load.tsx
+++ b/src/pages/cluster-management/components/detail/cluster-system-load.tsx
@@ -47,10 +47,21 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
}
}, [clusterId]);
+ const generateStrokeColor = (percent: number) => {
+ if (percent <= 50) {
+ return 'var(--ant-color-success)';
+ }
+ if (percent <= 80) {
+ return 'var(--ant-color-warning)';
+ }
+ return 'var(--ant-color-error)';
+ };
+
const renderStepsProgress = (
percent: number,
tag: { color: string; text: string }
) => {
+ const strokeColor = generateStrokeColor(percent);
return (