style: cluster table list

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

@@ -45,7 +45,6 @@ const AddCluster: React.FC<AddModalProps> = ({
   };
 
   const handleOk = async (data: FormData) => {
-    console.log('handleOk===', data);
     onOk({
       ...data,
       provider
@@ -59,17 +58,14 @@ const AddCluster: React.FC<AddModalProps> = ({
 
   const renderAddWorkerContent = () => {
     if (provider === ProviderValueMap.Custom) {
-      return <ContainerInstall token="${token}" />;
+      return <ContainerInstall />;
     }
     if (provider === ProviderValueMap.Kubernetes) {
-      return (
-        <RegisterClusterInner
-          data={submissionStatus.data}
-        ></RegisterClusterInner>
-      );
+      return <RegisterClusterInner></RegisterClusterInner>;
     }
     return null;
   };
+
   const modalTitle = useMemo(() => {
     if (submissionStatus.success) {
       return (

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

@@ -1,8 +1,9 @@
 import GaugeChart from '@/components/echarts/gauge';
 import { PageAction } from '@/config';
 import { Col, Row } from 'antd';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { queryClusterDetail } from '../apis';
 import { ProviderValueMap } from '../config';
 import { ClusterListItem, NodePoolListItem } from '../config/types';
 import AddPool from './add-pool';
@@ -16,7 +17,7 @@ const SubTitle = styled.div`
 `;
 
 interface ClusterDetailProps {
-  data: ClusterListItem;
+  data: ClusterListItem | null;
 }
 
 const gaugeConfig = {
@@ -46,8 +47,9 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
     open: false,
     action: PageAction.CREATE,
     title: '',
-    provider: 'digitalocean'
+    provider: ProviderValueMap.DigitalOcean
   });
+  const [detailContent, setDetailContent] = useState<Record<string, any>>({});
 
   // pool action handler
   const handleOnAction = (action: string, record: NodePoolListItem) => {
@@ -56,11 +58,32 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
         open: true,
         action: PageAction.CREATE,
         title: 'Edit Worker Pool',
-        provider: data.provider
+        provider: data!.provider
       });
     }
   };
 
+  const getClusterDetail = async () => {
+    if (!data) {
+      return;
+    }
+    try {
+      const response = await queryClusterDetail({
+        cluster_id: data!.id
+      });
+      setDetailContent(response);
+      // handle response
+    } catch (error) {
+      setDetailContent({});
+    }
+  };
+
+  useEffect(() => {
+    if (data?.id) {
+      getClusterDetail();
+    }
+  }, [data?.id]);
+
   return (
     <div>
       <div className="chart-wrapper">
@@ -99,12 +122,12 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
           </Col>
         </Row>
       </div>
-      {data.provider === ProviderValueMap.DigitalOcean && (
+      {data?.provider === ProviderValueMap.DigitalOcean && (
         <>
           <SubTitle>Worker Pools</SubTitle>
           <WorkerPools
-            provider={data.provider}
-            workerPools={data.worker_pools}
+            provider={data?.provider}
+            workerPools={data?.worker_pools}
             height={show ? 'auto' : 0}
             onAction={handleOnAction}
           />

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

@@ -1,27 +1,19 @@
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import React from 'react';
+import { ClusterListItem } from '../config/types';
 import ClusterDetailContent from './cluster-detail-content';
 
 interface ClusterDetailModalProps {
   open: boolean;
   onClose?: () => void;
-  id: number;
+  currentData: ClusterListItem | null;
 }
 
 const ClusterDetailModal: React.FC<ClusterDetailModalProps> = ({
   open,
   onClose,
-  id: clusterId
+  currentData = {} as ClusterListItem
 }) => {
-  const [data, setData] = React.useState<any>({
-    id: 2,
-    name: 'Digital-Ocean-cluster',
-    provider: 'digitalocean',
-    workers: 3,
-    gpus: 6,
-    status: 'error',
-    deployments: 2
-  });
   const handleOnClose = () => {
     onClose?.();
   };
@@ -29,11 +21,11 @@ const ClusterDetailModal: React.FC<ClusterDetailModalProps> = ({
   return (
     <GSDrawer
       width={'80vw'}
-      title={`Cluster Detail - ${clusterId}`}
+      title={`Cluster Detail - ${currentData?.name}`}
       open={open}
       onClose={handleOnClose}
     >
-      <ClusterDetailContent data={data} />
+      <ClusterDetailContent data={currentData} />
     </GSDrawer>
   );
 };

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

@@ -14,7 +14,7 @@ import {
   ClusterStatusLabelMap,
   ProviderLabelMap,
   ProviderValueMap,
-  poolActionList
+  clusterActionList
 } from '../config';
 import { ClusterListItem as ListItem, NodePoolListItem } from '../config/types';
 import AddPool from './add-pool';
@@ -225,7 +225,7 @@ const CardItem: React.FC<CardProps> = (props) => {
   };
 
   const actions = useMemo(() => {
-    return poolActionList.filter((item) => {
+    return clusterActionList.filter((item) => {
       if (item.provider) {
         return item.provider === data.provider;
       }

src/pages/cluster-management/components/resiter-cluster-inner.tsx

@@ -1,20 +1,7 @@
 import HighlightCode from '@/components/highlight-code';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
 import { generateRegisterCommand } from '../config';
 
-const Title = styled.h3`
-  font-weight: 600;
-  color: var(--ant-color-text);
-  margin-bottom: 12px;
-  margin-top: 12px;
-  font-size: var(--font-size-normal);
-  .ant-tag {
-    color: var(--ant-color-text-secondary);
-    font-weight: 400;
-  }
-`;
-
 type AddModalProps = {
   registrationInfo: {
     token: string;
@@ -32,10 +19,6 @@ const AddCluster: React.FC<AddModalProps> = ({ registrationInfo }) => {
     });
   }, [registrationInfo]);
 
-  const applyCommand = useMemo(() => {
-    return `kubectl apply -f manifest.yaml`;
-  }, []);
-
   return (
     <div>
       <HighlightCode