Skip to content

Commit 118209d

Browse files
TianWuwtTianWuwt
authored
fix：修复自测问题 || fix: Fix the self-test problem (#823)
1 parent 445f081 commit 118209d

File tree

6 files changed

+212
-181
lines changed

6 files changed

+212
-181
lines changed

‎ui/src/components/DownloadModal.tsx‎

Lines changed: 34 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { attachment, job } from '@/api';
1+
import { job } from '@/api';
2+
import { downloadFile } from '@/utils/export';
23
import { LoadingOutlined } from '@ant-design/icons';
34
import { findByValue } from '@oceanbase/util';
45
import { useRequest } from 'ahooks';
56
import { Alert, Button, Modal, Spin, message } from 'antd';
6-
import { useState } from 'react';
7+
import { useEffect, useState } from 'react';
78

89
interface DownloadModalProps {
910
visible: boolean;
@@ -14,6 +15,7 @@ interface DownloadModalProps {
1415
attachmentValue: string;
1516
jobValue?: any;
1617
errorLogs?: any;
18+
onJobDeleted?: () => void; // 新增：job被删除时的回调
1719
}
1820

1921
export default function DownloadModal({
@@ -25,90 +27,32 @@ export default function DownloadModal({
2527
attachmentValue,
2628
jobValue,
2729
errorLogs,
30+
onJobDeleted,
2831
}: DownloadModalProps) {
29-
const [retryCount, setRetryCount] = useState(0);
30-
const [downloadTimeout, setDownloadTimeout] = useState<NodeJS.Timeout | null>(
31-
null,
32-
);
3332
const [showErrorDetails, setShowErrorDetails] = useState(false);
3433

35-
// 集群日志下载
36-
const { run: downloadAttachment, loading: downloadLoading } = useRequest(
37-
attachment.downloadAttachment,
38-
{
39-
manual: true,
40-
onSuccess: (data) => {
41-
// 处理zip文件下载
42-
if (data) {
43-
try {
44-
// 检查数据大小
45-
if (data.size === 0) {
46-
message.error('下载的文件为空，请重试');
47-
return;
48-
}
49-
50-
// 创建Blob对象 - 使用tar.gz的MIME类型
51-
const blob = new Blob([data], { type: 'application/gzip' });
52-
53-
// 检查Blob大小
54-
if (blob.size === 0) {
55-
message.error('文件内容为空，请重试');
56-
return;
57-
}
58-
59-
// 创建下载链接
60-
const url = window.URL.createObjectURL(blob);
61-
const link = document.createElement('a');
62-
link.href = url;
63-
64-
// 设置文件名
65-
const fileName = `${attachmentValue}`;
66-
link.download = fileName;
67-
68-
// 触发下载
69-
document.body.appendChild(link);
70-
link.click();
71-
72-
// 清理
73-
document.body.removeChild(link);
74-
window.URL.revokeObjectURL(url);
75-
76-
// 显示成功消息
77-
message.success('文件下载成功');
78-
// 清除超时和重试计数
79-
if (downloadTimeout) {
80-
clearTimeout(downloadTimeout);
81-
setDownloadTimeout(null);
82-
}
83-
setRetryCount(0);
84-
} catch (error) {
85-
message.error('下载文件失败，请重试');
86-
// 增加重试计数
87-
setRetryCount((prev) => prev + 1);
88-
}
89-
} else {
90-
message.error('下载数据为空');
91-
// 增加重试计数
92-
setRetryCount((prev) => prev + 1);
93-
}
94-
onOk();
95-
},
96-
onError: () => {
97-
message.error('下载失败，请重试');
98-
// 增加重试计数
99-
setRetryCount((prev) => prev + 1);
100-
// 清除超时
101-
if (downloadTimeout) {
102-
clearTimeout(downloadTimeout);
103-
setDownloadTimeout(null);
104-
}
105-
},
106-
},
107-
);
34+
// 当弹窗关闭时清空内部状态
35+
useEffect(() => {
36+
if (!visible) {
37+
setShowErrorDetails(false);
38+
}
39+
}, [visible]);
40+
41+
// 直接触发浏览器下载
42+
const handleDownload = () => {
43+
if (attachmentValue) {
44+
downloadFile(attachmentValue);
45+
message.success('开始下载文件');
46+
onOk();
47+
} else {
48+
message.error('文件ID不存在');
49+
}
50+
};
10851

10952
const { run: deleteJob } = useRequest(job.deleteJob, {
11053
manual: true,
11154
onSuccess: () => {
55+
onJobDeleted?.();
11256
onCancel();
11357
},
11458
});
@@ -148,27 +92,8 @@ export default function DownloadModal({
14892
type="success"
14993
showIcon
15094
action={
151-
<Button
152-
size="small"
153-
type="link"
154-
loading={downloadLoading}
155-
onClick={() => {
156-
// 清除之前的超时
157-
if (downloadTimeout) {
158-
clearTimeout(downloadTimeout);
159-
}
160-
161-
// 设置下载超时（5分钟）
162-
const timeout = setTimeout(() => {
163-
message.error('下载超时，请重试');
164-
setRetryCount(0);
165-
}, 5 * 60 * 1000);
166-
setDownloadTimeout(timeout);
167-
168-
downloadAttachment(attachmentValue);
169-
}}
170-
>
171-
{retryCount > 0 ? `重试下载 (${retryCount})` : '下载链接'}
95+
<Button size="small" type="link" onClick={handleDownload}>
96+
下载链接
17297
</Button>
17398
}
17499
/>
@@ -241,14 +166,20 @@ export default function DownloadModal({
241166

242167
return (
243168
<Modal
244-
title={`${title}${findByValue(modalContent, diagnoseStatus).label}`}
169+
title={`${title}${
170+
findByValue(modalContent, diagnoseStatus).label || '中...'
171+
}`}
245172
open={visible}
246173
onOk={onOk}
247-
onCancel={() => deleteJob(jobValue?.namespace, jobValue?.name)}
174+
onCancel={() => {
175+
deleteJob(jobValue?.namespace, jobValue?.name);
176+
}}
248177
footer={
249178
diagnoseStatus === 'running' ? (
250179
<Button
251-
onClick={() => deleteJob(jobValue?.namespace, jobValue?.name)}
180+
onClick={() => {
181+
deleteJob(jobValue?.namespace, jobValue?.name);
182+
}}
252183
>
253184
取消
254185
</Button>

‎ui/src/components/MonitorComp/index.tsx‎

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useRequest } from 'ahooks';
22
import { Card, Row } from 'antd';
33

44
import { getAllMetrics } from '@/services';
5-
import { useState } from 'react';
5+
import { useMemo, useState } from 'react';
66
import IconTip from '../IconTip';
77
import LineGraph from './LineGraph';
88
import styles from './index.less';
@@ -45,66 +45,76 @@ export default function MonitorComp({
4545
const { data: allMetrics } = useRequest(getAllMetrics, {
4646
defaultParams: [queryScope],
4747
});
48-
const { data: allMetrics2 } = useRequest(getAllMetrics, {
49-
defaultParams: ['OBTENANT_OVERVIEW'],
50-
});
5148

52-
const tabList =
53-
allMetrics2?.concat(allMetrics)?.map((container: any, index: number) => ({
54-
key: index.toString(),
55-
label: container?.name,
56-
})) || [];
49+
// 生成tab列表和内容
50+
const { tabList, contentList } = useMemo(() => {
51+
const tabs =
52+
allMetrics?.map((container: any, index: number) => ({
53+
key: index.toString(),
54+
label: container?.name,
55+
})) || [];
5756

58-
// 动态生成内容列表
59-
const contentList: Record<string, React.ReactNode> = {};
57+
const contents: Record<string, React.ReactNode> = {};
6058

61-
allMetrics?.concat(allMetrics2)?.forEach((container: any, index: number) => {
62-
contentList[index.toString()] = (
63-
<div className={styles.monitorContainer}>
64-
{container?.metricGroups?.map(
65-
(graphContainer: any, graphIdx: number) => (
66-
<Card className={styles.monitorItem} key={graphIdx}>
67-
<div className={styles.graphHeader}>
68-
<IconTip
69-
tip={graphContainer.description}
70-
style={{ fontSize: 16 }}
71-
content={
72-
<span className={styles.graphHeaderText}>
73-
{graphContainer.name}
74-
{graphContainer.metrics[0].unit &&
75-
`(
76-
${graphContainer.metrics[0].unit}
77-
${
78-
(graphContainer.metrics[0].unit && type) === 'OVERVIEW'
79-
? ','
80-
: ''
81-
}
82-
${
83-
type === 'OVERVIEW' ? graphContainer.metrics[0].key : ''
84-
}
85-
)`}
86-
</span>
87-
}
59+
allMetrics?.forEach((container: any, index: number) => {
60+
contents[index.toString()] = (
61+
<div className={styles.monitorContainer}>
62+
{container?.metricGroups?.map(
63+
(graphContainer: any, graphIdx: number) => (
64+
<Card className={styles.monitorItem} key={graphIdx}>
65+
<div className={styles.graphHeader}>
66+
<IconTip
67+
tip={graphContainer.description}
68+
style={{ fontSize: 16 }}
69+
content={
70+
<span className={styles.graphHeaderText}>
71+
{graphContainer.name}
72+
{graphContainer.metrics[0]?.unit &&
73+
`(${graphContainer.metrics[0].unit}${
74+
(graphContainer.metrics[0].unit && type) ===
75+
'OVERVIEW'
76+
? ','
77+
: ''
78+
}${
79+
type === 'OVERVIEW'
80+
? graphContainer.metrics[0].key
81+
: ''
82+
})`}
83+
</span>
84+
}
85+
/>
86+
</div>
87+
<LineGraph
88+
id={`monitor-${graphContainer.name.replace(/\s+/g, '')}`}
89+
isRefresh={isRefresh}
90+
queryRange={queryRange}
91+
metrics={graphContainer.metrics}
92+
labels={filterLabel}
93+
groupLabels={groupLabels}
94+
type={type}
95+
useFor={useFor}
96+
filterData={filterData}
97+
filterQueryMetric={filterQueryMetric}
8898
/>
89-
</div>
90-
<LineGraph
91-
id={`monitor-${graphContainer.name.replace(/\s+/g, '')}`}
92-
isRefresh={isRefresh}
93-
queryRange={queryRange}
94-
metrics={graphContainer.metrics}
95-
labels={filterLabel}
96-
groupLabels={groupLabels}
97-
type={type}
98-
useFor={useFor}
99-
filterData={filterData}
100-
filterQueryMetric={filterQueryMetric}
101-
/>
102-
</Card>
103-
),
104-
)}
105-
</div>
106-
);
107-
});
99+
</Card>
100+
),
101+
)}
102+
</div>
103+
);
104+
});
105+
106+
return { tabList: tabs, contentList: contents };
107+
}, [
108+
allMetrics,
109+
isRefresh,
110+
queryRange,
111+
filterLabel,
112+
groupLabels,
113+
type,
114+
useFor,
115+
filterData,
116+
filterQueryMetric,
117+
]);
108118

109119
return (
110120
<Row style={{ marginTop: 16 }}>

‎ui/src/pages/Alert/Event/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ export default function Event() {
4646
const { run: getJob } = useRequest(job.getJob, {
4747
manual: true,
4848
onSuccess: ({ data }) => {
49-
setAttachmentValue(data?.result?.attachmentId);
50-
setDiagnoseStatus(data?.status);
51-
setErrorLogs(data?.result?.output);
49+
setAttachmentValue(data?.result?.attachmentId || '');
50+
setDiagnoseStatus(data?.status || '');
51+
setErrorLogs(data?.result?.output || '');
5252
if (data?.status !== 'successful' && data?.status !== 'failed') {
5353
setTimeout(() => {
5454
getJob(jobValue?.namespace, jobValue?.name);
@@ -276,6 +276,7 @@ export default function Event() {
276276
attachmentValue={attachmentValue}
277277
jobValue={jobValue}
278278
errorLogs={errorLogs}
279+
onJobDeleted={() => {}} // Alert页面不需要轮询，传空函数
279280
/>
280281
</Space>
281282
);

0 commit comments

Comments
 (0)