fix(msp): fix the bug when the stack is empty in the error details pa…

…ge (erda-project#2079)
erda-bot · Nov 23, 2021 · 2a8b426 · 2a8b426
1 parent 0eff240
commit 2a8b426
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/shell/app/locales/en.json b/shell/app/locales/en.json
@@ -2262,6 +2262,7 @@
     "no data": "no data",
     "no service is connected currently, click the button below to access the service": "no service is connected currently, click the button below to access the service",
     "no service is connected currently, if you deploy an application on the DevOps platform, the service will be displayed automatically": "no service is connected currently, if you deploy an application on the DevOps platform, the service will be displayed automatically",
+    "no stack": "no stack",
     "node list": "node list",
     "node traffic management": "node traffic management",
     "normal": "normal",

diff --git a/shell/app/locales/zh.json b/shell/app/locales/zh.json
@@ -2262,6 +2262,7 @@
     "no data": "暂无数据",
     "no service is connected currently, click the button below to access the service": "当前未接入任何服务，点击下方按钮即可接入服务",
     "no service is connected currently, if you deploy an application on the DevOps platform, the service will be displayed automatically": "当前未接入任何服务，在 DevOps 平台部署应用即可自动显示服务",
+    "no stack": "暂无堆栈信息",
     "node list": "节点列表",
     "node traffic management": "节点流量管理",
     "normal": "正常",

diff --git a/shell/app/modules/msp/monitor/error-insight/pages/errors/error-detail.tsx b/shell/app/modules/msp/monitor/error-insight/pages/errors/error-detail.tsx
@@ -13,16 +13,16 @@
 
 /* eslint-disable react-hooks/exhaustive-deps */
 import React from 'react';
-import { Button, Row, Col, Tooltip, Drawer, Spin } from 'antd';
+import { Button, Col, Drawer, Row, Spin, Tooltip } from 'antd';
 import TraceDetail from 'trace-insight/pages/trace-detail';
-import { Icon as CustomIcon, Copy, IF, EmptyHolder, SimpleLog } from 'common';
+import { Copy, EmptyHolder, Icon as CustomIcon, IF, SimpleLog } from 'common';
 import { useUpdate } from 'common/use-hooks';
-import { get, map, isEmpty } from 'lodash';
+import { get, isEmpty, map } from 'lodash';
 import moment from 'moment';
 import monitorErrorStore from 'error-insight/stores/error';
 import { useLoading } from 'core/stores/loading';
 import { useEffectOnce } from 'react-use';
-import { ToRight as IconToRight, ToLeft as IconToLeft, Down as IconDown, Up as IconUp } from '@icon-park/react';
+import { Down as IconDown, ToLeft as IconToLeft, ToRight as IconToRight, Up as IconUp } from '@icon-park/react';
 import i18n from 'i18n';
 
 import './error-detail.scss';
@@ -81,8 +81,10 @@ const ErrorDetail = () => {
     updater.showAllStacks(!showAllStacks);
   };
 
-  const getStackItem = (info: { stack: MONITOR_ERROR.IStacks }) => {
-    if (isEmpty(info.stack)) return null;
+  const getStackItem = (info?: { stack: MONITOR_ERROR.IStacks }) => {
+    if (!info || isEmpty(info?.stack)) {
+      return <EmptyHolder relative tip={i18n.t('msp:no stack')} />;
+    }
     const { className, methodName, line, index } = info.stack;
     return (
       <div key={index} className="stack-item">
@@ -290,13 +292,23 @@ const ErrorDetail = () => {
             <div className="content-block stacklist-container">
               <div className="content-title stacks-title">
                 {`${i18n.t('msp:error stack')}:   ${type}`}
-                <Button className="toggle-stacks" onClick={toggleShowAllStacks}>
-                  {showAllStacks ? <IconDown size="20px" className="mr-0" /> : <IconUp size="20px" className="mr-0" />}
-                </Button>
+                <IF check={stacks && stacks.length > 1}>
+                  <Button className="toggle-stacks" onClick={toggleShowAllStacks}>
+                    {showAllStacks ? (
+                      <IconDown size="20px" className="mr-0" />
+                    ) : (
+                      <IconUp size="20px" className="mr-0" />
+                    )}
+                  </Button>
+                </IF>
               </div>
               <div className="error-msg">{exceptionMsg}</div>
               <div className="stack-list">
-                {showAllStacks ? map(stacks || [], (item) => getStackItem(item)) : getStackItem((stacks || [])[0])}
+                {stacks?.length
+                  ? showAllStacks
+                    ? map(stacks || [], (item) => getStackItem(item))
+                    : getStackItem((stacks || [])[0])
+                  : getStackItem()}
                 <IF check={stacks && stacks.length > 1}>
                   <div className="stack-item omit-item" onClick={toggleShowAllStacks}>
                     {showAllStacks ? (