feat: add cluster detail

2026-01-09 20:51:48 +08:00
parent 7b5ce83cbd
commit afcd3e5693
32 changed files with 255 additions and 139 deletions
@@ -171,7 +171,6 @@ const ClusterCreate: React.FC<{
      if (result) {
        await callback?.(result as ClusterFormData);
        const step = steps[currentStep];
-        step.beforeNext?.();
        setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
      }
    } catch (error) {
@@ -0,0 +1,60 @@
+import WorkerList from '@/pages/resources/components/workers';
+import { useIntl } from '@umijs/max';
+import React from 'react';
+import styled from 'styled-components';
+import FormDrawer from '../_components/form-drawer';
+import { ClusterListItem } from './config/types';
+
+const Content = styled.div`
+  .ant-pagination {
+    position: fixed;
+    bottom: 8px;
+    right: 24px;
+    z-index: 100;
+  }
+  .page-tools {
+    position: sticky;
+    top: 0;
+  }
+`;
+
+interface ClusterWorkersModalProps {
+  cluster: ClusterListItem;
+  open: boolean;
+  onClose: () => void;
+}
+
+const ClusterWorkersModal: React.FC<ClusterWorkersModalProps> = ({
+  open,
+  onClose,
+  cluster
+}) => {
+  const intl = useIntl();
+  return (
+    <FormDrawer
+      title={`${intl.formatMessage({ id: 'clusters.title' })}: ${cluster.name}`}
+      open={open}
+      onCancel={onClose}
+      footer={
+        <div
+          style={{
+            height: 56
+          }}
+        ></div>
+      }
+      width={'calc(100vw - 220px)'}
+    >
+      <Content>
+        <WorkerList
+          cluster={cluster}
+          showAddButton={false}
+          showSelect={false}
+          widths={{ input: 360 }}
+          sourceType="cluster"
+        />
+      </Content>
+    </FormDrawer>
+  );
+};
+
+export default ClusterWorkersModal;
@@ -31,6 +31,7 @@ import {
  WORKER_POOLS_API
 } from './apis';
 import ClusterModal from './cluster-modal';
+import ClusterWorkersModal from './cluster-workers-modal';
 import AddCluster from './components/add-cluster';
 import AddPool from './components/add-pool';
 import {
@@ -48,6 +49,7 @@ import {
 } from './config/types';
 import useAddWorker from './hooks/use-add-worker';
 import useClusterColumns from './hooks/use-cluster-columns';
+import { useClusterWorkers } from './hooks/use-cluster-workers';
 import useCreateCluster from './hooks/use-create-cluster';

 const Clusters: React.FC = () => {
@@ -82,6 +84,11 @@ const Clusters: React.FC = () => {
    useCreateCluster({
      refresh: handleSearch
    });
+  const {
+    clusterWorkersModalStatus,
+    openClusterWorkersModal,
+    closeClusterWorkersModal
+  } = useClusterWorkers();

  const [openAddModal, setOpenAddModal] = useState<{
    open: boolean;
@@ -311,7 +318,7 @@ const Clusters: React.FC = () => {
    );
  };

-  const columns = useClusterColumns(handleSelect);
+  const columns = useClusterColumns(handleSelect, openClusterWorkersModal);

  return (
    <>
@@ -320,7 +327,7 @@ const Clusters: React.FC = () => {
          showSelect={false}
          marginBottom={22}
          marginTop={30}
-          width={{ input: 300 }}
+          widths={{ input: 300 }}
          buttonText={intl.formatMessage({ id: 'clusters.button.add' })}
          rowSelection={rowSelection}
          handleInputChange={handleNameChange}
@@ -416,6 +423,11 @@ const Clusters: React.FC = () => {
        open={clusterModalStatus.open}
        onClose={closeClusterModal}
      ></ClusterModal>
+      <ClusterWorkersModal
+        open={clusterWorkersModalStatus.open}
+        onClose={closeClusterWorkersModal}
+        cluster={clusterWorkersModalStatus.cluster}
+      ></ClusterWorkersModal>
      {AddWorkerModal}
    </>
  );
@@ -27,7 +27,7 @@ const Footer = styled.div`
 type AddWorkerProps = {
  open: boolean;
  provider: ProviderType;
-  title: string;
+  title: React.ReactNode;
  clusterList?: Global.BaseOption<number, ClusterListItem>[];
  clusterLoading?: boolean;
  stepList: StepName[];
@@ -310,6 +310,11 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
      title={title}
      collapsible={collapsible}
      onToggle={onToggle}
+      styles={{
+        root: {
+          background: 'unset'
+        }
+      }}
      deleteBtn={
        showDelete && (
          <Button
@@ -138,7 +138,7 @@ const WorkerPools = () => {
        showSelect={false}
        marginBottom={22}
        marginTop={22}
-        width={{ input: 300 }}
+        widths={{ input: 300 }}
        buttonText={intl.formatMessage({ id: 'clusters.button.addNodePool' })}
        rowSelection={rowSelection}
        handleInputChange={handleNameChange}
@@ -196,7 +196,7 @@ const Credentials: React.FC = () => {
          handleInputChange={handleNameChange}
          handleClickPrimary={handleAddCredential}
          rowSelection={rowSelection}
-          width={{ input: 300 }}
+          widths={{ input: 300 }}
        ></FilterBar>

        <ConfigProvider renderEmpty={renderEmpty}>
@@ -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
      });
@@ -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;
@@ -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
+  };
+};
@@ -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;