Merge pull request '合并dev-zw' (#113) from dev-zw into dev

react-ui/config/routes.ts

@@ -76,7 +76,7 @@ export default [
       {
         name: '开发环境',
         path: '',
-        component: './DevelopmentEnvironment/Editor',
+        component: './DevelopmentEnvironment/List',
       },
       {
         name: '创建开发环境',

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 (
     <div className={classNames('kf-full-screen-frame', className ?? '')} style={style}>
-      {url && <iframe src={url} className="kf-full-screen-frame__iframe"></iframe>}
+      {url && (
+        <iframe
+          src={url}
+          className="kf-full-screen-frame__iframe"
+          onLoad={onload}
+          onError={onerror}
+        ></iframe>
+      )}
     </div>
   );
 }

react-ui/src/components/IFramePage/index.less

@@ -0,0 +1,5 @@
+.kf-iframe-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

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<any>) => {
+  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 (
+    <div className={classNames('kf-iframe-page', className)} style={style}>
+      {loading && <KFSpin />}
+      <FullScreenFrame url={iframeUrl} onload={hideLoading} onerror={hideLoading} />
+    </div>
+  );
+}
+
+export default IframePage;

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 <FullScreenFrame url={iframeUrl}></FullScreenFrame>;
+  return <IframePage type={IframePageType.AppDevelopment}></IframePage>;
 }
 
 export default Application;

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 <FullScreenFrame url={iframeUrl} />;
+  return <IframePage type={IframePageType.DatasetAnnotation}></IframePage>;
 }
 
 export default DatasetAnnotation;

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 (

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 <iframe style={{ width: '100%', height: '100%', border: 0 }} src={iframeUrl}></iframe>;
 }

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);
   };
 
   // 上传前认证

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;

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 (

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')}
           />
           <WorkFlow
             content="为开发者提供定制化编辑器，开发者可根据自己需求选择配置，保存编译器中的调试环境为镜像供训练使用"
@@ -66,7 +66,7 @@ function QuickStart() {
             buttonTop={20}
             x={left + 192 + space}
             y={301}
-            onClick={() => navgite('/developmentEnvironment')}
+            onClick={() => navigate('/developmentEnvironment')}
           />
           <WorkFlow
             content="为开发者提供定制化编辑器，开发者可根据自己需求选择配置，保存编译器中的调试环境为镜像供训练使用"
@@ -75,7 +75,7 @@ function QuickStart() {
             buttonTop={20}
             x={left + 2 * (192 + space)}
             y={276}
-            onClick={() => navgite('/pipeline/template')}
+            onClick={() => navigate('/pipeline/template')}
           />
           <WorkFlow
             content="开发者可以在这里运行流水线模板，产生实验实例，对比实验训练过程与产生的实验训练数据"
@@ -83,7 +83,7 @@ function QuickStart() {
             buttonTop={40}
             x={left + 3 * (192 + space)}
             y={295}
-            onClick={() => navgite('/pipeline/experiment')}
+            onClick={() => navigate('/pipeline/experiment')}
           />
           <WorkFlow
             content="支持异构硬件(CPU/GPU)的模型加载，高吞吐，低延迟；支持大规模复杂模型的一键部署，实时弹性扩缩容；提供完整的运维监控体系。"
@@ -92,7 +92,7 @@ function QuickStart() {
             buttonTop={20}
             x={left + 4 * (192 + space) + 60 + space}
             y={263}
-            onClick={() => navgite('/modelDseployment')}
+            onClick={() => navigate('/modelDeployment')}
           />
           <div
             className={styles['quick-start__content__canvas__model']}