Enhanced filtration/sorting for tasks/projects/tasks in projects/clou…

…d storages (#4409)

CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## \[2.1.0] - Unreleased
 ### Added
-- TDB
+- Advanced filtration and sorting for a list of tasks/projects/cloudstorages (<https://github.com/openvinotoolkit/cvat/pull/4403>)
 
 ### Changed
 - TDB

cvat-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-core",
-  "version": "4.2.1",
+  "version": "5.0.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

@@ -14,7 +14,6 @@ const config = require('./config');
         isString,
         checkFilter,
         checkExclusiveFields,
-        camelToSnake,
         checkObjectType,
     } = require('./common');
 
@@ -171,7 +170,14 @@ const config = require('./config');
                 }
             }
 
-            const jobsData = await serverProxy.jobs.get(filter);
+            const searchParams = {};
+            for (const key of Object.keys(filter)) {
+                if (['page', 'sort', 'search', 'filter'].includes(key)) {
+                    searchParams[key] = filter[key];
+                }
+            }
+
+            const jobsData = await serverProxy.jobs.get(searchParams);
             const jobs = jobsData.results.map((jobData) => new Job(jobData));
             jobs.count = jobsData.count;
             return jobs;
@@ -182,32 +188,33 @@ const config = require('./config');
                 page: isInteger,
                 projectId: isInteger,
                 id: isInteger,
+                sort: isString,
                 search: isString,
                 filter: isString,
                 ordering: isString,
             });
 
             checkExclusiveFields(filter, ['id', 'projectId'], ['page']);
-
             const searchParams = {};
-            for (const field of [
-                'filter',
-                'search',
-                'ordering',
-                'id',
-                'page',
-                'projectId',
-            ]) {
-                if (Object.prototype.hasOwnProperty.call(filter, field)) {
-                    searchParams[camelToSnake(field)] = filter[field];
+            for (const key of Object.keys(filter)) {
+                if (['page', 'id', 'sort', 'search', 'filter', 'ordering'].includes(key)) {
+                    searchParams[key] = filter[key];
                 }
             }
 
-            const tasksData = await serverProxy.tasks.get(searchParams);
-            const tasks = tasksData.map((task) => new Task(task));
+            let tasksData = null;
+            if (filter.projectId) {
+                if (searchParams.filter) {
+                    const parsed = JSON.parse(searchParams.filter);
+                    searchParams.filter = JSON.stringify({ and: [parsed, { '==': [{ var: 'project_id' }, filter.projectId] }] });
+                } else {
+                    searchParams.filter = JSON.stringify({ and: [{ '==': [{ var: 'project_id' }, filter.projectId] }] });
+                }
+            }
 
+            tasksData = await serverProxy.tasks.get(searchParams);
+            const tasks = tasksData.map((task) => new Task(task));
             tasks.count = tasksData.count;
-
             return tasks;
         };
 
@@ -216,15 +223,15 @@ const config = require('./config');
                 id: isInteger,
                 page: isInteger,
                 search: isString,
+                sort: isString,
                 filter: isString,
             });
 
             checkExclusiveFields(filter, ['id'], ['page']);
-
             const searchParams = {};
