fix: cluster apis

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

@@ -3,6 +3,7 @@ import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { useEffect } from 'react';
@@ -32,6 +33,7 @@ const AddModal: React.FC<AddModalProps> = ({
 }) => {
   const [form] = Form.useForm();
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
 
   const handleSumit = () => {
     form.submit();
@@ -93,12 +95,12 @@ const AddModal: React.FC<AddModalProps> = ({
               rules={[
                 {
                   required: action === PageAction.CREATE,
-                  message: 'Access Token is required'
+                  message: getRuleMessage('input', 'clusters.credential.token')
                 }
               ]}
             >
               <SealInput.Password
-                label="Access Token"
+                label={intl.formatMessage({ id: 'clusters.credential.token' })}
                 required={action === PageAction.CREATE}
               ></SealInput.Password>
             </Form.Item>

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

@@ -3,7 +3,9 @@ import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import SealInputNumber from '@/components/seal-form/input-number';
 import SealInput from '@/components/seal-form/seal-input';
+import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -33,6 +35,7 @@ const AddCluster: React.FC<AddModalProps> = ({
 }) => {
   const [form] = Form.useForm();
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
 
   const handleSumit = () => {
     form.submit();
@@ -97,17 +100,17 @@ const AddCluster: React.FC<AddModalProps> = ({
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: intl.formatMessage({ id: 'common.table.name' })
-                }
+              message: getRuleMessage(
+                'input',
+                'clusters.workerpool.instanceType'
               )
             }
           ]}
         >
           <SealInput.Input
-            label={intl.formatMessage({ id: 'common.table.name' })}
+            label={intl.formatMessage({
+              id: 'clusters.workerpool.instanceType'
+            })}
             required
           ></SealInput.Input>
         </Form.Item>
@@ -116,49 +119,45 @@ const AddCluster: React.FC<AddModalProps> = ({
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Replicas'
-                }
-              )
+              message: getRuleMessage('input', 'clusters.workerpool.replicas')
             }
           ]}
         >
-          <SealInputNumber label="Replicas" required></SealInputNumber>
+          <SealInputNumber
+            label={intl.formatMessage({ id: 'clusters.workerpool.replicas' })}
+            required
+          ></SealInputNumber>
         </Form.Item>
         <Form.Item<FormData>
           name="batch_size"
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Batch Size'
-                }
-              )
+              message: getRuleMessage('input', 'clusters.workerpool.batchSize')
             }
           ]}
         >
-          <SealInputNumber label="Batch Size" required></SealInputNumber>
+          <SealInputNumber
+            label={intl.formatMessage({ id: 'clusters.workerpool.batchSize' })}
+            required
+          ></SealInputNumber>
         </Form.Item>
         <Form.Item<FormData>
           name="os_image"
           rules={[
             {
               required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'OS Image'
-                }
-              )
+              message: getRuleMessage('input', 'clusters.workerpool.osImage')
             }
           ]}
         >
-          <SealInput.Input label={'OS Image'} required></SealInput.Input>
+          <SealInput.Input
+            disabled={action === PageAction.EDIT}
+            label={intl.formatMessage({ id: 'clusters.workerpool.osImage' })}
+            required
+          ></SealInput.Input>
         </Form.Item>
