feat: add cluster detail page

src/pages/cluster-management/components/cluster-detail-content.tsx

@@ -16,9 +16,7 @@ const SubTitle = styled.div`
 `;
 
 interface ClusterDetailProps {
-  provider: string;
   data: ClusterListItem;
-  show: boolean;
 }
 
 const gaugeConfig = {
@@ -41,8 +39,9 @@ const gaugeConfig = {
   }
 };
 
-const ClusterDetail: React.FC<ClusterDetailProps> = ({ data, show }) => {
+const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
   const chartHeight = 160;
+  const [show, setShow] = React.useState(false);
   const [addPoolStatus, setAddPoolStatus] = React.useState({
     open: false,
     action: PageAction.CREATE,

src/pages/cluster-management/components/cluster-detail-modal.tsx

@@ -0,0 +1,42 @@
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import React from 'react';
+import ClusterDetailContent from './cluster-detail-content';
+
+interface ClusterDetailModalProps {
+  open: boolean;
+  onClose?: () => void;
+  id: number;
+}
+
+const ClusterDetailModal: React.FC<ClusterDetailModalProps> = ({
+  open,
+  onClose,
+  id: clusterId
+}) => {
+  const [data, setData] = React.useState<any>({
+    id: 1,
+    name: 'kubernetes-cluster',
+    provider: 'kubernetes',
+    clusterType: 'Kubernetes',
+    workers: 2,
+    gpus: 4,
+    status: 'ready',
+    deployments: 1
+  });
+  const handleOnClose = () => {
+    onClose?.();
+  };
+
+  return (
+    <GSDrawer
+      width={800}
+      title={`Cluster Detail - ${clusterId}`}
+      open={open}
+      onClose={handleOnClose}
+    >
+      <ClusterDetailContent data={data} />
+    </GSDrawer>
+  );
+};
+
+export default ClusterDetailModal;

src/pages/cluster-management/components/cluster-item.tsx

@@ -31,9 +31,9 @@ const actionItems = [
     icon: <EditOutlined />
   },
   {
-    key: 'view',
+    key: 'details',
     label: 'common.button.view',
-    icon: <EditOutlined />
+    icon: <IconFont type="icon-detail-info" className="font-size-16" />
   },
   {
     key: 'add_worker',