fix: resource topology ux

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: <IconFont type="icon-resources" />,
             children: (
               <WorkerList clusterId={Number(id)} source="clusterDetail" />
@@ -68,7 +68,7 @@ const ClusterDetailModal = () => {
           },
           {
             key: 'gpus',
-            label: `GPUs`,
+            label: intl.formatMessage({ id: 'menu.resources.gpus' }),
             icon: <IconFont type="icon-gpu1" />,
             children: <GPUList clusterId={Number(id)} source="clusterDetail" />
           },

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 }) => {
                 )}
               </Title>
             }
-            layout="vertical"
             items={items}
           />
           <Resources>

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 (
       <Progress
         percent={percent}
@@ -58,6 +69,7 @@ const ClusterSystemLoad: React.FC<{ clusterId: number }> = ({ clusterId }) => {
         size={50}
         strokeWidth={8}
         showInfo={true}
+        strokeColor={strokeColor}
         format={() => (
           <Tag
             color={tag?.color || 'blue'}

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -24,15 +24,18 @@ import {
   ProviderValueMap
 } from '../config';
 import { ClusterListItem } from '../config/types';
+
 const clusterActionList = [
   {
     key: 'edit',
     label: 'common.button.edit',
+    order: 0,
     icon: icons.EditOutlined
   },
   {
     label: 'resources.metrics.details',
     key: 'metrics',
+    order: 10,
     icon: (
       <span className="flex-center">
         <GrafanaIcon style={{ width: 14, height: 14 }}></GrafanaIcon>
@@ -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),

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;
 }