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 ( = ({ clusterId }) => { size={50} strokeWidth={8} showInfo={true} + strokeColor={strokeColor} format={() => ( @@ -44,6 +47,7 @@ const clusterActionList = [ label: 'resources.button.create', provider: ProviderValueMap.Docker, locale: true, + order: 20, icon: icons.DockerOutlined }, { @@ -51,6 +55,7 @@ const clusterActionList = [ label: 'clusters.button.register', provider: ProviderValueMap.Kubernetes, locale: true, + order: 30, icon: icons.KubernetesOutlined }, { @@ -58,16 +63,20 @@ const clusterActionList = [ label: 'clusters.button.addNodePool', provider: ProviderValueMap.DigitalOcean, locale: true, + order: 40, icon: icons.Catalog1 }, { key: 'isDefault', label: 'clusters.form.setDefault', + locale: true, + order: 50, icon: icons.StarOutlined }, { key: 'delete', label: 'common.button.delete', + order: 999, icon: icons.DeleteOutlined, props: { danger: true @@ -88,11 +97,15 @@ const useClusterColumns = ( // `clusterDetail.linkableName`. Without a plugin we render the // name as plain text (matches the pre-restore behaviour); with one // we use Typography.Link wired to the parent's `onCellClick`. - const nameLinkable: boolean = - !!getGPUStackPlugin()?.clusterDetail?.linkableName; + + const { linkableName: nameLinkable, useGenerateActions } = + getGPUStackPlugin()?.clusterDetail || {}; + + const actionList = + useGenerateActions?.({ actions: clusterActionList }) || clusterActionList; const setActionsItems = (row: ClusterListItem) => { - return clusterActionList.filter((item) => { + return actionList.filter((item: any) => { if (item.provider) { return item.provider === row.provider; } @@ -182,7 +195,7 @@ const useClusterColumns = ( ) }, { - title: intl.formatMessage({ id: 'menu.resources.gpus' }), + title: intl.formatMessage({ id: 'dashboard.totalgpus' }), dataIndex: 'gpus', span: 2, sorter: tableSorter(3), diff --git a/src/pages/gpu-service/instances/config/types.ts b/src/pages/gpu-service/instances/config/types.ts index 87dc6b66..0979cb47 100644 --- a/src/pages/gpu-service/instances/config/types.ts +++ b/src/pages/gpu-service/instances/config/types.ts @@ -111,6 +111,7 @@ export interface ListItem extends FormData { updated_at: string; deleted_at?: string | null; creator_id?: number | null; + clusterId: number; status?: InstanceStatus | null; }