Jobs page: advanced filtration and implemented sorting

[bsekachev]

Resolve #4385

Motivation and context

Sorting:

Quick filters:

Filter builder

Recent filters:

@nmanovic The implementation is buggy for now and not fully implemented yet, but it can send json logic requests to the server.
Example request (see query params):

filters: {"and":[{"in":[{"var":"state"},["in progress","new"]]},{"==":[{"var":"dimension"},"2d"]},{"<=":[5,{"var":"id"},500]},{"in":["Test task name",{"var":"task_name"}]},{"in":["Test project name",{"var":"project_name"}]}]}

• keep state while fetching
• colorify applied filters
• implement server filtering
• timedate before/after, setup timedate format
• reduce code duplication
• add sorting
• test and debug

How has this been tested?

Checklist

• I submit my changes into the develop branch
• I have added a description of my changes into CHANGELOG file
• I have updated the documentation accordingly
• I have added tests to cover my changes
• I have linked related issues (read github docs)
• I have increased versions of npm packages if it is necessary (cvat-canvas,
  cvat-core, cvat-data and cvat-ui)

License

• I submit my code changes under the same MIT License that covers the project.
  Feel free to contact the maintainers if that's a concern.
• I have updated the license header for each file (see an example below)

# Copyright (C) 2022 Intel Corporation
#
# SPDX-License-Identifier: MIT

[nmanovic]

@bsekachev , please look 8df5f58

[bsekachev]

@nmanovic

Looks like everything works (I didn't test datetime yet, need to implement it on UI first).
But don't you think when filtering by assignee, better to use username rather then user id? It is not very important from UI point of view, just my personal suggestion.

[nmanovic]

@nmanovic

Looks like everything works (I didn't test datetime yet, need to implement it on UI first). But don't you think when filtering by assignee, better to use username rather then user id? It is not very important from UI point of view, just my personal suggestion.

I agree, just need to map assignee to assignee__username lookup field. When you are ready with UI, I will improve the server part as well. Several comments:

• Better to rename the query parameter to filter
• Need to add a quick button to reset filters
• Is it possible to make all button on the filtering dialog visible from the beginning? An empty yellow box without any buttons looks confusing and agly.
• It will be better to choose a predefined filter and be able to edit it in the dialog. On your mockups the button was inside the popup dialog as far as I remember.
• Also the filter encoding isn't readable. But I don't think that we can fix that. Probably a good solution could be "deepObject", but it doesn't support nested objects: https://swagger.io/docs/specification/serialization/. Another solution is https://github.com/ljharb/qs but I don't see an implementation on python.

[bsekachev]

Better to rename the query parameter to filter

Ok.

Need to add a quick button to reset filters

Ok.

Is it possible to make all button on the filtering dialog visible from the beginning? An empty yellow box without any buttons looks confusing and agly.

Possible I think with our css setup, but the library does not provide strong API to modify default styles, so, it might be broken in case of significant changes. Anyway, I'll try.

It will be better to choose a predefined filter and be able to edit it in the dialog. On your mockups the button was inside the popup dialog as far as I remember.

I do not think a user should change predefined filters, because they are predefined.. And about the button, inside dialog on annotation view we have "Recent filters" list. From the meeting we discussed, that for predefined list, better to have them outside for quick access.

[bsekachev]

@nmanovic
Look at new appearance (I've updated screenshots).

[nmanovic]

@bsekachev , some nice ideas for UI: https://devdocs.magento.com/guides/v2.4/pattern-library/filters/data-table-filters/filtering.html

[nmanovic]

@nmanovic Look at new appearance (I've updated screenshots).

When the cross (clear filter) appear and disappear, UI elements are moving and it looks strange. I believe we need to following UI ideas in the link above. The interface looks professional, known, intuitive. Of course our interface in any case will be slightly different, but need to follow the concept in general.

[bsekachev]

When the cross (clear filter) appear and disappear

Let's do the button visible always, but disable it when no filters applied.

In the link you provided filters are simple set of conditions united with AND, in our case filters are more difficult, so many design solutions from there (like for example a line with active filters) is not applicable for us because in our case these lines are multilevel and unreadable.

[Marishka17]

@kirill-sizov, Could you please take a look at small changes in REST API tests? In this PR job order was changed and I've updated assets and have added a step with filtering jobs with annotation with shapes (because without it tests failed).

[sizov-kirill]

@kirill-sizov, Could you please take a look at small changes in REST API tests? In this PR job order was changed and I've updated assets and have added a step with filtering jobs with annotation with shapes (because without it tests failed).

I looked, tests changes looks good to me.

[Marishka17]

@bsekachev, I guess, filters for users also should be updated..

[bsekachev]

@Marishka17
We do not have filters for users as far as I know, only search.

[bsekachev]

@ActiveChooN

Could you please conduct a review?

[nmanovic]

LGTM

[bsekachev]

@TOsmanov

Could you please add/update documentation about current implementation of Jobs page?

[TOsmanov]

@TOsmanov

Could you please add/update documentation about current implementation of Jobs page?

@bsekachev , yes, sure