(rocketmq-dashboard) branch rocketmq-studio updated: fix(web): load the trace payload when the Verify tab is opened directly (#4910)

[lizhimin]

This is an automated email from the ASF dual-hosted git repository.

lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git


The following commit(s) were added to refs/heads/rocketmq-studio by this push:
     new e60b17f28 fix(web): load the trace payload when the Verify tab is 
opened directly (#4910)
e60b17f28 is described below

commit e60b17f280978dcbbb0f1b2e61b471f1b7ed2c1b
Author: Apulupie <167634780+frun...@users.noreply.github.com>
AuthorDate: Thu Oct 1 17:25:44 2026 +0800

    fix(web): load the trace payload when the Verify tab is opened directly 
(#4910)
---
 .../pages/instance/__tests__/MessagePage.test.tsx  | 39 ++++++++++++++++++++++
 web/src/pages/instance/message.tsx                 |  8 +++--
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/instance/__tests__/MessagePage.test.tsx 
b/web/src/pages/instance/__tests__/MessagePage.test.tsx
index ddbcc8f30..9ad05cce8 100644
--- a/web/src/pages/instance/__tests__/MessagePage.test.tsx
+++ b/web/src/pages/instance/__tests__/MessagePage.test.tsx
@@ -588,6 +588,45 @@ describe('Message page query history', () => {
     ).toBeInTheDocument();
   });
 
+  it('loads the trace payload when the Verify tab is opened directly from 
Content', async () => {
+    
messageServiceMocks.queryMessages.mockResolvedValue([createMessage('MID-VERIFY')]);
+    messageServiceMocks.getMessageTrace.mockResolvedValue({
+      nodes: [
+        {
+          title: 'Producer 发送',
+          timestamp: '2026-07-31T00:00:00.000Z',
+          costTime: 5,
+          status: 'finish',
+          description: 'producer sent the message',
+        },
+      ],
+      consumerStatus: [
+        {
+          group: 'cg-billing',
+          deliveryStatus: 'failed',
+          consumeTime: '2026-07-31T00:00:05.000Z',
+          retryCount: 2,
+        },
+      ],
+    });
+    const user = userEvent.setup({ pointerEventsCheck: 0 });
+    renderWithProviders(<MessagePage />);
+
+    await user.click(screen.getByText('按 Message ID'));
+    await user.click(lastElement(screen.getAllByRole('combobox')));
+    await user.click(lastElement(await screen.findAllByText('order-create')));
+    await user.type(screen.getByPlaceholderText('输入 Message ID'), 
'MID-VERIFY');
+    await user.click(screen.getByRole('button', { name: /^search查询$/ }));
+
+    expect(await screen.findByText('MID-VERIFY')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /详情/ }));
+    expect(await screen.findByText('消息体')).toBeInTheDocument();
+
+    // Switch straight to Verify without visiting Trace: the consumer-status 
table must load.
+    await user.click(screen.getByRole('tab', { name: '验证' }));
+    expect(await screen.findByText('cg-billing')).toBeInTheDocument();
+  });
+
   it('renders placeholders on the detail panel when the storage location is 
unknown', async () => {
     const user = userEvent.setup({ pointerEventsCheck: 0 });
     messageServiceMocks.queryMessages.mockResolvedValue([
diff --git a/web/src/pages/instance/message.tsx 
b/web/src/pages/instance/message.tsx
index 664953e15..019b294e9 100644
--- a/web/src/pages/instance/message.tsx
+++ b/web/src/pages/instance/message.tsx
@@ -658,6 +658,10 @@ const MessagePageContent = ({
     }
   };
 
+  // Both tabs render halves of the trace payload — Trace draws the nodes, 
Verify draws the
+  // consumerStatus table — so a modal opened or switched straight onto either 
one must fetch it.
+  const rendersTracePayload = (tab: string) => tab === 'trace' || tab === 
'consumer';
+
   const openDetail = (record: MessageRecord, tab = 'content') => {
     traceGenerationRef.current += 1;
     setSelectedMsg(record);
@@ -666,12 +670,12 @@ const MessagePageContent = ({
     setTraceData(null);
     setTraceLoading(false);
     setTraceError(null);
-    if (tab === 'trace') void loadMessageTrace(record);
+    if (rendersTracePayload(tab)) void loadMessageTrace(record);
   };
 
   const handleModalTabChange = (tab: string) => {
     setModalTab(tab);
-    if (tab === 'trace' && selectedMsg) void loadMessageTrace(selectedMsg);
+    if (rendersTracePayload(tab) && selectedMsg) void 
loadMessageTrace(selectedMsg);
   };
 
   const runTraceQuery = async () => {