External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-17 06:17:36 -02:30
Code Issues Packages Projects Releases Wiki Activity

change jobs debounce to throttle; prevent duplicate rows

Browse Source
This commit is contained in:
Keith Grant
2020-06-11 10:52:35 -07:00
parent 7aa8495d1a
commit 48977e50df
2 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui_next/src/components/JobList/JobList.jsx
View File

@@ -68,12 +68,12 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
params.id__in = ids.join(','); params.id__in = ids.join(',');
const { data } = await UnifiedJobsAPI.read({ ...params }); const { data } = await UnifiedJobsAPI.read({ ...params });
setValue(prev => { setValue(prev => {
const mergedJobsList = [...data.results, ...prev.results].slice( const deDuplicated = data.results.filter(
0, job => !prev.results.find(j => j.id === job.id)
params.page_size
); );
const mergedJobsList = [...deDuplicated, ...prev.results];
return { return {
results: mergedJobsList, results: mergedJobsList.slice(0, params.page_size),
count: prev.count + data.count, count: prev.count + data.count,
}; };
}); });

30
awx/ui_next/src/components/JobList/useWsJobs.js
View File

@@ -4,7 +4,9 @@ export default function useWsJobs(initialJobs, fetchJobsById, filtersApplied) {
const [jobs, setJobs] = useState(initialJobs); const [jobs, setJobs] = useState(initialJobs);
const [lastMessage, setLastMessage] = useState(null); const [lastMessage, setLastMessage] = useState(null);
const [jobsToFetch, setJobsToFetch] = useState([]); const [jobsToFetch, setJobsToFetch] = useState([]);
const debouncedJobsToFetch = useDebounce(jobsToFetch, 5000); // const debouncedJobsToFetch = useDebounce(jobsToFetch, 5000);
const throttleJobsToFetch = useThrottle(jobsToFetch, 5000);
useEffect(() => { useEffect(() => {
setJobs(initialJobs); setJobs(initialJobs);
}, [initialJobs]); }, [initialJobs]);
@@ -15,11 +17,11 @@ export default function useWsJobs(initialJobs, fetchJobsById, filtersApplied) {
} }
}; };
useEffect(() => { useEffect(() => {
if (debouncedJobsToFetch.length) { if (throttleJobsToFetch.length) {
fetchJobsById(debouncedJobsToFetch); fetchJobsById(throttleJobsToFetch);
setJobsToFetch([]); setJobsToFetch([]);
} }
}, [debouncedJobsToFetch, fetchJobsById]); }, [throttleJobsToFetch, fetchJobsById]);
const ws = useRef(null); const ws = useRef(null);
@@ -100,18 +102,22 @@ function updateJob(jobs, index, message) {
return [...jobs.slice(0, index), job, ...jobs.slice(index + 1)]; return [...jobs.slice(0, index), job, ...jobs.slice(index + 1)];
} }
function useDebounce(value, delay) { function useThrottle(value, limit) {
const [debouncedValue, setDebouncedValue] = useState(value); const [throttledValue, setThrottledValue] = useState(value);
const lastRan = useRef(Date.now());
useEffect(() => { useEffect(() => {
const timeout = setTimeout(() => { const handler = setTimeout(() => {
setDebouncedValue(value); if (Date.now() - lastRan.current >= limit) {
}, delay); setThrottledValue(value);
lastRan.current = Date.now();
}
}, limit - (Date.now() - lastRan.current));
return () => { return () => {
clearTimeout(timeout); clearTimeout(handler);
}; };
}, [value, delay]); }, [value, limit]);
return debouncedValue; return throttledValue;
} }