refactor: cluster list

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

@@ -2,6 +2,7 @@ import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import { PageActionType } from '@/config/types';
 import React, { useRef } from 'react';
+import { ProviderType } from '../config';
 import {
   NodePoolFormData as FormData,
   NodePoolListItem as ListItem
@@ -12,7 +13,7 @@ type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
-  provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
+  provider: ProviderType; // 'kubernetes' | 'custom' | 'digitalocean';
   currentData?: ListItem | null;
   onOk: (values: FormData) => void;
   onCancel: () => void;

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

@@ -1,22 +1,36 @@
+import CollapsibleContainer, {
+  CollapsibleContainerProps
+} from '@/components/collapse-container';
 import LabelSelector from '@/components/label-selector';
 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 { DeleteOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Button, Form } from 'antd';
 import _ from 'lodash';
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef
-} from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import styled from 'styled-components';
 import { ProviderType } from '../config';
 import { NodePoolFormData as FormData } from '../config/types';
 import VolumesConfig from './volumes-config';
 
+const Container = styled.div`
+  pointer-events: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 0 16px;
+  .ant-form-item:nth-child(5) {
+    grid-column: 1 / 3;
+  }
+
+  .ant-form-item:nth-child(6) {
+    grid-column: 1 / 3;
+  }
+`;
+
 type AddModalProps = {
   ref: any;
   name?: string;
@@ -24,42 +38,74 @@ type AddModalProps = {
   provider: ProviderType; // 'kubernetes' | 'custom' | 'digitalocean';
   currentData?: FormData | null;
   onFinish: (values: FormData) => void;
+  onDelete?: () => void;
+  showDelete?: boolean;
+  collapseProps?: CollapsibleContainerProps;
 };
-const PoolForm: React.FC<AddModalProps> = forwardRef(
-  ({ action, name = 'workerPoolForm', onFinish, currentData }, ref) => {
-    const cloudOptionsRef = useRef<any>(null);
-    const [form] = Form.useForm();
-    const intl = useIntl();
-    const { getRuleMessage } = useAppUtils();
+const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
+  const {
+    action,
+    name = 'workerPoolForm',
+    onFinish,
+    onDelete,
+    showDelete,
+    currentData,
+    collapseProps
+  } = props;
+  const { collapsible, onToggle, ...restCollapseProps } = collapseProps || {};
+  const [form] = Form.useForm();
+  const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
+  const labels = Form.useWatch('labels', form);
+  const instance_type = Form.useWatch('instance_type', form);
 
-    useEffect(() => {
-      if (currentData) {
-        console.log('currentData===========1=', currentData);
-        form.setFieldsValue({
-          ...currentData
-        });
-      }
-    }, [currentData]);
+  useEffect(() => {
+    if (currentData) {
+      console.log('currentData===========1=', currentData);
+      form.setFieldsValue({
+        ...currentData
+      });
+    }
+  }, [currentData]);
 
-    useImperativeHandle(ref, () => ({
-      resetFields: () => {
-        form.resetFields();
-      },
-      submit: () => {
-        form.submit();
-      },
-      setFieldsValue: (values: any) => {
-        form.setFieldsValue(values);
-      },
-      getFieldsValue: () => {
-        return form.getFieldsValue();
-      },
-      validateFields: async () => {
-        return await form.validateFields();
-      }
-    }));
+  useImperativeHandle(ref, () => ({
+    resetFields: () => {
+      form.resetFields();
+    },
+    submit: () => {
+      form.submit();
+    },
+    setFieldsValue: (values: any) => {
+      form.setFieldsValue(values);
+    },
+    getFieldsValue: () => {
+      return form.getFieldsValue();
+    },
+    validateFields: async () => {
+      return await form.validateFields();
+    }
+  }));
 
-    return (
+  return (
+    <CollapsibleContainer
+      title={instance_type}
+      collapsible={collapsible}
+      onToggle={onToggle}
+      {...restCollapseProps}
+    >
+      {showDelete && (
+        <div className="flex-end" style={{ marginBlock: '8px 16px' }}>
+          <Button
+            onClick={onDelete}
+            icon={<DeleteOutlined />}
+            danger
+            type="text"
+            variant="filled"
+            color="danger"
+            size="small"
+          ></Button>
+        </div>
+      )}
       <Form
         name={name}
         form={form}
@@ -71,103 +117,114 @@ const PoolForm: React.FC<AddModalProps> = forwardRef(
           batch_size: 1
         }}
       >
-        <Form.Item<FormData>
-          name="instance_type"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage(
-                'input',
-                'clusters.workerpool.instanceType'
-              )
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({
-              id: 'clusters.workerpool.instanceType'
-            })}
-            required
-          ></SealInput.Input>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="replicas"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage('input', 'clusters.workerpool.replicas')
-            }
-          ]}
-        >
-          <SealInputNumber
-            label={intl.formatMessage({ id: 'clusters.workerpool.replicas' })}
-            required
-          ></SealInputNumber>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="batch_size"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage('input', 'clusters.workerpool.batchSize')
-            }
-          ]}
-        >
-          <SealInputNumber
-            label={intl.formatMessage({ id: 'clusters.workerpool.batchSize' })}
-            required
-          ></SealInputNumber>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="os_image"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage('input', 'clusters.workerpool.osImage')
-            }
-          ]}
-        >
-          <SealInput.Input
-            disabled={action === PageAction.EDIT}
-            label={intl.formatMessage({ id: 'clusters.workerpool.osImage' })}
-            required
-          ></SealInput.Input>
-        </Form.Item>
-
-        <Form.Item<FormData>
-          name="labels"
-          rules={[
-            ({ getFieldValue }) => ({
-              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: 'labels'
-                        }
-                      )
-                    );
-                  }
-                }
-                return Promise.resolve();
+        <Container>
+          <Form.Item<FormData>
+            name="instance_type"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage(
+                  'input',
+                  'clusters.workerpool.instanceType'
+                )
               }
