From b05874fb0a82d01ff57de6ef62cbcc559138ae9d Mon Sep 17 00:00:00 2001 From: scarqin Date: Tue, 24 Dec 2024 13:51:08 +0800 Subject: [PATCH] feat: fetch data from api --- .../core/src/pages/aiSetting/AIFlowChart.tsx | 274 +----------------- .../aiSetting/components/KeyStatusNode.tsx | 2 +- 2 files changed, 12 insertions(+), 264 deletions(-) diff --git a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx index c490b507..eb8cc3fa 100644 --- a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx +++ b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx @@ -1,5 +1,6 @@ 'use client' +import { useFetch } from '@common/hooks/http' import { addEdge, NodeTypes, ReactFlow, useEdgesState, useNodesState } from '@xyflow/react' import '@xyflow/react/dist/style.css' import { useCallback, useEffect, useState } from 'react' @@ -45,274 +46,21 @@ const nodeTypes: NodeTypes = { serviceCard: ServiceCardNode } as const -const Playground = () => { +const AIFlowChart = () => { const [modelData, setModelData] = useState([]) const [nodes, setNodes, onNodesChange] = useNodesState([]) const [edges, setEdges, onEdgesChange] = useEdgesState([]) + const { fetchData } = useFetch() useEffect(() => { // Mock API call - replace with actual API call - const mockApiResponse: ApiResponse = { - code: 0, - msg: 'default_value', - data: { - providers: [ - { - id: '320000199612026216', - name: 'iFLYTEK SPARK', - logo: '\n\n \n\n', - status: 'enable', - default_llm: 'fakegpt-1.0', - api_count: 15, - key_count: 4, - keys: [ - { - id: '140000200804035469', - name: 'Margaret Perez', - status: 'normal' - }, - { - id: '460000198105142251', - name: 'Paul Moore', - status: 'disable' - }, - { - id: '640000198609159464', - name: 'Timothy Clark', - status: 'disable' - }, - { - id: '370000199901139021', - name: 'Mark Williams', - status: 'abnormal' - } - ] - }, - { - id: '640000200408193359', - name: 'OpenRouter', - logo: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n', - status: 'disable', - default_llm: 'fakegpt-1.0', - api_count: 2, - key_count: 7, - keys: [ - { - id: '540000200004175839', - name: 'Maria Lewis', - status: 'abnormal' - }, - { - id: '510000199111048228', - name: 'Melissa Wilson', - status: 'disable' - } - ] - }, - { - id: '43000019760318266X', - name: '360 AI', - logo: '\n\n \n\n', - status: 'disable', - default_llm: 'fakegpt-1.0', - api_count: 3, - key_count: 5, - keys: [ - { - id: '150000201012143900', - name: 'Donald Johnson', - status: 'abnormal' - }, - { - id: '520000197104044707', - name: 'Daniel Perez', - status: 'normal' - }, - { - id: '230000200610198413', - name: 'Kimberly Lee', - status: 'abnormal' - } - ] - }, - { - id: '440000202405123330', - name: 'SiliconFlow', - logo: '\n\n\n\n\n\n\n\n\n\n\n', - status: 'abnormal', - default_llm: 'gpt-3.5-turbo-0125', - api_count: 6, - key_count: 6, - keys: [ - { - id: '500000199805052887', - name: 'Sharon Robinson', - status: 'abnormal' - }, - { - id: '110000198212026854', - name: 'Carol Thompson', - status: 'abnormal' - }, - { - id: '340000201911295145', - name: 'Mark Davis', - status: 'disable' - }, - { - id: '320000198302065610', - name: 'Donna Garcia', - status: 'disable' - } - ] - }, - { - id: '620000199406027251', - name: 'FakeGPT', - logo: '\n\n \n\n', - status: 'disable', - default_llm: 'gpt-3.5-turbo-0125', - api_count: 15, - key_count: 2, - keys: [ - { - id: '650000200812274267', - name: 'Jeffrey Taylor', - status: 'normal' - }, - { - id: '420000197301023899', - name: 'Ruth Jones', - status: 'abnormal' - }, - { - id: '820000201312084850', - name: 'Steven White', - status: 'disable' - } - ] - }, - { - id: '520000200005228695', - name: '360 AI', - logo: '\n\n \n\n', - status: 'enable', - default_llm: 'fakegpt-1.0', - api_count: 19, - key_count: 9, - keys: [ - { - id: '330000197006296104', - name: 'Karen Martinez', - status: 'abnormal' - }, - { - id: '420000199601313686', - name: 'Scott Davis', - status: 'disable' - } - ] - }, - { - id: '500000202103204115', - name: 'Google Gemini', - logo: '\n\n \n\n', - status: 'abnormal', - default_llm: 'gpt-3.5-turbo-0125', - api_count: 2, - key_count: 7, - keys: [ - { - id: '140000202101093813', - name: 'Jose Harris', - status: 'normal' - }, - { - id: '410000201802115211', - name: 'Richard Johnson', - status: 'abnormal' - } - ] - }, - { - id: '130000202402241558', - name: 'Google Gemini', - logo: '\n\n \n\n', - status: 'enable', - default_llm: 'gpt-3.5-turbo-0125', - api_count: 2, - key_count: 9, - keys: [ - { - id: '370000198910185957', - name: 'Christopher Thomas', - status: 'abnormal' - }, - { - id: '450000201505255688', - name: 'Mark Williams', - status: 'normal' - }, - { - id: '150000198812074566', - name: 'David Young', - status: 'disable' - } - ] - }, - { - id: '120000200209263834', - name: 'AWS Bedrock', - logo: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n', - status: 'enable', - default_llm: 'fakegpt-1.0', - api_count: 6, - key_count: 1, - keys: [ - { - id: '310000200804263420', - name: 'Daniel Lewis', - status: 'normal' - }, - { - id: '370000201306032780', - name: 'Richard Walker', - status: 'abnormal' - }, - { - id: '500000200211133087', - name: 'Frank Jones', - status: 'disable' - }, - { - id: '350000199105019471', - name: 'Carol Wilson', - status: 'abnormal' - } - ] - }, - { - id: '110000198411203825', - name: 'deepseek', - logo: '\n\n\n\n\n\n\n\n\n\n\n', - status: 'abnormal', - default_llm: 'fakegpt-1.0', - api_count: 1, - key_count: 10, - keys: [ - { - id: '210000200509114330', - name: 'Jason Martin', - status: 'abnormal' - } - ] - } - ], - backup: '' - }, - msg_zh: 'default_value' - } - setModelData(mockApiResponse.data.providers) + fetchData('ai/providers/configured', { + method: 'GET', + eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' + }).then((response) => { + const mockApiResponse: ApiResponse = response as ApiResponse + setModelData(mockApiResponse.data.providers) + }) }, []) useEffect(() => { @@ -443,4 +191,4 @@ const Playground = () => { ) } -export default Playground +export default AIFlowChart diff --git a/frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx b/frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx index 4a6d7ddd..9b2eecd1 100644 --- a/frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx +++ b/frontend/packages/core/src/pages/aiSetting/components/KeyStatusNode.tsx @@ -41,7 +41,7 @@ export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) = }} className={` rounded-md flex-shrink-0 - ${key.status === 'enabled' || key.status === 'normal' ? 'bg-green-500' : 'bg-red-500'} + ${key.status === 'normal' ? 'bg-green-500' : 'bg-red-500'} transition-all duration-200 hover:opacity-80 `} />