diff --git a/frontend/packages/core/src/pages/aiApis/index.tsx b/frontend/packages/core/src/pages/aiApis/index.tsx index 50291fc2..c4f87ddf 100644 --- a/frontend/packages/core/src/pages/aiApis/index.tsx +++ b/frontend/packages/core/src/pages/aiApis/index.tsx @@ -7,7 +7,8 @@ import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const' import { useFetch } from '@common/hooks/http' import { $t } from '@common/locales' import AIProviderSelect, { AIProvider } from '@core/components/AIProviderSelect' -import { App, Button, Typography } from 'antd' +import { getTime } from '@dashboard/utils/dashboard' +import { Alert, App, Button, Typography } from 'antd' import dayjs from 'dayjs' import React, { useEffect, useRef, useState } from 'react' import { useSearchParams } from 'react-router-dom' @@ -37,16 +38,22 @@ const ApiSettings: React.FC = () => { if (!selectedProvider) return setQueryBtnLoading(true) try { + const eoParams = { + provider: selectedProvider, + page_size: params.pageSize, + keyword: searchWord, + page: params.current, + start: timeRange.start, + end: timeRange.end + } + if (!timeRange || !timeRange.start) { + const { startTime, endTime } = getTime(timeButton, []) + eoParams.start = startTime + eoParams.end = endTime + } const response = await fetchData>('ai/apis', { method: 'GET', - eoParams: { - provider: selectedProvider, - page_size: params.pageSize, - keyword: searchWord, - page: params.current, - start: timeRange.start, - end: timeRange.end - } + eoParams }) setQueryBtnLoading(false) if (response.code === STATUS_CODE.SUCCESS) { @@ -94,7 +101,7 @@ const ApiSettings: React.FC = () => { const columns: PageProColumns[] = [ { - title: 'AI 服务(name)', + title: 'AI 服务', dataIndex: 'name', key: 'name', width: 180 @@ -108,28 +115,38 @@ const ApiSettings: React.FC = () => { }, { title: '模型', - dataIndex: 'model', + dataIndex: ['model', 'name'], key: 'model', - width: 150 + width: 150, + filters: true, + onFilter: true, + valueType: 'select', + valueEnum: {} }, { title: '已用 Token', dataIndex: 'use_token', key: 'use_token', - width: 120 + width: 120, + sorter: true }, { title: '是否放行', dataIndex: 'disabled', - key: 'disabled', - width: 100, - render: (disabled: boolean) => {disabled ? '禁用' : '启用'} + ellipsis: true, + filters: true, + onFilter: true, + valueType: 'select', + valueEnum: { + true: { text: {$t('拦截')} }, + false: { text: {$t('放行')} } + } }, { title: '编辑时间', dataIndex: 'update_time', key: 'update_time', - width: 160, + width: 200, render: (time: string) => {dayjs(time).format('YYYY-MM-DD HH:mm:ss')} }, ...operation @@ -145,56 +162,77 @@ const ApiSettings: React.FC = () => { pageListRef.current?.reload() } + const renderProviderBanner = () => { + if (provider?.disabled) { + return ( + window.open('/details')}> + {$t('查看详情')} + + } + /> + ) + } + return null + } + return ( - {$t('支持查看调用某个 AI 供应商的所有 AI 服务 API 清单')} -
+
{ + onChange={(value, option) => { setSelectedProvider(value) - setProvider(provider) + setProvider(option) }} />
+ {renderProviderBanner()} } showBorder={false} scrollPage={false} > -
- { - setTimeRange($event) - }} - /> -
- - -
-
+ { + setTimeRange($event) + }} + /> +
+ + +
+
+ } request={requestApis} onSearchWordChange={(e) => { setSearchWord(e.target.value) diff --git a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx index 9f7173bf..79611d80 100644 --- a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx +++ b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx @@ -3,6 +3,7 @@ import { BasicResponse } from '@common/const/const' import { useGlobalContext } from '@common/contexts/GlobalStateContext' import { useFetch } from '@common/hooks/http' +import { $t } from '@common/locales' import { CoordinateExtent, Edge, @@ -15,7 +16,7 @@ import { useNodesState } from '@xyflow/react' import '@xyflow/react/dist/style.css' -import { Button, Space } from 'antd' +import { Button, Space, Spin } from 'antd' import { useCallback, useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import CustomEdge from './components/CustomEdge' @@ -66,6 +67,7 @@ const edgeTypes: EdgeTypes = { const AIFlowChart = () => { const [modelData, setModelData] = useState([]) + const [loading, setLoading] = useState(false) const [nodes, setNodes, onNodesChange] = useNodesState([]) const [edges, setEdges, onEdgesChange] = useEdgesState([]) const { fetchData } = useFetch() @@ -73,14 +75,19 @@ const AIFlowChart = () => { const navigate = useNavigate() useEffect(() => { + setLoading(true) fetchData('ai/providers/configured', { method: 'GET', eoTransformKeys: ['default_llm'] // eoApiPrefix: 'http://uat.apikit.com:11204/mockApi/aoplatform/api/v1/' - }).then((response) => { - const mockApiResponse: ApiResponse = response as ApiResponse - setModelData(mockApiResponse.data.providers) }) + .then((response) => { + const mockApiResponse: ApiResponse = response as ApiResponse + setModelData(mockApiResponse.data.providers) + }) + .finally(() => { + setLoading(false) + }) }, [aiConfigFlushed]) useEffect(() => { @@ -211,11 +218,15 @@ const AIFlowChart = () => { return (
- {modelData.length === 0 ? ( + {loading ? ( +
+ +
+ ) : modelData.length === 0 ? ( -
No AI model configured
+
{$t('未配置 AI 模型')}
) : ( diff --git a/frontend/packages/core/src/pages/keySettings/index.tsx b/frontend/packages/core/src/pages/keySettings/index.tsx index 5c9ed154..6ea97505 100644 --- a/frontend/packages/core/src/pages/keySettings/index.tsx +++ b/frontend/packages/core/src/pages/keySettings/index.tsx @@ -309,7 +309,7 @@ const KeySettings: React.FC = () => { render: (dom: React.ReactNode, entity: APIKey) => { return entity.expire_time === 0 ? $t('永不过期') - : dayjs(Number(entity.expire_time)).format('YYYY-MM-DD HH:mm:ss') + : dayjs(Number(entity.expire_time) * 1000).format('YYYY-MM-DD HH:mm:ss') } }, ...operation diff --git a/frontend/packages/dashboard/src/component/MonitorApiPage.tsx b/frontend/packages/dashboard/src/component/MonitorApiPage.tsx index 3a824368..5bb5d2d4 100644 --- a/frontend/packages/dashboard/src/component/MonitorApiPage.tsx +++ b/frontend/packages/dashboard/src/component/MonitorApiPage.tsx @@ -1,23 +1,23 @@ import { CloseOutlined, ExpandOutlined, SearchOutlined } from '@ant-design/icons' -import { Select, Input, Button, App, Drawer } from 'antd' -import { debounce } from 'lodash-es' -import { useState, useEffect, useRef } from 'react' -import { MonitorApiData, SearchBody } from '@dashboard/const/type' -import { getTime } from '../utils/dashboard' import ScrollableSection from '@common/components/aoplatform/ScrollableSection' import TimeRangeSelector, { RangeValue, TimeRange, TimeRangeButton } from '@common/components/aoplatform/TimeRangeSelector' -import MonitorTable, { MonitorTableHandler } from './MonitorTable' import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const' -import { DefaultOptionType } from 'antd/es/select' -import { useExcelExport } from '@common/hooks/excel' -import { API_TABLE_GLOBAL_COLUMNS_CONFIG } from '@dashboard/const/const' -import { useFetch } from '@common/hooks/http' import { EntityItem } from '@common/const/type' +import { useExcelExport } from '@common/hooks/excel' +import { useFetch } from '@common/hooks/http' import { $t } from '@common/locales' +import { API_TABLE_GLOBAL_COLUMNS_CONFIG } from '@dashboard/const/const' +import { MonitorApiData, SearchBody } from '@dashboard/const/type' +import { App, Button, Drawer, Input, Select } from 'antd' +import { DefaultOptionType } from 'antd/es/select' +import { debounce } from 'lodash-es' +import { useEffect, useRef, useState } from 'react' +import { getTime } from '../utils/dashboard' +import MonitorTable, { MonitorTableHandler } from './MonitorTable' export type MonitorApiPageProps = { fetchTableData: (body: SearchBody) => Promise> detailDrawerContent: React.ReactNode @@ -100,6 +100,7 @@ export default function MonitorApiPage(props: MonitorApiPageProps) { const getMonitorData = () => { let query = queryData if (!queryData || queryData.start === undefined) { + console.log(timeButton, datePickerValue) const { startTime, endTime } = getTime(timeButton, datePickerValue || []) query = { ...query, start: startTime, end: endTime } } @@ -186,7 +187,7 @@ export default function MonitorApiPage(props: MonitorApiPageProps) { } return ( -
+
-
- +
+ ({ ...(prevData || {}), apis: value })) }} /> - +
{/* setQueryData({ ...queryData, path: '' })} /> */}