ITEP-28186 Filter jobs by date #150

pplaskie · 2025-05-05T12:33:43Z

📝 Description

Add possibility to filter jobs by date by select the range date.
Jobs are filtered by the creation date of the job.
PR also include basic test to check the functionality and refactor of function to create tabs in jobs-management-panel

JIRA: ITEP-28186

filteringbydate.mp4

✨ Type of Change

Select the type of change your PR introduces:

🐞 Bug fix – Non-breaking change which fixes an issue
🚀 New feature – Non-breaking change which adds functionality
🔨 Refactor – Non-breaking change which refactors the code base
💥 Breaking change – Changes that break existing functionality
📚 Documentation update
🔒 Security update
🧪 Tests

🧪 Testing Scenarios

Describe how the changes were tested and how reviewers can test them too:

✅ Tested manually
🤖 Run automated end-to-end tests

✅ Checklist

Before submitting the PR, ensure the following:

🔍 PR title is clear and descriptive
📝 For internal contributors: If applicable, include the JIRA ticket number (e.g., ITEP-123456) in the PR title. Do not include full URLs
💬 I have commented my code, especially in hard-to-understand areas
📄 I have made corresponding changes to the documentation
✅ I have added tests that prove my fix is effective or my feature works

Copilot

Pull Request Overview

This PR adds the ability to filter jobs by a date range by updating the jobs dialog and underlying API filtering logic, while also including tests and a refactoring of the tabs creation in the jobs management panel.

Introduces date range filtering with new state management and UI components.
Refactors filtering state management and tab generation to improve clarity.
Adds new tests and a new date range picker component for manual date selection.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx	Added date filtering state, updated API call parameters, and refactored tab creation
web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.test.tsx	Added tests for the new date range picker functionality
web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.component.tsx	Introduced a new date range picker component with manual edition support

Comments suppressed due to low confidence (1)

web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx:90

Using JSON.stringify for comparing date ranges may lead to issues if the date serialization changes. Consider using a dedicated date comparison function or comparing each date component explicitly.

const isInitialRange = useMemo(() => JSON.stringify(range) === JSON.stringify(INITIAL_DATES), [range, INITIAL_DATES]);

web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.component.tsx

jpggvilaca · 2025-05-06T09:29:10Z

I noticed infinite renders when i open the jobs dialog. Could it have to do with the miliseconds of the date? We should make sure we only compare days and nothing else

pplaskie · 2025-05-06T10:04:10Z

I noticed infinite renders when i open the jobs dialog. Could it have to do with the miliseconds of the date? We should make sure we only compare days and nothing else

While checking I remembered myself that it should be because of the jobs polling.

camiloHimura · 2025-05-06T10:06:37Z

@pplaskie Can you add a video/screenshot of the new workflow?

pplaskie · 2025-05-06T10:13:21Z

@pplaskie Can you add a video/screenshot of the new workflow?

Sure!

* condition to not use header in date range picker * remove useEffect and make changes accordingly * remove unnecessary comment * add comment about exclusivness of filtering

dwesolow · 2025-05-16T10:58:37Z

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.component.tsx

@@ -0,0 +1,93 @@
+// Copyright (C) 2022-2025 Intel Corporation


We should put this component close to jobs-actions because it's needed only there. If we need this component later in other places, we will move it to @geti/ui :).

dwesolow · 2025-05-16T11:06:14Z

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.test.tsx

+
+    const mockOnChange = jest.fn();
+
+    const renderComponent = (props = {}) =>


np. props can be removed, we don't use them.

dwesolow · 2025-05-16T11:07:38Z

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.test.tsx

