Merge branch 'feat-20221012-environment' into 'staging'

Feat 20221012 environment

See merge request !165

src/api/api_prefix.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:17:48
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-27 15:39:05
+ * @LastEditTime: 2022-10-28 13:58:40
  * @FilePath: /bkunyun/src/api/api_prefix.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -36,7 +36,7 @@ switch (process.env.REACT_APP_ENV) {
       BACKEND_API_URI_PREFIX = "https://www.cloudam.cn";
     }
     else {
-      BACKEND_API_URI_PREFIX = "http://47.57.4.97";
+      BACKEND_API_URI_PREFIX = "http://47.75.104.171";
     }
     break;
 }

src/components/mui/MyTooltip.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-11 11:56:58
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-08 13:55:20
+ * @LastEditTime: 2022-10-28 15:27:23
  * @FilePath: /bkunyun/src/components/mui/MyTooltip.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,7 +11,7 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { useMemo } from "react";
 
 interface IMyTooltipProps extends Omit<TooltipProps, "title"> {
-	title?: string | boolean;
+	title?: string | boolean | JSX.Element | React.ReactNode;
 }
 
 const theme = createTheme({

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.module.css

@@ -33,6 +33,8 @@
 
 .content {
 	display: flex;
+	/* position: relative; */
+	/* overflow: hidden; */
 	border-radius: 4px;
 	margin-bottom: 20px;
 	height: 600px;
@@ -103,3 +105,7 @@
 	color: #ff4e4e;
 	background-color: #ffe8e8;
 }
+
+.react-flow > div:last-child {
+	display: none;
+}

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-18 16:12:55
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-27 18:43:48
+ * @LastEditTime: 2022-10-28 16:48:21
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -47,6 +47,7 @@ import { saveBatchActor } from "@/api/project_api";
 import positionTransform from "@/views/CustomOperator/utils";
 
 import style from "./index.module.css";
+import MyTooltip from "@/components/mui/MyTooltip";
 
 interface IAddOperator {
 	pageType: string;
@@ -98,8 +99,6 @@ const AddOperator = observer((props: IAddOperator) => {
 	/** 是否打开帮助手册 */
 	const [tipsOpen, setTipsOpen] = useState<boolean>(false);
 	/** 详情数据 */
-	const [detailData, setDetailData] = useState<any>({});
-	/** 详情数据 */
 	const [detailInfo, setDetailInfo] = useState<any>();
 
 	const { handleCheck } = useCheckOperator(
@@ -127,8 +126,6 @@ const AddOperator = observer((props: IAddOperator) => {
 	const { run: fetchOperatorDetail } = useMyRequest(getOperatorDetail, {
 		onSuccess: (res: any) => {
 			if (res.message === "success") {
-				/** 设置详情数据 */
-				setDetailData(res.data);
 				/** 批算子数据 */
 				const batchData = res?.data?.filter((item: any) => {
 					return item.type === "BATCH";
@@ -180,13 +177,19 @@ const AddOperator = observer((props: IAddOperator) => {
 				if (type === "BATCH" && !envId) {
 					setOperatorList(flowData || []);
 				} else {
-					setCode(JSON.stringify(res?.data?.parameters, null, "\t"));
+					setCode(JSON.stringify(determineInfo?.parameters, null, "\t"));
 				}
-				setDetailInfo(res.data);
+				setDetailInfo(determineInfo);
 			}
 		},
 	});
 
+	// 调用详情数据
+	useEffect(() => {
+		if (!detailsId) return;
+		fetchOperatorDetail(detailsId);
+	}, [detailsId, fetchOperatorDetail]);
+
 	/** 保存修改算子 */
 	const { run: runSaveOperator } = useMyRequest(saveOperator, {
 		onSuccess: (res: any) => {
@@ -197,6 +200,7 @@ const AddOperator = observer((props: IAddOperator) => {
 			}
 		},
 	});
+
 	// 基于流算子构建批算子
 	const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
 		onSuccess: (res) => {
@@ -206,11 +210,7 @@ const AddOperator = observer((props: IAddOperator) => {
 		},
 	});
 
-	useEffect(() => {
-		if (!detailsId) return;
-		fetchOperatorDetail(detailsId);
-	}, [detailsId, fetchOperatorDetail]);
-
+	// 参数配置失焦校验
 	const paramsConfigBlur = useCallback(() => {
 		let result, resultError;
 		if (batchBuildType === "OPERATOR") return;
@@ -271,6 +271,7 @@ const AddOperator = observer((props: IAddOperator) => {
 		setBatchBuildType(val);
 	};
 
+	/** 构建环境提交 */
 	const handleSubmit = useCallback(() => {
 		const resultErrors = checkFormData(
 			formData,
@@ -342,6 +343,22 @@ const AddOperator = observer((props: IAddOperator) => {
 		taskType,
 	]);
 
+	const scriptHelp = useMemo(() => {
+		let newText = "";
+		try {
+			const newData = JSON.parse(code);
+			const nameArr = newData?.map((item: any) => {
+				return `${item.name}: ~{$actorName$.${item.name}}`;
+			});
+			newText = nameArr?.join("\n");
+		} catch (err) {
+			console.log(err);
+		}
+		console.log(newText, "newText");
+
+		return <pre>{newText}</pre>;
+	}, [code]);
+
 	return (
 		<div className={style.addOperatorBox}>
 			<div className={style.left}>
@@ -568,6 +585,7 @@ const AddOperator = observer((props: IAddOperator) => {
 							</FormItemBox>
 						</div>
 					)}
+					<div></div>
 				</div>
 				{taskType === "FLOW" ? null : (
 					<div
@@ -575,7 +593,16 @@ const AddOperator = observer((props: IAddOperator) => {
 						style={{ marginBottom: flowParametersError ? "56px" : "24px" }}
 					>
 						<div className={style.codeTitle}>
-							{batchBuildType === "ENVIRONMENT" ? "运行脚本" : "流程编排"}
+							<span>
+								{batchBuildType === "ENVIRONMENT" ? "运行脚本" : "流程编排"}
+							</span>
+							{batchBuildType === "ENVIRONMENT" ? (
+								<MyTooltip title={scriptHelp}>
+									<span style={{ color: "#1370FF", cursor: "pointer" }}>
+										帮助手册
+									</span>
+								</MyTooltip>
+							) : null}
 						</div>
 						{batchBuildType === "ENVIRONMENT" ? (
 							<div className={style.code}>
@@ -588,6 +615,7 @@ const AddOperator = observer((props: IAddOperator) => {
 						) : (
 							<div
 								id="customOperatorFlow"
+								className="reactFlowBox"
 								style={{
 									position: "relative",
 									height: 400,

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/utils.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-20 17:36:14
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-27 11:30:07
+ * @LastEditTime: 2022-10-28 15:22:13
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/utils.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -125,7 +125,7 @@ export const checkParamsConfig = (val: string) => {
 }
 
 export const initCode =  [{
-    "name" : "timeout",
+    "name" : "paramName",
    "classType" : "INT",
     "required" : false,
     "defaultValue" : 10000,
@@ -154,7 +154,6 @@ export const initCode =  [{
 }]
 
 
-
 export const text = `{
   // 参数名, 必填, 在15字符以内，仅限大小写字母、数字、"_",且只能以大小写字母开头
   "name" : "timeout",

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.module.css

 .itemBox {
-	width: 334px;
 	height: 108px;
 	padding: 20px;
-	margin: 0 20px 20px 0;
 	cursor: pointer;
 	background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
 	box-shadow: 0px 3px 12px 0px rgba(3, 47, 105, 0.09);

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.tsx

@@ -52,6 +52,10 @@ const OperatorCard = observer((props: IProps) => {
 		});
 	};
 
+	const handleMenuBox = (event: any) => {
+		event.stopPropagation();
+	};
+
 	return (
 		<div className={styles.itemBox} onClick={handleToSeeOperator}>
 			<div className={styles.itemHeaderBox}>
@@ -62,23 +66,25 @@ const OperatorCard = observer((props: IProps) => {
 						{operatorType[type] || ""}
 					</span>
 				</div>
-				<MyMenu
-					value=""
-					options={[{ label: "升级", value: "upgrade" }]}
-					hasTriangle={false}
-					setValue={onClickOperation}
-					sx={{
-						zIndex: 1601,
-					}}
-				>
-					<span className={styles.operationBox}>
-						<img
-							style={{ width: 16, height: 16 }}
-							src={expandOperationSvg}
-							alt=""
-						/>
-					</span>
-				</MyMenu>
+				<div className={styles.menuBox} onClick={(e) => handleMenuBox(e)}>
+					<MyMenu
+						value=""
+						options={[{ label: "升级", value: "upgrade" }]}
+						hasTriangle={false}
+						setValue={onClickOperation}
+						sx={{
+							zIndex: 1601,
+						}}
+					>
+						<span className={styles.operationBox}>
+							<img
+								style={{ width: 16, height: 16 }}
+								src={expandOperationSvg}
+								alt=""
+							/>
+						</span>
+					</MyMenu>
+				</div>
 			</div>
 			<div className={styles.itemContentBox}>
 				<p className={styles.infoBox}>

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-27 17:22:54
+ * @LastEditTime: 2022-10-28 14:54:39
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,6 +10,7 @@
 import { observer } from "mobx-react-lite";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import { Base64 } from "js-base64";
 
 import BasicInfo from "../../../../components/BasinInfo";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
@@ -19,10 +20,9 @@ import { useStores } from "@/store";
 import goback from "@/assets/project/goback.svg";
 import Code from "@/components/CommonComponents/Code";
 import Flow from "@/views/Project/components/Flow";
+import { IParameterClassType, parameterClassType } from "../../interface";
 
 import styles from "./index.module.css";
-import { Base64 } from "js-base64";
-import { IParameterClassType, parameterClassType } from "../../interface";
 
 const ParametersInfo = (props: any) => {
 	const {
@@ -35,7 +35,6 @@ const ParametersInfo = (props: any) => {
 		domType,
 		description = "",
 	} = props?.info;
-	console.log(name, "1111");
 	const infoData = useMemo(() => {
 		return [
 			{
@@ -76,7 +75,6 @@ const ParametersInfo = (props: any) => {
 		required,
 		title,
 	]);
-	console.log(infoData, "infoData");
 	return (
 		<div className={styles.paramsBox}>
 			<div className={styles.nameBox}>{name}</div>
@@ -108,10 +106,18 @@ const OperatorDetails = observer(() => {
 		onSuccess: (res: any) => {
 			if (res.message === "success") {
 				/** 设置详情数据 */
-				setDetailData(res.data);
+				const newData = res.data.map((item: any) => {
+					/** 初始化批算子偏移量 */
+					if (item.type === "BATCH") {
+						item.position = { x: 100, y: 100 };
+					}
+					return item;
+				});
+				setDetailData(newData);
 				const filterData = res?.data?.filter((item: any) => {
 					return item.type === "BATCH";
 				});
+
 				if (filterData?.length) {
 					setDetailInfo(filterData[0]);
 				} else {
@@ -145,9 +151,13 @@ const OperatorDetails = observer(() => {
 		return result;
 	}, [envId]);
 
+	/** 初始设置第一项 */
+	useEffect(() => {
+		setContentType(contentTypeList[0].value);
+	}, [contentTypeList]);
+
 	/** 切换类型 */
 	const handleRadio = (val: string) => {
-		console.log(val, "2");
 		setContentType(val);
 	};
 
@@ -181,7 +191,12 @@ const OperatorDetails = observer(() => {
 				</div>
 			</div>
 			<h2 className={styles.baseInfoBox}>基础信息</h2>
-			<div style={{ border: "1px solid #EBEDF0" }}>
+			<div
+				style={{
+					border: "1px solid #EBEDF0",
+					marginBottom: type === "BATCH" ? undefined : "16px",
+				}}
+			>
 				<BasicInfo
 					infoList={[
 						{ label: "所属产品", value: productText },
@@ -208,8 +223,10 @@ const OperatorDetails = observer(() => {
 					/>
 				</div>
 			) : null}
-			{contentType === "flowChart" && type === "BATCH" ? (
-				<Flow tasks={detailData} className={styles.contentBox} />
+			{contentType === "flowChart" && !envId ? (
+				<div className={styles.contentBox}>
+					<Flow tasks={detailData} showControls={false} />
+				</div>
 			) : null}
 			{contentType === "parameterList" || type === "FLOW" ? (
 				<>

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

@@ -14,7 +14,5 @@
 }
 
 .contentBox {
-	display: flex;
-	flex-wrap: wrap;
-	padding-left: 20px;
+	padding: 0 20px 24px;
 }

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

@@ -17,6 +17,7 @@ import MySelect from "@/components/mui/MySelect";
 import MyButton from "@/components/mui/MyButton";
 import OperatorCard from "./components/OperatorCard";
 import AddOperator from "./components/AddOperator";
+import CardTable from "@/components/CommonComponents/CardTable";
 import { useStores } from "@/store";
 import { getOperatorList, IOperatorListParams } from "@/api/resourceCenter";
 import useMyRequest from "@/hooks/useMyRequest";
@@ -134,15 +135,17 @@ const WorkflowOperator = observer(() => {
 				<MyCircularProgress loading={loading}>
 					{list?.length ? (
 						<div className={styles.contentBox}>
-							{list?.map((item) => {
-								return (
+							<CardTable
+								data={list}
+								renderItem={(item: any) => (
 									<OperatorCard
 										setDetailsId={setDetailsId}
 										operatorInfo={item}
 										setPageType={setPageType}
 									/>
-								);
-							})}
+								)}
+								itemMinWidth={377}
+							></CardTable>
 						</div>
 					) : (
 						<div style={{ height: 300 }}>

src/views/ResourceCenter/components/LogView/index.module.css

@@ -104,7 +104,7 @@
 	position: relative;
 	box-sizing: border-box;
 	height: calc(100vh - 148px);
-	padding: 24px 32px 0;
+	padding: 24px 32px;
 	color: #d1d6de;
 	white-space: pre-wrap;
 	word-break: break-word;