diff --git a/react-ui/src/components/IFramePage/index.tsx b/react-ui/src/components/IFramePage/index.tsx index 0d56724d..a087da42 100644 --- a/react-ui/src/components/IFramePage/index.tsx +++ b/react-ui/src/components/IFramePage/index.tsx @@ -1,12 +1,11 @@ import FullScreenFrame from '@/components/FullScreenFrame'; -import KFSpin from '@/components/KFSpin'; import { getKnowledgeGraphUrl, getLabelStudioUrl } from '@/services/developmentEnvironment'; +import Loading from '@/utils/loading'; import { to } from '@/utils/promise'; import SessionStorage from '@/utils/sessionStorage'; import { FloatButton } from 'antd'; import classNames from 'classnames'; import { useEffect, useState } from 'react'; -import { createPortal } from 'react-dom'; import './index.less'; export enum IframePageType { @@ -66,16 +65,18 @@ type IframePageProps = { /** 系统内嵌 iframe，目前系统有数据标注、应用开发、开发环境、GitLink 四个子系统，使用时可以添加其他子系统 */ function IframePage({ type, openInTab = false, className, style }: IframePageProps) { const [iframeUrl, setIframeUrl] = useState(''); - const [loading, setLoading] = useState(false); + // const [loading, setLoading] = useState(false); useEffect(() => { const requestIframeUrl = async () => { - setLoading(true); + //setLoading(true); + Loading.show(); const [res] = await to(getRequestAPI(type)()); if (res && res.data) { setIframeUrl(res.data); } else { - setLoading(false); + Loading.hide(); + // setLoading(false); } }; @@ -83,12 +84,13 @@ function IframePage({ type, openInTab = false, className, style }: IframePagePro }, [type]); const hideLoading = () => { - setLoading(false); + // setLoading(false); + Loading.hide(); }; return (
- {loading && createPortal(, document.body)} + {/* {loading && createPortal(, document.body)} */} {openInTab && window.open(iframeUrl, '_blank')} />}
diff --git a/react-ui/src/enums/index.ts b/react-ui/src/enums/index.ts index a9dd4a0f..8cc2398e 100644 --- a/react-ui/src/enums/index.ts +++ b/react-ui/src/enums/index.ts @@ -33,7 +33,7 @@ export enum TensorBoardStatus { Unknown = 'Unknown', // 未知 Pending = 'Pending', // 启动中 Running = 'Running', // 运行中 - Terminated = 'Terminated', // 未启动或者已终止 + Terminated = 'Terminated', // 未启动 Failed = 'Failed', // 失败 } diff --git a/react-ui/src/pages/AutoML/components/ExperimentVisualResult/index.less b/react-ui/src/pages/AutoML/components/ExperimentVisualResult/index.less new file mode 100644 index 00000000..2cf61f91 --- /dev/null +++ b/react-ui/src/pages/AutoML/components/ExperimentVisualResult/index.less @@ -0,0 +1,8 @@ +.experiment-visual { + width: 100%; + height: 100%; + + &__empty { + height: 100%; + } +} diff --git a/react-ui/src/pages/AutoML/components/ExperimentVisualResult/index.tsx b/react-ui/src/pages/AutoML/components/ExperimentVisualResult/index.tsx index 1837d625..26ebbeca 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentVisualResult/index.tsx +++ b/react-ui/src/pages/AutoML/components/ExperimentVisualResult/index.tsx @@ -5,10 +5,15 @@ */ import IframePage, { IframePageType } from '@/components/IFramePage'; -import { runTensorBoardReq } from '@/services/experiment/index.js'; +import KFEmpty, { EmptyType } from '@/components/KFEmpty'; +import KFSpin from '@/components/KFSpin'; +import { TensorBoardStatus } from '@/enums'; +import { getTensorBoardStatusReq, runTensorBoardReq } from '@/services/experiment/index.js'; import { to } from '@/utils/promise'; import SessionStorage from '@/utils/sessionStorage'; -import { useEffect, useState } from 'react'; +import { LoadingOutlined } from '@ant-design/icons'; +import { useCallback, useEffect, useState } from 'react'; +import styles from './index.less'; type TensorBoardProps = { namespace?: string; @@ -16,28 +21,75 @@ type TensorBoardProps = { }; function ExperimentVisualResult({ namespace, path }: TensorBoardProps) { - const [tensorboardUrl, setTensorboardUrl] = useState(''); - useEffect(() => { - // 运行 TensorBoard - const runTensorBoard = async () => { - const params = { - namespace: namespace, - path: path, - }; - const [res] = await to(runTensorBoardReq(params)); - if (res && res.data) { - const url = res.data; - SessionStorage.setItem(SessionStorage.tensorBoardUrlKey, url); - setTensorboardUrl(url); + const [tensorboardUrl, setTensorboardUrl] = useState(undefined); + const [status, setStatus] = useState(undefined); + + // 获取 TensorBoard 状态 + const getTensorBoardStatus = useCallback(async () => { + const params = { + namespace: namespace, + path: path, + }; + const [res] = await to(getTensorBoardStatusReq(params)); + if (res && res.data) { + const status = res.data.status as TensorBoardStatus | undefined; + setStatus(res.data.status); + if (!status || status === TensorBoardStatus.Pending) { + setTimeout(() => { + getTensorBoardStatus(); + }, 5000); } + } + }, [namespace, path]); + + // 运行 TensorBoard + const runTensorBoard = useCallback(async () => { + const params = { + namespace: namespace, + path: path, }; + const [res] = await to(runTensorBoardReq(params)); + if (res && res.data) { + const url = res.data; + SessionStorage.setItem(SessionStorage.tensorBoardUrlKey, url); + setTensorboardUrl(url); + getTensorBoardStatus(); + } else { + setTensorboardUrl(null); + } + }, [namespace, path, getTensorBoardStatus]); + useEffect(() => { if (namespace && path) { runTensorBoard(); } - }, [namespace, path]); + }, [namespace, path, runTensorBoard]); - return <>{tensorboardUrl && }; + if (tensorboardUrl === null || status === TensorBoardStatus.Failed) { + return ( +
+ +
+ ); + } else if (status === TensorBoardStatus.Pending) { + return ( +
+ } size="large" /> +
+ ); + } else if (status === TensorBoardStatus.Running) { + return ( +
+ +
+ ); + } } export default ExperimentVisualResult; diff --git a/react-ui/src/pages/Dataset/components/ResourceList/index.tsx b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx index 2f1e8d4e..450a5c11 100644 --- a/react-ui/src/pages/Dataset/components/ResourceList/index.tsx +++ b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx @@ -16,6 +16,7 @@ import styles from './index.less'; export type ResourceListRef = { reset: () => void; + resetPage: () => void; }; type ResourceListProps = { @@ -97,6 +98,12 @@ function ResourceList( setDataList(undefined); setTotal(0); }, + resetPage: () => { + setPagination((prev) => ({ + ...prev, + current: 1, + })); + }, }; }, [], diff --git a/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx b/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx index fce95046..c21984ac 100644 --- a/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx +++ b/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx @@ -56,11 +56,13 @@ function ResourcePage({ resourceType }: ResourcePageProps) { // 选择类型 const chooseType = (record: CategoryData) => { + dataListRef.current?.resetPage(); setActiveType((prev) => (prev === record.name ? undefined : record.name)); }; // 选择 Tag const chooseTag = (record: CategoryData) => { + dataListRef.current?.resetPage(); setActiveTag((prev) => (prev === record.name ? undefined : record.name)); }; diff --git a/react-ui/src/pages/Mirror/Create/index.less b/react-ui/src/pages/Mirror/Create/index.less index 84f4c197..403a2a44 100644 --- a/react-ui/src/pages/Mirror/Create/index.less +++ b/react-ui/src/pages/Mirror/Create/index.less @@ -9,6 +9,14 @@ background-color: white; border-radius: 10px; + &__name-row { + :global { + .ant-form-item-row { + flex-wrap: nowrap; + } + } + } + &__type { color: @text-color; font-size: @font-size-input-lg; diff --git a/react-ui/src/pages/Mirror/Create/index.tsx b/react-ui/src/pages/Mirror/Create/index.tsx index a32e99a1..ebbd12e7 100644 --- a/react-ui/src/pages/Mirror/Create/index.tsx +++ b/react-ui/src/pages/Mirror/Create/index.tsx @@ -123,8 +123,6 @@ function MirrorCreate() { return true; }; - const descTitle = isAddVersion ? '版本描述' : '镜像描述'; - return (
@@ -161,6 +159,7 @@ function MirrorCreate() { message: '只支持小写字母、数字、点(.)、下划线(_)、中横线(-)、斜杠(/)', }, ]} + className={styles['mirror-create__content__name-row']} > + {!isAddVersion && ( + + + + + + + + )} (
- {!isPublic && ( + {!isPublic && record.status && record.status !== MirrorVersionStatus.Building && (