Skip to content

B
bkunyun
Commit 04d22d2e authored by rocosen's avatar rocosen
Browse files
Options

feat：作业列表

parent 60871319
Show whitespace changes
Inline Side-by-side
Showing with 678 additions and 25 deletions
src/api/api_manager.ts
View file @ 04d22d2e
......@@ -29,6 +29,17 @@ const RESTAPI = {
API_WORKBENCH_DELETE_TEMPLATE: `${BACKEND_API_URI_PREFIX}/cpp/workbench/project/workflowspec`, //项目管理员-删除工作流模板
API_WORKBENCH_ADD_TEMPLATE_LIST: `${BACKEND_API_URI_PREFIX}/cpp/workbench/product/workflowspec`, //项目管理员-添加工作流模板-模板列表
API_WORKBENCH_ADD_TEMPLATE: `${BACKEND_API_URI_PREFIX}/cpp/workbench/project/workflowspec`, //项目管理员-添加工作流模板-提交
API_WORKBENCH_WORKFLOWJOB_LIST: `${BACKEND_API_URI_PREFIX}/cpp/workbench/project/workflowjob`, //查询工作流任务
API_WORKBENCH_DEL_WORKFLOWJOB: `${BACKEND_API_URI_PREFIX}/cpp/workflow/job/`, //删除工作流任务
API_WORKBENCH_CANCEL_WORKFLOWJOB: `${BACKEND_API_URI_PREFIX}/cpp/workflow/cancel`, //取消工作流
};
export default RESTAPI;
src/api/workbench_api.ts
View file @ 04d22d2e
......@@ -74,11 +74,59 @@ const addWorkbenchTemplate = (params: workflowspecAddTemplateParams) => {
};
type workflowJobListParams = {
projectId: string;
name?: string;
state?: string;
page?: number;
size?: number;
};
// 查询项目下工作流模板列表
const getWorkflowJobList = (params: workflowJobListParams) => {
return request({
url: Api.API_WORKBENCH_WORKFLOWJOB_LIST,
method: "get",
params,
});
};
type workflowJobDelParams = {
id: string
};
// 项目管理员-删除工作流模板
const deleteWorkflowJob = (params: workflowJobDelParams) => {
return request({
url: Api.API_WORKBENCH_DEL_WORKFLOWJOB + params.id,
method: "delete",
});
};
type workflowJobCancelParams = {
jobid: string
};
// 取消工作流
const cancelWorkflowJob = (params: workflowJobCancelParams) => {
return request({
url: Api.API_WORKBENCH_CANCEL_WORKFLOWJOB,
method: "delete",
params,
});
};
export {
current,
menu,
getWorkbenchTemplate,
deleteWorkbenchTemplate,
getAddWorkbenchTemplate,
addWorkbenchTemplate
addWorkbenchTemplate,
getWorkflowJobList,
deleteWorkflowJob,
cancelWorkflowJob
};
src/assets/project/jobCadence.svg 0 → 100644
View file @ 04d22d2e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 5</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-8备份-5">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-61备份-8" transform="translate(1.000000, 1.000000)" stroke="#C2C6CC" stroke-width="1.68">
<circle id="椭圆形" cx="7" cy="7" r="6.16"></circle>
<line x1="10.7487096" y1="2.20752017" x2="3.31564484" y2="11.6997394" id="路径-48"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/jobCost.svg 0 → 100644
View file @ 04d22d2e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 26备份</title>
<defs>
<filter color-interpolation-filters="auto" id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.540000 0 0 0 0 0.564000 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-26备份" transform="translate(2.000000, 2.000000)">
<circle id="椭圆形备份" stroke="#8A9099" stroke-width="1.2" fill-rule="nonzero" cx="6" cy="6" r="6.6"></circle>
<g filter="url(#filter-1)" id="编组-28">
<g transform="translate(3.558554, 2.400000)">
<polyline id="路径-23" stroke="#979797" stroke-width="1.2" points="0.122694244 1.35254766e-12 2.44144585 2.31875161 2.4 7.59435239"></polyline>
<line x1="2.44144585" y1="2.31875161" x2="4.76019746" y2="-1.05607525e-13" id="路径-24" stroke="#979797" stroke-width="1.2"></line>
<line x1="0" y1="3.58021955" x2="4.8" y2="3.58021955" id="路径-60" stroke="#979797" stroke-width="1.2"></line>
<line x1="-5.77512014e-14" y1="6" x2="4.8" y2="6" id="路径-60备份" stroke="#979797" stroke-width="1.2"></line>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/jobDel.svg 0 → 100644
View file @ 04d22d2e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/工作流模版备份 7</title>
<defs>
<filter color-interpolation-filters="auto" id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.540000 0 0 0 0 0.564000 0 0 0 0 0.600000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组" transform="translate(-1.000000, 0.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g filter="url(#filter-1)" id="编组-50">
<g transform="translate(1.000000, 1.605109)">
<line x1="0" y1="2.39431484" x2="14" y2="2.39431484" id="路径-16" stroke="#979797" stroke-width="1.5"></line>
<path d="M3.37934347,2.39431484 L3.37934347,1 C3.37934347,0.44771525 3.82705872,1.01453063e-16 4.37934347,0 L9.63329305,0 C10.1855778,-1.01453063e-16 10.6332931,0.44771525 10.6332931,1 L10.6332931,2.39431484 L10.6332931,2.39431484" id="路径-17" stroke="#979797" stroke-width="1.5"></path>
<path d="M2.45321216,3.89402686 L2.45321216,11.9292428 C2.45321216,12.4815275 2.90092741,12.9292428 3.45321216,12.9292428 L10.4872657,12.9292428 C11.0395505,12.9292428 11.4872657,12.4815275 11.4872657,11.9292428 L11.4872657,3.89402686 L11.4872657,3.89402686" id="路径-20" stroke="#979797" stroke-width="1.5"></path>
<line x1="5.49894415" y1="3.89402686" x2="5.49894415" y2="10.3954667" id="路径-21" stroke="#979797" stroke-width="1.5"></line>
<line x1="8.49836822" y1="3.89402686" x2="8.49836822" y2="10.3954667" id="路径-22" stroke="#979797" stroke-width="1.5"></line>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/jobFail.svg 0 → 100644
View file @ 04d22d2e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 51</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-51">
<rect id="矩形备份-22" x="0" y="0" width="16" height="16"></rect>
<g id="编组-24" transform="translate(1.000000, 1.000000)">
<circle id="椭圆形" fill="#FF4E4E" fill-rule="nonzero" cx="7" cy="7" r="7"></circle>
<line x1="4.2" y1="4.2" x2="9.8" y2="9.8" id="路径-50" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"></line>
<line x1="4.2" y1="4.2" x2="9.8" y2="9.8" id="路径-50备份" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) "></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/jobRun.svg 0 → 100644
View file @ 04d22d2e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-8备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-61" transform="translate(1.000000, 1.000000)">
<circle id="椭圆形" fill="#1370FF" fill-rule="nonzero" cx="7" cy="7" r="7"></circle>
<line x1="7" y1="7" x2="7" y2="3.5" id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"></line>
<line x1="7" y1="7" x2="9.625" y2="7" id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/jobStop.svg 0 → 100644
View file @ 04d22d2e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 18备份 3</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-18备份-3" transform="translate(0.000000, 0.000000)">
<g id="编组-9" transform="translate(0.500000, 0.500000)">
<circle id="椭圆形" fill="#FF4E4E" cx="7.5" cy="7.5" r="7.5"></circle>
<rect id="矩形" fill="#FFFFFF" x="4.5" y="4.5" width="6" height="6" rx="1"></rect>
</g>
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/jobSue.svg 0 → 100644
View file @ 04d22d2e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 50</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-50">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-61备份-4" transform="translate(1.000000, 1.000000)">
<circle id="椭圆形" fill="#0DD09B" fill-rule="nonzero" cx="7" cy="7" r="7"></circle>
<polyline id="路径-47" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="4.40461184 7.46931053 7 9.48405007 9.9825782 4.58929929"></polyline>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/runTime.svg 0 → 100644
View file @ 04d22d2e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 26备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-26备份" transform="translate(2.000000, 2.000000)" stroke="#8A9099" stroke-width="1.2">
<circle id="椭圆形备份" fill-rule="nonzero" cx="6" cy="6" r="6.6"></circle>
<line x1="6" y1="6" x2="6" y2="3" id="路径备份" stroke-linecap="round"></line>
<line x1="6" y1="6" x2="8.25" y2="6" id="路径备份-2" stroke-linecap="round"></line>
</g>
</g>
</svg>
\ No newline at end of file
src/components/Material.Ui/Table/ActionsComponent.jsx
View file @ 04d22d2e
......@@ -18,32 +18,52 @@ import LastPageIcon from '@mui/icons-material/LastPage';
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
firstPageIconStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', margin: "0 6px" },
KeyboardArrowLeftStyle:{ width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginRight: "3px" },
keyboardArrowRightStyle:{ width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginLeft: "3px" },
lastPageIconStyle:{ width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', margin: "0 6px" }
KeyboardArrowLeftStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginRight: "3px" },
keyboardArrowRightStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginLeft: "3px" },
lastPageIconStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', margin: "0 6px" }
})
const TablePaginationActionsConsole = props => {
const classes = useStyles();
const { count, page, rowsPerPage, onChangePage } = props;
const { count, page, rowsPerPage, onChangePage, onPageChange } = props;
const handleFirstPageButtonClick = (event) => {
onChangePage(event, 0);
if (!onChangePage) {
onPageChange(event, 0)
return
}
onChangePage(event, 0)
}
const handleBackButtonClick = (event) => {
onChangePage(event, page - 1);
if (!onChangePage) {
onPageChange(event, page - 1)
return
}
onChangePage(event, page - 1)
}
const handleNextButtonClick = (event) => {
onChangePage(event, page + 1);
if (!onChangePage) {
onPageChange(event, page + 1);
return
}
onChangePage(event, page + 1)
}
const btnClick = (event, item) => {
onChangePage(event, item);
if (!onChangePage) {
onPageChange(event, item);
return
}
onChangePage(event, item)
}
const handleLastPageButtonClick = (event) => {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
if (!onChangePage) {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
return
}
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
}
const buttons = (count, page, rowsPerPage) => {
let max = 1;
if( rowsPerPage !== -1 ){
if (rowsPerPage !== -1) {
max = count % rowsPerPage === 0 ? count / rowsPerPage : parseInt(count / rowsPerPage) + 1;
}
let arr = [...Array(max).keys()];
......@@ -69,7 +89,7 @@ const TablePaginationActionsConsole = props => {
<FirstPageIcon />
</IconButton>
<IconButton
className = { classes.KeyboardArrowLeftStyle }
className={classes.KeyboardArrowLeftStyle}
onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
<KeyboardArrowLeft />
</IconButton>
......
src/views/MenuLayout/index.module.css
View file @ 04d22d2e
......@@ -13,7 +13,8 @@
.content {
flex: 1;
height: calc(100vh - 57px);
overflow: scroll;
overflow: hidden;
/* ??????????? */
}
.list {
/* background-color: red; */
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ 04d22d2e
......@@ -35,7 +35,7 @@ const ProjectWorkbench = observer(() => {
useEffect(() => {
console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER'), "11111111111");
console.log(isPass("PROJECT_WORKBENCH_FLOES"),'wwwwwwwwwww')
console.log(isPass("PROJECT_WORKBENCH_FLOES"), 'wwwwwwwwwww')
}, [])
const tabList = useMemo(() => {
......@@ -52,6 +52,7 @@ const ProjectWorkbench = observer(() => {
label: "任务列表",
value: "workbenchList",
component: <WorkbenchList />,
hide: !isPass("PROJECT_WORKBENCH_JOBS"),
icon: List,
iconed: List_select
},
......
src/views/Project/ProjectWorkbench/workbenchList/components/simpleDialog.tsx 0 → 100644
View file @ 04d22d2e
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Dialog from "@/components/mui/Dialog";
const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props;
return (
< >
<Dialog
open={openDialog}
onClose={closeDialog}
onConfirm={onConfirm}
title={title}
>
<Box>
<Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
</Box>
</Dialog>
</>
);
};
export default memo(SimpleDialog);
src/views/Project/ProjectWorkbench/workbenchList/index.module.css 0 → 100644
View file @ 04d22d2e
.headerBox {
margin-bottom: 20px;
}
.tabHeader {
display: flex;
align-items: center;
}
.tabHeaderSelect {
margin-left: 16px;
}
.body {
margin-top: 24px;
border-top: 1px solid #F0F2F5;
overflow: hidden;
overflow-y: auto;
height: calc(100vh - 290px);
}
.tabBox {
padding: 15px 0px 16px 24px;
display: flex;
align-items: center;
width: 100%;
border-bottom: 1px solid #F0F2F5;
}
.tabBox:hover {
background-color: #F5F6F7;
}
.tabBoxInfo {
width: 24%;
}
.tabBoxDescInfo {
display: flex;
}
.tabBoxTitle {
font-size: 14px;
font-weight: 600;
color: #1E2633;
margin-bottom: 10px;
}
.tabBoxDesc {
font-size: 12px;
font-weight: 400;
color: #8A9099;
}
.tabBoxTime {
font-size: 12px;
font-weight: 400;
color: #565C66;
margin-left: 4px;
}
.tabBoxMiddle {
display: flex;
align-items: center;
width: 10%;
}
.tabBoxJobStatus {
display: flex;
align-items: center;
width: 46%;
}
.tabBoxStatusText {
font-size: 12px;
font-weight: 400;
color: #1E2633;
margin: 0px 16px 0px 6px;
white-space: nowrap;
}
.tabBoxJobOperate {
width: 10%;
display: flex;
justify-content: center;
}
\ No newline at end of file
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 04d22d2e
......@@ -6,27 +6,356 @@
* @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, useCallback, useEffect, useMemo, useState } from "react";
import { memo, useEffect, useState } from "react";
import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import styles from "./index.module.css";
import { Box, Typography } from "@mui/material";
import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search";
import useMyRequest from "@/hooks/useMyRequest";
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
import { TablePagination } from '@mui/material';
import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent"
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import SimpleDialog from "./components/simpleDialog"
import runTime from '../../../../assets/project/runTime.svg'
import jobCost from '../../../../assets/project/jobCost.svg'
import jobSue from '../../../../assets/project/jobSue.svg'
import jobFail from '../../../../assets/project/jobFail.svg'
import jobRun from '../../../../assets/project/jobRun.svg'
import jobCadence from '../../../../assets/project/jobCadence.svg'
import jobStop from '../../../../assets/project/jobStop.svg'
import jobDel from '../../../../assets/project/jobDel.svg'
import noData from '../../../../assets/project/noTemplate.svg'
import {
getWorkflowJobList,
deleteWorkflowJob,
cancelWorkflowJob
} from "@/api/workbench_api";
const ProjectMembers = () => {
const http = useHttp();
const currencies = [
{
value: 'ALL',
label: '全部',
},
{
value: 'RUNNING',
label: '正在运行',
},
{
value: 'SUCCEEDED',
label: '运行成功',
},
{
value: 'FAILED',
label: '运行失败',
},
{
value: 'ABORTED',
label: '运行终止',
},
];
const ProjectMembers = () => {
const { currentProjectStore } = useStores();
const [jobName, setJobName] = useState('')
const [jobList, setJobList] = useState([])
const [currency, setCurrency] = useState('ALL');
const [page, setPage] = useState(0)
const [size, setSize] = useState(10)
const [rowsPerPage, setRowsPerPage] = useState(10)
const [count, setCount] = useState(0)
/** 简单弹窗 */
const [jobData, setJobData] = useState('');
const [openDialog, setOpenDialog] = useState(false);
const [dialogType, setDialogType] = useState('del');
// 获取作业列表
const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
onSuccess: (result: any) => {
setJobList(result.data.content);
setCount(result.data.totalElements)
},
});
// 删除作业
const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, {
onSuccess: (result: any) => {
setOpenDialog(false)
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
},
});
// 删除作业
const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, {
onSuccess: (result: any) => {
setOpenDialog(false)
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
},
});
const searchChange = (data: any) => {
setJobName(data.length > 30 ? data.slice(0, 30) : data);
}
const handleChange = (event: any) => {
setCurrency(event.target.value);
};
/** 关闭弹窗 */
const closeDialog = () => {
setOpenDialog(false);
};
/** 弹窗确认 */
const onConfirm = () => {
if (dialogType === "del") {
delWorkflowJob({
id: jobData
})
} else {
cancelWorkflowJobInfo({
jobid: jobData
})
}
};
useEffect(() => {
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}, [currentProjectStore.currentProjectInfo.id, getWorkflowJobInfo]);
const handleChangePage = (event: any, newPage: any) => {
setPage(newPage)
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: newPage,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}
const handleChangeRowsPerPage = (event: any) => {
setRowsPerPage(event.target.value)
setSize(event.target.value)
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: event.target.value,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}
useEffect(() => {
setTimeout(() => {
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}, 300)
}, [jobName, currency]);
}, []);
const renderStatusIcon = (data: string) => {
switch (data) {
case "RUNNING":
return jobRun
case "ABORTED":
return jobCadence
case "FAILED":
return jobFail
case "SUCCEEDED":
return jobSue
default:
return jobCadence
}
}
const renderStatusText = (data: string) => {
switch (data) {
case "RUNNING":
return '正在运行'
case "ABORTED":
return '运行终止'
case "FAILED":
return '运行失败'
case "SUCCEEDED":
return '运行成功'
default:
return '未知'
}
}
const renderProgress = (data: any) => {
switch (data) {
case "RUNNING":
return '#1370FF'
case "ABORTED":
return '#C2C6CC'
case "FAILED":
return '#FF4E4E'
case "SUCCEEDED":
return '#0DD09B'
default:
return '#C2C6CC'
}
}
return (
<>
99999
</>
<Box className={styles.headerBox}>
<Box className={styles.tabHeader}>
<OutlinedInput
onChange={(e: any) => {
searchChange(e.target.value)
}}
value={jobName}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box className={styles.tabHeaderSelect}>
<TextField
select
label="运行状态"
value={currency}
onChange={handleChange}
size="small"
sx={{
width: 180, height: 32,
['& .MuiOutlinedInput-root']: {
height: '32px',
color: "#1E2633",
fontSize: '14px'
},
['& .MuiInputLabel-root']: {
color: "#8A9099",
fontSize: '14px'
},
}}
>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</Box>
</Box>
<Box className={styles.body}>
{
jobList.length === 0 &&
<Box sx={{
display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
justifyContent: 'center'
}}>
<img alt="" src={noData} />
<Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未任务</Typography>
</Box>
}
{
jobList.length > 0 && jobList.map((item: any, key) => {
return (
<Box className={styles.tabBox}>
<Box className={styles.tabBoxInfo}>
<div className={styles.tabBoxTitle}>{item.name}</div>
<Box className={styles.tabBoxDescInfo}>
<div className={styles.tabBoxDesc} style={{ marginRight: "24px" }} >创建时间：{item.createTime}</div>
<div className={styles.tabBoxDesc}>创建人：{item.creator}</div>
</Box>
</Box>
<Box className={styles.tabBoxMiddle}>
<img alt="" src={runTime} />
<div className={styles.tabBoxTime}>{item.costTime}</div>
</Box>
<Box className={styles.tabBoxMiddle}>
<img alt="" src={jobCost} />
<div className={styles.tabBoxTime}>{item.jobCost}</div>
</Box>
<Box className={styles.tabBoxJobStatus}>
<img alt="" src={renderStatusIcon(item.state)} />
<div className={styles.tabBoxStatusText}>{renderStatusText(item.state)}</div>
<Box sx={{ width: '100%' }}>
<LinearProgress variant="determinate" value={(item.completeNum / item.totalNum) * 100}
sx={{
borderRadius: '3px', height: "6px",
backgroundColor: "#F0F2F5",
marginRight: '16px',
[`& .${linearProgressClasses.bar}`]: {
backgroundColor: renderProgress(item.state),
borderRadius: '3px',
},
}}
/>
</Box>
<div style={{ color: renderProgress(item.state) }} className={styles.tabBoxStatusText}>{item.completeNum + "/" + item.totalNum}</div>
</Box>
<Box className={styles.tabBoxJobOperate}>
<img alt=""
src={item.state === "RUNNING" ? jobStop : jobDel}
style={{ cursor: "pointer" }}
onClick={(event) => {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
setJobData(item.id)
setOpenDialog(true)
setDialogType(item.state === "RUNNING" ? 'stop' : 'del')
}}
/>
</Box>
</Box>
)
})
}
</Box>
<TablePagination
rowsPerPageOptions={[5, 10, 20, 50]}
labelRowsPerPage={'每页行数：'}
ActionsComponent={ActionsComponent}
component="div"
count={count || jobList.length}
rowsPerPage={rowsPerPage || 10}
page={page}
onPageChange={handleChangePage}//
onRowsPerPageChange={handleChangeRowsPerPage}//
/>
<SimpleDialog
text={dialogType === "del" ? '任务被删除后将无法恢复，确认继续吗？' : '正在运行的任务终止后将无法重新运行，确认继续吗？'}
title={dialogType === "del" ? '删除任务' : '终止任务'}
openDialog={openDialog}
closeDialog={closeDialog}
onConfirm={onConfirm}
/>
</Box>
);
};
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css
View file @ 04d22d2e
.headerBox {
/* display: flex;
justify-content: space-between;
align-items: center; */
margin-bottom: 20px;
}
......
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