This is an automated email from the ASF dual-hosted git repository.
fengzhenbing pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 4ebd4b7 Optimize page functionality.(#146) (#153)
4ebd4b7 is described below
commit 4ebd4b754d3b781b670a0240dd58cb895f094400
Author: dayu <[email protected]>
AuthorDate: Thu Nov 18 19:05:56 2021 +0800
Optimize page functionality.(#146) (#153)
Co-authored-by: wenyu.dai <“[email protected]”>
---
src/layouts/BasicLayout.js | 19 +-
src/locales/en-US.json | 1 +
src/locales/zh-CN.json | 1 +
src/models/pluginHandle.js | 87 ++++---
src/routes/Plugin/Common/CommonRuleHandle.js | 372 +++++++++++++++++----------
src/routes/Plugin/Common/Rule.js | 69 +++--
6 files changed, 349 insertions(+), 200 deletions(-)
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 48e5f24..3d51186 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -233,14 +233,17 @@ class BasicLayout extends React.PureComponent {
path: `/plug/${index}`,
authority: undefined,
icon: "unordered-list",
- children: menuMap[key].map(item => ({
- name: item.name,
- path: `/plug/${index}/${item.name}`,
- authority: undefined,
- id: item.id,
- locale: `SHENYU.MENU.PLUGIN.${item.name.toUpperCase()}`,
- exact: true
- }))
+ children: menuMap[key].map(item => {
+ const { name } = item;
+ return {
+ name: name.replace(name[0], name[0].toUpperCase()),
+ path: `/plug/${index}/${item.name}`,
+ authority: undefined,
+ id: item.id,
+ locale: `SHENYU.MENU.PLUGIN.${item.name.toUpperCase()}`,
+ exact: true
+ };
+ })
});
});
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index f3f78ed..6f45393 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -192,6 +192,7 @@
"SHENYU.PLUGIN.HANDLE.TIP": "At least one handle record",
"SHENYU.PLUGIN.RULE": "Rule(RegExp)",
"SHENYU.PLUGIN.RULE.INVALID": "Verification Rule Failed by RegExp",
+ "SHENYU.PLUGIN.RULE.JSON.INVALID": "Please Enter The Correct JSON String",
"SHENYU.PLUGIN.RULE.TIP":
"Please enter RegExp, start with /, and end with /,
eg：/^([1-9][0-9]{0,1}|100)$/",
"SHENYU.AUTH.EDITOR.RESOURCE": "EditResourceDetails",
diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
index 916dc83..4a73f45 100644
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -188,6 +188,7 @@
"SHENYU.PLUGIN.HANDLE.TIP": "至少一条处理记录",
"SHENYU.PLUGIN.RULE": "校验规则(正则)",
"SHENYU.PLUGIN.RULE.INVALID": "校验规则不通过(正则)",
+ "SHENYU.PLUGIN.RULE.JSON.INVALID": "请输入正确的JSON字符串",
"SHENYU.AUTH.EDITOR.RESOURCE": "编辑资源详情",
"SHENYU.PLUGIN.RULE.TIP":
"请输入正则表达式，以/开始，/结束；例：/^([1-9][0-9]{0,1}|100)$/",
diff --git a/src/models/pluginHandle.js b/src/models/pluginHandle.js
index 3ce9098..2fd9e81 100644
--- a/src/models/pluginHandle.js
+++ b/src/models/pluginHandle.js
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import {message} from "antd";
+import { message } from "antd";
import {
addPluginHandle,
batchDeletePluginHandle,
@@ -23,9 +23,9 @@ import {
findPluginHandle,
updatePluginHandle,
fetchPluginHandleByPluginId,
- getPluginDropDownList,
+ getPluginDropDownList
} from "../services/api";
-import {getIntlContent} from "../utils/IntlUtils";
+import { getIntlContent } from "../utils/IntlUtils";
export default {
namespace: "pluginHandle",
@@ -37,11 +37,11 @@ export default {
},
effects: {
- * fetch(params, {call, put}) {
- const {payload} = params;
+ *fetch(params, { call, put }) {
+ const { payload } = params;
const json = yield call(getAllPluginHandles, payload);
if (json.code === 200) {
- let {page, dataList} = json.data;
+ let { page, dataList } = json.data;
dataList = dataList.map(item => {
item.key = item.id;
return item;
@@ -59,7 +59,7 @@ export default {
const { payload, callback, fetchValue } = params;
const json = yield call(addPluginHandle, payload);
if (json.code === 200) {
- message.success(getIntlContent('SHENYU.COMMON.RESPONSE.ADD.SUCCESS'));
+ message.success(getIntlContent("SHENYU.COMMON.RESPONSE.ADD.SUCCESS"));
callback();
yield put({ type: "reload", fetchValue });
} else {
@@ -78,7 +78,9 @@ export default {
const { payload, callback, fetchValue } = params;
const json = yield call(updatePluginHandle, payload);
if (json.code === 200) {
-
message.success(getIntlContent('SHENYU.COMMON.RESPONSE.UPDATE.SUCCESS'));
+ message.success(
+ getIntlContent("SHENYU.COMMON.RESPONSE.UPDATE.SUCCESS")
+ );
callback();
yield put({ type: "reload", fetchValue });
} else {
@@ -90,7 +92,9 @@ export default {
const { list } = payload;
const json = yield call(batchDeletePluginHandle, { list });
if (json.code === 200) {
-
message.success(getIntlContent('SHENYU.COMMON.RESPONSE.DELETE.SUCCESS'));
+ message.success(
+ getIntlContent("SHENYU.COMMON.RESPONSE.DELETE.SUCCESS")
+ );
callback();
yield put({ type: "reload", fetchValue });
} else {
@@ -98,47 +102,67 @@ export default {
}
},
- * fetchByPluginId(params, {call}) {
- const {payload} = params;
+ *fetchByPluginId(params, { call }) {
+ const { payload } = params;
let handle = payload.handle;
let callback = payload.callBack;
let isHandleArray = payload.isHandleArray;
let handleJson;
- if (handle != null && handle !== "" && typeof (handle) !== "undefined"
&& handle.indexOf("{") !== -1) {
+ if (
+ handle != null &&
+ handle !== "" &&
+ typeof handle !== "undefined" &&
+ handle.indexOf("{") !== -1
+ ) {
handleJson = JSON.parse(handle);
}
const json = yield call(fetchPluginHandleByPluginId, payload);
if (json.code === 200) {
let length = 1;
- if(handleJson && Array.isArray(handleJson) && handleJson.length > 0){
+ if (handleJson && Array.isArray(handleJson) && handleJson.length > 0) {
length = handleJson.length;
}
let handleData = [];
- if(isHandleArray && Array.isArray(handleJson)){
+ if (isHandleArray && Array.isArray(handleJson)) {
handleData = handleJson;
- }else {
+ } else {
handleData = [handleJson];
}
let dataList = [];
- if(json.data&&json.data.length>0){
+ let useJSON = false;
+ if (json.data && json.data.length > 0) {
+ const fieldArr = json.data.map(v => v.field);
// eslint-disable-next-line no-plusplus
- for(let i = 0; i < length; i++){
+ for (let i = 0; i < length; i++) {
+ if (handleData[i]) {
+ const keys = Object.keys(handleData[i]);
+ let allKeys = [...fieldArr, ...keys];
+ allKeys = new Set(allKeys);
+ if (allKeys.size !== fieldArr.length) {
+ useJSON = true;
+ }
+ }
let dataItem = json.data.map(data => {
- let item = {...data};
+ let item = { ...data };
item.key = item.id;
- if (typeof (handleData[i]) === "undefined") {
+ if (typeof handleData[i] === "undefined") {
item.value = "";
- }else {
+ } else {
item.value = handleData[i][item.field];
}
- if(item.extObj != null && item.extObj !== "" && typeof
(item.extObj) !== "undefined" && item.extObj.indexOf("{") !== -1){
- let extObj = JSON.parse(item.extObj)
+ if (
+ item.extObj != null &&
+ item.extObj !== "" &&
+ typeof item.extObj !== "undefined" &&
+ item.extObj.indexOf("{") !== -1
+ ) {
+ let extObj = JSON.parse(item.extObj);
item.required = extObj.required;
- if(extObj.defaultValue || extObj.defaultValue === 0){
- if(item.dataType === 1){
+ if (extObj.defaultValue || extObj.defaultValue === 0) {
+ if (item.dataType === 1) {
item.defaultValue = Number(extObj.defaultValue);
- }else{
+ } else {
item.defaultValue = extObj.defaultValue;
}
}
@@ -149,12 +173,14 @@ export default {
});
dataList.push(dataItem);
}
+ } else {
+ useJSON = true;
}
- callback(dataList);
+ callback(dataList, useJSON);
}
},
- *fetchPluginList(_, { call, put }) {
+ *fetchPluginList(_, { call, put }) {
const json = yield call(getPluginDropDownList);
if (json.code === 200) {
let data = json.data;
@@ -165,8 +191,7 @@ export default {
}
});
}
- },
-
+ }
},
reducers: {
savePluginHandles(state, { payload }) {
@@ -186,8 +211,8 @@ export default {
savePluginDropDownList(state, { payload }) {
return {
...state,
- pluginDropDownList: payload.data,
+ pluginDropDownList: payload.data
};
- },
+ }
}
};
diff --git a/src/routes/Plugin/Common/CommonRuleHandle.js
b/src/routes/Plugin/Common/CommonRuleHandle.js
index d89bcc8..709d10c 100644
--- a/src/routes/Plugin/Common/CommonRuleHandle.js
+++ b/src/routes/Plugin/Common/CommonRuleHandle.js
@@ -17,154 +17,244 @@
import React, { Component } from "react";
import { Form, Select, Input, Button, Tooltip, Popconfirm } from "antd";
-import classnames from 'classnames';
+import classnames from "classnames";
import styles from "../index.less";
-import { getIntlContent } from '../../../utils/IntlUtils'
+import { getIntlContent } from "../../../utils/IntlUtils";
const FormItem = Form.Item;
const { Option } = Select;
-export default class CommonRuleHandle extends Component {
+const formItemLayout = {
+ labelCol: {
+ sm: { span: 3 }
+ },
+ wrapperCol: {
+ sm: { span: 21 }
+ }
+};
- render() {
- const labelWidth = 160
- const { pluginHandleList, multiRuleHandle, form } = this.props;
- const { getFieldDecorator } = form;
- return (
- <div className={styles.handleWrap}>
- <div className={styles.header}>
- <h3 style={{width:100}}>{getIntlContent("SHENYU.COMMON.DEAL")}:
</h3>
+export default class CommonRuleHandle extends Component {
+ render() {
+ const labelWidth = 160;
+ const { pluginHandleList, multiRuleHandle, form } = this.props;
+ const { getFieldDecorator, getFieldValue } = form;
+ return (
+ <FormItem
+ label={getIntlContent("SHENYU.COMMON.DEAL")}
+ {...formItemLayout}
+ >
+ <FormItem style={{ display: "none" }}>
+ {getFieldDecorator("handleType", {
+ initialValue: pluginHandleList.length ? "1" : "2"
+ })(<Input />)}
+ </FormItem>
+ <div
+ className={styles.handleWrap}
+ style={{
+ display: getFieldValue("handleType") === "1" ? "flex" : "none"
+ }}
+ >
+ <div>
+ {pluginHandleList.map((handleList, index) => {
+ return (
+ <div
+ key={index}
+ style={{
+ display: "flex",
+ justifyContent: "space-between",
+ flexDirection: "row"
+ }}
+ >
+ <ul
+ className={classnames({
+ [styles.handleUl]: true,
+ [styles.springUl]: true
+ })}
+ style={{ width: "100%" }}
+ >
+ {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 (
+ <li key={fieldName}>
+ <Tooltip title={placeholder}>
+ <FormItem>
+ {getFieldDecorator(fieldName, {
+ rules,
+ initialValue: defaultValue
+ })(
+ <Input
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {item.label}
+ </div>
+ }
+ placeholder={placeholder}
+ key={fieldName}
+ type="number"
+ />
+ )}
+ </FormItem>
+ </Tooltip>
+ </li>
+ );
+ } else if (item.dataType === 3 && item.dictOptions) {
+ return (
+ <li key={fieldName}>
+ <Tooltip title={placeholder}>
+ <FormItem>
+ {getFieldDecorator(fieldName, {
+ rules,
+ initialValue: defaultValue
+ })(
+ <Select
+ placeholder={placeholder}
+ style={{ width: 260 }}
+ >
+ {item.dictOptions.map(option => {
+ return (
+ <Option
+ key={option.dictValue}
+ value={
+ option.dictValue === "true"
+ ? true
+ : option.dictValue === "false"
+ ? false
+ : option.dictValue
+ }
+ >
+ {option.dictName} ({item.label})
+ </Option>
+ );
+ })}
+ </Select>
+ )}
+ </FormItem>
+ </Tooltip>
+ </li>
+ );
+ } else {
+ return (
+ <li key={fieldName}>
+ <Tooltip title={placeholder}>
+ <FormItem>
+ {getFieldDecorator(fieldName, {
+ rules,
+ initialValue: defaultValue
+ })(
+ <Input
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {item.label}
+ </div>
+ }
+ placeholder={placeholder}
+ key={fieldName}
+ />
+ )}
+ </FormItem>
+ </Tooltip>
+ </li>
+ );
+ }
+ })}
+ </ul>
+ {multiRuleHandle && (
+ <div style={{ width: 80 }}>
+ <Popconfirm
+ title={getIntlContent("SHENYU.COMMON.DELETE")}
+ placement="bottom"
+ onCancel={e => {
+ e.stopPropagation();
+ }}
+ onConfirm={e => {
+ e.stopPropagation();
+ this.handleDeleteHandle(index);
+ }}
+ okText={getIntlContent("SHENYU.COMMON.SURE")}
+ cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
+ >
+ <Button type="danger">
+ {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
+ </Button>
+ </Popconfirm>
+ </div>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ {multiRuleHandle && (
+ <div style={{ width: 80 }}>
+ <Button onClick={this.handleAddHandle} type="primary">
+ {getIntlContent("SHENYU.COMMON.ADD")}
+ </Button>
</div>
- <div>
+ )}
+ </div>
+ <FormItem
+ style={{
+ display: getFieldValue("handleType") === "2" ? "block" : "none"
+ }}
+ >
+ {getFieldDecorator("handleJSON", {
+ rules: [
{
- pluginHandleList.map((handleList,index) =>{
- return (
- <div key={index}
style={{display:"flex",justifyContent:"space-between",flexDirection:"row"}}>
- <ul
- className={classnames({
- [styles.handleUl]: true,
- [styles.springUl]: true
- })}
- style={{width:"100%"}}
- >
- {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 (
- <li key={fieldName}>
- <Tooltip title={placeholder}>
- <FormItem>
- {getFieldDecorator(fieldName, {
- rules,
- initialValue: defaultValue,
- })(
- <Input
- addonBefore={<div style={{width:
labelWidth}}>{item.label}</div>}
- placeholder={placeholder}
- key={fieldName}
- type="number"
- />)
- }
- </FormItem>
- </Tooltip>
- </li>
- )
- } else if (item.dataType === 3 &&
item.dictOptions) {
- return (
- <li key={fieldName}>
- <Tooltip title={placeholder}>
- <FormItem>
- {getFieldDecorator(fieldName, {
- rules,
- initialValue: defaultValue,
- })(
- <Select
- placeholder={placeholder}
- style={{ width: 260}}
- >
- {item.dictOptions.map(option => {
- return (
- <Option key={option.dictValue}
value={option.dictValue==="true"?true:(option.dictValue==="false"?false:option.dictValue)}>
- {option.dictName}
({item.label})
- </Option>
- );
- })}
- </Select>
- )}
- </FormItem>
- </Tooltip>
- </li>
- )
- } else {
- return (
- <li key={fieldName}>
- <Tooltip title={placeholder}>
- <FormItem>
- {getFieldDecorator(fieldName, {
- rules,
- initialValue: defaultValue,
- })(
- <Input
- addonBefore={<div style={{width:
labelWidth}}>{item.label}</div>}
- placeholder={placeholder}
- key={fieldName}
- />
- )}
- </FormItem>
- </Tooltip>
- </li>
- )
- }
- })}
- </ul>
- {multiRuleHandle && (
- <div style={{width:80}}>
- <Popconfirm
- title={getIntlContent("SHENYU.COMMON.DELETE")}
- placement='bottom'
- onCancel={(e) => {
- e.stopPropagation()
- }}
- onConfirm={(e) => {
- e.stopPropagation()
- this.handleDeleteHandle(index);
- }}
- okText={getIntlContent("SHENYU.COMMON.SURE")}
-
cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
- >
- <Button
- type="danger"
- >
- {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
- </Button>
- </Popconfirm>
- </div>
- )}
- </div>
- )
- })
+ validator(rule, value, callback) {
+ if (
+ getFieldValue("handleType") === "1" ||
+ typeof value !== "string"
+ ) {
+ callback();
+ }
+ try {
+ const obj = JSON.parse(value);
+ if (obj.constructor === Object) {
+ callback();
+ } else {
+ callback(
+ getIntlContent("SHENYU.PLUGIN.RULE.JSON.INVALID")
+ );
+ }
+ } catch (e) {
+
callback(getIntlContent("SHENYU.PLUGIN.RULE.JSON.INVALID"));
+ }
+ }
}
- </div>
- {multiRuleHandle &&<div style={{width:80}}><Button
onClick={this.handleAddHandle}
type="primary">{getIntlContent("SHENYU.COMMON.ADD")}</Button></div>}
- </div>
- );
- }
+ ]
+ })(<Input.TextArea />)}
+ </FormItem>
+ </FormItem>
+ );
+ }
}
diff --git a/src/routes/Plugin/Common/Rule.js b/src/routes/Plugin/Common/Rule.js
index 493bcf0..7b38af4 100644
--- a/src/routes/Plugin/Common/Rule.js
+++ b/src/routes/Plugin/Common/Rule.js
@@ -47,7 +47,13 @@ class AddModal extends Component {
}
componentWillMount() {
- const { dispatch, pluginId, handle, multiRuleHandle } = this.props;
+ const {
+ dispatch,
+ pluginId,
+ handle,
+ multiRuleHandle,
+ form: { setFieldsValue }
+ } = this.props;
this.setState({ pluginHandleList: [] });
let type = 2;
dispatch({
@@ -57,8 +63,15 @@ class AddModal extends Component {
type,
handle,
isHandleArray: multiRuleHandle,
- callBack: pluginHandles => {
- this.setPluginHandleList(pluginHandles);
+ callBack: (pluginHandles, useJSON) => {
+ this.setState({ pluginHandleList: pluginHandles }, () => {
+ if (useJSON) {
+ setFieldsValue({
+ handleType: "2",
+ handleJSON: handle
+ });
+ }
+ });
}
}
});
@@ -105,10 +118,6 @@ class AddModal extends Component {
});
};
- setPluginHandleList = pluginHandles => {
- this.setState({ pluginHandleList: pluginHandles });
- };
-
checkConditions = () => {
let { ruleConditions } = this.state;
let result = true;
@@ -146,23 +155,43 @@ class AddModal extends Component {
const { ruleConditions, pluginHandleList, customRulePage } = this.state;
form.validateFieldsAndScroll((err, values) => {
- const { name, matchMode, loged, enabled } = values;
+ const {
+ name,
+ matchMode,
+ loged,
+ enabled,
+ handleType,
+ handleJSON
+ } = values;
if (!err) {
const submit = this.checkConditions();
if (submit) {
let handle;
+
if (!customRulePage) {
- handle = [];
- pluginHandleList.forEach((handleList, index) => {
- handle[index] = {};
- handleList.forEach(item => {
- handle[index][item.field] = values[item.field + index];
- });
- });
- handle = multiRuleHandle
- ? JSON.stringify(handle)
- : JSON.stringify(handle[0]);
- } else if (this.handleComponentRef) {
+ // commonRule
+ switch (handleType) {
+ case "1":
+ handle = [];
+ pluginHandleList.forEach((handleList, index) => {
+ handle[index] = {};
+ handleList.forEach(item => {
+ handle[index][item.field] = values[item.field + index];
+ });
+ });
+ handle = multiRuleHandle
+ ? JSON.stringify(handle)
+ : JSON.stringify(handle[0]);
+ break;
+ case "2":
+ handle = handleJSON;
+ break;
+ default:
+ break;
+ }
+ }
+ if (this.handleComponentRef) {
+ // customizationRule
handle = this.handleComponentRef.getData(values);
}
@@ -298,7 +327,7 @@ class AddModal extends Component {
let RuleHandleComponent;
if (customRulePage) {
RuleHandleComponent = PluginRuleHandle[pluginName];
- } else if (pluginHandleList && pluginHandleList.length > 0) {
+ } else if (pluginHandleList) {
RuleHandleComponent = CommonRuleHandle;
}
