feat: Update getFlows API function to support pagination

- Modify the getFlows API function in the request.ts file to accept optional parameters for page number and page size.
- Update the implementation of the getFlows function to include the page and page_size parameters in the API request.
- This change allows for paginated retrieval of flows from the server, improving the performance and user experience when working with a large number of flows.

web/client/api/request.ts

@@ -275,8 +275,11 @@ export const addFlow = (data: IFlowUpdateParam) => {
   return POST<IFlowUpdateParam, IFlow>('/api/v2/serve/awel/flows', data);
 };
 
-export const getFlows = () => {
-  return GET<null, IFlowResponse>('/api/v2/serve/awel/flows');
+export const getFlows = (page?: number, page_size?: number) => {
+  return GET<any, IFlowResponse>('/api/v2/serve/awel/flows', {
+    page,
+    page_size,
+  });
 };
 
 export const getFlowById = (id: string) => {

web/components/flow/add-nodes.tsx

@@ -122,7 +122,7 @@ const AddNodes: React.FC = () => {
         className="flex items-center justify-center rounded-full left-4 top-4"
         style={{ zIndex: 1050 }}
         icon={<PlusOutlined />}
-      ></Button>
+      />
     </Popover>
   );
 };

web/components/flow/canvas-node.tsx

@@ -80,8 +80,6 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
   }
 
   async function updateDependsNodeValue(changedKey: string, changedVal: any) {
-    if (!changedVal) return;
-
     const dependParamNodes = parameters.filter(({ ui }) => ui?.refresh_depends?.includes(changedKey));
 
     if (dependParamNodes?.length === 0) return;
@@ -107,20 +105,34 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
       };
 
       const [_, res] = await apiInterceptors(refreshFlowNodeById(params));
-      // TODO: update node value
-      console.log('res', res);
+
+      // update value of the node
+      if (res) {
+        reactFlow.setNodes((nodes) =>
+          nodes.map((n) => {
+            return n.id === node.id
+              ? {
+                  ...n,
+                  data: {
+                    ...n.data,
+                    parameters: res.parameters,
+                  },
+                }
+              : n;
+          }),
+        );
+      }
     });
   }
 
   function onParameterValuesChange(changedValues: any, allValues: any) {
-    // TODO: update node value
-    console.log('Changed value', changedValues);
-    console.log('All value', allValues);
 
     const [changedKey, changedVal] = Object.entries(changedValues)[0];
 
     updateCurrentNodeValue(changedKey, changedVal);
-    updateDependsNodeValue(changedKey, changedVal);
+    if (changedVal) {
+      updateDependsNodeValue(changedKey, changedVal);
+    }
   }
 
   return (

web/pages/flow/canvas/index.tsx

@@ -269,6 +269,7 @@ const Canvas: React.FC<Props> = () => {
           <AddNodes />
         </ReactFlow>
       </div>
+      
       <Modal
         title={t('flow_modal_title')}
         open={isModalVisible}

web/pages/flow/index.tsx

@@ -4,7 +4,7 @@ import MuiLoading from '@/components/common/loading';
 import FlowCard from '@/components/flow/flow-card';
 import { IFlow, IFlowUpdateParam } from '@/types/flow';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Form, Input, Modal, message } from 'antd';
+import { Button, Checkbox, Form, Input, Modal, message, Pagination, PaginationProps } from 'antd';
 import Link from 'next/link';
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,22 +16,25 @@ function Flow() {
   const [loading, setLoading] = useState(false);
   const [flowList, setFlowList] = useState<Array<IFlow>>([]);
   const [deploy, setDeploy] = useState(false);
+  const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+  const [total, setTotal] = useState<number>(0);
 
   const [messageApi, contextHolder] = message.useMessage();
   const [form] = Form.useForm<Pick<IFlow, 'label' | 'name'>>();
-
   const copyFlowTemp = useRef<IFlow>();
 
   async function getFlowList() {
     setLoading(true);
-    const [_, data] = await apiInterceptors(getFlows());
+    const [_, data] = await apiInterceptors(getFlows(page, pageSize));
+    setTotal(data?.total_count ?? 0);
     setLoading(false);
     setFlowList(data?.items ?? []);
   }
 
   useEffect(() => {
     getFlowList();
-  }, []);
+  }, [page, pageSize]);
 
   function updateFlowList(uid: string) {
     setFlowList((flows) => flows.filter((flow) => flow.uid !== uid));
@@ -62,10 +65,16 @@ function Flow() {
     }
   };
 
+  const onPageChange: PaginationProps['onChange'] = (page: number, pageSize: number) => {
+    setPage(page);
+    setPageSize(pageSize);
+  };
+
   return (
-    <div className="relative p-4 md:p-6 min-h-full overflow-y-auto">
+    <div className="flex flex-col justify-between relative p-4 md:p-6 min-h-full overflow-y-auto">
       {contextHolder}
       <MuiLoading visible={loading} />
+
       <div className="mb-4">
         <Link href="/flow/canvas">
           <Button type="primary" className="flex items-center" icon={<PlusOutlined />}>
@@ -73,12 +82,29 @@ function Flow() {
           </Button>
         </Link>
       </div>
-      <div className="flex flex-wrap gap-2 md:gap-4 justify-start items-stretch">
-        {flowList.map((flow) => (
-          <FlowCard key={flow.uid} flow={flow} deleteCallback={updateFlowList} onCopy={handleCopy} />
-        ))}
-        {flowList.length === 0 && <MyEmpty description="No flow found" />}
+
+      <div className="flex flex-col justify-between flex-1">
+        <div className="flex flex-wrap gap-2 md:gap-4 justify-start items-stretch">
+          {flowList.map((flow) => (
+            <FlowCard key={flow.uid} flow={flow} deleteCallback={updateFlowList} onCopy={handleCopy} />
+          ))}
+          {flowList.length === 0 && <MyEmpty description="No flow found" />}
+        </div>
+
+        <div className="flex justify-end mt-6">
+          <Pagination
+            showQuickJumper
+            showSizeChanger
+            defaultPageSize={10}
+            defaultCurrent={1}
+            current={page}
+            total={total}
+            showTotal={(total) => `Total ${total} items`}
+            onChange={onPageChange}
+          />
+        </div>
       </div>
+
       <Modal
         open={showModal}
         title="Copy AWEL Flow"