fix：修复部分缺陷问题 || fix: Fix some defects (#839)

Author: TianWuwt

ui/src/app.tsx

@@ -26,8 +26,13 @@ export const request: RequestConfig = {
     },
     errorHandler: (err) => {
       console.log('errorHandler', err);
+
+      const url = err?.config?.url || err?.request?.responseURL || '';
+
       if (err?.response?.status === 401) {
         location.href = '/#/login';
+      } else if (url.includes('/api/web/oceanbase/report')) {
+        console.log('Report data error, not showing message:', err);
       } else {
         message.error(err?.response?.data?.message || err.message);
       }

ui/src/components/MonitorComp/LineGraph.tsx

@@ -6,7 +6,7 @@ import { Line } from '@antv/g2plot';
 import { useInViewport, useUpdateEffect } from 'ahooks';
 import { Empty, Spin } from 'antd';
 import dayjs from 'dayjs';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 type MetricType = {
   description: string;
@@ -104,13 +104,16 @@ export default function LineGraph({
       },
       interactions: [{ type: 'marker-active' }, { type: 'brush' }],
     };
+
+    // 如果图表实例存在，先销毁它
     if (lineInstanceRef.current) {
-      // lineInstanceRef.current.update({ ...config });
-      lineInstanceRef.current.changeData(metricsData);
-    } else {
-      lineInstanceRef.current = new Line(id, { ...config });
-      lineInstanceRef.current.render();
+      lineInstanceRef.current.destroy();
+      lineInstanceRef.current = null;
     }
+
+    // 创建新的图表实例
+    lineInstanceRef.current = new Line(id, { ...config });
+    lineInstanceRef.current.render();
   };
 
   const lineInstanceDestroy = () => {
@@ -135,14 +138,12 @@ export default function LineGraph({
       }
 
       if (metricsData && metricsData.length > 0) {
-        if (isEmpty) {
-          setIsEmpty(false);
-          setIsloading(false);
-          return;
-        }
+        setIsEmpty(false);
+        setIsloading(false);
         lineInstanceRender(metricsData);
+      } else {
+        lineInstanceDestroy();
       }
-      setIsloading(false);
     },
     onError: () => {
       lineInstanceDestroy();
@@ -161,6 +162,13 @@ export default function LineGraph({
     }
   }, [inViewport]);
 
+  // 当ID变化时，重新检查视口状态
+  useUpdateEffect(() => {
+    if (inViewport && inViewportCount === 0) {
+      setInViewportCount(1);
+    }
+  }, [id, inViewport]);
+
   useUpdateEffect(() => {
     if (inViewportCount === 1 && !isRefresh) {
       queryMetrics(getQueryParms());
@@ -183,6 +191,32 @@ export default function LineGraph({
     }
   }, [labels, queryRange]);
 
+  // 监听ID变化，当tab切换导致ID变化时，重新初始化图表
+  useUpdateEffect(() => {
+    if (lineInstanceRef.current) {
+      lineInstanceDestroy();
+    }
+    // 重置inViewportCount，确保新tab能触发数据查询
+    setInViewportCount(0);
+    // 立即触发数据查询，不等待视口检测
+    if (!isRefresh) {
+      queryMetrics(getQueryParms());
+    }
+  }, [id]);
+
+  // 组件卸载时清理图表实例
+  useEffect(() => {
+    return () => {
+      if (lineInstanceRef.current) {
+        lineInstanceDestroy();
+      }
+      // 重置状态
+      setInViewportCount(0);
+      setIsEmpty(true);
+      setIsloading(true);
+    };
+  }, []);
+
   return (
     <div style={{ height: `${height}px` }}>
       <Spin spinning={isloading}>

ui/src/components/MonitorComp/index.tsx

@@ -46,65 +46,70 @@ export default function MonitorComp({
     defaultParams: [queryScope],
   });
 
-  // 生成tab列表和内容
-  const { tabList, contentList } = useMemo(() => {
-    const tabs =
+  // 生成tab列表
+  const tabList = useMemo(() => {
+    return (
       allMetrics?.map((container: any, index: number) => ({
         key: index.toString(),
         label: container?.name,
-      })) || [];
+      })) || []
+    );
+  }, [allMetrics]);
 
-    const contents: Record<string, React.ReactNode> = {};
+  // 生成当前激活tab的内容
+  const currentTabContent = useMemo(() => {
+    const currentContainer = allMetrics?.[parseInt(activeTabKey)];
+    if (!currentContainer) return null;
 
-    allMetrics?.forEach((container: any, index: number) => {
-      contents[index.toString()] = (
-        <div className={styles.monitorContainer}>
-          {container?.metricGroups?.map(
-            (graphContainer: any, graphIdx: number) => (
-              <Card className={styles.monitorItem} key={graphIdx}>
-                <div className={styles.graphHeader}>
-                  <IconTip
-                    tip={graphContainer.description}
-                    style={{ fontSize: 16 }}
-                    content={
-                      <span className={styles.graphHeaderText}>
-                        {graphContainer.name}
-                        {graphContainer.metrics[0]?.unit &&
-                          `(${graphContainer.metrics[0].unit}${
-                            (graphContainer.metrics[0].unit && type) ===
-                            'OVERVIEW'
-                              ? ','
-                              : ''
-                          }${
-                            type === 'OVERVIEW'
-                              ? graphContainer.metrics[0].key
-                              : ''
-                          })`}
-                      </span>
-                    }
-                  />
-                </div>
-                <LineGraph
-                  id={`monitor-${graphContainer.name.replace(/\s+/g, '')}`}
-                  isRefresh={isRefresh}
-                  queryRange={queryRange}
-                  metrics={graphContainer.metrics}
-                  labels={filterLabel}
-                  groupLabels={groupLabels}
-                  type={type}
-                  useFor={useFor}
-                  filterData={filterData}
-                  filterQueryMetric={filterQueryMetric}
+    return (
+      <div className={styles.monitorContainer}>
+        {currentContainer?.metricGroups?.map(
+          (graphContainer: any, graphIdx: number) => (
+            <Card className={styles.monitorItem} key={graphIdx}>
+              <div className={styles.graphHeader}>
+                <IconTip
+                  tip={graphContainer.description}
+                  style={{ fontSize: 16 }}
+                  content={
+                    <span className={styles.graphHeaderText}>
+                      {graphContainer.name}
+                      {graphContainer.metrics[0]?.unit &&
+                        `(${graphContainer.metrics[0].unit}${
+                          (graphContainer.metrics[0].unit && type) ===
+                          'OVERVIEW'
+                            ? ','
+                            : ''
+                        }${
+                          type === 'OVERVIEW'
+                            ? graphContainer.metrics[0].key
+                            : ''
+                        })`}
+                    </span>
+                  }
                 />
-              </Card>
-            ),
-          )}
-        </div>
-      );
-    });
-
-    return { tabList: tabs, contentList: contents };
+              </div>
+              <LineGraph
+                id={`monitor-${activeTabKey}-${graphContainer.name.replace(
+                  /\s+/g,
+                  '',
+                )}`}
+                isRefresh={isRefresh}
+                queryRange={queryRange}
+                metrics={graphContainer.metrics}
+                labels={filterLabel}
+                groupLabels={groupLabels}
+                type={type}
+                useFor={useFor}
+                filterData={filterData}
+                filterQueryMetric={filterQueryMetric}
+              />
+            </Card>
+          ),
+        )}
+      </div>
+    );
   }, [
+    activeTabKey,
     allMetrics,
     isRefresh,
     queryRange,
@@ -125,7 +130,7 @@ export default function MonitorComp({
           activeTabKey={activeTabKey}
           onTabChange={(key) => setActiveTabKey(key)}
         >
-          {contentList[activeTabKey] || (
+          {currentTabContent || (
             <div style={{ padding: 20, textAlign: 'center', color: '#999' }}>
               暂无数据
             </div>

ui/src/hook/usePublicKey.ts

@@ -7,15 +7,13 @@ export const usePublicKey = () => {
   const { publicKey, setPublicKey } = useModel('global');
 
   useEffect(() => {
-    if (!publicKey) {
-      getAppInfo()
-        .then(({ data }) => {
-          setPublicKey(data.publicKey);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    }
+    getAppInfo()
+      .then(({ data }) => {
+        setPublicKey(data.publicKey);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
   }, []);
 
   return publicKey;

ui/src/pages/Cluster/Detail/Connection/index.tsx

@@ -7,7 +7,7 @@ import { PageContainer } from '@ant-design/pro-components';
 import { useAccess, useParams } from '@umijs/max';
 import { useRequest } from 'ahooks';
 import { Button, Col, Row, Space, message } from 'antd';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import BasicInfo from '../Overview/BasicInfo';
 
 const ClusterConnection: React.FC = () => {
@@ -33,6 +33,33 @@ const ClusterConnection: React.FC = () => {
   });
 
   const [terminalId, setTerminalId] = useState<string>();
+
+  // 组件卸载时关闭连接
+  useEffect(() => {
+    return () => {
+      if (terminalId) {
+        // 这里可以调用关闭连接的API 通过设置terminalId为undefined来触发关闭
+        setTerminalId(undefined);
+      }
+    };
+  }, [terminalId, ns, name]);
+
+  // 监听路由变化，关闭连接
+  useEffect(() => {
+    const handleRouteChange = () => {
+      if (terminalId) {
+        setTerminalId(undefined);
+      }
+    };
+
+    // 监听 popstate 事件（浏览器前进后退）
+    window.addEventListener('popstate', handleRouteChange);
+
+    return () => {
+      window.removeEventListener('popstate', handleRouteChange);
+    };
+  }, [terminalId]);
+
   return (
     <PageContainer header={header()}>
       <link

ui/src/pages/Cluster/Detail/Tenant/index.tsx

@@ -50,14 +50,18 @@ export default function Tenant() {
           </Col>
         ) : null}
 
-        {tenantsList && (
+        {tenantsList && tenantsList.length > 0 && clusterDetail && (
           <Col span={24}>
             <MonitorComp
+              key={`monitor-${clusterName}-${tenantsList.length}`}
               queryRange={DEFAULT_QUERY_RANGE}
               queryScope="OBTENANT"
               groupLabels={['tenant_name']}
               useFor="tenant"
-              filterLabel={[{ key: 'ob_cluster_name', value: clusterName }]}
+              type="DETAIL"
+              filterLabel={[
+                { key: 'ob_cluster_name', value: clusterName || '' },
+              ]}
               filterQueryMetric={[
                 ...tenantsList.map((tenant) => ({
                   key: 'tenant_name' as API.LableKeys,

ui/src/services/index.ts

@@ -455,7 +455,16 @@ export async function queryMetricsReq({
               ).value || '';
           }
         } else {
-          item.name = metric.metric.name;
+          // 对于租户详情页面，需要区分不同租户的指标名称
+          if (useFor === 'tenant' && type === 'DETAIL') {
+            const tenantLabel = metric.metric.labels.find(
+              (label) => label.key === 'tenant_name',
+            );
+            const tenantName = tenantLabel?.value || '';
+            item.name = `${metric.metric.name} (${tenantName})`;
+          } else {
+            item.name = metric.metric.name;
+          }
         }
       });
     });