+
         <Form.Item<FormData>
           name="labels"
           rules={[
@@ -184,9 +183,9 @@ const AddCluster: React.FC<AddModalProps> = ({
           ]}
         >
           <LabelSelector
-            label="Labels"
+            label={intl.formatMessage({ id: 'resources.table.labels' })}
             labels={form.getFieldValue('labels') || {}}
-            btnText="Add Label"
+            btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
           ></LabelSelector>
         </Form.Item>
         <Form.Item<FormData>

src/pages/cluster-management/components/cloud-provider-form.tsx

@@ -1,4 +1,5 @@
 import SealSelect from '@/components/seal-form/seal-select';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -11,6 +12,7 @@ type OptionData = {
   label: string;
   datacenter: string;
   value: string;
+  icon: string;
 };
 
 const OptionItem = styled.div`
@@ -30,6 +32,9 @@ const OptionItem = styled.div`
   .value {
     color: var(--ant-color-text-secondary);
   }
+  .icon {
+    margin-right: 8px;
+  }
 `;
 
 interface CloudProviderProps {
@@ -50,6 +55,7 @@ const optionRender = (
 
   return (
     <OptionItem className="flex-center">
+      <span className="icon">{data.icon}</span>
       <span className="label">{data.label}</span> <span className="dot"></span>
       <span className="datacenter">{data.datacenter}</span>{' '}
       <span className="dot"></span>{' '}
@@ -65,6 +71,7 @@ const labelRender = (props: {
   const data = regionList.find((item) => item.value === props.value);
   return (
     <OptionItem className="flex-center">
+      <span className="icon">{data?.icon}</span>
       <span className="label">{data?.label}</span> <span className="dot"></span>
       <span className="datacenter">{data?.datacenter}</span>{' '}
       <span className="dot"></span>
@@ -76,6 +83,7 @@ const labelRender = (props: {
 const CloudProvider: React.FC<CloudProviderProps> = (props) => {
   const { credentialList } = props;
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
 
   return (
     <>
@@ -94,7 +102,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
         ]}
       >
         <SealSelect
-          label="Credential"
+          label={intl.formatMessage({ id: 'clusters.credential.title' })}
           required
           options={credentialList}
         ></SealSelect>
@@ -104,17 +112,12 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
         rules={[
           {
             required: true,
-            message: intl.formatMessage(
-              { id: 'common.form.rule.input' },
-              {
-                name: 'Region'
-              }
-            )
+            message: getRuleMessage('input', 'clusters.workerpool.region')
           }
         ]}
       >
         <SealSelect
-          label="Region"
+          label={intl.formatMessage({ id: 'clusters.workerpool.region' })}
           required
           options={regionList}
           labelRender={labelRender}

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

@@ -1,7 +1,7 @@
 import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import React from 'react';
 import { ClusterListItem } from '../config/types';
-import ClusterDetailContent from './cluster-detail-content';
+import ClusterDetailContent from './cluster-metrics';
 
 interface ClusterDetailModalProps {
   open: boolean;

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

@@ -1,15 +1,13 @@
 import GaugeChart from '@/components/echarts/gauge';
 import Card from '@/components/templates/card';
-import { PageAction } from '@/config';
+import { useSearchParams } from '@umijs/max';
 import { Col, Row } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { queryClusterDetail } from '../apis';
-import { ProviderValueMap } from '../config';
-import { ClusterListItem, NodePoolListItem } from '../config/types';
+import { ClusterListItem } from '../config/types';
 import TrendChart from './trend-chart';
-import WorkerPools from './worker-pools';
 
 const metricsMap = {
   cpu: {
@@ -81,17 +79,11 @@ const formatValue = (value: number) => {
 
 const CardHeight = 336;
 
-const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
+const ClusterMetrics = () => {
   const chartHeight = 160;
-  const [show, setShow] = React.useState(false);
-  const [addPoolStatus, setAddPoolStatus] = React.useState({
-    open: false,
-    action: PageAction.CREATE,
-    title: '',
-    provider: ProviderValueMap.DigitalOcean,
-    currentData: null as NodePoolListItem | null,
-    clusterId: 0
-  });
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get('id');
+  const provider = searchParams.get('provider');
   const [detailContent, setDetailContent] = useState<{
     current: {
       cpu: number;
@@ -111,12 +103,12 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
   });
 
   const getClusterDetail = async () => {
-    if (!data) {
+    if (!id) {
       return;
     }
     try {
       const response = await queryClusterDetail({
-        cluster_id: data!.id
+        cluster_id: id
       });
       setDetailContent({
         current: response.system_load?.current,
@@ -137,10 +129,10 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
   };
 
   useEffect(() => {
-    if (data?.id) {
+    if (id) {
       getClusterDetail();
     }
-  }, [data?.id]);
+  }, [id]);
 
   return (
     <div>
@@ -225,13 +217,8 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
           </Card>
         </Col>
       </Row>
-      {data?.provider === ProviderValueMap.DigitalOcean && (
-        <>
-          <WorkerPools clusterData={data} height={'auto'} />
-        </>
-      )}
     </div>
   );
 };
 
-export default ClusterDetail;
+export default ClusterMetrics;

src/pages/cluster-management/components/trend-chart.tsx

@@ -63,6 +63,7 @@ const TrendChart: React.FC<TrendChartProps> = ({
       <LineChart
         height={320}
         title={title}
+        showArea={false}
         seriesData={generateData.seriesData}
         legendData={generateData.legendData}
         xAxisData={generateData.xAxisData}

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

@@ -1,12 +1,10 @@
 import DeleteModal from '@/components/delete-modal';
-import DropdownButtons from '@/components/drop-down-buttons';
-import LabelsCell from '@/components/label-cell';
+import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
+import { useIntl, useSearchParams } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
 import { message, Table } from 'antd';
-import dayjs from 'dayjs';
 import { useState } from 'react';
 import styled from 'styled-components';
 import {
@@ -18,10 +16,10 @@ import {
 } from '../apis';
 import { ProviderValueMap } from '../config';
 import {
-  ClusterListItem,
   NodePoolListItem as ListItem,
   NodePoolFormData
 } from '../config/types';
+import usePoolsColumns from '../hooks/use-pools-columns';
 import AddPool from './add-pool';
 
 const SubTitle = styled.div`
@@ -31,39 +29,14 @@ const SubTitle = styled.div`
   margin-block: 24px 16px;
 `;
 
-const actionItems = [
-  {
-    key: 'edit',
-    label: 'common.button.edit',
-    icon: <EditOutlined />
-  },
-
-  {
-    key: 'delete',
-    label: 'common.button.delete',
-    icon: <DeleteOutlined />,
-    props: {
-      danger: true
-    }
-  }
-];
-
-interface WorkerPoolsProps {
-  loading?: boolean;
-  height?: string | number;
-  clusterData: ClusterListItem | null;
-}
-
-const WorkerPools: React.FC<WorkerPoolsProps> = ({
-  loading = false,
-  clusterData,
-  height = 'auto'
-}) => {
+const WorkerPools = () => {
+  const [searchParams] = useSearchParams();
   const {
     dataSource,
     rowSelection,
     queryParams,
     modalRef,
+    sortOrder,
     fetchData,
     handleDelete,
     handleDeleteBatch,
@@ -77,9 +50,9 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     deleteAPI: deleteWorkerPool,
     API: WORKER_POOLS_API,
     watch: false,
-    contentForDelete: 'resources.modelfiles.modelfile',
+    contentForDelete: 'clusters.workerpool.title',
     defaultQueryParams: {
-      cluster_id: clusterData!.id
+      cluster_id: searchParams.get('id') || undefined
     }
   });
   const intl = useIntl();
@@ -89,7 +62,7 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     title: '',
     provider: ProviderValueMap.DigitalOcean,
     currentData: null as ListItem | null,
-    clusterId: 0
+    clusterId: 0 as number | string
   });
 
   // pool action handler
@@ -98,29 +71,43 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
       setAddPoolStatus({
         open: true,
         action: PageAction.EDIT,
-        title: 'Edit Worker Pool',
-        provider: clusterData!.provider,
+        title: intl.formatMessage(
+          { id: 'common.button.edit.item' },
+          { name: record.instance_type }
+        ),
+        provider: searchParams.get('provider') || '',
         currentData: record,
-        clusterId: clusterData!.id
+        clusterId: searchParams.get('id') || 0
       });
     }
   };
 
