feat(web): Add DAG variables to web flow (#1981)

Co-authored-by: Fangyin Cheng <[email protected]> Co-authored-by: 谨欣 <[email protected]> Co-authored-by: yanzhiyong <[email protected]> Co-authored-by: 严志勇 <[email protected]>
eosphoros-ai · Sep 10, 2024 · 746e4fd · 746e4fd
1 parent fe29f97
commit 746e4fd
Show file tree

Hide file tree

Showing 23 changed files with 767 additions and 156 deletions.
diff --git a/i18n/translate_util.py b/i18n/translate_util.py
@@ -1,4 +1,5 @@
 """Translate the po file content to Chinese using LLM."""
+
 from typing import List, Dict, Any
 import asyncio
 import os
@@ -147,6 +148,8 @@
         "RAG": "RAG",
         "DB-GPT": "DB-GPT",
         "AWEL flow": "AWEL 工作流",
+        "Agent": "智能体",
+        "Agents": "智能体",
     },
     "default": {
         "Transformer": "Transformer",
@@ -159,6 +162,8 @@
         "RAG": "RAG",
         "DB-GPT": "DB-GPT",
         "AWEL flow": "AWEL flow",
+        "Agent": "Agent",
+        "Agents": "Agents",
     },
 }
 

diff --git a/web/client/api/flow/index.ts b/web/client/api/flow/index.ts
@@ -6,6 +6,10 @@ import {
   IFlowRefreshParams,
   IFlowResponse,
   IFlowUpdateParam,
+  IGetKeysRequestParams,
+  IGetKeysResponseData,
+  IGetVariablesByKeyRequestParams,
+  IGetVariablesByKeyResponseData,
   IUploadFileRequestParams,
   IUploadFileResponse,
 } from '@/types/flow';
@@ -35,8 +39,8 @@ export const deleteFlowById = (id: string) => {
   return DELETE<null, null>(`/api/v2/serve/awel/flows/${id}`);
 };
 
-export const getFlowNodes = () => {
-  return GET<null, Array<IFlowNode>>(`/api/v2/serve/awel/nodes`);
+export const getFlowNodes = (tags?: string) => {
+  return GET<{ tags?: string }, Array<IFlowNode>>(`/api/v2/serve/awel/nodes`, { tags });
 };
 
 export const refreshFlowNodeById = (data: IFlowRefreshParams) => {
@@ -63,11 +67,22 @@ export const downloadFile = (fileId: string) => {
   return GET<null, any>(`/api/v2/serve/file/files/dbgpt/${fileId}`);
 };
 
-// TODO：wait for interface update
-export const getFlowTemplateList = () => {
-  return GET<null, Array<any>>('/api/v2/serve/awel/flow/templates');
-};
-
 export const getFlowTemplateById = (id: string) => {
   return GET<null, any>(`/api/v2/serve/awel/flow/templates/${id}`);
 };
+
+export const getFlowTemplates = () => {
+  return GET<null, any>(`/api/v2/serve/awel/flow/templates`);
+};
+
+export const getKeys = (data?: IGetKeysRequestParams) => {
+  return GET<IGetKeysRequestParams, Array<IGetKeysResponseData>>('/api/v2/serve/awel/variables/keys', data);
+};
+
+export const getVariablesByKey = (data: IGetVariablesByKeyRequestParams) => {
+  return GET<IGetVariablesByKeyRequestParams, IGetVariablesByKeyResponseData>('/api/v2/serve/awel/variables', data);
+};
+
+export const metadataBatch = (data: IUploadFileRequestParams) => {
+  return POST<IUploadFileRequestParams, Array<IUploadFileResponse>>('/api/v2/serve/file/files/metadata/batch', data);
+};
diff --git a/web/components/flow/add-nodes-sider.tsx b/web/components/flow/add-nodes-sider.tsx
@@ -4,14 +4,17 @@ 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, Switch } from 'antd';
+import classnames from 'classnames';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 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,13 +44,16 @@ const AddNodesSider: React.FC = () => {
   const [resources, setResources] = useState<Array<IFlowNode>>([]);
   const [operatorsGroup, setOperatorsGroup] = useState<GroupType[]>([]);
   const [resourcesGroup, setResourcesGroup] = useState<GroupType[]>([]);
+  const [isAllNodesVisible, setIsAllNodesVisible] = useState<boolean>(false);
 
   useEffect(() => {
-    getNodes();
+    getNodes(TAGS);
   }, []);
 
-  async function getNodes() {
-    const [_, data] = await apiInterceptors(getFlowNodes());
+  // 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');
@@ -166,6 +172,16 @@ const AddNodesSider: React.FC = () => {
     setSearchValue(val);
   }
 
+  function onModeChange() {
+    if (isAllNodesVisible) {
+      getNodes(TAGS);
+    } else {
+      getNodes();
+    }
+
+    setIsAllNodesVisible(!isAllNodesVisible);
+  }
+
   return (
     <Sider
       className='flex justify-center items-start nodrag bg-[#ffffff80] border-r border-[#d5e5f6] dark:bg-[#ffffff29] dark:border-[#ffffff66]'
@@ -179,9 +195,19 @@ const AddNodesSider: React.FC = () => {
       onCollapse={collapsed => setCollapsed(collapsed)}
     >
       <Space direction='vertical' className='w-[280px] pt-4 px-4 overflow-hidden overflow-y-auto scrollbar-default'>
-        <p className='w-full text-base font-semibold text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] line-clamp-1'>
-          {t('add_node')}
-        </p>
+        <div className='flex justify-between align-middle'>
+          <p className='w-full text-base font-semibold text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] line-clamp-1'>
+            {t('add_node')}
+          </p>
+
+          <Switch
+            checkedChildren='高阶'
+            unCheckedChildren='全部'
+            onClick={onModeChange}
+            className={classnames('w-20', { 'bg-zinc-400': isAllNodesVisible })}
+            defaultChecked
+          />
+        </div>
 
         <Search placeholder='Search node' onSearch={searchNode} allowClear />