refactor: update scroll modal

2025-09-16 11:26:17 +08:00
parent 29b74f85c5
commit 55b0a20a4a
17 changed files with 340 additions and 163 deletions
@@ -59,7 +59,6 @@ const AddCluster: React.FC<AddModalProps> = ({
      maskClosable={false}
      keyboard={false}
      width={600}
-      styles={{}}
      footer={
        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
      }
@@ -45,7 +45,6 @@ const AddModal: React.FC<AddModalProps> = ({
      maskClosable={false}
      keyboard={false}
      width={600}
-      styles={{}}
      footer={
        <ModalFooter
          onOk={handleSumit}
@@ -1,12 +1,11 @@
 import LabelSelector from '@/components/label-selector';
 import ModalFooter from '@/components/modal-footer';
-import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import ScrollerModal from '@/components/scroller-modal';
 import SealInputNumber from '@/components/seal-form/input-number';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageActionType } from '@/config/types';
-import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Form } from 'antd';
+import { Form } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 import {
@@ -45,23 +44,15 @@ const AddCluster: React.FC<AddModalProps> = ({
  };

  return (
-    <GSDrawer
-      title={
-        <div className="flex-between flex-center">
-          <span>{title}</span>
-          <Button type="text" size="small" onClick={handleCancel}>
-            <CloseOutlined></CloseOutlined>
-          </Button>
-        </div>
-      }
+    <ScrollerModal
+      title={title}
      open={open}
-      onClose={onCancel}
+      onCancel={handleCancel}
      destroyOnClose={true}
-      closeIcon={false}
+      closeIcon={true}
      maskClosable={false}
      keyboard={false}
      width={600}
-      styles={{}}
      footer={
        <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
      }
@@ -179,7 +170,7 @@ const AddCluster: React.FC<AddModalProps> = ({
          ></LabelSelector>
        </Form.Item>
      </Form>
-    </GSDrawer>
+    </ScrollerModal>
  );
 };

@@ -17,7 +17,7 @@ import {
  ProviderLabelMap,
  ProviderValueMap
 } from '../config';
-import { ClusterListItem as ListItem } from '../config/types';
+import { ClusterListItem as ListItem, NodePoolListItem } from '../config/types';
 import WorkerPools from './worker-pools';

 const CollapseTitle = styled.div`
@@ -43,6 +43,7 @@ const Content = styled.div`
 const CardWrapper = styled(ACard)`
  text-align: center;
  box-shadow: none;
+  flex: 1;
  .ant-card {
    box-shadow: none;
  }
@@ -64,6 +65,12 @@ const CardWrapper = styled(ACard)`
  }
 `;

+const CardBox = styled.div`
+  display: flex;
+  gap: 16px;
+  flex: 0.5;
+`;
+
 const actionItems = [
  {
    key: 'edit',
@@ -137,15 +144,36 @@ interface CardProps {
  onSelect?: (key: string, row: ListItem) => void;
 }

+const gaugeConfig = {
+  radius: '100%',
+  progress: {
+    show: true,
+    roundCap: false,
+    width: 8
+  },
+  axisLine: {
+    roundCap: false,
+    lineStyle: {
+      width: 8,
+      color: [
+        [0.5, 'rgba(84, 204, 152, 80%)'],
+        [0.8, 'rgba(250, 173, 20, 80%)'],
+        [1, 'rgba(255, 77, 79, 80%)']
+      ]
+    }
+  }
+};
+
 const CardItem: React.FC<CardProps> = (props) => {
  const { data, onSelect } = props;
  const [show, setShow] = React.useState(false);

  const handleOnSelect = (key: string) => {
-    console.log('Selected action:', key);
    onSelect?.(key, data);
  };

+  const handleOnAction = (action: string, record: NodePoolListItem) => {};
+
  const actions = useMemo(() => {
    return actionItems.filter((item) => {
      if (item.provider) {
@@ -179,7 +207,7 @@ const CardItem: React.FC<CardProps> = (props) => {
          </span>
        </div>
        <Content>
-          <div className="flex gap-16">
+          <CardBox>
            <CardWrapper bordered={false}>
              <div className="label">Workers</div>
              <div className="value">1</div>
@@ -192,20 +220,40 @@ const CardItem: React.FC<CardProps> = (props) => {
              <div className="label">Deployments</div>
              <div className="value">2</div>
            </CardWrapper>
-          </div>
+          </CardBox>
          <div className="chart-wrapper">
            <Row gutter={16} style={{ width: '100%' }}>
              <Col span={6}>
-                <GaugeChart title="GPU Utilization" value={85} height={160} />
+                <GaugeChart
+                  title="GPU Utilization"
+                  value={85}
+                  height={160}
+                  gaugeConfig={gaugeConfig}
+                />
              </Col>
              <Col span={6}>
-                <GaugeChart title="CPU Utilization" value={50} height={160} />
+                <GaugeChart
+                  title="CPU Utilization"
+                  value={50}
+                  height={160}
+                  gaugeConfig={gaugeConfig}
+                />
              </Col>
              <Col span={6}>
-                <GaugeChart title="RAM Utilization" value={70} height={160} />
+                <GaugeChart
+                  title="RAM Utilization"
+                  value={70}
+                  height={160}
+                  gaugeConfig={gaugeConfig}
+                />
              </Col>
              <Col span={6}>
-                <GaugeChart title="VRAM Utilization" value={60} height={160} />
+                <GaugeChart
+                  title="VRAM Utilization"
+                  value={60}
+                  height={160}
+                  gaugeConfig={gaugeConfig}
+                />
              </Col>
            </Row>
          </div>
@@ -224,8 +272,9 @@ const CardItem: React.FC<CardProps> = (props) => {
            </CollapseTitle>
            <WorkerPools
              provider={data.provider}
-              dataSource={data.worker_pools}
+              workerPools={data.worker_pools}
              height={show ? 'auto' : 0}
+              onAction={handleOnAction}
            />
          </>
        )}
@@ -2,9 +2,8 @@ import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal/index';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageActionType } from '@/config/types';
-import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Form } from 'antd';
+import { Form } from 'antd';
 import React from 'react';
 import {
  ClusterFormData as FormData,
@@ -45,22 +44,14 @@ const AddCluster: React.FC<AddModalProps> = ({

  return (
    <ScrollerModal
-      title={
-        <div className="flex-between flex-center">
-          <span>{title}</span>
-          <Button type="text" size="small" onClick={handleCancel}>
-            <CloseOutlined></CloseOutlined>
-          </Button>
-        </div>
-      }
+      title={title}
      open={open}
-      onClose={onCancel}
+      onCancel={handleCancel}
      destroyOnClose={true}
-      closeIcon={false}
+      closeIcon={true}
      maskClosable={false}
      keyboard={false}
      width={600}
-      styles={{}}
      footer={
        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
      }
@@ -1,6 +1,11 @@
+import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
+import useTableFetch from '@/hooks/use-table-fetch';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import { Table } from 'antd';
+import { useMemo } from 'react';
+import { WORKER_POOLS_API, deleteWorkerPool, queryWorkerPools } from '../apis';
+import { NodePoolListItem as ListItem } from '../config/types';

 const actionItems = [
  {
@@ -20,21 +25,50 @@ const actionItems = [
 ];

 interface WorkerPoolsProps {
-  dataSource: any[];
+  workerPools: ListItem[];
  loading?: boolean;
  provider: string;
  height?: string | number;
-  onAction?: (action: string, record: any) => void;
+  onAction?: (action: string, record: ListItem) => void;
 }

 const WorkerPools: React.FC<WorkerPoolsProps> = ({
-  dataSource,
+  workerPools,
  loading = false,
  provider,
  height = 'auto',
  onAction
 }) => {
-  // dataindex: type, replicas, Batchsize, GPU, Memory, CPU, Storage, CreateTime, Operations
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    modalRef,
+    fetchData,
+    handleDelete,
+    handleDeleteBatch,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange,
+    handleQueryChange
+  } = useTableFetch<ListItem>({
+    fetchAPI: queryWorkerPools,
+    deleteAPI: deleteWorkerPool,
+    API: WORKER_POOLS_API,
+    watch: false,
+    contentForDelete: 'resources.modelfiles.modelfile'
+  });
+
+  const onSelect = (key: string, record: ListItem) => {
+    if (key === 'delete') {
+      handleDelete({ ...record, name: record.instance_type });
+    }
+    if (key === 'edit') {
+      onAction?.(key, record);
+    }
+  };
+
  const columns = [
    {
      title: 'Type',
@@ -79,10 +113,10 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
    {
      title: 'Operations',
      key: 'operations',
-      render: (_, record) => (
+      render: (text: string, record: ListItem) => (
        <DropdownButtons
          items={actionItems}
-          onSelect={(key) => onAction?.(key, record)}
+          onSelect={(key) => onSelect?.(key, record)}
        />
      )
    }
@@ -90,6 +124,7 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({

  // mock dataSource
  const mockData = Array.from({ length: 3 }, (_, index) => ({
+    id: index + 1,
    key: index,
    type: `Type ${index + 1}`,
    replicas: Math.floor(Math.random() * 10) + 1,
@@ -101,15 +136,26 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
    createTime: new Date().toLocaleDateString()
  }));

+  const dataList = useMemo(() => {
+    if (workerPools && workerPools.length > 0) {
+      return workerPools;
+    }
+    if (dataSource.dataList && dataSource.dataList.length > 0) {
+      return dataSource.dataList;
+    }
+    return mockData;
+  }, [workerPools, dataSource.dataList]);
+
  return (
    <div style={{ height: height, overflow: 'hidden' }}>
      <Table
-        dataSource={dataSource || mockData}
+        dataSource={dataList}
        columns={columns}
        loading={loading}
        pagination={false}
        rowKey="id"
      />
+      <DeleteModal ref={modalRef}></DeleteModal>
    </div>
  );
 };