feat: add cluster detail page

src/pages/cluster-management/clusters.tsx

@@ -15,16 +15,16 @@ import {
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Empty, Table, message } from 'antd';
+import { Table, message } from 'antd';
 import { useState } from 'react';
-import styled from 'styled-components';
 import {
-  createCredential,
-  deleteCredential,
-  queryCredentialList,
-  updateCredential
+  createCluster,
+  deleteCluster,
+  queryClusterList,
+  updateCluster
 } from './apis';
 import AddCluster from './components/add-cluster';
+import ClusterDetailModal from './components/cluster-detail-modal';
 import ClusterItem from './components/cluster-item';
 import { ClusterDataList } from './config';
 import {
@@ -57,39 +57,6 @@ const addActions = [
   }
 ];
 
-const WorkerWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: flex-start;
-  .worker {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    .value {
-      line-height: 1em;
-      color: var(--ant-color-text-secondary);
-    }
-  }
-  .dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 4px;
-    &.ready {
-      background-color: var(--ant-color-success);
-    }
-    &.error {
-      background-color: var(--ant-color-error);
-    }
-
-    &.transition {
-      background-color: var(--ant-blue-5);
-    }
-  }
-`;
-
 const ActionList = [
   {
     key: 'edit',
@@ -139,13 +106,23 @@ const Credentials: React.FC = () => {
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
-    fetchAPI: queryCredentialList,
-    deleteAPI: deleteCredential,
+    fetchAPI: queryClusterList,
+    deleteAPI: deleteCluster,
     contentForDelete: 'users.table.user'
   });
 
   const intl = useIntl();
-  const [openAddWorker, setOpenAddWorker] = useState({
+  const [openClusterDetail, setOpenClusterDetail] = useState<{
+    open: boolean;
+    id: number;
+  }>({
+    open: false,
+    id: 0
+  });
+  const [openAddWorker, setOpenAddWorker] = useState<{
+    open: boolean;
+    token: string;
+  }>({
     open: false,
     token: ''
   });
@@ -202,14 +179,12 @@ const Credentials: React.FC = () => {
     };
     try {
       if (action === PageAction.EDIT) {
-        await updateCredential({
-          data: {
-            ...params,
-            id: currentData?.id
-          }
+        await updateCluster({
+          data: params,
+          id: currentData!.id
         });
       } else {
-        await createCredential({ data: params });
+        await createCluster({ data: params });
       }
       fetchData();
       setOpenAddModal(false);
@@ -244,6 +219,11 @@ const Credentials: React.FC = () => {
       setCurrentData(row);
     } else if (val === 'addPool') {
       handleAddPool(row.provider);
+    } else if (val === 'details') {
+      setOpenClusterDetail({
+        open: true,
+        id: row.id
+      });
     }
   };
 
@@ -251,18 +231,6 @@ const Credentials: React.FC = () => {
     return <ClusterItem data={item} onSelect={handleSelect}></ClusterItem>;
   };
 
-  const renderEmpty = (type?: string) => {
-    if (type !== 'Table') return;
-    if (
-      !dataSource.loading &&
-      dataSource.loadend &&
-      !dataSource.dataList.length
-    ) {
-      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
-    }
-    return <div></div>;
-  };
-
   return (
     <>
       <PageContainer
@@ -318,6 +286,11 @@ const Credentials: React.FC = () => {
         onCancel={() => setOpenAddWorker({ open: false, token: '' })}
         token={openAddWorker.token}
       ></AddWorker>
+      <ClusterDetailModal
+        open={openClusterDetail.open}
+        id={openClusterDetail.id}
+        onClose={() => setOpenClusterDetail({ open: false, id: 0 })}
+      ></ClusterDetailModal>
       <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );

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',

src/pages/cluster-management/credentials.tsx

@@ -34,7 +34,10 @@ import {
   updateCredential
 } from './apis';
 import AddModal from './components/add-credential';
-import { FormData, ListItem } from './config/types';
+import {
+  CredentialFormData as FormData,
+  CredentialListItem as ListItem
+} from './config/types';
 const { Column } = Table;
 
 const ActionList = [
@@ -127,9 +130,9 @@ const Credentials: React.FC = () => {
       if (openModalStatus.action === PageAction.EDIT) {
         await updateCredential({
           data: {
-            ...params,
-            id: currentData?.id
-          }
+            ...params
+          },
+          id: currentData!.id
         });
       } else {
         await createCredential({ data: params });