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

cn-Feat 20221012 environment

See merge request !158

package-lock.json

@@ -6754,6 +6754,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
       "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA=="
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -10909,6 +10914,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

package.json

@@ -76,6 +76,7 @@
 		"react-router-dom": "^6.3.0",
 		"resolve": "^1.20.0",
 		"resolve-url-loader": "^4.0.0",
+		"sass": "^1.55.0",
 		"sass-loader": "^12.3.0",
 		"semver": "^7.3.5",
 		"source-map-loader": "^3.0.0",

src/api/api_manager.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 09:56:57
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-25 18:23:37
+ * @LastEditTime: 2022-10-26 18:28:43
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -38,7 +38,7 @@ const RESTAPI = {
   API_WORKBENCH_CANCEL_WORKFLOWJOB: `${BACKEND_API_URI_PREFIX}/cpp/workflow/cancel`, //取消工作流
   API_SUBMIT_WORKFLOW: `${BACKEND_API_URI_PREFIX}/cpp/workflow/submit`, //提交工作流
   API_WORKBENCH_WORKFLOW_TASKINFO: `${BACKEND_API_URI_PREFIX}/cpp/workbench/workflowjob/task-info`, //查询任务某个算子详情
-  API_OPERATOR_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorspecs`,  // 获取算子列表
+  API_OPERATOR_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorspecs/list`,  // 获取算子列表
   API_VERSION_OPERATOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorversion`,  // 获取指定版本算子
   API_SAVE_USERSPEC:`${BACKEND_API_URI_PREFIX}/cpp/workflow/saveuserspec`,  // 保存用户自定义工作流模板
   API_OVERVIEW_GET:`${BACKEND_API_URI_PREFIX}/cpp/basicInformation`,  // 获取概览基本信息

src/api/resourceCenter.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-19 17:09:23
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-25 20:26:42
+ * @LastEditTime: 2022-10-26 19:07:50
  * @FilePath: /bkunyun/src/api/resourceCenter.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -23,9 +23,11 @@ type addActorenvBuildenvParams = {
 
 /** 获取算子列表请求参数 */
 export interface IOperatorListParams {
-	keyword: string;
-	productId: string;
-	type: string;
+	keyword?: string;
+	productId?: string;
+	type?: string;
+  page?: number;
+  size?: number;
 }
 
 // 获取公共项目

src/components/mui/MyTabs/index.tsx

@@ -72,7 +72,6 @@ const theme = createTheme({
 				},
 			},
 		},
-		// #C2C6CC
 		MuiTabs: {
 			styleOverrides: {
 				indicator: {
@@ -80,6 +79,15 @@ const theme = createTheme({
 				},
 			},
 		},
+		MuiButtonBase: {
+			styleOverrides: {
+				root: {
+					"&.Mui-selected .MuiTypography-root": {
+						fontWeight: "600",
+					},
+				},
+			},
+		},
 	},
 });
 
@@ -90,7 +98,7 @@ const Tabs = (props: IProps) => {
 		defaultValue,
 		onChange,
 		allowNullValue = false,
-		tabPanelSx = { padding: "24px 0 0 0" },
+		tabPanelSx = { padding: "20px 0 0 0" },
 		title,
 		titleClass,
 	} = props;

src/views/CustomOperator/useCheckOperator.tsx

-import { useMessage } from "@/components/MySnackbar";
 import _ from "lodash";
-import { useState } from "react";
 
+import { useMessage } from "@/components/MySnackbar";
 import { ITask } from "../Project/ProjectSubmitWork/interface";
 
 /*
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-24 18:08:47
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-26 17:15:34
+ * @LastEditTime: 2022-10-26 18:13:41
  * @FilePath: /bkunyun/src/views/CustomOperator/useCheckOperator.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -18,7 +17,6 @@ const useCheckOperator = (
 	nullText?: string
 ) => {
 	const Message = useMessage();
-	let checkStatus = false;
 
 	// 判断   每个起始算子（可以有多个起始点）的输入必须为文件的路径输入或数据集的路径输入。
 	const checkIn = (targetArr: string[]) => {
@@ -104,9 +102,8 @@ const useCheckOperator = (
 
 	const handleCheck = () => {
 		if (operatorList.length === 0) {
-			Message.error(nullText || "内容不能为空！");
-			checkStatus = false;
-			return checkStatus;
+			!nullText && Message.error(nullText || "内容不能为空！");
+			return nullText || "内容不能为空！";
 		}
 		let sourceArr: string[] = [];
 		let targetArr: string[] = [];
@@ -117,25 +114,23 @@ const useCheckOperator = (
 			});
 		});
 		if (!checkHasOneLine([...sourceArr], [...targetArr])) {
-			checkStatus = false;
-			Message.error("部分算子没有流程线，请检查流程！");
-			return checkStatus;
+			!nullText && Message.error("部分算子没有流程线，请检查流程！");
+			return "部分算子没有流程线，请检查流程！";
 		}
 		if (!checkIn([...targetArr])) {
-			checkStatus = false;
-			Message.error("每个流程第一步需读取文件/数据集，请检查流程！");
-			return checkStatus;
+			!nullText &&
+				Message.error("每个流程第一步需读取文件/数据集，请检查流程！");
+			return "每个流程第一步需读取文件/数据集，请检查流程！";
 		}
 		if (!checkOut([...sourceArr])) {
-			checkStatus = false;
-			Message.error(
-				"每个流程最后一步必须将数据写入为文件/数据集，请检查流程！"
-			);
-			return checkStatus;
+			!nullText &&
+				Message.error(
+					"每个流程最后一步必须将数据写入为文件/数据集，请检查流程！"
+				);
+			return "每个流程最后一步必须将数据写入为文件/数据集，请检查流程！";
 		}
-		checkStatus = true;
 		successCallBack();
-		return checkStatus;
+		return "";
 	};
 
 	return { handleCheck };

src/views/Project/ProjectData/index.module.css

@@ -4,21 +4,21 @@
 }
 .projectDataStickyTop {
 	height: 100%;
-	padding: 28px 24px 64px;
+	padding: 22px 24px 64px;
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	box-sizing: border-box;
 }
 .projectDataStickyTopPadding {
-	padding: 28px 24px 24px;
+	padding: 22px 24px 24px;
 }
 .projectDataTitle {
 	font-size: 18px;
 	color: #1e2633;
 	line-height: 26px;
 	font-weight: 600;
-	margin-bottom: 24px;
+	margin-bottom: 20px;
 }
 .projectDataHeader {
 	position: relative;

src/views/Project/ProjectOverview/index.module.css

@@ -18,7 +18,7 @@
 	display: flex;
 	justify-content: space-between;
 	margin: 0 24px;
-	padding: 24px 0 20px;
+	padding: 22px 0 20px;
 	border-bottom: 1px solid #edeff2;
 }
 
@@ -67,7 +67,7 @@
 	color: #1e2633;
 	margin-right: 8px;
 }
-.red{
+.red {
 	color: rgba(255, 78, 78, 1);
 }
 .verticalLine {
@@ -136,4 +136,4 @@
 	justify-content: center;
 	align-items: center;
 	height: calc(100vh - 100px);
-}
\ No newline at end of file
+}

src/views/Project/ProjectSetting/index.tsx

@@ -40,7 +40,7 @@ const ProjectSetting = observer(() => {
 
 	if (currentProjectStore.currentProjectInfo.name) {
 		return (
-			<div style={{ padding: "28px 24px 24px" }}>
+			<div style={{ padding: "22px 24px" }}>
 				<div
 					style={{ display: "flex", alignItems: "center", marginBottom: "3px" }}
 				>

src/views/Project/ProjectWorkbench/index.tsx

@@ -53,7 +53,7 @@ const ProjectWorkbench = observer(() => {
 	}, [isPass]);
 	if (currentProjectStore.currentProjectInfo.name) {
 		return (
-			<div style={{ padding: "28px 24px 24px" }}>
+			<div style={{ padding: "22px 24px 24px" }}>
 				<div style={{ display: "flex", alignItems: "center" }}>
 					<span
 						style={{
@@ -61,7 +61,7 @@ const ProjectWorkbench = observer(() => {
 							lineHeight: "26px",
 							fontWeight: "600",
 							color: "#1E2633",
-							marginBottom: "3px",
+							marginBottom: "-1px",
 						}}
 					>
 						工作台

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

@@ -208,8 +208,6 @@ const UserResourcesEnvironment = () => {
 					></SearchInput>
 					{!addOpen && (
 						<MySelect
-							title="环境类型"
-							isTitle={true}
 							options={[
 								{
 									label: "全部",

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

@@ -141,8 +141,6 @@ const UserResourcesTemplate = observer(() => {
 						}}
 					></SearchInput>
 					<MySelect
-						title="产品类型"
-						isTitle={true}
 						options={
 							[
 								{ label: "全部", value: "all" },

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-26 17:31:53
+ * @LastEditTime: 2022-10-26 18:52:52
  * @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
  */
@@ -79,6 +79,8 @@ const AddOperator = observer((props: IAddOperator) => {
 	const [code, setCode] = useState(JSON.stringify(initCode, null, "\t"));
 	/** 参数配置 错误提示 */
 	const [parametersError, setParametersError] = useState<string>("");
+	/** 流程编排错误提示 */
+	const [flowParametersError, setFlowParametersError] = useState<string>("");
 
 	/** 运行脚本 */
 	const [command, setCommand] = useState<string>("");
@@ -246,13 +248,14 @@ const AddOperator = observer((props: IAddOperator) => {
 		const paramsResultError = paramsConfigBlur();
 		setFormErrors(resultErrors);
 
-		let checkStatus = true;
+		let checkStatus = "";
 		if (taskType === "BATCH" && batchBuildType === "OPERATOR") {
 			checkStatus = handleCheck();
+			setFlowParametersError(checkStatus);
 		}
 		if (
 			Object.getOwnPropertyNames(resultErrors)?.length ||
-			!checkStatus ||
+			checkStatus ||
 			paramsResultError
 		)
 			return;
@@ -525,7 +528,10 @@ const AddOperator = observer((props: IAddOperator) => {
 					)}
 				</div>
 				{taskType === "FLOW" ? null : (
-					<div className={style.parameterConfigBox}>
+					<div
+						className={style.parameterConfigBox}
+						style={{ marginBottom: flowParametersError ? "56px" : "24px" }}
+					>
 						<div className={style.codeTitle}>
 							{batchBuildType === "ENVIRONMENT" ? "运行脚本" : "流程编排"}
 						</div>
@@ -540,7 +546,10 @@ const AddOperator = observer((props: IAddOperator) => {
 						) : (
 							<div
 								id="customOperatorFlow"
-								style={{ position: "relative", height: 400 }}
+								style={{
+									position: "relative",
+									height: 400,
+								}}
 							>
 								<OperatorList
 									operatorList={operatorList}
@@ -558,6 +567,9 @@ const AddOperator = observer((props: IAddOperator) => {
 									showVersion={true}
 									showControls={false}
 								/>
+								{flowParametersError ? (
+									<p className={style.codeErrorBox}>{flowParametersError}</p>
+								) : null}
 							</div>
 						)}
 					</div>

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

 .detailsBox {
 	padding: 0 24px;
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 58px);
 }
 
 .baseInfoBox {
@@ -37,3 +40,8 @@
 	color: #565c66;
 	border-radius: 2px;
 }
+.contentBox {
+	flex: 1;
+	min-height: 400px;
+	margin-bottom: 24px;
+}

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-26 17:28:19
+ * @LastEditTime: 2022-10-26 19:51:34
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -21,16 +21,9 @@ import Code from "@/components/CommonComponents/Code";
 import Flow from "@/views/Project/components/Flow";
 
 import styles from "./index.module.css";
+import { Base64 } from "js-base64";
 
 const OperatorDetails = observer(() => {
-	const contentTypeList = useMemo(() => {
-		return [
-			{ value: "flowChart", label: "流程图" },
-			{ value: "parameterList", label: "参数列表" },
-			{ value: "runScript", label: "运行脚本" },
-		];
-	}, []);
-
 	/** 产品store */
 	const { productListStore } = useStores();
 	const navigate = useNavigate();
@@ -59,8 +52,23 @@ const OperatorDetails = observer(() => {
 		creator = "",
 		description = "",
 		type,
+		envName = "",
+		envId,
+		command,
 	} = detailInfo;
 	console.log(detailInfo, "detailInfo");
+
+	const contentTypeList = useMemo(() => {
+		const result = [
+			{ value: "flowChart", label: "流程图" },
+			{ value: "parameterList", label: "参数列表" },
+		];
+		if (envId) {
+			result.push({ value: "runScript", label: "运行脚本" });
+		}
+		return result;
+	}, [envId]);
+
 	/** 切换类型 */
 	const handleRadio = (val: string) => {
 		console.log(val, "2");
@@ -107,28 +115,38 @@ const OperatorDetails = observer(() => {
 						},
 						{ label: "创建人", value: creator },
 						{ label: "算子版本", value: version },
-						{ label: "应用环境", value: "1" },
+						{ label: "应用环境", value: envName },
 					]}
 				/>
-				<BasicInfo infoList={[{ label: "描述", value: description }]} />
-			</div>
-			<div style={{ padding: "26px 0 16px 0" }}>
-				<RadioGroupOfButtonStyle
-					RadiosBoxStyle={{ width: 254 }}
-					value={contentType}
-					radioOptions={contentTypeList}
-					handleRadio={handleRadio}
-				/>
-			</div>
-			<div>
-				{contentType === "flowChart" ? <Flow tasks={[]} /> : null}
-				{contentType === "parameterList" ? null : null}
-				{contentType === "runScript" ? (
-					<div className={styles.code}>
-						<Code value="" editable={false} height="350px" />
-					</div>
+				{description ? (
+					<BasicInfo infoList={[{ label: "描述", value: description }]} />
 				) : null}
 			</div>
+			{type === "BATCH" ? (
+				<div style={{ padding: "26px 0 16px 0" }}>
+					<RadioGroupOfButtonStyle
+						RadiosBoxStyle={{ width: 254 }}
+						value={contentType}
+						radioOptions={contentTypeList}
+						handleRadio={handleRadio}
+					/>
+				</div>
+			) : null}
+			{contentType === "flowChart" ? (
+				<Flow
+					tasks={detailInfo?.parameters || []}
+					className={styles.contentBox}
+				/>
+			) : null}
+			{contentType === "parameterList" ? null : null}
+			{contentType === "runScript" ? (
+				<Code
+					className={styles.contentBox}
+					value={Base64.decode(command || "")}
+					editable={false}
+					height="100%"
+				/>
+			) : null}
 		</div>
 	);
 });

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-26 15:14:32
+ * @LastEditTime: 2022-10-26 19:17:49
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -25,6 +25,7 @@ import { IOperatorInfo } from "./interface";
 
 import styles from "./index.module.css";
 import MyCircularProgress from "@/components/mui/MyCircularProgress";
+import NoData from "@/components/BusinessComponents/NoData";
 
 const WorkflowOperator = observer(() => {
 	const [pageType, setPageType] = useState<string>("");
@@ -45,7 +46,7 @@ const WorkflowOperator = observer(() => {
 		// refreshDeps: [],
 		onSuccess: (res) => {
 			console.log(res);
-			setList(res?.data);
+			setList(res?.data.content);
 		},
 	});
 
@@ -57,7 +58,7 @@ const WorkflowOperator = observer(() => {
 		if (params.type === "all") {
 			params.type = "";
 		}
-		getList(params);
+		getList({ ...params });
 	}, [getList, searchParams]);
 
 	// 按回车搜索
@@ -145,30 +146,8 @@ const WorkflowOperator = observer(() => {
 							})}
 						</div>
 					) : (
-						<div style={{ position: "relative", minHeight: 450 }}>
-							<img
-								src={noFile}
-								alt=""
-								style={{
-									position: "absolute",
-									top: "100px",
-									left: "50%",
-									transform: "translate(-50%, 0)",
-								}}
-							/>
-							<span
-								style={{
-									position: "absolute",
-									top: "165px",
-									left: "50%",
-									transform: "translate(-50%, 0)",
-									fontSize: "14px",
-									lineHeight: "22px",
-									color: "#8a9099",
-								}}
-							>
-								暂无工作流算子
-							</span>
+						<div style={{ height: 300 }}>
+							<NoData text="暂无工作流算子"></NoData>
 						</div>
 					)}
 				</div>

src/views/demo/index.module.scss

+.box {
+	background-color: red;
+}

src/views/demo/index.tsx

@@ -5,6 +5,7 @@ import CardTableDemo from "./CardTableDemo";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import { useState } from "react";
 import styles from "./index.module.css";
+import style from "./index.module.scss";
 
 const Demo = () => {
 	const radioOptionsArr = [
@@ -48,6 +49,7 @@ const Demo = () => {
 				{selectDemo === "表格" && <MyTableDemo></MyTableDemo>}
 				{selectDemo === "box" && <div>box</div>}
 			</div>
+			<div className={style.box}>123</div>
 		</div>
 	);
 };