Skip to content

feat: improve route #483

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

Merged
merged 8 commits into from
Sep 21, 2020
Merged

feat: improve route #483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d4ac812
feat: improve step1
LiteSun Sep 17, 2020
430cb2f
feat: improve step2
LiteSun Sep 17, 2020
48d6dc3
feat: improve createStep4
LiteSun Sep 17, 2020
e2fd3c4
feat: improve transform
LiteSun Sep 17, 2020
9005b0c
fix: event loop
LiteSun Sep 20, 2020
b071b2e
feat: clean code
LiteSun Sep 20, 2020
9888730
fix: lost route_group info when enable redirect
LiteSun Sep 20, 2020
b27a98c
feat: UI improve
LiteSun Sep 21, 2020
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"@ant-design/icons": "^4.0.0",
"@ant-design/pro-layout": "^6.0.0",
"@ant-design/pro-table": "2.6.3",
"@api7-dashboard/plugin": "^1.0.4",
"@api7-dashboard/plugin": "^1.0.5",
"@api7-dashboard/pluginchart": "^1.0.11",
"@api7-dashboard/ui": "^1.0.3",
"@rjsf/antd": "2.2.0",
Expand Down
143 changes: 61 additions & 82 deletions src/pages/Route/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,7 @@ import { transformer as chartTransformer } from '@api7-dashboard/pluginchart';

import ActionBar from '@/components/ActionBar';

import {
create,
fetchItem,
fetchUpstreamItem,
fetchRouteGroupItem,
update,
checkUniqueName,
checkHostWithSSL
} from './service';
import { create, fetchItem, update, checkUniqueName, checkHostWithSSL } from './service';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';
Expand Down Expand Up @@ -68,80 +60,63 @@ const Page: React.FC<Props> = (props) => {
formatMessage({ id: 'route.constants.preview' }),
];

const [step1Data, setStep1Data] = useState(DEFAULT_STEP_1_DATA);
const [step2Data, setStep2Data] = useState(DEFAULT_STEP_2_DATA);
const [advancedMatchingRules, setAdvancedMatchingRules] = useState<RouteModule.MatchingRule[]>(
[],
);
const [upstreamHeaderList, setUpstreamHeaderList] = useState<RouteModule.UpstreamHeader[]>([]);
const [step3Data, setStep3Data] = useState(DEFAULT_STEP_3_DATA);

const [redirect, setRedirect] = useState(false);

const [form1] = Form.useForm();
const [form2] = Form.useForm();

const [step, setStep] = useState(1);
const [stepHeader, setStepHeader] = useState(STEP_HEADER_4);

const [chart, setChart] = useState(INIT_CHART);

const routeData = {
step1Data,
step2Data,
step3Data,
};
const setupRoute = (rid: number) =>
fetchItem(rid).then((data) => {
form1.setFieldsValue(data.step1Data);
setStep1Data(data.step1Data as RouteModule.Step1Data);

form2.setFieldsValue(data.step2Data);
setStep2Data(data.step2Data);

form1.setFieldsValue(data.form1Data);
setAdvancedMatchingRules(data.advancedMatchingRules);
form2.setFieldsValue(data.form2Data);
setUpstreamHeaderList(data.upstreamHeaderList);
setStep3Data(data.step3Data);
});

useEffect(() => {
if (props.route.path.indexOf('edit') !== -1) {
setupRoute(props.match.params.rid);
}
}, []);

useEffect(() => {
const { redirectOption } = step1Data;

if (redirectOption === 'customRedirect') {
setRedirect(true);
setStepHeader(STEP_HEADER_2);
return;
}
setRedirect(false);
setStepHeader(STEP_HEADER_4);
}, [step1Data]);

const onReset = () => {
setStep1Data(DEFAULT_STEP_1_DATA);
setStep2Data(DEFAULT_STEP_2_DATA);
setAdvancedMatchingRules([]);
setUpstreamHeaderList([]);
setStep3Data(DEFAULT_STEP_3_DATA);

form1.setFieldsValue(DEFAULT_STEP_1_DATA);
form2.setFieldsValue(DEFAULT_STEP_2_DATA);
setStep(1);
};

useEffect(() => {
if (props.route.path.indexOf('edit') !== -1) {
setupRoute(props.match.params.rid);
} else {
onReset();
}
}, []);

