[GSOC][RIP-78][ISSUES#308] Add part of refactored front-end files (#311)

Author: Crazylychee

frontend-new/src/components/acl/ResourceInput.jsx

@@ -0,0 +1,127 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Input, Select, Tag, Space } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+
+const { Option } = Select;
+
+// 资源类型枚举
+const resourceTypes = [
+    { value: 0, label: 'Unknown', prefix: 'UNKNOWN' },
+    { value: 1, label: 'Any', prefix: 'ANY' },
+    { value: 2, label: 'Cluster', prefix: 'CLUSTER' },
+    { value: 3, label: 'Namespace', prefix: 'NAMESPACE' },
+    { value: 4, label: 'Topic', prefix: 'TOPIC' },
+    { value: 5, label: 'Group', prefix: 'GROUP' },
+];
+
+const ResourceInput = ({ value = [], onChange }) => {
+    // 确保 value 始终是数组
+    const safeValue = Array.isArray(value) ? value : [];
+
+    const [selectedType, setSelectedType] = useState(resourceTypes[0].prefix); // 默认选中第一个
+    const [resourceName, setResourceName] = useState('');
+    const [inputVisible, setInputVisible] = useState(false);
+    const inputRef = React.useRef(null);
+
+    // 处理删除已添加的资源
+    const handleClose = removedResource => {
+        const newResources = safeValue.filter(resource => resource !== removedResource);
+        onChange(newResources);
+    };
+
+    // 显示输入框
+    const showInput = () => {
+        setInputVisible(true);
+        setTimeout(() => {
+            inputRef.current?.focus();
+        }, 0);
+    };
+
+    // 处理资源类型选择
+    const handleTypeChange = type => {
+        setSelectedType(type);
+    };
+
+    // 处理资源名称输入
+    const handleNameChange = e => {
+        setResourceName(e.target.value);
+    };
+
+    // 添加资源到列表
+    const handleAddResource = () => {
+        if (resourceName) {
+            const fullResource = `${selectedType}:${resourceName}`;
+            // 避免重复添加
+            if (!safeValue.includes(fullResource)) {
+                onChange([...safeValue, fullResource]);
+            }
+            setResourceName(''); // 清空输入
+            setInputVisible(false); // 隐藏输入框
+        }
+    };
+
+    return (
+        <Space size={[0, 8]} wrap>
+            {/* 显示已添加的资源标签 */}
+            {safeValue.map(resource => ( // 使用 safeValue
+                <Tag
+                    key={resource}
+                    closable
+                    onClose={() => handleClose(resource)}
+                    color="blue"
+                >
+                    {resource}
+                </Tag>
+            ))}
+
+            {/* 新增资源输入区域 */}
+            {inputVisible ? (
+                <Space>
+                    <Select
+                        value={selectedType}
+                        style={{ width: 120 }}
+                        onChange={handleTypeChange}
+                    >
+                        {resourceTypes.map(type => (
+                            <Option key={type.value} value={type.prefix}>
+                                {type.label}
+                            </Option>
+                        ))}
+                    </Select>
+                    <Input
+                        ref={inputRef}
+                        style={{ width: 180 }}
+                        value={resourceName}
+                        onChange={handleNameChange}
+                        onPressEnter={handleAddResource}
+                        onBlur={handleAddResource} // 失去焦点也自动添加
+                        placeholder="请输入资源名称"
+                    />
+                </Space>
+            ) : (
+                <Tag onClick={showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
+                    <PlusOutlined /> 添加资源
+                </Tag>
+            )}
+        </Space>
+    );
+};
+
+export default ResourceInput;

frontend-new/src/components/acl/SubjectInput.jsx

@@ -0,0 +1,101 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Input, Select } from 'antd';
+import React, { useState, useEffect } from 'react';
+
+const { Option } = Select;
+
+// Subject 类型枚举
+const subjectTypes = [
+    { value: 'User', label: 'User' },
+];
+
+const SubjectInput = ({ value, onChange, disabled }) => {
+    // 解析传入的 value，将其拆分为 type 和 name
+    const parseValue = (val) => {
+        if (!val || typeof val !== 'string') {
+            return { type: subjectTypes[0].value, name: '' }; // 默认值
+        }
+        const parts = val.split(':');
+        if (parts.length === 2 && subjectTypes.some(t => t.value === parts[0])) {
+            return { type: parts[0], name: parts[1] };
+        }
+        return { type: subjectTypes[0].value, name: val }; // 如果格式不匹配，将整个值作为 name，类型设为默认
+    };
+
+    const [currentType, setCurrentType] = useState(() => parseValue(value).type);
+    const [currentName, setCurrentName] = useState(() => parseValue(value).name);
+
+    // 当外部 value 变化时，更新内部状态
+    useEffect(() => {
+        const parsed = parseValue(value);
+        setCurrentType(parsed.type);
+        setCurrentName(parsed.name);
+    }, [value]);
+
+    // 当类型或名称变化时，通知 Form.Item
+    const triggerChange = (changedType, changedName) => {
+        if (onChange) {
+            // 只有当名称不为空时才组合，否则只返回类型或空字符串
+            if (changedName) {
+                onChange(`${changedType}:${changedName}`);
+            } else if (changedType) { // 如果只选择了类型，但名称为空，则不组合
+                onChange(''); // 或者根据需求返回 'User:' 等，但通常这种情况下不应该有值
+            } else {
+                onChange('');
+            }
+        }
+    };
+
+    const onTypeChange = (newType) => {
+        setCurrentType(newType);
+        triggerChange(newType, currentName);
+    };
+
+    const onNameChange = (e) => {
+        const newName = e.target.value;
+        setCurrentName(newName);
+        triggerChange(currentType, newName);
+    };
+
+    return (
+        <Input.Group compact>
+            <Select
+                style={{ width: '30%' }}
+                value={currentType}
+                onChange={onTypeChange}
+                disabled={disabled}
+            >
+                {subjectTypes.map(type => (
+                    <Option key={type.value} value={type.value}>
+                        {type.label}
+                    </Option>
+                ))}
+            </Select>
+            <Input
+                style={{ width: '70%' }}
+                value={currentName}
+                onChange={onNameChange}
+                placeholder="请输入名称 (例如: yourUsername)"
+                disabled={disabled}
+            />
+        </Input.Group>
+    );
+};
+
+export default SubjectInput;

