Added a page with jobs

CHANGELOG.md

@@ -30,6 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support for working with ellipses (<https://github.com/openvinotoolkit/cvat/pull/4062>)
 - Add several flags to task creation CLI (<https://github.com/openvinotoolkit/cvat/pull/4119>)
 - Add YOLOv5 serverless function for automatic annotation (<https://github.com/openvinotoolkit/cvat/pull/4178>)
+- Basic page with jobs list, basic filtration to this list (<https://github.com/openvinotoolkit/cvat/pull/4258>)
+
 ### Changed
 - Users don't have access to a task object anymore if they are assigneed only on some jobs of the task (<https://github.com/openvinotoolkit/cvat/pull/3788>)
 - Different resources (tasks, projects) are not visible anymore for all CVAT instance users by default (<https://github.com/openvinotoolkit/cvat/pull/3788>)

cvat-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-core",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "babel.config.js",
   "scripts": {

cvat-core/src/api-implementation.js

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -152,16 +152,16 @@ const config = require('./config');
 
         cvat.jobs.get.implementation = async (filter) => {
             checkFilter(filter, {
+                page: isInteger,
+                stage: isString,
+                state: isString,
+                assignee: isString,
                 taskID: isInteger,
                 jobID: isInteger,
             });
 
             if ('taskID' in filter && 'jobID' in filter) {
-                throw new ArgumentError('Only one of fields "taskID" and "jobID" allowed simultaneously');
-            }
-
-            if (!Object.keys(filter).length) {
-                throw new ArgumentError('Job filter must not be empty');
+                throw new ArgumentError('Filter fields "taskID" and "jobID" are not permitted to be used at the same time');
             }
 
             if ('taskID' in filter) {
@@ -173,12 +173,17 @@ const config = require('./config');
                 return [];
             }
 
-            const job = await serverProxy.jobs.get(filter.jobID);
-            if (job) {
-                return [new Job(job)];
+            if ('jobID' in filter) {
+                const job = await serverProxy.jobs.get({ id: filter.jobID });
+                if (job) {
+                    return [new Job(job)];
+                }
             }
 
-            return [];
+            const jobsData = await serverProxy.jobs.get(filter);
+            const jobs = jobsData.results.map((jobData) => new Job(jobData));
+            jobs.count = jobsData.count;
+            return jobs;
         };
 
         cvat.tasks.get.implementation = async (filter) => {

cvat-core/src/frames.js

@@ -637,11 +637,11 @@
         return frameDataCache[taskID].frameBuffer.getContextImage(frame);
     }
 
-    async function getPreview(taskID) {
+    async function getPreview(taskID = null, jobID = null) {
         return new Promise((resolve, reject) => {
             // Just go to server and get preview (no any cache)
             serverProxy.frames
-                .getPreview(taskID)
+                .getPreview(taskID, jobID)
                 .then((result) => {
                     if (isNode) {
                         // eslint-disable-next-line no-undef

cvat-core/src/server-proxy.js

@@ -1,4 +1,4 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -924,14 +924,25 @@
                 return createdTask[0];
             }
 
-            async function getJob(jobID) {
+            async function getJobs(filter = {}) {
                 const { backendAPI } = config;
+                const id = filter.id || null;
 
                 let response = null;
                 try {
-                    response = await Axios.get(`${backendAPI}/jobs/${jobID}`, {
-                        proxy: config.proxy,
-                    });
+                    if (id !== null) {
+                        response = await Axios.get(`${backendAPI}/jobs/${id}`, {
+                            proxy: config.proxy,
+                        });
+                    } else {
+                        response = await Axios.get(`${backendAPI}/jobs`, {
+                            proxy: config.proxy,
+                            params: {
+                                ...filter,
+                                page_size: 12,
+                            },
+                        });
+                    }
                 } catch (errorData) {
                     throw generateError(errorData);
                 }
@@ -1069,12 +1080,13 @@
                 return response.data;
             }
 
-            async function getPreview(tid) {
+            async function getPreview(tid, jid) {
                 const { backendAPI } = config;
 
                 let response = null;
                 try {
-                    response = await Axios.get(`${backendAPI}/tasks/${tid}/data`, {
+                    const url = `${backendAPI}/${jid !== null ? 'jobs' : 'tasks'}/${jid || tid}/data`;
+                    response = await Axios.get(url, {
                         params: {
                             type: 'preview',
                         },
@@ -1800,7 +1812,7 @@
 
                     jobs: {
                         value: Object.freeze({
-                            get: getJob,
+                            get: getJobs,
                             save: saveJob,
                         }),
                         writable: false,

cvat-core/src/session.js

@@ -1887,7 +1887,11 @@
     };
 
     Job.prototype.frames.preview.implementation = async function () {
-        const frameData = await getPreview(this.taskId);
+        if (this.id === null || this.taskId === null) {
+            return '';
+        }
+
+        const frameData = await getPreview(this.taskId, this.jobID);
         return frameData;
     };
 
@@ -2220,6 +2224,10 @@
     };
 
     Task.prototype.frames.preview.implementation = async function () {
+        if (this.id === null) {
+            return '';
+        }
+
         const frameData = await getPreview(this.id);
         return frameData;
     };

cvat-core/tests/mocks/server-proxy.mock.js

@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -212,7 +212,8 @@ class ServerProxy {
             }
         }
 
-        async function getJob(jobID) {
+        async function getJobs(filter = {}) {
+            const id = filter.id || null;
             const jobs = tasksDummyData.results
                 .reduce((acc, task) => {
                     for (const segment of task.segments) {
@@ -234,7 +235,7 @@ class ServerProxy {
 
                     return acc;
                 }, [])
-                .filter((job) => job.id === jobID);
+                .filter((job) => job.id === id);
 
             return (
                 jobs[0] || {
@@ -265,7 +266,7 @@ class ServerProxy {
                 }
             }
 
-            return getJob(id);
+            return getJobs({ id });
         }
 
         async function getUsers() {
@@ -423,7 +424,7 @@ class ServerProxy {
 
                 jobs: {
                     value: Object.freeze({
-                        get: getJob,
+                        get: getJobs,
                         save: saveJob,
                     }),
                     writable: false,

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.33.3",
+  "version": "1.34.0",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/actions/jobs-actions.ts

@@ -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));
+    }
+};

cvat-ui/src/components/cvat-app.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -26,6 +26,8 @@ import ShortcutsDialog from 'components/shortcuts-dialog/shortcuts-dialog';
 import ExportDatasetModal from 'components/export-dataset/export-dataset-modal';
 import ModelsPageContainer from 'containers/models-page/models-page';
 
+import JobsPageComponent from 'components/jobs-page/jobs-page';
+
 import TasksPageContainer from 'containers/tasks-page/tasks-page';
 import CreateTaskPageContainer from 'containers/create-task-page/create-task-page';
 import TaskPageContainer from 'containers/task-page/task-page';
@@ -360,6 +362,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
                                         <Route exact path='/tasks/create' component={CreateTaskPageContainer} />
                                         <Route exact path='/tasks/:id' component={TaskPageContainer} />
                                         <Route exact path='/tasks/:tid/jobs/:jid' component={AnnotationPageContainer} />
+                                        <Route exact path='/jobs' component={JobsPageComponent} />
                                         <Route exact path='/cloudstorages' component={CloudStoragesPageComponent} />
                                         <Route
                                             exact

cvat-ui/src/components/header/header.tsx

@@ -378,7 +378,7 @@ function HeaderContainer(props: Props): JSX.Element {
                     className='cvat-header-button'
                     type='link'
                     value='projects'
-                    href='/projects'
+                    href='/projects?page=1'
                     onClick={(event: React.MouseEvent): void => {
                         event.preventDefault();
                         history.push('/projects');
@@ -398,6 +398,18 @@ function HeaderContainer(props: Props): JSX.Element {
                 >
                     Tasks
                 </Button>
+                <Button
+                    className='cvat-header-button'
+                    type='link'
+                    value='jobs'
+                    href='/jobs?page=1'
+                    onClick={(event: React.MouseEvent): void => {
+                        event.preventDefault();
+                        history.push('/jobs');
+                    }}
+                >
+                    Jobs
+                </Button>
                 <Button
                     className='cvat-header-button'
                     type='link'

cvat-ui/src/components/header/styles.scss

@@ -27,8 +27,6 @@
     align-items: center;
 
     > a.ant-btn {
-        height: 24px;
-
         span[role='img'] {
             font-size: 24px;
             line-height: 24px;