diff --git a/src/hooks/use-table-fetch.ts b/src/hooks/use-table-fetch.ts index 38b85de8..e8aa9c8a 100644 --- a/src/hooks/use-table-fetch.ts +++ b/src/hooks/use-table-fetch.ts @@ -8,8 +8,9 @@ import qs from 'query-string'; import { useEffect, useRef, useState } from 'react'; type WatchConfig = - | { watch?: false | undefined; API?: string } - | { watch: true; API: string }; + | { watch?: false | undefined; API?: string; polling?: boolean } + | { watch: true; API: string; polling?: false | undefined } + | { polling: true; watch: false | undefined; API?: string }; export default function useTableFetch( options: { @@ -24,9 +25,11 @@ export default function useTableFetch( deleteAPI, contentForDelete, API, + polling = false, watch, defaultData = [] } = options; + const pollingRef = useRef(null); const chunkRequedtRef = useRef(null); const modalRef = useRef(null); const rowSelection = useTableRowSelection(); @@ -92,12 +95,14 @@ export default function useTableFetch( } }; - const fetchData = async (params?: { query: any }) => { + const fetchData = async (params?: { query: any }, polling = false) => { + if (!polling) { + setDataSource((pre) => { + pre.loading = true; + return { ...pre }; + }); + } const { query } = params || {}; - setDataSource((pre) => { - pre.loading = true; - return { ...pre }; - }); try { const params = { ..._.pickBy(query || queryParams, (val: any) => !!val) @@ -143,6 +148,24 @@ export default function useTableFetch( } }; + const fetchAPIWithPolling = async (params: any) => { + if (!polling || watch || !fetchAPI) return; + + if (pollingRef.current) { + clearInterval(pollingRef.current); + } + + // fetch data with polling, 1s interval + pollingRef.current = setInterval(async () => { + fetchData( + { + query: params + }, + true + ); + }, 5000); + }; + const handleQueryChange = (params: any) => { setQueryParams({ ...queryParams, @@ -220,6 +243,17 @@ export default function useTableFetch( }); }; + useEffect(() => { + if (dataSource.loadend) { + fetchAPIWithPolling(queryParams); + } + return () => { + if (pollingRef.current) { + clearInterval(pollingRef.current); + } + }; + }, [dataSource.loadend, queryParams]); + useEffect(() => { const init = async () => { await fetchData(); diff --git a/src/pages/resources/components/gpus.tsx b/src/pages/resources/components/gpus.tsx index d32f91ca..f3e78e9e 100644 --- a/src/pages/resources/components/gpus.tsx +++ b/src/pages/resources/components/gpus.tsx @@ -49,7 +49,7 @@ const GPUList: React.FC = () => { handleNameChange } = useTableFetch({ fetchAPI: queryGpuDevicesList, - watch: true, + polling: true, API: GPU_DEVICES_API });