diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts
index 82c568b..c2b1c2a 100644
--- a/react-ui/config/routes.ts
+++ b/react-ui/config/routes.ts
@@ -76,7 +76,7 @@ export default [
{
name: '开发环境',
path: '',
- component: './DevelopmentEnvironment/Editor',
+ component: './DevelopmentEnvironment/List',
},
{
name: '创建开发环境',
diff --git a/react-ui/src/components/FullScreenFrame/index.tsx b/react-ui/src/components/FullScreenFrame/index.tsx
index f93fcfa..7593c90 100644
--- a/react-ui/src/components/FullScreenFrame/index.tsx
+++ b/react-ui/src/components/FullScreenFrame/index.tsx
@@ -5,12 +5,21 @@ type FullScreenFrameProps = {
url: string;
className?: string;
style?: React.CSSProperties;
+ onload?: () => void;
+ onerror?: () => void;
};
-function FullScreenFrame({ url, className, style }: FullScreenFrameProps) {
+function FullScreenFrame({ url, className, style, onload, onerror }: FullScreenFrameProps) {
return (
- {url && }
+ {url && (
+
+ )}
);
}
diff --git a/react-ui/src/components/IFramePage/index.less b/react-ui/src/components/IFramePage/index.less
new file mode 100644
index 0000000..48c07f9
--- /dev/null
+++ b/react-ui/src/components/IFramePage/index.less
@@ -0,0 +1,5 @@
+.kf-iframe-page {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
diff --git a/react-ui/src/components/IFramePage/index.tsx b/react-ui/src/components/IFramePage/index.tsx
new file mode 100644
index 0000000..f114013
--- /dev/null
+++ b/react-ui/src/components/IFramePage/index.tsx
@@ -0,0 +1,57 @@
+import FullScreenFrame from '@/components/FullScreenFrame';
+import KFSpin from '@/components/KFSpin';
+import { getLabelStudioUrl } from '@/services/developmentEnvironment';
+import { to } from '@/utils/promise';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import './index.less';
+
+export enum IframePageType {
+ DatasetAnnotation = 'DatasetAnnotation', // 数据标注
+ AppDevelopment = 'AppDevelopment', // 应用开发
+}
+
+const getRequestAPI = (type: IframePageType): (() => Promise) => {
+ switch (type) {
+ case IframePageType.DatasetAnnotation:
+ return getLabelStudioUrl;
+ case IframePageType.AppDevelopment:
+ return () => Promise.resolve({ code: 200, data: 'http://172.20.32.181:30080/' });
+ }
+};
+
+type IframePageProps = {
+ type: IframePageType;
+ className?: string;
+ style?: React.CSSProperties;
+};
+
+function IframePage({ type, className, style }: IframePageProps) {
+ const [iframeUrl, setIframeUrl] = useState('');
+ const [loading, setLoading] = useState(false);
+ useEffect(() => {
+ requestIframeUrl();
+ }, []);
+ const requestIframeUrl = async () => {
+ setLoading(true);
+ const [res] = await to(getRequestAPI(type)());
+ if (res && res.data) {
+ setIframeUrl(res.data);
+ } else {
+ setLoading(false);
+ }
+ };
+
+ const hideLoading = () => {
+ setLoading(false);
+ };
+
+ return (
+
+ {loading && }
+
+
+ );
+}
+
+export default IframePage;
diff --git a/react-ui/src/pages/Application/index.tsx b/react-ui/src/pages/Application/index.tsx
index 77f7020..65a1efa 100644
--- a/react-ui/src/pages/Application/index.tsx
+++ b/react-ui/src/pages/Application/index.tsx
@@ -1,9 +1,7 @@
-import FullScreenFrame from '@/components/FullScreenFrame';
-import { useState } from 'react';
+import IframePage, { IframePageType } from '@/components/IFramePage';
function Application() {
- const [iframeUrl] = useState('http://172.20.32.181:30080/');
- return ;
+ return ;
}
export default Application;
diff --git a/react-ui/src/pages/DatasetPreparation/DatasetAnnotation/index.tsx b/react-ui/src/pages/DatasetPreparation/DatasetAnnotation/index.tsx
index 090d941..f5badc9 100644
--- a/react-ui/src/pages/DatasetPreparation/DatasetAnnotation/index.tsx
+++ b/react-ui/src/pages/DatasetPreparation/DatasetAnnotation/index.tsx
@@ -1,20 +1,7 @@
-import FullScreenFrame from '@/components/FullScreenFrame';
-import { getLabelStudioUrl } from '@/services/developmentEnvironment';
-import { to } from '@/utils/promise';
-import { useEffect, useState } from 'react';
+import IframePage, { IframePageType } from '@/components/IFramePage';
function DatasetAnnotation() {
- const [iframeUrl, setIframeUrl] = useState('');
- useEffect(() => {
- requestIframeUrl();
- }, []);
- const requestIframeUrl = async () => {
- const [res] = await to(getLabelStudioUrl());
- if (res && res.data) {
- setIframeUrl(res.data);
- }
- };
- return ;
+ return ;
}
export default DatasetAnnotation;
diff --git a/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx
index a9c43aa..4278a35 100644
--- a/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx
+++ b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx
@@ -48,7 +48,7 @@ const EditorRadioItems: KFRadioItem[] = [
];
function EditorCreate() {
- const navgite = useNavigate();
+ const navigate = useNavigate();
const [form] = Form.useForm();
const { message } = App.useApp();
const [resourceStandardList, filterResourceStandard] = useComputingResource();
@@ -68,7 +68,7 @@ function EditorCreate() {
const [res] = await to(createEditorReq(params));
if (res) {
message.success('创建成功');
- navgite(-1);
+ navigate(-1);
}
};
@@ -79,7 +79,7 @@ function EditorCreate() {
// 取消
const cancel = () => {
- navgite(-1);
+ navigate(-1);
};
return (
diff --git a/react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx
index 0b2c63d..35143e7 100644
--- a/react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx
+++ b/react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx
@@ -1,27 +1,37 @@
-// import { editorUrl, getSessionStorageItem, removeSessionStorageItem } from '@/utils/sessionStorage';
-import { getJupyterUrl } from '@/services/developmentEnvironment';
-import { to } from '@/utils/promise';
+/*
+ * @Author: 赵伟
+ * @Date: 2024-06-24 16:38:59
+ * @Description: 开发环境
+ */
+
+import {
+ editorUrlKey,
+ getSessionStorageItem,
+ removeSessionStorageItem,
+} from '@/utils/sessionStorage';
+// import { getJupyterUrl } from '@/services/developmentEnvironment';
+// import { to } from '@/utils/promise';
import { useEffect, useState } from 'react';
function DevEditor() {
const [iframeUrl, setIframeUrl] = useState('');
useEffect(() => {
- // const url = getSessionStorageItem(editorUrl) || '';
- // setIframeUrl(url);
- // return () => {
- // removeSessionStorageItem(editorUrl);
- // };
- requestJupyterUrl();
+ const url = getSessionStorageItem(editorUrlKey) || '';
+ setIframeUrl(url);
+ return () => {
+ removeSessionStorageItem(editorUrlKey);
+ };
+ // requestJupyterUrl();
}, []);
- const requestJupyterUrl = async () => {
- const [res, error] = await to(getJupyterUrl());
- if (res) {
- setIframeUrl(res.data as string);
- } else {
- console.log(error);
- }
- };
+ // const requestJupyterUrl = async () => {
+ // const [res, error] = await to(getJupyterUrl());
+ // if (res) {
+ // setIframeUrl(res.data as string);
+ // } else {
+ // console.log(error);
+ // }
+ // };
return ;
}
diff --git a/react-ui/src/pages/Mirror/Create/index.tsx b/react-ui/src/pages/Mirror/Create/index.tsx
index b0970cd..2f03a90 100644
--- a/react-ui/src/pages/Mirror/Create/index.tsx
+++ b/react-ui/src/pages/Mirror/Create/index.tsx
@@ -46,7 +46,7 @@ const mirrorRadioItems: KFRadioItem[] = [
];
function MirrorCreate() {
- const navgite = useNavigate();
+ const navigate = useNavigate();
const [form] = Form.useForm();
const [nameDisabled, setNameDisabled] = useState(false);
const { message } = App.useApp();
@@ -98,7 +98,7 @@ function MirrorCreate() {
const [res] = await to(createMirrorReq(params));
if (res) {
message.success('创建成功');
- navgite(-1);
+ navigate(-1);
}
};
@@ -109,7 +109,7 @@ function MirrorCreate() {
// 取消
const cancel = () => {
- navgite(-1);
+ navigate(-1);
};
// 上传前认证
diff --git a/react-ui/src/pages/ModelDeployment/Create/index.tsx b/react-ui/src/pages/ModelDeployment/Create/index.tsx
index a4a993a..5528c22 100644
--- a/react-ui/src/pages/ModelDeployment/Create/index.tsx
+++ b/react-ui/src/pages/ModelDeployment/Create/index.tsx
@@ -46,7 +46,7 @@ export type FormData = {
};
function ModelDeploymentCreate() {
- const navgite = useNavigate();
+ const navigate = useNavigate();
const [form] = Form.useForm();
const [resourceStandardList, filterResourceStandard] = useComputingResource();
const [operationType, setOperationType] = useState(ModelDeploymentOperationType.Create);
@@ -106,7 +106,7 @@ function ModelDeploymentCreate() {
const [res] = await to(request(params));
if (res) {
message.success('操作成功');
- navgite(-1);
+ navigate(-1);
}
};
@@ -117,7 +117,7 @@ function ModelDeploymentCreate() {
// 取消
const cancel = () => {
- navgite(-1);
+ navigate(-1);
};
const disabled = operationType !== ModelDeploymentOperationType.Create;
diff --git a/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx b/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
index a0f33e9..b182659 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
+++ b/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
@@ -11,9 +11,9 @@ type ExperimentTableProps = {
};
function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
- const navgite = useNavigate();
+ const navigate = useNavigate();
const gotoExperiment = (record: ExperimentInstance) => {
- navgite(`/pipeline/experiment/${record.workflow_id}/${record.id}`);
+ navigate(`/pipeline/experiment/${record.workflow_id}/${record.id}`);
};
return (
diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
index 17949dc..621efea 100644
--- a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
+++ b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
@@ -7,7 +7,7 @@ import WorkFlow from './WorkFlow';
import styles from './index.less';
function QuickStart() {
- const navgite = useNavigate();
+ const navigate = useNavigate();
const [scale, setScale] = useState(1);
const [space, setSpace] = useState(29);
const [canvasWidth, setCanvasWidth] = useState('100%');
@@ -58,7 +58,7 @@ function QuickStart() {
buttonTop={40}
x={left}
y={309}
- onClick={() => navgite('/datasetPreparation/datasetAnnotation')}
+ onClick={() => navigate('/datasetPreparation/datasetAnnotation')}
/>
navgite('/developmentEnvironment')}
+ onClick={() => navigate('/developmentEnvironment')}
/>
navgite('/pipeline/template')}
+ onClick={() => navigate('/pipeline/template')}
/>
navgite('/pipeline/experiment')}
+ onClick={() => navigate('/pipeline/experiment')}
/>
navgite('/modelDseployment')}
+ onClick={() => navigate('/modelDeployment')}
/>