diff --git a/src/hooks/use-table-fetch.ts b/src/hooks/use-table-fetch.ts index 0ba23b1a..062f7251 100644 --- a/src/hooks/use-table-fetch.ts +++ b/src/hooks/use-table-fetch.ts @@ -1,3 +1,4 @@ +import { WatchEventType } from '@/config'; import { TABLE_SORT_DIRECTIONS } from '@/config/settings'; import useSetChunkRequest from '@/hooks/use-chunk-request'; import useTableRowSelection from '@/hooks/use-table-row-selection'; @@ -38,6 +39,7 @@ export default function useTableFetch( events?: EventsType[]; defaultQueryParams?: Record; isInfiniteScroll?: boolean; + updateManually?: boolean; } & WatchConfig ) { const { @@ -50,7 +52,8 @@ export default function useTableFetch( defaultData = [], events = ['UPDATE', 'DELETE'], defaultQueryParams = {}, - isInfiniteScroll = false + isInfiniteScroll = false, + updateManually } = options; const pollingRef = useRef(null); const chunkRequedtRef = useRef(null); @@ -104,27 +107,6 @@ export default function useTableFetch( const debounceSetExtraStatus = _.debounce(setExtraStatus, 3000); - const updateHandler = (list: any) => { - _.each(list, (data: any) => { - updateChunkedList(data); - }); - }; - - const createModelsChunkRequest = async (params?: any) => { - if (!API || !watch) return; - chunkRequedtRef.current?.current?.cancel?.(); - try { - const query = _.omit(params || queryParams, ['page', 'perPage']); - - chunkRequedtRef.current = setChunkRequest({ - url: `${API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`, - handler: updateHandler - }); - } catch (error) { - // ignore - } - }; - const fetchData = async ( params?: { query: Record; loadmore?: boolean }, polling = false @@ -205,6 +187,40 @@ export default function useTableFetch( } }; + const debounceFetchData = _.debounce(fetchData, 300); + + const updateHandler = (list: any) => { + let shouldUpdate = false; + _.each(list, (data: any) => { + updateChunkedList(data); + }); + shouldUpdate = list.some( + (data: any) => + data.type === WatchEventType.DELETE || + data.type === WatchEventType.CREATE + ); + + if (shouldUpdate && updateManually && dataSource.loadend) { + shouldUpdate = false; + debounceFetchData(); + } + }; + + const createModelsChunkRequest = async (params?: any) => { + if (!API || !watch) return; + chunkRequedtRef.current?.current?.cancel?.(); + try { + const query = _.omit(params || queryParams, ['page', 'perPage']); + + chunkRequedtRef.current = setChunkRequest({ + url: `${API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`, + handler: updateHandler + }); + } catch (error) { + // ignore + } + }; + const fetchAPIWithPolling = async (params: any) => { if (!polling || watch || !fetchAPI) return; @@ -368,6 +384,7 @@ export default function useTableFetch( modalRef, extraStatus, TABLE_SORT_DIRECTIONS, + debounceFetchData, setQueryParams, handleDelete, handleDeleteBatch, diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index 0f7f10a0..96f3b365 100644 --- a/src/pages/resources/components/workers.tsx +++ b/src/pages/resources/components/workers.tsx @@ -57,10 +57,10 @@ const Workers: React.FC<{ } = useTableFetch({ fetchAPI: queryWorkersList, deleteAPI: deleteWorker, - events: ['UPDATE', 'DELETE', 'INSERT'], contentForDelete: 'resources.worker', watch: true, API: WORKERS_API, + updateManually: true, defaultQueryParams: { cluster_id: clusterId }