Merge branch 'feat-20220705-customTemplate' into 'release'

cn-feat: 参数设置部分样式完成， 切换产品时产品id修改， 算子版本字段修改

See merge request sunyihao/bkunyun!92

src/store/modules/menu.ts

@@ -17,11 +17,13 @@ class Menus {
   productList: Array<{
     name: string;
     path: string;
+    id: string;
   }> = [];
 
   utilityList: Array<{
     name: string;
     path: string;
+    id: string;
   }> = [];
 
   initMenu = (list: projectList) => {
@@ -32,11 +34,13 @@ class Menus {
         this.productList.push({
           name: item.name,
           path: item.routes[0].path,
+          id: item.id,
         });
       } else if (item.type === "utility") {
         this.utilityList.push({
           name: item.name,
           path: item.routes[0].path,
+          id: item.id,
         });
       }
     }

src/views/ConsoleLayout/index.tsx

@@ -61,7 +61,7 @@ const ConsoleLayout = observer(() => {
 
 	// 切换产品
 	const getProduct = (item: any) => {
-    currentProjectStore.changeProductInfo({ id: item.name, name: item.name });
+		currentProjectStore.changeProductInfo({ id: item.id, name: item.name });
 		setCurrentProduct(item);
 		runGetProjectList({
 			product: item.name,

src/views/Project/ProjectJobDetail/index.tsx

@@ -545,7 +545,7 @@ const ProjectSubmitWork = observer(() => {
 										<div className={styles.taskInfoLi}>
 											<div className={styles.taskInfoParams}>算子版本</div>
 											<div className={styles.taskInfoValue}>
-												{patchInfo?.creator || "-"}
+												{patchInfo?.version || "-"}
 											</div>
 										</div>
 										<div className={styles.taskInfoLi}>

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -187,7 +187,7 @@ const BaseInfo = observer(() => {
 	// 修改项目
 	const handleClickUpdate = () => {
 		if (checkName(projectInfo.name, true)) {
-      updateProjectRun({ ...projectInfo, product: "CADD" });
+			updateProjectRun({ ...projectInfo, product: "cadd" });
 		} else {
 			return;
 		}

src/views/Project/ProjectSubmitWork/interface.ts

@@ -28,6 +28,7 @@ export interface IParameter {
   choices: Array<IChoice>;
   error?: boolean;
   helperText?: string;
+  parameterGroup?: string;
 }
 
 export type IExecutionStatus = "Pending" | "Running" | "Done" | "Failed";
@@ -36,6 +37,7 @@ export interface ITask {
   id: string;
   title: string;
   description: string;
+  version?: string;
   position: {
     x: number;
     y: number;

src/views/Project/ProjectSubmitWork/mock.ts

@@ -8,7 +8,7 @@ export const templateConfigJson = {
   languageVersion: "draft-2",
   tags: ["Docking", "Gromax"],
   source: "BASE64_ENCODED_WDL/CWL",
-  productId: "CADD",
+  productId: "cadd",
   id: "123",
   tasks: [
     {
@@ -160,7 +160,7 @@ export const templateConfigJson = {
 //   languageVersion: "1.0",
 //   tags: ["Docking", "Gromax"],
 //   source: "",
-//   productId: "CADD",
+//   productId: "cadd",
 //   updateTime: "20220622",
 //   tasks: [
 //     {
@@ -514,7 +514,7 @@ export const templateConfigJson = {
 //   languageVersion: "draft-2",
 //   tags: ["Docking", "Gromax"],
 //   source: "BASE64_ENCODED_WDL/CWL",
-//   productId: "CADD",
+//   productId: "cadd",
 //   tasks: [
 //     {
 //       id: "批式算子ID1",

src/views/Project/components/AddProject/index.tsx

@@ -154,7 +154,7 @@ const AddProject = (props: any) => {
 				name,
 				desc,
 				zoneId,
-        product: "CADD",
+				product: "cadd",
 			});
 		} else {
 			return;

src/views/Project/project.ts

@@ -13,7 +13,7 @@ import {
 } from "@/api/project_api";
 
 export const getProjectList = async () => {
-  const res = await getProjectListApi({ product: "CADD" });
+  const res = await getProjectListApi({ product: "cadd" });
   return res.data;
 };
 

src/views/WorkFlowEdit/components/ParameterSetting/index.module.css

+.parameterSetting {
+	background-color: #fff;
+	height: calc(100vh - 140px);
+	width: 360px;
+	box-sizing: border-box;
+	overflow-y: scroll;
+	padding: 0 24px;
+}
+.taskInfo {
+	margin-bottom: 20px;
+	position: relative;
+}
+.taskTitle {
+	color: rgba(30, 38, 51, 1);
+	font-size: 16px;
+	line-height: 24px;
+	margin-bottom: 8px;
+	font-weight: 600;
+}
+.taskVersion {
+	color: rgba(138, 144, 153, 1);
+	font-size: 12px;
+	line-height: 20px;
+	margin-bottom: 8px;
+}
+.taskDescription {
+	font-size: 12px;
+	color: rgba(86, 92, 102, 1);
+	line-height: 20px;
+	position: relative;
+	max-height: 60px;
+	overflow: hidden;
+}
+.taskDescriptionAll {
+	font-size: 12px;
+	color: rgba(86, 92, 102, 1);
+	line-height: 20px;
+	position: relative;
+}
+.taskDescriptionHeight {
+	font-size: 12px;
+	color: rgba(86, 92, 102, 1);
+	line-height: 20px;
+	position: absolute;
+	top: 0;
+	visibility: hidden;
+	max-height: 80px;
+	overflow: hidden;
+}
+.descButton {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	color: rgba(19, 112, 255, 1);
+	padding-left: 30px;
+	background-image: linear-gradient(
+		to right,
+		rgba(255, 255, 255, 0) 0%,
+		rgba(255, 255, 255, 1) 50%,
+		rgba(255, 255, 255, 1) 100%
+	);
+	cursor: pointer;
+}
+.noData {
+	height: calc(100vh - 140px);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+.noDataImg {
+	margin-bottom: 8px;
+}
+.noDataText {
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(138, 144, 153, 1);
+}

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

+import styles from "./index.module.css";
+import {
+	ITask,
+	IParameter,
+} from "../../../Project/ProjectSubmitWork/interface";
+import noTemplate from "@/assets/project/noTemplate.svg";
+import { useEffect, useMemo, useRef, useState } from "react";
+import classNames from "classnames";
+
+type IParameterSettingProps = {
+	templateConfigInfo: ITask[];
+	taskId: string;
+};
+
+const ParameterSetting = (props: IParameterSettingProps) => {
+	const { templateConfigInfo, taskId } = props;
+
+	const [descRef, setDescRef] = useState<any>(useRef());
+	const [descHeight, setDescHeight] = useState(0);
+	const [isShowAllDese, setIsShowAllDese] = useState(false);
+
+	useEffect(() => {
+		const div = document.getElementById("descHeight");
+		if (div) {
+			setDescHeight(div.offsetHeight);
+		}
+	}, [descRef]);
+
+	const taskInfo: ITask | null = useMemo(() => {
+		if (!taskId) {
+			return null;
+		} else {
+			const randerTaskArr = templateConfigInfo.filter(
+				(task) => task.id === taskId
+			);
+			if (randerTaskArr.length > 0) {
+				return randerTaskArr[0];
+			} else {
+				return null;
+			}
+		}
+	}, [templateConfigInfo, taskId]);
+
+	// 输入参数
+	const inParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "in"
+			);
+		}
+	}, [taskInfo]);
+
+	// 输出参数
+	const outParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "out"
+			);
+		}
+	}, [taskInfo]);
+
+	// 基础参数
+	const basisParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "basis"
+			);
+		}
+	}, [taskInfo]);
+
+	// 高级选项
+	const seniorParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "senior"
+			);
+		}
+	}, [taskInfo]);
+
+	// 硬件配置
+	const hardwareParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "hardware"
+			);
+		}
+	}, [taskInfo]);
+
+	return (
+		<div className={styles.parameterSetting}>
+			{/* <div className={styles.taskInfo}>
+				<div className={styles.taskTitle}>taskTitle</div>
+				<div className={styles.taskVersion}>version</div>
+				<div
+					className={styles.taskDescriptionHeight}
+					id="descHeight"
+					ref={descRef}
+				>
+					埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
+				</div>
+				<div
+					className={classNames({
+						[styles.taskDescriptionAll]: isShowAllDese,
+						[styles.taskDescription]: !isShowAllDese,
+					})}
+				>
+					埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
+					{descHeight > 60 && (
+						<span
+							className={styles.descButton}
+							onClick={() => setIsShowAllDese(!isShowAllDese)}
+						>
+							{isShowAllDese ? "收起" : "展开"}
+						</span>
+					)}
+				</div>
+			</div> */}
+			{taskInfo && (
+				<div className={styles.taskInfo}>
+					<div className={styles.taskTitle}>{taskInfo.title || "-"}</div>
+					<div className={styles.taskVersion}>
+						版本：{taskInfo.version || "-"}
+					</div>
+					<div
+						className={styles.taskDescriptionHeight}
+						id="descHeight"
+						ref={descRef}
+					>
+						{taskInfo.description || "-"}
+					</div>
+					<div
+						className={classNames({
+							[styles.taskDescriptionAll]: isShowAllDese,
+							[styles.taskDescription]: !isShowAllDese,
+						})}
+					>
+						{taskInfo.description || "-"}
+						{descHeight > 60 && (
+							<span
+								className={styles.descButton}
+								onClick={() => setIsShowAllDese(!isShowAllDese)}
+							>
+								{isShowAllDese ? "收起" : "展开"}
+							</span>
+						)}
+					</div>
+				</div>
+			)}
+			{/* {!taskInfo && (
+				<div className={styles.noData}>
+					<img src={noTemplate} alt="" className={styles.noDataImg} />
+					<span className={styles.noDataText}>选中任意算子进行参数设置</span>
+				</div>
+			)} */}
+		</div>
+	);
+};
+
+export default ParameterSetting;

src/views/WorkFlowEdit/index.tsx

@@ -15,10 +15,10 @@ import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfB
 import ButtonComponent from "@/components/mui/Button";
 import OperatorList from "./components/OperatorList";
 import Flow from "../Project/components/Flow";
+import ParameterSetting from "./components/ParameterSetting";
 import { ITask } from "../Project/ProjectSubmitWork/interface";
 
 import styles from "./index.module.css";
-import { style } from "@mui/system";
 
 const radioOptions = [
 	{
@@ -102,7 +102,12 @@ const WorkFlowEdit = (props: IProps) => {
 							/>
 						</div>
 					)}
-					{leftContentType !== "list" && <div>123</div>}
+					{leftContentType !== "list" && (
+						<ParameterSetting
+							templateConfigInfo={templateConfigInfo}
+							taskId={""}
+						/>
+					)}
 				</div>
 				<div id="workFlowEditRight">
 					<Flow tasks={templateConfigInfo} />