LiteSun commented on a change in pull request #1726:
URL: https://github.com/apache/apisix-dashboard/pull/1726#discussion_r611149939
##########
File path: web/src/components/Upstream/UpstreamForm.tsx
##########
@@ -130,487 +106,110 @@ const UpstreamForm: React.FC<Props> = forwardRef(
setReadonly(Boolean(upstream_id) || disabled);
}, [list]);
- const CHash = () => (
- <>
- <Form.Item label="Hash On" name="hash_on" rules={[{ required: true }]}>
- <Select disabled={readonly}>
- {Object.entries(HashOn).map(([label, value]) => (
- <Select.Option value={value} key={value}>
- {label}
- </Select.Option>
- ))}
- </Select>
- </Form.Item>
- <Form.Item label="Key" name="key" rules={[{ required: true }]}>
- <Select disabled={readonly}>
- {Object.entries(HashKey).map(([label, value]) => (
- <Select.Option value={value} key={value}>
- {label}
- </Select.Option>
- ))}
- </Select>
- </Form.Item>
- </>
- );
- const TimeUnit = () => <span style={{ margin: '0 8px' }}>s</span>;
- const NodeList = () => (
- <Form.List name="nodes">
- {(fields, { add, remove }) => (
- <>
- <Form.Item label={formatMessage({ id:
'page.upstream.form.item-label.node.domain.or.ip' })}>
- {fields.map((field, index) => (
- <Row style={{ marginBottom: 10 }} gutter={16} key={index}>
- <Col span={5}>
- <Form.Item
- style={{ marginBottom: 0 }}
- name={[field.name, 'host']}
- rules={[
- {
- required: true,
- message: formatMessage({
- id: 'page.upstream.step.input.domain.name.or.ip',
- }),
- },
- {
- pattern: new RegExp(
-
/(^([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(\.(25[0-5]|1\d{2}|2[0-4]\d|[1-9]?\d)){3}$|^(?![0-9.]+$)([a-zA-Z0-9_-]+)(\.[a-zA-Z0-9_-]+){0,}$)/,
- 'g',
- ),
- },
- ]}
- >
- <Input
- placeholder={formatMessage({ id:
'page.upstream.step.domain.name.or.ip' })}
- disabled={readonly}
- />
- </Form.Item>
- </Col>
- <Col span={4}>
- <Form.Item
- style={{ marginBottom: 0 }}
- name={[field.name, 'port']}
- label={formatMessage({ id: 'page.upstream.step.port' })}
- rules={[
- {
- required: true,
- message: formatMessage({ id:
'page.upstream.step.input.port' }),
- },
- ]}
- >
- <InputNumber
- placeholder={formatMessage({ id:
'page.upstream.step.port' })}
- disabled={readonly}
- min={0}
- max={65535}
- />
- </Form.Item>
- </Col>
- <Col span={5}>
- <Form.Item
- style={{ marginBottom: 0 }}
- name={[field.name, 'weight']}
- label={formatMessage({ id: 'page.upstream.step.weight'
})}
- rules={[
- {
- required: true,
- message: formatMessage({ id:
'page.upstream.step.input.weight' }),
- },
- ]}
- >
- <InputNumber
- placeholder={formatMessage({ id:
'page.upstream.step.weight' })}
- disabled={readonly}
- min={0}
- max={1000}
- />
- </Form.Item>
- </Col>
- <Col style={{ ...removeBtnStyle, marginLeft: -25 }}>
- {!readonly && (
- <MinusCircleOutlined onClick={() => remove(field.name)}
/>
- )}
- </Col>
- </Row>
- ))}
- </Form.Item>
- {!readonly && (
- <Form.Item wrapperCol={{ offset: 3 }}>
- <Button type="dashed" onClick={add}>
- <PlusOutlined />
- {formatMessage({ id: 'page.upstream.step.create.node' })}
- </Button>
- </Form.Item>
- )}
- </>
- )}
- </Form.List>
- );
const ActiveHealthCheck = () => (
- <>
- <Form.Item label={formatMessage({ id:
'page.upstream.step.healthyCheck.active.timeout' })} tooltip={formatMessage({
id: 'page.upstream.checks.active.timeout.description' })}>
- <Form.Item name={['checks', 'active', 'timeout']} noStyle>
- <InputNumber disabled={readonly} min={0} />
- </Form.Item>
- <TimeUnit />
- </Form.Item>
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.activeHost' })}
- required
- tooltip={formatMessage({ id:
'page.upstream.checks.active.host.description' })}
- >
- <Form.Item
- style={{ marginBottom: 0 }}
- name={['checks', 'active', 'host']}
- rules={[
- {
- required: true,
- message: formatMessage({ id:
'page.upstream.step.input.healthyCheck.activeHost' }),
- },
- {
- pattern: new RegExp(
-
/(^([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(\.(25[0-5]|1\d{2}|2[0-4]\d|[1-9]?\d)){3}$|^(?![0-9.]+$)([a-zA-Z0-9_-]+)(\.[a-zA-Z0-9_-]+){0,}$)/,
- 'g',
- ),
- message: formatMessage({ id:
'page.upstream.step.domain.name.or.ip.rule' }),
- },
- ]}
- >
- <Input
- placeholder={formatMessage({
- id: 'page.upstream.step.input.healthyCheck.activeHost',
- })}
- disabled={readonly}
- />
- </Form.Item>
- </Form.Item>
-
- <Form.Item label={formatMessage({ id:
'page.upstream.step.healthyCheck.activePort' })}>
- <Form.Item name={['checks', 'active', 'port']} noStyle>
- <InputNumber
- placeholder={formatMessage({
- id: 'page.upstream.step.input.healthyCheck.activePort',
- })}
- disabled={readonly}
- min={0}
- max={65535}
- />
- </Form.Item>
- </Form.Item>
-
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.active.http_path' })}
- required
- tooltip={formatMessage({
- id: 'page.upstream.step.input.healthyCheck.active.http_path',
- })}
- >
- <Form.Item
- name={['checks', 'active', 'http_path']}
- noStyle
- rules={[
- {
- required: true,
- message: formatMessage({ id:
'page.upstream.checks.active.http_path.placeholder' }),
- },
- ]}
- >
- <Input
- disabled={readonly}
- placeholder={formatMessage({ id:
'page.upstream.checks.active.http_path.placeholder' })}
- />
- </Form.Item>
- </Form.Item>
+ <React.Fragment>
+ <ActiveCheck.Type readonly={readonly} />
+ <ActiveCheck.Timeout readonly={readonly} />
+ {/* TODO: concurrency */}
+ <ActiveCheck.Host readonly={readonly} />
+ <ActiveCheck.Port readonly={readonly} />
+ <ActiveCheck.HttpPath readonly={readonly} />
+ {/* TODO: https_verify_certificate */}
<Divider orientation="left" plain>
{formatMessage({ id:
'page.upstream.step.healthyCheck.healthy.status' })}
</Divider>
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.activeInterval' })}
- required
- tooltip={formatMessage({ id:
'page.upstream.checks.active.healthy.interval.description' })}
- >
- <Form.Item
- noStyle
- style={{ marginBottom: 0 }}
- name={['checks', 'active', 'healthy', 'interval']}
- rules={[
- {
- required: true,
- message: formatMessage({
- id: 'page.upstream.step.input.healthyCheck.activeInterval',
- }),
- },
- ]}
- >
- <InputNumber disabled={readonly} min={1} />
- </Form.Item>
- <TimeUnit />
- </Form.Item>
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.successes' })}
- required
- tooltip={formatMessage({ id:
'page.upstream.checks.active.healthy.successes.description' })}
- >
- <Form.Item
- name={['checks', 'active', 'healthy', 'successes']}
- noStyle
- rules={[
- {
- required: true,
- message: formatMessage({ id:
'page.upstream.step.input.healthyCheck.successes' }),
- },
- ]}
- >
- <InputNumber disabled={readonly} min={1} max={254} />
- </Form.Item>
- </Form.Item>
+
+ <ActiveCheck.Healthy.Interval readonly={readonly} />
+ {/* TODO: HTTP Statuses */}
+ <ActiveCheck.Healthy.Successes readonly={readonly} />
<Divider orientation="left" plain>
{formatMessage({ id:
'page.upstream.step.healthyCheck.unhealthyStatus' })}
</Divider>
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.activeInterval' })}
- required
- tooltip={formatMessage({ id:
'page.upstream.checks.active.unhealthy.interval.description' })}
- >
- <Form.Item
- name={['checks', 'active', 'unhealthy', 'interval']}
- noStyle
- rules={[
- {
- required: true,
- message: formatMessage({
- id: 'page.upstream.step.input.healthyCheck.activeInterval',
- }),
- },
- ]}
- >
- <InputNumber disabled={readonly} min={1} />
- </Form.Item>
- <TimeUnit />
- </Form.Item>
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.http_failures' })}
- required
- tooltip={formatMessage({ id:
'page.upstream.checks.active.unhealthy.http_failures.description' })}
- >
- <Form.Item
- name={['checks', 'active', 'unhealthy', 'http_failures']}
- noStyle
- rules={[
- {
- required: true,
- message: formatMessage({
- id: 'page.upstream.step.input.healthyCheck.http_failures',
- }),
- },
- ]}
- >
- <InputNumber disabled={readonly} min={1} max={254} />
- </Form.Item>
- </Form.Item>
- <Form.List name={['checks', 'active', 'req_headers']}>
- {(fields, { add, remove }) => (
- <>
- {fields.map((field, index) => (
- <Form.Item
- key={field.key}
- label={
- index === 0 &&
- formatMessage({ id:
'page.upstream.step.healthyCheck.active.req_headers' })
- }
- wrapperCol={{ offset: index === 0 ? 0 : 3 }}
- >
- <Row style={{ marginBottom: 10 }} gutter={16}>
- <Col span={10}>
- <Form.Item style={{ marginBottom: 0 }}
name={[field.name]}>
- <Input
- placeholder={formatMessage({
- id:
'page.upstream.step.input.healthyCheck.active.req_headers',
- })}
- disabled={readonly}
- />
- </Form.Item>
- </Col>
- <Col style={removeBtnStyle}>
- {!readonly && fields.length > 1 && (
- <MinusCircleOutlined
- style={{ margin: '0 8px' }}
- onClick={() => {
- remove(field.name);
- }}
- />
- )}
- </Col>
- </Row>
- </Form.Item>
- ))}
- {!readonly && (
- <Form.Item wrapperCol={{ offset: 3 }}>
- <Button type="dashed" onClick={() => add()}>
- <PlusOutlined />
- {formatMessage({
- id:
'page.upstream.step.healthyCheck.active.create.req_headers',
- })}
- </Button>
- </Form.Item>
- )}
- </>
- )}
- </Form.List>
- </>
+
+ <ActiveCheck.Unhealthy.Timeouts readonly={readonly} />
+ <ActiveCheck.Unhealthy.Interval readonly={readonly} />
+ <ActiveCheck.Unhealthy.HttpStatuses readonly={readonly} />
+ <ActiveCheck.Unhealthy.HttpFailures readonly={readonly} />
+ {/* TODO: TCP Failures */}
+
+ <Divider orientation="left" plain>Others</Divider>
+
+ <ActiveCheck.ReqHeaders readonly={readonly} />
+ </React.Fragment>
);
+
const InActiveHealthCheck = () => (
- <>
+ <React.Fragment>
+ <PassiveCheck.Type readonly={readonly} />
+
<Divider orientation="left" plain>
{formatMessage({ id:
'page.upstream.step.healthyCheck.healthy.status' })}
</Divider>
- <Form.List name={['checks', 'passive', 'healthy', 'http_statuses']}>
- {(fields, { add, remove }) => (
- <>
- <Form.Item
- required
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.passive.http_statuses' })}
- tooltip={formatMessage({ id:
'page.upstream.checks.passive.healthy.http_statuses.description' })}
- >
- {fields.map((field, index) => (
- <Row style={{ marginBottom: 10 }} key={index}>
- <Col span={2}>
- <Form.Item style={{ marginBottom: 0 }}
name={[field.name]}>
- <InputNumber disabled={readonly} min={200} max={599} />
- </Form.Item>
- </Col>
- <Col style={removeBtnStyle}>
- {!readonly && (
- <MinusCircleOutlined
- onClick={() => {
- remove(field.name);
- }}
- />
- )}
- </Col>
- </Row>
- ))}
- </Form.Item>
- {!readonly && (
- <Form.Item wrapperCol={{ offset: 3 }}>
- <Button type="dashed" onClick={() => add()}>
- <PlusOutlined />
- {formatMessage({
- id:
'page.upstream.step.healthyCheck.passive.create.http_statuses',
- })}
- </Button>
- </Form.Item>
- )}
- </>
- )}
- </Form.List>
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.successes' })}
- tooltip={formatMessage({ id:
'page.upstream.checks.passive.healthy.successes.description' })}
- required
- >
- <Form.Item
- name={['checks', 'passive', 'healthy', 'successes']}
- noStyle
- rules={[
- {
- required: true,
- message: formatMessage({ id:
'page.upstream.step.input.healthyCheck.successes' }),
- },
- ]}
- >
- <InputNumber disabled={readonly} min={1} max={254} />
- </Form.Item>
- </Form.Item>
+
+ <PassiveCheck.Healthy.HttpStatuses readonly={readonly} />
+ <PassiveCheck.Healthy.Successes readonly={readonly} />
<Divider orientation="left" plain>
{formatMessage({ id:
'page.upstream.step.healthyCheck.unhealthyStatus' })}
</Divider>
- <Form.List name={['checks', 'passive', 'unhealthy', 'http_statuses']}>
- {(fields, { add, remove }) => (
+
+ <PassiveCheck.Unhealthy.Timeouts readonly={readonly} />
+ <PassiveCheck.Unhealthy.TcpFailures readonly={readonly} />
+ <PassiveCheck.Unhealthy.HttpFailures readonly={readonly} />
+ <PassiveCheck.Unhealthy.HttpStatuses readonly={readonly} />
+ </React.Fragment>
+ );
+
+ const HealthCheckComponent = () => {
+ const options = [
+ {
+ label: formatMessage({ id: 'page.upstream.step.healthyCheck.active'
}),
+ name: ['checks', 'active'],
+ component: (
<>
- <Form.Item
- required
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.passive.http_statuses' })}
- tooltip={formatMessage({ id:
'page.upstream.checks.passive.unhealthy.http_statuses.description' })}
- >
- {fields.map((field, index) => (
- <Row style={{ marginBottom: 10 }} key={index}>
- <Col span={2}>
- <Form.Item style={{ marginBottom: 0 }}
name={[field.name]}>
- <InputNumber disabled={readonly} min={200} max={599} />
- </Form.Item>
- </Col>
- <Col style={removeBtnStyle}>
- {!readonly && fields.length > 1 && (
- <MinusCircleOutlined
- onClick={() => {
- remove(field.name);
- }}
- />
- )}
- </Col>
- </Row>
- ))}
- </Form.Item>
- {!readonly && (
- <Form.Item wrapperCol={{ offset: 3 }}>
- <Button type="dashed" onClick={() => add()}>
- <PlusOutlined />
- {formatMessage({
- id:
'page.upstream.step.healthyCheck.passive.create.http_statuses',
- })}
- </Button>
- </Form.Item>
- )}
+ <ActiveHealthCheck />
+ <Divider orientation="left" plain />
</>
- )}
- </Form.List>
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.http_failures' })}
- required
- tooltip={formatMessage({ id:
'page.upstream.checks.passive.unhealthy.http_failures.description' })}
- >
- <Form.Item
- name={['checks', 'passive', 'unhealthy', 'http_failures']}
- noStyle
- rules={[
- {
- required: true,
- message: formatMessage({
- id: 'page.upstream.step.input.healthyCheck.http_failures',
- }),
- },
- ]}
- >
- <InputNumber disabled={readonly} min={1} max={254} />
- </Form.Item>
- </Form.Item>
- <Form.Item
- label={formatMessage({ id:
'page.upstream.step.healthyCheck.passive.tcp_failures' })}
- required
- tooltip={formatMessage({ id:
'page.upstream.checks.passive.unhealthy.tcp_failures.description' })}
+ ),
+ },
+ {
+ label: formatMessage({ id: 'page.upstream.step.healthyCheck.passive'
}),
+ name: ['checks', 'passive'],
+ component: <InActiveHealthCheck />,
+ },
+ ]
+
+ return (
+ <PanelSection
+ title={formatMessage({ id:
'page.upstream.step.healthyCheck.healthy.check' })}
>
- <Form.Item
- name={['checks', 'passive', 'unhealthy', 'tcp_failures']}
- noStyle
- rules={[
- {
- required: true,
- message: formatMessage({
- id:
'page.upstream.step.input.healthyCheck.passive.tcp_failures',
- }),
- },
- ]}
- >
- <InputNumber disabled={readonly} min={1} max={254} />
- </Form.Item>
- </Form.Item>
- </>
- );
+ {options.map(({ label, name, component }) => (
+ <div key={label}>
+ <Form.Item label={label} name={name} valuePropName="checked"
key={label}>
+ <Switch disabled={readonly} />
+ </Form.Item>
+ <Form.Item shouldUpdate noStyle>
+ {() => {
+ if (form.getFieldValue(name)) {
+ if (name.includes("active")) {
+ // TODO: 避免默认值被覆盖
Review comment:
remove chinese please.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
