in src/routes/Plugin/Common/Selector.js [265:727]
sort: Number(values.sort),
selectorConditions,
});
}
}
}
});
};
handleAdd = () => {
let { selectorConditions } = this.state;
selectorConditions.push({
paramType: "uri",
operator: "pathPattern",
paramName: "/",
paramValue: "",
});
this.setState({ selectorConditions }, () => {
let len = selectorConditions.length || 0;
let key = `paramTypeValueEn${len - 1}`;
this.setState({ [key]: true });
});
};
handleDelete = (index) => {
let { selectorConditions } = this.state;
if (selectorConditions && selectorConditions.length > 1) {
selectorConditions.splice(index, 1);
} else {
message.destroy();
message.error("At least one condition");
}
this.setState({ selectorConditions });
};
handleAddHandle = () => {
let { pluginHandleList } = this.state;
let pluginHandle = pluginHandleList[0];
let toAddPluginHandle = pluginHandle.map((e) => {
return { ...e, value: null };
});
pluginHandleList.push(toAddPluginHandle);
this.setState({
pluginHandleList,
});
};
handleDeleteHandle = (index) => {
let { pluginHandleList } = this.state;
if (pluginHandleList.length === 1) {
message.destroy();
message.error(getIntlContent("SHENYU.PLUGIN.HANDLE.TIP"));
} else {
pluginHandleList.splice(index, 1);
this.setState({ pluginHandleList });
}
};
handleOptions() {
const { discovery } = this.props;
if (!discovery || !Array.isArray(discovery.typeEnums)) {
return [];
}
return discovery.typeEnums.map((type) => (
<Option key={type} value={type.toString()}>
{type.toString()}
</Option>
));
}
conditionChange = (index, name, value) => {
let { selectorConditions } = this.state;
selectorConditions[index][name] = value;
if (name === "paramType") {
let key = `paramTypeValueEn${index}`;
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 });
};
checkConditions = (selectorConditions) => {
let result = true;
if (selectorConditions) {
selectorConditions.forEach((item, index) => {
const { paramType, operator, paramName, paramValue } = item;
if (
!paramType ||
!operator ||
(operator !== "isBlank" && !paramValue)
) {
message.destroy();
message.error(`Line ${index + 1} condition is incomplete`);
result = false;
}
if (paramType === "uri" || paramType === "host" || paramType === "ip") {
// aaa
} else {
// eslint-disable-next-line no-lonely-if
if (!paramName) {
message.destroy();
message.error(`Line ${index + 1} condition is incomplete`);
result = false;
}
}
});
} else {
message.destroy();
message.error(`Incomplete condition`);
result = false;
}
return result;
};
initSelectorCondition = (props) => {
const selectorConditions = props.selectorConditions || [
{
paramType: "uri",
operator: "pathPattern",
paramName: "/",
paramValue: "",
},
];
selectorConditions.forEach((item, index) => {
const { paramType } = item;
let key = `paramTypeValueEn${index}`;
if (
paramType === "uri" ||
paramType === "host" ||
paramType === "ip" ||
paramType === "req_method" ||
paramType === "domain"
) {
this.state[key] = true;
selectorConditions[index].paramName = "/";
} else {
this.state[key] = false;
}
});
this.state.selectorConditions = selectorConditions;
};
initDics = () => {
this.initDic("operator");
this.initDic("matchMode");
this.initDic("paramType");
this.initDic("discoveryMode");
};
initDic = (type) => {
const { dispatch, isAdd = true } = this.props;
dispatch({
type: "shenyuDict/fetchByType",
payload: {
type,
callBack: (dics) => {
this.state[`${type}Dics`] = dics;
if (type === "discoveryMode" && isAdd) {
let configProps = dics.filter(
(item) => item.dictName === "zookeeper",
);
let propsEntries = JSON.parse(configProps[0]?.dictValue || "{}");
this.setState({ configPropsJson: propsEntries });
}
},
},
});
};
getSelectValue = (value) => {
this.setState({
selectValue: value,
});
};
renderPluginHandler = () => {
const { pluginHandleList, divideUpstreams, gray, serviceId } = this.state;
const {
form: { getFieldDecorator, getFieldValue, setFieldsValue },
multiSelectorHandle,
pluginId,
isDiscovery,
} = this.props;
const labelWidth = 75;
if (isDiscovery) {
return;
}
if (isDivideUpstreamsRequiresForPlugin(pluginId)) {
getFieldDecorator("keys", {
initialValue: Array.from({
length: divideUpstreams.length,
}).map((_, i) => i),
});
const keys = getFieldValue("keys");
const Rule = keys.map((key, index) => (
<Item
required
key={key}
{...(index === 0
? { labelCol: { span: 3 }, wrapperCol: { span: 21 } }
: { wrapperCol: { span: 21, offset: 3 } })}
label={index === 0 ? "divideUpstreams" : ""}
>
<Card>
<div
style={{
display: "flex",
alignItems: "center",
justifycontent: "space-between",
}}
>
<div style={{ flex: 1 }}>
<Row gutter={30}>
<Col span={10}>
<Item
label="protocol"
{...{ labelCol: { span: 9 }, wrapperCol: { span: 15 } }}
>
{getFieldDecorator(`divideUpstreams[${key}].protocol`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].protocol
: "",
rules: [
{
required: true,
message: "protocol is required",
},
],
})(<Input allowClear />)}
</Item>
</Col>
<Col span={14} style={{ marginLeft: "-20px" }}>
<Item
label="upstreamUrl"
{...{ labelCol: { span: 9 }, wrapperCol: { span: 15 } }}
>
{getFieldDecorator(
`divideUpstreams[${key}].upstreamUrl`,
{
initialValue: divideUpstreams[key]
? divideUpstreams[key].upstreamUrl
: "",
rules: [
{
required: true,
message: "upstreamUrl is required",
},
],
},
)(<Input allowClear />)}
</Item>
</Col>
</Row>
<Row gutter={30}>
<Col span={10}>
<Item
label="weight"
{...{ labelCol: { span: 9 }, wrapperCol: { span: 15 } }}
>
{getFieldDecorator(`divideUpstreams[${key}].weight`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].weight
: "",
rules: [
{
required: true,
message: "weight is required",
},
],
})(
<InputNumber
min={0}
max={100}
style={{ width: "100%" }}
/>,
)}
</Item>
</Col>
<Col span={14} style={{ marginLeft: "-20px" }}>
<Item
label="timestamp"
{...{ labelCol: { span: 9 }, wrapperCol: { span: 15 } }}
>
{getFieldDecorator(`divideUpstreams[${key}].timestamp`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].timestamp
: "",
rules: [
{
required: true,
message: "timestamp is required",
},
],
})(<InputNumber style={{ width: "100%" }} />)}
</Item>
</Col>
</Row>
<Row gutter={30}>
<Col span={10}>
<Item
label="status"
{...{ labelCol: { span: 9 }, wrapperCol: { span: 15 } }}
>
{getFieldDecorator(`divideUpstreams[${key}].status`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].status
: false,
valuePropName: "checked",
rules: [
{
required: true,
message: "status is required",
},
],
})(<Switch />)}
</Item>
</Col>
<Col span={14} style={{ marginLeft: "-20px" }}>
<Item
label="warmup"
{...{ labelCol: { span: 9 }, wrapperCol: { span: 15 } }}
>
{getFieldDecorator(`divideUpstreams[${key}].warmup`, {
initialValue: divideUpstreams[key]
? divideUpstreams[key].warmup
: "",
rules: [
{
required: true,
message: "warmup is required",
},
],
})(<InputNumber style={{ width: "100%" }} />)}
</Item>
</Col>
</Row>
</div>
<div style={{ width: 64, textAlign: "right" }}>
<Icon
onClick={() => {
setFieldsValue({
keys: keys.filter((k) => k !== key),
});
}}
type="minus-circle-o"
style={{
fontSize: 18,
color: "#ff0000",
cursor: "pointer",
}}
/>
</div>
</div>
</Card>
</Item>
));
return (
<div className={styles.springCloud}>
<Item label="serviceId" {...formItemLayout}>
<div style={{ display: "flex", alignItems: "center" }}>
{getFieldDecorator("serviceId", {
initialValue: serviceId,
rules: [
{
required: true,
},
],
})(
<Input
style={{ width: "50%" }}
allowClear
placeholder="serviceId"
/>,
)}
<Item label="gray" {...formCheckLayout} style={{ margin: 0 }}>
{getFieldDecorator("gray", {
valuePropName: "checked",
initialValue: gray,
rules: [
{
required: true,
},
],
})(<Switch />)}
</Item>
</div>
</Item>
{Rule}
<Item label="" {...{ wrapperCol: { span: 21, offset: 3 } }}>
<Button
className={styles.addButton}
type="primary"
onClick={() => {
const keysData = getFieldValue("keys");
// eslint-disable-next-line no-plusplus
const nextKeys = keysData.concat(id++);
setFieldsValue({
keys: nextKeys,
});
}}
>
Add divide upstream
</Button>
</Item>
</div>
);
}
if (Array.isArray(pluginHandleList) && pluginHandleList.length) {
return (
<Item
label={getIntlContent("SHENYU.COMMON.DEAL")}
{...formItemLayout}
className={styles.rootFormItem}
>
<div
className={styles.handleWrap}
style={{
marginTop: 0,
}}
>
<div>
{pluginHandleList.map((handleList, index) => {
return (
<div
key={index}
style={{