in src/routes/Plugin/Discovery/ProxySelectorModal.js [178:613]
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 { name, forwardPort, listenerNode, discovery, handler } = this.props.data || {};
const labelWidth = 200;
const formItemLayout = {
labelCol: {
sm: { span: 4 }
},
wrapperCol: {
sm: { span: 19 }
}
};
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'
},
];
return (
<Modal
destroyOnClose
centered
visible
width='60%'
onCancel={handleCancel}
onOk={this.handleSubmit}
title={getIntlContent("SHENYU.SELECTOR.NAME")}
okText={getIntlContent("SHENYU.COMMON.SURE")}
cancelText={getIntlContent("SHENYU.COMMON.CALCEL")}
>
<Form onSubmit={this.handleSubmit}>
<Tabs defaultActiveKey="1" size="small">
<TabPane tab={getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIG.BASIC")} key="1">
<FormItem label={getIntlContent("SHENYU.DISCOVERY.SELECTOR.NAME")} {...formItemLayout}>
{getFieldDecorator('name', {
rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.NAME.INPUT")}],
initialValue: name
})(<Input
disabled={!isAdd}
placeholder={getIntlContent("SHENYU.DISCOVERY.SELECTOR.NAME.INPUT")}
addonAfter={
<Button
size="small"
type="link"
onClick={() => {
this.setState({ visible: true });
}}
>
{getIntlContent("SHENYU.SELECTOR.COPY")}
</Button>
}
/>)}
</FormItem>
<ProxySelectorCopy
disabled={!isAdd}
visible={visible}
onOk={this.handleCopyData}
onCancel={() => {
this.setState({ visible: false });
}}
/>
<FormItem label={getIntlContent("SHENYU.DISCOVERY.SELECTOR.FORWARDPORT")} {...formItemLayout}>
{getFieldDecorator('forwardPort', {
rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.FORWARDPORT.INPUT")}],
initialValue: forwardPort
})(<Input
disabled={!isAdd}
placeholder={getIntlContent("SHENYU.DISCOVERY.SELECTOR.FORWARDPORT.INPUT")}
/>)}
</FormItem>
<FormItem
label={getIntlContent("SHENYU.DISCOVERY.SELECTOR.PROPS")}
{...formItemLayout}
>
<div
className={styles.handleWrap}
style={{
display: "flex"
}}
>
<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
disabled={!isAdd}
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
disabled={!isAdd}
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
disabled={!isAdd}
addonBefore={
<div style={{ width: labelWidth }}>
{item.label}
</div>
}
placeholder={placeholder}
key={fieldName}
/>
)}
</FormItem>
</Tooltip>
</li>
);
}
})}
</ul>
</div>
);
})}
</div>
</div>
</FormItem>
</TabPane>
<TabPane tab={getIntlContent("SHENYU.DISCOVERY.SELECTOR.CONFIG.DISCOVERY")} key="2">
<FormItem label={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE")} {...formItemLayout}>
{getFieldDecorator('discoveryType', {
rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}],
initialValue: tcpType !== '' ? tcpType : undefined
})(
<Select
placeholder={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.TYPE.INPUT")}
disabled={isSetConfig||!isAdd}
onChange={value => {
dispatch({
type: 'discovery/saveGlobalType',
payload: {
chosenType: value
}
});
let configProps = discoveryDicts.filter(item => item.dictName === value);
let propsEntries = JSON.parse(configProps[0]?.dictValue || "{}");
this.setState({configPropsJson: propsEntries})
}
}
>
{this.handleOptions()}
</Select>,
)}
</FormItem>
{
chosenType !== 'local' ? (
<>
<FormItem label={getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE")} {...formItemLayout}>
{getFieldDecorator('listenerNode', {
rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE.INPUT")}],
initialValue: listenerNode
})(<Input
disabled={!isAdd}
placeholder={getIntlContent("SHENYU.DISCOVERY.SELECTOR.LISTENERNODE.INPUT")}
/>)}
</FormItem>
<FormItem label={getIntlContent("SHENYU.DISCOVERY.SELECTOR.HANDLER")} {...formItemLayout}>
<div
className={styles.handleWrap}
style={{
display: "flex"
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
flexDirection: "row"
}}
>
<ul
className={classnames({
[styles.handleUl]: true,
[styles.springUl]: true
})}
style={{ width: "100%" }}
>
{(() => {
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) => (
<li key={index}>
<FormItem>
{getFieldDecorator(value, {
initialValue: isAdd === true ? findKeyByValue(handler, value): findKeyByValue(JSON.parse(handler), value),
rules
})(
<Input
disabled={!isAdd}
addonAfter={
<div style={{ width: '50px' }}>
{value}
</div>
}
placeholder={`Your ${value}`}
key={value}
/>
)}
</FormItem>
</li>
));
}
}
})()}
</ul>
</div>
</div>
</FormItem>
{
isSetConfig !== true ? (
<>
<FormItem label={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST")} {...formItemLayout}>
{getFieldDecorator('serverList', {
rules: [{required: true, message: getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST.INPUT")}],
initialValue: discovery.serverList
})(<Input
disabled={!isAdd}
placeholder={getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.SERVERLIST.INPUT")}
/>)}
</FormItem>
<div style={{ marginLeft: '50px', marginTop: '15px', marginBottom: '15px', fontWeight: '500', }}>
{getIntlContent("SHENYU.DISCOVERY.CONFIGURATION.PROPS")}
<span style={{ marginLeft: '2px', fontWeight: '500' }}>:</span>
</div>
<div style={{ marginLeft: '35px', display: 'flex', alignItems: 'baseline' }}>
<div style={{ marginLeft: '8px' }}>
<Row gutter={[16, 4]} justify="center">
{Object.entries(configPropsJson).map(([key, value]) => (
<Col span={12} key={key}>
<FormItem>
{getFieldDecorator(key, {
initialValue: value
})(
<Input
disabled={!isAdd}
placeholder={`Enter ${key}`}
addonBefore={key}
/>
)}
</FormItem>
</Col>
))}
</Row>
</div>
</div>
</>
) : null
}
{
isAdd !== true ? (
<>
<Divider>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")}</Divider>
<Table dataSource={upstreams} columns={columns} />;
</>
):null
}
</>
) : (
<>
<Divider>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM")}</Divider>
<EditableTable
dataSource={upstreams}
recordCount={recordCount}
onTableChange={this.handleTableChange}
onCountChange={this.handleCountChange}
/>
</>
)
}
</TabPane>
</Tabs>
</Form>
</Modal>
);
}