-            })
-          ]}
-        >
-          <LabelSelector
-            label={intl.formatMessage({ id: 'resources.table.labels' })}
-            labels={form.getFieldValue('labels') || {}}
-            btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
-          ></LabelSelector>
-        </Form.Item>
-        <VolumesConfig ref={cloudOptionsRef}></VolumesConfig>
+            ]}
+          >
+            <SealInput.Input
+              label={intl.formatMessage({
+                id: 'clusters.workerpool.instanceType'
+              })}
+              required
+            ></SealInput.Input>
+          </Form.Item>
+          <Form.Item<FormData>
+            name="replicas"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'clusters.workerpool.replicas')
+              }
+            ]}
+          >
+            <SealInputNumber
+              label={intl.formatMessage({
+                id: 'clusters.workerpool.replicas'
+              })}
+              required
+            ></SealInputNumber>
+          </Form.Item>
+          <Form.Item<FormData>
+            name="batch_size"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage(
+                  'input',
+                  'clusters.workerpool.batchSize'
+                )
+              }
+            ]}
+          >
+            <SealInputNumber
+              label={intl.formatMessage({
+                id: 'clusters.workerpool.batchSize'
+              })}
+              required
+            ></SealInputNumber>
+          </Form.Item>
+          <Form.Item<FormData>
+            name="os_image"
+            rules={[
+              {
+                required: true,
+                message: getRuleMessage('input', 'clusters.workerpool.osImage')
+              }
+            ]}
+          >
+            <SealInput.Input
+              disabled={action === PageAction.EDIT}
+              label={intl.formatMessage({
+                id: 'clusters.workerpool.osImage'
+              })}
+              required
+            ></SealInput.Input>
+          </Form.Item>
+
+          <Form.Item<FormData>
+            name="labels"
+            rules={[
+              ({ getFieldValue }) => ({
+                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: 'labels'
+                          }
+                        )
+                      );
+                    }
+                  }
+                  return Promise.resolve();
+                }
+              })
+            ]}
+          >
+            <LabelSelector
+              label={intl.formatMessage({ id: 'resources.table.labels' })}
+              labels={labels || {}}
+              btnText={intl.formatMessage({ id: 'common.button.addLabel' })}
+            ></LabelSelector>
+          </Form.Item>
+          <VolumesConfig></VolumesConfig>
+        </Container>
       </Form>
-    );
-  }
-);
+    </CollapsibleContainer>
+  );
+});
 
 export default PoolForm;

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

