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

feat: user can skip upstream when select service_id #1302

Merged
merged 14 commits into from
Jan 22, 2021
Merged

feat: user can skip upstream when select service_id #1302

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5770b91
feat: user can skip upstream when select service_id
LiteSun Jan 14, 2021
d561238
feat: update code
LiteSun Jan 14, 2021
6330219
feat: update upstream
LiteSun Jan 15, 2021
b7010da
fix: manual input
LiteSun Jan 15, 2021
72021cf
Merge remote-tracking branch 'LiteSun/feat-route' into test-route
guoqqqi Jan 19, 2021
cd53dd7
feat: update CreateStep4
LiteSun Jan 21, 2021
1a6d93c
fix: Select Upstream show empty string
LiteSun Jan 21, 2021
ecd0f00
merge LiteSun/feat-route into test-route
guoqqqi Jan 21, 2021
745747c
feat: auto fill DEFAULT_UPSTREAM
LiteSun Jan 21, 2021
c9e3e09
test: create route can skip upstream
guoqqqi Jan 21, 2021
eee0847
Merge branch 'test-route' of https://github.com/guoqqqi/apisix-dashbo…
LiteSun Jan 21, 2021
244da87
feat: update upstreamForm
guoqqqi Jan 21, 2021
bb67c34
feat: update testcase
LiteSun Jan 22, 2021
909fc2f
feat: update upstream testcase
LiteSun Jan 22, 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
267 changes: 141 additions & 126 deletions web/src/components/Upstream/UpstreamForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ type Props = {
showSelector?: boolean;
// FIXME: use proper typing
ref?: any;
required: boolean,
};

const removeBtnStyle = {
Expand All @@ -70,11 +71,12 @@ const removeBtnStyle = {
};

const UpstreamForm: React.FC<Props> = forwardRef(
({ form, disabled, list = [], showSelector }, ref) => {
({ form, disabled, list = [], showSelector, required = true }, ref) => {
const { formatMessage } = useIntl();
const [readonly, setReadonly] = useState(
Boolean(form.getFieldValue('upstream_id')) || disabled,
);
const [hidenForm, setHidenForm] = useState(false);

const timeoutFields = [
{
Expand All @@ -96,13 +98,34 @@ const UpstreamForm: React.FC<Props> = forwardRef(
}));

useEffect(() => {
const id = form.getFieldValue('upstream_id');
if (id) {
setReadonly(true);
const formData = transformRequest(form.getFieldsValue()) || {};
const { upstream_id } = form.getFieldsValue();

if (required && upstream_id === 'None') {
requestAnimationFrame(() => {
form.resetFields();
setHidenForm(false);
});
}

if (upstream_id === 'None') {
setHidenForm(true);
}

if (upstream_id) {
requestAnimationFrame(() => {
form.setFieldsValue(list.find((item) => item.id === id));
form.setFieldsValue(list.find((item) => item.id === upstream_id));
});
}

if (!required && !Object.keys(formData).length && upstream_id !== 'None') {
requestAnimationFrame(() => {
form.setFieldsValue({ upstream_id: 'None' });
setHidenForm(true);
});
}

setReadonly(Boolean(upstream_id) || disabled);
}, [list]);

const CHash = () => (
Expand Down Expand Up @@ -608,26 +631,16 @@ const UpstreamForm: React.FC<Props> = forwardRef(
<Form.Item
label={formatMessage({ id: 'page.upstream.step.select.upstream' })}
name="upstream_id"
shouldUpdate={(prev, next) => {
setReadonly(Boolean(next.upstream_id));
if (prev.upstream_id !== next.upstream_id) {
const id = next.upstream_id;
if (id) {
form.setFieldsValue(list.find((item) => item.id === id));
form.setFieldsValue({
upstream_id: id,
});
}
}
return prev.upstream_id !== next.upstream_id;
}}
>
<Select
disabled={disabled}
onChange={(id) => {
form.setFieldsValue(list.find((item) => item.id === id));
onChange={(upstream_id) => {
setReadonly(Boolean(upstream_id));
setHidenForm(Boolean(upstream_id === 'None'));
form.setFieldsValue(list.find((item) => item.id === upstream_id));
}}
>
{Boolean(!required) && <Select.Option value={'None'} >None</Select.Option>}
{[
{
name: formatMessage({ id: 'page.upstream.step.select.upstream.select.option' }),
Expand All @@ -643,116 +656,118 @@ const UpstreamForm: React.FC<Props> = forwardRef(
</Form.Item>
)}

<Form.Item
label={formatMessage({ id: 'page.upstream.step.type' })}
name="type"
rules={[{ required: true }]}
>
<Select disabled={readonly}>
{Object.entries(Type).map(([label, value]) => {
return (
<Select.Option value={value} key={value}>
{label}
</Select.Option>
);
})}
</Select>
</Form.Item>
<Form.Item shouldUpdate noStyle>
{() => {
if (form.getFieldValue('type') === 'chash') {
return <CHash />;
}
return null;
}}
</Form.Item>
{NodeList()}
<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">
{formatMessage({ id: 'page.upstream.step.pass-host.pass' })}
</Select.Option>
<Select.Option value="node">
{formatMessage({ id: 'page.upstream.step.pass-host.node' })}
</Select.Option>
<Select.Option value="rewrite">
{formatMessage({ id: 'page.upstream.step.pass-host.rewrite' })}
</Select.Option>
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prev, next) => {
return prev.pass_host !== next.pass_host;
}}
>
{() => {
if (form.getFieldValue('pass_host') === 'rewrite') {
return (
<Form.Item
label={formatMessage({ id: 'page.upstream.step.pass-host.upstream_host' })}
name="upstream_host"
>
<Input disabled={readonly} />
</Form.Item>
);
}
return null;
}}
</Form.Item>

{timeoutFields.map(({ label, name }) => (
<Form.Item label={label} required key={label}>
<Form.Item
name={name}
noStyle
rules={[
{
required: true,
message: formatMessage({ id: `page.upstream.step.input.${name[1]}.timeout` }),
},
]}
>
<InputNumber disabled={readonly} />
</Form.Item>
<TimeUnit />
{!hidenForm && (<>
<Form.Item
label={formatMessage({ id: 'page.upstream.step.type' })}
name="type"
rules={[{ required: true }]}
>
<Select disabled={readonly}>
{Object.entries(Type).map(([label, value]) => {
return (
<Select.Option value={value} key={value}>
{label}
</Select.Option>
);
})}
</Select>
</Form.Item>
<Form.Item shouldUpdate noStyle>
{() => {
if (form.getFieldValue('type') === 'chash') {
return <CHash />;
}
return null;
}}
</Form.Item>
{NodeList()}
<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">
{formatMessage({ id: 'page.upstream.step.pass-host.pass' })}
</Select.Option>
<Select.Option value="node">
{formatMessage({ id: 'page.upstream.step.pass-host.node' })}
</Select.Option>
<Select.Option value="rewrite">
{formatMessage({ id: 'page.upstream.step.pass-host.rewrite' })}
</Select.Option>
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prev, next) => {
return prev.pass_host !== next.pass_host;
}}
>
{() => {
if (form.getFieldValue('pass_host') === 'rewrite') {
return (
<Form.Item
label={formatMessage({ id: 'page.upstream.step.pass-host.upstream_host' })}
name="upstream_host"
>
<Input disabled={readonly} />
</Form.Item>
);
}
return null;
}}
</Form.Item>
))}

<PanelSection
title={formatMessage({ id: 'page.upstream.step.healthyCheck.healthy.check' })}
>
{[
{
label: formatMessage({ id: 'page.upstream.step.healthyCheck.active' }),
name: ['checks', 'active'],
component: <ActiveHealthCheck />,
},
{
label: formatMessage({ id: 'page.upstream.step.healthyCheck.passive' }),
name: ['checks', 'passive'],
component: <InActiveHealthCheck />,
},
].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)) {
return component;
}
return null;
}}
{timeoutFields.map(({ label, name }) => (
<Form.Item label={label} required key={label}>
<Form.Item
name={name}
noStyle
rules={[
{
required: true,
message: formatMessage({ id: `page.upstream.step.input.${name[1]}.timeout` }),
},
]}
>
<InputNumber disabled={readonly} />
</Form.Item>
</div>
<TimeUnit />
</Form.Item>
))}
</PanelSection>

<PanelSection
title={formatMessage({ id: 'page.upstream.step.healthyCheck.healthy.check' })}
>
{[
{
label: formatMessage({ id: 'page.upstream.step.healthyCheck.active' }),
name: ['checks', 'active'],
component: <ActiveHealthCheck />,
},
{
label: formatMessage({ id: 'page.upstream.step.healthyCheck.passive' }),
name: ['checks', 'passive'],
component: <InActiveHealthCheck />,
},
].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)) {
return component;
}
return null;
}}
</Form.Item>
</div>
))}
</PanelSection>
</>)}
</Form>
);
},
Expand Down
7 changes: 3 additions & 4 deletions web/src/pages/Route/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ const Page: React.FC<Props> = (props) => {
);
}

