Commit 55a134bf authored by jiangzijing's avatar jiangzijing

Merge branch 'feat-20220801' into 'staging'

Feat 20220801

See merge request !97
parents 4a4e2d07 a4532ce1
.RadiosBox {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -20,7 +21,6 @@
border-radius: 2px;
line-height: 20px;
padding: 6px 16px;
/* background-color: #e6e8eb; */
flex: 1;
display: flex;
align-items: center;
......@@ -30,8 +30,7 @@
.radioActive {
color: #1370ff;
background-color: #fff;
box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
position: relative;
}
.border {
width: 1px;
......@@ -41,3 +40,19 @@
.borderHidden {
visibility: hidden;
}
.radioActiveBgBox {
width: calc(100% - 2px);
position: absolute;
left: 1px;
top: 1px;
height: 28px;
}
.radioActiveBg {
box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
height: 100%;
background-color: #fff;
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
border-radius: 2px;
width: 50%;
transform: translateX(0px);
}
......@@ -22,11 +22,26 @@ type IRadioGroupOfButtonStyleProps = {
handleRadio: any;
RadiosBoxStyle?: object;
radioStyle?: object;
radioActiveBgBoxStyle?: object;
};
const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
props;
const {
radioOptions,
value,
handleRadio,
RadiosBoxStyle,
radioStyle,
radioActiveBgBoxStyle,
} = props;
const radioWidth = useMemo(() => {
if (radioOptions.length) {
return Number((100 / radioOptions.length).toFixed(2));
} else {
return 100;
}
}, [radioOptions]);
const activeIndex: any = useMemo(() => {
let res = 0;
......@@ -40,6 +55,16 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
return (
<div className={style.RadiosBox} style={RadiosBoxStyle}>
<div className={style.radioActiveBgBox} style={radioActiveBgBoxStyle}>
<div
className={style.radioActiveBg}
style={{
width: `${radioWidth}%`,
transform: `translateX(${activeIndex * 100}%)`,
}}
></div>
</div>
{radioOptions.map((options, index) => {
return (
<>
......
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2021-12-04 15:46:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-21 18:00:58
* @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
import { createTheme, ThemeProvider } from "@mui/material";
import selectActive from "@/assets/project/selectActive.svg";
export interface IOption {
label: string;
value: string;
disabled?: boolean;
}
export const optionsTransform = (
arr: Array<any>,
labelKey: string = "label",
valueKey: string = "value",
disabledKey: string = "disabled"
): Array<IOption> => {
return arr.map((item: any) => {
return {
label: item[labelKey],
value: item[valueKey],
disabled: item[disabledKey],
};
});
};
interface IProps
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: string;
options: IOption[];
onChange?: (val: string) => void;
/** 类型变种 */
variant?: "standard" | "outlined" | "filled";
/** title */
title?: string;
/** 是否显示title */
isTitle?: boolean;
/** 是否显示提示文案 */
error?: boolean;
/** 提示文案 */
helpertext?: string;
}
export default function MyBorderlessSelect(props: IProps) {
const {
value,
options,
title,
isTitle = false,
variant = "outlined",
multiple = false,
onChange,
fullWidth,
error = false,
helpertext,
...other
} = props;
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
height: "36px",
"& .Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderWidth: '0px'
},
},
},
input: {
fontSize: "14px",
"&.Mui-focused":{
color:"#1370FF",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
},
img: {
display: "none",
},
},
},
},
MuiList: {
styleOverrides: {
root: {
"& .MuiButtonBase-root": {
"&.Mui-selected": {
backgroundColor: "#fff",
color: "#1370FF",
},
},
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
paddingRight: "46px",
fontSize: "14px",
lineHeight: "24px",
":hover": {
backgroundColor: "#F0F2F5 ",
color: "#1E2633",
},
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "0px",
color: '#1370FF'
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
borderWidth: "0px",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
":hover": {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#1370ff",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
fontSize: "14px",
// 下拉框未选择时的label定位
top: "-9px",
},
shrink: {
// 下拉框已经选择时的label定位
top: 0,
},
},
},
MuiSelect: {
styleOverrides: {
select: {
padding: "6.5px 14px",
fontSize: "14px",
},
},
},
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
},
},
},
},
});
const handleChange = (e: SelectChangeEvent<unknown>) => {
onChange && onChange(e.target.value as string);
};
return (
<ThemeProvider theme={theme}>
<FormControl fullWidth={fullWidth} variant={variant} error={error}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
) : null}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label={title || ""}
size="small"
multiple={multiple}
{...other}
value={value || ""}
onChange={handleChange}
>
{options.length
? options?.map((item: IOption, index) => {
return (
<MenuItem
value={item.value}
disabled={item?.disabled}
key={index}
>
{item.label}
{value === item.value && (
<img
style={{
width: "16px",
height: "16px",
position: "absolute",
top: "10px",
right: "12px",
}}
src={selectActive}
alt=""
/>
)}
</MenuItem>
);
})
: null}
</Select>
{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
</FormControl>
</ThemeProvider>
);
}
......@@ -63,12 +63,13 @@ const theme = createTheme({
},
MuiCheckbox: {
styleOverrides: {
colorPrimary: {
color: "rgba(209, 214, 222, 1)",
root: {
"&.Mui-checked .MuiSvgIcon-root": {
color: "rgba(19, 110, 250, 1)",
},
},
},
},
// MuiCheckbox-colorPrimary
},
});
......
......@@ -71,7 +71,7 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
bgcolor: "transparent",
minWidth: "200px",
fontSize: "14px",
padding: "20px 16px",
padding: "8px 0px",
}}
>
<Box
......@@ -80,7 +80,7 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
minWidth: "200px",
borderRadius: "4px",
fontSize: "14px",
padding: "20px 16px",
padding: "16px 20px",
boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
}}
>
......
......@@ -61,6 +61,15 @@ const theme = createTheme({
},
},
},
MuiRadio: {
styleOverrides: {
root: {
"&.Mui-checked span": {
color: "rgba(19, 110, 250, 1)",
},
},
},
},
},
});
......
......@@ -154,6 +154,7 @@ export default function MySelect(props: IProps) {
MuiInputLabel: {
styleOverrides: {
root: {
fontSize: "14px",
// 下拉框未选择时的label定位
top: "-9px",
},
......@@ -180,6 +181,14 @@ export default function MySelect(props: IProps) {
},
},
},
// MuiFormControl: {
// styleOverrides: {
// root: {
// width: fullWidth ? "100%" : "auto",
// },
// },
// },
},
});
......
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-01 16:53:15
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-25 12:04:49
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-06 16:30:56
* @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableHead.jsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -54,7 +54,7 @@ const EnhancedTableHead = (props: any) => {
classes={{ head: (k && headTableCell) || classes.headTableCell }}
>
{
headCell.sort && <TableSortLabel active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
headCell.sort && <TableSortLabel style={{fontSize: "16px", fontWeight: '400', color: 'rgba(0, 0, 0, 0.87)', fontFamily: 'Roboto,Helvetica,Tahoma,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}} active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
{headCell.label}
</TableSortLabel>
}
......
......@@ -21,7 +21,7 @@ const useMyRequest = <TData, TParams>(
defaultParams?: TParams[];
onBefore?: (params: TParams[]) => void;
onSuccess?: (data: TData, params: TParams[]) => void;
onError?: (e: Error, params: TParams[]) => void;
onError?: (e: any, params: TParams[]) => void;
onFinally?: (params: TParams[], data?: TData, e?: Error) => void;
loadingDelay?: number;
pollingInterval?: number;
......@@ -51,9 +51,16 @@ const useMyRequest = <TData, TParams>(
const request = useRequest(api, {
...defaultOptions,
onSuccess: () => {},
onError: (data) => {
onSuccess: () => { },
onError: (data: any) => {
Message.error(data.message);
if (data.errorCode === '100003') {
setTimeout(() => {
localStorage.removeItem('token_key');
if (window.location.href && !window.location.href.includes("/login-page"))
window.location.href = '/v2/pages/login-page'
}, 4000);
}
},
...options,
});
......
import React, { useEffect, useState } from "react";
import React, { useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { observer } from "mobx-react-lite";
import Avatar from "@mui/material/Avatar";
......@@ -67,6 +67,15 @@ const ConsoleLayout = observer(() => {
const location = useLocation();
const { permissionStore, menuStore } = useStores();
// 不在产品页面下的时候清空当前产品
useEffect(() => {
if (location.pathname.slice(0, 8) !== "/product") {
currentProjectStore.setProjectList([]);
currentProjectStore.changeProject({});
currentProjectStore.changeProductInfo({});
}
}, [location, currentProjectStore]);
useEffect(() => {
permissionStore.setSidebarRouters(location.pathname);
}, [location, permissionStore]);
......@@ -76,12 +85,6 @@ const ConsoleLayout = observer(() => {
<Box className={style.topApp}>
<Box className={style.topLeftBox}>
<img src={logo} alt="" className={style.logo} />
{/* <MyButton
text={globalText.console}
variant={"text"}
style={{ color: "#565C66" }}
onClick={() => navigate("/home")}
/> */}
<div className={style.menuBox} onClick={() => navigate("/home")}>
<div className={style.menuTitle}>{globalText.console}</div>
</div>
......
......@@ -9,7 +9,7 @@
import { Box, List } from "@mui/material";
import CurrentProject from "../Project/components/CurrentProject";
import React from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import style from "./index.module.css";
import { observer } from "mobx-react-lite";
import { useStores } from "@/store/index";
......@@ -23,9 +23,10 @@ const MenuLayout = observer(() => {
const navigate = useNavigate();
const productInfo = toJS(currentProjectStore.currentProductInfo);
const location = useLocation();
// 未选择产品时 直接跳转home页面
if (!productInfo.name) {
// 在产品页面下且未选择产品时 直接跳转home页面
if (!productInfo.name && location.pathname.slice(0, 8) === "/product") {
navigate("/home");
}
......
......@@ -206,7 +206,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
},
]}
RadiosBoxStyle={{ width: "132px" }}
></RadioGroupOfButtonStyle>
/>
)}
<MyMultipleMenu
value={showData}
......
......@@ -572,7 +572,7 @@ const ProjectData = observer(() => {
{ value: "dataset", label: "数据集" },
]}
handleRadio={setActiveTab}
></RadioGroupOfButtonStyle>
/>
<IconButton
aria-label="refreshIcon"
size="small"
......
......@@ -20,36 +20,71 @@
}
.logViewTop {
/* height: 30px; */
position: relative;
width: 100vw;
background-color: #1d2126;
/* border-radius: 8px 8px 0 0; */
display: flex;
font-size: 12px;
color: #8a9099;
/* overflow: overlay; */
overflow: hidden;
}
.logViewTop::-webkit-scrollbar-track {
background-color: #282c34;
.leftButton {
width: 48px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-right: 1px solid #10141A;
background-color: #1d2126;
}
.rightButton {
width: 48px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-left: 1px solid #10141A;
background-color: #1d2126;
}
.middleFixed {
width: calc(100vw - 98px);
position: relative;
overflow: hidden;
}
.middleDynamic{
display: flex;
position: absolute;
left: 0;
}
.logTitle {
display: flex;
width: 0;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
flex: 1;
text-overflow: ellipsis;
flex-shrink: 0;
align-items: center;
height: 30px;
height: 32px;
line-height: 20px;
padding: 0 24px;
padding: 0 20px;
cursor: pointer;
border-right: 1px solid #10141A;
}
.logName {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.logTitleSelected {
background: #282c34;
color: #ffffff;
......@@ -78,7 +113,7 @@
width: calc(100vw - 64px);
background-color: #282c34;
position: absolute;
top: 30px;
top: 32px;
left: 32px;
z-index: 1005;
}
......
......@@ -8,17 +8,17 @@ import CloudEController from "@/api/fileserver/CloudEController";
import { useStores } from "@/store";
import { toJS } from "mobx";
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
type LogViewProps = {
isshow: boolean;
handleClose: () => void;
logs: any[];
setShowAddTemplate: any;
setShowLogView: any;
};
const LogView = (props: LogViewProps) => {
const { isshow, handleClose, logs, setShowAddTemplate } = props;
const { logs, setShowLogView } = props;
const { currentProjectStore } = useStores();
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
......@@ -65,10 +65,13 @@ const LogView = (props: LogViewProps) => {
}
return (
<FullScreenDrawer handleClose={setShowAddTemplate} zIndex={1002}>
<FullScreenDrawer handleClose={setShowLogView} zIndex={1002}>
<div className={style.logViewBox}>
<div className={style.logViewContentMask}></div>
<div className={style.logViewTop}>
<div className={style.leftButton}><ChevronLeftIcon /></div>
<div className={style.middleFixed}>
<div className={style.middleDynamic}>
{logs.map((item: any, index: number) => {
return <div
key={index}
......@@ -78,10 +81,13 @@ const LogView = (props: LogViewProps) => {
[style.logTitleSelected]: index === logCurrent,
})}>
<InsertDriveFileOutlinedIcon className={style.fileIcon} />
<span>{item.logName}</span>
<span className={style.logName}>{item.logName}</span>
</div>
})}
</div>
</div>
<div className={style.rightButton}><ChevronRightIcon /></div>
</div>
<div className={style.logViewContent}>
{logText}
</div>
......
......@@ -28,9 +28,20 @@
.goBackIcon {
cursor: pointer;
}
.goBackIconBox {
width: 32px;
height: 32px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.goBackIconBox:hover {
background-color: rgb(240, 242, 245);
}
.swTemplateTitle {
margin: 0 19px 0 8px;
line-height: 22px;
margin: 0 19px 0 3px;
line-height: 20px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 700;
......@@ -112,12 +123,7 @@
line-height: 22px;
width: 80px;
margin-right: 44px;
overflow: hidden;
word-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.taskInfoValue {
color: rgba(30, 38, 51, 1);
......@@ -130,6 +136,7 @@
word-break: break-all;
flex: 1;
justify-content: flex-end;
word-wrap: break-word;
}
.taskInfoValueClick {
cursor: pointer;
......@@ -202,6 +209,7 @@
right: 24px;
bottom: 24px;
padding: 8px;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
}
.fullScreenBox:hover {
opacity: 0.6;
......
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-05 17:33:58
* @LastEditTime: 2022-09-06 10:54:40
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -47,6 +47,7 @@ import {
getDatasetPath,
getSameBatch,
} from "./utils";
import MyTooltip from "@/components/mui/MyTooltip";
import styles from "./index.module.css";
......@@ -75,11 +76,11 @@ const ProjectSubmitWork = observer(() => {
const productId = toJS(currentProjectStore.currentProductInfo.id);
const [workFlowJobInfo, setWorkFlowJobInfo] = useState<ITaskInfo>();
const [patchInfo, setPatchInfo] = useState<any>();
const [overviewInfo, setOverviewInfo] = useState<any>();
const [overviewActive, setOverviewActive] = useState(true);
/** 选中的node Id */
const [activeFlowIndex, setActiveFlowIndex] = useState<string>("");
/** 选中的flow Title */
const [selectNodeTitle, setSelectNodeTitle] = useState('参数')
// const [showOptions, setShowOptions] = useState<boolean>(false);
const [randerOutputs1, setRanderOutputs] = useState<Array<any>>([]);
const locationInfo: any = useLocation()?.state;
......@@ -241,7 +242,7 @@ const ProjectSubmitWork = observer(() => {
state: { type: "workbenchList" },
});
}
}, [navigate]);
}, [navigate, locationInfo.from]);
const getOutouts = (outputs: any) => {
if (outputs) {
......@@ -308,7 +309,8 @@ 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 ? storageUnitFromB(Number(item1.size)) : "-"
randerOutputs[index].size = `${
item1.size ? storageUnitFromB(Number(item1.size)) : "-"
}`;
setRanderOutputs([...randerOutputs]);
}
......@@ -346,7 +348,7 @@ const ProjectSubmitWork = observer(() => {
if (item.id === id) {
getworkFlowTaskInfoRun({
jobId: workFlowJobInfo?.id as string,
taskId: item.parentNode || item.id
taskId: item.parentNode || item.id,
});
}
});
......@@ -355,32 +357,26 @@ const ProjectSubmitWork = observer(() => {
const selectedParameter = useCallback(
(list: any) => {
let result: any = [];
if(patchInfo?.id === activeFlowIndex ) {
setSelectNodeTitle(list[0].title || '')
result = list[0].parameters
} else {
list?.length &&
list?.forEach((item: any) => {
if (item.id === activeFlowIndex) {
console.log(1111)
setSelectNodeTitle(item?.title || '')
setOverviewInfo(item);
result = item.parameters;
}
});
}
return result;
},
[activeFlowIndex, patchInfo]
[activeFlowIndex]
);
const randerParameters = useMemo(() => {
if (patchInfo?.children?.length) {
return selectedParameter(patchInfo?.children);
if (patchInfo?.id === activeFlowIndex) {
setOverviewInfo(patchInfo);
return patchInfo?.parameters;
} else {
return selectedParameter(patchInfo?.parameters);
return selectedParameter(patchInfo?.children);
}
}, [patchInfo, selectedParameter]);
}, [activeFlowIndex, patchInfo, selectedParameter]);
const handleParams = () => {
setOverviewActive(false);
......@@ -412,12 +408,20 @@ const ProjectSubmitWork = observer(() => {
const [popperTitle, setPopperTitle] = useState(
"正在运行的任务终止后将无法重新运行,确认继续吗?"
);
const [placement, setPlacement] = useState<"bottom" | "bottom-start">(
"bottom"
);
const [anchorEl, setAnchorEl] = useState<any>(null);
const handleCancel = () => {
setAnchorEl(null);
};
const handleShowPopper = (e: any, title: string) => {
const handleShowPopper = (
e: any,
title: string,
placementParams: "bottom" | "bottom-start"
) => {
setPlacement(placementParams);
setPopperTitle(title);
setAnchorEl(e.currentTarget);
};
......@@ -441,13 +445,14 @@ const ProjectSubmitWork = observer(() => {
{fullScreenShow ? null : (
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<div className={styles.goBackIconBox}>
<img
onClick={onBack}
className={styles.goBackIcon}
src={goback}
alt=""
/>
</div>
<div className={styles.swTemplateTitle}>{name}</div>
</div>
{returnPermission && (
......@@ -465,7 +470,8 @@ const ProjectSubmitWork = observer(() => {
e,
["SUBMITTED", "RUNNING"].includes(state || "")
? "正在运行的任务终止后将无法重新运行,确认继续吗?"
: "任务被删除后将无法恢复,确认继续吗?"
: "任务被删除后将无法恢复,确认继续吗?",
"bottom-start"
)
}
></MyButton>
......@@ -489,7 +495,6 @@ const ProjectSubmitWork = observer(() => {
className={styles.outputLiLeft}
onClick={(e: any) => {
handleDownLoadOutput(item);
// goToProjectData(getFolderPath(item.path));
}}
>
<img
......@@ -503,7 +508,6 @@ const ProjectSubmitWork = observer(() => {
{item.name}
</span>
</div>
{/* </MyPopconfirm> */}
<span className={styles.outputLiRight}>
{item.size}
</span>
......@@ -542,7 +546,8 @@ const ProjectSubmitWork = observer(() => {
onClick={(e: any) => {
handleShowPopper(
e,
"即将跳转至项目数据内该任务的输出路径,确认继续吗?"
"即将跳转至项目数据内该任务的输出路径,确认继续吗?",
"bottom"
);
setGoToProjectDataPath(
workFlowJobInfo?.outputPath as string
......@@ -648,7 +653,9 @@ const ProjectSubmitWork = observer(() => {
)}
{activeFlowIndex && (
<div className={styles.suanziInfo}>
<div className={styles.title}>{patchInfo?.title}</div>
<MyTooltip>
<div className={styles.title}>{overviewInfo?.title}</div>
</MyTooltip>
<div className={styles.tabs}>
<div
className={classNames({
......@@ -667,7 +674,7 @@ const ProjectSubmitWork = observer(() => {
// onClick={() => setOverviewActive(false)}
onClick={() => handleParams()}
>
{selectNodeTitle}
参数
</div>
</div>
{overviewActive && (
......@@ -680,40 +687,40 @@ const ProjectSubmitWork = observer(() => {
[styles.taskInfoValueShowAll]: true,
})}
>
{patchInfo?.description}
{overviewInfo?.description}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>算子版本</div>
<div className={styles.taskInfoValue}>
{patchInfo?.version || "-"}
{overviewInfo?.version || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>算子状态</div>
<div className={styles.taskInfoValue}>
{patchInfo?.status === "Done" && (
{overviewInfo?.status === "Done" && (
<img
className={styles.taskInfoValueIcon}
src={jobSue}
alt=""
/>
)}
{patchInfo?.status === "Running" && (
{overviewInfo?.status === "Running" && (
<img
className={styles.taskInfoValueIcon}
src={jobRun}
alt=""
/>
)}
{patchInfo?.status === "Failed" && (
{overviewInfo?.status === "Failed" && (
<img
className={styles.taskInfoValueIcon}
src={jobFail}
alt=""
/>
)}
{statusMap[patchInfo?.status as IStatus]}
{statusMap[overviewInfo?.status as IStatus]}
</div>
</div>
</div>
......@@ -760,6 +767,7 @@ const ProjectSubmitWork = observer(() => {
anchorEl={anchorEl}
onCancel={handleCancel}
onConfirm={handleConfirm}
placement={placement}
/>
{showSeeDataset && (
<SeeDataset
......@@ -770,7 +778,12 @@ const ProjectSubmitWork = observer(() => {
projectId={projectId as string}
></SeeDataset>
)}
{showLogView && <LogView isshow={showLogView} handleClose={handleClose} logs={logs} setShowAddTemplate={handleClose} />}
{showLogView && (
<LogView
logs={logs}
setShowLogView={handleClose}
/>
)}
</div>
);
});
......
......@@ -127,7 +127,9 @@
align-items: center;
color: #1e2633;
cursor: pointer;
height: 30px;
height: 31px;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......
......@@ -29,15 +29,15 @@ const ProjectOverview = observer(() => {
// 选择近7天or近15天or近30天
const [day, setDay] = useState("7");
// 滚轮是否到顶,判断是否显示阴影
const [isTop, setIsTop] = useState(true)
const [isTop, setIsTop] = useState(true);
// 滚动滚轮时监听是否到顶
const onscroll = (e: any) => {
if (e.target.scrollTop <= 0) {
setIsTop(true)
setIsTop(true);
} else {
setIsTop(false)
}
setIsTop(false);
}
};
// 获取概览基本信息
const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
onSuccess: (result: any) => {
......@@ -207,7 +207,7 @@ const ProjectOverview = observer(() => {
{ value: "30", label: "近30天" },
]}
handleRadio={setDay}
></RadioGroupOfButtonStyle>
/>
</div>
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
......
......@@ -16,7 +16,7 @@ import Dialog from "@/components/mui/MyDialog";
import useMyRequest from "@/hooks/useMyRequest";
import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar";
import MySelect, { IOption } from "@/components/mui/MySelect";
import MyBorderlessSelect, { IOption } from "@/components/mui/MyBorderlessSelect";
import MyTable from "@/components/mui/MyTable";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import {
......@@ -67,8 +67,7 @@ const AddMember = observer((props: IProps) => {
(every) => every.value === item
);
return (
<MySelect
input={<OutlinedInput />}
<MyBorderlessSelect
value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"}
onChange={(val) => changePermission(val, index)}
options={selectOptions}
......
......@@ -39,7 +39,9 @@ const ProjectSetting = observer(() => {
if (currentProjectStore.currentProjectInfo.name) {
return (
<div style={{ padding: "28px 24px 24px" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<div
style={{ display: "flex", alignItems: "center", marginBottom: "3px" }}
>
<span
style={{
fontSize: "18px",
......
......@@ -2,7 +2,7 @@
position: relative;
}
.templateDescBox {
margin-bottom: 40px;
margin-bottom: 24px;
}
.templateDescTitle {
font-size: 16px;
......@@ -81,11 +81,10 @@
}
.taskConfigBox {
padding: 16px 0px 4px;
}
.flowTitle {
line-height: 16px;
margin: 3px 0 27px;
margin: 3px 0 25px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
font-weight: 600;
......@@ -119,11 +118,11 @@
margin-left: 16px;
}
.bacthConfigBox {
padding: 0 24px 0;
padding: 16px 24px 4px;
}
.flowConfigBox {
border-bottom: 1px solid rgba(235, 237, 240, 1);
padding: 20px 24px 12px;
padding: 24px 24px 12px;
}
.flowConfigBox:nth-last-child(1) {
border-bottom: none;
......
......@@ -492,12 +492,16 @@ const ConfigForm = (props: ConfigFormProps) => {
/>
</div>
<div className={styles.taskConfigBox}>
{task.parameters.filter(
(parameter) => !parameter?.thrown && !parameter.hidden
).length !== 0 && (
<div className={styles.bacthConfigBox}>
{randerParameters(
task.parameters.filter((parameter) => !parameter?.thrown),
task.id
)}
</div>
)}
{task.flows.map((flow) => {
if (
flow.parameters.filter(
......
......@@ -25,9 +25,23 @@
justify-content: flex-start;
align-items: center;
}
.goBackIcon {
cursor: pointer;
}
.goBackIconBox {
width: 32px;
height: 32px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.goBackIconBox:hover {
background-color: rgb(240, 242, 245);
}
.swTemplateTitle {
margin: 0 19px 0 8px;
line-height: 22px;
margin: 0 19px 0 3px;
line-height: 20px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
font-weight: 700;
......@@ -51,11 +65,11 @@
}
.swFormBox {
background-color: #fff;
border-right: 1xp solid rgba(235, 237, 240, 1);
border-right: 1px solid rgba(235, 237, 240, 1);
width: 608px;
overflow-y: overlay;
box-sizing: border-box;
padding: 36px;
padding: 32px 32px 16px;
}
.swFlowBox {
flex: 1;
......@@ -70,6 +84,7 @@
right: 24px;
bottom: 24px;
padding: 8px;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
}
.fullScreenBox:hover {
opacity: 0.6;
......
......@@ -8,8 +8,6 @@
*/
import { toJS } from "mobx";
import React, { useEffect, useState } from "react";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton";
import _ from "lodash";
import { useLocation, useNavigate } from "react-router-dom";
import moment from "moment";
......@@ -232,12 +230,20 @@ const ProjectSubmitWork = observer(() => {
const [popperTitle, setPopperTitle] = useState(
"提交前请先确认参数填写无误,确认提交吗?"
);
const [placement, setPlacement] = useState<
"bottom" | "bottom-start" | "bottom-end"
>("bottom");
const [anchorEl, setAnchorEl] = useState<any>(null);
const handleCancel = () => {
setAnchorEl(null);
};
const handleShowPopper = (e: any, title: string) => {
const handleShowPopper = (
e: any,
title: string,
placementParams: "bottom" | "bottom-start" | "bottom-end"
) => {
setPlacement(placementParams);
setPopperTitle(title);
setAnchorEl(anchorEl ? null : e.currentTarget);
};
......@@ -255,14 +261,20 @@ const ProjectSubmitWork = observer(() => {
{fullScreenShow ? null : (
<div className={styles.swHeader}>
<div className={styles.swHeaderLeft}>
<div className={styles.goBackIconBox}>
<img
className={styles.goBackIcon}
src={goback}
alt=""
onClick={(e: any) =>
handleShowPopper(e, "返回将放弃当前页面所有操作,确认返回吗?")
handleShowPopper(
e,
"返回将放弃当前页面所有操作,确认返回吗?",
"bottom-end"
)
}
/>
</div>
<div className={styles.swTemplateTitle}>
{templateConfigInfo?.title}
</div>
......@@ -288,7 +300,11 @@ const ProjectSubmitWork = observer(() => {
<MyButton
text="提交任务"
onClick={(e: any) =>
handleShowPopper(e, "提交前请先确认参数填写无误,确认提交吗?")
handleShowPopper(
e,
"提交前请先确认参数填写无误,确认提交吗?",
"bottom-start"
)
}
></MyButton>
</div>
......@@ -328,6 +344,7 @@ const ProjectSubmitWork = observer(() => {
onCancel={handleCancel}
onConfirm={handleConfirm}
loading={loading}
placement={placement}
/>
</div>
);
......
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-02 14:45:04
* @LastEditTime: 2022-09-06 10:17:18
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -41,6 +41,7 @@ import MyProgress from "@/components/mui/MyProgress";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
import moment from "moment";
import MyTooltip from "@/components/mui/MyTooltip";
import styles from "./index.module.css";
......@@ -201,6 +202,7 @@ const ProjectMembers = observer(() => {
};
useEffect(() => {
setLoading(true);
setTimeout(() => {
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
......@@ -296,15 +298,21 @@ const ProjectMembers = observer(() => {
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
setJobName(e.target.value);
setLoading(true);
}
};
const handleKeyWordChangeBlur = (e: any) => {
setJobName(e.target.value);
};
return (
<Box className={styles.headerBox}>
<Box className={styles.tabHeader}>
<Box sx={{ display: "flex" }}>
<SearchInput onKeyUp={handleKeyWordChangeKeyUp} sx={{ width: 340 }} />
<SearchInput
onKeyUp={handleKeyWordChangeKeyUp}
onBlur={handleKeyWordChangeBlur}
sx={{ width: 340 }} />
{/* <Box className={styles.tabHeaderSelect}>
<TextField
select
......@@ -374,7 +382,7 @@ const ProjectMembers = observer(() => {
<Box className={styles.body} style={{ position: "relative" }}>
<MyCircularProgress loading={loading}>
{jobList.length === 0 && !loading && (
{jobList.length === 0 && (
<Box
sx={{
display: "flex",
......@@ -400,7 +408,9 @@ const ProjectMembers = observer(() => {
onClick={() => rowClick(item.id)}
>
<Box className={styles.tabBoxInfo}>
<MyTooltip title={item.name}>
<div className={styles.tabBoxTitle}>{item.name}</div>
</MyTooltip>
<Box className={styles.tabBoxDescInfo}>
<div
className={styles.tabBoxDesc}
......@@ -498,11 +508,7 @@ const ProjectMembers = observer(() => {
</MyCircularProgress>
</Box>
<div className={styles.pagination}>
<MyPagination
page={page}
pageChange={handleChangePage}
count={count || jobList.length}
/>
<MyPagination page={page} pageChange={handleChangePage} count={count} />
</div>
{/* <TablePagination
......
......@@ -53,16 +53,16 @@ const AddTemplate = (props: IAddTemplateProps) => {
const [templateType, setTemplateType] = useState("public");
// 滚轮是否到顶,判断是否显示阴影
const [isTop, setIsTop] = useState(true)
const [isTop, setIsTop] = useState(true);
// 滚动滚轮时监听是否到顶
const onscroll = (e: any) => {
if (e.target.scrollTop <= 0) {
setIsTop(true)
setIsTop(true);
} else {
setIsTop(false)
}
setIsTop(false);
}
};
const handleRadio = (value: string) => {
setTemplateType(value);
......@@ -144,8 +144,11 @@ const AddTemplate = (props: IAddTemplateProps) => {
};
// 获取模板列表
const getAddTemplateListFun = useCallback((newTitle?: string) => {
const userName = JSON.parse(localStorage.getItem("userInfo") || "{}")?.name;
const getAddTemplateListFun = useCallback(
(newTitle?: string) => {
const userName = JSON.parse(
localStorage.getItem("userInfo") || "{}"
)?.name;
setSelectTemplateData([]);
setAddTemplateList([]);
if (templateType === "public") {
......@@ -163,20 +166,22 @@ const AddTemplate = (props: IAddTemplateProps) => {
keyword: newTitle,
});
}
}, [
},
[
setSelectTemplateData,
getAddTemplateList,
productId,
projectId,
templateType,
// title,
]);
]
);
//模板启用切换
const templateSwitch = (e: any, id: string) => {
if (e.target.checked) {
let arr = []
arr.push(id)
let arr = [];
arr.push(id);
addTemplate({
projectId: projectId as string,
workflowSpecIds: arr,
......@@ -187,7 +192,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
workflowSpecId: id,
});
}
}
};
useEffect(() => {
getAddTemplateListFun();
......@@ -255,7 +260,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
value={templateType}
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
/>
{/* <MyButton
onClick={handleAddTemplate}
size={"small"}
......@@ -272,7 +277,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
</Box>
</Box>
</div>
<div className={style.templateBox} onScroll={onscroll} >
<div className={style.templateBox} onScroll={onscroll}>
{templateType === "public" && addTemplateList.length === 0 && (
<Box
sx={{
......@@ -342,9 +347,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
<div className={style.templateLiEditBox}>
<MySwitch
defaultChecked={item.favorited}
onChange={(e: any) =>
templateSwitch(e, item.id)
}
onChange={(e: any) => templateSwitch(e, item.id)}
></MySwitch>
</div>
......
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:20:29
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-08-31 17:09:26
* @LastEditTime: 2022-09-07 10:06:13
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -63,7 +63,7 @@ const BatchNode = (props: IBatchNode) => {
{inParamsArr?.length
? inParamsArr.map((item, index) => {
return (
<MyTooltip title={item.name} key={uuid()}>
<MyTooltip title={item.title} key={uuid()}>
<Handle
className={styles.handleBox}
id={item.name}
......@@ -95,7 +95,7 @@ const BatchNode = (props: IBatchNode) => {
{outParamsArr?.length
? outParamsArr.map((item, index) => {
return (
<MyTooltip title={item.name} key={uuid()}>
<MyTooltip title={item.title} key={uuid()}>
<Handle
className={styles.handleBox}
id={item.name}
......
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:29:46
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-09-02 14:23:07
* @LastEditTime: 2022-09-07 10:44:23
* @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
*/
......@@ -81,7 +81,7 @@ const FlowNode = (props: any) => {
{inParamsArr?.length
? inParamsArr.map((item: any, index: number) => {
return (
<MyTooltip title={item.name} key={uuid()}>
<MyTooltip title={item.title} key={uuid()}>
<Handle
className={styles.handleBox}
id={item.name}
......@@ -117,7 +117,7 @@ const FlowNode = (props: any) => {
{outParamsArr?.length
? outParamsArr.map((item: any, index: number) => {
return (
<MyTooltip title={item.name} key={uuid()}>
<MyTooltip title={item.title} key={uuid()}>
<Handle
className={styles.handleBox}
id={item.name}
......
.reactFlowBox > div:last-child {
display: none;
}
/* .reactFlowBox > div:first-child {
margin-top: 32px;
} */
......@@ -12,6 +12,8 @@
display: flex;
flex-direction: column;
border-left: 1px solid #dde1e6;
animation: myfirst 0.3s;
-webkit-animation: myfirst 0.3s; /* Safari and Chrome */
}
.searchBox {
......@@ -119,3 +121,21 @@
line-height: 20px;
font-size: 12px;
}
@keyframes myfirst {
from {
width: 0;
}
to {
width: 260px;
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
from {
width: 0;
}
to {
width: 260px;
}
}
......@@ -4,12 +4,18 @@
cursor: grab;
padding: 16px 16px 0 24px;
background-color: #fff;
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari */
}
.operatorItemBox:hover {
box-shadow: 0px 5px 16px 0px rgba(0, 24, 57, 0.1);
position: relative;
top: -1px;
}
.operatorItemBox .footerBox {
transition: width 0.2s;
-webkit-transition: width 0.2s; /* Safari */
}
.operatorItemBox:hover .footerBox {
border-bottom: 1px solid #fff;
}
......
......@@ -105,7 +105,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
const newBatchFlowArr = getCopyBatchFlowArr(
batchFlowArr,
clientX - upperLeftPointX,
clientY - upperLeftPointY
clientY - upperLeftPointY + 44
);
const newVal = cloneDeep(templateConfigInfo);
newVal.push(...newBatchFlowArr);
......
......@@ -300,6 +300,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
helpertext={parameter.helperText}
options={parameter?.choices || []}
disabled={parameter.parameterGroup === "out"}
fullWidth={true}
></MySelect>
)}
{(parameter.domType || "").toLowerCase() === "multipleselect" && (
......@@ -320,6 +321,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
helpertext={parameter.helperText}
options={parameter?.choices || []}
disabled={parameter.parameterGroup === "out"}
fullWidth={true}
></MySelect>
)}
{(parameter.domType || "").toLowerCase() === "radio" && (
......@@ -510,7 +512,12 @@ const ParameterSetting = (props: IParameterSettingProps) => {
} else {
setActiveParamsTab(""); // 会报错 不过不会有蓝色长条
}
}, [basisParameters, seniorParameters, hardwareParameters]);
}, [
taskId,
basisParameters.length,
seniorParameters.length,
hardwareParameters.length,
]);
return (
<div className={styles.parameterSetting}>
......
......@@ -26,12 +26,20 @@
align-items: center;
}
.goBackIcon {
margin-right: 8px;
cursor: pointer;
}
/* .goBackIcon:hover:{
color: ;
} */
.goBackIconBox {
width: 32px;
height: 32px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 3px;
}
.goBackIconBox:hover {
background-color: rgb(240, 242, 245);
}
.goBack {
cursor: pointer;
color: #1e2633;
......
......@@ -197,7 +197,9 @@ const WorkFlowEdit = observer((props: IProps) => {
)
}
>
<div className={styles.goBackIconBox}>
<img className={styles.goBackIcon} src={goback} alt="" />
</div>
<span className={styles.goBack}>返回</span>
</div>
<div className={styles.swHeaderRight}>
......@@ -224,7 +226,10 @@ const WorkFlowEdit = observer((props: IProps) => {
fontSize: "16px",
height: "30px",
}}
></RadioGroupOfButtonStyle>
radioActiveBgBoxStyle={{
height: "32px",
}}
/>
</div>
{leftContentType === "list" && (
<OperatorList
......
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