Added a page with jobs (#4258)
Boris Sekachev
4 years ago
committed by
GitHub
parent
bec253f022
commit
7f86a5d801
@ -0,0 +1,48 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { ActionUnion, createAction, ThunkAction } from 'utils/redux';
|
||||
import getCore from 'cvat-core-wrapper';
|
||||
import { JobsQuery } from 'reducers/interfaces';
|
||||
|
||||
const cvat = getCore();
|
||||
|
||||
export enum JobsActionTypes {
|
||||
GET_JOBS = 'GET_JOBS',
|
||||
GET_JOBS_SUCCESS = 'GET_JOBS_SUCCESS',
|
||||
GET_JOBS_FAILED = 'GET_JOBS_FAILED',
|
||||
}
|
||||
|
||||
interface JobsList extends Array<any> {
|
||||
count: number;
|
||||
}
|
||||
|
||||
const jobsActions = {
|
||||
getJobs: (query: Partial<JobsQuery>) => createAction(JobsActionTypes.GET_JOBS, { query }),
|
||||
getJobsSuccess: (jobs: JobsList, previews: string[]) => (
|
||||
createAction(JobsActionTypes.GET_JOBS_SUCCESS, { jobs, previews })
|
||||
),
|
||||
getJobsFailed: (error: any) => createAction(JobsActionTypes.GET_JOBS_FAILED, { error }),
|
||||
};
|
||||
|
||||
export type JobsActions = ActionUnion<typeof jobsActions>;
|
||||
|
||||
export const getJobsAsync = (query: JobsQuery): ThunkAction => async (dispatch) => {
|
||||
try {
|
||||
// Remove all keys with null values from the query
|
||||
const filteredQuery: Partial<JobsQuery> = { ...query };
|
||||
for (const [key, value] of Object.entries(filteredQuery)) {
|
||||
if (value === null) {
|
||||
delete filteredQuery[key];
|
||||
}
|
||||
}
|
||||
|
||||
dispatch(jobsActions.getJobs(filteredQuery));
|
||||
const jobs = await cvat.jobs.get(filteredQuery);
|
||||
const previewPromises = jobs.map((job: any) => (job as any).frames.preview().catch(() => ''));
|
||||
dispatch(jobsActions.getJobsSuccess(jobs, await Promise.all(previewPromises)));
|
||||
} catch (error) {
|
||||
dispatch(jobsActions.getJobsFailed(error));
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,103 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useHistory } from 'react-router';
|
||||
import Card from 'antd/lib/card';
|
||||
import Empty from 'antd/lib/empty';
|
||||
import Descriptions from 'antd/lib/descriptions';
|
||||
import { MoreOutlined } from '@ant-design/icons';
|
||||
import Dropdown from 'antd/lib/dropdown';
|
||||
import Menu from 'antd/lib/menu';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { MenuInfo } from 'rc-menu/lib/interface';
|
||||
|
||||
import { useCardHeightHOC } from 'utils/hooks';
|
||||
|
||||
const useCardHeight = useCardHeightHOC({
|
||||
containerClassName: 'cvat-jobs-page',
|
||||
siblingClassNames: ['cvat-jobs-page-pagination', 'cvat-jobs-page-top-bar'],
|
||||
paddings: 40,
|
||||
numberOfRows: 3,
|
||||
});
|
||||
|
||||
interface Props {
|
||||
job: any;
|
||||
preview: string;
|
||||
}
|
||||
|
||||
function JobCardComponent(props: Props): JSX.Element {
|
||||
const { job, preview } = props;
|
||||
const [expanded, setExpanded] = useState<boolean>(false);
|
||||
const history = useHistory();
|
||||
const height = useCardHeight();
|
||||
const onClick = (): void => {
|
||||
history.push(`/tasks/${job.taskId}/jobs/${job.id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
onMouseEnter={() => setExpanded(true)}
|
||||
onMouseLeave={() => setExpanded(false)}
|
||||
style={{ height }}
|
||||
className='cvat-job-page-list-item'
|
||||
cover={(
|
||||
<>
|
||||
{preview ? (
|
||||
<img
|
||||
className='cvat-jobs-page-job-item-card-preview'
|
||||
src={preview}
|
||||
alt='Preview'
|
||||
onClick={onClick}
|
||||
aria-hidden
|
||||
/>
|
||||
) : (
|
||||
<div className='cvat-jobs-page-job-item-card-preview' onClick={onClick} aria-hidden>
|
||||
<Empty description='Preview not found' />
|
||||
</div>
|
||||
)}
|
||||
<div className='cvat-job-page-list-item-id'>
|
||||
ID:
|
||||
{` ${job.id}`}
|
||||
</div>
|
||||
<div className='cvat-job-page-list-item-dimension'>{job.dimension.toUpperCase()}</div>
|
||||
</>
|
||||
)}
|
||||
>
|
||||
<Descriptions column={1} size='small'>
|
||||
<Descriptions.Item label='Stage'>{job.stage}</Descriptions.Item>
|
||||
<Descriptions.Item label='State'>{job.state}</Descriptions.Item>
|
||||
{ expanded ? (
|
||||
<Descriptions.Item label='Size'>{job.stopFrame - job.startFrame + 1}</Descriptions.Item>
|
||||
) : null}
|
||||
{ expanded && job.assignee ? (
|
||||
<Descriptions.Item label='Assignee'>{job.assignee.username}</Descriptions.Item>
|
||||
) : null}
|
||||
</Descriptions>
|
||||
<Dropdown overlay={(
|
||||
<Menu onClick={(action: MenuInfo) => {
|
||||
if (action.key === 'task') {
|
||||
history.push(`/tasks/${job.taskId}`);
|
||||
} else if (action.key === 'project') {
|
||||
history.push(`/projects/${job.projectId}`);
|
||||
} else if (action.key === 'bug_tracker') {
|
||||
// false alarm
|
||||
// eslint-disable-next-line security/detect-non-literal-fs-filename
|
||||
window.open(job.bugTracker, '_blank', 'noopener noreferrer');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Menu.Item key='task' disabled={job.taskId === null}>Go to the task</Menu.Item>
|
||||
<Menu.Item key='project' disabled={job.projectId === null}>Go to the project</Menu.Item>
|
||||
<Menu.Item key='bug_tracker' disabled={!job.bugTracker}>Go to the bug tracker</Menu.Item>
|
||||
</Menu>
|
||||
)}
|
||||
>
|
||||
<MoreOutlined className='cvat-job-card-more-button' />
|
||||
</Dropdown>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(JobCardComponent);
|
||||
@ -0,0 +1,32 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Col, Row } from 'antd/lib/grid';
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import JobCard from './job-card';
|
||||
|
||||
function JobsContentComponent(): JSX.Element {
|
||||
const jobs = useSelector((state: CombinedState) => state.jobs.current);
|
||||
const previews = useSelector((state: CombinedState) => state.jobs.previews);
|
||||
const dimensions = {
|
||||
md: 22,
|
||||
lg: 18,
|
||||
xl: 16,
|
||||
xxl: 16,
|
||||
};
|
||||
|
||||
return (
|
||||
<Row justify='center' align='middle'>
|
||||
<Col className='cvat-jobs-page-list' {...dimensions}>
|
||||
{jobs.map((job: any, idx: number): JSX.Element => (
|
||||
<JobCard preview={previews[idx]} job={job} key={job.id} />
|
||||
))}
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(JobsContentComponent);
|
||||
@ -0,0 +1,116 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useHistory } from 'react-router';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import Spin from 'antd/lib/spin';
|
||||
import { Col, Row } from 'antd/lib/grid';
|
||||
import Pagination from 'antd/lib/pagination';
|
||||
import Empty from 'antd/lib/empty';
|
||||
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import { getJobsAsync } from 'actions/jobs-actions';
|
||||
|
||||
import TopBarComponent from './top-bar';
|
||||
import JobsContentComponent from './jobs-content';
|
||||
|
||||
function JobsPageComponent(): JSX.Element {
|
||||
const dispatch = useDispatch();
|
||||
const query = useSelector((state: CombinedState) => state.jobs.query);
|
||||
const fetching = useSelector((state: CombinedState) => state.jobs.fetching);
|
||||
const count = useSelector((state: CombinedState) => state.jobs.count);
|
||||
const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
// get relevant query parameters from the url and fetch jobs according to them
|
||||
const { location } = history;
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const copiedQuery = { ...query };
|
||||
for (const key of Object.keys(copiedQuery)) {
|
||||
if (searchParams.has(key)) {
|
||||
const value = searchParams.get(key);
|
||||
if (value) {
|
||||
copiedQuery[key] = key === 'page' ? +value : value;
|
||||
}
|
||||
} else {
|
||||
copiedQuery[key] = null;
|
||||
}
|
||||
}
|
||||
|
||||
dispatch(getJobsAsync(copiedQuery));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// when query is updated, set relevant search params to url
|
||||
const searchParams = new URLSearchParams();
|
||||
const { location } = history;
|
||||
for (const [key, value] of Object.entries(query)) {
|
||||
if (value) {
|
||||
searchParams.set(key, value.toString());
|
||||
}
|
||||
}
|
||||
|
||||
history.push(`${location.pathname}?${searchParams.toString()}`);
|
||||
}, [query]);
|
||||
|
||||
if (fetching) {
|
||||
return (
|
||||
<div className='cvat-jobs-page'>
|
||||
<Spin size='large' className='cvat-spinner' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const dimensions = {
|
||||
md: 22,
|
||||
lg: 18,
|
||||
xl: 16,
|
||||
xxl: 16,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='cvat-jobs-page'>
|
||||
<TopBarComponent
|
||||
query={query}
|
||||
onChangeFilters={(filters: Record<string, string | null>) => {
|
||||
dispatch(
|
||||
getJobsAsync({
|
||||
...query,
|
||||
...filters,
|
||||
page: 1,
|
||||
}),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{count ? (
|
||||
<>
|
||||
<JobsContentComponent />
|
||||
<Row justify='space-around' about='middle'>
|
||||
<Col {...dimensions}>
|
||||
<Pagination
|
||||
className='cvat-jobs-page-pagination'
|
||||
onChange={(page: number) => {
|
||||
dispatch(getJobsAsync({
|
||||
...query,
|
||||
page,
|
||||
}));
|
||||
}}
|
||||
showSizeChanger={false}
|
||||
total={count}
|
||||
pageSize={12}
|
||||
current={query.page}
|
||||
showQuickJumper
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
) : <Empty />}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(JobsPageComponent);
|
||||
@ -0,0 +1,142 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import '../../base.scss';
|
||||
|
||||
.cvat-jobs-page {
|
||||
padding-top: $grid-unit-size * 2;
|
||||
padding-bottom: $grid-unit-size;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.cvat-jobs-page-top-bar {
|
||||
> div:nth-child(1) {
|
||||
> div:nth-child(1) {
|
||||
width: 100%;
|
||||
|
||||
> div:nth-child(1) {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
margin-right: $grid-unit-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(1) {
|
||||
div > {
|
||||
.cvat-title {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
&.ant-empty {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
padding-bottom: $grid-unit-size;
|
||||
padding-top: $grid-unit-size;
|
||||
}
|
||||
|
||||
.cvat-job-page-list-item {
|
||||
width: 25%;
|
||||
border-width: $grid-unit-size / 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.ant-card-cover {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: $grid-unit-size;
|
||||
|
||||
.ant-descriptions-item {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.cvat-job-page-list-item-id {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cvat-job-page-list-item-dimension {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-jobs-page-job-item-card-preview {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cvat-job-page-list-item-dimension {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: $grid-unit-size;
|
||||
width: $grid-unit-size * 4;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
padding: $grid-unit-size;
|
||||
}
|
||||
|
||||
.cvat-job-page-list-item-id {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: $grid-unit-size $grid-unit-size $grid-unit-size 0;
|
||||
width: fit-content;
|
||||
background: white;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: $grid-unit-size;
|
||||
opacity: 0.5;
|
||||
transition: 0.15s all ease;
|
||||
box-shadow: $box-shadow-base;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-jobs-page-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cvat-jobs-page-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cvat-job-card-more-button {
|
||||
position: absolute;
|
||||
bottom: $grid-unit-size * 2;
|
||||
right: $grid-unit-size;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cvat-jobs-page-filters {
|
||||
.ant-table-cell {
|
||||
width: $grid-unit-size * 15;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
.ant-table-tbody {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { Col, Row } from 'antd/lib/grid';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Table from 'antd/lib/table';
|
||||
import { FilterValue, TablePaginationConfig } from 'antd/lib/table/interface';
|
||||
import { JobsQuery } from 'reducers/interfaces';
|
||||
import Input from 'antd/lib/input';
|
||||
import Button from 'antd/lib/button';
|
||||
|
||||
interface Props {
|
||||
onChangeFilters(filters: Record<string, string | null>): void;
|
||||
query: JobsQuery;
|
||||
}
|
||||
|
||||
function TopBarComponent(props: Props): JSX.Element {
|
||||
const { query, onChangeFilters } = props;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Stage',
|
||||
dataIndex: 'stage',
|
||||
key: 'stage',
|
||||
filteredValue: query.stage?.split(',') || null,
|
||||
className: `${query.stage ? 'cvat-jobs-page-filter cvat-jobs-page-filter-active' : 'cvat-jobs-page-filter'}`,
|
||||
filters: [
|
||||
{ text: 'annotation', value: 'annotation' },
|
||||
{ text: 'validation', value: 'validation' },
|
||||
{ text: 'acceptance', value: 'acceptance' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'State',
|
||||
dataIndex: 'state',
|
||||
key: 'state',
|
||||
filteredValue: query.state?.split(',') || null,
|
||||
className: `${query.state ? 'cvat-jobs-page-filter cvat-jobs-page-filter-active' : 'cvat-jobs-page-filter'}`,
|
||||
filters: [
|
||||
{ text: 'new', value: 'new' },
|
||||
{ text: 'in progress', value: 'in progress' },
|
||||
{ text: 'completed', value: 'completed' },
|
||||
{ text: 'rejected', value: 'rejected' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Assignee',
|
||||
dataIndex: 'assignee',
|
||||
key: 'assignee',
|
||||
filteredValue: query.assignee ? [query.assignee] : null,
|
||||
className: `${query.assignee ? 'cvat-jobs-page-filter cvat-jobs-page-filter-active' : 'cvat-jobs-page-filter'}`,
|
||||
filterDropdown: (
|
||||
<div>
|
||||
<Input.Search
|
||||
defaultValue={query.assignee || ''}
|
||||
placeholder='Filter by assignee'
|
||||
onSearch={(value: string) => {
|
||||
onChangeFilters({ assignee: value });
|
||||
}}
|
||||
enterButton
|
||||
/>
|
||||
<Button
|
||||
type='link'
|
||||
onClick={() => {
|
||||
onChangeFilters({ assignee: null });
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Row className='cvat-jobs-page-top-bar' justify='center' align='middle'>
|
||||
<Col md={22} lg={18} xl={16} xxl={16}>
|
||||
<Row justify='space-between' align='bottom'>
|
||||
<Col>
|
||||
<Text className='cvat-title'>Jobs</Text>
|
||||
</Col>
|
||||
<Table
|
||||
onChange={(_: TablePaginationConfig, filters: Record<string, FilterValue | null>) => {
|
||||
const processed = Object.fromEntries(
|
||||
Object.entries(filters)
|
||||
.map(([key, values]) => (
|
||||
[key, typeof values === 'string' || values === null ? values : values.join(',')]
|
||||
)),
|
||||
);
|
||||
onChangeFilters(processed);
|
||||
}}
|
||||
className='cvat-jobs-page-filters'
|
||||
columns={columns}
|
||||
size='small'
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(TopBarComponent);
|
||||
@ -0,0 +1,52 @@
|
||||
// Copyright (C) 2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { JobsActions, JobsActionTypes } from 'actions/jobs-actions';
|
||||
import { JobsState } from './interfaces';
|
||||
|
||||
const defaultState: JobsState = {
|
||||
fetching: false,
|
||||
count: 0,
|
||||
query: {
|
||||
page: 1,
|
||||
state: null,
|
||||
stage: null,
|
||||
assignee: null,
|
||||
},
|
||||
current: [],
|
||||
previews: [],
|
||||
};
|
||||
|
||||
export default (state: JobsState = defaultState, action: JobsActions): JobsState => {
|
||||
switch (action.type) {
|
||||
case JobsActionTypes.GET_JOBS: {
|
||||
return {
|
||||
...state,
|
||||
fetching: true,
|
||||
query: {
|
||||
...defaultState.query,
|
||||
...action.payload.query,
|
||||
},
|
||||
};
|
||||
}
|
||||
case JobsActionTypes.GET_JOBS_SUCCESS: {
|
||||
return {
|
||||
...state,
|
||||
fetching: false,
|
||||
count: action.payload.jobs.count,
|
||||
current: action.payload.jobs,
|
||||
previews: action.payload.previews,
|
||||
};
|
||||
}
|
||||
case JobsActionTypes.GET_JOBS_FAILED: {
|
||||
return {
|
||||
...state,
|
||||
fetching: false,
|
||||
};
|
||||
}
|
||||
default: {
|
||||
return state;
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue