feat: 新增应用环境校验 删除应用环境

src/api/api_manager.ts

@@ -53,6 +53,8 @@ const RESTAPI = {
   API_GET_PUBLIC_PROJECT:`${BACKEND_API_URI_PREFIX}/cpp/common/public/project`, // 获取公共环境
   API_ACTORENV_BUILDENV:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/buildenv`, // 新增应用环境
   API_ACTORENV_LIST:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/list`, // 查询用户的应用环境（算子环境）
+  API_ACTORENV_DELETE:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/delete`, // 删除用户算子环境
+  
 };
 
 export default RESTAPI;

src/api/resourceCenter.ts

@@ -52,10 +52,19 @@ const getActorenvList = (params: {
   });
 };
 
+// 删除用户算子环境
+const deleteActorenv = (params: {id: string}) => {
+  return request({
+    url:`${Api.API_ACTORENV_DELETE}/${params.id}`,
+    method: "get",
+  });
+};
+
 
 export {
   getPublicEnv,
   getPublicProject,
   addActorenvBuildenv,
   getActorenvList,
+  deleteActorenv,
 };

src/assets/resourceCenter/zip.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 6备份 5</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#136EEF" offset="0%"></stop>
+            <stop stop-color="#084FC2" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="个人资源-新建应用环境备份-6" transform="translate(-642.000000, -2505.000000)">
+            <g id="编组-20" transform="translate(106.000000, 996.000000)">
+                <g id="编组-10备份" transform="translate(392.000000, 1479.000000)">
+                    <g id="编组-18" transform="translate(97.000000, 30.000000)">
+                        <g id="编组-6备份-5" transform="translate(47.000000, 0.000000)">
+                            <rect id="矩形" x="0" y="0" width="32" height="32"></rect>
+                            <g id="编组-12备份-1" transform="translate(4.000000, 1.000000)" fill-rule="nonzero">
+                                <path d="M2.52631579,0 L21.4736842,0 C22.8689053,0 24,1.1192875 24,2.5 L24,22.5 L17.6842105,30 L2.52631579,30 C1.13106947,30 0,28.8806875 0,27.5 L0,2.5 C0,1.1192875 1.13106947,0 2.52631579,0 Z" id="矩形备份-11" fill="url(#linearGradient-1)"></path>
+                                <path d="M13.5789474,15 L13.5789474,18.5 C13.5788842,18.7321875 13.4965263,18.95475 13.35,19.1186875 C13.2034105,19.282875 13.0047789,19.375 12.7976842,19.375 L11.2023158,19.375 C10.9952842,19.375 10.7966526,19.2829375 10.65,19.118875 C10.5034105,18.954875 10.4210526,18.732125 10.4210526,18.4998125 L10.4210526,15 L13.5789474,15 Z M12.9473684,16.875 L11.0526316,16.875 L11.0526316,18.75 L12.9473684,18.75 L12.9473684,16.875 Z M13.5789474,11.25 L13.5789474,13.125 L11.6842105,13.125 L11.6842105,11.25 L13.5789474,11.25 Z M12.0032842,0 L12.0032842,1.7237625 L13.5789474,1.7237625 L13.5789474,3.447525 L12.0031579,3.447525 L12.0031579,5.043575 L13.5789474,5.043575 L13.5789474,6.7673125 L12.0032842,6.7673125 L12.0032842,8.4699375 L13.5789474,8.4699375 L13.5789474,10.1725625 L12.0032842,10.1725625 L12.0032842,11.875 L10.4210526,11.875 L10.4210526,10.172375 L11.9967158,10.172375 L11.9967158,8.4698125 L10.4210526,8.4698125 L10.4210526,6.7673125 L11.9967158,6.7673125 L11.9967158,5.043575 L10.4210526,5.043575 L10.4210526,3.3198125 L11.9967158,3.3198125 L11.9967158,1.7237625 L10.4210526,1.7237625 L10.4210526,0 L12.0032842,0 Z" id="形状" fill="#FFFFFF"></path>
+                                <polygon id="矩形备份-13" fill="#FFFFFF" opacity="0.5" points="17.6842105 22.5 24 22.5 20.8421053 26.25 17.6842105 30"></polygon>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/mui/MyTableNew.tsx

@@ -40,7 +40,7 @@ interface IMyTableProps {
 	totalElements?: number; // 数据总量 不止是列表渲染的长度
 	sortState?: sortState; // 排序状态
 	setSortState?: any; // 设置排序状态
-	paginationType?: "simple" | "complex"; // 分页组件的类型   simple简介式  complex复杂、带每页数量切换、总数等
+	paginationType?: "simple" | "complex"; // 分页组件的类型   simple简洁式  complex复杂、带每页数量切换、总数等
 	rowsPerPage?: number; // 每页多少条数据
 	handleChangeRowsPerPage?: any; // 每页多少条数据变化
 	nodataText?: any; // 无数据文案

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

@@ -89,6 +89,12 @@
 	position: relative;
 	margin-bottom: 24px;
 }
+.tips {
+	color: rgba(255, 78, 78, 1);
+	margin-top: 2px;
+	line-height: 20px;
+	font-size: 12px;
+}
 .uploadBox {
 	border-radius: 4px;
 	border: 1px dashed #dde1e6;
@@ -97,6 +103,31 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(194, 198, 204, 1);
+}
+.uploaderIcon {
+	margin-bottom: 8px;
+}
+
+.progressContent {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-bottom: 7px;
+}
+.progressBox {
+	width: 200px;
+	border-radius: 3px;
+	background-color: rgba(235, 237, 240, 1);
+	margin-right: 12px;
+	height: 6px;
+}
+.progress {
+	border-radius: 3px;
+	background-color: rgba(19, 110, 250, 1);
+	height: 6px;
 }
 .isDragActive {
 	border: 1px dashed #000;
@@ -104,3 +135,10 @@
 .formItemHaveHelperText {
 	margin-bottom: 10px;
 }
+.uploadAgain {
+	cursor: pointer;
+	color: rgba(19, 110, 250, 1);
+	font-size: 12px;
+	line-height: 20px;
+	margin-top: 12px;
+}

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

+import { deleteActorenv } from "@/api/resourceCenter";
+import useMyRequest from "@/hooks/useMyRequest";
+import { useMessage } from "@/components/MySnackbar";
+import MyDialog from "@/components/mui/MyDialog";
+
+interface IDeleteEnvironmentProps {
+	id: string;
+	open: boolean;
+	setDeleteOpen: any;
+}
+
+const DeleteEnvironment = (props: IDeleteEnvironmentProps) => {
+	const { open, id, setDeleteOpen } = props;
+	const Message = useMessage();
+	const { run, loading } = useMyRequest(deleteActorenv, {
+		onSuccess: () => {
+			setDeleteOpen(false);
+			Message.success("删除成功");
+		},
+	});
+	const handleConfirm = () => {
+		console.log(id);
+		run({ id });
+	};
+	return (
+		<MyDialog
+			okColor="error"
+			open={open}
+			onClose={() => setDeleteOpen(false)}
+			title="删除环境"
+			okText="删除"
+			onConfirm={() => handleConfirm()}
+			loading={loading}
+		>
+			<span>删除后无法恢复，确认删除吗？</span>
+		</MyDialog>
+	);
+};
+
+export default DeleteEnvironment;

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

+const EnvironmentDetails = () => {
+	return <div>EnvironmentDetails</div>;
+};
+
+export default EnvironmentDetails;

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

@@ -10,3 +10,11 @@
 .tableBox {
 	height: calc(100vh - 177px);
 }
+.statusBox {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+.status {
+	margin-left: 4px;
+}

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

@@ -7,7 +7,12 @@ import MyButton from "@/components/mui/MyButton";
 import MyTable from "@/components/mui/MyTableNew";
 import useMyRequest from "@/hooks/useMyRequest";
 import { getActorenvList } from "@/api/resourceCenter";
+import moment from "moment";
+import jobFail from "@/assets/project/jobFail.svg";
+import jobRun from "@/assets/project/jobRun.svg";
+import jobSue from "@/assets/project/jobSue.svg";
 import AddEnvironment from "./AddEnvironment";
+import DeleteEnvironment from "./DeleteEnvironment";
 
 const UserResourcesEnvironment = () => {
 	const [addOpen, setAddopen] = useState(false);
@@ -17,6 +22,8 @@ const UserResourcesEnvironment = () => {
 	const [page, setPage] = useState(0);
 	const [count, setCount] = useState(0);
 	const [size, setSize] = useState(20);
+	const [id, setId] = useState("");
+	const [deleteOpen, setDeleteOpen] = useState(false);
 	const headCells: Array<any> = [
 		{
 			id: "title",
@@ -28,9 +35,9 @@ const UserResourcesEnvironment = () => {
 			width: 100,
 		},
 		{
-			id: "",
+			id: "createdTime",
 			label: "创建时间",
-			width: 160,
+			width: 180,
 		},
 		{
 			id: "status",
@@ -40,7 +47,7 @@ const UserResourcesEnvironment = () => {
 		{
 			id: "caozuo",
 			label: "操作",
-			width: 160,
+			width: 140,
 		},
 	];
 	const { run: getList } = useMyRequest(getActorenvList, {
@@ -56,13 +63,15 @@ const UserResourcesEnvironment = () => {
 	};
 
 	useEffect(() => {
-		getList({
-			page,
-			size,
-			title,
-			type,
-		});
-	}, [getList, page, size, title, type]);
+		if (!addOpen && !deleteOpen) {
+			getList({
+				page,
+				size,
+				title,
+				type,
+			});
+		}
+	}, [getList, page, size, title, type, addOpen, deleteOpen]);
 
 	const renderType = (item: any) => {
 		if (item.type === "BATCH") {
@@ -76,18 +85,47 @@ const UserResourcesEnvironment = () => {
 
 	const renderStatus = (item: any) => {
 		if (item.status === "PENDING") {
-			return "准备构建";
+			return (
+				<div className={style.statusBox}>
+					<img src={jobRun} alt="" />
+					<span className={style.status}>准备构建</span>
+				</div>
+			);
 		} else if (item.status === "CREATING") {
-			return "正在构建";
+			return (
+				<div className={style.statusBox}>
+					<img src={jobRun} alt="" />
+					<span className={style.status}>正在构建</span>
+				</div>
+			);
 		} else if (item.status === "FAILED") {
-			return "构建失败";
+			return (
+				<div className={style.statusBox}>
+					<img src={jobFail} alt="" />
+					<span className={style.status}>构建失败</span>
+				</div>
+			);
 		} else if (item.status === "CREATED") {
-			return "构建完成";
+			return (
+				<div className={style.statusBox}>
+					<img src={jobSue} alt="" />
+					<span className={style.status}>构建完成</span>
+				</div>
+			);
 		} else {
 			return "";
 		}
 	};
 
+	const renderCreatedTime = (item: any) => {
+		return moment(new Date(item.createdTime)).format("yyyy-MM-DD hh:mm:ss");
+	};
+
+	const handleDelete = (item: any) => {
+		setId(item.id);
+		setDeleteOpen(true);
+	};
+
 	const renderButtons = (item: any) => {
 		if (item.status === "FAILED") {
 			return (
@@ -105,6 +143,7 @@ const UserResourcesEnvironment = () => {
 						size="medium"
 					/>
 					<MyButton
+						onClick={() => handleDelete(item)}
 						text="删除"
 						style={{
 							position: "relative",
@@ -190,6 +229,7 @@ const UserResourcesEnvironment = () => {
 						type: renderType(item),
 						status: renderStatus(item),
 						caozuo: renderButtons(item),
+						createdTime: renderCreatedTime(item),
 					}))}
 					headCells={headCells}
 					fixedHead={true}
@@ -200,6 +240,13 @@ const UserResourcesEnvironment = () => {
 				></MyTable>
 			</div>
 			{addOpen && <AddEnvironment setAddopen={setAddopen}></AddEnvironment>}
+			{deleteOpen && (
+				<DeleteEnvironment
+					id={id}
+					open={deleteOpen}
+					setDeleteOpen={setDeleteOpen}
+				></DeleteEnvironment>
+			)}
 		</div>
 	);
 };