Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: improve user friendly on Upstream #1603

Merged
merged 4 commits into from
Mar 22, 2021
Merged

chore: improve user friendly on Upstream #1603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
921b639
chore: update i18n for Upstream
juzhiyuan Mar 16, 2021
8824d46
chore: update i18n for Upstream
juzhiyuan Mar 16, 2021
a425955
i18n: improve pass_host
juzhiyuan Mar 16, 2021
f2aae04
i18n: improve pass_host
juzhiyuan Mar 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions web/src/components/Upstream/UpstreamForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ type Props = {
showSelector?: boolean;
// FIXME: use proper typing
ref?: any;
required: boolean;
required?: boolean;
};

const removeBtnStyle = {
Expand Down Expand Up @@ -702,7 +702,6 @@ const UpstreamForm: React.FC<Props> = forwardRef(
<Form.Item
label={formatMessage({ id: 'page.upstream.step.pass-host' })}
name="pass_host"
extra={formatMessage({ id: 'page.upstream.step.pass-host.tips' })}
>
<Select disabled={readonly}>
<Select.Option value="pass">
Expand All @@ -711,7 +710,7 @@ const UpstreamForm: React.FC<Props> = forwardRef(
<Select.Option value="node">
{formatMessage({ id: 'page.upstream.step.pass-host.node' })}
</Select.Option>
<Select.Option value="rewrite">
<Select.Option value="rewrite" disabled>
{formatMessage({ id: 'page.upstream.step.pass-host.rewrite' })}
</Select.Option>
</Select>
Expand All @@ -728,8 +727,14 @@ const UpstreamForm: React.FC<Props> = forwardRef(
<Form.Item
label={formatMessage({ id: 'page.upstream.step.pass-host.upstream_host' })}
name="upstream_host"
rules={[
{
required: true,
message: "",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why the message is an empty string? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because when users leave this field empty, the input box will have a red border to alert them 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it seems that when the required field is empty, the required message will appear behind the input box, so if we leave the message an empty string, there will be an empty line appear. anyway, since the host rewrite become a disable option, this input box will never show in the page.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ya

},
]}
>
<Input disabled={readonly} />
<Input disabled={readonly} placeholder={formatMessage({ id: `page.upstream.upstream_host.required` })} />
</Form.Item>
);
}
Expand Down
11 changes: 5 additions & 6 deletions web/src/pages/Upstream/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,10 @@ const Page: React.FC = (props) => {
const { id } = (props as any).match.params;
(id ? update(id, data) : create(data)).then(() => {
notification.success({
message: `${
id
? formatMessage({ id: 'page.upstream.create.edit' })
: formatMessage({ id: 'page.upstream.create.create' })
} ${formatMessage({ id: 'page.upstream.create.upstream.successfully' })}`,
message: `${id
? formatMessage({ id: 'page.upstream.edit.upstream.successfully' })
: formatMessage({ id: 'page.upstream.create.upstream.successfully' })
}`,
});
history.replace('/upstream/list');
});
Expand All @@ -77,7 +76,7 @@ const Page: React.FC = (props) => {

return (
<>
<PageContainer title={formatMessage({ id: 'page.upstream.create.create' })}>
<PageContainer title={formatMessage({ id: 'page.upstream.create' })}>
<Card bordered={false}>
<Steps current={step - 1} style={{ marginBottom: 30 }}>
<Steps.Step title={formatMessage({ id: 'page.upstream.create.basic.info' })} />
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/Upstream/components/Step1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const Step1: React.FC<Props> = ({ form, disabled, upstreamRef }) => {
<Form.Item
label={formatMessage({ id: 'page.upstream.step.name' })}
name="name"
rules={[{ required: true }]}
rules={[{ required: true, message: formatMessage({ id: 'page.upstream.step.name.should.unique' }) }]}
extra={formatMessage({ id: 'page.upstream.step.name.should.unique' })}
>
<Input
Expand Down
33 changes: 16 additions & 17 deletions web/src/pages/Upstream/locales/en-US.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@
export default {
'page.upstream.step.select.upstream': 'Select Upstream',
'page.upstream.step.select.upstream.select.option': 'Custom',
'page.upstream.form.item-label.node.domain.or.ip': 'Node Domain/IP',
'page.upstream.step.backend.server.domain.or.ip': 'Backend Server Domain Name/IP',
'page.upstream.form.item-label.node.domain.or.ip': 'Node List',
'page.upstream.step.backend.server.domain.or.ip': 'Backend Server Domain/IP',
'page.upstream.form.item.extra-message.node.domain.or.ip':
'When using domain name, it will analysis local: /etc/resolv.conf by default, if weight is 0, then fusing this node',
'page.upstream.step.input.domain.name.or.ip': 'Please input domain name/IP',
'When using domain, it will analysis local: /etc/resolv.conf by default, if weight is 0, then fusing this node',
'page.upstream.step.input.domain.name.or.ip': 'Please input domain or IP',
'page.upstream.step.domain.name.or.ip.rule': 'Only letters, numbers and . are supported',
'page.upstream.step.domain.name.or.ip': 'Domain Name/IP',
'page.upstream.step.domain.name.or.ip': 'Domain or IP',
'page.upstream.step.input.port': 'Please input port number',
'page.upstream.step.port': 'Port Number',
'page.upstream.step.input.weight': 'Please input weight',
Expand All @@ -33,16 +33,14 @@ export default {
'page.upstream.step.name.should.unique': 'Name should be unique',
'page.upstream.step.input.upstream.name': 'Please input upstream name',
'page.upstream.step.description': 'Description',
'page.upstream.step.input.description': 'Please input description',
'page.upstream.step.input.description': 'Please input upstream\'s description',
'page.upstream.step.type': 'Type',
'page.upstream.step.create.node': 'Create Node',
'page.upstream.step.pass-host': 'Pass Host',
'page.upstream.step.pass-host.tips':
'pass: Pass the client\'s host transparently to the upstream; node: Use the host configured in the node of upstream; rewrite: Use the value of the configuration upstream_host.',
'page.upstream.step.pass-host.pass': 'pass',
'page.upstream.step.pass-host.node': 'node',
'page.upstream.step.pass-host.rewrite': 'rewrite',
'page.upstream.step.pass-host.upstream_host': 'Upstream Host',
'page.upstream.step.create.node': 'Add Node',
'page.upstream.step.pass-host': 'Host Transform',
'page.upstream.step.pass-host.pass': 'Keep the same Host from client request',
'page.upstream.step.pass-host.node': 'Use the domain or IP from Node List',
'page.upstream.step.pass-host.rewrite': 'Custom Host (Will be deprecated in the future)',
'page.upstream.step.pass-host.upstream_host': 'Custom Host',
'page.upstream.step.connect.timeout': 'Connect Timeout',
'page.upstream.step.input.connect.timeout': 'Please input connect timeout',
'page.upstream.step.send.timeout': 'Send Timeout',
Expand Down Expand Up @@ -79,10 +77,11 @@ export default {
'page.upstream.step.healthyCheck.passive.tcp_failures': 'TCP Failures',
'page.upstream.step.input.healthyCheck.passive.tcp_failures': 'Please input TCP failures',
'page.upstream.notificationMessage.enableHealthCheckFirst': 'Please enable health check first.',
'page.upstream.upstream_host.required': 'Please input the custom Host',

'page.upstream.create.edit': 'Edit',
'page.upstream.create.create': 'Create',
'page.upstream.create.upstream.successfully': 'Upstream Successfully',
'page.upstream.create': 'Create Upstream',
'page.upstream.create.upstream.successfully': 'Create Upstream Successfully',
'page.upstream.edit.upstream.successfully': 'Update Upstream Successfully',
'page.upstream.create.basic.info': 'Basic Information',
'page.upstream.create.preview': 'Preview',

Expand Down
36 changes: 18 additions & 18 deletions web/src/pages/Upstream/locales/zh-CN.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,33 +15,32 @@
* limitations under the License.
*/
export default {
'page.upstream.step.select.upstream': '选择上游',
'page.upstream.step.select.upstream': '选择上游服务',
'page.upstream.step.select.upstream.select.option': '手动填写',
'page.upstream.form.item-label.node.domain.or.ip': '节点域名/IP',
'page.upstream.step.backend.server.domain.or.ip': '后端服务域名/IP',
'page.upstream.form.item-label.node.domain.or.ip': '上游节点',
'page.upstream.step.backend.server.domain.or.ip': '后端服务域名或 IP',
'page.upstream.form.item.extra-message.node.domain.or.ip':
'使用域名时，默认解析本地 /etc/resolv.conf；权重为0则熔断该节点',
'page.upstream.step.input.domain.name.or.ip': '请输入域名/IP',
'使用域名时，默认解析本地 /etc/resolv.conf；权重为 0 则熔断该节点',
'page.upstream.step.input.domain.name.or.ip': '请输入域名或 IP',
'page.upstream.step.domain.name.or.ip.rule': '仅支持字母、数字和 . ',
'page.upstream.step.domain.name.or.ip': '域名/IP',
'page.upstream.step.domain.name.or.ip': '域名或 IP',
'page.upstream.step.input.port': '请输入端口号',
'page.upstream.step.port': '端口号',
'page.upstream.step.input.weight': '请输入权重',
'page.upstream.step.weight': '权重',
'page.upstream.step.create': '创建',
'page.upstream.step.name': '名称',
'page.upstream.step.name.should.unique': '名称需全局唯一',
'page.upstream.step.input.upstream.name': '请输入上游名称',
'page.upstream.step.input.upstream.name': '请输入上游服务名称',
'page.upstream.step.description': '描述',
'page.upstream.step.input.description': '请输入描述',
'page.upstream.step.input.description': '请输入上游服务描述',
'page.upstream.step.type': '类型',
'page.upstream.step.create.node': '创建节点',
'page.upstream.step.pass-host': '传递域名',
'page.upstream.step.pass-host.tips': '透传（pass）：将客户端的 host 透传给上游；节点（node）：使用 upstream node 中配置的 host；重写（rewrite）：使用配置项 upstream_host 的值',
'page.upstream.step.pass-host.pass': '透传',
'page.upstream.step.pass-host.node': '节点',
'page.upstream.step.pass-host.rewrite': '重写',
'page.upstream.step.pass-host.upstream_host': '上游域名',
'page.upstream.step.create.node': '增加节点',
'page.upstream.step.pass-host': 'Host 转换',
'page.upstream.step.pass-host.pass': '保持与客户端请求一致的 Host 请求头',
'page.upstream.step.pass-host.node': '使用上游节点列表中的域名或 IP',
'page.upstream.step.pass-host.rewrite': '自定义 Host 请求头（即将废弃）',
'page.upstream.step.pass-host.upstream_host': '自定义 Host 请求头',
'page.upstream.step.connect.timeout': '连接超时',
'page.upstream.step.input.connect.timeout': '请输入连接超时时间',
'page.upstream.step.send.timeout': '发送超时',
Expand Down Expand Up @@ -78,10 +77,11 @@ export default {
'page.upstream.step.healthyCheck.passive.tcp_failures': 'tcp失败次数',
'page.upstream.step.input.healthyCheck.passive.tcp_failures': '请输入tcp失败次数',
'page.upstream.notificationMessage.enableHealthCheckFirst': '请先启用探活健康检查。',
'page.upstream.upstream_host.required': '请输入自定义 Host 请求头',

'page.upstream.create.edit': '编辑',
'page.upstream.create.create': '创建',
'page.upstream.create.upstream.successfully': '上游成功',
'page.upstream.create': '创建上游服务',
'page.upstream.create.upstream.successfully': '创建上游服务成功',
'page.upstream.edit.upstream.successfully': '更新上游服务成功',
'page.upstream.create.basic.info': '基础信息',
'page.upstream.create.preview': '预览',

Expand Down