refactor: update scroll modal

src/components/alert-info/index.tsx

@@ -28,6 +28,8 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
                 }
           }
           style={{
+            fontWeight: 400,
+            whiteSpace: 'pre-line',
             textAlign: 'center',
             padding: '2px 5px',
             borderRadius: 'var(--border-radius-base)',

src/components/echarts/config.ts

@@ -151,7 +151,7 @@ export default function useChartConfig() {
     progress: {
       show: true,
       roundCap: false,
-      width: 12
+      width: 10
     },
     pointer: {
       length: '80%',
@@ -163,7 +163,7 @@ export default function useChartConfig() {
     axisLine: {
       roundCap: false,
       lineStyle: {
-        width: 12,
+        width: 10,
         color: [
           [0.5, 'rgba(84, 204, 152, 80%)'],
           [0.8, 'rgba(250, 173, 20, 80%)'],

src/components/echarts/gauge.tsx

@@ -22,13 +22,18 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
     title: titleConfig,
     chartColorMap
   } = useChartConfig();
-  const { value, height, width, labelFormatter, title, color } = props;
+  const { value, height, width, labelFormatter, title, color, gaugeConfig } =
+    props;
   if (!value && value !== 0) {
     return <EmptyData height={height} title={title}></EmptyData>;
   }
 
   const setDataOptions = () => {
     const colorValue = color || strokeColorFunc(value);
+    const combineGaugeConfig = {
+      ...gaugeItemConfig,
+      ...gaugeConfig
+    };
     return {
       title: {
         ...titleConfig,
@@ -38,11 +43,11 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
       },
       series: [
         {
-          ...gaugeItemConfig,
+          ...combineGaugeConfig,
           axisLine: {
-            ...gaugeItemConfig.axisLine,
+            ...combineGaugeConfig.axisLine,
             lineStyle: {
-              ...gaugeItemConfig.axisLine.lineStyle,
+              ...combineGaugeConfig.axisLine.lineStyle,
               color: [
                 [value / 100, colorValue],
                 [1, chartColorMap.gaugeBgColor]

src/components/echarts/types.ts

@@ -13,6 +13,12 @@ export interface ChartProps {
   smooth?: boolean;
   color?: string;
   yAxisName?: string;
+  gaugeConfig?: {
+    radius?: string;
+    center?: string[];
+    startAngle?: number;
+    endAngle?: number;
+  };
 }
 
 export interface AreaChartItemProps {

src/components/scroller-modal/index.tsx

@@ -1,8 +1,9 @@
+import OverlayScroller from '@/components/overlay-scroller';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import { Modal, type ModalProps } from 'antd';
 import React from 'react';
 
-const ScrollerModal = (props: ModalProps) => {
+const ScrollerModal = (props: ModalProps & { maxContentHeight?: number }) => {
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
 
   React.useEffect(() => {
@@ -13,7 +14,34 @@ const ScrollerModal = (props: ModalProps) => {
     }
   }, [props.open]);
 
-  return <Modal {...props} />;
+  return (
+    <Modal
+      {...props}
+      styles={{
+        content: {
+          padding: 0
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          paddingBottom: '0'
+        },
+        body: {
+          padding: '0'
+        },
+        footer: {
+          padding: '12px 24px 24px',
+          margin: '0'
+        }
+      }}
+    >
+      <OverlayScroller
+        style={{ paddingInline: 24, paddingBlockEnd: props.footer ? 0 : 32 }}
+        maxHeight={props.maxContentHeight || 500}
+      >
+        {props.children}
+      </OverlayScroller>
+    </Modal>
+  );
 };
 
 export default ScrollerModal;

src/pages/cluster-management/apis/index.ts

@@ -1,24 +1,45 @@
 import { request } from '@umijs/max';
-import { FormData } from '../config/types';
+import {
+  ClusterFormData,
+  ClusterListItem,
+  CredentialFormData,
+  CredentialListItem,
+  NodePoolFormData,
+  NodePoolListItem
+} from '../config/types';
 
 export const CREDENTIALS_API = '/credentials';
 
+export const CLUSTERS_API = '/clusters';
+
+export const WORKER_POOLS_API = '/worker-pools';
+
+export const CLUSTER_TOKEN = 'registration_token';
+
+// ===================== Credentials =====================
+
 export async function queryCredentialList(params: Global.SearchParams) {
-  // return request<Global.PageResponse<ListItem>>(`${CREDENTIALS_API}`, {
-  //   method: 'GET',
-  //   params
-  // });
+  return request<Global.PageResponse<CredentialListItem>>(
+    `${CREDENTIALS_API}`,
+    {
+      method: 'GET',
+      params
+    }
+  );
 }
 
-export async function createCredential(params: { data: FormData }) {
+export async function createCredential(params: { data: CredentialFormData }) {
   return request(`${CREDENTIALS_API}`, {
     method: 'POST',
     data: params.data
   });
 }
 
-export async function updateCredential(params: { data: FormData }) {
-  return request(`${CREDENTIALS_API}/${params.data.id}`, {
+export async function updateCredential(params: {
+  id: number;
+  data: CredentialFormData;
+}) {
+  return request(`${CREDENTIALS_API}/${params.id}`, {
     method: 'PUT',
     data: params.data
   });
@@ -29,3 +50,88 @@ export async function deleteCredential(id: number) {
     method: 'DELETE'
   });
 }
+
+// ===================== Cluster =====================
+
+export async function queryClusterList(params: Global.SearchParams) {
+  return request<Global.PageResponse<ClusterListItem>>(`${CLUSTERS_API}`, {
+    method: 'GET',
+    params
+  });
+}
+
+export async function createCluster(params: { data: ClusterFormData }) {
+  return request(`${CLUSTERS_API}`, {
+    method: 'POST',
+    data: params.data
+  });
+}
+
+export async function updateCluster(params: {
+  id: number;
+  data: ClusterFormData;
+}) {
+  return request(`${CLUSTERS_API}/${params.id}`, {
+    method: 'PUT',
+    data: params.data
+  });
+}
+
+export async function deleteCluster(id: number) {
+  return request(`${CLUSTERS_API}/${id}`, {
+    method: 'DELETE'
+  });
+}
+
+export async function queryClusterDetail(id: number) {
+  return request(`${CLUSTERS_API}/${id}`, {
+    method: 'GET'
+  });
+}
+
+export async function queryClusterToken(id: number) {
+  return request(`${CLUSTERS_API}/${id}/${CLUSTER_TOKEN}`, {
+    method: 'GET'
+  });
+}
+
+// ===================== Worker Pools =====================
+
+export async function queryWorkerPools(
+  clusterId: number,
+  params?: Global.SearchParams
+) {
+  return request<Global.PageResponse<NodePoolListItem>>(
+    `${CLUSTERS_API}/${clusterId}/${WORKER_POOLS_API}`,
+    {
+      method: 'GET',
+      params
+    }
+  );
+}
+
+export async function createWorkerPool(
+  clusterId: number,
+  params: { data: NodePoolFormData }
+) {
+  return request(`${CLUSTERS_API}/${clusterId}/${WORKER_POOLS_API}`, {
+    method: 'POST',
+    data: params.data
+  });
+}
+
+export async function updateWorkerPool(
+  clusterId: number,
+  params: { id: number; data: NodePoolFormData }
+) {
+  return request(`/${WORKER_POOLS_API}/${params.id}`, {
+    method: 'PUT',
+    data: params.data
+  });
+}
+
+export async function deleteWorkerPool(clusterId: number, id: number) {
+  return request(`/${WORKER_POOLS_API}/${id}`, {
+    method: 'DELETE'
+  });
+}

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

@@ -59,7 +59,6 @@ const AddCluster: React.FC<AddModalProps> = ({
       maskClosable={false}
       keyboard={false}
       width={600}
-      styles={{}}
       footer={
         <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
       }

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

@@ -45,7 +45,6 @@ const AddModal: React.FC<AddModalProps> = ({
       maskClosable={false}
       keyboard={false}
       width={600}
-      styles={{}}
       footer={
         <ModalFooter
           onOk={handleSumit}

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

@@ -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>
   );
 };
 

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

@@ -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}
             />
           </>
         )}

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

@@ -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>
       }

src/pages/cluster-management/components/worker-pools.tsx

@@ -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>
   );
 };

src/pages/cluster-management/config/types.ts

@@ -1,4 +1,4 @@
-export interface FormData {
+export interface CredentialFormData {
   name: string;
   provider: string;
   access_key: string;
@@ -7,7 +7,7 @@ export interface FormData {
   id?: number;
 }
 
-export interface ListItem {
+export interface CredentialListItem {
   id: number;
   name: string;
   provider: string;

src/pages/dashboard/components/usage-inner/export-data.tsx

@@ -150,21 +150,6 @@ const ExportData: React.FC<{
       style={{
         top: '10%'
       }}
-      styles={{
-        content: {
-          padding: '0px'
-        },
-        header: {
-          padding: 'var(--ant-modal-content-padding)',
-          paddingBottom: '0'
-        },
-        body: {
-          padding: '0 var(--ant-modal-content-padding)'
-        },
-        footer: {
-          padding: '0 var(--ant-modal-content-padding)'
-        }
-      }}
       footer={
         <ModalFooter
           onOk={handleSubmit}

src/pages/resources/components/add-worker.tsx

@@ -74,11 +74,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       style={{
         top: 100
       }}
-      styles={{
-        body: {
-          minHeight: 450
-        }
-      }}
+      maxContentHeight={450}
       footer={null}
     >
       <ContainerInstall token={token} />

src/pages/resources/components/update-labels.tsx

@@ -2,7 +2,6 @@ import LabelSelector from '@/components/label-selector';
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
-import SimpleOverlay from '@/components/simple-overlay';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -48,90 +47,66 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
       maskClosable={false}
       keyboard={false}
       width={600}
-      styles={{
-        content: {
-          padding: '0px'
-        },
-        header: {
-          padding: 'var(--ant-modal-content-padding)',
-          paddingBottom: '0'
-        },
-        body: {
-          padding: '0'
-        },
-        footer: {
-          padding: '0 var(--ant-modal-content-padding)'
-        }
-      }}
+      maxContentHeight={550}
       footer={
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }
     >
-      <SimpleOverlay
-        style={{
-          maxHeight: '550px'
+      <Form
+        name="deployModel"
+        form={form}
+        onFinish={onOk}
+        preserve={false}
+        clearOnDestroy={true}
+        initialValues={{
+          name: data.name,
+          labels: data.labels
         }}
       >
-        <Form
-          name="deployModel"
-          form={form}
-          onFinish={onOk}
-          preserve={false}
-          clearOnDestroy={true}
-          initialValues={{
-            name: data.name,
-            labels: data.labels
-          }}
-          style={{
-            padding: 'var(--ant-modal-content-padding)',
-            paddingBlock: 0
-          }}
-        >
-          <Form.Item<FormData> name="name">
-            <SealInput.Input
-              label={intl.formatMessage({
-                id: 'common.table.name'
-              })}
-              disabled
-            />
-          </Form.Item>
-          <Form.Item<FormData>
-            name="labels"
-            rules={[
-              () => ({
-                validator(rule, value) {
-                  if (_.keys(value).length > 0) {
-                    if (_.some(_.keys(value), (k: string) => !value[k])) {
-                      return Promise.reject(
-                        intl.formatMessage(
-                          {
-                            id: 'common.validate.value'
-                          },
-                          {
-                            name: intl.formatMessage({
-                              id: 'resources.form.label'
-                            })
-                          }
-                        )
-                      );
-                    }
+        <Form.Item<FormData> name="name">
+          <SealInput.Input
+            label={intl.formatMessage({
+              id: 'common.table.name'
+            })}
+            disabled
+          />
+        </Form.Item>
+        <Form.Item<FormData>
+          name="labels"
+          rules={[
+            () => ({
+              validator(rule, value) {
+                if (_.keys(value).length > 0) {
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
+                    return Promise.reject(
+                      intl.formatMessage(
+                        {
+                          id: 'common.validate.value'
+                        },
+                        {
+                          name: intl.formatMessage({
+                            id: 'resources.form.label'
+                          })
+                        }
+                      )
+                    );
                   }
-                  return Promise.resolve();
                 }
-              })
-            ]}
-          >
-            <LabelSelector
-              label={intl.formatMessage({
-                id: 'resources.table.labels'
-              })}
-              labels={labels}
-              btnText="common.button.addLabel"
-              onChange={handleLabelsChange}
-            ></LabelSelector>
-          </Form.Item>
-        </Form>
-      </SimpleOverlay>
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <LabelSelector
+            label={intl.formatMessage({
+              id: 'resources.table.labels'
+            })}
+            labels={labels}
+            btnText="common.button.addLabel"
+            onChange={handleLabelsChange}
+          ></LabelSelector>
+        </Form.Item>
+      </Form>
     </ScrollerModal>
   );
 };

src/pages/users/components/add-modal.tsx

@@ -63,7 +63,6 @@ const AddModal: React.FC<AddModalProps> = ({
       maskClosable={false}
       keyboard={false}
       width={600}
-      styles={{}}
       footer={
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }