From 3e359a69c79162d9fa3283bb7bd729a022a29ad0 Mon Sep 17 00:00:00 2001 From: jialin Date: Fri, 16 Jan 2026 11:31:46 +0800 Subject: [PATCH] fix: set loadingWatch state when the loading begins --- src/hooks/use-chunk-request.ts | 14 ++++++++-- src/hooks/use-table-fetch.ts | 28 ++++++++++--------- src/hooks/use-update-chunk-list.ts | 2 +- .../hooks/use-add-worker-message.ts | 10 ++----- src/pages/resources/apis/index.ts | 8 ++++-- 5 files changed, 35 insertions(+), 27 deletions(-) diff --git a/src/hooks/use-chunk-request.ts b/src/hooks/use-chunk-request.ts index f278b4b3..8987d89b 100644 --- a/src/hooks/use-chunk-request.ts +++ b/src/hooks/use-chunk-request.ts @@ -50,7 +50,7 @@ export const sliceData = (data: string, loaded: number, loadedSize: any) => { const useSetChunkRequest = () => { const watchRequestList = window.__GPUSTACK_WATCH_REQUEST_CLEAR__.requestList; - const [requestReadyState, setRequestReadyState] = useState(3); + const [requestReadyState, setRequestReadyState] = useState(0); const axiosToken = useRef(null); const requestConfig = useRef({}); const loaded = useRef(0); @@ -61,12 +61,13 @@ const useSetChunkRequest = () => { const timer = useRef(null); const loadedSize = useRef(0); const workerRef = useRef(null); + const startLoadingRef = useRef(false); const reset = () => { loaded.current = 0; total.current = 0; loadedSize.current = 0; - setRequestReadyState(3); + setRequestReadyState(0); }; const createAxiosToken = () => { @@ -169,6 +170,7 @@ const useSetChunkRequest = () => { const setChunkRequest = (config: RequestConfig) => { requestConfig.current = { ...particalConfig, ...config }; retryCount.current = totalCount; + startLoadingRef.current = false; clearTimeout(timer.current); axiosChunkRequest(requestConfig.current); return axiosToken; @@ -201,11 +203,17 @@ const useSetChunkRequest = () => { 2 ** (totalCount - retryCount.current) * 1000 ); } + if (requestReadyState === 3) { + setTimeout(() => { + startLoadingRef.current = true; + }, 5000); + } }, [requestReadyState]); return { setChunkRequest, - createAxiosToken + createAxiosToken, + startLoadingRef }; }; diff --git a/src/hooks/use-table-fetch.ts b/src/hooks/use-table-fetch.ts index acd3d52d..f9df993d 100644 --- a/src/hooks/use-table-fetch.ts +++ b/src/hooks/use-table-fetch.ts @@ -62,7 +62,7 @@ export default function useTableFetch( const modalRef = useRef(null); const rowSelection = useTableRowSelection(); const { sortOrder, handleMultiSortChange } = useTableMultiSort(); - const axiosTokenRef = useRef(null); + const axiosTokenRef = useRef(null); // ======= to resolve worker upate issue ======= const shouldUpdateRef = useRef(false); @@ -134,10 +134,10 @@ export default function useTableFetch( currentWatchParamsRef.current = { query: { ...params } }; - axiosTokenRef.current?.cancel?.(); + axiosTokenRef.current?.cancel?.('CANCEL_PREVIOUS_REQUEST'); axiosTokenRef.current = createAxiosToken(); const res = await fetchAPI(params, { - token: axiosTokenRef.current.token + token: axiosTokenRef.current?.token }); shouldUpdateRef.current = false; loadendRef.current = true; @@ -160,7 +160,7 @@ export default function useTableFetch( query: { ...newParams } }; const newRes = await fetchAPI(newParams, { - token: axiosTokenRef.current.token + token: axiosTokenRef.current?.token }); setDataSource({ @@ -194,15 +194,17 @@ export default function useTableFetch( ...query }); } - } catch (error) { - console.log('error', error); - setDataSource({ - dataList: [], - loading: false, - loadend: true, - total: dataSource.total, - totalPage: dataSource.totalPage - }); + } catch (error: any) { + if (error.message !== 'CANCEL_PREVIOUS_REQUEST') { + setDataSource({ + dataList: [], + loading: false, + loadend: true, + total: dataSource.total, + totalPage: dataSource.totalPage + }); + } + loadendRef.current = true; shouldUpdateRef.current = false; } finally { diff --git a/src/hooks/use-update-chunk-list.ts b/src/hooks/use-update-chunk-list.ts index e71268ef..9765fbfb 100644 --- a/src/hooks/use-update-chunk-list.ts +++ b/src/hooks/use-update-chunk-list.ts @@ -45,7 +45,7 @@ export function useUpdateChunkedList(options: { }, 200); }; const updateChunkedList = (data: ChunkedCollection) => { - console.log('updateChunkedList data:', data); + // console.log('updateChunkedList data:', data); let collections = data?.collection || []; if (options?.computedID) { collections = collections?.map((item: any) => { diff --git a/src/pages/cluster-management/hooks/use-add-worker-message.ts b/src/pages/cluster-management/hooks/use-add-worker-message.ts index f875245e..803bf339 100644 --- a/src/pages/cluster-management/hooks/use-add-worker-message.ts +++ b/src/pages/cluster-management/hooks/use-add-worker-message.ts @@ -8,7 +8,6 @@ export default function useAddWorkerMessage() { const chunkRequestRef = useRef(null); const newItemsRef = useRef([]); const [addedCount, setAddedCount] = useState(0); - const startWatchRef = useRef(false); const timerRef = useRef(null); const showAddWorkerMessage = () => { @@ -18,12 +17,12 @@ export default function useAddWorkerMessage() { } }; - const { setChunkRequest } = useSetChunkRequest(); + const { setChunkRequest, startLoadingRef } = useSetChunkRequest(); const { updateChunkedList } = useUpdateChunkedList({ events: ['CREATE', 'INSERT'], dataList: [], onCreate: (newItems: any) => { - if (startWatchRef.current) { + if (startLoadingRef.current) { newItemsRef.current = newItemsRef.current.concat(newItems); showAddWorkerMessage(); } @@ -39,7 +38,6 @@ export default function useAddWorkerMessage() { const resetAddedCount = () => { setAddedCount(0); newItemsRef.current = []; - startWatchRef.current = false; clearTimeout(timerRef.current); }; @@ -51,9 +49,6 @@ export default function useAddWorkerMessage() { url: WORKERS_API, handler: updateHandler }); - timerRef.current = setTimeout(() => { - startWatchRef.current = true; - }, 5000); } catch (error) { // ignore } @@ -62,7 +57,6 @@ export default function useAddWorkerMessage() { useEffect(() => { return () => { chunkRequestRef.current?.current?.cancel?.(); - startWatchRef.current = false; newItemsRef.current = []; clearTimeout(timerRef.current); }; diff --git a/src/pages/resources/apis/index.ts b/src/pages/resources/apis/index.ts index 771e6e1a..df77b230 100644 --- a/src/pages/resources/apis/index.ts +++ b/src/pages/resources/apis/index.ts @@ -54,10 +54,14 @@ export async function queryWorkersList>( }); } -export async function queryGpuDevicesList(params: Global.SearchParams) { +export async function queryGpuDevicesList( + params: Global.SearchParams, + options?: { token: any } +) { return request>(`${GPU_DEVICES_API}`, { method: 'GET', - params + params, + cancelToken: options?.token }); }