-            for (const field of ['filter', 'search', 'status', 'id', 'page']) {
-                if (Object.prototype.hasOwnProperty.call(filter, field)) {
-                    searchParams[camelToSnake(field)] = filter[field];
+            for (const key of Object.keys(filter)) {
+                if (['id', 'page', 'search', 'sort', 'page'].includes(key)) {
+                    searchParams[key] = filter[key];
                 }
             }
 
@@ -246,25 +253,19 @@ const config = require('./config');
             checkFilter(filter, {
                 page: isInteger,
                 filter: isString,
+                sort: isString,
                 id: isInteger,
                 search: isString,
             });
 
             checkExclusiveFields(filter, ['id', 'search'], ['page']);
-
-            const searchParams = new URLSearchParams();
-            for (const field of [
-                'filter',
-                'search',
-                'id',
-                'page',
-            ]) {
-                if (Object.prototype.hasOwnProperty.call(filter, field)) {
-                    searchParams.set(camelToSnake(field), filter[field]);
+            const searchParams = {};
+            for (const key of Object.keys(filter)) {
+                if (['page', 'filter', 'sort', 'id', 'search'].includes(key)) {
+                    searchParams[key] = filter[key];
                 }
             }
-
-            const cloudStoragesData = await serverProxy.cloudStorages.get(searchParams.toString());
+            const cloudStoragesData = await serverProxy.cloudStorages.get(searchParams);
             const cloudStorages = cloudStoragesData.map((cloudStorage) => new CloudStorage(cloudStorage));
             cloudStorages.count = cloudStoragesData.count;
             return cloudStorages;

cvat-core/src/common.js

@@ -87,16 +87,6 @@
         return true;
     }
 
-    function camelToSnake(str) {
-        if (typeof str !== 'string') {
-            throw new ArgumentError('str is expected to be string');
-        }
-
-        return (
-            str[0].toLowerCase() + str.slice(1, str.length).replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
-        );
-    }
-
     class FieldUpdateTrigger {
         constructor() {
             let updatedFlags = {};
@@ -136,7 +126,6 @@
         checkFilter,
         checkObjectType,
         checkExclusiveFields,
-        camelToSnake,
         FieldUpdateTrigger,
     };
 })();

cvat-core/src/server-proxy.js

@@ -1521,13 +1521,15 @@
                 }
             }
 