+    it('should open the date range dialog when the button is clicked', async () => {
+        renderComponent();
+
+        expect(screen.getByRole('button', { name: 'Select date range' })).toBeInTheDocument();


np. TBH we don't need to check if the button is in the document because if it is not then userEvent.click in line 41 will break.

dwesolow · 2025-05-16T11:13:07Z

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.component.tsx

+
+import { QuietActionButton } from '../quiet-button/quiet-action-button.component';
+
+interface DateRangePickerSmall extends RangeCalendarProps<DateValue> {


We allow consumer to pass focusedValue and onFocusChange which will never be used because we use internal state for this. We should do Omit<RangeCalendarProps<DateValue>, 'focusedValue' | 'onFocusChange>;`

dwesolow · 2025-05-16T11:15:10Z

web_ui/src/shared/components/header/jobs-management/jobs-actions/jobs-filtering.component.tsx

-    useEffect(() => {
-        if (isLoadingUsers) return;
-
-        const isSelectedUserInProject: boolean | undefined = users?.some(hasEqualId(selectedUser));
-
-        if (!!isSelectedUserInProject) return;
-
-        setSelectedUser(undefined);
-        onChange(selectedProject, undefined, selectedJobTypes);
-    }, [isLoadingUsers, onChange, selectedJobTypes, selectedProject, selectedUser, users]);
-
-    useEffect(() => {
-        onChange(selectedProject, selectedUser, selectedJobTypes);
-    }, [selectedProject, selectedUser, selectedJobTypes, onChange]);


dwesolow · 2025-05-16T11:22:26Z

web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx

-    const [projectIdFilter, setProjectIdFilter] = useState<string | undefined>();
-    const [userIdFilter, setUserIdFilter] = useState<string | undefined>();
-    const [jobTypeFilter, setJobTypeFilter] = useState<JobType[]>([]);
+    const TODAY = today(getLocalTimeZone());


TODAY is not memoized and probably recreates on each render causing INITIAL_DATES to recreate. WDYT of defining INITIAL_DATES inside useState leveraging the callback, i.e. useState<RangeValue<DateValue>>(() => { define and return initial dates }), the bonus of that approach is that we could get rid of useMemo that does not bring value in this case.

Edit: I see INITIAL_DATES and TODAY are used below in the code. I think we could safely remove useMemo unless you noticed any issues with the performance so u added that.

dwesolow · 2025-05-16T11:27:48Z

web_ui/src/shared/components/header/jobs-management/jobs-actions/jobs-filtering.component.tsx

    const { organizationId, workspaceId } = useWorkspaceIdentifier();

-    const { projectIdFilter, userIdFilter, jobTypeFilter } = defaultValues;
+    const [jobFilters, setJobFilters] = useState<FiltersType>(values);


Do we need this state here? I see we define state in the jobs-dialog and we have access to that state here. IMO we could remove the jobFilters from this component.

dwesolow · 2025-05-16T11:30:44Z

web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx

+        [range, INITIAL_DATES]
+    );
+
+    const areFiltersChanged = useMemo(


We don't need useMemo here, all values are primitives and it's quite fast todo comparison of booleans.

dwesolow · 2025-05-16T11:31:44Z

web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx

@@ -60,193 +87,101 @@ export const JobsDialog = ({ isFullScreen, onClose, setIsFullScreen }: JobsDialo
        }
    );

-    const allJobs = getAllJobs(data);
+    const isInitialRange = useMemo(
+        () => JSON.stringify(range) === JSON.stringify(INITIAL_DATES),


Is this a trick not to do range.end == INITIAL_DATES.end etc?

yes, I'm changing to isEqual from lodash

dwesolow · 2025-05-16T11:38:39Z

web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx

 import { JobCount } from '../../../../core/jobs/jobs.interface';
+import { CornerIndicator } from '../../../../pages/annotator/annotation/annotation-filter/corner-indicator.component';
+import { RefreshButton } from '../../../../pages/annotator/components/sidebar/dataset/refresh-button/refresh-button.component';


This button comes from the annotator feature. Should we consider moving the button to the shared or the the @geti/ui?

camiloHimura · 2025-05-16T12:13:27Z

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.component.tsx

+            return;
+        }
+
+        onChange && onChange({ ...range, [attribute]: value });


Suggested change

onChange && onChange({ ...range, [attribute]: value });

isFunction(onChange) && onChange({ ...range, [attribute]: value });

pplaskie requested review from jpggvilaca, MarkRedeman, camiloHimura, ActiveChooN, romanowska and dwesolow as code owners May 5, 2025 12:33

github-actions bot added the UI label May 5, 2025

pplaskie self-assigned this May 5, 2025

pplaskie requested a review from Copilot May 5, 2025 12:34

pplaskie added the ready for review label May 5, 2025

Copilot AI reviewed May 5, 2025

View reviewed changes

web_ui/src/shared/components/header/jobs-management/jobs-dialog.component.tsx Show resolved Hide resolved

jpggvilaca reviewed May 6, 2025

View reviewed changes

web_ui/src/shared/components/date-range-picker-small/date-range-picker-small.component.tsx Show resolved Hide resolved

pplaskie removed the ready for review label May 6, 2025

pplaskie added 4 commits May 14, 2025 08:43

ITEP-28186 Filter jobs by date

2883009

Comments adjustments:

a7e32e0

* condition to not use header in date range picker * remove useEffect and make changes accordingly * remove unnecessary comment * add comment about exclusivness of filtering

Fix regression

d5c404b

Refactor code of picker filters

3ca5fe3

jpggvilaca force-pushed the pplaskie/ITEP-28186_filter_jobs_by_date branch from b4330c6 to 3ca5fe3 Compare May 14, 2025 06:44

jpggvilaca added 2 commits May 14, 2025 09:13

Fix most tests, typos and interfaces

93d711b

Fix tests and infinite render

ba01664

jpggvilaca added the ready for review label May 15, 2025

romanowska approved these changes May 16, 2025

View reviewed changes

dwesolow reviewed May 16, 2025

View reviewed changes

camiloHimura reviewed May 16, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ITEP-28186 Filter jobs by date #150

ITEP-28186 Filter jobs by date #150

pplaskie commented May 5, 2025 •

edited

Loading

Copilot AI left a comment

jpggvilaca commented May 6, 2025

pplaskie commented May 6, 2025

camiloHimura commented May 6, 2025

pplaskie commented May 6, 2025

dwesolow May 16, 2025

dwesolow May 16, 2025

dwesolow May 16, 2025

dwesolow May 16, 2025

dwesolow May 16, 2025

dwesolow May 16, 2025 •

edited

Loading

dwesolow May 16, 2025

dwesolow May 16, 2025

dwesolow May 16, 2025

pplaskie May 19, 2025 •

edited

Loading

dwesolow May 16, 2025

camiloHimura May 16, 2025

		@@ -0,0 +1,93 @@
		// Copyright (C) 2022-2025 Intel Corporation


		const mockOnChange = jest.fn();

		const renderComponent = (props = {}) =>


		import { QuietActionButton } from '../quiet-button/quiet-action-button.component';

		interface DateRangePickerSmall extends RangeCalendarProps<DateValue> {

	onChange && onChange({ ...range, [attribute]: value });
	isFunction(onChange) && onChange({ ...range, [attribute]: value });

ITEP-28186 Filter jobs by date #150

Are you sure you want to change the base?

ITEP-28186 Filter jobs by date #150

Conversation

pplaskie commented May 5, 2025 • edited Loading

📝 Description

✨ Type of Change

🧪 Testing Scenarios

✅ Checklist

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

jpggvilaca commented May 6, 2025

pplaskie commented May 6, 2025

camiloHimura commented May 6, 2025

pplaskie commented May 6, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dwesolow May 16, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pplaskie May 19, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pplaskie commented May 5, 2025 •

edited

Loading

dwesolow May 16, 2025 •

edited

Loading

pplaskie May 19, 2025 •

edited

Loading