This is an automated email from the ASF dual-hosted git repository.
likeguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 0c271b3d Drop-down box optimization (#247)
0c271b3d is described below
commit 0c271b3d186c4fad4593b74b22e6556bc4a52fb0
Author: WeiS <[email protected]>
AuthorDate: Wed Nov 2 10:18:55 2022 +0800
Drop-down box optimization (#247)
* update SiderMenu
* Optimized the verification code function
* HomePage update
* Optimize the style of HomePage
* fix error
* BasicConfig Auth styles update
* SearchList search display exception resolved
* fix Verification code bug
* fix Verfication code bug
* Drop-down box optimization and style optimization
* resolve conflict
* Drop-down box optimization
* fix selector conditions bug
---
src/routes/Plugin/Common/Rule.js | 138 +++++++++++++++++++++++++++--------
src/routes/Plugin/Common/Selector.js | 130 ++++++++++++++++++++++++++-------
src/routes/Plugin/index.less | 2 +-
3 files changed, 213 insertions(+), 57 deletions(-)
diff --git a/src/routes/Plugin/Common/Rule.js b/src/routes/Plugin/Common/Rule.js
index 2a1d9955..1c0d9584 100644
--- a/src/routes/Plugin/Common/Rule.js
+++ b/src/routes/Plugin/Common/Rule.js
@@ -16,7 +16,7 @@
*/
import React, { Component } from "react";
-import { Modal, Form, Select, Input, Switch, Button, message } from "antd";
+import { Modal, Form, Select, Input, Switch, Button, message, DatePicker,
TimePicker } from "antd";
import { connect } from "dva";
import styles from "../index.less";
import { getIntlContent } from "../../../utils/IntlUtils";
@@ -81,7 +81,7 @@ class AddModal extends Component {
const ruleConditions = props.ruleConditions || [
{
paramType: "uri",
- operator: "=",
+ operator: "pathPattern",
paramName: "/",
paramValue: ""
}
@@ -213,7 +213,7 @@ class AddModal extends Component {
let { ruleConditions } = this.state;
ruleConditions.push({
paramType: "uri",
- operator: "=",
+ operator: "pathPattern",
paramName: "/",
paramValue: ""
});
@@ -264,12 +264,33 @@ class AddModal extends Component {
ruleConditions[index][name] = value;
if (name === "paramType") {
let key = `paramTypeValueEn${index}`;
- if (value === "uri" || value === "host" || value === "ip") {
+ if (value === "uri" || value === "host" || value === "ip" || value ===
"req_method" || value === "domain") {
this.setState({ [key]: true });
ruleConditions[index].paramName = "/";
} else {
this.setState({ [key]: false });
}
+ if (value === "post") {
+ ruleConditions[index].paramName = "filedName";
+ }
+ if (value === "query") {
+ ruleConditions[index].paramName = "paramName";
+ }
+ if (value === "header") {
+ ruleConditions[index].paramName = "headerName";
+ }
+ if (value === "cookie") {
+ ruleConditions[index].paramName = "cookieName";
+ }
+ if (value === "uri") {
+ ruleConditions[index].operator = "pathPattern";
+ }
+ else if (value === "req_method") {
+ ruleConditions[index].operator = "=";
+ }
+ else {
+ ruleConditions[index].operator = "";
+ }
}
this.setState({ ruleConditions });
@@ -301,6 +322,83 @@ class AddModal extends Component {
this.setState({ visible: false });
};
+ renderOperatorOptions = (operators, paramType) => {
+ if (operators && operators instanceof Array) {
+ let operatorsFil = operators.map(operate => {
+ return (
+ <Option key={operate.dictValue} value={operate.dictValue}>
+ {operate.dictName}
+ </Option>
+ )
+ })
+ if (paramType !== "uri") {
+ operatorsFil = operatorsFil.filter(operate => {
+ return operate.key !== "pathPattern" ? operate : ""
+ })
+ }
+ if (paramType === "uri" || paramType === "host" || paramType === "ip" ||
paramType === "cookie" || paramType === "domain") {
+ operatorsFil = operatorsFil.filter(operate => {
+ return operate.key !== "TimeBefore" && operate.key !== "TimeAfter" ?
operate : ""
+ })
+ }
+ if (paramType === "req_method") {
+ operatorsFil = operatorsFil.filter(operate => {
+ return operate.key === "=" ? operate : ""
+ })
+ }
+ return operatorsFil
+ }
+
+ return "";
+ };
+
+ getParamValueInput = (item, index) => {
+ if (item.operator === "TimeBefore" || item.operator === "TimeAfter") {
+ let date = new Date()
+ const defaultDay =
date.getFullYear().toString().concat("-").concat((date.getMonth() +
1)).concat("-").concat(date.getDate())
+ let day = defaultDay
+ return (
+ <Input.Group
+ compact
+ style={{ width: 213, top: 0 }}
+ >
+ <DatePicker
+ onChange={e => {
+ day = e ? e.eraYear().toString().concat('-').concat((e.month() +
1)).concat("-").concat(e.date() < 10 ? '0'.concat(e.date()) : e.date()) :
defaultDay
+ }}
+ style={{ width: "51%" }}
+ />
+ <TimePicker
+ style={{ width: "49%" }}
+ onChange={e => {
+ let Time = e ? day.concat("
").concat(e.hours()).concat(":").concat(e.minutes()).concat(":").concat(e.seconds()
< 10 ? '0'.concat(e.seconds()) : e.seconds()) : ""
+ this.conditionChange(
+ index,
+ "paramValue",
+ Time
+ );
+ }}
+ />
+ </Input.Group>
+ )
+ }
+ else {
+ return (
+ <Input
+ onChange={e => {
+ this.conditionChange(
+ index,
+ "paramValue",
+ e.target.value
+ );
+ }}
+ value={item.paramValue}
+ style={{ width: 160 }}
+ />
+ )
+ }
+ }
+
render() {
let {
onCancel,
@@ -424,7 +522,7 @@ class AddModal extends Component {
)}
</FormItem>
<div className={styles.ruleConditions}>
- <h3 className={styles.header} style={{ width: 105 }}>
+ <h3 className={styles.header} style={{ width: 95 }}>
<strong>*</strong>
{getIntlContent("SHENYU.COMMON.CONDITION")}:
</h3>
@@ -468,8 +566,8 @@ class AddModal extends Component {
e.target.value
);
}}
- value={item.paramName}
- style={{ width: 100 }}
+ placeholder={item.paramName}
+ style={{ width: 105 }}
/>
</li>
<li>
@@ -478,34 +576,14 @@ class AddModal extends Component {
this.conditionChange(index, "operator", value);
}}
value={item.operator}
- style={{ width: 150 }}
+ style={{ width: 114 }}
>
- {operatorDics &&
- operatorDics.map(opearte => {
- return (
- <Option
- key={opearte.dictValue}
- value={opearte.dictValue}
- >
- {opearte.dictName}
- </Option>
- );
- })}
+ {this.renderOperatorOptions(operatorDics,
item.paramType)}
</Select>
</li>
<li>
- <Input
- onChange={e => {
- this.conditionChange(
- index,
- "paramValue",
- e.target.value
- );
- }}
- value={item.paramValue}
- style={{ width: 280 }}
- />
+ {this.getParamValueInput(item, index)}
</li>
<li>
<Button
diff --git a/src/routes/Plugin/Common/Selector.js
b/src/routes/Plugin/Common/Selector.js
index fead146b..91c0cb83 100644
--- a/src/routes/Plugin/Common/Selector.js
+++ b/src/routes/Plugin/Common/Selector.js
@@ -30,7 +30,9 @@ import {
Col,
Card,
Icon,
- InputNumber
+ InputNumber,
+ DatePicker,
+ TimePicker
} from "antd";
import { connect } from "dva";
import classnames from "classnames";
@@ -114,7 +116,7 @@ class AddModal extends Component {
const selectorConditions = props.selectorConditions || [
{
paramType: "uri",
- operator: "=",
+ operator: "pathPattern",
paramName: "/",
paramValue: ""
}
@@ -122,7 +124,7 @@ class AddModal extends Component {
selectorConditions.forEach((item, index) => {
const { paramType } = item;
let key = `paramTypeValueEn${index}`;
- if (paramType === "uri" || paramType === "host" || paramType === "ip") {
+ if (paramType === "uri" || paramType === "host" || paramType === "ip" ||
paramType === "req_method" || paramType === "domain") {
this.state[key] = true;
selectorConditions[index].paramName = "/";
} else {
@@ -236,7 +238,7 @@ class AddModal extends Component {
let { selectorConditions } = this.state;
selectorConditions.push({
paramType: "uri",
- operator: "=",
+ operator: "pathPattern",
paramName: "/",
paramValue: ""
});
@@ -288,12 +290,33 @@ class AddModal extends Component {
if (name === "paramType") {
let key = `paramTypeValueEn${index}`;
- if (value === "uri" || value === "host" || value === "ip") {
+ if (value === "uri" || value === "host" || value === "ip" || value ===
"req_method" || value === "domain") {
this.setState({ [key]: true });
selectorConditions[index].paramName = "/";
} else {
this.setState({ [key]: false });
}
+ if (value === "post") {
+ selectorConditions[index].paramName = "filedName";
+ }
+ if (value === "query") {
+ selectorConditions[index].paramName = "paramName";
+ }
+ if (value === "header") {
+ selectorConditions[index].paramName = "headerName";
+ }
+ if (value === "cookie") {
+ selectorConditions[index].paramName = "cookieName";
+ }
+ if (value === "uri") {
+ selectorConditions[index].operator = "pathPattern";
+ }
+ else if (value === "req_method") {
+ selectorConditions[index].operator = "=";
+ }
+ else {
+ selectorConditions[index].operator = "";
+ }
}
this.setState({ selectorConditions });
@@ -537,11 +560,11 @@ class AddModal extends Component {
item.value === 0 || item.value === false
? item.value
: item.value ||
- (item.defaultValue === "true"
- ? true
- : item.defaultValue === "false"
- ? false
- : item.defaultValue);
+ (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;
@@ -733,15 +756,31 @@ class AddModal extends Component {
item.value = value;
};
- renderOperatorOptions = operators => {
+ renderOperatorOptions = (operators, paramType) => {
if (operators && operators instanceof Array) {
- return operators.map(operate => {
+ let operatorsFil = operators.map(operate => {
return (
<Option key={operate.dictValue} value={operate.dictValue}>
{operate.dictName}
</Option>
- );
- });
+ )
+ })
+ if (paramType !== "uri") {
+ operatorsFil = operatorsFil.filter(operate => {
+ return operate.key !== "pathPattern" ? operate : ""
+ })
+ }
+ if (paramType === "uri" || paramType === "host" || paramType === "ip" ||
paramType === "cookie" || paramType === "domain") {
+ operatorsFil = operatorsFil.filter(operate => {
+ return operate.key !== "TimeBefore" && operate.key !== "TimeAfter" ?
operate : ""
+ })
+ }
+ if (paramType === "req_method") {
+ operatorsFil = operatorsFil.filter(operate => {
+ return operate.key === "=" ? operate : ""
+ })
+ }
+ return operatorsFil
}
return "";
@@ -762,6 +801,53 @@ class AddModal extends Component {
return "";
};
+ getParamValueInput = (item, index) => {
+ if (item.operator === "TimeBefore" || item.operator === "TimeAfter") {
+ let date = new Date()
+ const defaultDay =
date.getFullYear().toString().concat("-").concat((date.getMonth() +
1)).concat("-").concat(date.getDate())
+ let day = defaultDay
+ return (
+ <Input.Group
+ compact
+ style={{ width: 213, top: -2 }}
+ >
+ <DatePicker
+ onChange={e => {
+ day = e ? e.eraYear().toString().concat('-').concat((e.month() +
1)).concat("-").concat(e.date() < 10 ? '0'.concat(e.date()) : e.date()) :
defaultDay
+ }}
+ style={{ width: "51%" }}
+ />
+ <TimePicker
+ style={{ width: "49%" }}
+ onChange={e => {
+ let Time = e ? day.concat("
").concat(e.hours()).concat(":").concat(e.minutes()).concat(":").concat(e.seconds()
< 10 ? '0'.concat(e.seconds()) : e.seconds()) : ""
+ this.conditionChange(
+ index,
+ "paramValue",
+ Time
+ );
+ }}
+ />
+ </Input.Group>
+ )
+ }
+ else {
+ return (
+ <Input
+ onChange={e => {
+ this.conditionChange(
+ index,
+ "paramValue",
+ e.target.value
+ );
+ }}
+ value={item.paramValue}
+ style={{ width: 160 }}
+ />
+ )
+ }
+ }
+
render() {
let {
onCancel,
@@ -934,7 +1020,7 @@ class AddModal extends Component {
e.target.value
);
}}
- value={item.paramName}
+ placeholder={item.paramName}
/>
</Col>
<Col span={4}>
@@ -944,22 +1030,13 @@ class AddModal extends Component {
}}
value={item.operator}
>
- {this.renderOperatorOptions(operatorDics)}
+ {this.renderOperatorOptions(operatorDics,
item.paramType)}
</Select>
</Col>
<Col span={7}>
<Tooltip title={item.paramValue}>
- <Input
- onChange={e => {
- this.conditionChange(
- index,
- "paramValue",
- e.target.value
- );
- }}
- value={item.paramValue}
- />
+ {this.getParamValueInput(item, index)}
</Tooltip>
</Col>
<Col span={4}>
@@ -968,6 +1045,7 @@ class AddModal extends Component {
onClick={() => {
this.handleDelete(index);
}}
+ style={{ marginLeft: 10 }}
>
{getIntlContent("SHENYU.COMMON.DELETE.NAME")}
</Button>
diff --git a/src/routes/Plugin/index.less b/src/routes/Plugin/index.less
index 90314976..26c67c8c 100644
--- a/src/routes/Plugin/index.less
+++ b/src/routes/Plugin/index.less
@@ -75,7 +75,7 @@
}
button {
- margin-left: 14px;
+ margin-left: 0px
}
}
