From a4cfdeb99fa1a579fc8b5e9917673da322ea9d5d Mon Sep 17 00:00:00 2001 From: and189 Date: Tue, 28 Nov 2023 21:44:37 +0000 Subject: [PATCH 01/10] Update executeJobModal.tsx --- .../client/src/app/jobs/executeJobModal.tsx | 51 ++++++++++--------- 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index a221580..211f81e 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -1,8 +1,10 @@ -import { Button, Modal, Table, Text } from '@nextui-org/react'; +import React, { useState } from 'react'; +import { Button, Modal, Table, Text, Input } from '@nextui-org/react'; import { MitmControlDTO } from '@rotom/connections'; import { Selection } from '@react-types/shared/src/selection'; import { toast } from 'react-toastify'; -import { useCallback, useState } from 'react'; + +import { SearchInput } from '../status/search'; interface ExecuteJobModalProps { closeModal: () => void; @@ -10,30 +12,30 @@ interface ExecuteJobModalProps { jobId: string; } -export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalProps): JSX.Element => { +export const ExecuteJobModal: React.FC = ({ closeModal, devices, jobId }) => { const [selectedDevices, setSelectedDevices] = useState(); + const [search, setSearch] = useState(''); - const executeJob = useCallback( - async ({ deviceIds }: { deviceIds: string[] | number[] }) => { - const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then( - async (response) => { - if (response.status !== 200) { - throw new Error(); - } + const filteredDevices = devices?.filter((device) => + device.deviceId?.includes(search) || device.origin?.includes(search) + ) || []; - closeModal(); - }, - ); + const executeJob = async ({ deviceIds }: { deviceIds: string[] | number[] }) => { + const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then( + async (response) => { + if (response.status !== 200) { + throw new Error(); + } + closeModal(); + }, + ); - toast.promise(promise, { - pending: `Running ${jobId}...`, - success: `${jobId} started succesfully`, - error: `Failed to start job ${jobId}`, - }); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [jobId], - ); + toast.promise(promise, { + pending: `Running ${jobId}...`, + success: `${jobId} started successfully`, + error: `Failed to start job ${jobId}`, + }); + }; return ( <> @@ -41,7 +43,8 @@ export const ExecuteJobModal = ({ closeModal, devices, jobId }: ExecuteJobModalP Execute {jobId} - {devices && ( + + {filteredDevices && ( Origin - {devices.map((device) => ( + {filteredDevices.map((device) => ( {device.deviceId} {device.origin} From 704d87657402e596c635e4060810110d2ef53525 Mon Sep 17 00:00:00 2001 From: and189 Date: Tue, 28 Nov 2023 22:05:46 +0000 Subject: [PATCH 02/10] Update executeJobModal.tsx --- packages/client/src/app/jobs/executeJobModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index 211f81e..0076de6 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Button, Modal, Table, Text, Input } from '@nextui-org/react'; +import { Button, Modal, Table, Text } from '@nextui-org/react'; import { MitmControlDTO } from '@rotom/connections'; import { Selection } from '@react-types/shared/src/selection'; import { toast } from 'react-toastify'; From c8982319e79d7ca218245b820b36fcf55e3a7e26 Mon Sep 17 00:00:00 2001 From: and189 Date: Wed, 29 Nov 2023 05:22:20 +0000 Subject: [PATCH 03/10] Update executeJobModal.tsx memoize the filtering by using the useMemo hook --- packages/client/src/app/jobs/executeJobModal.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index 0076de6..f0e4142 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import { Button, Modal, Table, Text } from '@nextui-org/react'; import { MitmControlDTO } from '@rotom/connections'; import { Selection } from '@react-types/shared/src/selection'; @@ -16,9 +16,11 @@ export const ExecuteJobModal: React.FC = ({ closeModal, de const [selectedDevices, setSelectedDevices] = useState(); const [search, setSearch] = useState(''); - const filteredDevices = devices?.filter((device) => - device.deviceId?.includes(search) || device.origin?.includes(search) - ) || []; + const filteredDevices = useMemo(() => { + return devices?.filter(device => + device.deviceId?.includes(search) || device.origin?.includes(search) + ) || []; + }, [devices, search]); const executeJob = async ({ deviceIds }: { deviceIds: string[] | number[] }) => { const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then( From 02c890940b0670a85ade2b2a353b76a898c621db Mon Sep 17 00:00:00 2001 From: and189 Date: Wed, 29 Nov 2023 05:44:10 +0000 Subject: [PATCH 04/10] Update executeJobModal.tsx --- packages/client/src/app/jobs/executeJobModal.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index f0e4142..d911676 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -16,11 +16,12 @@ export const ExecuteJobModal: React.FC = ({ closeModal, de const [selectedDevices, setSelectedDevices] = useState(); const [search, setSearch] = useState(''); - const filteredDevices = useMemo(() => { - return devices?.filter(device => - device.deviceId?.includes(search) || device.origin?.includes(search) - ) || []; - }, [devices, search]); +const filteredDevices = useMemo(() => { + return devices?.filter(device => + device.deviceId?.includes(search) || device.origin?.includes(search) + ) || []; +}, [devices, search]); + const executeJob = async ({ deviceIds }: { deviceIds: string[] | number[] }) => { const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then( From b484f7883c10f5ba86e65395f726526bc1646c6f Mon Sep 17 00:00:00 2001 From: and189 Date: Wed, 29 Nov 2023 05:51:55 +0000 Subject: [PATCH 05/10] Update executeJobModal.tsx --- packages/client/src/app/jobs/executeJobModal.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index d911676..20f912c 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -16,11 +16,11 @@ export const ExecuteJobModal: React.FC = ({ closeModal, de const [selectedDevices, setSelectedDevices] = useState(); const [search, setSearch] = useState(''); -const filteredDevices = useMemo(() => { - return devices?.filter(device => - device.deviceId?.includes(search) || device.origin?.includes(search) - ) || []; -}, [devices, search]); + const filteredDevices = useMemo(() => { + return devices?.filter((device) => + device.deviceId?.includes(search) || device.origin?.includes(search) + ) || []; + }, [devices, search]); const executeJob = async ({ deviceIds }: { deviceIds: string[] | number[] }) => { From 151247e9df5b3f7365b4eec4e4ecccc75a5cd591 Mon Sep 17 00:00:00 2001 From: and189 Date: Wed, 29 Nov 2023 05:59:22 +0000 Subject: [PATCH 06/10] Update executeJobModal.tsx --- packages/client/src/app/jobs/executeJobModal.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index 20f912c..0b9f2b5 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -17,12 +17,9 @@ export const ExecuteJobModal: React.FC = ({ closeModal, de const [search, setSearch] = useState(''); const filteredDevices = useMemo(() => { - return devices?.filter((device) => - device.deviceId?.includes(search) || device.origin?.includes(search) - ) || []; + return devices?.filter((device) => device.deviceId?.includes(search) || device.origin?.includes(search)) || []; }, [devices, search]); - const executeJob = async ({ deviceIds }: { deviceIds: string[] | number[] }) => { const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then( async (response) => { From d5f0ff28cadd228900c0b1cadd575121ce61a710 Mon Sep 17 00:00:00 2001 From: and189 Date: Wed, 29 Nov 2023 12:47:59 +0000 Subject: [PATCH 07/10] Update executeJobModal.tsx useCallback Hook for executeJob --- .../client/src/app/jobs/executeJobModal.tsx | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index 0b9f2b5..6a02576 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useCallback } from 'react'; import { Button, Modal, Table, Text } from '@nextui-org/react'; import { MitmControlDTO } from '@rotom/connections'; import { Selection } from '@react-types/shared/src/selection'; @@ -20,22 +20,25 @@ export const ExecuteJobModal: React.FC = ({ closeModal, de return devices?.filter((device) => device.deviceId?.includes(search) || device.origin?.includes(search)) || []; }, [devices, search]); - const executeJob = async ({ deviceIds }: { deviceIds: string[] | number[] }) => { - const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then( - async (response) => { - if (response.status !== 200) { - throw new Error(); - } - closeModal(); - }, - ); + const executeJob = useCallback( + async ({ deviceIds }: { deviceIds: string[] | number[] }) => { + const promise = fetch(`/api/job/execute/${jobId}/${deviceIds.join()}`, { method: 'POST' }).then( + async (response) => { + if (response.status !== 200) { + throw new Error(); + } + closeModal(); + }, + ); - toast.promise(promise, { - pending: `Running ${jobId}...`, - success: `${jobId} started successfully`, - error: `Failed to start job ${jobId}`, - }); - }; + toast.promise(promise, { + pending: `Running ${jobId}...`, + success: `${jobId} started successfully`, + error: `Failed to start job ${jobId}`, + }); + }, + [jobId, closeModal], // Abhängigkeiten + ); return ( <> From 940cdea509489b1627ffb557d8e6a74a09b736ed Mon Sep 17 00:00:00 2001 From: and189 Date: Wed, 29 Nov 2023 21:24:11 +0000 Subject: [PATCH 08/10] Update executeJobModal.tsx --- packages/client/src/app/jobs/executeJobModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index 6a02576..cb37139 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -37,7 +37,7 @@ export const ExecuteJobModal: React.FC = ({ closeModal, de error: `Failed to start job ${jobId}`, }); }, - [jobId, closeModal], // Abhängigkeiten + [jobId, closeModal], ); return ( From 08c20024481baf1eb85d652ace4007077a9e4c53 Mon Sep 17 00:00:00 2001 From: and189 Date: Wed, 29 Nov 2023 23:55:47 +0000 Subject: [PATCH 09/10] Update executeJobModal.tsx --- packages/client/src/app/jobs/executeJobModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index cb37139..316a9fa 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -37,7 +37,7 @@ export const ExecuteJobModal: React.FC = ({ closeModal, de error: `Failed to start job ${jobId}`, }); }, - [jobId, closeModal], + [jobId, closeModal], ); return ( From 548d6af520450c843fea380a2c95fb3d1b3e0028 Mon Sep 17 00:00:00 2001 From: Fabio1988 <35898099+Fabio1988@users.noreply.github.com> Date: Wed, 6 Dec 2023 13:07:27 +0100 Subject: [PATCH 10/10] fix case sensitive search Co-authored-by: Naji Astier --- packages/client/src/app/jobs/executeJobModal.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/client/src/app/jobs/executeJobModal.tsx b/packages/client/src/app/jobs/executeJobModal.tsx index 316a9fa..5b5aab2 100644 --- a/packages/client/src/app/jobs/executeJobModal.tsx +++ b/packages/client/src/app/jobs/executeJobModal.tsx @@ -17,7 +17,13 @@ export const ExecuteJobModal: React.FC = ({ closeModal, de const [search, setSearch] = useState(''); const filteredDevices = useMemo(() => { - return devices?.filter((device) => device.deviceId?.includes(search) || device.origin?.includes(search)) || []; + return ( + devices?.filter( + (device) => + device.deviceId?.toLowerCase().includes(search.toLowerCase()) || + device.origin?.toLowerCase().includes(search.toLowerCase()), + ) || [] + ); }, [devices, search]); const executeJob = useCallback(