feat(widget): add renderErrorIcon

frontend/src/app/pages/DashBoardPage/components/WidgetToolBar/index.tsx

@@ -20,11 +20,12 @@ import {
   ClockCircleOutlined,
   LinkOutlined,
   SyncOutlined,
+  WarningTwoTone,
 } from '@ant-design/icons';
 import { Space, Tooltip } from 'antd';
 import React, { FC, useContext } from 'react';
 import styled from 'styled-components';
-import { PRIMARY } from 'styles/StyleConstants';
+import { ERROR, PRIMARY } from 'styles/StyleConstants';
 import { BoardContext } from '../../contexts/BoardContext';
 import { WidgetContext } from '../../contexts/WidgetContext';
 import { WidgetInfoContext } from '../../contexts/WidgetInfoContext';
@@ -36,7 +37,8 @@ interface WidgetToolBarProps {}
 
 const WidgetToolBar: FC<WidgetToolBarProps> = () => {
   const { boardType, editing: boardEditing } = useContext(BoardContext);
-  const { loading, inLinking, rendered } = useContext(WidgetInfoContext);
+  const { loading, inLinking, rendered, errInfo } =
+    useContext(WidgetInfoContext);
   const widget = useContext(WidgetContext);
   const { onClearLinkage } = useContext(WidgetMethodContext);
   const ssp = e => {
@@ -77,6 +79,24 @@ const WidgetToolBar: FC<WidgetToolBarProps> = () => {
       ) : null;
     }
   };
+  const renderErrorIcon = (errInfo?: string) => {
+    if (!errInfo) return null;
+    const renderTitle = errInfo => {
+      if (typeof errInfo !== 'string') return 'object';
+      return (
+        <div
+          style={{ maxHeight: '200px', maxWidth: '400px', overflow: 'auto' }}
+        >
+          {errInfo}
+        </div>
+      );
+    };
+    return (
+      <Tooltip title={renderTitle(errInfo)}>
+        <WarningTwoTone twoToneColor={ERROR} />
+      </Tooltip>
+    );
+  };
   const renderWidgetAction = () => {
     const widgetType = widget.config.type;
     const hideTypes: WidgetType[] = ['query', 'reset', 'controller'];
@@ -85,9 +105,11 @@ const WidgetToolBar: FC<WidgetToolBarProps> = () => {
     }
     return <WidgetActionDropdown widget={widget} />;
   };
+
   return (
     <StyleWrap onClick={ssp} className="widget-tool-bar">
       <Space>
+        {renderErrorIcon(errInfo)}
         {renderedIcon()}
         {loadingIcon()}
         {linkageIcon()}

frontend/src/app/pages/DashBoardPage/pages/Board/slice/index.ts

@@ -238,6 +238,17 @@ const boardSlice = createSlice({
         pageNo: 1,
       };
     },
+    setWidgetErrInfo(
+      state,
+      action: PayloadAction<{
+        boardId: string;
+        widgetId: string;
+        errInfo?: string;
+      }>,
+    ) {
+      const { boardId, widgetId, errInfo } = action.payload;
+      state.widgetInfoRecord[boardId][widgetId].errInfo = errInfo;
+    },
     resetControlWidgets(
       state,
       action: PayloadAction<{

frontend/src/app/pages/DashBoardPage/pages/Board/slice/thunk.ts

@@ -13,7 +13,7 @@ import { ExecuteToken, ShareVizInfo } from 'app/pages/SharePage/slice/types';
 import ChartDataset from 'app/types/ChartDataset';
 import { RootState } from 'types';
 import { request } from 'utils/request';
-import { errorHandle } from 'utils/utils';
+import { errorHandle, getErrorMessage } from 'utils/utils';
 import { boardActions } from '.';
 import { getChartWidgetRequestParams } from '../../../utils';
 import { handleServerBoardAction } from './asyncActions';
@@ -265,8 +265,29 @@ export const getChartWidgetDataAsync = createAsyncThunk<
           pageInfo: widgetData.pageInfo,
         }),
       );
