Skip to content

B
bkunyun
Commit bc925de6 authored by chenshouchao's avatar chenshouchao
Browse files
Options

Merge branch 'feat-20220620-taskSubmission' into 'release' 

Feat 20220620 task submission

See merge request !71
parents 9c5c3f37 edc2859f
Hide whitespace changes
Inline Side-by-side
Showing with 280 additions and 135 deletions
src/components/FileSelect/index.tsx
View file @ bc925de6
......@@ -8,16 +8,23 @@ import MyTreeView from "@/components/mui/MyTreeView";
import classNames from "classnames";
import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
import folderIcon from "@/assets/project/folderIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import useMyRequest from "@/hooks/useMyRequest";
import { getDataFind } from "@/api/project_api";
import style from "./index.module.css";
import _ from "lodash";
type FileSelectProps = {
open: boolean;
onConfirm: any;
onClose: any;
type?: "file" | "dataset" | "path";
};
const FileSelect = observer((props: FileSelectProps) => {
const { onConfirm } = props;
const { onConfirm, type = "path" } = props;
// const { onConfirm, type = "dataset" } = props;
const { currentProjectStore } = useStores();
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
......@@ -25,6 +32,66 @@ const FileSelect = observer((props: FileSelectProps) => {
const [rootActive, setRootActive] = useState(true);
const [newPath, setNewPath] = useState("/");
// 获取某路径下的数据集
const { run: getDataFindRun } = useMyRequest(getDataFind, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
return {
...item,
type: "dataset",
dir: `/${item.path}`,
subdirs: "",
};
});
let treeDataArr = _.cloneDeep(treeData);
if (newPath === "/") {
treeDataArr = _.uniqWith([...treeDataArr, ...dataSetList], _.isEqual);
setTreeData(treeDataArr);
} else {
let pathArr: Array<any> = newPath.split("/");
pathArr.shift();
let reduceResult = pathArr.reduce((result, path) => {
if (Array.isArray(result)) {
result.forEach((item: any, index: number) => {
if (item.name === path) {
result = result[index];
}
});
} else if (Array.isArray(result.subdirs)) {
result.subdirs.forEach((item: any, index: number) => {
if (item.name === path) {
result = result.subdirs[index];
}
});
} else {
result = result.subdirs;
}
return result;
}, treeDataArr);
if (Array.isArray(reduceResult.subdirs)) {
reduceResult.subdirs = _.uniqWith(
[...reduceResult.subdirs, ...dataSetList],
_.isEqual
);
} else {
reduceResult.subdirs = dataSetList;
}
treeDataArr = _.uniqWith(treeDataArr, _.isEqual);
setTreeData(treeDataArr);
}
},
});
useEffect(() => {
if (type === "dataset") {
getDataFindRun({
projectId: projectId as string,
path: newPath === "/" ? "/" : `${newPath}/`,
});
}
}, [newPath, getDataFindRun, projectId, type]);
useEffect(() => {
if (fileToken && projectId) {
CloudEController.JobOutFileDirtree(
......@@ -38,15 +105,31 @@ const FileSelect = observer((props: FileSelectProps) => {
} else {
setTreeData([]);
}
if (type === "dataset") {
getDataFindRun({
projectId: projectId as string,
path: "/",
// path: path === "/" ? "/" : `${path}/`,
});
}
});
}
}, [projectId, fileToken]);
}, [projectId, fileToken, type, getDataFindRun]);
const renderLabel = (labelNmae: string) => {
// const renderLabel = (labelNmae: string) => {
const renderLabel = (node: any) => {
return (
<span className={style.treeLabel}>
<img className={style.labelFolderIcon} src={folderIcon} alt="" />
<span className={style.treeLabelText}>{labelNmae}</span>
{node.type === "directory" && (
<img className={style.labelFolderIcon} src={folderIcon} alt="" />
)}
{node.type === "dataset" && (
<img className={style.labelFolderIcon} src={dataSetIcon} alt="" />
)}
{node.type !== "directory" && node.type !== "dataset" && (
<img className={style.labelFolderIcon} src={fileIcon} alt="" />
)}
<span className={style.treeLabelText}>{node.name}</span>
</span>
);
};
......@@ -75,6 +158,7 @@ const FileSelect = observer((props: FileSelectProps) => {
open={props.open}
onClose={props.onClose}
onConfirm={fileSelectOnConfirm}
title={type}
>
<div
className={classNames({
......
src/components/mui/MyTreeView.tsx
View file @ bc925de6
......@@ -15,7 +15,7 @@ type MyTreeViewProps = {
onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
renderLabel?: (labelNmae: string) => React.ReactNode;
renderLabel?: (node: any) => React.ReactNode;
treeViewSx?: any;
defaultExpanded?: Array<string>;
idKey?: string;
......@@ -48,7 +48,7 @@ const MyTreeView = (props: MyTreeViewProps) => {
nodeId={String(
idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
)}
label={renderLabel === undefined ? nodes.name : renderLabel(nodes.name)}
label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
disabled={nodes?.disabled ? true : false}
>
{Array.isArray(nodes.subdirs)
......
src/components/mui/Tabs.tsx
View file @ bc925de6
......@@ -12,7 +12,8 @@ import { useState, useMemo, useEffect } from "react";
import { Box } from "@mui/system";
import Tab from "@mui/material/Tab";
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Typography } from '@mui/material';
import { Typography } from "@mui/material";
import { useImperativeHandle } from "react";
interface ITabList {
label: string;
......@@ -20,32 +21,50 @@ interface ITabList {
component: JSX.Element;
icon?: string;
iconed?: string;
hide?: boolean
hide?: boolean;
}
interface IProps {
tabList: ITabList[];
onRef?: any;
}
const Tabs = (props: IProps) => {
const { tabList } = props;
const [value, setValue] = useState(tabList.filter(e => !e.hide)[0].value);
const [value, setValue] = useState(tabList.filter((e) => !e.hide)[0].value);
const onChange = (val: string) => {
setValue(val);
};
const setActiveTab = (val: string) => {
onChange(val);
};
useImperativeHandle(props.onRef, () => {
return {
setActiveTab: setActiveTab,
};
});
const labelRender = (item: ITabList, key: number) => {
return (
<Box style={{ display: "flex", alignItems: "center" }}>
{
item.icon ? <img style={{ width: "14px", marginRight: "10px" }} src={value === item.value ? item.iconed : item.icon} alt="" />
: ""
}
<Typography sx={{ fontSize: "14px", fontWeight: '400' }} >{item.label}</Typography>
{item.icon ? (
<img
style={{ width: "14px", marginRight: "10px" }}
src={value === item.value ? item.iconed : item.icon}
alt=""
/>
) : (
""
)}
<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
{item.label}
</Typography>
</Box>
)
}
);
};
return (
<TabContext value={value}>
......@@ -57,7 +76,7 @@ const Tabs = (props: IProps) => {
aria-label="lab API tabs example"
>
{tabList?.map((item, key) => {
if (item.hide) return ""
if (item.hide) return "";
return (
<Tab
key={key}
......
src/views/MenuLayout/index.module.css
View file @ bc925de6
......@@ -13,8 +13,7 @@
.content {
flex: 1;
height: calc(100vh - 57px);
overflow: hidden;
/* ??????????? */
overflow: scroll;
}
.list {
/* background-color: red; */
......
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ bc925de6
......@@ -301,11 +301,11 @@ const MoveFile = (props: any) => {
});
};
const renderLabel = (labelNmae: string) => {
const renderLabel = (node: any) => {
return (
<span className={style.treeLabel}>
<img className={style.labelFolderIcon} src={folderIcon} alt="" />
<span className={style.treeLabelText}>{labelNmae}</span>
<span className={style.treeLabelText}>{node.name}</span>
</span>
);
};
......
src/views/Project/ProjectData/index.tsx
View file @ bc925de6
......@@ -453,7 +453,10 @@ const ProjectData = observer(() => {
// 下载文件
const hanleDownloadFile = (item: any) => {
const downloadPath = path === "/" ? "/" : `${path}/${item.name}`;
console.log(item);
const downloadPath =
path === "/" ? `/${item.name}` : `${path}/${item.name}`;
console.log(downloadPath);
CloudEController.JobFileDownload(
downloadPath,
fileToken as string,
......
src/views/Project/ProjectJobDetail/index.module.css
View file @ bc925de6
......@@ -112,6 +112,10 @@
position: relative;
align-items: center;
}
.taskInfoValueClick {
cursor: pointer;
color: rgba(19, 112, 255, 1);
}
.taskInfoDownload {
color: rgba(19, 112, 255, 1);
cursor: pointer;
......@@ -170,7 +174,7 @@
color: rgba(19, 112, 255, 1);
}
.fullScreenBox{
.fullScreenBox {
position: absolute;
background-color: #fff;
cursor: pointer;
......@@ -179,6 +183,6 @@
bottom: 24px;
padding: 8px;
}
.fullScreenBox:hover{
.fullScreenBox:hover {
opacity: 0.6;
}
\ No newline at end of file
}
src/views/Project/ProjectJobDetail/index.tsx
View file @ bc925de6
......@@ -34,6 +34,7 @@ import Flow from "../components/Flow";
import { cancelWorkflowJob, deleteWorkflowJob } from "@/api/workbench_api";
import { useMessage } from "@/components/MySnackbar";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import { storageUnitFromB } from "@/utils/util";
import styles from "./index.module.css";
......@@ -97,11 +98,16 @@ const ProjectSubmitWork = observer(() => {
path = path.slice(13);
if (path) {
navigate(`/product/cadd/projectData`, {
state: { pathName: "path" },
state: { pathName: path },
});
}
};
const outputPathTransform = (path: string) => {
path = path.slice(13);
return `ProjectData${path}`;
};
const getOutouts = (outputs: any) => {
if (outputs) {
let result = Object.keys(outputs);
......@@ -169,7 +175,9 @@ const ProjectSubmitWork = observer(() => {
if (Array.isArray(res.data)) {
res.data.forEach((item1) => {
if (item1.name === item.path.slice(item.path.lastIndexOf("/") + 1)) {
randerOutputs[index].size = item1.size;
randerOutputs[index].size = `${
item1.size ? storageUnitFromB(Number(item1.size)) : "-"
}`;
setRanderOutputs([...randerOutputs]);
}
});
......@@ -259,7 +267,11 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.swHeaderLeft}>
<IconButton
color="primary"
onClick={() => navigate(-1)}
onClick={() =>
navigate("/product/cadd/projectWorkbench", {
state: { from: "detail" },
})
}
aria-label="upload picture"
component="span"
size="small"
......@@ -352,12 +364,17 @@ const ProjectSubmitWork = observer(() => {
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>输出路径</div>
<div
className={styles.taskInfoValue}
className={classNames({
[styles.taskInfoValue]: true,
[styles.taskInfoValueClick]: true,
})}
onClick={() =>
goToProjectData(workFlowJobInfo?.outputPath as string)
}
>
{workFlowJobInfo?.outputPath || "-"}
{workFlowJobInfo?.outputPath
? outputPathTransform(workFlowJobInfo?.outputPath)
: "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ bc925de6
......@@ -141,24 +141,28 @@ const ConfigForm = (props: ConfigFormProps) => {
result.forEach((task) => {
let isCheck = true;
if (task.parameters.length > 0) {
task.parameters.forEach((parameter) => {
const { error } = getCheckResult(parameter, parameter.value);
if (error) {
isCheck = false;
return;
}
});
task.parameters
.filter((parameter) => parameter.hidden === false)
.forEach((parameter) => {
const { error } = getCheckResult(parameter, parameter.value);
if (error) {
isCheck = false;
return;
}
});
}
if (task.flows.length > 0) {
task.flows.forEach((flow) => {
if (flow.parameters.length > 0) {
flow.parameters.forEach((parameter) => {
const { error } = getCheckResult(parameter, parameter.value);
if (error) {
isCheck = false;
return;
}
});
flow.parameters
.filter((parameter) => parameter.hidden === false)
.forEach((parameter) => {
const { error } = getCheckResult(parameter, parameter.value);
if (error) {
isCheck = false;
return;
}
});
}
});
}
......@@ -258,7 +262,7 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "input" && (
<MyInput
value={parameter.value}
value={parameter.value || ""}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
......@@ -449,11 +453,13 @@ const ConfigForm = (props: ConfigFormProps) => {
</div>
);
})}
{fileSelectOpen && <FileSelect
onClose={handleFileSelectOnClose}
open={fileSelectOpen}
onConfirm={onFileSelectConfirm}
/>}
{fileSelectOpen && (
<FileSelect
onClose={handleFileSelectOnClose}
open={fileSelectOpen}
onConfirm={onFileSelectConfirm}
/>
)}
</div>
);
};
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ bc925de6
......@@ -24,6 +24,7 @@ import { templateConfigJson } from "./mock";
import { useMessage } from "@/components/MySnackbar";
import { toJS } from "mobx";
import { useStores } from "@/store";
import moment from "moment";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
const ProjectSubmitWork = () => {
......@@ -37,8 +38,10 @@ const ProjectSubmitWork = () => {
let configFormRef: any = React.createRef();
// 前往工作台
const goToWorkbench = () => {
navigate("/product/cadd/projectWorkbench");
const goToWorkbench = (toWorkbenchList = false) => {
navigate("/product/cadd/projectWorkbench", {
state: { from: toWorkbenchList ? "submitWork" : "" },
});
};
// 返回
......@@ -65,7 +68,7 @@ const ProjectSubmitWork = () => {
const { run: submitWorkFlowRun } = useMyRequest(submitWorkFlow, {
onSuccess: (res) => {
Message.success("提交成功");
goToWorkbench();
goToWorkbench(true);
},
});
......@@ -80,20 +83,22 @@ const ProjectSubmitWork = () => {
result.tasks.forEach((tack) => {
if (tack.id === taskId) {
let isCheck = true;
tack.parameters.forEach((parameter) => {
if (parameter.name === parameterName) {
parameter.value = value;
const checkResult = getCheckResult(parameter, value);
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
} else {
return;
}
if (getCheckResult(parameter, value).error === true) {
isCheck = false;
}
tack.isCheck = isCheck;
});
tack.parameters
.filter((parameter) => parameter.hidden === false)
.forEach((parameter) => {
if (parameter.name === parameterName) {
parameter.value = value;
const checkResult = getCheckResult(parameter, value);
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
} else {
return;
}
if (getCheckResult(parameter, value).error === true) {
isCheck = false;
}
tack.isCheck = isCheck;
});
} else {
return;
}
......@@ -106,7 +111,6 @@ const ProjectSubmitWork = () => {
const { name, outputPath, nameAndOutputPathCheck } =
configFormRef.current.getNameAndPath();
if (!nameAndOutputPathCheck) {
console.log(123);
check = false;
}
const result: ITemplateConfig = _.cloneDeep(templateConfigInfo);
......@@ -118,8 +122,6 @@ const ProjectSubmitWork = () => {
parameter.error = checkResult.error;
parameter.helperText = checkResult.helperText;
if (checkResult.error) {
console.log(tack);
console.log(parameter);
check = false;
}
});
......@@ -205,7 +207,11 @@ const ProjectSubmitWork = () => {
<div className={styles.swTemplateUpdateTimeBox}>
<span className={styles.swHeaderLable}>更新时间：</span>
<span className={styles.swHeaderValue}>
{templateConfigInfo?.updateTime}
{templateConfigInfo?.updateTime
? moment(templateConfigInfo?.updateTime).format(
"YYYY-MM-DD HH:mm:ss"
)
: "-"}
</span>
</div>
<div className={styles.swHeaderGoback}></div>
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ bc925de6
......@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useState, useMemo, useEffect } from "react";
import React, { memo, useState, useMemo, useEffect } from "react";
import { Box } from "@mui/system";
import { useStores } from "@/store/index";
......@@ -17,76 +17,84 @@ import WorkbenchTemplate from "./workbenchTemplate";
import WorkbenchList from "./workbenchList";
import Tabs from "@/components/mui/Tabs";
import usePass from "@/hooks/usePass";
import { useLocation } from "react-router-dom";
import Template from "@/assets/project/workbenchTemplate.svg"
import Template_select from "@/assets/project/workbenchTemplate_select.svg"
import List from "@/assets/project/workbenchList.svg"
import List_select from "@/assets/project/workbenchList_select.svg"
import Template from "@/assets/project/workbenchTemplate.svg";
import Template_select from "@/assets/project/workbenchTemplate_select.svg";
import List from "@/assets/project/workbenchList.svg";
import List_select from "@/assets/project/workbenchList_select.svg";
//ui
import ButtonDemo from "@/views/mui_demo/button"
import InputDemo from "@/views/mui_demo/input"
// import ButtonDemo from "@/views/mui_demo/button";
// import InputDemo from "@/views/mui_demo/input";
const ProjectWorkbench = observer(() => {
const { currentProjectStore } = useStores();
const isPass = usePass();
const { currentProjectStore } = useStores();
const isPass = usePass();
const location = useLocation();
let tabsRef: any = React.createRef();
useEffect(() => {
console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER'), "11111111111");
console.log(isPass("PROJECT_WORKBENCH_FLOES"), 'wwwwwwwwwww')
}, [])
useEffect(() => {
console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", "USER"), "11111111111");
console.log(isPass("PROJECT_WORKBENCH_FLOES"), "wwwwwwwwwww");
}, []);
const tabList = useMemo(() => {
return [
{
label: "工作流模版",
value: "workbenchTemplate",
component: <WorkbenchTemplate />,
hide: !isPass("PROJECT_WORKBENCH_FLOES"),
icon: Template,
iconed: Template_select
},
{
label: "任务列表",
value: "workbenchList",
component: <WorkbenchList />,
hide: !isPass("PROJECT_WORKBENCH_JOBS"),
icon: List,
iconed: List_select
},
{
label: "按钮组件",
value: "MUI_BUTTON",
component: <ButtonDemo />,
icon: List,
iconed: List_select
},
{
label: "输入框组件",
value: "MUI_INPUT",
component: <InputDemo />,
icon: List,
iconed: List_select
},
];
}, []);
useEffect(() => {
const locationInfo: any = location?.state;
const from = locationInfo?.from;
// 如果是从详情页来的，tab展示为任务列表
if (from === "detail" || from === "submitWork") {
tabsRef?.current?.setActiveTab("workbenchList");
}
}, [location, tabsRef]);
const tabList = useMemo(() => {
return [
{
label: "工作流模版",
value: "workbenchTemplate",
component: <WorkbenchTemplate />,
hide: !isPass("PROJECT_WORKBENCH_FLOES"),
icon: Template,
iconed: Template_select,
},
{
label: "任务列表",
value: "workbenchList",
component: <WorkbenchList />,
hide: !isPass("PROJECT_WORKBENCH_JOBS"),
icon: List,
iconed: List_select,
},
// {
// label: "按钮组件",
// value: "MUI_BUTTON",
// component: <ButtonDemo />,
// icon: List,
// iconed: List_select,
// },
// {
// label: "输入框组件",
// value: "MUI_INPUT",
// component: <InputDemo />,
// icon: List,
// iconed: List_select,
// },
];
}, []);
return (
<div style={{ padding: 24 }}>
<div style={{ display: "flex", alignItems: "center" }}>
<img src={projectImg} alt="项目logo" />
<span style={{ marginLeft: 12 }}>
工作台
</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs tabList={tabList} />
</Box>
</div>
);
return (
<div style={{ padding: 24 }}>
<div style={{ display: "flex", alignItems: "center" }}>
<img src={projectImg} alt="项目logo" />
<span style={{ marginLeft: 12 }}>工作台</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs onRef={tabsRef} tabList={tabList} />
</Box>
</div>
);
});
export default memo(ProjectWorkbench);
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