feat： 环境详情差日志

src/api/api_manager.ts

@@ -54,6 +54,7 @@ const RESTAPI = {
   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`, // 删除用户算子环境
+  API_ACTORENV_DETAIL:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/detail`, // 查询应用环境的详情信息
   
 };
 

src/api/resourceCenter.ts

@@ -61,10 +61,18 @@ const deleteActorenv = (params: {id: string}) => {
 };
 
 
+// 查询应用环境的详情信息
+const getActorenvDetail = (params: {id: string}) => {
+  return request({
+    url:`${Api.API_ACTORENV_DETAIL}/${params.id}`,
+    method: "get",
+  });
+};
 export {
   getPublicEnv,
   getPublicProject,
   addActorenvBuildenv,
   getActorenvList,
   deleteActorenv,
+  getActorenvDetail,
 };

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

+.titleBox {
+	padding: 14px 24px;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	border-bottom: 1px solid rgba(235, 237, 240, 1);
+}
+.goBackIcon {
+	width: 22px;
+	height: 22px;
+	/* background-color: #fff; */
+	/* border-radius: 4px; */
+	/* margin-right: 12px; */
+	/* box-shadow: 0px 2px 5px 0px rgba(3, 47, 105, 0.09); */
+	cursor: pointer;
+}
+.title {
+	margin-left: 2px;
+	font-size: 18px;
+	line-height: 26px;
+	color: rgba(30, 38, 51, 1);
+	font-weight: 550;
+	margin-right: 16px;
+}
+.type {
+	background-color: rgba(235, 237, 240, 1);
+	font-size: 12px;
+	line-height: 20px;
+	padding: 1px 9px;
+	color: #565c66;
+	border-radius: 2px;
+}
+.baseTitle {
+	padding: 19px 24px 16px;
+	line-height: 24px;
+	font-size: 16px;
+	color: rgba(30, 38, 51, 1);
+	font-weight: 550;
+}
+.basicInfoBox {
+	border: 1px solid #ebedf0;
+	border-radius: 4px;
+	margin: 0 24px;
+}
+.logsTitle {
+	padding: 24px 24px 16px;
+	line-height: 24px;
+	font-size: 16px;
+	color: rgba(30, 38, 51, 1);
+	font-weight: 550;
+}
+.statusBox {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+.status {
+	margin-left: 4px;
+}

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

+import style from "./index.module.css";
+import React, { useState, useEffect, useMemo } from "react";
+import LogView from "@/views/Project/ProjectJobDetail/LogView";
+import { useNavigate } from "react-router-dom";
+import BasicInfo, {
+	IInfoItem,
+} from "@/views/ResourceCenter/components/BasinInfo";
+import { getActorenvDetail } from "@/api/resourceCenter";
+import useMyRequest from "@/hooks/useMyRequest";
+import goback from "@/assets/project/goback.svg";
+import { useLocation } from "react-router-dom";
+import jobFail from "@/assets/project/jobFail.svg";
+import jobRun from "@/assets/project/jobRun.svg";
+import jobSue from "@/assets/project/jobSue.svg";
+
 const SeeEnv = () => {
-	return <div>EnvironmentDetails</div>;
+	const navigate = useNavigate();
+	const location = useLocation();
+	const [id, setId] = useState("");
+	const [info, setInfo] = useState<any>({});
+	const [infoListTop, setInfoListTop] = useState<Array<IInfoItem>>([]);
+	const [infoListBot, setInfoListBot] = useState<Array<IInfoItem>>([]);
+
+	const getStatus = (item: any) => {
+		if (item.status === "PENDING") {
+			return (
+				<span className={style.statusBox}>
+					<img src={jobRun} alt="" />
+					<span className={style.status}>准备构建</span>
+				</span>
+			);
+		} else if (item.status === "CREATING") {
+			return (
+				<span className={style.statusBox}>
+					<img src={jobRun} alt="" />
+					<span className={style.status}>正在构建</span>
+				</span>
+			);
+		} else if (item.status === "FAILED") {
+			return (
+				<span className={style.statusBox}>
+					<img src={jobFail} alt="" />
+					<span className={style.status}>构建失败</span>
+				</span>
+			);
+		} else if (item.status === "CREATED") {
+			return (
+				<span className={style.statusBox}>
+					<img src={jobSue} alt="" />
+					<span className={style.status}>构建完成</span>
+				</span>
+			);
+		} else {
+			return "";
+		}
+	};
+
+	const { run, loading } = useMyRequest(getActorenvDetail, {
+		onSuccess: (res) => {
+			console.log(res);
+			setInfo(res.data);
+			let data = res.data;
+			setInfoListTop([
+				{
+					label: "构建状态",
+					value: getStatus(data),
+				},
+				{
+					label: "创建时间",
+					value: data.createdTime,
+				},
+				{
+					label: "构建时长",
+					value: data.costTime,
+				},
+				{
+					label: "构建成本",
+					value: "￥" + data.feeCost,
+				},
+				{
+					label: "基础环境",
+					value: data.baseEnvName,
+				},
+			]);
+			setInfoListBot([
+				{
+					label: "描述",
+					value: data.desc,
+				},
+			]);
+		},
+	});
+	useEffect(() => {
+		if (id) {
+			run({ id });
+		}
+	}, [id, run]);
+	useEffect(() => {
+		const locationInfo: any = location?.state;
+		console.log(locationInfo);
+		setId(locationInfo.id);
+	}, [location, setId]);
+
+	return (
+		<div className={style.seeEnv}>
+			<div className={style.titleBox}>
+				<img
+					className={style.goBackIcon}
+					src={goback}
+					alt=""
+					onClick={() => navigate("/product/resourceCenter/userResources")}
+				/>
+				<div className={style.title}>{info.title}</div>
+				<div className={style.type}>
+					{info.type === "BATCH" ? "批式环境" : "流式环境"}
+				</div>
+			</div>
+			<div className={style.infoBox}>
+				<div className={style.baseTitle}>基础信息</div>
+				<div className={style.basicInfoBox}>
+					<BasicInfo infoList={infoListTop} />
+					<BasicInfo infoList={infoListBot} />
+				</div>
+			</div>
+			<div className={style.logsBox}>
+				<div className={style.logsTitle}>日志</div>
+			</div>
+		</div>
+	);
 };
 
 export default SeeEnv;

src/views/ResourceCenter/components/BasinInfo/index.tsx

@@ -15,7 +15,7 @@ interface IProps {
 	infoList: IInfoItem[];
 }
 
-interface IInfoItem {
+export interface IInfoItem {
 	label: string;
 	value: string | ReactNode | ReactElement;
 	flex?: number;
@@ -55,7 +55,7 @@ const BasicInfo = (props: IProps) => {
 							<MyTooltip
 								title={typeof item.value === "string" ? item.value : ""}
 							>
-								<span>{typeof item.value === "string" ? item.value : ""}</span>
+								<span>{item.value}</span>
 							</MyTooltip>
 						</div>
 					);