Merge pull request 'feat: 开发环境编辑器使用iframe' (#90) from dev-zw into dev

react-ui/config/routes.ts

@@ -119,6 +119,11 @@ export default [
         path: 'create',
         component: './DevelopmentEnvironment/Create',
       },
+      {
+        name: '编辑器',
+        path: 'editor',
+        component: './DevelopmentEnvironment/Editor',
+      },
     ],
   },
   {

react-ui/src/pages/DevelopmentEnvironment/Editor/index.tsx

@@ -0,0 +1,25 @@
+import { editorUrl, getSessionStorageItem, removeSessionStorageItem } from '@/utils/sessionStorage';
+import { useEffect, useState } from 'react';
+
+function DevEditor() {
+  const [iframeUrl, setIframeUrl] = useState('');
+  useEffect(() => {
+    const url = getSessionStorageItem(editorUrl) || '';
+    setIframeUrl(url);
+    return () => {
+      removeSessionStorageItem(editorUrl);
+    };
+  }, []);
+
+  // 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>;
+}
+export default DevEditor;

react-ui/src/pages/DevelopmentEnvironment/List/index.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/services/developmentEnvironment';
 import themes from '@/styles/theme.less';
 import { to } from '@/utils/promise';
+import { editorUrl, setSessionStorageItem } from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
 import { useNavigate } from '@umijs/max';
 import {
@@ -128,6 +129,16 @@ function EditorList() {
     });
   };
 
+  // 跳转编辑器页面
+  const gotoEditorPage = (e: React.MouseEvent, record: EditorData) => {
+    e.stopPropagation();
+    setSessionStorageItem(editorUrl, record.url);
+    navigate(`/developmentEnvironment/editor`);
+    setCacheState({
+      pagination,
+    });
+  };
+
   // 分页切换
   const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter, { action }) => {
     if (action === 'paginate') {
@@ -143,9 +154,7 @@ function EditorList() {
       width: '30%',
       render: (text, record) =>
         record.url ? (
-          <a href={record.url} target="_blank" rel="noreferrer">
-            {text}
-          </a>
+          <a onClick={(e) => gotoEditorPage(e, record)}>{text}</a>
         ) : (
           <span>{text ?? '--'}</span>
         ),

react-ui/src/pages/DevelopmentEnvironment/index.tsx

@@ -1,22 +0,0 @@
-import { getJupyterUrl } from '@/services/developmentEnvironment';
-import { to } from '@/utils/promise';
-import { useEffect, useState } from 'react';
-
-const DevelopmentEnvironment = () => {
-  const [iframeUrl, setIframeUrl] = useState('');
-  useEffect(() => {
-    requestJupyterUrl();
-  }, []);
-
-  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>;
-};
-export default DevelopmentEnvironment;

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -93,11 +93,11 @@ const EditPipeline = () => {
       return;
     }
 
-    // const [propsRes, propsError] = await to(propsRef.current.getFieldsValue());
-    // if (propsError) {
-    //   message.error('基本信息必填项需配置');
-    //   return;
-    // }
+    const [propsRes, propsError] = await to(propsRef.current.getFieldsValue());
+    if (propsError) {
+      message.error('节点必填项必须配置');
+      return;
+    }
     propsRef.current.propClose();
     setTimeout(() => {
       const data = graph.save();

react-ui/src/services/developmentEnvironment/index.ts

@@ -1,9 +1,8 @@
 import { request } from '@umijs/max';
 // 查询开发环境url
-export function getJupyterUrl(params: any) {
+export function getJupyterUrl() {
   return request(`/api/mmp/jupyter/getURL`, {
     method: 'GET',
-    params,
   });
 }
 

react-ui/src/utils/sessionStorage.ts

@@ -2,6 +2,8 @@
 export const mirrorNameKey = 'mirror-name';
 // 模型部署
 export const modelDeploymentInfoKey = 'model-deployment-info';
+// 编辑器 url
+export const editorUrl = 'editor-url';
 
 export const getSessionStorageItem = (key: string, isObject: boolean = false) => {
   const jsonStr = sessionStorage.getItem(key);

react-ui/tsconfig.json

@@ -20,6 +20,7 @@
     "noUnusedParameters": true, // 报告未使用的参数错误
     "incremental": true, // 通过读写磁盘上的文件来启用增量编译
     "noFallthroughCasesInSwitch": true, // 报告switch语句中的fallthrough案例错误
+    "strictNullChecks": true, // 启用严格的null检查
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"],