feat: add cluster detail

src/pages/cluster-management/hooks/use-add-worker.tsx

@@ -1,7 +1,7 @@
 import AddWorker from '@/pages/cluster-management/components/add-worker';
 import { useIntl } from '@umijs/max';
-import { message } from 'antd';
-import { useMemo, useState } from 'react';
+import { message, Tag } from 'antd';
+import React, { useMemo, useState } from 'react';
 import { StepName } from '../components/add-worker/config';
 import {
   ClusterStatusValueMap,
@@ -20,7 +20,7 @@ const useAddWorker = (props: {
   const [openAddWorker, setOpenAddWorker] = useState<{
     open: boolean;
     provider: ProviderType;
-    title: string;
+    title: React.ReactNode;
     cluster_id: number | null;
   }>({
     open: false,
@@ -56,7 +56,26 @@ const useAddWorker = (props: {
 
       setOpenAddWorker({
         open: true,
-        title: title,
+        title: (
+          <span>
+            {title}
+            {row.name && (
+              <Tag
+                variant="outlined"
+                style={{
+                  fontSize: 12,
+                  fontWeight: 400,
+                  marginLeft: 8,
+                  borderRadius: 4,
+                  borderColor: 'var(--ant-color-border-secondary)',
+                  color: 'var(--ant-color-text-secondary)'
+                }}
+              >
+                {intl.formatMessage({ id: 'clusters.title' })}: {row.name}
+              </Tag>
+            )}
+          </span>
+        ),
         provider: row.provider as ProviderType,
         cluster_id: clusterId
       });

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

@@ -6,7 +6,7 @@ import StatusTag from '@/components/status-tag';
 import { tableSorter } from '@/config/settings';
 import { StarFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Tooltip } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import {
@@ -27,7 +27,8 @@ const setActionsItems = (row: ClusterListItem) => {
 };
 
 const useClusterColumns = (
-  handleSelect: (val: string, record: ClusterListItem) => void
+  handleSelect: (val: string, record: ClusterListItem) => void,
+  onViewWorkers: (record: ClusterListItem) => void
 ): SealColumnProps[] => {
   const intl = useIntl();
 
@@ -40,7 +41,15 @@ const useClusterColumns = (
         span: 3,
         render: (text: string, record: ClusterListItem) => (
           <>
-            <AutoTooltip ghost>{text}</AutoTooltip>
+            <AutoTooltip ghost title={text}>
+              {record.workers > 0 ? (
+                <Typography.Link onClick={() => onViewWorkers(record)}>
+                  {record.name}
+                </Typography.Link>
+              ) : (
+                text
+              )}
+            </AutoTooltip>
             {record.is_default && (
               <Tooltip
                 title={intl.formatMessage({
@@ -127,7 +136,7 @@ const useClusterColumns = (
         )
       }
     ];
-  }, [handleSelect]);
+  }, [handleSelect, onViewWorkers]);
 };
 
 export default useClusterColumns;

src/pages/cluster-management/hooks/use-cluster-workers.ts

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { ClusterListItem } from '../config/types';
+
+export const useClusterWorkers = () => {
+  const [clusterWorkersModalStatus, setClusterWorkersModalStatus] = useState<{
+    open: boolean;
+    cluster: ClusterListItem;
+  }>({
+    open: false,
+    cluster: {} as ClusterListItem
+  });
+
+  const openClusterWorkersModal = (cluster: ClusterListItem) => {
+    setClusterWorkersModalStatus({
+      open: true,
+      cluster
+    });
+  };
+
+  const closeClusterWorkersModal = () => {
+    setClusterWorkersModalStatus({
+      open: false,
+      cluster: {} as ClusterListItem
+    });
+  };
+
+  return {
+    clusterWorkersModalStatus,
+    openClusterWorkersModal,
+    closeClusterWorkersModal
+  };
+};

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

@@ -3,7 +3,6 @@ import DropdownButtons from '@/components/drop-down-buttons';
 import { SealColumnProps } from '@/components/seal-table/types';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import type { SortOrder } from 'antd/es/table/interface';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useMemo } from 'react';
@@ -29,7 +28,7 @@ const actionItems = [
 
 const usePoolsColumns = (
   handleSelect: (val: string, record: ListItem) => void,
-  sortOrder?: SortOrder
+  sortOrder?: string[]
 ): SealColumnProps[] => {
   const intl = useIntl();
 
@@ -83,7 +82,6 @@ const usePoolsColumns = (
                 }}
               />
             }
-            SHOWTITLE
             ghost
             minWidth={20}
           >
@@ -162,7 +160,6 @@ const usePoolsColumns = (
         key: 'created_at',
         span: 4,
         showSorterTootip: false,
-        sortOrder: sortOrder,
         sorter: false,
         ellipsis: {
           showTitle: false
@@ -192,7 +189,7 @@ const usePoolsColumns = (
         )
       }
     ];
-  }, [sortOrder, handleSelect]);
+  }, [handleSelect]);
 };
 
 export default usePoolsColumns;