This is an automated email from the ASF dual-hosted git repository.
tydhot 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 50500108 Fix/ Condition field overflow in Selector form (#230)
50500108 is described below
commit 50500108040a312b99677f76d7442e8f1fc5691a
Author: ZongZi <[email protected]>
AuthorDate: Thu Aug 18 10:45:01 2022 +0800
Fix/ Condition field overflow in Selector form (#230)
* fix: layout change
* fix: the overflow of condition fields layout
Co-authored-by: Leridy_lei <[email protected]>
---
package.json | 2 +-
src/routes/Plugin/Common/Selector.js | 249 ++++++++++++++++-------------------
src/routes/Plugin/index.less | 28 +---
3 files changed, 114 insertions(+), 165 deletions(-)
diff --git a/package.json b/package.json
index 1c61320e..beacd875 100755
--- a/package.json
+++ b/package.json
@@ -97,4 +97,4 @@
"last 2 versions",
"not ie <= 10"
]
-}
\ No newline at end of file
+}
diff --git a/src/routes/Plugin/Common/Selector.js
b/src/routes/Plugin/Common/Selector.js
index 9b8fd816..fead146b 100644
--- a/src/routes/Plugin/Common/Selector.js
+++ b/src/routes/Plugin/Common/Selector.js
@@ -38,7 +38,7 @@ import styles from "../index.less";
import { getIntlContent } from "../../../utils/IntlUtils";
import SelectorCopy from "./SelectorCopy";
-const FormItem = Form.Item;
+const { Item } = Form;
const { Option } = Select;
const formItemLayout = {
@@ -88,7 +88,7 @@ class AddModal extends Component {
visible: false
};
- this.initSelectorCondtion(props);
+ this.initSelectorCondition(props);
this.initDics();
}
@@ -110,7 +110,7 @@ class AddModal extends Component {
});
}
- initSelectorCondtion = props => {
+ initSelectorCondition = props => {
const selectorConditions = props.selectorConditions || [
{
paramType: "uri",
@@ -322,7 +322,7 @@ class AddModal extends Component {
});
const keys = getFieldValue("keys");
const Rule = keys.map((key, index) => (
- <FormItem
+ <Item
required
key={key}
{...(index === 0
@@ -334,11 +334,7 @@ class AddModal extends Component {
<div style={{ display: "flex", alignItems: "center" }}>
<Row gutter={8}>
<Col span={8}>
- <FormItem
- label="protocol"
- labelCol={{ span: 8 }}
- wrapperCol={{ span: 16 }}
- >
+ <Item label="protocol" wrapperCol={{ span: 16 }}>
{getFieldDecorator(`divideUpstreams[${key}].protocol`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].protocol
@@ -350,14 +346,10 @@ class AddModal extends Component {
}
]
})(<Input />)}
- </FormItem>
+ </Item>
</Col>
<Col span={16}>
- <FormItem
- label="upstreamUrl"
- labelCol={{ span: 5 }}
- wrapperCol={{ span: 19 }}
- >
+ <Item label="upstreamUrl" wrapperCol={{ span: 19 }}>
{getFieldDecorator(`divideUpstreams[${key}].upstreamUrl`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].upstreamUrl
@@ -369,14 +361,10 @@ class AddModal extends Component {
}
]
})(<Input />)}
- </FormItem>
+ </Item>
</Col>
<Col span={6}>
- <FormItem
- label="weight"
- labelCol={{ span: 9 }}
- wrapperCol={{ span: 15 }}
- >
+ <Item label="weight" wrapperCol={{ span: 15 }}>
{getFieldDecorator(`divideUpstreams[${key}].weight`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].weight
@@ -394,15 +382,11 @@ class AddModal extends Component {
style={{ width: "100%" }}
/>
)}
- </FormItem>
+ </Item>
</Col>
<Col span={4}>
- <FormItem
- label="status"
- labelCol={{ span: 13 }}
- wrapperCol={{ span: 11 }}
- >
+ <Item label="status" wrapperCol={{ span: 11 }}>
{getFieldDecorator(`divideUpstreams[${key}].status`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].status
@@ -415,15 +399,11 @@ class AddModal extends Component {
}
]
})(<Switch />)}
- </FormItem>
+ </Item>
</Col>
<Col span={8}>
- <FormItem
- label="timestamp"
- labelCol={{ span: 9 }}
- wrapperCol={{ span: 15 }}
- >
+ <Item label="timestamp" wrapperCol={{ span: 15 }}>
{getFieldDecorator(`divideUpstreams[${key}].timestamp`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].timestamp
@@ -435,15 +415,11 @@ class AddModal extends Component {
}
]
})(<InputNumber style={{ width: "100%" }} />)}
- </FormItem>
+ </Item>
</Col>
<Col span={6}>
- <FormItem
- label="warmup"
- labelCol={{ span: 10 }}
- wrapperCol={{ span: 14 }}
- >
+ <Item label="warmup" wrapperCol={{ span: 14 }}>
{getFieldDecorator(`divideUpstreams[${key}].warmup`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].warmup
@@ -455,7 +431,7 @@ class AddModal extends Component {
}
]
})(<InputNumber style={{ width: "100%" }} />)}
- </FormItem>
+ </Item>
</Col>
</Row>
<div style={{ width: 64, textAlign: "right" }}>
@@ -475,17 +451,13 @@ class AddModal extends Component {
</div>
</div>
</Card>
- </FormItem>
+ </Item>
));
return (
<Row gutter={16} key="8">
<Col span={10}>
- <FormItem
- label="serviceId"
- labelCol={{ span: 8 }}
- wrapperCol={{ span: 16 }}
- >
+ <Item label="serviceId" wrapperCol={{ span: 16 }}>
{getFieldDecorator("serviceId", {
initialValue: serviceId,
rules: [
@@ -494,14 +466,10 @@ class AddModal extends Component {
}
]
})(<Input placeholder="serviceId" />)}
- </FormItem>
+ </Item>
</Col>
<Col span={8}>
- <FormItem
- label="gray"
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 16 }}
- >
+ <Item label="gray" wrapperCol={{ span: 16 }}>
{getFieldDecorator("gray", {
valuePropName: "checked",
initialValue: gray,
@@ -511,11 +479,11 @@ class AddModal extends Component {
}
]
})(<Switch />)}
- </FormItem>
+ </Item>
</Col>
<Col span={24}>
{Rule}
- <FormItem wrapperCol={{ span: 16, offset: 3 }}>
+ <Item wrapperCol={{ span: 16, offset: 3 }}>
<Button
type="dashed"
onClick={() => {
@@ -529,7 +497,7 @@ class AddModal extends Component {
>
<Icon type="plus" /> Add divide upstream
</Button>
- </FormItem>
+ </Item>
</Col>
</Row>
);
@@ -599,7 +567,7 @@ class AddModal extends Component {
return (
<li key={fieldName}>
<Tooltip title={placeholder}>
- <FormItem>
+ <Item>
{getFieldDecorator(fieldName, {
rules,
initialValue: defaultValue
@@ -615,7 +583,7 @@ class AddModal extends Component {
type="number"
/>
)}
- </FormItem>
+ </Item>
</Tooltip>
</li>
);
@@ -623,7 +591,7 @@ class AddModal extends Component {
return (
<li key={fieldName}>
<Tooltip title={placeholder}>
- <FormItem>
+ <Item>
{getFieldDecorator(fieldName, {
rules,
initialValue: defaultValue
@@ -650,7 +618,7 @@ class AddModal extends Component {
})}
</Select>
)}
- </FormItem>
+ </Item>
</Tooltip>
</li>
);
@@ -658,7 +626,7 @@ class AddModal extends Component {
return (
<li key={fieldName}>
<Tooltip title={item.value}>
- <FormItem>
+ <Item>
{getFieldDecorator(fieldName, {
rules,
initialValue: defaultValue
@@ -671,15 +639,12 @@ class AddModal extends Component {
}
placeholder={placeholder}
key={fieldName}
- onChange={e=> {
- this.onDealChange(
- e.target.value,
- item
- );
+ onChange={e => {
+ this.onDealChange(e.target.value,
item);
}}
/>
)}
- </FormItem>
+ </Item>
</Tooltip>
</li>
);
@@ -747,7 +712,7 @@ class AddModal extends Component {
if (type === 1) {
formData.matchMode = matchMode.toString();
- this.initSelectorCondtion({
+ this.initSelectorCondition({
selectorConditions: selectorConditions.map(v => {
const {
id: rawId,
@@ -764,9 +729,38 @@ class AddModal extends Component {
this.setState({ visible: false, selectValue: type.toString() });
};
- onDealChange = (value,item) => {
+ onDealChange = (value, item) => {
item.value = value;
- }
+ };
+
+ renderOperatorOptions = operators => {
+ if (operators && operators instanceof Array) {
+ return operators.map(operate => {
+ return (
+ <Option key={operate.dictValue} value={operate.dictValue}>
+ {operate.dictName}
+ </Option>
+ );
+ });
+ }
+
+ return "";
+ };
+
+ renderParamTypeOptions = (paramTypes = []) => {
+ if (paramTypes && paramTypes instanceof Array) {
+ return paramTypes.map(typeItem => {
+ const { dictValue, dictName } = typeItem;
+ return (
+ <Option key={dictValue} value={dictValue}>
+ {dictName}
+ </Option>
+ );
+ });
+ }
+
+ return "";
+ };
render() {
let {
@@ -785,7 +779,6 @@ class AddModal extends Component {
const {
selectorConditions,
selectValue,
- pluginHandleList,
operatorDics,
matchModeDics,
paramTypeDics,
@@ -799,13 +792,7 @@ class AddModal extends Component {
return (
<Modal
- width={
- pluginHandleList &&
- pluginHandleList.length > 0 &&
- pluginHandleList[0].length > 3
- ? 1350
- : 1000
- }
+ width='900px'
centered
title={getIntlContent("SHENYU.SELECTOR.NAME")}
visible
@@ -815,7 +802,7 @@ class AddModal extends Component {
onCancel={onCancel}
>
<Form onSubmit={this.handleSubmit} className="login-form">
- <FormItem
+ <Item
label={getIntlContent("SHENYU.PLUGIN.SELECTOR.LIST.COLUMN.NAME")}
{...formItemLayout}
>
@@ -845,7 +832,7 @@ class AddModal extends Component {
}
/>
)}
- </FormItem>
+ </Item>
<SelectorCopy
visible={visible}
onOk={this.handleCopyData}
@@ -853,7 +840,7 @@ class AddModal extends Component {
this.setState({ visible: false });
}}
/>
- <FormItem
+ <Item
label={getIntlContent("SHENYU.COMMON.TYPE")}
{...formItemLayout}
>
@@ -882,10 +869,10 @@ class AddModal extends Component {
})}
</Select>
)}
- </FormItem>
+ </Item>
{selectValue !== "0" && (
<Fragment>
- <FormItem
+ <Item
label={getIntlContent("SHENYU.COMMON.MATCHTYPE")}
{...formItemLayout}
>
@@ -911,38 +898,28 @@ class AddModal extends Component {
})}
</Select>
)}
- </FormItem>
+ </Item>
<div className={styles.condition}>
- <h3 className={styles.header}>
- <strong>*</strong>
- {getIntlContent("SHENYU.COMMON.CONDITION")}:{" "}
- </h3>
- <div>
+ <Item
+ label={getIntlContent("SHENYU.COMMON.CONDITION")}
+ required
+ {...formItemLayout}
+ >
{selectorConditions.map((item, index) => {
return (
- <ul key={index}>
- <li>
+ <Row key={index} gutter={8}>
+ <Col span={5}>
<Select
onChange={value => {
this.conditionChange(index, "paramType", value);
}}
value={item.paramType}
- style={{ width: 120 }}
>
- {paramTypeDics &&
- paramTypeDics.map(typeItem => {
- return (
- <Option
- key={typeItem.dictValue}
- value={typeItem.dictValue}
- >
- {typeItem.dictName}
- </Option>
- );
- })}
+ {this.renderParamTypeOptions(paramTypeDics)}
</Select>
- </li>
- <li
+ </Col>
+ <Col
+ span={4}
style={{
display: this.state[`paramTypeValueEn${index}`]
? "none"
@@ -958,32 +935,20 @@ class AddModal extends Component {
);
}}
value={item.paramName}
- style={{ width: 100 }}
/>
- </li>
- <li>
+ </Col>
+ <Col span={4}>
<Select
onChange={value => {
this.conditionChange(index, "operator", value);
}}
value={item.operator}
- style={{ width: 150 }}
>
- {operatorDics &&
- operatorDics.map(opearte => {
- return (
- <Option
- key={opearte.dictValue}
- value={opearte.dictValue}
- >
- {opearte.dictName}
- </Option>
- );
- })}
+ {this.renderOperatorOptions(operatorDics)}
</Select>
- </li>
+ </Col>
- <li>
+ <Col span={7}>
<Tooltip title={item.paramValue}>
<Input
onChange={e => {
@@ -994,11 +959,10 @@ class AddModal extends Component {
);
}}
value={item.paramValue}
- style={{ width: 300 }}
/>
</Tooltip>
- </li>
- <li>
+ </Col>
+ <Col span={4}>
<Button
type="danger"
onClick={() => {
@@ -1007,20 +971,27 @@ class AddModal extends Component {
>
{getIntlContent("SHENYU.COMMON.DELETE.NAME")}
</Button>
- </li>
- </ul>
+ </Col>
+ </Row>
);
})}
- </div>
-
- <Button onClick={this.handleAdd} type="primary">
- {getIntlContent("SHENYU.COMMON.ADD")}
- </Button>
+ </Item>
+ <Item
+ label={' '}
+ colon={false}
+ {...formItemLayout}
+ >
+ <Button className={styles.addButton}
onClick={this.handleAdd} type="primary">
+ {getIntlContent("SHENYU.COMMON.ADD")} {" "}
+ {getIntlContent("SHENYU.COMMON.CONDITION")}
+ </Button>
+ </Item>
</div>
+
</Fragment>
)}
<div className={styles.layout}>
- <FormItem
+ <Item
{...formCheckLayout}
label={getIntlContent("SHENYU.SELECTOR.CONTINUE")}
>
@@ -1029,8 +1000,8 @@ class AddModal extends Component {
valuePropName: "checked",
rules: [{ required: true }]
})(<Switch />)}
- </FormItem>
- <FormItem
+ </Item>
+ <Item
style={{ margin: "0 30px" }}
{...formCheckLayout}
label={getIntlContent("SHENYU.SELECTOR.PRINTLOG")}
@@ -1040,8 +1011,8 @@ class AddModal extends Component {
valuePropName: "checked",
rules: [{ required: true }]
})(<Switch />)}
- </FormItem>
- <FormItem
+ </Item>
+ <Item
{...formCheckLayout}
label={getIntlContent("SHENYU.SELECTOR.WHETHEROPEN")}
>
@@ -1050,10 +1021,10 @@ class AddModal extends Component {
valuePropName: "checked",
rules: [{ required: true }]
})(<Switch />)}
- </FormItem>
+ </Item>
</div>
{this.renderPluginHandler()}
- <FormItem
+ <Item
label={getIntlContent("SHENYU.SELECTOR.EXEORDER")}
{...formItemLayout}
>
@@ -1074,7 +1045,7 @@ class AddModal extends Component {
placeholder={getIntlContent("SHENYU.SELECTOR.INPUTORDER")}
/>
)}
- </FormItem>
+ </Item>
</Form>
</Modal>
);
diff --git a/src/routes/Plugin/index.less b/src/routes/Plugin/index.less
index 0faa6a76..803ea0d4 100644
--- a/src/routes/Plugin/index.less
+++ b/src/routes/Plugin/index.less
@@ -33,31 +33,9 @@
.condition {
margin-top: 8px;
- display: flex;
- .header {
- text-align: right;
- width: 100px;
- margin-bottom: 0;
- font-size: 14px;
- strong {
- color: #f5222d;
- margin-right: 4px;
- font-weight: normal;
- }
- }
- ul {
- padding: 0 0 10px 6px;
- margin: 0;
- display: flex;
- justify-content: space-between;
- max-height: 200px;
- overflow: hidden;
- li {
- margin-right: 4px;
- }
- }
- button {
- margin-left: 10px;
+
+ .addButton {
+ width: 100%;
}
}