return <Step2 form={form2} upstreamRef={upstreamRef} />;
return <Step2 form={form2} upstreamRef={upstreamRef} isServiceId={form1.getFieldValue('service_id') !== ''} />;
}

if (step === 3) {
Expand Down Expand Up @@ -256,11 +256,10 @@ const Page: React.FC<Props> = (props) => {
return (
<>
<PageHeaderWrapper
title={`${
(props as any).match.params.rid
title={`${(props as any).match.params.rid
? formatMessage({ id: 'component.global.edit' })
: formatMessage({ id: 'component.global.create' })
} ${formatMessage({ id: 'menu.routes' })}`}
} ${formatMessage({ id: 'menu.routes' })}`}
>
<Card bordered={false}>
<Steps current={step - 1} className={styles.steps}>
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, upstreamRef, ...
<h2 style={style}>
{formatMessage({ id: 'page.route.steps.stepTitle.defineApiBackendServe' })}
</h2>
<Step2 form={form2} upstreamRef={upstreamRef} disabled />
<Step2 form={form2} upstreamRef={upstreamRef} disabled isServiceId={form1.getFieldValue('service_id') !== ''} />
juzhiyuan marked this conversation as resolved.
Show resolved Hide resolved
<h2 style={style}>
{formatMessage({ id: 'component.global.steps.stepTitle.pluginConfig' })}
</h2>
Expand Down
2 changes: 2 additions & 0 deletions web/src/pages/Route/components/Step2/RequestRewriteView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({
form,
upstreamRef,
disabled,
isServiceId = false
}) => {
const [list, setList] = useState<UpstreamModule.RequestBody[]>([]);
useEffect(() => {
Expand All @@ -35,6 +36,7 @@ const RequestRewriteView: React.FC<RouteModule.Step2PassProps> = ({
disabled={disabled}
list={list}
showSelector
required={!isServiceId}
key={1}
/>
);
Expand Down
1 change: 1 addition & 0 deletions web/src/pages/Route/transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export const transformStepData = ({
'ret_code',
'redirectOption',
service_id.length === 0 ? 'service_id' : '',
form2Data.upstream_id === 'None' ? 'upstream_id' : '',
!Object.keys(data.plugins || {}).length ? 'plugins' : '',
!Object.keys(data.script || {}).length ? 'script' : '',
form1Data.hosts.filter(Boolean).length === 0 ? 'hosts' : '',
Expand Down
1 change: 1 addition & 0 deletions web/src/pages/Route/typing.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ declare namespace RouteModule {
form: FormInstance;
disabled?: boolean;
upstreamRef: any;
isServiceId: boolean;
};

type Form2Data = {
Expand Down