[ISSUE #329] Add Frontend Proxy Component Support (#336)

2025-09-10 11:40:01 +08:00 · 2025-07-05 20:53:57 +08:00
parent 4b9ed97f8f
commit 07793d8aae
6 changed files with 130 additions and 30 deletions
--- a/frontend-new/src/api/remoteApi/remoteApi.js
+++ b/frontend-new/src/api/remoteApi/remoteApi.js
@@ -376,9 +376,9 @@ const remoteApi = {
        }
    },

-    queryConsumerGroupList: async (skipSysGroup = false) => {
+    queryConsumerGroupList: async (skipSysGroup, address) => {
        try {
-            const response = await remoteApi._fetch(remoteApi.buildUrl(`/consumer/groupList.query?skipSysGroup=${skipSysGroup}`));
+            const response = await remoteApi._fetch(remoteApi.buildUrl(`/consumer/groupList.query?skipSysGroup=${skipSysGroup}&address=${address}`));
            const data = await response.json();
            return data;
        } catch (error) {
--- a/frontend-new/src/i18n/index.js
+++ b/frontend-new/src/i18n/index.js
@@ -278,6 +278,12 @@ export const translations = {
        "ENTER_IP_HINT": "请输入 IP 地址，按回车键添加，支持 IPv4、IPv6 和 CIDR",
        "PLEASE_ENTER_DECISION": "请输入决策!",
        "MENU": "菜单",
+        "SELECT_PROXY": "选择代理",
+        "ENABLE_PROXY": "启用代理",
+        "PROXY_DISABLED": "代理禁用",
+        "PROXY_ENABLED": "代理启用",
+        "BROKER_OVERVIEW": "Broker概览",
+        "TOTAL_MSG_RECEIVED_TODAY": "今天接收的总消息数",
    },
    en: {
        "DEFAULT": "Default",
@@ -534,6 +540,13 @@ export const translations = {
        "ENTER_IP_HINT": "Please enter IP address, press Enter to add. Supports IPv4, IPv6, and CIDR.",
        "PLEASE_ENTER_DECISION": "Please enter decision!",
        "MENU": "Menu",
+        "SELECT_PROXY": "Select Proxy",
+        "ENABLE_PROXY": "Enable Proxy",
+        "PROXY_DISABLED": "Proxy Disabled",
+        "PROXY_ENABLED": "Proxy Enabled",
+        "BROKER_OVERVIEW": "Broker Overview",
+        "TOTAL_MSG_RECEIVED_TODAY": "Total messages received today",
+

    }

--- a/frontend-new/src/pages/Consumer/consumer.jsx
+++ b/frontend-new/src/pages/Consumer/consumer.jsx
@@ -16,7 +16,7 @@
 */

 import React, {useCallback, useEffect, useState} from 'react';
-import {Button, Checkbox, Input, message, notification, Spin, Table} from 'antd';
+import {Button, Checkbox, Input, message, notification, Select, Spin, Switch, Table} from 'antd';
 import {useLanguage} from '../../i18n/LanguageContext';
 import {remoteApi} from '../../api/remoteApi/remoteApi';
 import ClientInfoModal from "../../components/consumer/ClientInfoModal";
@@ -46,6 +46,27 @@ const ConsumerGroupList = () => {
    const [messageApi, msgContextHolder] = message.useMessage();
    const [notificationApi, notificationContextHolder] = notification.useNotification();

+    const [proxyEnabled, setProxyEnabled] = useState(() => {
+        try {
+            const storedValue = localStorage.getItem('proxyEnabled');
+            return storedValue ? JSON.parse(storedValue) : false;
+        } catch (error) {
+            console.error("Failed to read proxyEnabled from localStorage:", error);
+            return false;
+        }
+    });
+
+    const [selectedProxy, setSelectedProxy] = useState(() => {
+        try {
+            const storedValue = localStorage.getItem('selectedProxy');
+            return storedValue || undefined;
+        } catch (error) {
+            console.error("Failed to read selectedProxy from localStorage:", error);
+            return undefined;
+        }
+    });
+
+    const [proxyOptions ,setProxyOptions]= useState([]);
    const [paginationConf, setPaginationConf] = useState({
        current: 1,
        pageSize: 10,
@@ -60,7 +81,12 @@ const ConsumerGroupList = () => {
    const loadConsumerGroups = useCallback(async (currentPage) => {
        setLoading(true);
        try {
-            const response = await remoteApi.queryConsumerGroupList(false);
+            var response;
+            if(!proxyEnabled){
+                response = await remoteApi.queryConsumerGroupList(false);
+            }else{
+                response = await remoteApi.queryConsumerGroupList(false, selectedProxy);
+            }
            if (response.status === 0) {
                setAllConsumerGroupList(response.data);
                if (currentPage != null) {
@@ -87,7 +113,6 @@ const ConsumerGroupList = () => {
    };

    const filterList = useCallback((currentPage, data) => {
-        // 排序处理
        let sortedData = [...data];
        if (sortConfig.sortKey) {
            sortedData.sort((a, b) => {
@@ -153,6 +178,48 @@ const ConsumerGroupList = () => {
        filterList(paginationConf.current, sortedList);
    }, [sortConfig, allConsumerGroupList, paginationConf.current]);

+    const fetchProxyList = useCallback(async () => {
+        remoteApi.queryProxyHomePage((resp) => {
+            setLoading(false);
+            if (resp.status === 0) {
+                const {proxyAddrList, currentProxyAddr} = resp.data;
+                const options = proxyAddrList.map(proxyAddress => ({
+                    label: proxyAddress,
+                    value: proxyAddress,
+                }));
+                setProxyOptions(options || []);
+                setSelectedProxy(prevSelectedProxy => {
+                    if (prevSelectedProxy) {
+                        return prevSelectedProxy;
+                    }
+                    if (options.length > 0) {
+                        return options[0].value;
+                    }
+                    return undefined;
+                });
+            } else {
+                notificationApi.error({message: resp.errMsg || t.FETCH_PROXY_LIST_FAILED, duration: 2});
+            }
+        });
+    }, [t]);
+
+    useEffect(() => {
+        localStorage.setItem('proxyEnabled', JSON.stringify(proxyEnabled));
+    }, [proxyEnabled]);
+
+    useEffect(() => {
+        if (selectedProxy) {
+            localStorage.setItem('selectedProxy', selectedProxy);
+        } else {
+            localStorage.removeItem('selectedProxy');
+        }
+    }, [selectedProxy]);
+
+
+    useEffect(() => {
+        fetchProxyList();
+    }, []);
+
    useEffect(() => {
        loadConsumerGroups();
    }, [loadConsumerGroups]);
@@ -389,16 +456,18 @@ const ConsumerGroupList = () => {
        <>
            {msgContextHolder}
            {notificationContextHolder}
-            <div style={{padding: '20px'}}>
+            <div style={{ padding: '20px' }}>
                <Spin spinning={loading} tip={t.LOADING}>
-                    <div style={{marginBottom: '20px'}}>
-                        <div style={{display: 'flex', alignItems: 'center', gap: '15px'}}>
-                            <div style={{display: 'flex', alignItems: 'center'}}>
-                                <label style={{marginRight: '8px'}}>{t.SUBSCRIPTION_GROUP}:</label>
+                    <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        {/* 左侧：筛选和操作按钮 */}
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '15px', flexWrap: 'wrap' }}>
+                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                                <label style={{ marginRight: '8px', whiteSpace: 'nowrap' }}>{t.SUBSCRIPTION_GROUP}:</label>
                                <Input
-                                    style={{width: '200px'}}
+                                    style={{ width: '200px' }}
                                    value={filterStr}
                                    onChange={(e) => handleFilterInputChange(e.target.value)}
+                                    placeholder="输入订阅组名称"
                                />
                            </div>
                            <Checkbox checked={filterNormal}
@@ -423,12 +492,35 @@ const ConsumerGroupList = () => {
                            <Button type="primary" onClick={handleRefreshConsumerData}>
                                {t.REFRESH}
                            </Button>
-                            {/*<Switch*/}
-                            {/*    checked={intervalProcessSwitch}*/}
-                            {/*    onChange={(checked) => setIntervalProcessSwitch(checked)}*/}
-                            {/*    checkedChildren={t.AUTO_REFRESH}*/}
-                            {/*    unCheckedChildren={t.AUTO_REFRESH}*/}
-                            {/*/>*/}
+                        </div>
+
+                        {/* 右侧：代理选项 */}
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
+                            <label style={{ marginRight: '8px', whiteSpace: 'nowrap' }}>{t.SELECT_PROXY}:</label>
+                            <Select
+                                style={{ width: '220px' }}
+                                placeholder={t.SELECT_PROXY}
+                                onChange={(value) => setSelectedProxy(value)}
+                                value={selectedProxy}
+                                options={proxyOptions}
+                                disabled={!proxyEnabled}
+                                allowClear
+                            />
+                            <label style={{ marginRight: '8px', whiteSpace: 'nowrap' }}>{t.ENABLE_PROXY}:</label>
+                            <Switch
+                                checked={proxyEnabled}
+                                onChange={(checked) => {
+                                    setProxyEnabled(checked);
+                                    if (!checked) {
+                                        setSelectedProxy(undefined);
+                                        messageApi.info(t.PROXY_DISABLED);
+                                    } else {
+                                        messageApi.info(t.PROXY_ENABLED);
+                                    }
+                                }}
+                                checkedChildren={t.ENABLED}
+                                unCheckedChildren={t.DISABLED}
+                            />
                        </div>
                    </div>

@@ -443,6 +535,7 @@ const ConsumerGroupList = () => {
                    />
                </Spin>

+                {/* 模态框组件保持不变 */}
                <ClientInfoModal
                    visible={showClientInfo}
                    group={selectedGroup}
--- a/frontend-new/src/pages/Dashboard/DashboardPage.jsx
+++ b/frontend-new/src/pages/Dashboard/DashboardPage.jsx
@@ -250,17 +250,18 @@ const DashboardPage = () => {
                const brokerAddrTable = resp.data.clusterInfo.brokerAddrTable; // Corrected to brokerAddrTable
                const brokerDetail = resp.data.brokerServer;
                const clusterMap = tools.generateBrokerMap(brokerDetail, clusterAddrTable, brokerAddrTable);
-
+                console.log(brokerAddrTable)
                let brokerArray = [];
                Object.values(clusterMap).forEach(brokersInCluster => {
                    brokerArray = brokerArray.concat(brokersInCluster);
                });

-                // Update broker table data
-                setBrokerTableData(brokerArray.map(broker => ({
+                const newData = brokerArray.map(broker => ({
                    ...broker,
-                    key: broker.brokerName // Ant Design Table needs a unique key
-                })));
+                    key: broker.brokerName,
+                }));
+                console.log("即将设置的数据:", newData); // 先打印
+                setBrokerTableData(newData); // 再设置状态

                brokerArray.sort((firstBroker, lastBroker) => {
                    const firstTotalMsg = parseFloat(firstBroker.msgGetTotalTodayNow || 0);
@@ -347,7 +348,7 @@ const DashboardPage = () => {

    const brokerColumns = [
        {title: t.BROKER_NAME, dataIndex: 'brokerName', key: 'brokerName'},
-        {title: t.BROKER_ADDR, dataIndex: 'brokerAddress', key: 'brokerAddress'},
+        {title: t.BROKER_ADDR, dataIndex: 'address', key: 'address'},
        {
            title: t.TOTAL_MSG_RECEIVED_TODAY,
            dataIndex: 'msgGetTotalTodayNow',
--- a/frontend-new/src/pages/DlqMessage/dlqmessage.jsx
+++ b/frontend-new/src/pages/DlqMessage/dlqmessage.jsx
@@ -179,7 +179,6 @@ const DlqMessageQueryPage = () => {
            return;
        }
        setLoading(true);
-        // console.log("根据Message ID查询DLQ消息:", { msgId: messageId, consumerGroup: selectedConsumerGroup });
        try {
            const resp = await remoteApi.viewMessage(messageId, DLQ_GROUP_TOPIC_PREFIX + selectedConsumerGroup);
            if (resp.status === 0) {
@@ -323,7 +322,6 @@ const DlqMessageQueryPage = () => {
            msgId: message.properties.ORIGIN_MESSAGE_ID,
            consumerGroup: selectedConsumerGroup,
        }));
-        // console.log(`批量重发DLQ消息到 ${selectedConsumerGroup}:`, messagesToResend);
        try {
            const resp = await remoteApi.batchResendDlqMessage(messagesToResend);
            if (resp.status === 0) {
@@ -355,7 +353,6 @@ const DlqMessageQueryPage = () => {
                message: t.ERROR,
                description: t.BATCH_RESEND_FAILED,
            });
-            console.error("批量重发失败:", error);
        } finally {
            setLoading(false);
        }
--- a/frontend-new/src/pages/Message/message.jsx
+++ b/frontend-new/src/pages/Message/message.jsx
@@ -146,7 +146,6 @@ const MessageQueryPage = () => {
                message: t.ERROR,
                description: t.QUERY_FAILED,
            });
-            console.error("查询失败:", error);
        } finally {
            setLoading(false);
        }
@@ -182,7 +181,6 @@ const MessageQueryPage = () => {
                message: t.ERROR,
                description: t.QUERY_FAILED,
            });
-            console.error("查询失败:", error);
        } finally {
            setLoading(false);
        }
@@ -241,7 +239,6 @@ const MessageQueryPage = () => {
                message: t.ERROR,
                description: t.RESEND_FAILED,
            });
-            console.error("重发失败:", error);
        } finally {
            setLoading(false);
            // Optionally, you might want to refresh the message detail after resend
@@ -455,7 +452,6 @@ const MessageQueryPage = () => {
                                        </Button>
                                    </Form.Item>
                                </Form>
-                                {/* Message ID 查询结果通常直接弹窗显示，这里不需要表格 */}
                            </div>
                        </TabPane>
                    </Tabs>