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 6e55425c0 fix(web): render the consumer delay in the console language
(#4812)
6e55425c0 is described below
commit 6e55425c059acc2b9ed44157305922fb11f868e4
Author: Wang1rrr <[email protected]>
AuthorDate: Thu Sep 24 18:18:00 2026 +0800
fix(web): render the consumer delay in the console language (#4812)
fix(web): render the consumer delay in the console language
consumer.tsx carried its own module-scoped copy of formatDelay that only
ever produced
Chinese unit suffixes, shadowing the language-aware formatDelay in
utils/format that the
rest of the app uses. The consumer-group table's delay column and the group
drawer's delay
field therefore stayed Chinese in an English console, while every other
duration on the same
page came out as "22h 55m".
Delete the copy and import the shared one, passing the lang the page
already destructures
from useLang(). The Chinese output is unchanged - the two implementations
had the same unit
order, the same three-unit cap and the same zero case - and the shared
version adds the
non-finite guard, so a NaN delay now renders "-" instead of a zero duration.
Adds a case that puts the console in English and asserts the fixture's
delaySeconds: 3
renders as "3s" rather than its Chinese form. Verified sensitive: pinning
the lang argument
back to 'zh' makes it fail.
---
.../pages/instance/__tests__/ConsumerPage.test.tsx | 15 ++++++++++
web/src/pages/instance/consumer.tsx | 32 +++-------------------
2 files changed, 19 insertions(+), 28 deletions(-)
diff --git a/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
b/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
index 09bcb39fc..4e371a1a9 100644
--- a/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
+++ b/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
@@ -1707,4 +1707,19 @@ describe('Consumer page', () => {
expect(within(secondDialog).getByLabelText('重试队列数')).toHaveValue('4');
expect(within(secondDialog).getByLabelText('最大重试次数')).toHaveValue('12');
});
+
+ it('renders the consumer delay in the console language', async () => {
+ // The page used to carry its own Chinese-only copy of formatDelay, which
shadowed the
+ // language-aware one in utils/format, so this column stayed Chinese in an
English console.
+ localStorage.setItem('rocketmq-studio-language', 'en');
+ try {
+ renderWithProviders(<ConsumerPage />);
+
+ // The shared fixture reports delaySeconds: 3.
+ await waitFor(() => expect(screen.getByText('3s')).toBeInTheDocument());
+ expect(screen.queryByText('3\u79d2')).not.toBeInTheDocument();
+ } finally {
+ localStorage.removeItem('rocketmq-studio-language');
+ }
+ });
});
diff --git a/web/src/pages/instance/consumer.tsx
b/web/src/pages/instance/consumer.tsx
index 02d1ade30..4e2036d91 100644
--- a/web/src/pages/instance/consumer.tsx
+++ b/web/src/pages/instance/consumer.tsx
@@ -68,7 +68,7 @@ import PageHeader from '../../components/PageHeader';
import { InstanceSelect } from '../../components/InstanceSelect';
import { useLang } from '../../i18n/LangContext';
import { TOPIC_TYPE_MAP, PROTOCOL_MAP } from '../../constants/theme';
-import { formatDateTime } from '../../utils/format';
+import { formatDateTime, formatDelay } from '../../utils/format';
import type {
ConsumerGroup,
ConsumerInstance,
@@ -128,30 +128,6 @@ const lagColor = (lag: number): string => {
return '#52c41a';
};
-/**
- * Format delay seconds into human-readable Chinese time.
- * Shows at most 3 units: days → hours → minutes → seconds.
- * e.g. 82500 → "22小时55分钟", 3725 → "1小时2分钟5秒"
- */
-const formatDelay = (totalSeconds: number): string => {
- if (totalSeconds <= 0) return '0秒';
-
- const days = Math.floor(totalSeconds / 86400);
- let remaining = totalSeconds % 86400;
- const hours = Math.floor(remaining / 3600);
- remaining %= 3600;
- const minutes = Math.floor(remaining / 60);
- const seconds = remaining % 60;
-
- const parts: string[] = [];
- if (days > 0) parts.push(`${days}天`);
- if (hours > 0) parts.push(`${hours}小时`);
- if (minutes > 0) parts.push(`${minutes}分钟`);
- if (seconds > 0 && parts.length < 3) parts.push(`${seconds}秒`);
-
- return parts.length > 0 ? parts.join('') : '0秒';
-};
-
const visibleConsumerGroups = (groups: ConsumerGroup[], modeFilter: string):
ConsumerGroup[] => {
let data = groups;
@@ -255,7 +231,7 @@ const ConsumerPageContent = ({
instanceOptions,
instancesLoading,
}: ConsumerPageContentProps) => {
- const { t } = useLang();
+ const { t, lang } = useLang();
const isCloudInstance =
selectedInstance?.vendor === 'ALIYUN' || selectedInstance?.vendor ===
'TENCENT';
const hasSelectedInstance = Boolean(selectedInstanceId);
@@ -993,7 +969,7 @@ const ConsumerPageContent = ({
width: 100,
align: 'right',
sorter: (a, b) => (a.delaySeconds ?? 0) - (b.delaySeconds ?? 0),
- render: (seconds: number) => formatDelay(seconds ?? 0),
+ render: (seconds: number) => formatDelay(seconds ?? 0, lang),
},
{
title: '创建时间',
@@ -1765,7 +1741,7 @@ const ConsumerPageContent = ({
</Tag>
</Descriptions.Item>
<Descriptions.Item label="消费延迟">
- <Text
strong>{formatDelay(selectedGroup.delaySeconds)}</Text>
+ <Text strong>{formatDelay(selectedGroup.delaySeconds,
lang)}</Text>
</Descriptions.Item>
<Descriptions.Item label="最大重试次数">
<Text strong>{selectedGroup.retryMaxTimes}</Text> 次