+      dispatch(
+        boardActions.setWidgetErrInfo({
+          boardId,
+          widgetId,
+          errInfo: undefined,
+        }),
+      );
     } catch (error) {
-      errorHandle(error);
+      dispatch(
+        boardActions.setWidgetErrInfo({
+          boardId,
+          widgetId,
+          errInfo: getErrorMessage(error),
+        }),
+      );
+
+      dispatch(
+        boardActions.setWidgetData({
+          id: widgetId,
+          columns: [],
+          rows: [],
+        } as WidgetData),
+      );
     }
     dispatch(
       boardActions.addFetchedItem({
@@ -344,8 +365,21 @@ export const getControllerOptions = createAsyncThunk<
         widgetData = { ...data, id: widget.id };
         dispatch(boardActions.setWidgetData(widgetData as WidgetData));
       }
+      dispatch(
+        boardActions.setWidgetErrInfo({
+          boardId,
+          widgetId,
+          errInfo: undefined,
+        }),
+      );
     } catch (error) {
-      errorHandle(error);
+      dispatch(
+        boardActions.setWidgetErrInfo({
+          boardId,
+          widgetId,
+          errInfo: getErrorMessage(error),
+        }),
+      );
     }
     dispatch(
       boardActions.addFetchedItem({

frontend/src/app/pages/DashBoardPage/pages/Board/slice/types.ts

@@ -189,6 +189,7 @@ export interface WidgetInfo {
   inLinking: boolean; //是否在触发联动
   selected: boolean;
   pageInfo: Partial<PageInfo>;
+  errInfo?: string;
   selectItems?: string[];
   parameters?: any;
 }

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/index.ts

@@ -235,6 +235,17 @@ const widgetInfoRecordSlice = createSlice({
       const { widgetId, pageInfo } = action.payload;
       state[widgetId].pageInfo = pageInfo || { pageNo: 1 };
     },
+    setWidgetErrInfo(
+      state,
+      action: PayloadAction<{
+        boardId?: string;
+        widgetId: string;
+        errInfo?: string;
+      }>,
+    ) {
+      const { widgetId, errInfo } = action.payload;
+      state[widgetId].errInfo = errInfo;
+    },
   },
   extraReducers: builder => {
     builder.addCase(getEditChartWidgetDataAsync.pending, (state, action) => {

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/thunk.ts

@@ -514,8 +514,26 @@ export const getEditChartWidgetDataAsync = createAsyncThunk<
           pageInfo: data.pageInfo,
         }),
       );
+      dispatch(
+        editWidgetInfoActions.setWidgetErrInfo({
+          widgetId,
+          errInfo: undefined,
+        }),
+      );
     } catch (error) {
-      errorHandle(error);
+      dispatch(
+        editWidgetInfoActions.setWidgetErrInfo({
+          widgetId,
+          errInfo: (error as any)?.message as any,
+        }),
+      );
+      dispatch(
+        editWidgetDataActions.setWidgetData({
+          id: widgetId,
+          columns: [],
+          rows: [],
+        } as WidgetData),
+      );
     }
     return null;
   },

frontend/src/utils/utils.ts

@@ -32,7 +32,20 @@ export function errorHandle(error) {
   }
   return error;
 }
-
+export function getErrorMessage(error) {
+  if (error?.response) {
+    const { response } = error as AxiosError;
+    switch (response?.status) {
+      case 401:
+        message.error({ key: '401', content: '未登录或会话过期，请重新登录' });
+        removeToken();
+        return '401';
+      default:
+        return response?.data.message || error.message;
+    }
+  }
+  return error?.message;
+}
 export function reduxActionErrorHandler(errorAction) {
   if (errorAction?.payload) {
     message.error(errorAction?.payload);
@@ -180,7 +193,7 @@ export const onDropTreeFn = ({ info, treeData, callback }) => {
   } else {
     //中间
     if (!dropArr[dropIndex].index && !dropArr[dropIndex + 1].index) {
-      index = dropArr[dropArr.length-1].index + 1;
+      index = dropArr[dropArr.length - 1].index + 1;
     } else {
       index = (dropArr[dropIndex].index + dropArr[dropIndex + 1].index) / 2;
     }