diff --git a/frontend/packages/core/src/pages/loadBalancing/index.tsx b/frontend/packages/core/src/pages/loadBalancing/index.tsx index 821fd918..8c1b5e72 100644 --- a/frontend/packages/core/src/pages/loadBalancing/index.tsx +++ b/frontend/packages/core/src/pages/loadBalancing/index.tsx @@ -5,19 +5,14 @@ import WithPermission from '@common/components/aoplatform/WithPermission' import { BasicResponse, RESPONSE_TIPS, STATUS_CODE } from '@common/const/const' import { useFetch } from '@common/hooks/http' import { $t } from '@common/locales/index.ts' -import { App, Button, Typography } from 'antd' +import { App, Button, Typography } from 'antd' import { useEffect, useRef, useState } from 'react' -import { useSearchParams } from 'react-router-dom' import { LoadBalancingHandle, LoadBalancingItems } from './type' import TableBtnWithPermission from '@common/components/aoplatform/TableBtnWithPermission' import AddLoadBalancingModel from './AddModel' - - const LoadBalancingPage = () => { const pageListRef = useRef(null) - const [searchParams] = useSearchParams() - const serviceId = searchParams.get('serviceId') const [searchWord, setSearchWord] = useState('') const [columns, setColumns] = useState[]>([]) const { modal, message } = App.useApp() @@ -40,9 +35,9 @@ const LoadBalancingPage = () => { closable: true, onOk: () => { return addModelRef.current?.save().then((res) => { - if (res === true) { - pageListRef.current?.reload() - } + if (res === true) { + pageListRef.current?.reload() + } }) }, wrapClassName: 'ant-modal-without-footer', @@ -58,16 +53,13 @@ const LoadBalancingPage = () => { * @returns */ const requestApis = () => { - return fetchData>( - `ai/balances`, - { - method: 'GET', - eoParams: { - keyword: searchWord - }, - eoTransformKeys: ['api_count', 'key_count'] - } - ) + return fetchData>(`ai/balances`, { + method: 'GET', + eoParams: { + keyword: searchWord + }, + eoTransformKeys: ['api_count', 'key_count'] + }) .then((response) => { const { code, data, msg } = response if (code === STATUS_CODE.SUCCESS) { @@ -203,7 +195,9 @@ const LoadBalancingPage = () => { width: 120, ellipsis: true, key: 'state', - render: (dom: React.ReactNode, record: LoadBalancingItems) => {statusEnum[record.state]?.text || '-'} + render: (dom: React.ReactNode, record: LoadBalancingItems) => ( + {statusEnum[record.state]?.text || '-'} + ) }, { title: $t('Apis'), diff --git a/frontend/packages/core/src/pages/system/SystemList.tsx b/frontend/packages/core/src/pages/system/SystemList.tsx index 683b16d0..5816d978 100644 --- a/frontend/packages/core/src/pages/system/SystemList.tsx +++ b/frontend/packages/core/src/pages/system/SystemList.tsx @@ -31,7 +31,13 @@ const SystemList: FC = () => { const [open, setOpen] = useState(false) const drawerFormRef = useRef(null) const { checkPermission, accessInit, getGlobalAccessData, state } = useGlobalContext() - + const [stateColumnMap] = useState<{ [k: string]: { text: string } }>({ + normal: { text: $t('正常') }, + deploying: { text: $t('部署中') }, + error: { text: $t('异常') }, + public: { text: $t('公共服务') }, + private: { text: $t('私有服务') } + }) const getSystemList = () => { if (!accessInit) { getGlobalAccessData()?.then?.(() => { @@ -131,9 +137,13 @@ const SystemList: FC = () => { setOpen(false) } const openLogsModal = (record: any) => { + const closeModal = () => { + modalInstance.destroy() + manualReloadTable() + } const modalInstance = modal.confirm({ title: $t('部署过程'), - content: , + content: , footer: () => { return }, @@ -163,7 +173,7 @@ const SystemList: FC = () => { if ((x.dataIndex as string) === 'state') { x.render = (text: any, record: any) => ( .ant-typography]:text-[#2196f3]' : record.state === 'error' ? '[&>.ant-typography]:text-[#ff4d4f]' : ''}`} + className={`text-[13px] ${record.state === 'deploying' ? 'text-[#2196f3]' : record.state === 'error' ? 'text-[#ff4d4f]' : ''}`} onClick={(e) => { if (['deploying', 'error'].includes(record.state)) { e?.stopPropagation() @@ -171,7 +181,7 @@ const SystemList: FC = () => { } }} > - {text} + {stateColumnMap[record.state]?.text || '-'} ) } diff --git a/frontend/packages/core/src/pages/system/serviceDeployment/ServiceDeployment.tsx b/frontend/packages/core/src/pages/system/serviceDeployment/ServiceDeployment.tsx index 9cfd5549..2762923a 100644 --- a/frontend/packages/core/src/pages/system/serviceDeployment/ServiceDeployment.tsx +++ b/frontend/packages/core/src/pages/system/serviceDeployment/ServiceDeployment.tsx @@ -3,7 +3,8 @@ import { Steps } from 'antd' import { CheckCircleOutlined, LoadingOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons' import { Codebox } from '@common/components/postcat/api/Codebox' import { Collapse } from 'antd' -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' +import { $t } from '@common/locales/index.ts' import { useFetch } from '@common/hooks/http' const getIcon = (status: string) => { @@ -21,43 +22,49 @@ const getIcon = (status: string) => { } } -export const ServiceDeployment = (props: { record: SystemTableListItem }) => { - const { record } = props +export const ServiceDeployment = (props: { record: SystemTableListItem, closeModal?: () => void }) => { + const { record, closeModal } = props const [stepItem, setStepItem] = useState< { + id: string title: string description?: string status?: string }[] >([ { - title: 'Download', + id: 'download', + title: $t('下载'), status: 'pending' }, { - title: 'Deploy', + id: 'deploy', + title: $t('部署'), status: 'pending' }, { - title: 'Initializing', + id: 'initializing', + title: $t('初始化'), status: 'pending' } ]) const [scriptStr, setScriptStr] = useState('') - const [step, setStep] = useState(0) + const step = useRef(0) const [collapseText] = useState('Progress log') const { fetchData } = useFetch() - useEffect(() => { + const updateStepItems = (targetStep: number, description = '') => { setStepItem((prevItems) => - prevItems.map((item, index) => { - return { ...item, status: index < step ? 'completed' : item.status } - }) - ) - }, [step]) - + prevItems.map((item, index) => ({ + ...item, + description: item.id === 'download' ? description : item.description, + status: index < targetStep ? 'completed' : index === targetStep ? 'inProgress' : 'pending', + })) + ); + step.current = targetStep; + }; useEffect(() => { fetchData( 'model/local/deploy', @@ -72,42 +79,25 @@ export const ServiceDeployment = (props: { record: SystemTableListItem }) => { const parsedChunk = JSON.parse(chunk) // 下载中 if (parsedChunk?.data?.state.includes('download')) { - setStepItem((prevItems) => - prevItems.map((item) => { - return item.title === 'Download' - ? { - ...item, - description: `${parsedChunk?.data?.info?.current} / ${parsedChunk?.data?.info?.total}`, - status: 'inProgress' - } - : item - }) - ) - setStep(0) + updateStepItems(0, `${parsedChunk?.data?.info?.current} / ${parsedChunk?.data?.info?.total}`); // 部署中 } else if (parsedChunk?.data?.state.includes('deploy')) { - setStepItem((prevItems) => - prevItems.map((item) => { - return { ...item, status: item.title === 'Deploy' ? 'inProgress' : item.status } - }) - ) - setStep(1) + updateStepItems(1); // 初始化中 } else if (parsedChunk?.data?.state.includes('initializing')) { - setStepItem((prevItems) => - prevItems.map((item) => { - return { ...item, status: item.title === 'Initializing' ? 'inProgress' : item.status } - }) - ) - setStep(2) + updateStepItems(2); // 完成 } else if (parsedChunk?.data?.state.includes('finish')) { + updateStepItems(4); + setTimeout(() => { + closeModal?.() + }, 200) + } else if (parsedChunk?.data?.state.includes('error')) { setStepItem((prevItems) => - prevItems.map((item) => { - return { ...item, status: item.title === 'Initializing' ? 'completed' : item.status } + prevItems.map((item, index) => { + return { ...item, status: index === step.current ? 'error' : item.status } }) ) - setStep(4) } setScriptStr(parsedChunk?.data?.message || '') }