-  const onSelect = (key: string, record: ListItem) => {
+  const handleAddPool = (row: ListItem) => {
+    setAddPoolStatus({
+      open: true,
+      action: PageAction.CREATE,
+      title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
+      provider: searchParams.get('provider') || '',
+      clusterId: searchParams.get('id') || 0,
+      currentData: null
+    });
+  };
+
+  const onSelect = useMemoizedFn((key: string, record: ListItem) => {
     if (key === 'delete') {
       handleDelete({ ...record, name: record.instance_type });
     }
     if (key === 'edit') {
       handleEdit(key, record);
     }
-  };
+  });
 
   const handleSubmitWorkerPool = async (formdata: NodePoolFormData) => {
     try {
       if (addPoolStatus.action === PageAction.CREATE) {
         await createWorkerPool({
           data: formdata,
-          clusterId: clusterData!.id
+          clusterId: searchParams.get('id') || 0
         });
       }
       if (addPoolStatus.action === PageAction.EDIT) {
@@ -140,81 +127,64 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     });
   };
 
-  const columns = [
-    {
-      title: 'Instance Type',
-      dataIndex: 'instance_type',
-      key: 'instance_type'
-    },
-    {
-      title: 'Replicas',
-      dataIndex: 'replicas',
-      key: 'replicas'
-    },
-    {
-      title: 'Batch Size',
-      dataIndex: 'batch_size',
-      key: 'batch_size'
-    },
-    {
-      title: 'Labels',
-      dataIndex: 'labels',
-      key: 'labels',
-      render: (text: string, record: ListItem) => (
-        <LabelsCell labels={record.labels}></LabelsCell>
-      )
-    },
-    {
-      title: 'Create Time',
-      dataIndex: 'create_at',
-      key: 'created_at',
-      render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
-    },
-    {
-      title: 'Operations',
-      key: 'operations',
-      render: (text: string, record: ListItem) => (
-        <DropdownButtons
-          items={actionItems}
-          onSelect={(key) => onSelect?.(key, record)}
-        />
-      )
-    }
-  ];
+  const columns = usePoolsColumns(sortOrder, onSelect);
 
   return (
     <>
       <SubTitle>
-        <span>Worker Pools</span>
+        <span>{intl.formatMessage({ id: 'clusters.workerpool.title' })}</span>
       </SubTitle>
-      <div style={{ height: height, overflow: 'hidden' }}>
-        <Table
-          dataSource={dataSource.dataList}
-          columns={columns}
-          loading={loading}
-          pagination={false}
-          rowKey="id"
-        />
-        <AddPool
-          provider={addPoolStatus.provider}
-          open={addPoolStatus.open}
-          action={addPoolStatus.action}
-          title={addPoolStatus.title}
-          currentData={addPoolStatus.currentData}
-          onCancel={() => {
-            setAddPoolStatus({
-              open: false,
-              action: PageAction.CREATE,
-              title: '',
-              provider: ProviderValueMap.DigitalOcean,
-              currentData: null,
-              clusterId: 0
-            });
-          }}
-          onOk={handleSubmitWorkerPool}
-        ></AddPool>
-        <DeleteModal ref={modalRef}></DeleteModal>
-      </div>
+      <FilterBar
+        showSelect={false}
+        showPrimaryButton={true}
+        showDeleteButton={true}
+        marginBottom={22}
+        marginTop={22}
+        width={{ input: 300 }}
+        buttonText={intl.formatMessage({ id: 'clusters.button.addNodePool' })}
+        rowSelection={rowSelection}
+        handleInputChange={handleNameChange}
+        handleSearch={handleSearch}
+        handleDeleteByBatch={handleDeleteBatch}
+        handleClickPrimary={handleAddPool}
+      ></FilterBar>
+      <Table
+        rowKey="id"
+        tableLayout="fixed"
+        style={{ width: '100%' }}
+        onChange={handleTableChange}
+        dataSource={dataSource.dataList}
+        loading={dataSource.loading}
+        rowSelection={rowSelection}
+        columns={columns}
+        pagination={{
+          showSizeChanger: true,
+          pageSize: queryParams.perPage,
+          current: queryParams.page,
+          total: dataSource.total,
+          hideOnSinglePage: queryParams.perPage === 10,
+          onChange: handlePageChange
+        }}
+      ></Table>
+      <AddPool
+        provider={addPoolStatus.provider}
+        open={addPoolStatus.open}
+        action={addPoolStatus.action}
+        title={addPoolStatus.title}
+        currentData={addPoolStatus.currentData}
+        onCancel={() => {
+          setAddPoolStatus({
+            open: false,
+            action: PageAction.CREATE,
+            title: '',
+            provider: ProviderValueMap.DigitalOcean,
+            currentData: null,
+            clusterId: 0
+          });
+        }}
+        onOk={handleSubmitWorkerPool}
+      ></AddPool>
+      <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );
 };