feat: 新增应用环境联调完成

package.json

@@ -21,6 +21,7 @@
     "@types/node": "^16.11.33",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
+    "@uiw/react-codemirror": "^4.12.4",
     "ahooks": "^3.3.12",
     "axios": "^0.27.2",
     "babel-jest": "^27.4.2",
@@ -48,6 +49,7 @@
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
+    "js-base64": "^3.7.2",
     "kekule": "^0.9.7",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.4.5",
@@ -180,7 +182,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/standalone": "^7.19.5",
     "@types/crypto-js": "^4.1.1",
-    "@types/mockjs": "^1.0.6"
+    "@types/mockjs": "^1.0.6",
+    "raw-loader": "^4.0.2"
   }
 }

src/api/api_manager.ts

@@ -51,6 +51,7 @@ const RESTAPI = {
   API_GET_HARDWARE:`${BACKEND_API_URI_PREFIX}/cpp/cpce/hardware`, // 获取计算队列列表
   API_GET_PUBLIC_ENV:`${BACKEND_API_URI_PREFIX}/cpp/common/public/env`, // 获取公共环境
   API_GET_PUBLIC_PROJECT:`${BACKEND_API_URI_PREFIX}/cpp/common/public/project`, // 获取公共环境
+  API_ACTORENV_BUILDENV:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/buildenv`, // 新增应用环境
 };
 
 export default RESTAPI;

src/api/fileserver/CloudEController.ts

@@ -105,7 +105,7 @@ class CloudEController {
       headers["Cache-Control"] = "no-cache";
       headers["delfilepath"] = Base64.stringify(Utf8.parse(urls));
       let url = "";
-      if (getLoaclStorageOfKey("userinfo")) {
+      if (getLoaclStorageOfKey("userInfo")) {
         url += urlToken(filetoken, projectId);
       }
       return axios.get(APIOPTION() + "/delete/" + url, {
@@ -129,7 +129,7 @@ class CloudEController {
   ) {
     if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
-      if (getLoaclStorageOfKey("userinfo")) {
+      if (getLoaclStorageOfKey("userInfo")) {
         url += urlToken(filetoken, projectId);
       }
       return axios.get(
@@ -151,7 +151,7 @@ class CloudEController {
     if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
       // headers['parentName'] = ''
-      if (getLoaclStorageOfKey("userinfo")) {
+      if (getLoaclStorageOfKey("userInfo")) {
         url += urlToken(filetoken, projectId);
       }
       return axios.get(
@@ -172,7 +172,7 @@ class CloudEController {
   ) {
     if (ApiUtils.getAuthorizationHeaders(headers)) {
       headers["Cache-Control"] = "no-cache";
-      if (getLoaclStorageOfKey("userinfo")) {
+      if (getLoaclStorageOfKey("userInfo")) {
         url = urlToken(filetoken, projectId) + "&q=" + url;
       }
       return axios.get(
@@ -188,7 +188,7 @@ class CloudEController {
   // static JobOutFileListMove(url: any, filetoken: string, projectId: string) {
   //   if (ApiUtils.getAuthorizationHeaders(headers)) {
   //     headers["Cache-Control"] = "no-cache";
-  //     if (getLoaclStorageOfKey("userinfo")) {
+  //     if (getLoaclStorageOfKey("userInfo")) {
   //       url += urlToken(filetoken, projectId);
   //     }
   //     return axios.get(APIOPTION() + "/download" + url, {

src/api/fileserver/raysyncApi.ts

@@ -30,14 +30,14 @@ const APIPORT = function () {
 // 当前计算区
 // let currentRegion = localStorage.getItem("current-region");
 // let currentRegionJson = currentRegion && JSON.parse(currentRegion);
-// let user = getLoaclStorageOfKey("userinfo");
+// let user = getLoaclStorageOfKey("userInfo");
 
 // 文件路径
 // const FILEPATH =
 //   currentRegionJson &&
 //   currentRegionJson.location &&
 //   currentRegionJson.location === "ON_PREMISE" &&
-//   localStorage.getItem("userinfo")
+//   localStorage.getItem("userInfo")
 //     ? `/home/${user.name}`
 //     : "/home/cloudam";
 const FILEPATH_SHARE = "/share";
@@ -62,7 +62,7 @@ const urlToken = (filetoken: string, projectId: string) => {
 };
 
 const getUuid = () => {
-  const userInfo = getLoaclStorageOfKey("userinfo");
+  const userInfo = getLoaclStorageOfKey("userInfo");
   // 是否共有文件系统
   if (
     localStorage.getItem("isShareFileSystem") &&
@@ -75,12 +75,12 @@ const getUuid = () => {
 };
 
 const USERNAME = () => {
-  return getLoaclStorageOfKey("userinfo").name;
+  return getLoaclStorageOfKey("userInfo").name;
 };
 
 // 加密传输
 const encryptTransfer = () => {
-  const userInfo = getLoaclStorageOfKey("userinfo");
+  const userInfo = getLoaclStorageOfKey("userInfo");
   if (userInfo) {
     let encryptTransfer = userInfo.encryptTransfer;
     if (encryptTransfer) {

src/api/project_api.ts

@@ -354,26 +354,8 @@ const getHardwreList = (params: {zoneId: string, computeType: string}) => {
     params,
   });
 }
-// 获取公共项目
-const getPublicProject = () => {
-  return request({
-    url: Api.API_GET_PUBLIC_PROJECT,
-    method: "get",
-  });
-}
-
-// 获取公共环境
-const getPublicEnv = (params: {taskType: 'BATCH' | 'FLOW'}) => {
-  return request({
-    url: Api.API_GET_PUBLIC_ENV,
-    method: "get",
-    params,
-  });
-};
 
 export {
-  getPublicEnv,
-  getPublicProject,
   current,
   menu,
   getProjectList,

src/api/resourceCenter.ts

+import request from "@/utils/axios/service";
+import Api from "./api_manager";
+
+type addActorenvBuildenvParams = {
+  title: string,
+  desc: string,
+  baseEnvId: string,
+  type: "BATCH" | "FLOW",
+  filePaths: Array<string>,
+  bashScript: string,
+  computeType: string,
+  publicProjectId: string,
+}
+
+// 获取公共项目
+const getPublicProject = () => {
+  return request({
+    url: Api.API_GET_PUBLIC_PROJECT,
+    method: "get",
+  });
+}
+
+// 获取公共环境
+const getPublicEnv = (params: {taskType: 'BATCH' | 'FLOW'}) => {
+  return request({
+    url: Api.API_GET_PUBLIC_ENV,
+    method: "get",
+    params,
+  });
+};
+
+// 新增应用环境
+const addActorenvBuildenv = (params: addActorenvBuildenvParams) => {
+  return request({
+    url: Api.API_ACTORENV_BUILDENV,
+    method: "post",
+    data: {...params, name: '123'},
+  });
+};
+
+export {
+  getPublicEnv,
+  getPublicProject,
+  addActorenvBuildenv,
+};

src/components/CommonComponents/Code/index.tsx

+import CodeMirror from "@uiw/react-codemirror";
+
+type ICodeType = {
+	value: string;
+	onChange: any;
+	height?: string;
+	theme?: "light" | "dark";
+};
+
+const Code = (props: ICodeType) => {
+	const { value, onChange, height, theme = "dark" } = props;
+	return (
+		<CodeMirror
+			height={height || "100%"}
+			value={value}
+			onChange={(e) => onChange(e)}
+			theme={theme}
+		/>
+	);
+};
+export default Code;

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.module.css

@@ -32,7 +32,7 @@
 	display: flex;
 	border-radius: 4px;
 	margin-bottom: 24px;
-	flex: 1;
+	height: 600px;
 }
 .form {
 	width: 368px;

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.tsx

@@ -8,11 +8,15 @@ import { urlToken } from "@/api/fileserver/raysyncApi";
 import * as tus from "tus-js-client";
 import { useDropzone } from "react-dropzone";
 import SwitchBatchFolw from "@/views/ResourceCenter/components/SwitchBatchFolw";
+import { getLoaclStorageOfKey } from "@/api/fileserver/utils";
+import Code from "@/components/CommonComponents/Code";
+import * as Base64 from "js-base64";
+import { getDataFileToken, hpczone } from "@/api/project_api";
 import {
 	getPublicEnv,
 	getPublicProject,
-	getDataFileToken,
-} from "@/api/project_api";
+	addActorenvBuildenv,
+} from "@/api/resourceCenter";
 import classNames from "classnames";
 import { getTokenInfo } from "@/utils/util";
 
@@ -23,30 +27,41 @@ type IAddEnvironmentProps = {
 const AddEnvironment = (props: IAddEnvironmentProps) => {
 	const { setAddopen } = props;
 	let tokenInfo = getTokenInfo();
-	const [publicPrijectId, setPublicPrijectId] = useState("");
+	const [hpczoneList, setHpczoneList] = useState<Array<any>>([]);
+	const [publicProjectId, setPublicProjectId] = useState("");
 	const [publicZoneId, setPublicZoneId] = useState("");
+	const [computeType, setComputeType] = useState("");
 	const [fileToken, setFileToken] = useState("");
 	const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
-	// const [];
 	const [name, setName] = useState("");
+	const [desc, setDesc] = useState("");
 	const [baseEnvId, setBaseEnvId] = useState("");
+	const [filePaths, setFilePaths] = useState<Array<string>>([]);
+	// const [bashScript, setBashScript] = useState('');
 	const [envList, setEnvList] = useState<Array<any>>([]);
+	const [progress, setProgress] = useState("0%");
+	const [code, setCode] = useState("");
+	console.log(code);
 	const [nameHelper, setNameHelper] = useState({
 		error: false,
 		text: "30字符以内，仅限字母、数字、中文",
 	});
-	const [desc, setDesc] = useState("");
 	const onDrop = useCallback(
 		(acceptedFiles: any) => {
-			console.log(acceptedFiles);
+			let origin = "";
+			hpczoneList.forEach((item) => {
+				if (item.id === publicZoneId) {
+					origin = item?.storageConfig?.fileServerEndPoint;
+				}
+			});
 			const fileInfo = acceptedFiles[0];
-			const { fileName, path, size, file } = fileInfo;
+			const { path } = fileInfo;
+			const userInfo = getLoaclStorageOfKey("userInfo");
+			const homeDirectoryMountPoint = userInfo?.homeDirectoryMountPoint;
 			const url =
-				"https://fileserver.cloudam.cn" +
-				"/parallelupload/" +
-				urlToken(fileToken, publicPrijectId);
+				origin + "/parallelupload/" + urlToken(fileToken, publicProjectId);
 			let headers = {
-				username: publicPrijectId,
+				username: publicProjectId,
 				token: tokenInfo?.access_token || "",
 				filetoken: fileToken,
 				share: false,
@@ -57,76 +72,60 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 				parallelUploads: 1,
 				chunkSize: 5 * 1024 * 1024,
 				metadata: {
-					filepath: "/",
+					filepath: "/" + homeDirectoryMountPoint + "/" + path,
 				},
 				retryDelays: [0, 3000, 5000, 10000, 20000],
 				headers: headers,
+				onbeforeunload: () => {
+					setProgress(`0%`);
+				},
 				onError: function (error: string) {
 					console.log("Failed because: " + error);
 				},
 				onProgress: function (bytesUploaded: number, bytesTotal: number) {
-					console.log(bytesUploaded);
-					console.log(bytesTotal);
-					// var percentage = (bytesUploaded / bytesTotal) * 100;
-					// const json = {
-					//   name: upload.file.name,
-					//   bytesUploaded: bytesUploaded,
-					//   bytesTotal: bytesTotal,
-					//   percentage: percentage,
-					//   startTime: timeId,
-					//   isSuspend: false,
-					//   endTime: new Date().getTime(),
-					//   bytesUploaded2: bytesUploaded,
-					//   id: timeId,
-					//   statusMsg: "正在上传",
-					//   upload,
-					//   dir: "/ProjectData/",
-					// };
-					// uploadInfoStore?.setUploadInfo(item.id, {
-					//   ...item,
-					//   info: json,
-					// });
+					setProgress(`${bytesUploaded / bytesTotal}%`);
+					console.log(`${bytesUploaded / bytesTotal}%`);
 				},
 				onSuccess: function () {
-					console.log("3154");
-					// const json = {
-					//   id: timeId,
-					//   percentage: 100,
-					//   startTime: timeId,
-					//   endTime: new Date().getTime() + 1000,
-					//   statusMsg: "上传成功",
-					//   upload,
-					// };
-					// uploadInfoStore?.setUploadInfoList(item.id, json);
-
-					// callBack && callBack(upload, filepath);
+					setFilePaths([`/ProjectData/${homeDirectoryMountPoint}/${path}`]);
 				},
 			});
 			upload.start();
 		},
-		[fileToken, publicPrijectId, tokenInfo?.access_token]
+		[
+			fileToken,
+			publicProjectId,
+			tokenInfo?.access_token,
+			hpczoneList,
+			publicZoneId,
+		]
 	);
 	const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
 	const { run: getPublicEnvFn } = useMyRequest(getPublicEnv, {
 		onSuccess: (res: any) => {
 			console.log(res);
-			let arr = res.map((item: any) => {
+			let arr = res.data.map((item: any) => {
 				return {
 					label: item.title,
 					value: item.id,
+					computeType: item.computeType,
 				};
 			});
 			setEnvList(arr);
+			if (arr.length >= 1) {
+				setBaseEnvId(arr[0].value);
+				setComputeType(arr[0].computeType);
+			}
 		},
 	});
 
 	const { run: getPublicProjectFn } = useMyRequest(getPublicProject, {
 		onSuccess: (res: any) => {
 			console.log(res);
-			setPublicPrijectId(res[0].id);
-			setPublicZoneId(res[0].zoneId);
-			getDataFileTokenFn({ id: res[0].id });
+			setPublicProjectId(res.data[0].id);
+			setPublicZoneId(res.data[0].zoneId);
+			getDataFileTokenFn({ id: res.data[0].id });
 		},
 	});
 
@@ -137,6 +136,12 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 		},
 	});
 
+	const { run: addActorenvBuildenvFn } = useMyRequest(addActorenvBuildenv, {
+		onSuccess: (res: any) => {
+			console.log(res);
+		},
+	});
+
 	useEffect(() => {
 		getPublicProjectFn();
 	}, [getPublicProjectFn]);
@@ -145,12 +150,42 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 		getPublicEnvFn({ taskType });
 	}, [getPublicEnvFn, taskType]);
 
+	const { run: hpczoneFn } = useMyRequest(hpczone, {
+		onSuccess: (res: any) => {
+			setHpczoneList(res.data);
+		},
+	});
+
+	useEffect(() => {
+		hpczoneFn();
+	}, [hpczoneFn]);
+
 	const handleNameChange = (e: any) => {
-		console.log(e);
+		setName(e.target.value);
 	};
 
 	const handleDescChange = (e: any) => {
-		console.log(e);
+		setDesc(e.target.value);
+	};
+	const handelBaseEnvIdChange = (e: any) => {
+		setBaseEnvId(e);
+		let index = envList.findIndex((item) => {
+			return item.value === e;
+		});
+		setComputeType(envList[index].computeType);
+	};
+
+	const handleSubmit = () => {
+		addActorenvBuildenvFn({
+			title: name,
+			desc,
+			baseEnvId,
+			type: taskType,
+			filePaths,
+			bashScript: Base64.encode(code),
+			publicProjectId,
+			computeType,
+		});
 	};
 
 	return (
@@ -218,6 +253,7 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 								options={envList}
 								fullWidth
 								value={baseEnvId}
+								onChange={(e) => handelBaseEnvIdChange(e)}
 							></MySelect>
 						</div>
 						<div className={style.label}>
@@ -237,11 +273,17 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 						<div className={style.codeTitle}>
 							{taskType === "BATCH" ? "Shell脚本" : "Python脚本"}
 						</div>
-						<div className={style.code}></div>
+						<div className={style.code}>
+							<Code
+								value={code}
+								onChange={(e: string) => setCode(e)}
+								height="535px"
+							/>
+						</div>
 					</div>
 				</div>
 				<div className={style.button}>
-					<MyButton text="开始构建"></MyButton>
+					<MyButton text="开始构建" onClick={() => handleSubmit()}></MyButton>
 				</div>
 			</div>
 		</div>

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/index.tsx

@@ -7,7 +7,7 @@ import MyButton from "@/components/mui/MyButton";
 import AddEnvironment from "./AddEnvironment";
 
 const UserResourcesEnvironment = () => {
-	const [addOpen, setAddopen] = useState(true);
+	const [addOpen, setAddopen] = useState(false);
 	return (
 		<div className={style.environment}>
 			<div className={style.top}>