(rocketmq-dashboard) branch rocketmq-studio updated: fix(ui): make instance remark sorting null-safe (#1331)

[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 8f064715 fix(ui): make instance remark sorting null-safe (#1331)
8f064715 is described below

commit 8f0647154a96beace670d4f6c6eb83c6beb165cb
Author: 0 <1939455...@qq.com>
AuthorDate: Mon Aug 10 20:39:10 2026 +0800

    fix(ui): make instance remark sorting null-safe (#1331)
---
 web/src/api/instance.ts                            |  2 +-
 .../pages/instance/__tests__/InstancePage.test.tsx | 25 ++++++++++++++++++++--
 web/src/pages/instance/index.tsx                   |  6 +++---
 web/src/services/instanceService.ts                |  2 +-
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/web/src/api/instance.ts b/web/src/api/instance.ts
index 4268ae7c..0bc7e015 100644
--- a/web/src/api/instance.ts
+++ b/web/src/api/instance.ts
@@ -23,7 +23,7 @@ export type InstanceVendor = 'APACHE' | 'ALIYUN' | 'TENCENT';
 export interface Instance {
   id: string;
   name: string;
-  remark: string;
+  remark: string | null;
   type: 'PROXY' | 'DIRECT';
   endpoint: string;
   vendor?: InstanceVendor;
diff --git a/web/src/pages/instance/__tests__/InstancePage.test.tsx 
b/web/src/pages/instance/__tests__/InstancePage.test.tsx
index 6a628f9f..5e8daeb3 100644
--- a/web/src/pages/instance/__tests__/InstancePage.test.tsx
+++ b/web/src/pages/instance/__tests__/InstancePage.test.tsx
@@ -48,10 +48,15 @@ beforeAll(() => {
   });
 });
 
-const instance = (id: string, name: string, type: Instance['type'] = 'PROXY'): 
Instance => ({
+const instance = (
+  id: string,
+  name: string,
+  type: Instance['type'] = 'PROXY',
+  remark: Instance['remark'] = '',
+): Instance => ({
   id,
   name,
-  remark: '',
+  remark,
   type,
   endpoint: `${name}:8080`,
   topicCount: 1,
@@ -205,4 +210,20 @@ describe('InstancePage', () => {
     await user.click(within(dialog).getByRole('tab', { name: /Aliyun 版/ }));
     expect(within(dialog).getByText(/云凭据与云上实例完成接入/)).toBeInTheDocument();
   });
+
+  it('sorts and renders instances without remarks', async () => {
+    const user = userEvent.setup();
+    vi.mocked(instanceService.listInstances).mockResolvedValue([
+      instance('no-remark', 'instance-without-remark', 'PROXY', null),
+      instance('with-remark', 'instance-with-remark', 'PROXY', 'production'),
+    ]);
+    renderPage();
+
+    const name = await screen.findByText('instance-without-remark');
+    expect(within(name.closest('tr')!).getByText('-')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('columnheader', { name: /备注/ }));
+    expect(screen.getByText('instance-without-remark')).toBeInTheDocument();
+    expect(screen.getByText('instance-with-remark')).toBeInTheDocument();
+  });
 });
diff --git a/web/src/pages/instance/index.tsx b/web/src/pages/instance/index.tsx
index 90a84a6b..d163300d 100644
--- a/web/src/pages/instance/index.tsx
+++ b/web/src/pages/instance/index.tsx
@@ -275,10 +275,10 @@ const InstancePage = () => {
       dataIndex: 'remark',
       key: 'remark',
       width: 240,
-      sorter: (a, b) => a.remark.localeCompare(b.remark),
-      render: (remark: string) => (
+      sorter: (a, b) => (a.remark ?? '').localeCompare(b.remark ?? ''),
+      render: (remark: string | null) => (
         <Text type="secondary" style={{ fontSize: 13 }}>
-          {remark}
+          {remark || '-'}
         </Text>
       ),
     },
diff --git a/web/src/services/instanceService.ts 
b/web/src/services/instanceService.ts
index 1f7687f6..cde0cbb7 100644
--- a/web/src/services/instanceService.ts
+++ b/web/src/services/instanceService.ts
@@ -23,7 +23,7 @@ export async function listInstances(query: InstanceQuery = 
{}): Promise<Instance
         (instance) =>
           !search ||
           [instance.name, instance.endpoint, instance.remark].some((value) =>
-            value.toLowerCase().includes(search),
+            value?.toLowerCase().includes(search),
           ),
       )
       .map(copyInstance);