feat(console): add continue token expired status (#2214)

tkestack · Dec 19, 2022 · 4cfa235 · 4cfa235
1 parent 5289a85
commit 4cfa235
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/web/console/src/modules/alarmRecord/components/AlarmTablePanel.tsx b/web/console/src/modules/alarmRecord/components/AlarmTablePanel.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Justify, Table, TableColumn, Text, Bubble, Pagination, TagSearchBox } from 'tea-component';
+import { Justify, Table, TableColumn, Text, Bubble, Pagination, TagSearchBox, Button } from 'tea-component';
 import { useFetch } from '@src/modules/common/hooks/useFetch';
 import { fetchAlarmList } from '@src/webApi/alarm';
 import { t } from '@/tencent/tea-app/lib/i18n';
@@ -8,8 +8,6 @@ import { dateFormatter } from '@helper/dateFormatter';
 const { filterable, autotip } = Table?.addons;
 const ALL_VALUE = '';
 
-const defaultPageSize = 10;
-
 export const AlarmTablePanel = ({ clusterId }) => {
   const columns: TableColumn[] = [
     {
@@ -99,7 +97,7 @@ export const AlarmTablePanel = ({ clusterId }) => {
       polling: true,
       pollingDelay: 5 * 1000,
       needClearData: false,
-      defaultPageSize,
+      defaultPageSize: 10,
       onlyPollingPage1: true
     }
   );
@@ -185,7 +183,16 @@ export const AlarmTablePanel = ({ clusterId }) => {
 
           autotip({
             isLoading: status === 'loading',
-            isError: status === 'error',
+            isError: status === 'error' || status === 'expired',
+            errorText:
+              status === 'expired' ? (
+                <Button type="link" onClick={() => paging.setPageIndex(1)}>
+                  ContinueToken 过期，点击跳转到第一页
+                </Button>
+              ) : (
+                '加载失败'
+              ),
+
             emptyText: '暂无数据'
           })
         ]}
@@ -196,9 +203,15 @@ export const AlarmTablePanel = ({ clusterId }) => {
         stateText={<Text>{`第${paging.pageIndex}页`}</Text>}
         pageIndexVisible={false}
         endJumpVisible={false}
-        pageSize={defaultPageSize}
-        pageSizeVisible={false}
-        onPagingChange={({ pageIndex }) => {
+        pageSize={paging.pageSize}
+        pageIndex={paging.pageIndex}
+        pageSizeVisible={true}
+        onPagingChange={({ pageIndex, pageSize }) => {
+          if (pageSize !== paging.pageSize) {
+            paging.setPageSize(pageSize);
+            return;
+          }
+
           if (pageIndex > paging.pageIndex) paging.nextPageIndex();
 
           if (pageIndex < paging.pageIndex) paging.prePageIndex();

diff --git a/web/console/src/modules/common/hooks/useFetch.ts b/web/console/src/modules/common/hooks/useFetch.ts
@@ -33,7 +33,7 @@ interface IUseFetchOptions<T> {
 
 type IUseFetchQuery<T> = (params?: IQueryParams) => Promise<IQueryResponse<T>>;
 
-type IStatus = 'idle' | 'loading' | 'success' | 'error' | 'loading-polling';
+type IStatus = 'idle' | 'loading' | 'success' | 'error' | 'loading-polling' | 'expired';
 
 export function useFetch<T>(
   query: IUseFetchQuery<T>,
@@ -81,7 +81,7 @@ export function useFetch<T>(
   function setPageSize(_) {
     _setPageSize(_);
 
-    reFetch();
+    setPageIndex(1);
   }
 
   // 定时相关
@@ -167,7 +167,13 @@ export function useFetch<T>(
 
       setStatus('success');
     } catch (error) {
-      setStatus('error');
+      setData(null);
+
+      if (error?.response?.status === 410) {
+        setStatus('expired');
+      } else {
+        setStatus('error');
+      }
     }
   }
 

diff --git a/web/console/webpack/csrf.js b/web/console/webpack/csrf.js
@@ -1,7 +1,7 @@
 const SparkMD5 = require('spark-md5');
 
 function parseCookie(cookieStr) {
-  cookieStr.split('; ').reduce((all, item) => {
+  return cookieStr.split('; ').reduce((all, item) => {
     const [key, value] = item.split('=');
 
     return {