This is an automated email from the ASF dual-hosted git repository.
dengliming 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 ae401674 Optimize the layout of HystrixRuleHandle (#447)
ae401674 is described below
commit ae4016749b19ad4e10d16ea91edf9a88caf14e10
Author: Kerwin Bryant <[email protected]>
AuthorDate: Sun Apr 7 22:17:38 2024 +0800
Optimize the layout of HystrixRuleHandle (#447)
---
.../Plugin/PluginRuleHandle/HystrixRuleHandle.js | 313 +++++++++++----------
1 file changed, 161 insertions(+), 152 deletions(-)
diff --git a/src/routes/Plugin/PluginRuleHandle/HystrixRuleHandle.js
b/src/routes/Plugin/PluginRuleHandle/HystrixRuleHandle.js
index 3c3c9be0..d62ab410 100644
--- a/src/routes/Plugin/PluginRuleHandle/HystrixRuleHandle.js
+++ b/src/routes/Plugin/PluginRuleHandle/HystrixRuleHandle.js
@@ -202,206 +202,215 @@ export default class HystrixRuleHandle extends
Component {
</Select>,
)}
</FormItem>
- <div className={styles.handleWrap}>
- <div className={styles.header}>
- <h3>{getIntlContent("SHENYU.COMMON.DEAL")}: </h3>
- </div>
- <ul
- className={classnames({
- [styles.handleUl]: true,
- [styles.springUl]: true,
- })}
- >
- <li>
- <Input
- allowClear
- addonBefore={
- <div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.TRIPPING.REQUEST.NUMBER")}
- </div>
- }
- value={requestVolumeThreshold}
- placeholder="requestVolumeThreshold"
- onChange={(e) => {
- const value = e.target.value;
- this.onHandleNumberChange("requestVolumeThreshold", value);
- }}
- />
- </li>
- <li>
- <Input
- allowClear
- addonBefore={
- <div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.ERROR.PERCENT")}
- </div>
- }
- value={errorThresholdPercentage}
- placeholder="errorThresholdPercentage"
- onChange={(e) => {
- const value = e.target.value;
- this.onHandleNumberChange("errorThresholdPercentage", value);
- }}
- />
- </li>
- <li>
- <Input
- allowClear
- addonBefore={
- <div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.TIMEOUT")}
- </div>
- }
- value={timeout}
- placeholder="timeout"
- onChange={(e) => {
- const value = e.target.value;
- this.onHandleNumberChange("timeout", value);
- }}
- />
- </li>
- {this.state.executionIsolationStrategy === 1 && (
+ <FormItem
+ label={getIntlContent("SHENYU.COMMON.DEAL")}
+ {...formItemLayout}
+ >
+ <div className={styles.handleWrap} style={{ marginTop: 0 }}>
+ <ul
+ className={classnames({
+ [styles.handleUl]: true,
+ [styles.springUl]: true,
+ })}
+ style={{ paddingLeft: 0, marginBottom: "-6px" }}
+ >
<li>
<Input
allowClear
addonBefore={
<div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.MAX.CONCURRENCY")}
+
{getIntlContent("SHENYU.HYSTRIX.TRIPPING.REQUEST.NUMBER")}
</div>
}
- value={maxConcurrentRequests}
- placeholder="maxConcurrentRequests"
+ value={requestVolumeThreshold}
+ placeholder="requestVolumeThreshold"
onChange={(e) => {
const value = e.target.value;
- this.onHandleNumberChange("maxConcurrentRequests", value);
+ this.onHandleNumberChange("requestVolumeThreshold", value);
}}
/>
</li>
- )}
- <li>
- <Input
- allowClear
- addonBefore={
- <div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.TRIPPING.SLEEPTIME")}
- </div>
- }
- value={sleepWindowInMilliseconds}
- placeholder="sleepWindowInMilliseconds"
- onChange={(e) => {
- const value = e.target.value;
- this.onHandleNumberChange("sleepWindowInMilliseconds",
value);
- }}
- />
- </li>
- <li>
- <Input
- allowClear
- addonBefore={
- <div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.GROUPKEY")}
- </div>
- }
- value={groupKey}
- placeholder="GroupKey"
- onChange={(e) => {
- const value = e.target.value;
- this.onHandleChange("groupKey", value);
- }}
- />
- </li>
- <li>
- <Input
- allowClear
- addonBefore={
- <div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.FAILEDDEMOTION")}
- </div>
- }
- value={callBackUri}
- placeholder={getIntlContent("SHENYU.HYSTRIX.FAILEDCALLBACK")}
- onChange={(e) => {
- const value = e.target.value;
- this.onHandleChange("callBackUri", value);
- }}
- />
- </li>
- <li>
- <Input
- allowClear
- addonBefore={
- <div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.COMMANDKEY")}
- </div>
- }
- value={commandKey}
- placeholder="CommandKey"
- onChange={(e) => {
- const value = e.target.value;
- this.onHandleChange("commandKey", value);
- }}
- />
- </li>
- {this.state.executionIsolationStrategy === 0 && (
<li>
<Input
allowClear
addonBefore={
<div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.CORETHREADSIZE")}
+ {getIntlContent("SHENYU.HYSTRIX.ERROR.PERCENT")}
</div>
}
- value={hystrixThreadPoolConfig.coreSize}
- placeholder={getIntlContent("SHENYU.HYSTRIX.CORENUM")}
+ value={errorThresholdPercentage}
+ placeholder="errorThresholdPercentage"
onChange={(e) => {
const value = e.target.value;
- hystrixThreadPoolConfig.coreSize = value;
- this.setState({ hystrixThreadPoolConfig });
+ this.onHandleNumberChange(
+ "errorThresholdPercentage",
+ value,
+ );
+ }}
+ />
+ </li>
+ <li>
+ <Input
+ allowClear
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {getIntlContent("SHENYU.HYSTRIX.TIMEOUT")}
+ </div>
+ }
+ value={timeout}
+ placeholder="timeout"
+ onChange={(e) => {
+ const value = e.target.value;
+ this.onHandleNumberChange("timeout", value);
+ }}
+ />
+ </li>
+ {this.state.executionIsolationStrategy === 1 && (
+ <li>
+ <Input
+ allowClear
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {getIntlContent("SHENYU.HYSTRIX.MAX.CONCURRENCY")}
+ </div>
+ }
+ value={maxConcurrentRequests}
+ placeholder="maxConcurrentRequests"
+ onChange={(e) => {
+ const value = e.target.value;
+ this.onHandleNumberChange("maxConcurrentRequests",
value);
+ }}
+ />
+ </li>
+ )}
+ <li>
+ <Input
+ allowClear
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {getIntlContent("SHENYU.HYSTRIX.TRIPPING.SLEEPTIME")}
+ </div>
+ }
+ value={sleepWindowInMilliseconds}
+ placeholder="sleepWindowInMilliseconds"
+ onChange={(e) => {
+ const value = e.target.value;
+ this.onHandleNumberChange(
+ "sleepWindowInMilliseconds",
+ value,
+ );
}}
/>
</li>
- )}
-
- {this.state.executionIsolationStrategy === 0 && (
<li>
<Input
allowClear
addonBefore={
<div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.MAXSIZE")}
+ {getIntlContent("SHENYU.HYSTRIX.GROUPKEY")}
</div>
}
- value={hystrixThreadPoolConfig.maximumSize}
- placeholder={getIntlContent("SHENYU.HYSTRIX.MAXTHREADNUM")}
+ value={groupKey}
+ placeholder="GroupKey"
onChange={(e) => {
const value = e.target.value;
- hystrixThreadPoolConfig.maximumSize = value;
- this.setState({ hystrixThreadPoolConfig });
+ this.onHandleChange("groupKey", value);
}}
/>
</li>
- )}
- {this.state.executionIsolationStrategy === 0 && (
<li>
<Input
allowClear
addonBefore={
<div style={{ width: labelWidth }}>
- {getIntlContent("SHENYU.HYSTRIX.MAXTHREADQUEUE")}
+ {getIntlContent("SHENYU.HYSTRIX.FAILEDDEMOTION")}
</div>
}
- value={hystrixThreadPoolConfig.maxQueueSize}
- placeholder={getIntlContent("SHENYU.HYSTRIX.MAXTHREAD")}
+ value={callBackUri}
+ placeholder={getIntlContent("SHENYU.HYSTRIX.FAILEDCALLBACK")}
onChange={(e) => {
const value = e.target.value;
- hystrixThreadPoolConfig.maxQueueSize = value;
- this.setState({ hystrixThreadPoolConfig });
+ this.onHandleChange("callBackUri", value);
}}
/>
</li>
- )}
- </ul>
- </div>
+ <li>
+ <Input
+ allowClear
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {getIntlContent("SHENYU.HYSTRIX.COMMANDKEY")}
+ </div>
+ }
+ value={commandKey}
+ placeholder="CommandKey"
+ onChange={(e) => {
+ const value = e.target.value;
+ this.onHandleChange("commandKey", value);
+ }}
+ />
+ </li>
+ {this.state.executionIsolationStrategy === 0 && (
+ <li>
+ <Input
+ allowClear
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {getIntlContent("SHENYU.HYSTRIX.CORETHREADSIZE")}
+ </div>
+ }
+ value={hystrixThreadPoolConfig.coreSize}
+ placeholder={getIntlContent("SHENYU.HYSTRIX.CORENUM")}
+ onChange={(e) => {
+ const value = e.target.value;
+ hystrixThreadPoolConfig.coreSize = value;
+ this.setState({ hystrixThreadPoolConfig });
+ }}
+ />
+ </li>
+ )}
+
+ {this.state.executionIsolationStrategy === 0 && (
+ <li>
+ <Input
+ allowClear
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {getIntlContent("SHENYU.HYSTRIX.MAXSIZE")}
+ </div>
+ }
+ value={hystrixThreadPoolConfig.maximumSize}
+ placeholder={getIntlContent("SHENYU.HYSTRIX.MAXTHREADNUM")}
+ onChange={(e) => {
+ const value = e.target.value;
+ hystrixThreadPoolConfig.maximumSize = value;
+ this.setState({ hystrixThreadPoolConfig });
+ }}
+ />
+ </li>
+ )}
+ {this.state.executionIsolationStrategy === 0 && (
+ <li>
+ <Input
+ allowClear
+ addonBefore={
+ <div style={{ width: labelWidth }}>
+ {getIntlContent("SHENYU.HYSTRIX.MAXTHREADQUEUE")}
+ </div>
+ }
+ value={hystrixThreadPoolConfig.maxQueueSize}
+ placeholder={getIntlContent("SHENYU.HYSTRIX.MAXTHREAD")}
+ onChange={(e) => {
+ const value = e.target.value;
+ hystrixThreadPoolConfig.maxQueueSize = value;
+ this.setState({ hystrixThreadPoolConfig });
+ }}
+ />
+ </li>
+ )}
+ </ul>
+ </div>
+ </FormItem>
</>
);
}