const renderStep = () => {
if (step === 1) {
return (
<Step1
data={routeData}
form={form1}
onChange={(params: RouteModule.Step1Data) => {
if (params.route_group_id) {
fetchRouteGroupItem(params.route_group_id).then((data) => {
form1.setFieldsValue({
...form1.getFieldsValue(),
...data,
});
});
advancedMatchingRules={advancedMatchingRules}
onChange={({ action, data }) => {
if (action === 'redirectOptionChange' && data === 'customRedirect') {
setStepHeader(STEP_HEADER_2);
setRedirect(true);
} else {
setStepHeader(STEP_HEADER_4);
setRedirect(false);
}
if (action === 'advancedMatchingRulesChange') {
setAdvancedMatchingRules(data);
}
setStep1Data({ ...form1.getFieldsValue(), ...step1Data, ...params });
}}
isEdit={props.route.path.indexOf('edit') > 0}
/>
Expand All @@ -151,34 +126,25 @@ const Page: React.FC<Props> = (props) => {
if (step === 2) {
if (redirect) {
return (
<CreateStep4 data={routeData} form1={form1} form2={form2} onChange={() => {}} redirect />
<CreateStep4
advancedMatchingRules={advancedMatchingRules}
upstreamHeaderList={upstreamHeaderList}
form1={form1}
form2={form2}
step3Data={step3Data}
redirect
/>
);
}

return (
<Step2
data={routeData}
upstreamHeaderList={upstreamHeaderList}
form={form2}
onChange={(params: RouteModule.Step2Data) => {
if (params.upstream_id) {
fetchUpstreamItem(params.upstream_id).then((data) => {
form2.setFieldsValue({
...form2.getFieldsValue(),
...data,
});
setStep2Data({
...step2Data,
...form2.getFieldsValue(),
...params,
} as RouteModule.Step2Data);
});
return;
onChange={({ action, data }) => {
if (action === 'upstreamHeaderListChange') {
setUpstreamHeaderList(data);
}
setStep2Data({
...step2Data,
...form2.getFieldsValue(),
...params,
} as RouteModule.Step2Data);
}}
/>
);
Expand All @@ -197,7 +163,15 @@ const Page: React.FC<Props> = (props) => {
}

if (step === 4) {
return <CreateStep4 data={routeData} form1={form1} form2={form2} onChange={() => {}} />;
return (
<CreateStep4
advancedMatchingRules={advancedMatchingRules}
upstreamHeaderList={upstreamHeaderList}
form1={form1}
form2={form2}
step3Data={step3Data}
/>
);
}

if (step === 5) {
Expand All @@ -216,13 +190,20 @@ const Page: React.FC<Props> = (props) => {
};

const onStepChange = (nextStep: number) => {
const routeData = {
form1Data: form1.getFieldsValue(),
form2Data: form2.getFieldsValue(),
step3Data,
upstreamHeaderList,
advancedMatchingRules,
} as RouteModule.RequestData;
const onUpdateOrCreate = () => {
if (props.route.path.indexOf('edit') !== -1) {
update((props as any).match.params.rid, { data: routeData }).then(() => {
update((props as any).match.params.rid, routeData).then(() => {
setStep(5);
});
} else {
create({ data: routeData }).then(() => {
create(routeData).then(() => {
setStep(5);
});
}
Expand All @@ -249,7 +230,6 @@ const Page: React.FC<Props> = (props) => {
redirectOption === 'forceHttps' ? checkHostWithSSL(hosts) : Promise.resolve(),
checkUniqueName(value.name, (props as any).match.params.rid || ''),
]).then(() => {
setStep1Data({ ...step1Data, ...value });
setStep(nextStep);
});
});
Expand All @@ -265,8 +245,7 @@ const Page: React.FC<Props> = (props) => {
onUpdateOrCreate();
return;
}
form2.validateFields().then((value) => {
setStep2Data({ ...step2Data, ...value });
form2.validateFields().then(() => {
setStep(nextStep);
});
return;
Expand Down
24 changes: 14 additions & 10 deletions src/pages/Route/components/CreateStep4/CreateStep4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,22 @@ import PluginOrchestration from '@api7-dashboard/pluginchart';
import Step1 from '../Step1';
import Step2 from '../Step2';

interface Props extends RouteModule.Data {
type Props = {
form1: FormInstance;
form2: FormInstance;
redirect?: boolean;
}
step3Data: RouteModule.Step3Data;
advancedMatchingRules: RouteModule.MatchingRule[];
upstreamHeaderList: RouteModule.UpstreamHeader[];
Copy link
Member

@juzhiyuan juzhiyuan Sep 21, 2020

Choose a reason for hiding this comment

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

we'd better have a unified style on List variables, e.g advancedMatchingRuleList or upstramHeaders, I would prefer the former one.

};

const style = {
marginTop: '40px',
};

const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, ...rest }) => {
const { formatMessage } = useIntl();
const { plugins = {}, script = {} } = rest.data.step3Data;
const { plugins = {}, script = {} } = rest.step3Data;

return (
<>
Expand All @@ -44,17 +47,18 @@ const CreateStep4: React.FC<Props> = ({ form1, form2, redirect, ...rest }) => {
{!redirect && (
<>
<h2 style={style}>{formatMessage({ id: 'route.create.define.api.backend.server' })}</h2>
<Step2 {...rest} form={form2} disabled />
<Step2
upstreamHeaderList={rest.upstreamHeaderList}
form={form2}
disabled
onChange={() => {}}
Copy link
Member

@juzhiyuan juzhiyuan Sep 21, 2020

Choose a reason for hiding this comment

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

,

/>
<h2 style={style}>{formatMessage({ id: 'route.create.plugin.configuration' })}</h2>
{Boolean(Object.keys(plugins).length !== 0) && (
<PluginPage initialData={rest.data.step3Data.plugins} readonly />
<PluginPage initialData={rest.step3Data.plugins} readonly />
)}
{Boolean(Object.keys(script).length !== 0) && (
<PluginOrchestration
data={rest.data.step3Data.script.chart}
readonly
onChange={() => {}}
/>
<PluginOrchestration data={rest.step3Data.script.chart} readonly onChange={() => {}} />
Copy link
Member

@juzhiyuan juzhiyuan Sep 21, 2020

Choose a reason for hiding this comment

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

,

)}
</>
)}
Expand Down
25 changes: 14 additions & 11 deletions src/pages/Route/components/Step1/MatchingRulesView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ import { Button, Table, Modal, Form, Select, Input, Space } from 'antd';
import { useIntl } from 'umi';
import { PanelSection } from '@api7-dashboard/ui';

interface Props extends RouteModule.Data {}

const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
const { advancedMatchingRules } = data.step1Data;

const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
Copy link
Member

@juzhiyuan juzhiyuan Sep 21, 2020

Choose a reason for hiding this comment

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

Pass?

advancedMatchingRules,
disabled,
onChange = () => {},
}) => {
const [visible, setVisible] = useState(false);
const [mode, setMode] = useState<RouteModule.ModalType>('CREATE');
const [namePlaceholder, setNamePlaceholder] = useState('');
Expand All @@ -38,8 +38,8 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
if (mode === 'EDIT') {
const key = modalForm.getFieldValue('key');
onChange({
...data.step1Data,
advancedMatchingRules: advancedMatchingRules.map((rule) => {
action: 'advancedMatchingRulesChange',
data: advancedMatchingRules.map((rule) => {
if (rule.key === key) {
return { ...(value as RouteModule.MatchingRule), key };
}
Expand All @@ -51,7 +51,10 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
...(value as RouteModule.MatchingRule),
key: Math.random().toString(36).slice(2),
};
onChange({ ...data.step1Data, advancedMatchingRules: advancedMatchingRules.concat(rule) });
onChange({
action: 'advancedMatchingRulesChange',
data: advancedMatchingRules.concat(rule),
});
}
modalForm.resetFields();
setVisible(false);
Expand All @@ -66,8 +69,8 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {

const handleRemove = (key: string) => {
onChange({
...data.step1Data,
advancedMatchingRules: advancedMatchingRules.filter((item) => item.key !== key),
action: 'advancedMatchingRulesChange',
data: advancedMatchingRules.filter((item) => item.key !== key),
});
};

Expand Down Expand Up @@ -164,7 +167,7 @@ const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
cancelText={formatMessage({ id: 'route.match.cancel' })}
destroyOnClose
>
<Form form={modalForm} labelCol={{ span: 9 }} wrapperCol={{ span: 15 }}>
<Form form={modalForm} labelCol={{ span: 4 }}>
<Form.Item
label={formatMessage({ id: 'route.match.parameter.position' })}
name="position"
Expand Down
Loading