@@ -0,0 +1,151 @@
+import DeleteModal from '@/components/delete-modal';
+import RowChildren from '@/components/seal-table/components/row-children';
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import { Col, message, Row } from 'antd';
+import React, { useRef, useState } from 'react';
+import { deleteWorkerPool, updateWorkerPool } from '../apis';
+import { ProviderType } from '../config';
+import { NodePoolFormData, NodePoolListItem } from '../config/types';
+import usePoolsColumns from '../hooks/use-pools-columns';
+import AddPool from './add-pool';
+
+interface PoolRowsProps {
+  dataList: NodePoolListItem[];
+  provider: ProviderType;
+  clusterId: number | string;
+}
+
+const PoolRows: React.FC<PoolRowsProps> = ({
+  dataList,
+  provider,
+  clusterId
+}) => {
+  const intl = useIntl();
+  const modalRef = useRef<any>(null);
+  const [addPoolStatus, setAddPoolStatus] = useState<{
+    open: boolean;
+    action: PageActionType;
+    title: string;
+    provider: ProviderType;
+    currentData: NodePoolListItem | null;
+    clusterId: number | string;
+  }>({
+    open: false,
+    action: PageAction.EDIT,
+    title: '',
+    provider: provider,
+    currentData: null as NodePoolListItem | null,
+    clusterId: clusterId
+  });
+
+  const handleSubmitWorkerPool = async (formdata: NodePoolFormData) => {
+    try {
+      await updateWorkerPool({
+        data: formdata,
+        id: addPoolStatus.currentData!.id
+      });
+      setAddPoolStatus({
+        ...addPoolStatus,
+        open: false
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+      // handleSearch();
+    } catch (error) {
+      // error
+    }
+  };
+
+  const handleEdit = (action: string, record: NodePoolListItem) => {
+    if (action === 'edit') {
+      setAddPoolStatus({
+        open: true,
+        action: PageAction.EDIT,
+        title: intl.formatMessage(
+          { id: 'common.button.edit.item' },
+          { name: record.instance_type }
+        ),
+        provider: provider,
+        currentData: record,
+        clusterId: record.cluster_id
+      });
+    }
+  };
+
+  const handleDelete = (row: { name: string; id: number }, options?: any) => {
+    modalRef.current?.show({
+      content: 'worker pool',
+      operation: 'common.delete.single.confirm',
+      name: row.name,
+      ...options,
+      async onOk() {
+        console.log('OK');
+        await deleteWorkerPool(row.id);
+      }
+    });
+  };
+
+  const onSelect = useMemoizedFn((key: string, record: NodePoolListItem) => {
+    if (key === 'delete') {
+      handleDelete({ ...record, name: record.instance_type });
+    }
+    if (key === 'edit') {
+      handleEdit(key, record);
+    }
+  });
+
+  const columns = usePoolsColumns(onSelect);
+  return (
+    <>
+      {dataList?.map((data: NodePoolListItem) => {
+        return (
+          <div
+            key={data.id}
+            style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
+          >
+            <RowChildren>
+              <Row style={{ width: '100%' }} align="middle">
+                {columns.map((col: Record<string, any>) => {
+                  return (
+                    <Col
+                      key={col.dataIndex as string}
+                      span={col.span}
+                      style={col.style}
+                    >
+                      {col.render
+                        ? col.render(data[col.dataIndex as string], data)
+                        : data[col.dataIndex as string]}
+                    </Col>
+                  );
+                })}
+              </Row>
+            </RowChildren>
+          </div>
+        );
+      })}
+      <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: provider,
+            currentData: null,
+            clusterId: 0
+          });
+        }}
+        onOk={handleSubmitWorkerPool}
+      ></AddPool>
+      <DeleteModal ref={modalRef}></DeleteModal>
+    </>
+  );
+};
+
+export default PoolRows;

src/pages/cluster-management/components/provider-catalog.tsx

@@ -1,6 +1,6 @@
 import Card from '@/components/templates/card';
 import { useIntl } from '@umijs/max';
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { ProviderType } from '../config';
 
@@ -9,6 +9,22 @@ const Wrapper = styled.div`
   grid-template-columns: 1fr 1fr 1fr;
   gap: 22px;
 `;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Title = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 700;
+  font-size: 18px;
+  margin-block: 16px 24px;
+`;
+
 interface ProviderCatalogProps {
   onSelect?: (provider: ProviderType) => void;
   currentProvider?: ProviderType;
@@ -20,6 +36,7 @@ interface ProviderCatalogProps {
     disabled?: boolean;
     icon: React.ReactNode;
     description?: string;
+    group?: string;
   }[];
 }
 
@@ -30,27 +47,46 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
   currentProvider
 }) => {
   const intl = useIntl();
+
+  const groupList = useMemo(() => {
+    if (!dataList) return {};
+    return dataList?.reduce(
+      (acc, item) => {
+        (acc[item.group || 'default'] ??= []).push(item);
+        return acc;
+      },
+      {} as Record<string, typeof dataList>
+    );
+  }, [dataList]);
+
   return (
-    <Wrapper>
-      {dataList?.map((action) => (
-        <Card
-          height="auto"
-          key={action.key}
-          onClick={() => onSelect?.(action.key as ProviderType)}
-          active={currentProvider === action.key}
-          disabled={action.disabled}
-          clickable={clickable}
-          header={
-            action.locale
-              ? intl.formatMessage({ id: action.label })
-              : action.label
-          }
-          icon={action.icon}
-        >
-          {action.description || 'This is a description'}
-        </Card>
+    <Container>
+      {Object.entries(groupList).map(([groupName, items]) => (
+        <div key={groupName}>
+          {groupName !== 'default' && <Title>{groupName}</Title>}
+          <Wrapper>
+            {items?.map((action) => (
+              <Card
+                height="auto"
+                key={action.key}
+                onClick={() => onSelect?.(action.key as ProviderType)}
+                active={currentProvider === action.key}
+                disabled={action.disabled}
+                clickable={clickable}
+                header={
+                  action.locale
+                    ? intl.formatMessage({ id: action.label })
+                    : action.label
+                }
+                icon={action.icon}
+              >
+                {action.description || 'This is a description'}
+              </Card>
+            ))}
+          </Wrapper>
+        </div>
       ))}
-    </Wrapper>
+    </Container>
   );
 };
 

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

@@ -127,7 +127,7 @@ const WorkerPools = () => {
     }
   };
 
-  const columns = usePoolsColumns(sortOrder, onSelect);
+  const columns = usePoolsColumns(onSelect, sortOrder);
 
   return (
     <>