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;