You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2020/06/05 10:21:56 UTC
[incubator-apisix-dashboard] branch next updated: add: placeholder
(#246)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
The following commit(s) were added to refs/heads/next by this push:
new d9d4776 add: placeholder (#246)
d9d4776 is described below
commit d9d477624f6328c3be85ed364f0cc74e5fbec9b8
Author: litesun <31...@users.noreply.github.com>
AuthorDate: Fri Jun 5 18:21:50 2020 +0800
add: placeholder (#246)
* feat: limit upload file
* feat: intercept default upload api request
* feat: limit upload file type
* fix: show file when parse SSL file fail
* feat: add search feature
* feat: format code
* fix: remove list item not work
* feat: remove relatedRouting
* feat: add routes step1 page
* feat: update route
* feat: format code
* feat: update
* feat: update
* feat: add checkbox rule
* feat: handle Modal close event
* feat: format code
* feat: add page skip
* feat: format code
* merge
* feat: clean code
* fix: step4 error
* feat: add edit modal
* feat: add form validation
* fix: step4 lose data
* fix: step4 edit
* add: WebSocket switch
* feat: https methods list Validation
* fix: timeout
* clean code
* add: redirect
* fix: force https
* add: redirect
* fix: wrong redirectURI typing
* Update RequestConfigView.tsx
* Update RequestConfigView.tsx
* feat: change refirect
* feat: operator to chinese
* feat：change init timeout to 6000ms
* fix: advancedMatchingRules data loss when edit
* fix: advancedMatchingRules data loss when edit
* fix: advancedMatchingRules table
* feat: hide step2 step3 when use redirect
* fix: handle actionBar
* fix: redirect
* feat: show port weight placeholder
* feat: handle actionBar
* feat: redirect
* add: place holder
* Update RequestConfigView.tsx
Co-authored-by: 琚致远 <ju...@apache.org>
---
src/pages/Routes/Create.tsx | 40 +++++++++++++++-------
.../Routes/components/Step1/MatchingRulesView.tsx | 14 ++++++--
src/pages/Routes/components/Step1/MetaView.tsx | 3 +-
.../Routes/components/Step1/RequestConfigView.tsx | 17 +++++----
.../Routes/components/Step2/RequestRewriteView.tsx | 2 +-
5 files changed, 52 insertions(+), 24 deletions(-)
diff --git a/src/pages/Routes/Create.tsx b/src/pages/Routes/Create.tsx
index 424ed6e..cde7762 100644
--- a/src/pages/Routes/Create.tsx
+++ b/src/pages/Routes/Create.tsx
@@ -55,7 +55,15 @@ const Create: React.FC = (props) => {
if ((props as any).route.name === 'edit') {
initRoute((props as any).match.params.rid);
}
- }, []);
+
+ if (step1Data.redirectURI !== '') {
+ setRedirect(true);
+ setStepHeader(STEP_HEADER_2);
+ } else {
+ setRedirect(false);
+ setStepHeader(STEP_HEADER_4);
+ }
+ }, [step1Data]);
useEffect(() => {
if (step1Data.redirectURI !== '') {
@@ -120,9 +128,22 @@ const Create: React.FC = (props) => {
};
const onStepChange = (nextStep: number) => {
+ const onUpdateOrCreate = () => {
+ if ((props as any).route.name === 'edit') {
+ updateRoute((props as any).match.params.rid, { data: routeData }).then(() => {
+ setStep(4);
+ });
+ } else {
+ createRoute({ data: routeData }).then(() => {
+ setStep(4);
+ });
+ }
+ };
+
if (nextStep === 0) {
setStep(nextStep);
}
+
if (nextStep === 1) {
form1.validateFields().then((value) => {
setStep1Data({ ...step1Data, ...value });
@@ -130,11 +151,10 @@ const Create: React.FC = (props) => {
});
return;
}
+
if (nextStep === 2) {
if (redirect) {
- createRoute({ data: routeData }).then(() => {
- setStep(4);
- });
+ onUpdateOrCreate();
return;
}
form2.validateFields().then((value) => {
@@ -143,19 +163,13 @@ const Create: React.FC = (props) => {
});
return;
}
+
if (nextStep === 3) {
setStep(nextStep);
}
+
if (nextStep === 4) {
- if ((props as any).route.name === 'edit') {
- updateRoute((props as any).match.params.rid, { data: routeData }).then(() => {
- setStep(nextStep);
- });
- } else {
- createRoute({ data: routeData }).then(() => {
- setStep(nextStep);
- });
- }
+ onUpdateOrCreate();
}
};
diff --git a/src/pages/Routes/components/Step1/MatchingRulesView.tsx b/src/pages/Routes/components/Step1/MatchingRulesView.tsx
index 6b226b8..994955e 100644
--- a/src/pages/Routes/components/Step1/MatchingRulesView.tsx
+++ b/src/pages/Routes/components/Step1/MatchingRulesView.tsx
@@ -9,8 +9,8 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
const { advancedMatchingRules } = data.step1Data;
const [visible, setVisible] = useState(false);
-
const [mode, setMode] = useState<RouteModule.ModalType>('CREATE');
+ const [namePlaceholder, setNamePlaceholder] = useState('');
const [modalForm] = Form.useForm();
const { Option } = Select;
@@ -147,7 +147,15 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
name="position"
rules={[{ required: true, message: '请选择参数位置' }]}
>
- <Select>
+ <Select
+ onChange={(value) => {
+ if (value === 'http') {
+ setNamePlaceholder('请求头名字比如：Host');
+ } else {
+ setNamePlaceholder('比如：name');
+ }
+ }}
+ >
<Option value="http">HTTP 请求头</Option>
<Option value="arg">请求参数</Option>
<Option value="cookie">Cookie</Option>
@@ -158,7 +166,7 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
name="name"
rules={[{ required: true, message: '请输入参数名称' }]}
>
- <Input />
+ <Input placeholder={namePlaceholder} />
</Form.Item>
<Form.Item
label="运算符"
diff --git a/src/pages/Routes/components/Step1/MetaView.tsx b/src/pages/Routes/components/Step1/MetaView.tsx
index 69e64c7..baac193 100644
--- a/src/pages/Routes/components/Step1/MetaView.tsx
+++ b/src/pages/Routes/components/Step1/MetaView.tsx
@@ -13,11 +13,12 @@ const MetaView: React.FC<Props> = ({ disabled }) => {
label="API 名称"
name="name"
rules={[{ required: true, message: '请输入 API 名称' }]}
+ extra="支持英文，数字，下划线和减号，且只能以英文开头"
>
<Input placeholder="请输入 API 名称" disabled={disabled} />
</Form.Item>
<Form.Item label="描述" name="desc">
- <Input.TextArea placeholder="请输入描述" disabled={disabled} />
+ <Input.TextArea placeholder="不超过 200 个字符" disabled={disabled} />
</Form.Item>
</PanelSection>
);
diff --git a/src/pages/Routes/components/Step1/RequestConfigView.tsx b/src/pages/Routes/components/Step1/RequestConfigView.tsx
index 78b2dc5..09c486c 100644
--- a/src/pages/Routes/components/Step1/RequestConfigView.tsx
+++ b/src/pages/Routes/components/Step1/RequestConfigView.tsx
@@ -32,6 +32,7 @@ const RequestConfigView: React.FC<Props> = ({ data, disabled, onChange }) => {
label={index === 0 ? '域名' : ''}
required
key={field.key}
+ extra='域名或 IP：支持泛域名，如 "\*.test.com"'
>
<Form.Item
{...field}
@@ -82,9 +83,13 @@ const RequestConfigView: React.FC<Props> = ({ data, disabled, onChange }) => {
return (
<div>
{fields.map((field) => (
- <Form.Item required key={field.key}>
+ <Form.Item
+ required
+ key={field.key}
+ extra='请求路径，如 "/foo/index.html"，支持请求路径前缀 "/foo/\*"'
+ >
<Form.Item {...field} validateTrigger={['onChange', 'onBlur']} noStyle>
- <Input placeholder="请输入路径" style={{ width: '60%' }} disabled={disabled} />
+ <Input placeholder="请输入请求路径" style={{ width: '60%' }} disabled={disabled} />
</Form.Item>
{!disabled && (
<MinusCircleOutlined
@@ -146,14 +151,14 @@ const RequestConfigView: React.FC<Props> = ({ data, disabled, onChange }) => {
<Row gutter={10}>
<Col>
<Form.Item name="redirectURI">
- <Input placeholder="请输入 URI" disabled={disabled} />
+ <Input placeholder="例如：/foo/index.html" disabled={disabled} />
</Form.Item>
</Col>
- <Col span={6}>
+ <Col span={10}>
<Form.Item name="redirectCode">
<Select disabled={disabled}>
- <Select.Option value="301">301</Select.Option>
- <Select.Option value="302">302</Select.Option>
+ <Select.Option value="301">301（临时的重定向）</Select.Option>
+ <Select.Option value="302">302（永久的重定向）</Select.Option>
</Select>
</Form.Item>
</Col>
diff --git a/src/pages/Routes/components/Step2/RequestRewriteView.tsx b/src/pages/Routes/components/Step2/RequestRewriteView.tsx
index e9556c3..eea2a43 100644
--- a/src/pages/Routes/components/Step2/RequestRewriteView.tsx
+++ b/src/pages/Routes/components/Step2/RequestRewriteView.tsx
@@ -132,7 +132,7 @@ const RequestRewriteView: React.FC<Props> = ({ data, form, disabled, onChange })
name="upstreamPath"
rules={[{ required: true, message: '请输入请求路径' }]}
>
- <Input disabled={disabled} />
+ <Input disabled={disabled} placeholder="例如：/foo/bar/index.html" />
</Form.Item>
)}
<Form.Item label="连接超时" required>