+
{messageView.msgId}
@@ -39,7 +39,7 @@ const DlqMessageDetailViewDialog = ({ ngDialogData }) => {
@@ -61,7 +61,7 @@ const DlqMessageDetailViewDialog = ({ ngDialogData }) => {
diff --git a/frontend-new/src/components/MessageDetailViewDialog.jsx b/frontend-new/src/components/MessageDetailViewDialog.jsx
index 09c72d4..144c3c6 100644
--- a/frontend-new/src/components/MessageDetailViewDialog.jsx
+++ b/frontend-new/src/components/MessageDetailViewDialog.jsx
@@ -16,16 +16,16 @@
*/
import React from 'react';
-import { Modal, Button, Typography, Descriptions, Tag, Spin, notification } from 'antd';
+import {Button, Descriptions, Modal, notification, Spin, Tag, Typography} from 'antd';
import moment from 'moment';
-import { ExclamationCircleOutlined, SyncOutlined } from '@ant-design/icons';
-import { useLanguage } from '../i18n/LanguageContext';
-import { remoteApi } from '../api/remoteApi/remoteApi'; // 确保这个路径正确
+import {SyncOutlined} from '@ant-design/icons';
+import {useLanguage} from '../i18n/LanguageContext';
+import {remoteApi} from '../api/remoteApi/remoteApi'; // 确保这个路径正确
-const { Text, Paragraph } = Typography;
+const {Text, Paragraph} = Typography;
-const MessageDetailViewDialog = ({ visible, onCancel, messageId, topic, onResendMessage }) => {
- const { t } = useLanguage();
+const MessageDetailViewDialog = ({visible, onCancel, messageId, topic, onResendMessage}) => {
+ const {t} = useLanguage();
const [loading, setLoading] = React.useState(true);
const [messageDetail, setMessageDetail] = React.useState(null);
const [error, setError] = React.useState(null);
@@ -89,17 +89,21 @@ const MessageDetailViewDialog = ({ visible, onCancel, messageId, topic, onResend
>
{error && (
-
+
{error}
)}
{messageDetail ? ( // 确保 messageDetail 存在时才渲染内容
<>
{/* 消息信息部分 */}
- {t.MESSAGE_INFO}} bordered column={2} size="small" style={{ marginBottom: 20 }}>
- {messageDetail.messageView.topic}
- {messageDetail.messageView.msgId}
- {messageDetail.messageView.storeHost}
+ {t.MESSAGE_INFO}} bordered column={2} size="small"
+ style={{marginBottom: 20}}>
+ {messageDetail.messageView.topic}
+ {messageDetail.messageView.msgId}
+ {messageDetail.messageView.storeHost}
{messageDetail.messageView.bornHost}
{moment(messageDetail.messageView.storeTimestamp).format("YYYY-MM-DD HH:mm:ss")}
@@ -108,26 +112,33 @@ const MessageDetailViewDialog = ({ visible, onCancel, messageId, topic, onResend
{moment(messageDetail.messageView.bornTimestamp).format("YYYY-MM-DD HH:mm:ss")}
{messageDetail.messageView.queueId}
- {messageDetail.messageView.queueOffset}
- {messageDetail.messageView.storeSize} bytes
- {messageDetail.messageView.reconsumeTimes}
+ {messageDetail.messageView.queueOffset}
+ {messageDetail.messageView.storeSize} bytes
+ {messageDetail.messageView.reconsumeTimes}
{messageDetail.messageView.bodyCRC}
{messageDetail.messageView.sysFlag}
{messageDetail.messageView.flag}
- {messageDetail.messageView.preparedTransactionOffset}
+ {messageDetail.messageView.preparedTransactionOffset}
{/* 消息属性部分 */}
{Object.keys(messageDetail.messageView.properties).length > 0 && (
- {t.MESSAGE_PROPERTIES}} bordered column={1} size="small" style={{ marginBottom: 20 }}>
+ {t.MESSAGE_PROPERTIES}} bordered column={1}
+ size="small" style={{marginBottom: 20}}>
{Object.entries(messageDetail.messageView.properties).map(([key, value]) => (
- {value}
+ {value}
))}
)}
{/* 消息体部分 */}
- {t.MESSAGE_BODY}} bordered column={1} size="small" style={{ marginBottom: 20 }}>
+ {t.MESSAGE_BODY}} bordered column={1} size="small"
+ style={{marginBottom: 20}}>
0 ? (
<>
{t.MESSAGE_TRACKING}
-
+
{messageDetail.messageTrackList.map((track, index) => (
-
+
{track.consumerGroup}
@@ -165,10 +177,10 @@ const MessageDetailViewDialog = ({ visible, onCancel, messageId, topic, onResend
}
+ icon={ }
onClick={() => onResendMessage(messageDetail.messageView, track.consumerGroup)}
size="small"
- style={{ marginRight: 8 }}
+ style={{marginRight: 8}}
>
{t.RESEND_MESSAGE}
@@ -181,7 +193,10 @@ const MessageDetailViewDialog = ({ visible, onCancel, messageId, topic, onResend
ellipsis={{
rows: 2, // 默认显示2行
expandable: true,
- symbol: {t.READ_MORE} , // 蓝色展开文本
+ symbol: {t.READ_MORE} , // 蓝色展开文本
}}
>
{track.exceptionDesc}
@@ -198,7 +213,8 @@ const MessageDetailViewDialog = ({ visible, onCancel, messageId, topic, onResend
>
) : (
// 当 messageDetail 为 null 时,可以显示一个占位符或者不显示内容
- !loading && !error && {t.NO_MESSAGE_DETAIL_AVAILABLE}
+ !loading && !error &&
+ {t.NO_MESSAGE_DETAIL_AVAILABLE}
)}
diff --git a/frontend-new/src/components/MessageTraceDetailViewDialog.jsx b/frontend-new/src/components/MessageTraceDetailViewDialog.jsx
index f3b09da..9477a4b 100644
--- a/frontend-new/src/components/MessageTraceDetailViewDialog.jsx
+++ b/frontend-new/src/components/MessageTraceDetailViewDialog.jsx
@@ -15,15 +15,15 @@
* limitations under the License.
*/
-import React, { useEffect, useRef } from 'react';
-import { Form, Input, Typography, Collapse, Table, Tag } from 'antd';
+import React, {useEffect, useRef} from 'react';
+import {Collapse, Form, Input, Table, Tag, Typography} from 'antd';
import moment from 'moment';
-import { useLanguage } from '../i18n/LanguageContext';
+import {useLanguage} from '../i18n/LanguageContext';
import Paragraph from "antd/es/skeleton/Paragraph";
import * as echarts from 'echarts'; // Import ECharts
-const { Text } = Typography;
-const { Panel } = Collapse;
+const {Text} = Typography;
+const {Panel} = Collapse;
// Constants for styling and formatting, derived from the example
const SUCCESS_COLOR = '#75d874';
@@ -36,8 +36,8 @@ const TIME_FORMAT_PATTERN = "YYYY-MM-DD HH:mm:ss.SSS";
const DEFAULT_DISPLAY_DURATION = 10 * 1000;
const TRANSACTION_CHECK_COST_TIME = 50; // transactionTraceNode do not have costTime, assume it cost 50ms
-const MessageTraceDetailViewDialog = ({ ngDialogData }) => {
- const { t } = useLanguage();
+const MessageTraceDetailViewDialog = ({ngDialogData}) => {
+ const {t} = useLanguage();
const messageTraceGraphRef = useRef(null);
const producerNode = ngDialogData?.producerNode;
@@ -125,6 +125,7 @@ const MessageTraceDetailViewDialog = ({ ngDialogData }) => {
}
return `Cost Time: ${formatCostTimeStr(costTime)} `
}
+
function buildTimeStamp(timestamp) {
if (timestamp < 0) {
return 'N/A';
@@ -323,94 +324,181 @@ const MessageTraceDetailViewDialog = ({ ngDialogData }) => {
// ... (rest of your existing component code)
const transactionColumns = [
- { title: t.TIMESTAMP, dataIndex: 'beginTimestamp', key: 'beginTimestamp', align: 'center', render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss.SSS') },
- { title: t.TRANSACTION_STATE, dataIndex: 'transactionState', key: 'transactionState', align: 'center', render: (text) => {text} },
- { title: t.FROM_TRANSACTION_CHECK, dataIndex: 'fromTransactionCheck', key: 'fromTransactionCheck', align: 'center', render: (text) => (text ? {t.YES} : {t.NO} ) },
- { title: t.CLIENT_HOST, dataIndex: 'clientHost', key: 'clientHost', align: 'center' },
- { title: t.STORE_HOST, dataIndex: 'storeHost', key: 'storeHost', align: 'center' },
+ {
+ title: t.TIMESTAMP,
+ dataIndex: 'beginTimestamp',
+ key: 'beginTimestamp',
+ align: 'center',
+ render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss.SSS')
+ },
+ {
+ title: t.TRANSACTION_STATE,
+ dataIndex: 'transactionState',
+ key: 'transactionState',
+ align: 'center',
+ render: (text) => {text}
+ },
+ {
+ title: t.FROM_TRANSACTION_CHECK,
+ dataIndex: 'fromTransactionCheck',
+ key: 'fromTransactionCheck',
+ align: 'center',
+ render: (text) => (text ? {t.YES} : {t.NO} )
+ },
+ {title: t.CLIENT_HOST, dataIndex: 'clientHost', key: 'clientHost', align: 'center'},
+ {title: t.STORE_HOST, dataIndex: 'storeHost', key: 'storeHost', align: 'center'},
];
const consumeColumns = [
- { title: t.BEGIN_TIMESTAMP, dataIndex: 'beginTimestamp', key: 'beginTimestamp', align: 'center', render: (text) => text < 0 ? 'N/A' : moment(text).format('YYYY-MM-DD HH:mm:ss.SSS') },
- { title: t.END_TIMESTAMP, dataIndex: 'endTimestamp', key: 'endTimestamp', align: 'center', render: (text) => text < 0 ? 'N/A' : moment(text).format('YYYY-MM-DD HH:mm:ss.SSS') },
- { title: t.COST_TIME, dataIndex: 'costTime', key: 'costTime', align: 'center', render: (text) => text < 0 ? 'N/A' : `${text === 0 ? '<1' : text}ms` },
- { title: t.STATUS, dataIndex: 'status', key: 'status', align: 'center', render: (text) => {text} },
- { title: t.RETRY_TIMES, dataIndex: 'retryTimes', key: 'retryTimes', align: 'center', render: (text) => text < 0 ? 'N/A' : text },
- { title: t.CLIENT_HOST, dataIndex: 'clientHost', key: 'clientHost', align: 'center' },
- { title: t.STORE_HOST, dataIndex: 'storeHost', key: 'storeHost', align: 'center' },
+ {
+ title: t.BEGIN_TIMESTAMP,
+ dataIndex: 'beginTimestamp',
+ key: 'beginTimestamp',
+ align: 'center',
+ render: (text) => text < 0 ? 'N/A' : moment(text).format('YYYY-MM-DD HH:mm:ss.SSS')
+ },
+ {
+ title: t.END_TIMESTAMP,
+ dataIndex: 'endTimestamp',
+ key: 'endTimestamp',
+ align: 'center',
+ render: (text) => text < 0 ? 'N/A' : moment(text).format('YYYY-MM-DD HH:mm:ss.SSS')
+ },
+ {
+ title: t.COST_TIME,
+ dataIndex: 'costTime',
+ key: 'costTime',
+ align: 'center',
+ render: (text) => text < 0 ? 'N/A' : `${text === 0 ? '<1' : text}ms`
+ },
+ {
+ title: t.STATUS,
+ dataIndex: 'status',
+ key: 'status',
+ align: 'center',
+ render: (text) => {text}
+ },
+ {
+ title: t.RETRY_TIMES,
+ dataIndex: 'retryTimes',
+ key: 'retryTimes',
+ align: 'center',
+ render: (text) => text < 0 ? 'N/A' : text
+ },
+ {title: t.CLIENT_HOST, dataIndex: 'clientHost', key: 'clientHost', align: 'center'},
+ {title: t.STORE_HOST, dataIndex: 'storeHost', key: 'storeHost', align: 'center'},
];
return (
-
-
+
+
- {t.MESSAGE_TRACE_GRAPH}} key="messageTraceGraph">
-
+
{t.MESSAGE_TRACE_GRAPH}} key="messageTraceGraph">
+
{/* ECharts message trace graph will be rendered here */}
{(!producerNode && subscriptionNodeList.length === 0) && (
- {t.TRACE_GRAPH_PLACEHOLDER}
+ {t.TRACE_GRAPH_PLACEHOLDER}
)}
-
+
- {t.SEND_MESSAGE_TRACE}} key="sendMessageTrace">
+ {t.SEND_MESSAGE_TRACE}} key="sendMessageTrace">
{!producerNode ? (
- {t.NO_PRODUCER_TRACE_DATA}
+ {t.NO_PRODUCER_TRACE_DATA}
) : (
-
-
- {t.SEND_MESSAGE_INFO} : ( {t.MESSAGE_ID} {producerNode.msgId} )
+
+
+ {t.SEND_MESSAGE_INFO} : ( {t.MESSAGE_ID} {producerNode.msgId} )