Merge branch 'feat-20221012-environment' of http://120.77.149.83/root/bkunyun…

Merge branch 'feat-20221012-environment' of http://120.77.149.83/root/bkunyun into feat-20221012-environment

src/components/CommonComponents/CardTable/index.tsx

+import style from "./index.module.css";
+
+const CardTable = () => {
+	return <div>CardTable</div>;
+};
+
+export default CardTable;

src/components/CommonComponents/Code/index.tsx

@@ -4,14 +4,19 @@ type ICodeType = {
 	value: string;
 	onChange: any;
 	height?: string;
+	width?: string;
+	maxWidth?: string;
 	theme?: "light" | "dark";
 };
 
 const Code = (props: ICodeType) => {
-	const { value, onChange, height, theme = "dark" } = props;
+	const { value, onChange, height, theme = "dark", width, maxWidth } = props;
 	return (
 		<CodeMirror
 			height={height || "100%"}
+			// maxWidth="200px"
+			width={width || "100%"}
+			maxWidth={maxWidth || "100%"}
 			value={value}
 			onChange={(e) => onChange(e)}
 			theme={theme}

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

@@ -36,6 +36,7 @@
 }
 .form {
 	width: 368px;
+	min-width: 368px;
 	box-sizing: border-box;
 	padding: 16px 24px;
 	border: 1px solid #ebedf0;

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

@@ -48,6 +48,7 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 	const [envList, setEnvList] = useState<Array<any>>([]); // 基础环境列表   和taskType环境类型有关
 	const [progress, setProgress] = useState("0%"); // 上传压缩包进度
 	const [code, setCode] = useState(""); // 脚本内容
+	const [codeWidth, setCodeWidth] = useState(0);
 	const [upload, setUpload] = useState<any>(() => {}); // 上传压缩包实例   用于暂停（取消上传）upload.abort(true);
 	const [nameHelper, setNameHelper] = useState({
 		error: false,
@@ -297,6 +298,16 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 		setFilePaths([]);
 	};
 
+	const getCodeWidth = () => {
+		const addEnvironmentCodeElement =
+			document.getElementById("addEnvironmentCode");
+		setCodeWidth(addEnvironmentCodeElement?.offsetWidth || 0);
+	};
+
+	useEffect(() => {
+		getCodeWidth();
+	}, []);
+
 	return (
 		<div className={style.addEnvironment}>
 			<div className={style.left}>
@@ -453,11 +464,12 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 						<div className={style.codeTitle}>
 							{taskType === "BATCH" ? "Shell脚本" : "Python脚本"}
 						</div>
-						<div className={style.code}>
+						<div className={style.code} id="addEnvironmentCode">
 							<Code
 								value={code}
 								onChange={(e: string) => setCode(e)}
 								height="535px"
+								width={`${codeWidth}px`}
 							/>
 						</div>
 					</div>

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

+.seeEnv {
+	position: relative;
+}
 .titleBox {
 	padding: 14px 24px;
 	display: flex;
@@ -8,10 +11,6 @@
 .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 {

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

 import style from "./index.module.css";
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import LogView from "@/views/ResourceCenter/components/LogView";
 import { useNavigate } from "react-router-dom";
 import BasicInfo, {
@@ -9,6 +9,7 @@ import { getActorenvDetail } from "@/api/resourceCenter";
 import useMyRequest from "@/hooks/useMyRequest";
 import goback from "@/assets/project/goback.svg";
 import { useLocation } from "react-router-dom";
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
 import jobFail from "@/assets/project/jobFail.svg";
 import jobRun from "@/assets/project/jobRun.svg";
 import jobSue from "@/assets/project/jobSue.svg";
@@ -18,8 +19,34 @@ const SeeEnv = () => {
 	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 [infoListTop, setInfoListTop] = useState<Array<IInfoItem>>([
+		{
+			label: "构建状态",
+			value: "",
+		},
+		{
+			label: "创建时间",
+			value: "",
+		},
+		{
+			label: "构建时长",
+			value: "",
+		},
+		{
+			label: "构建成本",
+			value: "",
+		},
+		{
+			label: "基础环境",
+			value: "",
+		},
+	]);
+	const [infoListBot, setInfoListBot] = useState<Array<IInfoItem>>([
+		{
+			label: "描述",
+			value: "",
+		},
+	]);
 	const [logs, setLogs] = useState<Array<any>>([]);
 
 	const getStatus = (item: any) => {
@@ -58,7 +85,6 @@ const SeeEnv = () => {
 
 	const { run, loading } = useMyRequest(getActorenvDetail, {
 		onSuccess: (res) => {
-			console.log(res);
 			setInfo(res.data);
 			let data = res.data;
 			setInfoListTop([
@@ -112,6 +138,7 @@ const SeeEnv = () => {
 
 	return (
 		<div className={style.seeEnv}>
+			<MyCircularProgress loading={loading} />
 			<div className={style.titleBox}>
 				<img
 					className={style.goBackIcon}
@@ -134,7 +161,7 @@ const SeeEnv = () => {
 			<div className={style.logsBox}>
 				<div className={style.logsTitle}>日志</div>
 				<div className={style.LogViewBox}>
-					<LogView logs={logs}></LogView>
+					{!loading && <LogView logs={logs}></LogView>}
 				</div>
 			</div>
 		</div>

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

@@ -54,7 +54,7 @@ const UserResourcesEnvironment = () => {
 			width: 140,
 		},
 	];
-	const { run: getList } = useMyRequest(getActorenvList, {
+	const { run: getList, loading } = useMyRequest(getActorenvList, {
 		onSuccess: (res) => {
 			setList(res.data.content);
 			setCount(res.data.totalPages - 1);
@@ -257,6 +257,7 @@ const UserResourcesEnvironment = () => {
 					nodataText="暂无应用环境"
 					paginationType="complex"
 					totalElements={totalElements}
+					loading={loading}
 				></MyTable>
 			</div>
 			{addOpen && <AddEnvironment setAddopen={setAddopen}></AddEnvironment>}

src/views/ResourceCenter/UserResources/index.tsx

 import style from "./index.module.css";
 import usePass from "@/hooks/usePass";
 import UserResourcesEnvironment from "./UserResourcesEnvironment";
-import { useMemo, useState } from "react";
-import classNames from "classnames";
+import { useMemo } from "react";
 import Tabs from "@/components/mui/MyTabs";
 import WorkflowOperator from "./WorkflowOperator";
 import OperatorDetails from "./WorkflowOperator/components/OperatorDetails";

src/views/demo/CardTableDemo/index.tsx

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

src/views/demo/index.tsx

 import MyTableDemo from "./MyTableDemo";
 import QueueSelectDemo from "./QueueSelectDemo";
 import IconfontDemo from "./IconfontDemo";
+import CardTableDemo from "./CardTableDemo";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import { useState } from "react";
 import styles from "./index.module.css";
 
 const Demo = () => {
 	const radioOptionsArr = [
+		{
+			value: "cardTable",
+			label: "cardTable",
+		},
 		{
 			value: "iconfont",
 			label: "iconfont",
@@ -27,7 +32,7 @@ const Demo = () => {
 	const handleRadio = (e: string) => {
 		setSelectDemo(e);
 	};
-	const [selectDemo, setSelectDemo] = useState("iconfont");
+	const [selectDemo, setSelectDemo] = useState("cardTable");
 
 	return (
 		<div className={styles.demoBox}>
@@ -37,6 +42,7 @@ const Demo = () => {
 				handleRadio={handleRadio}
 			/>
 			<div className={styles.demoContentBox}>
+				{selectDemo === "cardTable" && <CardTableDemo></CardTableDemo>}
 				{selectDemo === "iconfont" && <IconfontDemo></IconfontDemo>}
 				{selectDemo === "队列选择器" && <QueueSelectDemo></QueueSelectDemo>}
 				{selectDemo === "表格" && <MyTableDemo></MyTableDemo>}