-            async function getCloudStorages(filter = '') {
+            async function getCloudStorages(filter = {}) {
                 const { backendAPI } = config;
 
                 let response = null;
                 try {
-                    response = await Axios.get(`${backendAPI}/cloudstorages?page_size=12&${filter}`, {
+                    response = await Axios.get(`${backendAPI}/cloudstorages`, {
                         proxy: config.proxy,
+                        params: filter,
+                        page_size: 12,
                     });
                 } catch (errorData) {
                     throw generateError(errorData);

cvat-ui/package.json

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

cvat-ui/src/actions/cloud-storage-actions.ts

@@ -5,7 +5,7 @@
 import { Dispatch, ActionCreator } from 'redux';
 import { ActionUnion, createAction, ThunkAction } from 'utils/redux';
 import getCore from 'cvat-core-wrapper';
-import { CloudStoragesQuery, CloudStorage } from 'reducers/interfaces';
+import { CloudStoragesQuery, CloudStorage, Indexable } from 'reducers/interfaces';
 
 const cvat = getCore();
 
@@ -103,40 +103,16 @@ export type CloudStorageActions = ActionUnion<typeof cloudStoragesActions>;
 
 export function getCloudStoragesAsync(query: Partial<CloudStoragesQuery>): ThunkAction {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
-        function camelToSnake(str: string): string {
-            return (
-                str[0].toLowerCase() + str.slice(1, str.length)
-                    .replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
-            );
-        }
-
         dispatch(cloudStoragesActions.getCloudStorages());
         dispatch(cloudStoragesActions.updateCloudStoragesGettingQuery(query));
 
         const filteredQuery = { ...query };
         for (const key in filteredQuery) {
-            if (filteredQuery[key] === null) {
-                delete filteredQuery[key];
+            if ((filteredQuery as Indexable)[key] === null) {
+                delete (filteredQuery as Indexable)[key];
             }
         }
 
-        // Temporary hack to do not change UI currently for cloud storages
-        // Will be redesigned in a different PR
-        const filter = {
-            and: ['displayName', 'resource', 'description', 'owner', 'providerType', 'credentialsType'].reduce<object[]>((acc, filterField) => {
-                if (filterField in filteredQuery) {
-                    acc.push({ '==': [{ var: camelToSnake(filterField) }, filteredQuery[filterField]] });
-                    delete filteredQuery[filterField];
-                }
-
-                return acc;
-            }, []),
-        };
-
-        if (filter.and.length) {
-            filteredQuery.filter = JSON.stringify(filter);
-        }
-
         let result = null;
         try {
             result = await cvat.cloudStorages.get(filteredQuery);

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

@@ -1,4 +1,4 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -52,7 +52,7 @@ export const importDatasetAsync = (instance: any, format: string, file: File): T
         }
 
         dispatch(importActions.importDatasetSuccess());
-        dispatch(getProjectsAsync({ id: instance.id }));
+        dispatch(getProjectsAsync({ id: instance.id }, getState().projects.tasksGettingQuery));
     }
 );
 

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

@@ -4,7 +4,7 @@
 
 import { ActionUnion, createAction, ThunkAction } from 'utils/redux';
 import getCore from 'cvat-core-wrapper';
-import { JobsQuery } from 'reducers/interfaces';
+import { Indexable, JobsQuery } from 'reducers/interfaces';
 
 const cvat = getCore();
 
@@ -30,12 +30,13 @@ 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 };
-        if (filteredQuery.page === null) delete filteredQuery.page;
-        if (filteredQuery.filter === null) delete filteredQuery.filter;
-        if (filteredQuery.sort === null) delete filteredQuery.sort;
-        if (filteredQuery.search === null) delete filteredQuery.search;
+        // We remove all keys with null values from the query
+        const filteredQuery = { ...query };
+        for (const key of Object.keys(query)) {
+            if ((filteredQuery as Indexable)[key] === null) {
+                delete (filteredQuery as Indexable)[key];
+            }
+        }
 
         dispatch(jobsActions.getJobs(filteredQuery));
         const jobs = await cvat.jobs.get(filteredQuery);

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

@@ -5,7 +5,9 @@
 import { Dispatch, ActionCreator } from 'redux';
 
 import { ActionUnion, createAction, ThunkAction } from 'utils/redux';
-import { ProjectsQuery, TasksQuery, CombinedState } from 'reducers/interfaces';
+import {
+    ProjectsQuery, TasksQuery, CombinedState, Indexable,
+} from 'reducers/interfaces';
 import { getTasksAsync } from 'actions/tasks-actions';
 import { getCVATStore } from 'cvat-store';
 import getCore from 'cvat-core-wrapper';
@@ -80,17 +82,19 @@ const projectActions = {
 export type ProjectActions = ActionUnion<typeof projectActions>;
 
 export function getProjectTasksAsync(tasksQuery: Partial<TasksQuery> = {}): ThunkAction<void> {
-    return (dispatch: ActionCreator<Dispatch>): void => {
+    return (dispatch: ActionCreator<Dispatch>, getState: () => CombinedState): void => {
         const store = getCVATStore();
         const state: CombinedState = store.getState();
-        dispatch(projectActions.updateProjectsGettingQuery({}, tasksQuery));
+        dispatch(projectActions.updateProjectsGettingQuery(
+            getState().projects.gettingQuery,
+            tasksQuery,
+        ));
         const query: Partial<TasksQuery> = {
             ...state.projects.tasksGettingQuery,
-            page: 1,
             ...tasksQuery,
         };
 
-        dispatch(getTasksAsync(query));
+        dispatch(getTasksAsync(query, false));
     };
 }
 
@@ -107,29 +111,13 @@ export function getProjectsAsync(
             ...query,
         };
 
-        for (const key in filteredQuery) {
-            if (filteredQuery[key] === null || typeof filteredQuery[key] === 'undefined') {
-                delete filteredQuery[key];
+        for (const key of Object.keys(filteredQuery)) {
+            const value = (filteredQuery as Indexable)[key];
+            if (value === null || typeof value === 'undefined') {
+                delete (filteredQuery as Indexable)[key];
             }
         }
 
-        // Temporary hack to do not change UI currently for projects
-        // Will be redesigned in a different PR
-        const filter = {
-            and: ['owner', 'assignee', 'name', 'status'].reduce<object[]>((acc, filterField) => {
-                if (filterField in filteredQuery) {
-                    acc.push({ '==': [{ var: filterField }, filteredQuery[filterField]] });
-                    delete filteredQuery[filterField];
-                }
-
-                return acc;
-            }, []),
-        };
-
-        if (filter.and.length) {
-            filteredQuery.filter = JSON.stringify(filter);
-        }
-
         let result = null;
         try {
             result = await cvat.projects.get(filteredQuery);