From 230ba6977298ea0ab4d2c5246542d5756aaed7c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= Date: Tue, 3 Sep 2024 18:14:42 +0800 Subject: [PATCH 1/3] chore: Update getFlowNodes function to accept optional tags parameter --- web/client/api/flow/index.ts | 4 +-- web/components/flow/add-nodes-sider.tsx | 40 +++++++++++++++++++++---- web/components/flow/canvas-node.tsx | 2 +- web/locales/en/flow.ts | 2 ++ web/locales/zh/flow.ts | 2 ++ 5 files changed, 41 insertions(+), 9 deletions(-) diff --git a/web/client/api/flow/index.ts b/web/client/api/flow/index.ts index 7f32ac1d9..67c6462e4 100644 --- a/web/client/api/flow/index.ts +++ b/web/client/api/flow/index.ts @@ -35,8 +35,8 @@ export const deleteFlowById = (id: string) => { return DELETE(`/api/v2/serve/awel/flows/${id}`); }; -export const getFlowNodes = () => { - return GET>(`/api/v2/serve/awel/nodes`); +export const getFlowNodes = (tags?: string) => { + return GET<{ tags?: string }, Array>(`/api/v2/serve/awel/nodes`, { tags }); }; export const refreshFlowNodeById = (data: IFlowRefreshParams) => { diff --git a/web/components/flow/add-nodes-sider.tsx b/web/components/flow/add-nodes-sider.tsx index b5a5f6d3c..b35170916 100644 --- a/web/components/flow/add-nodes-sider.tsx +++ b/web/components/flow/add-nodes-sider.tsx @@ -4,7 +4,7 @@ import { IFlowNode } from '@/types/flow'; import { FLOW_NODES_KEY } from '@/utils'; import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'; import type { CollapseProps } from 'antd'; -import { Badge, Collapse, Input, Layout, Space } from 'antd'; +import { Badge, Collapse, Input, Layout, Space, Tag } from 'antd'; import React, { useContext, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import StaticNodes from './static-nodes'; @@ -41,13 +41,14 @@ const AddNodesSider: React.FC = () => { const [resources, setResources] = useState>([]); const [operatorsGroup, setOperatorsGroup] = useState([]); const [resourcesGroup, setResourcesGroup] = useState([]); + const [isAdvancedMode, setIsAdvancedMode] = useState(false); useEffect(() => { getNodes(); }, []); - async function getNodes() { - const [_, data] = await apiInterceptors(getFlowNodes()); + async function getNodes(tags?: string) { + const [_, data] = await apiInterceptors(getFlowNodes(tags)); if (data && data.length > 0) { localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data)); const operatorNodes = data.filter(node => node.flow_type === 'operator'); @@ -166,6 +167,17 @@ const AddNodesSider: React.FC = () => { setSearchValue(val); } + function onModeChange() { + setIsAdvancedMode(!isAdvancedMode); + + if (!isAdvancedMode) { + const tags = JSON.stringify({ order: 'higher-order' }); + getNodes(tags); + } else { + getNodes(); + } + } + return ( { onCollapse={collapsed => setCollapsed(collapsed)} > -

- {t('add_node')} -

+
+

+ {t('add_node')} +

+ + {isAdvancedMode ? ( + + {t('Advanced_Mode')} + + ) : ( + + {t('Default_Mode')} + + )} + + {/* */} +
diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx index 37449337d..aa0378c2f 100644 --- a/web/components/flow/canvas-node.tsx +++ b/web/components/flow/canvas-node.tsx @@ -142,7 +142,7 @@ const CanvasNode: React.FC = ({ data }) => { return (
- {(outputs || []).map((output, index) => ( + {outputs?.map((output, index) => ( Date: Tue, 3 Sep 2024 18:32:21 +0800 Subject: [PATCH 2/3] chore: Update AddNodesSider component to toggle between all nodes and higher order nodes --- web/components/flow/add-nodes-sider.tsx | 33 ++++++++++--------------- web/locales/en/flow.ts | 2 ++ web/locales/zh/flow.ts | 6 +++-- 3 files changed, 19 insertions(+), 22 deletions(-) diff --git a/web/components/flow/add-nodes-sider.tsx b/web/components/flow/add-nodes-sider.tsx index b35170916..d71a12707 100644 --- a/web/components/flow/add-nodes-sider.tsx +++ b/web/components/flow/add-nodes-sider.tsx @@ -12,6 +12,8 @@ import StaticNodes from './static-nodes'; const { Search } = Input; const { Sider } = Layout; +const TAGS = JSON.stringify({ order: 'higher-order' }); + type GroupType = { category: string; categoryLabel: string; @@ -41,14 +43,16 @@ const AddNodesSider: React.FC = () => { const [resources, setResources] = useState>([]); const [operatorsGroup, setOperatorsGroup] = useState([]); const [resourcesGroup, setResourcesGroup] = useState([]); - const [isAdvancedMode, setIsAdvancedMode] = useState(false); + const [isAllNodesVisible, setIsAllNodesVisible] = useState(false); useEffect(() => { - getNodes(); + getNodes(TAGS); }, []); + // tags is optional, if tags is not passed, it will get all nodes async function getNodes(tags?: string) { const [_, data] = await apiInterceptors(getFlowNodes(tags)); + if (data && data.length > 0) { localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data)); const operatorNodes = data.filter(node => node.flow_type === 'operator'); @@ -168,14 +172,13 @@ const AddNodesSider: React.FC = () => { } function onModeChange() { - setIsAdvancedMode(!isAdvancedMode); - - if (!isAdvancedMode) { - const tags = JSON.stringify({ order: 'higher-order' }); - getNodes(tags); + if (isAllNodesVisible) { + getNodes(TAGS); } else { getNodes(); } + + setIsAllNodesVisible(!isAllNodesVisible); } return ( @@ -196,19 +199,9 @@ const AddNodesSider: React.FC = () => { {t('add_node')}

- {isAdvancedMode ? ( - - {t('Advanced_Mode')} - - ) : ( - - {t('Default_Mode')} - - )} - - {/* */} + + {isAllNodesVisible ? t('All_Nodes') : t('Higher_Order_Nodes')} +
diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts index 43f470423..e048748c5 100644 --- a/web/locales/en/flow.ts +++ b/web/locales/en/flow.ts @@ -21,4 +21,6 @@ export const FlowEn = { Add_Parameter: 'Add Parameter', Advanced_Mode: 'Advanced Mode', Default_Mode: 'Default Mode', + Higher_Order_Nodes: 'Higher Order Nodes', + All_Nodes: 'All Nodes', }; diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts index fd04908e8..cd26c545d 100644 --- a/web/locales/zh/flow.ts +++ b/web/locales/zh/flow.ts @@ -19,6 +19,8 @@ export const FlowZn = { Please_Add_Nodes_First: '请先添加节点', Add_Global_Variable_of_Flow: '添加 Flow 全局变量', Add_Parameter: '添加参数', - Advanced_Mode: '高级模式', - Default_Mode: '默认模式', + // Advanced_Mode: '高级模式', + // Default_Mode: '默认模式', + Higher_Order_Nodes: '高阶节点', + All_Nodes: '所有节点', }; From 72299daecb9dd791c86964cfb97c344e946b3ba0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= Date: Tue, 3 Sep 2024 19:15:55 +0800 Subject: [PATCH 3/3] chore: Remove commented out code for advanced and default modes in flow.ts --- web/locales/en/flow.ts | 2 -- web/locales/zh/flow.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts index e048748c5..27b388e74 100644 --- a/web/locales/en/flow.ts +++ b/web/locales/en/flow.ts @@ -19,8 +19,6 @@ export const FlowEn = { Please_Add_Nodes_First: 'Please add nodes first', Add_Global_Variable_of_Flow: 'Add global variable of flow', Add_Parameter: 'Add Parameter', - Advanced_Mode: 'Advanced Mode', - Default_Mode: 'Default Mode', Higher_Order_Nodes: 'Higher Order Nodes', All_Nodes: 'All Nodes', }; diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts index cd26c545d..f846059c4 100644 --- a/web/locales/zh/flow.ts +++ b/web/locales/zh/flow.ts @@ -19,8 +19,6 @@ export const FlowZn = { Please_Add_Nodes_First: '请先添加节点', Add_Global_Variable_of_Flow: '添加 Flow 全局变量', Add_Parameter: '添加参数', - // Advanced_Mode: '高级模式', - // Default_Mode: '默认模式', Higher_Order_Nodes: '高阶节点', All_Nodes: '所有节点', };