Commit 21ab45ae authored by wuyongsheng's avatar wuyongsheng

feat: 云平台逻辑优化

parent eea2f337
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-05 14:00:37 * @Date: 2022-07-05 14:00:37
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-10 13:54:04 * @LastEditTime: 2022-08-08 16:34:52
* @FilePath: /bkunyun/src/api/workbench_api.ts * @FilePath: /bkunyun/src/api/workbench_api.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import request from "@/utils/axios/service"; import request from "@/utils/axios/service";
import Api from "./api_manager"; import Api from "./api_manager";
import { IGetOperatorListParams, IFetchOperatorListParams } from "./workbenchInterface"; import { IGetOperatorListParams } from "./workbenchInterface";
function current() { function current() {
return request({ return request({
...@@ -139,15 +139,6 @@ const fetchOperatorList = (params: IGetOperatorListParams) => { ...@@ -139,15 +139,6 @@ const fetchOperatorList = (params: IGetOperatorListParams) => {
}; };
// 获取指定版本算子
const fetchVersionOperator = (params: IFetchOperatorListParams) => {
return request({
url: Api.API_VERSION_OPERATOR,
method: "get",
params,
});
};
// 保存用户自定义工作流模板 // 保存用户自定义工作流模板
const saveUserSpec = (params: any) => { const saveUserSpec = (params: any) => {
return request({ return request({
...@@ -168,6 +159,5 @@ export { ...@@ -168,6 +159,5 @@ export {
deleteWorkflowJob, deleteWorkflowJob,
cancelWorkflowJob, cancelWorkflowJob,
fetchOperatorList, fetchOperatorList,
fetchVersionOperator,
saveUserSpec saveUserSpec
}; };
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-29 11:28:09 * @LastEditTime: 2022-08-08 18:17:20
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
......
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-20 15:00:18 * @LastEditTime: 2022-08-08 16:41:20
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -258,8 +258,8 @@ const ProjectSubmitWork = observer(() => { ...@@ -258,8 +258,8 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.swTemplateUpdateTimeBox}> <div className={styles.swTemplateUpdateTimeBox}>
<span className={styles.swHeaderLable}>更新时间:</span> <span className={styles.swHeaderLable}>更新时间:</span>
<span className={styles.swHeaderValue}> <span className={styles.swHeaderValue}>
{templateConfigInfo?.updateTime {templateConfigInfo?.updatedTime
? moment(templateConfigInfo?.updateTime).format( ? moment(templateConfigInfo?.updatedTime).format(
"YYYY-MM-DD HH:mm:ss" "YYYY-MM-DD HH:mm:ss"
) )
: "-"} : "-"}
......
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-12 11:51:17 * @LastEditTime: 2022-08-08 15:55:45
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -56,7 +56,7 @@ export interface ITask { ...@@ -56,7 +56,7 @@ export interface ITask {
export interface ITemplateConfig { // 模板信息 export interface ITemplateConfig { // 模板信息
title: string; // 标题 title: string; // 标题
version: string; // 版本 version: string; // 版本
updateTime?: string; // 更新时间 updatedTime?: string; // 更新时间
description: string; // 模板描述 description: string; // 模板描述
language: string; language: string;
languageVersion: string; languageVersion: string;
......
...@@ -23,3 +23,14 @@ ...@@ -23,3 +23,14 @@
border-radius: 8px; border-radius: 8px;
margin-left: 8px; margin-left: 8px;
} }
.errorDot{
display: inline-block;
line-height: 22px;
vertical-align: middle;
width: 8px;
height: 8px;
background-color: #FF4E4E;
border-radius: 8px;
margin-left: 8px;
}
/* /*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:29:46 * @Date: 2022-07-12 11:29:46
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-07-12 21:06:48 * @LastEditTime: 2022-08-08 18:43:35
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx * @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
...@@ -42,6 +42,7 @@ const FlowNode = (props: any) => { ...@@ -42,6 +42,7 @@ const FlowNode = (props: any) => {
flowNodeStyle = { display: "flex", alignItems: "center" }, // 样式 flowNodeStyle = { display: "flex", alignItems: "center" }, // 样式
inStyle = { background: "#C2C6CC ", left: 12 }, // 样式 inStyle = { background: "#C2C6CC ", left: 12 }, // 样式
outStyle = { background: "#C2C6CC ", left: 12 }, // 样式 outStyle = { background: "#C2C6CC ", left: 12 }, // 样式
flowType,
info: { title, isCheck, executionStatus, parameters }, info: { title, isCheck, executionStatus, parameters },
} = data; } = data;
...@@ -66,7 +67,6 @@ const FlowNode = (props: any) => { ...@@ -66,7 +67,6 @@ const FlowNode = (props: any) => {
[] []
); );
}, [parameters]); }, [parameters]);
return ( return (
<div <div
style={flowNodeStyle} style={flowNodeStyle}
...@@ -99,7 +99,8 @@ const FlowNode = (props: any) => { ...@@ -99,7 +99,8 @@ const FlowNode = (props: any) => {
: null} : null}
<div> <div>
{title || ""} {title || ""}
{isCheck && <span className={styles.successDot}></span>} {flowType !== 'edit' && isCheck ? <span className={styles.successDot}></span>: null}
{flowType === 'edit' && isCheck === false ? <span className={styles.errorDot}></span>: null}
{getImgUrl(executionStatus) && ( {getImgUrl(executionStatus) && (
<img <img
style={{ marginLeft: "6px" }} style={{ marginLeft: "6px" }}
......
...@@ -244,10 +244,10 @@ const Flow = (props: IProps) => { ...@@ -244,10 +244,10 @@ const Flow = (props: IProps) => {
/** 每一项的数据 */ /** 每一项的数据 */
data: { data: {
info: item, info: item,
/** flow组件类型 */
flowType,
...(item.type === "BATCH" ...(item.type === "BATCH"
? { ? {
/** flow组件类型 */
flowType,
/** 是否有流节点 */ /** 是否有流节点 */
isFlowNode: isFlowNode(item.id), isFlowNode: isFlowNode(item.id),
/** 选中状态 */ /** 选中状态 */
...@@ -375,6 +375,7 @@ const Flow = (props: IProps) => { ...@@ -375,6 +375,7 @@ const Flow = (props: IProps) => {
setInSideFlowNodeId(""); setInSideFlowNodeId("");
onBatchClick && onBatchClick(""); onBatchClick && onBatchClick("");
setSelectedEdge(undefined); setSelectedEdge(undefined);
onFlowNodeClick && onFlowNodeClick('')
}; };
/** node节点 */ /** node节点 */
......
...@@ -32,6 +32,15 @@ ...@@ -32,6 +32,15 @@
padding: 2px 8px; padding: 2px 8px;
} }
.versionBox {
display: inline-block;
color: #1E2633;
border-radius: 2px;
font-size: 12px;
padding: 2px 8px;
background-color: #F0F2F5;
}
.searchBox { .searchBox {
padding: 0 24px 16px 24px; padding: 0 24px 16px 24px;
} }
......
import { OutlinedInput } from "@mui/material"; import { OutlinedInput } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import classNames from "classnames"; import classNames from "classnames";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { toJS } from "mobx"; import { toJS } from "mobx";
import cloneDeep from "lodash/cloneDeep"; import cloneDeep from "lodash/cloneDeep";
...@@ -10,10 +10,9 @@ import { IOperatorItemProps, IOperatorListProps } from "./interface"; ...@@ -10,10 +10,9 @@ import { IOperatorItemProps, IOperatorListProps } from "./interface";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface"; import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { IResponse } from "@/api/http"; import { IResponse } from "@/api/http";
import { fetchOperatorList, fetchVersionOperator } from "@/api/workbench_api"; import { fetchOperatorList } from "@/api/workbench_api";
import { useStores } from "@/store"; import { useStores } from "@/store";
import noTemplate from "@/assets/project/noTemplate.svg"; import noTemplate from "@/assets/project/noTemplate.svg";
import MyMenu from "@/components/mui/MyMenu";
import styles from "./index.module.css"; import styles from "./index.module.css";
...@@ -30,15 +29,13 @@ let count = 1; ...@@ -30,15 +29,13 @@ let count = 1;
const OperatorItem = (props: IOperatorItemProps) => { const OperatorItem = (props: IOperatorItemProps) => {
const { const {
info: { title, description, tags, allVersions, version }, info: { title, description,tags, version },
setTemplateConfigInfo, setTemplateConfigInfo,
templateConfigInfo, templateConfigInfo,
setOperatorListData,
operatorListData, operatorListData,
info, info,
} = props; } = props;
const [isDragStyle, setIsDragStyle] = useState<boolean>(false); const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
const [versionValue, setVersionValue] = useState<string>("");
/** 拖拽开始 */ /** 拖拽开始 */
const onDragStart = useCallback(() => { const onDragStart = useCallback(() => {
...@@ -46,27 +43,6 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -46,27 +43,6 @@ const OperatorItem = (props: IOperatorItemProps) => {
count++; count++;
}, []); }, []);
// 获取指定版本的算子
const { run: getVersionOperator } = useMyRequest(fetchVersionOperator, {
onSuccess: (res: IResponse<any>) => {
if (res.data) {
let index: number | undefined = undefined;
const newVal = operatorListData.filter((item, i) => {
const bol = item.id === info.id || item.parentNode === info.id;
if (bol && index === undefined) {
index = i;
}
return !bol;
});
if (index !== undefined) {
newVal.splice(index, 0, ...res.data);
}
setOperatorListData(newVal);
}
},
});
/** 通过id查找相对的批流数组 */ /** 通过id查找相对的批流数组 */
const getBatchFlowArr = useCallback( const getBatchFlowArr = useCallback(
(id: string) => { (id: string) => {
...@@ -144,27 +120,6 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -144,27 +120,6 @@ const OperatorItem = (props: IOperatorItemProps) => {
] ]
); );
/** 所有版本信息格式化 */
const getAllVersion = useMemo(() => {
return (
allVersions?.length &&
allVersions?.map((item) => {
return { label: item, value: item };
})
);
}, [allVersions]);
/** 切换版本 */
const changeVersion = useCallback(
(val: string) => {
if (val !== versionValue) {
setVersionValue(val);
getVersionOperator({ title: info.title, version: val });
}
},
[getVersionOperator, info.title, versionValue]
);
return ( return (
<div <div
className={classNames({ className={classNames({
...@@ -178,7 +133,7 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -178,7 +133,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
<h2 className={styles.operatorItemTitle}>{title}</h2> <h2 className={styles.operatorItemTitle}>{title}</h2>
<div className={styles.operatorItemText}>{description}</div> <div className={styles.operatorItemText}>{description}</div>
<div className={styles.footerBox}> <div className={styles.footerBox}>
{tags?.map((item: string) => { {tags?.map((item: string) => {
return ( return (
<span <span
key={item} key={item}
...@@ -192,17 +147,7 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -192,17 +147,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
</span> </span>
); );
})} })}
<MyMenu <span className={styles.versionBox}>{version}</span>
options={getAllVersion || []}
value={versionValue || version || ""}
setValue={(val: string) => {
changeVersion(val);
}}
>
<div className={styles.versionBox}>{`版本:${
versionValue || version
}`}</div>
</MyMenu>
</div> </div>
</div> </div>
); );
......
...@@ -324,7 +324,6 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -324,7 +324,6 @@ const ParameterSetting = (props: IParameterSettingProps) => {
const taskIndex = result.findIndex((item) => { const taskIndex = result.findIndex((item) => {
return item.id === taskId; return item.id === taskId;
}); });
if (taskIndex !== -1) { if (taskIndex !== -1) {
let isCheck = true; let isCheck = true;
result[taskIndex].parameters.forEach((parameter) => { result[taskIndex].parameters.forEach((parameter) => {
...@@ -359,7 +358,6 @@ const ParameterSetting = (props: IParameterSettingProps) => { ...@@ -359,7 +358,6 @@ const ParameterSetting = (props: IParameterSettingProps) => {
if (taskIndex !== -1) { if (taskIndex !== -1) {
let isCheck = true; let isCheck = true;
result[taskIndex].parameters.forEach((parameter) => { result[taskIndex].parameters.forEach((parameter) => {
console.log(parameter);
if (parameter.name === parameterName) { if (parameter.name === parameterName) {
parameter.defaultValue = e.target.value; parameter.defaultValue = e.target.value;
const checkResult = const checkResult =
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment