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

cn-Feat 20221012 environment

See merge request !149

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-19 21:14:11
+ * @LastEditTime: 2022-10-20 14:56:21
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -55,6 +55,7 @@ const RESTAPI = {
   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`, // 查询应用环境的详情信息
+  API_ACTOR_ENV_OPTIONS:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/usableenv`, // 查询用户应用环境下拉
 };
 
 export default RESTAPI;

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-20 09:26:12
+ * @LastEditTime: 2022-10-20 15:01:36
  * @FilePath: /bkunyun/src/api/resourceCenter.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -55,7 +55,7 @@ const addActorenvBuildenv = (params: addActorenvBuildenvParams) => {
 
 // 获取公共环境
 const getActorenvList = (params: {
-  type: 'BATCH' | 'FLOW' | '',
+  type?: 'BATCH' | 'FLOW' | '',
   page: number,
   size: number,
   title?: string,
@@ -93,6 +93,15 @@ const getActorenvDetail = (params: {id: string}) => {
   });
 };
 
+// 查询应用环境的详情信息
+const getActorEnvOptions = (params: {type: string}) => {
+  return request({
+    url: `${Api.API_ACTOR_ENV_OPTIONS}`,
+    method: "get",
+    params
+  });
+};
+
 export {
   getPublicEnv,
   getPublicProject,
@@ -101,4 +110,5 @@ export {
   deleteActorenv,
   getOperatorList,
   getActorenvDetail,
+  getActorEnvOptions
 };

src/components/CommonComponents/CardTable/index.tsx

 import style from "./index.module.css";
 
-const CardTable = () => {
+interface ICardTableProps {
+	data: Array<any>;
+	renderItem: any;
+}
+
+const CardTable = (props: ICardTableProps) => {
+	const { data, renderItem } = props;
 	return <div>CardTable</div>;
 };
 

src/components/CommonComponents/Code/index.tsx

@@ -14,7 +14,6 @@ const Code = (props: ICodeType) => {
 	return (
 		<CodeMirror
 			height={height || "100%"}
-			// maxWidth="200px"
 			width={width || "100%"}
 			maxWidth={maxWidth || "100%"}
 			value={value}

src/components/MyRouter/useMyRouter.ts

@@ -44,12 +44,16 @@ const useMyRouter = () => {
         });
       }
       for (let item of menuInfo.res.data) {
+        let routeHead = `/${item.type}` || '/'
         let childrenRoutes: any = []
         for (let route of item.routes) {
           route.element = elements[route.element] || NotFound;
-          route.path = `/product/${item.id}${route.path}`;
+          route.path = `${routeHead}/${item.id}${route.path}`
           if (Array.isArray(route.children)) {
             route.children.forEach((childrenItem: any, index: number) => {
+              console.log(route)
+              console.log(childrenItem)
+              console.log(routeHead)
               if (childrenItem.path) {
                 childrenRoutes.push({
                   ...childrenItem,
@@ -59,10 +63,10 @@ const useMyRouter = () => {
                 })
               }
             })
+            // http://localhost:8088/v3/product/resourceCenter/userResources/seeEnv
             route.children = route.children.filter((childrenItem: any) => !childrenItem.path)
           }
         }
-        // permissionStore.setAddRoutes(item.routes);
         permissionStore.setAddRoutes([...childrenRoutes, ...item.routes]);
       }
       menuStore.initMenu(menuInfo.res.data);

src/components/mui/FormItemBox/index.module.css

@@ -31,7 +31,7 @@
 .dynamicFormitem_helpText {
 	position: absolute;
 	bottom: -36px;
-	font-size: 13px;
+	font-size: 12px;
 	line-height: 1.15;
 	color: #9894a5;
 }
@@ -41,6 +41,6 @@
 .dynamicFormitem_errorTips {
 	position: absolute;
 	bottom: -20px;
-	font-size: 13px;
+	font-size: 12px;
 	color: #ff4e4e;
 }

src/router/index.ts

@@ -70,6 +70,11 @@ export const routes: Array<route | navigate> = [
     from: "/",
     to: "/home",
   },
+  {
+    type: "navigate",
+    from: "/utility",
+    to: "/home",
+  },
   {
     type: "navigate",
     from: "/product",
@@ -87,6 +92,13 @@ export const routes: Array<route | navigate> = [
         path: "/home",
         element: Home,
       },
+      {
+        type: "page",
+        name: "Utility",
+        path: "/utility",
+        element: MenuLayout,
+        children: [],
+      },
       {
         type: "page",
         name: "Product",

src/store/modules/permission.ts

@@ -38,7 +38,11 @@ class Permission {
       if (route.type === "page" && route.children) {
         if (route.name === "Product") {
           for (let item of this.addRoutes) {
-            route.children.push(...item);
+            route.children.push(...item.filter((a) => a.path.indexOf('product/') !== -1));
+          }
+        } else if (route.name === "Utility") {
+          for (let item of this.addRoutes) {
+            route.children.push(...item.filter((a) => a.path.indexOf('utility/') !== -1));
           }
         } else {
           this.AddInsertRoutes(route.children);

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

@@ -144,7 +144,7 @@ const SeeEnv = () => {
 					className={style.goBackIcon}
 					src={goback}
 					alt=""
-					onClick={() => navigate("/product/resourceCenter/userResources")}
+					onClick={() => navigate("/utility/resourceCenter/userResources")}
 				/>
 				<div className={style.title}>{info.title}</div>
 				<div className={style.type}>

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

@@ -131,9 +131,7 @@ const UserResourcesEnvironment = () => {
 	};
 
 	const hanleToSeeEnv = (item: any) => {
-		console.log("hanleToSeeEnv");
-		console.log(item.id);
-		navigate("/product/resourceCenter/userResources/seeEnv", {
+		navigate("/utility/resourceCenter/userResources/seeEnv", {
 			state: { id: item.id },
 		});
 	};

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-20 11:59:34
+ * @LastEditTime: 2022-10-20 19:44:43
  * @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
  */
@@ -13,9 +13,7 @@ import { observer } from "mobx-react";
 import MyInput from "@/components/mui/MyInput";
 import MySelect from "@/components/mui/MySelect";
 import MyButton from "@/components/mui/MyButton";
-import style from "./index.module.css";
 import SwitchBatchFolw from "@/views/ResourceCenter/components/SwitchBatchFolw";
-
 import Code from "@/components/CommonComponents/Code";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
@@ -23,6 +21,13 @@ import BatchOperatorFlow from "@/views/Project/components/Flow/components/BatchO
 import OperatorList from "@/views/CustomOperator/components/OperatorList";
 import FormItemBox from "@/components/mui/FormItemBox";
 import { useStores } from "@/store";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getActorEnvOptions } from "@/api/resourceCenter";
+import { IOperatorAddFormData } from "../../interface";
+
+import style from "./index.module.css";
+import { checkFormData, checkParamsConfig } from "./utils";
+import { Base64 } from "js-base64";
 
 interface IAddOperator {
 	pageType: string;
@@ -45,9 +50,17 @@ const AddOperator = observer((props: IAddOperator) => {
 	const [inputActive, setInputActive] = useState(false);
 	/** 产品store */
 	const { productListStore } = useStores();
-
+	/** 应用环境下拉 */
+	const [actorEnvOptions, setActorEnvOptions] = useState([]);
+	/** 参数配置 */
 	const [code, setCode] = useState("");
-	// const [formData, setFormData] = useState<any>();
+	/** 运行脚本 */
+	const [command, setCommand] = useState<string>("");
+
+	/** 表单数据 */
+	const [formData, setFormData] = useState<IOperatorAddFormData>({});
+	/** 表单数据修改 */
+	const [formErrors, setFormErrors] = useState<IOperatorAddFormData>({});
 
 	const buildTypeList = useMemo(() => {
 		return [
@@ -56,14 +69,47 @@ const AddOperator = observer((props: IAddOperator) => {
 		];
 	}, []);
 
+	/** 表单数据 */
+	const changeFormData = useCallback(
+		(val: IOperatorAddFormData) => {
+			setFormData({ ...formData, ...val });
+		},
+		[formData]
+	);
+
+	/** 获取应用环境下拉 */
+	const { run: fetchActorEnvOptions } = useMyRequest(getActorEnvOptions, {
+		onSuccess: (res: any) => {
+			if (res.message === "success") {
+				const newActorEnvOptions =
+					res?.data?.map((item: any) => {
+						return { label: item.title, value: item.id };
+					}) || [];
+				setActorEnvOptions(newActorEnvOptions);
+			}
+		},
+	});
+
+	useEffect(() => {
+		fetchActorEnvOptions({ type: taskType });
+	}, [fetchActorEnvOptions, taskType]);
+
 	/** 切换类型 */
 	const handleRadio = (val: IBuildType) => {
 		setBatchBuildType(val);
 	};
 
-	const handleSubmit = () => {
-		console.log(33);
-	};
+	const handleSubmit = useCallback(() => {
+		const paramsError = checkParamsConfig(code);
+		const resultErrors = checkFormData(formData, taskType);
+		setFormErrors(resultErrors);
+		if (!Object.getOwnPropertyNames(resultErrors)?.length) return;
+		const params = {
+			...formData,
+			command: Base64.encode(command),
+		};
+		console.log(params, 33);
+	}, [command, formData, taskType, code]);
 
 	return (
 		<div className={style.addOperatorBox}>
@@ -100,12 +146,23 @@ const AddOperator = observer((props: IAddOperator) => {
 						<FormItemBox
 							label="算子名称"
 							labelClassName={style.labelClassName}
+							className={classNames({
+								[style.operatorFormItem]: formErrors?.title,
+							})}
 							itemFlex="column"
+							errorMessage={formErrors?.title || ""}
 							require
 						>
 							<MyInput
-								helperText="30字符以内，仅限字母、数字、中文"
+								helperText={
+									formErrors?.title ? "" : "15字符以内，仅限字母、数字、中文"
+								}
 								placeholder="请输入算子名称"
+								value={formData?.title}
+								onChange={(e) => {
+									if (e.target.value?.length > 15) return;
+									changeFormData({ title: e.target.value });
+								}}
 							/>
 						</FormItemBox>
 						<FormItemBox
@@ -113,13 +170,20 @@ const AddOperator = observer((props: IAddOperator) => {
 							labelClassName={style.labelClassName}
 							className={style.operatorFormItem}
 							itemFlex="column"
+							errorMessage={formErrors?.version || ""}
 							require
 						>
-							<MyInput />
+							<MyInput
+								value={formData?.version}
+								onChange={(e) => {
+									changeFormData({ version: e.target.value });
+								}}
+							/>
 						</FormItemBox>
 						<FormItemBox
 							label="所属产品"
 							labelClassName={style.labelClassName}
+							errorMessage={formErrors?.productId || ""}
 							className={classNames({
 								[style.operatorFormItem]: batchBuildType === "ENVIRONMENT",
 							})}
@@ -129,6 +193,10 @@ const AddOperator = observer((props: IAddOperator) => {
 							<MySelect
 								fullWidth
 								options={productListStore?.productList || []}
+								value={formData?.productId}
+								onChange={(e) => {
+									changeFormData({ productId: e });
+								}}
 							/>
 						</FormItemBox>
 						{batchBuildType === "ENVIRONMENT" ? (
@@ -136,12 +204,17 @@ const AddOperator = observer((props: IAddOperator) => {
 								label="应用环境"
 								labelClassName={style.labelClassName}
 								className={style.operatorFormItem}
+								errorMessage={formErrors?.envId || ""}
 								itemFlex="column"
 								require
 							>
 								<MySelect
 									fullWidth
-									options={[{ label: "cadd", value: "CADD" }]}
+									options={actorEnvOptions || []}
+									value={formData?.envId}
+									onChange={(e) => {
+										changeFormData({ envId: e });
+									}}
 								/>
 							</FormItemBox>
 						) : null}
@@ -150,8 +223,17 @@ const AddOperator = observer((props: IAddOperator) => {
 								label="描述"
 								labelClassName={style.labelClassName}
 								itemFlex="column"
+								errorMessage={formErrors?.description || ""}
 							>
-								<MyInput multiline rows={4} placeholder="请输入算子描述" />
+								<MyInput
+									multiline
+									rows={4}
+									placeholder="请输入算子描述"
+									value={formData?.description}
+									onChange={(e) => {
+										changeFormData({ description: e.target.value });
+									}}
+								/>
 							</FormItemBox>
 						) : null}
 					</div>
@@ -162,7 +244,9 @@ const AddOperator = observer((props: IAddOperator) => {
 							<div className={style.code}>
 								<Code
 									value={code}
-									onChange={(e: string) => setCode(e)}
+									onChange={(e: string) => {
+										setCode(e);
+									}}
 									height="535px"
 								/>
 							</div>
@@ -174,12 +258,17 @@ const AddOperator = observer((props: IAddOperator) => {
 								labelClassName={style.labelClassName}
 								className={style.operatorFormItem}
 								itemFlex="column"
+								errorMessage={formErrors?.description || ""}
 							>
 								<MyInput
 									style={{ width: "420px" }}
 									multiline
 									rows={10}
 									placeholder="请输入算子描述"
+									value={formData?.description}
+									onChange={(e) => {
+										changeFormData({ description: e.target.value });
+									}}
 								/>
 							</FormItemBox>
 						</div>
@@ -192,8 +281,8 @@ const AddOperator = observer((props: IAddOperator) => {
 					{batchBuildType === "ENVIRONMENT" ? (
 						<div className={style.code}>
 							<Code
-								value={code}
-								onChange={(e: string) => setCode(e)}
+								value={command}
+								onChange={(e: string) => setCommand(e)}
 								height="350px"
 							/>
 						</div>
@@ -221,7 +310,7 @@ const AddOperator = observer((props: IAddOperator) => {
 					)}
 				</div>
 				<div className={style.buttonBox}>
-					<MyButton text="开始构建"></MyButton>
+					<MyButton text="开始构建" onClick={handleSubmit} />
 				</div>
 			</div>
 		</div>

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

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-10-20 17:36:14
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-20 19:44:52
+ * @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
+ */
+
+import { IOperatorAddFormData } from "../../interface";
+
+
+export const checkFormData = (formData: IOperatorAddFormData, taskType: 'BATCH' | 'FLOW')=>{
+  const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]{1,15}$");
+
+  const result:IOperatorAddFormData = {}
+
+  if(!formData?.title){
+    result.title = '请输入算子名称'
+  }
+  if(!reg.test(formData?.title || '')){
+    result.title = '格式不正确,仅限大小写字母、数字、中文'
+  }
+  if(!/^[1-9]\d?(\.(0|[1-9]\d?)){2}$/.test(formData?.version || '')){
+    result.version = '格式不正确,必须为X.Y.Z格式,且XYZ必须为0~99的正整数'
+  }
+  if(!formData?.version){
+    result.version = '请输入算子版本'
+  }
+  if(!formData?.productId){
+    result.productId = '请选择所属产品'
+  }
+  if(taskType ==='BATCH' && !formData?.envId){
+    result.envId = '请选择应用环境'
+  }
+  
+  return result
+}
+
+/** 参数配置校验 */
+export const checkParamsConfig = (val: string) => {
+  let result: string = ''
+  const arr = val.split('\n' || ',')
+
+  if(!val){
+    result = '请输入参数配置'
+  }
+  if(!true){
+    result = '参数配置格式不正确'
+  }
+  
+  return result
+}
\ No newline at end of file

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-20 11:30:10
+ * @LastEditTime: 2022-10-20 17:11:22
  * @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 { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import _ from "lodash";
+import Add from "@mui/icons-material/Add";
 
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import MySelect from "@/components/mui/MySelect";
@@ -18,11 +19,11 @@ import OperatorCard from "./components/OperatorCard";
 import AddOperator from "./components/AddOperator";
 import { useStores } from "@/store";
 import { getOperatorList, IOperatorListParams } from "@/api/resourceCenter";
-
-import styles from "./index.module.css";
 import useMyRequest from "@/hooks/useMyRequest";
 import { IOperatorInfo } from "./interface";
 
+import styles from "./index.module.css";
+
 const WorkflowOperator = observer(() => {
 	const [pageType, setPageType] = useState<string>("");
 	/** 产品store */
@@ -119,12 +120,7 @@ const WorkflowOperator = observer(() => {
 					</div>
 					<MyButton
 						text="构建算子"
-						img={
-							<span
-								style={{ fontSize: "14px", marginRight: "8px" }}
-								className="iconfont icon-dianzan"
-							></span>
-						}
+						startIcon={<Add />}
 						onClick={() => setPageType("add")}
 					></MyButton>
 				</div>

src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-19 20:50:18
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-20 11:03:29
+ * @LastEditTime: 2022-10-20 19:05:27
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -19,4 +19,13 @@ export interface IOperatorInfo{
 export enum operatorType {
   'FLOW' = '流算子',
   'BATCH' = '批算子',
+}
+
+export interface IOperatorAddFormData {
+  title?: string;
+  type?: IOperatorType;
+  version?: string;   
+  productId?: string; 
+  description?: string;
+  envId?: string;
 }
\ No newline at end of file