feat: 开发环境组件化

react-ui/src/components/FullScreenFrame/index.tsx

@@ -5,8 +5,8 @@ type FullScreenFrameProps = {
   url: string;
   className?: string;
   style?: React.CSSProperties;
-  onload?: () => void;
-  onerror?: () => void;
+  onload?: (e?: React.SyntheticEvent<HTMLIFrameElement, Event>) => void;
+  onerror?: (e?: React.SyntheticEvent<HTMLIFrameElement, Event>) => void;
 };
 
 function FullScreenFrame({ url, className, style, onload, onerror }: FullScreenFrameProps) {

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

@@ -2,6 +2,11 @@ import FullScreenFrame from '@/components/FullScreenFrame';
 import KFSpin from '@/components/KFSpin';
 import { getLabelStudioUrl } from '@/services/developmentEnvironment';
 import { to } from '@/utils/promise';
+import {
+  editorUrlKey,
+  getSessionStorageItem,
+  removeSessionStorageItem,
+} from '@/utils/sessionStorage';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import './index.less';
@@ -9,6 +14,7 @@ import './index.less';
 export enum IframePageType {
   DatasetAnnotation = 'DatasetAnnotation', // 数据标注
   AppDevelopment = 'AppDevelopment', // 应用开发
+  DevEnv = 'DevEnv', // 开发环境
 }
 
 const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
@@ -17,6 +23,8 @@ const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
       return getLabelStudioUrl;
     case IframePageType.AppDevelopment:
       return () => Promise.resolve({ code: 200, data: 'http://172.20.32.181:30080/' });
+    case IframePageType.DevEnv:
+      return () => Promise.resolve({ code: 200, data: getSessionStorageItem(editorUrlKey) || '' });
   }
 };
 
@@ -31,6 +39,11 @@ function IframePage({ type, className, style }: IframePageProps) {
   const [loading, setLoading] = useState(false);
   useEffect(() => {
     requestIframeUrl();
+    return () => {
+      if (type === IframePageType.DevEnv) {
+        removeSessionStorageItem(editorUrlKey);
+      }
+    };
   }, []);
   const requestIframeUrl = async () => {
     setLoading(true);

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

@@ -4,35 +4,9 @@
  * @Description: 开发环境
  */
 
-import {
-  editorUrlKey,
-  getSessionStorageItem,
-  removeSessionStorageItem,
-} from '@/utils/sessionStorage';
-// import { getJupyterUrl } from '@/services/developmentEnvironment';
-// import { to } from '@/utils/promise';
-import { useEffect, useState } from 'react';
+import IframePage, { IframePageType } from '@/components/IFramePage';
 
 function DevEditor() {
-  const [iframeUrl, setIframeUrl] = useState('');
-  useEffect(() => {
-    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);
-  //   }
-  // };
-
-  return <iframe style={{ width: '100%', height: '100%', border: 0 }} src={iframeUrl}></iframe>;
+  return <IframePage type={IframePageType.DevEnv}></IframePage>;
 }
 export default DevEditor;

react-ui/src/pages/Experiment/status.ts

@@ -1,6 +1,8 @@
 import { ExperimentStatus } from '@/enums';
 import themes from '@/styles/theme.less';
 
+export { ExperimentStatus };
+
 export interface ExperimentStatusInfo {
   label: string;
   color: string;

react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx

@@ -1,5 +1,5 @@
 import KFIcon from '@/components/KFIcon';
-import { ExperimentStatusValues, experimentStatusInfo } from '@/pages/Experiment/status';
+import { ExperimentStatus, experimentStatusInfo } from '@/pages/Experiment/status';
 import { ExperimentInstance } from '@/types';
 import { elapsedTime, formatDate } from '@/utils/date';
 import { useNavigate } from '@umijs/max';
@@ -13,7 +13,7 @@ type ExperimentTableProps = {
 function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
   const navigate = useNavigate();
   const gotoExperiment = (record: ExperimentInstance) => {
-    navigate(`/pipeline/experiment/${record.workflow_id}/${record.id}`);
+    navigate(`/pipeline/experiment/instance/${record.workflow_id}/${record.id}`);
   };
 
   return (
@@ -28,7 +28,7 @@ function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
         <div className={styles['experiment-table__content']} key={item.id}>
           <div className={styles['experiment-table__status']} style={{ paddingLeft: '6.5px' }}>
             <img
-              src={experimentStatusInfo[item.status as ExperimentStatusValues]?.icon}
+              src={experimentStatusInfo[item.status as ExperimentStatus]?.icon}
               width={17}
               height={17}
             />