From d9fe810420670a9f1b0d9ebf7f3d4d321083f0f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= Date: Thu, 22 Aug 2024 12:14:02 +0800 Subject: [PATCH 1/2] feat: Update console log messages in CanvasNode component --- web/components/flow/canvas-node.tsx | 6 ++++-- web/components/flow/node-renderer/code-editor.tsx | 1 - 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx index 461d933f7..608dcbfab 100644 --- a/web/components/flow/canvas-node.tsx +++ b/web/components/flow/canvas-node.tsx @@ -114,8 +114,8 @@ const CanvasNode: React.FC = ({ data }) => { function onParameterValuesChange(changedValues: any, allValues: any) { // TODO: update node value - console.log('Changed xxx', changedValues); - console.log('All xxx', allValues); + console.log('Changed value', changedValues); + console.log('All value', allValues); const [changedKey, changedVal] = Object.entries(changedValues)[0]; @@ -132,9 +132,11 @@ const CanvasNode: React.FC = ({ data }) => { + + { const { t } = useTranslation(); - // const { data, defaultValue } = params; const attr = convertKeysToCamelCase(data.ui?.attr || {}); const [isModalOpen, setIsModalOpen] = useState(false); From c7173fbae0c3b1f052e3a42285f3a61726ea37fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= Date: Thu, 22 Aug 2024 22:13:30 +0800 Subject: [PATCH 2/2] 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 | 7 +++-- web/components/flow/add-nodes.tsx | 2 +- web/components/flow/canvas-node.tsx | 28 +++++++++++++----- web/pages/flow/canvas/index.tsx | 1 + web/pages/flow/index.tsx | 46 ++++++++++++++++++++++------- 5 files changed, 63 insertions(+), 21 deletions(-) diff --git a/web/client/api/request.ts b/web/client/api/request.ts index 756c1b70b..b0d705527 100644 --- a/web/client/api/request.ts +++ b/web/client/api/request.ts @@ -275,8 +275,11 @@ export const addFlow = (data: IFlowUpdateParam) => { return POST('/api/v2/serve/awel/flows', data); }; -export const getFlows = () => { - return GET('/api/v2/serve/awel/flows'); +export const getFlows = (page?: number, page_size?: number) => { + return GET('/api/v2/serve/awel/flows', { + page, + page_size, + }); }; export const getFlowById = (id: string) => { diff --git a/web/components/flow/add-nodes.tsx b/web/components/flow/add-nodes.tsx index e12db16fc..2f557c6aa 100644 --- a/web/components/flow/add-nodes.tsx +++ b/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={} - > + /> ); }; diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx index 608dcbfab..5f82de50a 100644 --- a/web/components/flow/canvas-node.tsx +++ b/web/components/flow/canvas-node.tsx @@ -80,8 +80,6 @@ const CanvasNode: React.FC = ({ 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 = ({ 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 ( diff --git a/web/pages/flow/canvas/index.tsx b/web/pages/flow/canvas/index.tsx index e7ae601aa..fb975c51a 100644 --- a/web/pages/flow/canvas/index.tsx +++ b/web/pages/flow/canvas/index.tsx @@ -269,6 +269,7 @@ const Canvas: React.FC = () => { + >([]); const [deploy, setDeploy] = useState(false); + const [page, setPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(0); const [messageApi, contextHolder] = message.useMessage(); const [form] = Form.useForm>(); - const copyFlowTemp = useRef(); 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 ( -
+
{contextHolder} +
-
- {flowList.map((flow) => ( - - ))} - {flowList.length === 0 && } + +
+
+ {flowList.map((flow) => ( + + ))} + {flowList.length === 0 && } +
+ +
+ `Total ${total} items`} + onChange={onPageChange} + /> +
+