fix(console): fix useFetch cant clear polling (#1921)

* feat(console): support query vm by vm name * fix(console): fix useFetch polling can't clear
tkestack · May 12, 2022 · 5f4d63d · 5f4d63d
1 parent 854587c
commit 5f4d63d
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 21 deletions.
diff --git a/...nsole/src/modules/cluster/components/resource/virtual-machine/pages/list/action-panel.tsx b/...nsole/src/modules/cluster/components/resource/virtual-machine/pages/list/action-panel.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Table, Justify, Button, Select, TagSearchBox, Text } from 'tea-component';
 import { useRecoilValueLoadable, useRecoilState } from 'recoil';
 import { namespaceListState, namespaceSelectionState } from '../../store/base';
 import { router } from '@src/modules/cluster/router';
 
-export const VMListActionPanel = ({ route, reFetch }) => {
+export const VMListActionPanel = ({ route, reFetch, onQueryChange }) => {
   const namespaceListLoadable = useRecoilValueLoadable(namespaceListState);
   const [namespaceSelection, setNamespaceSelection] = useRecoilState(namespaceSelectionState);
 
@@ -42,6 +42,23 @@ export const VMListActionPanel = ({ route, reFetch }) => {
               onChange={value => setNamespaceSelection(value)}
             />
 
+            <TagSearchBox
+              tips=""
+              style={{ width: 300 }}
+              attributes={[
+                {
+                  type: 'input',
+                  key: 'name',
+                  name: '虚拟机名称'
+                }
+              ]}
+              onChange={tags => {
+                const name = tags?.find(item => item?.attr?.key === 'name')?.values?.[0]?.name ?? '';
+
+                onQueryChange(name);
+              }}
+            />
+
             <Button icon="refresh" onClick={reFetch} />
           </>
         }

diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx
@@ -3,7 +3,7 @@ import { Table, Button, TableColumn, Text, Pagination, Dropdown, List } from 'te
 import { VMListActionPanel } from './action-panel';
 import { useFetch } from '@src/modules/common/hooks';
 import * as dayjs from 'dayjs';
-import { useSetRecoilState, useRecoilValueLoadable, useRecoilState, useRecoilValue } from 'recoil';
+import { useSetRecoilState, useRecoilState, useRecoilValue } from 'recoil';
 import { clusterIdState, namespaceSelectionState, vmSelectionState } from '../../store/base';
 import { virtualMachineAPI } from '@src/webApi';
 import { router } from '@src/modules/cluster/router';
@@ -18,6 +18,8 @@ export const VMListPanel = ({ route }) => {
   const namespace = useRecoilValue(namespaceSelectionState);
   const setVMSelection = useSetRecoilState(vmSelectionState);
 
+  const [query, setQuery] = useState('');
+
   const columns: TableColumn[] = [
     {
       key: 'name',
@@ -131,7 +133,7 @@ export const VMListPanel = ({ route }) => {
     async ({ paging, continueToken }) => {
       const { items, newContinueToken, restCount } = await virtualMachineAPI.fetchVMListWithVMI(
         { clusterId, namespace },
-        { limit: paging?.pageSize, continueToken }
+        { limit: paging?.pageSize, continueToken, query }
       );
       return {
         data:
@@ -153,19 +155,20 @@ export const VMListPanel = ({ route }) => {
         totalCount: (paging.pageIndex - 1) * paging.pageSize + items.length + restCount
       };
     },
-    [clusterId, namespace],
+    [clusterId, namespace, query],
     {
       mode: 'continue',
       defaultPageSize,
       fetchAble: !!(clusterId && namespace),
       polling: true,
-      pollingDelay: 30 * 1000
+      pollingDelay: 30 * 1000,
+      needClearData: false
     }
   );
 
   return (
     <>
-      <VMListActionPanel route={route} reFetch={reFetch} />
+      <VMListActionPanel route={route} reFetch={reFetch} onQueryChange={setQuery} />
       <Table
         columns={columns}
         records={vmList ?? []}

diff --git a/web/console/src/modules/common/hooks/useFetch.ts b/web/console/src/modules/common/hooks/useFetch.ts
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 interface IPaging {
   pageIndex: number;
@@ -27,11 +27,12 @@ interface IUseFetchOptions<T> {
   fetchAble?: boolean;
   polling?: boolean;
   pollingDelay?: number;
+  needClearData?: boolean;
 }
 
 type IUseFetchQuery<T> = (params?: IQueryParams) => Promise<IQueryResponse<T>>;
 
-type IStatus = 'idle' | 'loading' | 'success' | 'error';
+type IStatus = 'idle' | 'loading' | 'success' | 'error' | 'loading-polling';
 
 export function useFetch<T>(
   query: IUseFetchQuery<T>,
@@ -46,7 +47,8 @@ export function useFetch<T>(
     defaultPageSize = 20,
     fetchAble = true,
     polling = false,
-    pollingDelay = 5000
+    pollingDelay = 5000,
+    needClearData = true
   } = options ?? {};
 
   const [data, _setData] = useState<T>(null);
@@ -64,21 +66,21 @@ export function useFetch<T>(
   }
 
   // 定时相关
-  const [timer, setTimer] = useState(null);
+  const timer = useRef(null);
   useEffect(() => {
-    clearInterval(timer);
+    clearInterval(timer.current);
 
     const _timer = setInterval(() => {
       if (!polling) return;
 
-      if (status === 'loading') return;
+      if (status === 'loading' || status === 'loading-polling') return;
 
-      reFetch();
+      fetchData(true);
     }, pollingDelay);
 
-    setTimer(_timer);
+    timer.current = _timer;
 
-    return () => clearInterval(timer);
+    return () => clearInterval(timer.current);
   }, [polling, status, pollingDelay]);
 
   // 普通翻页相关的
@@ -110,11 +112,13 @@ export function useFetch<T>(
     setPageIndex(pre => pre - 1);
   }
 
-  async function fetchData() {
-    setData(null);
+  async function fetchData(isPolling = false) {
+    if (needClearData) {
+      setData(null);
+    }
 
     try {
-      setStatus('loading');
+      setStatus(isPolling ? 'loading-polling' : 'loading');
       const paging = { pageIndex, pageSize };
 
       switch (mode) {
@@ -198,4 +202,5 @@ export function useFetch<T>(
 /* TODO:
 - 边界条件
 - 无限分页
+- 轮训的时候不想出现loading，但是其他时候需要 - done
  */
diff --git a/web/console/src/webApi/virtual-machine.ts b/web/console/src/webApi/virtual-machine.ts
@@ -82,8 +82,18 @@ export async function fetchVMIList({ clusterId, namespace }) {
   );
 }
 
-export async function fetchVMListWithVMI({ clusterId, namespace }, { limit, continueToken }) {
-  const { items, metadata } = await fetchVMList({ clusterId, namespace }, { limit, continueToken });
+export async function fetchVMListWithVMI({ clusterId, namespace }, { limit, continueToken, query }) {
+  let items, metadata;
+
+  if (query) {
+    const vm = await fetchVM({ clusterId, namespace, name: query });
+    items = vm ? [vm] : [];
+  } else {
+    const rsp = await fetchVMList({ clusterId, namespace }, { limit, continueToken });
+
+    items = rsp?.items ?? [];
+    metadata = rsp?.metadata;
+  }
 
   return {
     items: await Promise.all(