From 835b23bb3fe280fb9b09a548cae826ab8f0f5012 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Thu, 29 Jun 2023 15:49:46 +0800 Subject: [PATCH 01/14] fix: form style bug --- src/routes/Plugin/Discovery/index.js | 73 ++++++++++++++++------------ src/routes/Plugin/Discovery/tcp.less | 26 +++++++--- 2 files changed, 59 insertions(+), 40 deletions(-) diff --git a/src/routes/Plugin/Discovery/index.js b/src/routes/Plugin/Discovery/index.js index 0cfc36712..dd75a4b66 100644 --- a/src/routes/Plugin/Discovery/index.js +++ b/src/routes/Plugin/Discovery/index.js @@ -322,9 +322,11 @@ export default class TCPProxy extends Component { }, callback: discoveryConfigList => { let tcpType = ''; + let discoveryId = ''; let isSetConfig = false; if (discoveryConfigList !== null) { tcpType = discoveryConfigList.type; + discoveryId = discoveryConfigList.id isSetConfig = true; } this.setState({ @@ -342,6 +344,7 @@ export default class TCPProxy extends Component { dispatch({ type: 'discovery/add', payload: { + discoveryId, name, forwardPort, type: "tcp", @@ -484,43 +487,49 @@ export default class TCPProxy extends Component { - -

- {getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.TITLE")} -

- - + + {/*
*/} +
+ + + +
+ + - {getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.CONFIGURATION")} - - - {/*
*/} -
- - +
- - - - +
Date: Thu, 29 Jun 2023 20:59:37 +0800 Subject: [PATCH 02/14] fix: modify the location of the 'id' field --- src/routes/Plugin/Discovery/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/Plugin/Discovery/index.js b/src/routes/Plugin/Discovery/index.js index dd75a4b66..2ad82febb 100644 --- a/src/routes/Plugin/Discovery/index.js +++ b/src/routes/Plugin/Discovery/index.js @@ -322,11 +322,11 @@ export default class TCPProxy extends Component { }, callback: discoveryConfigList => { let tcpType = ''; - let discoveryId = ''; + let id = null; let isSetConfig = false; if (discoveryConfigList !== null) { tcpType = discoveryConfigList.type; - discoveryId = discoveryConfigList.id + id = discoveryConfigList.id isSetConfig = true; } this.setState({ @@ -344,7 +344,6 @@ export default class TCPProxy extends Component { dispatch({ type: 'discovery/add', payload: { - discoveryId, name, forwardPort, type: "tcp", @@ -352,6 +351,7 @@ export default class TCPProxy extends Component { listenerNode, handler, discovery: { + id, level: "0", // 0 selector pluginName: "tcp", discoveryType, From 8d310ee6464e60787c8b41792c7f2eb6f98a3157 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Sat, 15 Jul 2023 01:41:12 +0800 Subject: [PATCH 03/14] refactor: modify the display of the json props --- src/components/GlobalHeader/index.js | 2 +- src/locales/en-US.json | 14 +- src/locales/zh-CN.json | 18 +- src/models/discovery.js | 37 +- src/routes/Plugin/Common/Rule.js | 6 + src/routes/Plugin/Common/Selector.js | 3 +- .../Plugin/Discovery/DiscoveryConfigModal.js | 202 ++++++ .../Plugin/Discovery/ProxySelectorCopy.js | 107 +++ .../Plugin/Discovery/ProxySelectorModal.js | 663 ++++++++++++++++++ .../Plugin/Discovery/{card.js => TcpCard.js} | 13 +- .../{upstreamTable.js => UpstreamTable.js} | 9 + src/routes/Plugin/Discovery/configModal.js | 117 ---- src/routes/Plugin/Discovery/index.js | 128 ++-- .../Plugin/Discovery/proxySelectorModal.js | 251 ------- src/routes/Plugin/Discovery/tcp.less | 2 +- src/services/api.js | 20 + src/utils/utils.js | 6 +- 17 files changed, 1163 insertions(+), 435 deletions(-) create mode 100644 src/routes/Plugin/Discovery/DiscoveryConfigModal.js create mode 100644 src/routes/Plugin/Discovery/ProxySelectorCopy.js create mode 100644 src/routes/Plugin/Discovery/ProxySelectorModal.js rename src/routes/Plugin/Discovery/{card.js => TcpCard.js} (87%) rename src/routes/Plugin/Discovery/{upstreamTable.js => UpstreamTable.js} (95%) delete mode 100644 src/routes/Plugin/Discovery/configModal.js delete mode 100644 src/routes/Plugin/Discovery/proxySelectorModal.js diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js index 2fac6c777..f147fdf1a 100644 --- a/src/components/GlobalHeader/index.js +++ b/src/components/GlobalHeader/index.js @@ -149,7 +149,7 @@ class GlobalHeader extends PureComponent {
{ + // console.log("useJSON", useJSON) this.setState({ pluginHandleList: pluginHandles }, () => { if (useJSON) { setFieldsValue({ @@ -164,6 +166,8 @@ class AddModal extends Component { handleType, handleJSON } = values; + console.log("handleType", handleType) // handleType为1 + console.log("handleJSON", handleJSON) // handleType为undefined if (!err) { const submit = this.checkConditions(); if (submit) { @@ -193,6 +197,7 @@ class AddModal extends Component { } if (this.handleComponentRef) { // customizationRule + console.log("here") handle = this.handleComponentRef.getData(values); } @@ -429,6 +434,7 @@ class AddModal extends Component { if (customRulePage) { RuleHandleComponent = PluginRuleHandle[pluginName]; } else if (pluginHandleList) { + console.log("I'm here") RuleHandleComponent = CommonRuleHandle; } diff --git a/src/routes/Plugin/Common/Selector.js b/src/routes/Plugin/Common/Selector.js index e890b363a..160819bd1 100644 --- a/src/routes/Plugin/Common/Selector.js +++ b/src/routes/Plugin/Common/Selector.js @@ -82,7 +82,6 @@ class AddModal extends Component { this.state = { selectValue, - gray, serviceId, divideUpstreams, @@ -458,7 +457,7 @@ class AddModal extends Component { })()} - +
({ + ...discovery +})) + +class DiscoveryConfigModal extends Component { + + state = { + zkjson: JSON.parse(this.props.zkProps) + }; + + componentDidMount() { + const { isSetConfig, data } = this.props; + if (!isSetConfig) { + this.props.dispatch({ + type: 'discovery/saveGlobalType', + payload: { + chosenType: null + } + }); + }else{ + this.setState({zkjson: JSON.parse(data.props)}) + } + } + + + handleSubmit = e => { + const { form, handleOk } = this.props; + const { zkjson } = this.state; + e.preventDefault(); + form.validateFieldsAndScroll((err, values) => { + if (!err) { + let { name, serverList, tcpType } = values; + const propsjson = {}; + Object.entries(zkjson).forEach(([key]) => { + propsjson[key] = form.getFieldValue(key); + }); + const props = JSON.stringify(propsjson); // 将字段值转换为JSON字符串 + console.log("props", props); // 打印JSON字符串，或根据您的需求进行处理 + handleOk({ name, serverList, props, tcpType}); + } + }); + }; + + + handleOptions() { + const {Option} = Select; + return this.props.typeEnums + .filter(value => value !== "local") + .map(value => ) + } + + + render() { + const { handleCancel, form, data, isSetConfig, handleConfigDelete } = this.props + const { getFieldDecorator } = form; + const { name, serverList, type: tcpType, id} = data || {}; + const { zkjson } = this.state; + const formItemLayout = { + labelCol: { + sm: { span: 4 } + }, + wrapperCol: { + sm: { span: 19 } + } + }; + + return ( + handleConfigDelete(id)} + okText="Yes" + cancelText="No" + key="popconfirm" + > + + + ) : null, + , + , + ]} + destroyOnClose + > +
+ + {getFieldDecorator('tcpType', { + rules: [{ required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT") }], + initialValue: tcpType !== "" ? tcpType : undefined + })( + , + )} + + + {getFieldDecorator('name', { + rules: [{ required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.NAME.INPUT") }], + initialValue: name + })()} + + + + {getFieldDecorator('serverList', { + rules: [{ required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST.INPUT") }], + initialValue: serverList + })()} + + + {/* */} + {/* {getFieldDecorator('props', { */} + {/* initialValue: chosenType === 'zookeeper' && isSetConfig === false ? zkProps : props */} + {/* })()} */} + {/* */} + +
+ {getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS")} + : +
+
+
+ + {Object.entries(zkjson).map(([key, value]) => ( + + + {getFieldDecorator(key, { + initialValue: value + })( + + )} + + + ))} + +
+
+
+ + ) + } +} + +export default Form.create()(DiscoveryConfigModal); diff --git a/src/routes/Plugin/Discovery/ProxySelectorCopy.js b/src/routes/Plugin/Discovery/ProxySelectorCopy.js new file mode 100644 index 000000000..e1abb7a77 --- /dev/null +++ b/src/routes/Plugin/Discovery/ProxySelectorCopy.js @@ -0,0 +1,107 @@ +/* + * 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, { Component } from "react"; +import {Modal, Select} from "antd"; +import { + fetchProxySelector, +} from "../../../services/api"; +import { getIntlContent } from "../../../utils/IntlUtils"; + +class ProxySelectorCopy extends Component { + constructor(props) { + super(props); + this.state = { + selectorList: [], + selectedValue: undefined, + loading: false + }; + } + + componentDidMount() { + this.getAllSelectors(); + } + + getAllSelectors = async () => { + const { + data: { dataList: selectors = [] } + } = await fetchProxySelector({ + currentPage: 1, + pageSize: 9999 + }); + this.setState({ selectorList: selectors}); + }; + + handleChangeSelect = key => { + this.setState({ selectedValue: key }); + }; + + handleCancel = () => { + const { onCancel } = this.props; + // eslint-disable-next-line no-unused-expressions + onCancel && onCancel(); + this.setState({ + selectedValue: undefined + }); + }; + + handleOk = async () => { + const { onOk } = this.props; + const { selectedValue, selectorList } = this.state; + this.setState({ + loading: true + }); + const data = selectorList.find(selector => selector.id === selectedValue) + this.setState({ + loading: false + }); + // eslint-disable-next-line no-unused-expressions + onOk && onOk(data); + }; + + handleOptions() { + const {Option} = Select; + return this.state.selectorList + .map(selector => ) + } + + render() { + const { visible = false } = this.props; + const { loading } = this.state; + return ( + + + + ); + } +} + +export default ProxySelectorCopy; diff --git a/src/routes/Plugin/Discovery/ProxySelectorModal.js b/src/routes/Plugin/Discovery/ProxySelectorModal.js new file mode 100644 index 000000000..39d717056 --- /dev/null +++ b/src/routes/Plugin/Discovery/ProxySelectorModal.js @@ -0,0 +1,663 @@ +/* + * 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, {Component} from "react"; +import {connect} from "dva"; +import {Button, Col, Divider, Form, Input, Modal, Row, Select, Table, Tabs, Tooltip} from "antd"; +import classnames from "classnames"; +import {getIntlContent} from "../../../utils/IntlUtils"; +import EditableTable from './UpstreamTable'; +import styles from "../index.less"; +import ProxySelectorCopy from "./ProxySelectorCopy.js"; +import { findKeyByValue } from "../../../utils/utils"; + + +const FormItem = Form.Item; +const { TabPane } = Tabs; +const { Option } = Select; + +@connect(({discovery, pluginHandle, shenyuDict}) => ({ + ...discovery, + ...pluginHandle, + ...shenyuDict +})) + +class ProxySelectorModal extends Component { + + constructor(props) { + super(props); + this.state = { + recordCount: this.props.recordCount, + upstreams: this.props.discoveryUpstreams, + zkjson: JSON.parse(this.props.zkProps), + pluginHandleList: [], + visible: false, + discoveryHandler: null, + defaultValueList: null + }; + } + + componentDidMount() { + const { isAdd, isSetConfig, tcpType, data, pluginId, dispatch } = this.props; + const { props } = this.props.data || {}; + if (!isAdd || isSetConfig) { + this.setState({zkjson: JSON.parse(data.discovery.props)}) + dispatch({ + type: 'discovery/saveGlobalType', + payload: { + chosenType: tcpType + } + }); + }else{ + dispatch({ + type: 'discovery/saveGlobalType', + payload: { + chosenType: null + } + }); + } + let type = 1; + dispatch({ + type: "pluginHandle/fetchByPluginId", + payload: { + pluginId, + type, + handle: props, + isHandleArray: false, + callBack: (pluginHandles) => { + const filteredArray = pluginHandles[0].filter(item => item.field !== 'discoveryHandler'); + const handlerArray = pluginHandles[0].filter(item => item.field === 'discoveryHandler'); + pluginHandles[0] = filteredArray; + this.setState({discoveryHandler: handlerArray}); + this.setState({ pluginHandleList: pluginHandles }); + let defaultValue = handlerArray[0].defaultValue; + this.setState({ defaultValueList: defaultValue.split(",") }); + } + } + }); + } + + handleSubmit = e => { + const {form, handleOk} = this.props; + const { zkjson, upstreams, pluginHandleList, defaultValueList } = this.state; + e.preventDefault(); + form.validateFieldsAndScroll((err, values) => { + if (!err) { + let {name, forwardPort, listenerNode, serverList, discoveryType} = values; + const discoveryPropsJson = {}; + Object.entries(zkjson).forEach(([key]) => { + discoveryPropsJson[key] = form.getFieldValue(key); + }); + const discoveryProps = JSON.stringify(discoveryPropsJson); // 将字段值转换为JSON字符串 + console.log("discoveryProps", discoveryProps); // 打印JSON字符串，或根据您的需求进行处理 + + let handler = {}; + if ( defaultValueList !== null) { + defaultValueList.forEach(item => { + if ((values[item]) !== undefined){ + handler[values[item]] = item; + } + }); + } + + let handleResult = []; + handleResult[0] = {}; + pluginHandleList[0].forEach(item => { + handleResult[0][item.field] = values[item.field + 0]; + }); + + handler = JSON.stringify(handler); + let props = JSON.stringify(handleResult[0]); + + console.log("props", props) + console.log("handler", handler) + handleOk({name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, discoveryType, upstreams}); + } + }); + }; + + handleCopyData = copyData => { + const { form, dispatch } = this.props; + const { name, forwardPort, discovery, listenerNode } = copyData; + const formData = { + name, + forwardPort, + listenerNode, + discoveryType: discovery.type, + serverList: discovery.serverList + }; + dispatch({ + type: 'discovery/saveGlobalType', + payload: { + chosenType: discovery.type + } + }); + form.setFieldsValue(formData); + this.setState({ visible: false }); + }; + + handleTableChange = (newData) => { + this.setState({ upstreams: newData }); + }; + + handleCountChange = (newCount) => { + this.setState({ recordCount: newCount }); + }; + + handleChange = (index, value) => { + this.setState({ + [index]: value + }); + } + + handleOptions() { + return this.props.typeEnums.map(value => + + ) + } + + + render() { + const { tcpType, form, handleCancel, isSetConfig, isAdd, chosenType } = this.props; + const {recordCount, upstreams, zkjson, pluginHandleList, visible, discoveryHandler, defaultValueList } = this.state; + const {getFieldDecorator} = form; + const { name, forwardPort, listenerNode, discovery, handler } = this.props.data || {}; + const labelWidth = 200; + const formItemLayout = { + labelCol: { + sm: { span: 4 } + }, + wrapperCol: { + sm: { span: 19 } + } + }; + console.log("handlerhere", handler) + const columns = [ + { + title: 'protocol', + dataIndex: 'protocol', + key: 'protocol', + align: 'center' + }, + { + title: 'url', + dataIndex: 'url', + key: 'url', + align: 'center' + }, + { + title: 'status', + dataIndex: 'status', + key: 'status', + align: 'center' + }, + { + title: 'weight', + dataIndex: 'weight', + key: 'weight', + align: 'center' + }, + ]; + + if (discoveryHandler === null) { + return
Loading...
; + } + return ( + +
+ + + + {getFieldDecorator('name', { + rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.NAME.INPUT")}], + initialValue: name + })( { + this.setState({ visible: true }); + }} + > + {getIntlContent("SHENYU.SELECTOR.COPY")} + + } + />)} + + + { + this.setState({ visible: false }); + }} + /> + + + {getFieldDecorator('forwardPort', { + rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.FORWARDPORT.INPUT")}], + initialValue: forwardPort + })()} + + + {/* */} + {/* {getFieldDecorator('props', { */} + {/* initialValue: isAdd === true ? selectorProps : props */} + {/* })()} */} + {/* */} + + +
+
+ {pluginHandleList.map((handleList, index) => { + return ( +
+
    + {handleList.map(item => { + let required = item.required === "1"; + let defaultValue = + item.value === 0 || item.value === false + ? item.value + : item.value || + (item.defaultValue === "true" + ? true + : item.defaultValue === "false" + ? false + : item.defaultValue); + let placeholder = item.placeholder || item.label; + let checkRule = item.checkRule; + let fieldName = item.field + index; + let rules = []; + if (required) { + rules.push({ + required: { required }, + message: + getIntlContent("SHENYU.COMMON.PLEASEINPUT") + + item.label + }); + } + if (checkRule) { + rules.push({ + // eslint-disable-next-line no-eval + pattern: eval(checkRule), + message: `${getIntlContent( + "SHENYU.PLUGIN.RULE.INVALID" + )}:(${checkRule})` + }); + } + if (item.dataType === 1) { + return ( +
  • + + + {getFieldDecorator(fieldName, { + rules, + initialValue: defaultValue + })( + + {item.label} +
+ } + placeholder={placeholder} + key={fieldName} + type="number" + /> + )} + + + + ); + } else if (item.dataType === 3 && item.dictOptions) { + return ( +
  • + + + {getFieldDecorator(fieldName, { + rules, + initialValue: defaultValue + })( + + )} + + +
    • + ); + } else { + return ( +
  • + + + {getFieldDecorator(fieldName, { + rules, + initialValue: defaultValue + })( + + {item.label} +
    • + } + placeholder={placeholder} + key={fieldName} + /> + )} + + + + ); + } + })} + +
    + ); + })} +
    + + + + +
    +
    +
      + {(() => { + if(discoveryHandler != null ){ + let item = discoveryHandler[0]; + let checkRule = item.checkRule; + let required = item.required === "1"; + let rules = []; + if (required) { + rules.push({ + required: { required }, + message: + getIntlContent("SHENYU.COMMON.PLEASEINPUT") + + item.label + }); + } + if (checkRule) { + rules.push({ + // eslint-disable-next-line no-eval + pattern: eval(checkRule), + message: `${getIntlContent( + "SHENYU.PLUGIN.RULE.INVALID" + )}:(${checkRule})` + }); + } + if (defaultValueList != null) { + return defaultValueList.map((value, index) => ( +
    • + + {getFieldDecorator(value, { + initialValue: isAdd === true ? findKeyByValue(handler, value): findKeyByValue(JSON.parse(handler), value), + rules + })( + + {value} +
    + } + placeholder={`Your ${value}`} + key={value} + /> + )} + + + )); + } + + // if (Object.keys(hh).length !== 0) { + // Object.entries(hh).forEach(([key]) => { + // let value = hh[key]; + // let field = { [value]: key }; // 使用动态键来设置字段值 + // form.setFieldsValue(field); + // }); + // } + + // else if(defaultValueJson !== null) { + // return Object.keys(defaultValueJson).map(key => ( + //
  • + // + // {getFieldDecorator(defaultValueJson[key], { + // rules, + // initialValue: key + // })( + // + // {defaultValueJson[key]} + //
    • + // } + // placeholder={`Your ${defaultValueJson[key]}`} + // key={defaultValueJson[key]} + // /> + // )} + //     + // + // )); + // } + // 默认情况下，以
  • 展示整个defaultValue对象 + // return
  • {JSON.stringify(defaultValue)}
    • ; + } + // let required = discoveryHandler.required; + })()} + + + + + + + + + {getFieldDecorator('discoveryType', { + rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}], + initialValue: tcpType !== '' ? tcpType : undefined + })( + , + )} + + + { + chosenType !== 'local' ? ( + <> + + {getFieldDecorator('listenerNode', { + rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE.INPUT")}], + initialValue: listenerNode + })()} + + + {/* */} + {/* {getFieldDecorator('handler', { */} + {/* rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.HANDLER.INPUT")}], */} + {/* initialValue: isAdd === true ? handlerProps : handler */} + {/* })()} */} + {/* */} + + + + { + isSetConfig !== true ? ( + <> + + {getFieldDecorator('serverList', { + rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST.INPUT")}], + initialValue: discovery.serverList + })()} + + + {/* */} + {/* {getFieldDecorator('discoveryProps', { */} + {/* initialValue: chosenType === 'zookeeper' && isAdd === true ? zkProps : discovery.props */} + {/* })()} */} + {/* */} +
    + {getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS")} + : +
    +
    +
    + + {Object.entries(zkjson).map(([key, value]) => ( + + + {getFieldDecorator(key, { + initialValue: value + })( + + )} + + + ))} + +
    +
    + + + ) : null + } + + { + isAdd !== true ? ( + <> + {getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")} + ; + + ):null + } + + ) : ( + <> + {getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")} + + + ) + } + + + + + ); + } +} + +export default Form.create()(ProxySelectorModal); diff --git a/src/routes/Plugin/Discovery/card.js b/src/routes/Plugin/Discovery/TcpCard.js similarity index 87% rename from src/routes/Plugin/Discovery/card.js rename to src/routes/Plugin/Discovery/TcpCard.js index 125927340..0d10e269d 100644 --- a/src/routes/Plugin/Discovery/card.js +++ b/src/routes/Plugin/Discovery/TcpCard.js @@ -49,13 +49,24 @@ export class TcpCard extends Component { } render() { - const {updateSelector, data, handleDelete} = this.props + const {updateSelector, data, handleDelete, handleRefresh} = this.props return ( {data.name}} style={{ borderRadius: '5px' , boxShadow: '1px 2px 2px rgba(191, 189, 189, 0.5)' }} extra={(
    + + +
    -
    {popup} diff --git a/src/routes/Plugin/Discovery/proxySelectorModal.js b/src/routes/Plugin/Discovery/proxySelectorModal.js deleted file mode 100644 index 8282a4a23..000000000 --- a/src/routes/Plugin/Discovery/proxySelectorModal.js +++ /dev/null @@ -1,251 +0,0 @@ -/* - * 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, {Component} from "react"; -import {connect} from "dva"; -import {Divider, Form, Input, Modal, Select, Table} from "antd"; -import {getIntlContent} from "../../../utils/IntlUtils"; -import EditableTable from './upstreamTable'; - -const FormItem = Form.Item; - - -@connect(({discovery}) => ({ - ...discovery -})) - -class ProxySelectorModal extends Component { - - constructor(props) { - super(props); - this.state = { - recordCount: this.props.recordCount, - upstreams: this.props.discoveryUpstreams, - }; - } - - handleSubmit = e => { - const {form, handleOk} = this.props; - e.preventDefault(); - form.validateFieldsAndScroll((err, values) => { - if (!err) { - let {name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, discoveryType} = values; - const {upstreams} = this.state - handleOk({name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, discoveryType, upstreams}); - } - }); - }; - - handleTableChange = (newData) => { - this.setState({ upstreams: newData }); - }; - - handleCountChange = (newCount) => { - this.setState({ recordCount: newCount }); - }; - - handleChange = (index, value) => { - this.setState({ - [index]: value - }); - } - - handleOptions() { - const {Option} = Select - return this.props.typeEnums.map(value => - - ) - } - - render() { - const { tcpType, form, handleCancel, isSetConfig, isAdd, chosenType} = this.props; - const {recordCount, upstreams } = this.state; - const {getFieldDecorator} = form; - const { name, forwardPort, props, listenerNode, handler, discovery} = this.props.data || {}; - const formItemLayout = { - labelCol: { - sm: { span: 6 } - }, - wrapperCol: { - sm: { span: 17 } - } - }; - if (!isAdd || isSetConfig) { - this.props.dispatch({ - type: 'discovery/saveGlobalType', - payload: { - chosenType: tcpType - } - }) - } - - const columns = [ - { - title: 'protocol', - dataIndex: 'protocol', - key: 'protocol', - }, - { - title: 'url', - dataIndex: 'url', - key: 'url', - }, - { - title: 'status', - dataIndex: 'status', - key: 'status', - }, - { - title: 'weight', - dataIndex: 'weight', - key: 'weight', - }, - ]; - return ( - -
    - - {getFieldDecorator('discoveryType', { - rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}], - initialValue: tcpType !== '' ? tcpType : undefined - })( - , - )} - - - - {getFieldDecorator('name', { - rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.NAME.INPUT")}], - initialValue: name - })()} - - - - {getFieldDecorator('forwardPort', { - rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.FORWARDPORT.INPUT")}], - initialValue: forwardPort - })()} - - - - {getFieldDecorator('props', { - rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.PROPS.INPUT")}], - initialValue: props - })()} - - - { - chosenType !== 'local' ? ( - <> - - {getFieldDecorator('listenerNode', { - rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE.INPUT")}], - initialValue: listenerNode - })()} - - - - {getFieldDecorator('handler', { - rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.HANDLER.INPUT")}], - initialValue: handler - })()} - - - { - isSetConfig !== true ? ( - <> - {getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIGURATION")} - - {getFieldDecorator('serverList', { - rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST.INPUT")}], - initialValue: discovery.serverList - })()} - - - - {getFieldDecorator('discoveryProps', { - rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS.INPUT")}], - initialValue: discovery.props - })()} - - - - ) : null - } - - { - isAdd !== true ? ( - <> - {getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")} -
    ; - - ):null - } - - ) : ( - <> - {getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")} - - - ) - } - - - ); - } -} - -export default Form.create()(ProxySelectorModal); diff --git a/src/routes/Plugin/Discovery/tcp.less b/src/routes/Plugin/Discovery/tcp.less index 25d16c9b9..256445692 100644 --- a/src/routes/Plugin/Discovery/tcp.less +++ b/src/routes/Plugin/Discovery/tcp.less @@ -16,7 +16,7 @@ */ .cardTag { - min-width: 200px; + min-width: 231px; height: 32px; border: rgba(112, 109, 109, 0.4) 1px solid; border-radius: 5px; diff --git a/src/services/api.js b/src/services/api.js index 3ead1ef08..ea757c382 100644 --- a/src/services/api.js +++ b/src/services/api.js @@ -980,3 +980,23 @@ export function getDiscovery(params) { method: `GET` }); } + +export function refreshProxySelector(params) { + return request(`${baseUrl}/proxy-selector/fetch/${params.discoveryHandlerId}`, + { + method: `PUT`, + body: { + ...params + } + }); +} + +export function deleteDiscovery(params) { + return request(`${baseUrl}/discovery/${params.discoveryId}`, + { + method: `DELETE`, + body: { + ...params + } + }); +} diff --git a/src/utils/utils.js b/src/utils/utils.js index 6d319edc5..032fac819 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -186,7 +186,11 @@ export function guid() { return `${S4() + S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`; } -export function formatTimestamp(timestamp) { +export function formatTimestamp(timestamp) { const date = moment(timestamp); return date.format('YYYY-MM-DD HH:mm:ss'); } + +export function findKeyByValue(obj, value) { + return Object.keys(obj).find(key => obj[key] === value); +} From 8ed11b0bc6f447872acec83e136aaeeb9d60bc99 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Sat, 15 Jul 2023 18:45:00 +0800 Subject: [PATCH 04/14] fix: modify the display of the discovery props --- .../Plugin/Discovery/ProxySelectorCopy.js | 6 +- .../Plugin/Discovery/ProxySelectorModal.js | 88 ++++++++----------- src/routes/Plugin/Discovery/index.js | 6 +- 3 files changed, 46 insertions(+), 54 deletions(-) diff --git a/src/routes/Plugin/Discovery/ProxySelectorCopy.js b/src/routes/Plugin/Discovery/ProxySelectorCopy.js index e1abb7a77..cfb7e0c07 100644 --- a/src/routes/Plugin/Discovery/ProxySelectorCopy.js +++ b/src/routes/Plugin/Discovery/ProxySelectorCopy.js @@ -76,7 +76,7 @@ class ProxySelectorCopy extends Component { handleOptions() { const {Option} = Select; return this.state.selectorList - .map(selector => ) + .map(selector => ) } render() { @@ -91,11 +91,15 @@ class ProxySelectorCopy extends Component { onOk={this.handleOk} confirmLoading={loading} > + diff --git a/src/routes/Plugin/Discovery/ProxySelectorModal.js b/src/routes/Plugin/Discovery/ProxySelectorModal.js index 39d717056..f8fa33068 100644 --- a/src/routes/Plugin/Discovery/ProxySelectorModal.js +++ b/src/routes/Plugin/Discovery/ProxySelectorModal.js @@ -23,7 +23,7 @@ import {getIntlContent} from "../../../utils/IntlUtils"; import EditableTable from './UpstreamTable'; import styles from "../index.less"; import ProxySelectorCopy from "./ProxySelectorCopy.js"; -import { findKeyByValue } from "../../../utils/utils"; +import {findKeyByValue} from "../../../utils/utils"; const FormItem = Form.Item; @@ -43,7 +43,8 @@ class ProxySelectorModal extends Component { this.state = { recordCount: this.props.recordCount, upstreams: this.props.discoveryUpstreams, - zkjson: JSON.parse(this.props.zkProps), + discoveryDicts: this.props.discoveryDicts, + configPropsJson: {}, pluginHandleList: [], visible: false, discoveryHandler: null, @@ -55,7 +56,7 @@ class ProxySelectorModal extends Component { const { isAdd, isSetConfig, tcpType, data, pluginId, dispatch } = this.props; const { props } = this.props.data || {}; if (!isAdd || isSetConfig) { - this.setState({zkjson: JSON.parse(data.discovery.props)}) + this.setState({configPropsJson: JSON.parse(data.discovery.props)}) dispatch({ type: 'discovery/saveGlobalType', payload: { @@ -66,7 +67,7 @@ class ProxySelectorModal extends Component { dispatch({ type: 'discovery/saveGlobalType', payload: { - chosenType: null + chosenType: '' } }); } @@ -93,13 +94,13 @@ class ProxySelectorModal extends Component { handleSubmit = e => { const {form, handleOk} = this.props; - const { zkjson, upstreams, pluginHandleList, defaultValueList } = this.state; + const { configPropsJson, upstreams, pluginHandleList, defaultValueList } = this.state; e.preventDefault(); form.validateFieldsAndScroll((err, values) => { if (!err) { let {name, forwardPort, listenerNode, serverList, discoveryType} = values; const discoveryPropsJson = {}; - Object.entries(zkjson).forEach(([key]) => { + Object.entries(configPropsJson).forEach(([key]) => { discoveryPropsJson[key] = form.getFieldValue(key); }); const discoveryProps = JSON.stringify(discoveryPropsJson); // 将字段值转换为JSON字符串 @@ -172,8 +173,8 @@ class ProxySelectorModal extends Component { render() { - const { tcpType, form, handleCancel, isSetConfig, isAdd, chosenType } = this.props; - const {recordCount, upstreams, zkjson, pluginHandleList, visible, discoveryHandler, defaultValueList } = this.state; + const { tcpType, form, handleCancel, isSetConfig, isAdd, chosenType, dispatch } = this.props; + const {recordCount, upstreams, pluginHandleList, visible, discoveryHandler, defaultValueList, discoveryDicts, configPropsJson } = this.state; const {getFieldDecorator} = form; const { name, forwardPort, listenerNode, discovery, handler } = this.props.data || {}; const labelWidth = 200; @@ -185,7 +186,6 @@ class ProxySelectorModal extends Component { sm: { span: 19 } } }; - console.log("handlerhere", handler) const columns = [ { title: 'protocol', @@ -213,6 +213,13 @@ class ProxySelectorModal extends Component { }, ]; + // let propsEntries = propsJson; + // if(isAdd){ + // let configProps = discoveryDicts.filter(item => item.dictName === chosenType); + // propsEntries = JSON.parse(configProps[0]?.dictValue || "{}"); + // console.log("propsEntries", propsEntries) + // } + if (discoveryHandler === null) { return
    Loading...
    ; } @@ -495,41 +502,7 @@ class ProxySelectorModal extends Component { )); } - - // if (Object.keys(hh).length !== 0) { - // Object.entries(hh).forEach(([key]) => { - // let value = hh[key]; - // let field = { [value]: key }; // 使用动态键来设置字段值 - // form.setFieldsValue(field); - // }); - // } - - // else if(defaultValueJson !== null) { - // return Object.keys(defaultValueJson).map(key => ( - //
  • - // - // {getFieldDecorator(defaultValueJson[key], { - // rules, - // initialValue: key - // })( - // - // {defaultValueJson[key]} - // - // } - // placeholder={`Your ${defaultValueJson[key]}`} - // key={defaultValueJson[key]} - // /> - // )} - // - //
    • - // )); - // } - // 默认情况下，以
  • 展示整个defaultValue对象 - // return
  • {JSON.stringify(defaultValue)}
    • ; } - // let required = discoveryHandler.required; })()} @@ -546,12 +519,26 @@ class ProxySelectorModal extends Component { , @@ -602,6 +589,7 @@ class ProxySelectorModal extends Component { {/* style={{ height: '100px' }} */} {/* />)} */} {/* */} +
    {getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS")} : @@ -609,7 +597,7 @@ class ProxySelectorModal extends Component {
    - {Object.entries(zkjson).map(([key, value]) => ( + {Object.entries(configPropsJson).map(([key, value]) => (
    {getFieldDecorator(key, { diff --git a/src/routes/Plugin/Discovery/index.js b/src/routes/Plugin/Discovery/index.js index 936d1c469..c31654805 100644 --- a/src/routes/Plugin/Discovery/index.js +++ b/src/routes/Plugin/Discovery/index.js @@ -46,12 +46,12 @@ export default class TCPProxy extends Component { name: '', forwardPort: '', type: 'tcp', - props: '', + props: {}, listenerNode: '', handler: {}, discovery: { serverList: '', - props: '' + props: {} }, discoveryUpstreams: [ // { @@ -349,6 +349,7 @@ export default class TCPProxy extends Component { tcpType={tcpType} isAdd={true} isSetConfig={isSetConfig} + discoveryDicts={discoveryDics} zkProps={discoveryDics[0].dictValue} selectorProps={selectorProps} handlerProps={handlerProps} @@ -505,7 +506,6 @@ export default class TCPProxy extends Component { text: this.state.isPluginEnabled ? getIntlContent("SHENYU.COMMON.OPEN") : getIntlContent("SHENYU.COMMON.CLOSE"), color: this.state.isPluginEnabled ? 'green' : 'red' } - return ( <>
    From b5b65fb328b7b71781aff666b0031326f722b378 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Sat, 15 Jul 2023 23:42:44 +0800 Subject: [PATCH 05/14] fix: modify the display of the discovery props --- .../Plugin/Discovery/DiscoveryConfigModal.js | 51 ++--- .../Plugin/Discovery/ProxySelectorModal.js | 212 +++++++----------- src/routes/Plugin/Discovery/TcpCard.js | 4 +- src/routes/Plugin/Discovery/UpstreamTable.js | 1 - src/routes/Plugin/Discovery/index.js | 30 +-- 5 files changed, 121 insertions(+), 177 deletions(-) diff --git a/src/routes/Plugin/Discovery/DiscoveryConfigModal.js b/src/routes/Plugin/Discovery/DiscoveryConfigModal.js index c6cd946e4..657aa862a 100644 --- a/src/routes/Plugin/Discovery/DiscoveryConfigModal.js +++ b/src/routes/Plugin/Discovery/DiscoveryConfigModal.js @@ -30,37 +30,41 @@ const FormItem = Form.Item; class DiscoveryConfigModal extends Component { state = { - zkjson: JSON.parse(this.props.zkProps) + discoveryDicts: this.props.discoveryDicts, + configPropsJson: {}, }; componentDidMount() { - const { isSetConfig, data } = this.props; + const { isSetConfig, data, dispatch } = this.props; + const { discoveryDicts } = this.state; if (!isSetConfig) { - this.props.dispatch({ + let configProps = discoveryDicts.filter(item => item.dictName === 'zookeeper'); + let propsEntries = JSON.parse(configProps[0]?.dictValue || "{}"); + this.setState({configPropsJson: propsEntries}) + dispatch({ type: 'discovery/saveGlobalType', payload: { chosenType: null } }); }else{ - this.setState({zkjson: JSON.parse(data.props)}) + this.setState({configPropsJson: JSON.parse(data.props)}) } } handleSubmit = e => { const { form, handleOk } = this.props; - const { zkjson } = this.state; + const { configPropsJson } = this.state; e.preventDefault(); form.validateFieldsAndScroll((err, values) => { if (!err) { let { name, serverList, tcpType } = values; const propsjson = {}; - Object.entries(zkjson).forEach(([key]) => { + Object.entries(configPropsJson).forEach(([key]) => { propsjson[key] = form.getFieldValue(key); }); - const props = JSON.stringify(propsjson); // 将字段值转换为JSON字符串 - console.log("props", props); // 打印JSON字符串，或根据您的需求进行处理 + const props = JSON.stringify(propsjson); handleOk({ name, serverList, props, tcpType}); } }); @@ -76,10 +80,10 @@ class DiscoveryConfigModal extends Component { render() { - const { handleCancel, form, data, isSetConfig, handleConfigDelete } = this.props + const { handleCancel, form, data, isSetConfig, handleConfigDelete, dispatch } = this.props const { getFieldDecorator } = form; const { name, serverList, type: tcpType, id} = data || {}; - const { zkjson } = this.state; + const { configPropsJson, discoveryDicts } = this.state; const formItemLayout = { labelCol: { sm: { span: 4 } @@ -131,12 +135,18 @@ class DiscoveryConfigModal extends Component { })( , @@ -160,15 +170,6 @@ class DiscoveryConfigModal extends Component { />)} - {/* */} - {/* {getFieldDecorator('props', { */} - {/* initialValue: chosenType === 'zookeeper' && isSetConfig === false ? zkProps : props */} - {/* })()} */} - {/* */} -
    {getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS")} : @@ -176,7 +177,7 @@ class DiscoveryConfigModal extends Component {
    - {Object.entries(zkjson).map(([key, value]) => ( + {Object.entries(configPropsJson).map(([key, value]) => (
    {getFieldDecorator(key, { diff --git a/src/routes/Plugin/Discovery/ProxySelectorModal.js b/src/routes/Plugin/Discovery/ProxySelectorModal.js index f8fa33068..808c52b42 100644 --- a/src/routes/Plugin/Discovery/ProxySelectorModal.js +++ b/src/routes/Plugin/Discovery/ProxySelectorModal.js @@ -54,7 +54,9 @@ class ProxySelectorModal extends Component { componentDidMount() { const { isAdd, isSetConfig, tcpType, data, pluginId, dispatch } = this.props; + const { discoveryDicts } = this.state; const { props } = this.props.data || {}; + if (!isAdd || isSetConfig) { this.setState({configPropsJson: JSON.parse(data.discovery.props)}) dispatch({ @@ -64,6 +66,9 @@ class ProxySelectorModal extends Component { } }); }else{ + let configProps = discoveryDicts.filter(item => item.dictName === 'zookeeper'); + let propsEntries = JSON.parse(configProps[0]?.dictValue || "{}"); + this.setState({configPropsJson: propsEntries}) dispatch({ type: 'discovery/saveGlobalType', payload: { @@ -71,13 +76,14 @@ class ProxySelectorModal extends Component { } }); } + let type = 1; dispatch({ type: "pluginHandle/fetchByPluginId", payload: { pluginId, type, - handle: props, + handle: Object.keys(props).length === 0 ? '' : props, isHandleArray: false, callBack: (pluginHandles) => { const filteredArray = pluginHandles[0].filter(item => item.field !== 'discoveryHandler'); @@ -103,9 +109,7 @@ class ProxySelectorModal extends Component { Object.entries(configPropsJson).forEach(([key]) => { discoveryPropsJson[key] = form.getFieldValue(key); }); - const discoveryProps = JSON.stringify(discoveryPropsJson); // 将字段值转换为JSON字符串 - console.log("discoveryProps", discoveryProps); // 打印JSON字符串，或根据您的需求进行处理 - + const discoveryProps = JSON.stringify(discoveryPropsJson); let handler = {}; if ( defaultValueList !== null) { defaultValueList.forEach(item => { @@ -114,18 +118,13 @@ class ProxySelectorModal extends Component { } }); } - let handleResult = []; handleResult[0] = {}; pluginHandleList[0].forEach(item => { handleResult[0][item.field] = values[item.field + 0]; }); - handler = JSON.stringify(handler); let props = JSON.stringify(handleResult[0]); - - console.log("props", props) - console.log("handler", handler) handleOk({name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, discoveryType, upstreams}); } }); @@ -174,8 +173,8 @@ class ProxySelectorModal extends Component { render() { const { tcpType, form, handleCancel, isSetConfig, isAdd, chosenType, dispatch } = this.props; - const {recordCount, upstreams, pluginHandleList, visible, discoveryHandler, defaultValueList, discoveryDicts, configPropsJson } = this.state; - const {getFieldDecorator} = form; + const { recordCount, upstreams, pluginHandleList, visible, discoveryHandler, defaultValueList, discoveryDicts, configPropsJson } = this.state; + const { getFieldDecorator } = form; const { name, forwardPort, listenerNode, discovery, handler } = this.props.data || {}; const labelWidth = 200; const formItemLayout = { @@ -213,13 +212,6 @@ class ProxySelectorModal extends Component { }, ]; - // let propsEntries = propsJson; - // if(isAdd){ - // let configProps = discoveryDicts.filter(item => item.dictName === chosenType); - // propsEntries = JSON.parse(configProps[0]?.dictValue || "{}"); - // console.log("propsEntries", propsEntries) - // } - if (discoveryHandler === null) { return
    Loading...
    ; } @@ -275,15 +267,6 @@ class ProxySelectorModal extends Component { />)}     - {/* */} - {/* {getFieldDecorator('props', { */} - {/* initialValue: isAdd === true ? selectorProps : props */} - {/* })()} */} - {/* */} - - -
    -
    -
      - {(() => { - if(discoveryHandler != null ){ - let item = discoveryHandler[0]; - let checkRule = item.checkRule; - let required = item.required === "1"; - let rules = []; - if (required) { - rules.push({ - required: { required }, - message: - getIntlContent("SHENYU.COMMON.PLEASEINPUT") + - item.label - }); - } - if (checkRule) { - rules.push({ - // eslint-disable-next-line no-eval - pattern: eval(checkRule), - message: `${getIntlContent( - "SHENYU.PLUGIN.RULE.INVALID" - )}:(${checkRule})` - }); - } - if (defaultValueList != null) { - return defaultValueList.map((value, index) => ( -
    • - - {getFieldDecorator(value, { - initialValue: isAdd === true ? findKeyByValue(handler, value): findKeyByValue(JSON.parse(handler), value), - rules - })( - - {value} -
    - } - placeholder={`Your ${value}`} - key={value} - /> - )} - - - )); - } - } - })()} - -
    - -     - @@ -529,16 +439,9 @@ class ProxySelectorModal extends Component { let configProps = discoveryDicts.filter(item => item.dictName === value); let propsEntries = JSON.parse(configProps[0]?.dictValue || "{}"); - console.log("propsEntries", propsEntries) this.setState({configPropsJson: propsEntries}) - - // let tmp = discoveryDicts.filter(item => item.dictName === value); - // let tmpEntries = JSON.parse(tmp[0]?.dictValue || "{}"); - // - // console.log("tmpEntries", tmpEntries) - // this.setState({propsJson: tmpEntries}) + } } - } > {this.handleOptions()} , @@ -557,17 +460,78 @@ class ProxySelectorModal extends Component { />)} - {/* */} - {/* {getFieldDecorator('handler', { */} - {/* rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.HANDLER.INPUT")}], */} - {/* initialValue: isAdd === true ? handlerProps : handler */} - {/* })()} */} - {/* */} - - + +
    +
    +
      + {(() => { + if(discoveryHandler != null ){ + let item = discoveryHandler[0]; + let checkRule = item.checkRule; + let required = item.required === "1"; + let rules = []; + if (required) { + rules.push({ + required: { required }, + message: + getIntlContent("SHENYU.COMMON.PLEASEINPUT") + + item.label + }); + } + if (checkRule) { + rules.push({ + // eslint-disable-next-line no-eval + pattern: eval(checkRule), + message: `${getIntlContent( + "SHENYU.PLUGIN.RULE.INVALID" + )}:(${checkRule})` + }); + } + if (defaultValueList != null) { + return defaultValueList.map((value, index) => ( +
    • + + {getFieldDecorator(value, { + initialValue: isAdd === true ? findKeyByValue(handler, value): findKeyByValue(JSON.parse(handler), value), + rules + })( + + {value} +
    + } + placeholder={`Your ${value}`} + key={value} + /> + )} + + + )); + } + } + })()} + +
    + +     { isSetConfig !== true ? ( @@ -581,15 +545,6 @@ class ProxySelectorModal extends Component { />)} - {/* */} - {/* {getFieldDecorator('discoveryProps', { */} - {/* initialValue: chosenType === 'zookeeper' && isAdd === true ? zkProps : discovery.props */} - {/* })()} */} - {/* */} -
    {getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS")} : @@ -614,7 +569,6 @@ class ProxySelectorModal extends Component {
    - ) : null } diff --git a/src/routes/Plugin/Discovery/TcpCard.js b/src/routes/Plugin/Discovery/TcpCard.js index 0d10e269d..88cff7b51 100644 --- a/src/routes/Plugin/Discovery/TcpCard.js +++ b/src/routes/Plugin/Discovery/TcpCard.js @@ -23,8 +23,6 @@ import tcpStyles from "./tcp.less"; import { formatTimestamp } from "../../../utils/utils"; import AuthButton from "../../../utils/AuthButton"; - - export class TcpCard extends Component { renderCardItems = () => { @@ -49,7 +47,7 @@ export class TcpCard extends Component { } render() { - const {updateSelector, data, handleDelete, handleRefresh} = this.props + const { updateSelector, data, handleDelete, handleRefresh } = this.props return ( {data.name}} diff --git a/src/routes/Plugin/Discovery/UpstreamTable.js b/src/routes/Plugin/Discovery/UpstreamTable.js index 728a78660..02f1f522a 100644 --- a/src/routes/Plugin/Discovery/UpstreamTable.js +++ b/src/routes/Plugin/Discovery/UpstreamTable.js @@ -211,4 +211,3 @@ export default class EditableTable extends Component { } } -// export default EditableTable; diff --git a/src/routes/Plugin/Discovery/index.js b/src/routes/Plugin/Discovery/index.js index c31654805..01b8607cf 100644 --- a/src/routes/Plugin/Discovery/index.js +++ b/src/routes/Plugin/Discovery/index.js @@ -29,11 +29,10 @@ import AuthButton from "../../../utils/AuthButton"; const {Search} = Input; const {Title} = Typography; -@connect(({global, discovery, loading, shenyuDict, pluginHandle}) => ({ +@connect(({global, discovery, loading, shenyuDict}) => ({ ...global, ...discovery, ...shenyuDict, - ...pluginHandle, loading: loading.effects["global/fetchPlatform"] })) export default class TCPProxy extends Component { @@ -128,7 +127,6 @@ export default class TCPProxy extends Component { return plugin && plugin.length > 0 ? plugin[0] : null; }; - togglePluginStatus = () => { const {dispatch, plugins} = this.props; const {pluginName} = this.state @@ -158,7 +156,6 @@ export default class TCPProxy extends Component { }); } - closeModal = () => { this.setState({popup: ""}); }; @@ -171,12 +168,12 @@ export default class TCPProxy extends Component { name: '', forwardPort: '', type: 'tcp', - props: '', + props: {}, listenerNode: '', handler: {}, discovery: { serverList: '', - props: '' + props: {} }, discoveryUpstreams: [ // { @@ -192,9 +189,8 @@ export default class TCPProxy extends Component { }; addConfiguration = () => { - const {dispatch} = this.props; + const {dispatch, typeEnums} = this.props; const {discoveryDics, pluginName} = this.state; - console.log("discoverydict", discoveryDics) dispatch({ type: "discovery/fetchDiscovery", payload: { @@ -212,10 +208,9 @@ export default class TCPProxy extends Component { popup: ( { const {name, serverList, props, tcpType} = values; @@ -320,8 +315,8 @@ export default class TCPProxy extends Component { addSelector = () => { - const {dispatch, currentPage, pageSize, plugins} = this.props; - const {cardData, selectorProps, handlerProps, discoveryDics, pluginName} = this.state; + const {dispatch, currentPage, pageSize, plugins, typeEnums} = this.props; + const {cardData, discoveryDics, pluginName} = this.state; const plugin = this.getPlugin(plugins, pluginName); dispatch({ type: "discovery/fetchDiscovery", @@ -343,16 +338,13 @@ export default class TCPProxy extends Component { { const {name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, discoveryType, upstreams} = values; dispatch({ @@ -395,7 +387,7 @@ export default class TCPProxy extends Component { } updateSelector = (id) => { - const {dispatch, selectorList, tcpType: discoveryType, currentPage, pageSize, plugins} = this.props; + const {dispatch, selectorList, tcpType: discoveryType, currentPage, pageSize, plugins, typeEnums} = this.props; const { discoveryDics, pluginName } = this.state; const data = selectorList.find(value => value.id === id) const plugin = this.getPlugin(plugins, pluginName); @@ -415,12 +407,12 @@ export default class TCPProxy extends Component { recordCount={updateArray.length} discoveryUpstreams={updateArray} tcpType={data.discovery.type} - typeEnums={this.props.typeEnums} + typeEnums={typeEnums} isAdd={false} isSetConfig={isSetConfig} data={data} pluginId={plugin.id} - zkProps={discoveryDics[0].dictValue} + discoveryDicts={discoveryDics} handleOk={values => { const {name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, upstreams} = values; dispatch({ From 1dc036d0615787b374fc6b5a3d1035f5e3e04b81 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Sat, 15 Jul 2023 23:49:53 +0800 Subject: [PATCH 06/14] fix: English grammar bug --- src/locales/en-US.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 50d8da959..e65a07622 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -25,7 +25,7 @@ "SHENYU.COMMON.CLOSE": "Close", "SHENYU.COMMON.OPERAT": "Operation", "SHENYU.COMMON.CHANGE": "Modify", - "SHENYU.COMMON.DELETE": "Are You Sure to delete?", + "SHENYU.COMMON.DELETE": "Are You Sure to Delete?", "SHENYU.COMMON.DELETE.NAME": "Delete", "SHENYU.COMMON.SURE": "Sure", "SHENYU.COMMON.CALCEL": "Cancel", From 2e673fb178fee05fdd6b04e26c956d923518a634 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Sun, 16 Jul 2023 21:34:43 +0800 Subject: [PATCH 07/14] fix: json parse bug --- src/routes/Plugin/Discovery/ProxySelectorModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Plugin/Discovery/ProxySelectorModal.js b/src/routes/Plugin/Discovery/ProxySelectorModal.js index 808c52b42..cec466905 100644 --- a/src/routes/Plugin/Discovery/ProxySelectorModal.js +++ b/src/routes/Plugin/Discovery/ProxySelectorModal.js @@ -58,7 +58,7 @@ class ProxySelectorModal extends Component { const { props } = this.props.data || {}; if (!isAdd || isSetConfig) { - this.setState({configPropsJson: JSON.parse(data.discovery.props)}) + this.setState({configPropsJson: isSetConfig === true? {} : JSON.parse(data.discovery.props)}) dispatch({ type: 'discovery/saveGlobalType', payload: { From 93e8cb724ca59883eb1a300ddd6a8351595577ae Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Sun, 16 Jul 2023 23:01:05 +0800 Subject: [PATCH 08/14] fix: disable form field when modified --- src/routes/Plugin/Discovery/DiscoveryConfigModal.js | 3 +++ src/routes/Plugin/Discovery/ProxySelectorCopy.js | 3 ++- src/routes/Plugin/Discovery/ProxySelectorModal.js | 10 ++++++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/routes/Plugin/Discovery/DiscoveryConfigModal.js b/src/routes/Plugin/Discovery/DiscoveryConfigModal.js index 657aa862a..1868f76f3 100644 --- a/src/routes/Plugin/Discovery/DiscoveryConfigModal.js +++ b/src/routes/Plugin/Discovery/DiscoveryConfigModal.js @@ -135,6 +135,7 @@ class DiscoveryConfigModal extends Component { })( )} @@ -184,6 +186,7 @@ class DiscoveryConfigModal extends Component { initialValue: value })( diff --git a/src/routes/Plugin/Discovery/ProxySelectorCopy.js b/src/routes/Plugin/Discovery/ProxySelectorCopy.js index cfb7e0c07..61cd59bda 100644 --- a/src/routes/Plugin/Discovery/ProxySelectorCopy.js +++ b/src/routes/Plugin/Discovery/ProxySelectorCopy.js @@ -80,7 +80,7 @@ class ProxySelectorCopy extends Component { } render() { - const { visible = false } = this.props; + const { visible = false, disabled } = this.props; const { loading } = this.state; return ( )} @@ -337,6 +340,7 @@ class ProxySelectorModal extends Component { initialValue: defaultValue })( {item.label} @@ -361,6 +365,7 @@ class ProxySelectorModal extends Component { initialValue: defaultValue })( {item.label} @@ -456,6 +462,7 @@ class ProxySelectorModal extends Component { rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE.INPUT")}], initialValue: listenerNode })()} @@ -513,6 +520,7 @@ class ProxySelectorModal extends Component { rules })( {value} @@ -541,6 +549,7 @@ class ProxySelectorModal extends Component { rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST.INPUT")}], initialValue: discovery.serverList })()} @@ -559,6 +568,7 @@ class ProxySelectorModal extends Component { initialValue: value })( From 7f1f7ded873fd100ea43a69b686c20009cf93ce0 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Mon, 17 Jul 2023 17:58:40 +0800 Subject: [PATCH 09/14] fix: delete the 'id' field in payload --- src/routes/Plugin/Discovery/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/routes/Plugin/Discovery/index.js b/src/routes/Plugin/Discovery/index.js index 01b8607cf..de39c86f2 100644 --- a/src/routes/Plugin/Discovery/index.js +++ b/src/routes/Plugin/Discovery/index.js @@ -326,11 +326,9 @@ export default class TCPProxy extends Component { }, callback: discoveryConfigList => { let tcpType = ''; - let id = null; let isSetConfig = false; if (discoveryConfigList !== null) { tcpType = discoveryConfigList.type; - id = discoveryConfigList.id isSetConfig = true; } this.setState({ @@ -358,7 +356,6 @@ export default class TCPProxy extends Component { handler, pluginName, discovery: { - id, level: "0", // 0 selector pluginName, discoveryType, From 735617088cc2a192d35050b6c1957416137d1243 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Mon, 17 Jul 2023 21:35:49 +0800 Subject: [PATCH 10/14] fix: re-add the 'id' field in payload --- src/routes/Plugin/Discovery/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/routes/Plugin/Discovery/index.js b/src/routes/Plugin/Discovery/index.js index de39c86f2..1f1ee7a29 100644 --- a/src/routes/Plugin/Discovery/index.js +++ b/src/routes/Plugin/Discovery/index.js @@ -326,9 +326,11 @@ export default class TCPProxy extends Component { }, callback: discoveryConfigList => { let tcpType = ''; + let id = null; let isSetConfig = false; if (discoveryConfigList !== null) { tcpType = discoveryConfigList.type; + id = discoveryConfigList.id; isSetConfig = true; } this.setState({ @@ -356,6 +358,7 @@ export default class TCPProxy extends Component { handler, pluginName, discovery: { + id, level: "0", // 0 selector pluginName, discoveryType, From 61575a97296a41dfdcf7bd5f98498827b11bf595 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Tue, 18 Jul 2023 17:46:22 +0800 Subject: [PATCH 11/14] fix: delete the semicolon to solve the conflict --- src/routes/Plugin/Discovery/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Plugin/Discovery/index.js b/src/routes/Plugin/Discovery/index.js index 1f1ee7a29..01b8607cf 100644 --- a/src/routes/Plugin/Discovery/index.js +++ b/src/routes/Plugin/Discovery/index.js @@ -330,7 +330,7 @@ export default class TCPProxy extends Component { let isSetConfig = false; if (discoveryConfigList !== null) { tcpType = discoveryConfigList.type; - id = discoveryConfigList.id; + id = discoveryConfigList.id isSetConfig = true; } this.setState({ From 5cf2c3b9cc27e7cde9531fba56645176e89cc463 Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Tue, 18 Jul 2023 19:56:06 +0800 Subject: [PATCH 12/14] refactor: remove redundant code --- src/routes/Plugin/Discovery/ProxySelectorModal.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/routes/Plugin/Discovery/ProxySelectorModal.js b/src/routes/Plugin/Discovery/ProxySelectorModal.js index fd486c8a5..d05bb16f7 100644 --- a/src/routes/Plugin/Discovery/ProxySelectorModal.js +++ b/src/routes/Plugin/Discovery/ProxySelectorModal.js @@ -212,9 +212,6 @@ class ProxySelectorModal extends Component { }, ]; - if (discoveryHandler === null) { - return
    Loading...
    ; - } return ( Date: Tue, 18 Jul 2023 20:57:00 +0800 Subject: [PATCH 13/14] fix: add consideration for empty configuration --- .../Plugin/Discovery/ProxySelectorModal.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/routes/Plugin/Discovery/ProxySelectorModal.js b/src/routes/Plugin/Discovery/ProxySelectorModal.js index d05bb16f7..68cd74f3f 100644 --- a/src/routes/Plugin/Discovery/ProxySelectorModal.js +++ b/src/routes/Plugin/Discovery/ProxySelectorModal.js @@ -86,13 +86,15 @@ class ProxySelectorModal extends Component { handle: Object.keys(props).length === 0 ? '' : props, isHandleArray: false, callBack: (pluginHandles) => { - const filteredArray = pluginHandles[0].filter(item => item.field !== 'discoveryHandler'); - const handlerArray = pluginHandles[0].filter(item => item.field === 'discoveryHandler'); - pluginHandles[0] = filteredArray; - this.setState({discoveryHandler: handlerArray}); - this.setState({ pluginHandleList: pluginHandles }); - let defaultValue = handlerArray[0].defaultValue; - this.setState({ defaultValueList: defaultValue.split(",") }); + if (Object.keys(pluginHandles).length > 0) { + const filteredArray = pluginHandles[0].filter(item => item.field !== 'discoveryHandler'); + const handlerArray = pluginHandles[0].filter(item => item.field === 'discoveryHandler'); + pluginHandles[0] = filteredArray; + this.setState({discoveryHandler: handlerArray}); + this.setState({ pluginHandleList: pluginHandles }); + let defaultValue = handlerArray[0].defaultValue; + this.setState({ defaultValueList: defaultValue.split(",") }); + } } } }); @@ -120,9 +122,11 @@ class ProxySelectorModal extends Component { } let handleResult = []; handleResult[0] = {}; - pluginHandleList[0].forEach(item => { - handleResult[0][item.field] = values[item.field + 0]; - }); + if(Object.keys(pluginHandleList).length > 0){ + pluginHandleList[0].forEach(item => { + handleResult[0][item.field] = values[item.field + 0]; + }); + } handler = JSON.stringify(handler); let props = JSON.stringify(handleResult[0]); handleOk({name, forwardPort, props, listenerNode, handler, discoveryProps, serverList, discoveryType, upstreams}); From e04ef1e3f9e2ed2d1e963de2112d3dedc2de4aba Mon Sep 17 00:00:00 2001 From: eurecalulu <1534972955@qq.com> Date: Tue, 18 Jul 2023 22:19:26 +0800 Subject: [PATCH 14/14] fix: delete console.log --- src/routes/Plugin/Common/Rule.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/routes/Plugin/Common/Rule.js b/src/routes/Plugin/Common/Rule.js index e6a6c0b41..ff8337b5a 100644 --- a/src/routes/Plugin/Common/Rule.js +++ b/src/routes/Plugin/Common/Rule.js @@ -54,7 +54,6 @@ class AddModal extends Component { multiRuleHandle, form: { setFieldsValue } } = this.props; - console.log("handle", handle) this.setState({ pluginHandleList: [] }); let type = 2; dispatch({ @@ -65,7 +64,6 @@ class AddModal extends Component { handle, isHandleArray: multiRuleHandle, callBack: (pluginHandles, useJSON) => { - // console.log("useJSON", useJSON) this.setState({ pluginHandleList: pluginHandles }, () => { if (useJSON) { setFieldsValue({ @@ -166,8 +164,6 @@ class AddModal extends Component { handleType, handleJSON } = values; - console.log("handleType", handleType) // handleType为1 - console.log("handleJSON", handleJSON) // handleType为undefined if (!err) { const submit = this.checkConditions(); if (submit) { @@ -197,7 +193,6 @@ class AddModal extends Component { } if (this.handleComponentRef) { // customizationRule - console.log("here") handle = this.handleComponentRef.getData(values); } @@ -434,7 +429,6 @@ class AddModal extends Component { if (customRulePage) { RuleHandleComponent = PluginRuleHandle[pluginName]; } else if (pluginHandleList) { - console.log("I'm here") RuleHandleComponent = CommonRuleHandle; }