feat: 开发环境列表发布

react-ui/config/routes.ts

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

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']}