frontend-new/src/components/consumer/ClientInfoModal.jsx

@@ -0,0 +1,103 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Modal, Table, Spin } from 'antd';
+import { remoteApi } from '../../api/remoteApi/remoteApi';
+import { useLanguage } from '../../i18n/LanguageContext';
+
+const ClientInfoModal = ({ visible, group, address, onCancel }) => {
+    const { t } = useLanguage();
+    const [loading, setLoading] = useState(false);
+    const [connectionData, setConnectionData] = useState(null);
+    const [subscriptionData, setSubscriptionData] = useState(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            if (!visible) return;
+
+            setLoading(true);
+            try {
+                const connResponse = await remoteApi.queryConsumerConnection(group, address);
+                const topicResponse = await remoteApi.queryTopicByConsumer(group, address);
+
+                if (connResponse.status === 0) setConnectionData(connResponse.data);
+                if (topicResponse.status === 0) setSubscriptionData(topicResponse.data);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [visible, group, address]);
+
+    const connectionColumns = [
+        { title: 'ClientId', dataIndex: 'clientId' },
+        { title: 'ClientAddr', dataIndex: 'clientAddr' },
+        { title: 'Language', dataIndex: 'language' },
+        { title: 'Version', dataIndex: 'versionDesc' },
+    ];
+
+    const subscriptionColumns = [
+        { title: 'Topic', dataIndex: 'topic' },
+        { title: 'SubExpression', dataIndex: 'subString' },
+    ];
+
+    return (
+        <Modal
+            title={`[${group}]${t.CLIENT}`}
+            visible={visible}
+            onCancel={onCancel}
+            footer={null}
+            width={800}
+        >
+            <Spin spinning={loading}>
+                {connectionData && (
+                    <>
+                        <Table
+                            columns={connectionColumns}
+                            dataSource={connectionData.connectionSet}
+                            rowKey="clientId"
+                            pagination={false}
+                        />
+                        <h4>{t.SUBSCRIPTION}</h4>
+                        <Table
+                            columns={subscriptionColumns}
+                            dataSource={
+                                subscriptionData?.subscriptionTable
+                                    ? Object.entries(subscriptionData.subscriptionTable).map(([topic, detail]) => ({
+                                        topic,
+                                        ...detail,
+                                    }))
+                                    : []
+                            }
+                            rowKey="topic"
+                            pagination={false}
+                            locale={{
+                                emptyText: loading ? <Spin size="small" /> : t.NO_DATA
+                            }}
+                        />
+                        <p>ConsumeType: {connectionData.consumeType}</p>
+                        <p>MessageModel: {connectionData.messageModel}</p>
+                    </>
+                )}
+            </Spin>
+        </Modal>
+    );
+};
+
+export default ClientInfoModal;