Skip to content

Commit

Permalink
fix: 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@liuxiran
liuxiran committed Mar 6, 2021
1 parent 938b2b9 commit d5d3d50
Show file tree
Hide file tree
Showing 8 changed files with 441 additions and 17 deletions.
10 changes: 10 additions & 0 deletions web/src/pages/Route/Create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,13 @@ type Props = {

const Page: React.FC<Props> = (props) => {
const { formatMessage } = useIntl();
enum CurrentCreateStep {
Step1 = 1,
Step2,
Step3,
Step4,
Step5,
}

const STEP_HEADER_2 = [
formatMessage({ id: 'page.route.steps.stepTitle.defineApiRequest' }),
Expand Down Expand Up @@ -219,6 +226,9 @@ const Page: React.FC<Props> = (props) => {

if (nextStep === 2) {
if (step === 1) {
console.log('herererere')
console.log(form1.getFieldsValue())
console.log('--------')
form1.validateFields().then((value) => {
const { redirectOption, hosts } = value;
const filterHosts = hosts.filter(Boolean);
Expand Down
297 changes: 297 additions & 0 deletions web/src/pages/Route/components/Step1/ProxyRewrite.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,297 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useEffect, useState } from 'react';
import Form from 'antd/es/form';
import { Button, Input, Radio, Row, Col } from 'antd';
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { useIntl } from 'umi';
import { PanelSection } from '@api7-dashboard/ui';

import {
FORM_ITEM_LAYOUT,
FORM_ITEM_WITHOUT_LABEL,
} from '@/pages/Route/constants';

const ProxyRewrite: React.FC<RouteModule.Step1PassProps> = ({ form, disabled }) => {
const { formatMessage } = useIntl();
enum ShcemeRewrite {
KEEP = 'keep',
HTTP = 'http',
HTTPS = 'https',
}
enum URIRewriteType {
KEEP = 0,
STATIC,
REGEXP,
}
enum HostRewriteType {
KEEP = 0,
REWRITE,
}
const [uriRewrite, setUriRewrite] = useState<URIRewriteType>(URIRewriteType.KEEP);
const [hostRewrite, setHostRewrite] = useState<HostRewriteType>(HostRewriteType.KEEP);

const getUriRewriteItems = () => {
switch (uriRewrite) {
case URIRewriteType.STATIC:
return (
<Form.Item
label={formatMessage({ id: 'page.route.form.itemLabel.newPath' })}
name={['proxyRewrite', 'uri']}
rules={[
{
required: true,
message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
id: 'page.route.form.itemLabel.newPath',
})}`,
},
]}
>
<Input
placeholder={`${formatMessage({
id: 'component.global.pleaseEnter',
})} ${formatMessage({ id: 'page.route.form.itemLabel.newPath' })}`}
disabled={disabled}
/>
</Form.Item>
);
case URIRewriteType.REGEXP:
return (
<Form.List
name={['proxyRewrite', 'regex_uri']}
initialValue={['', '']}
>
{(fields) =>
fields.map((field, index) => {
switch (index) {
case 0:
return (
<Form.Item
label={formatMessage({ id: 'page.route.form.itemLabel.regx' })}
name={field.name}
rules={[
{
required: true,
message: `${formatMessage({
id: 'component.global.pleaseEnter',
})} ${formatMessage({ id: 'page.route.form.itemLabel.regx' })}`,
},
]}
>
<Input
placeholder={`${formatMessage({
id: 'component.global.pleaseEnter',
})} ${formatMessage({ id: 'page.route.form.itemLabel.regx' })}`}
disabled={disabled}
/>
</Form.Item>
);
case 1:
return (
<Form.Item
label={formatMessage({ id: 'page.route.form.itemLabel.template' })}
name={field.name}
rules={[
{
required: true,
message: `${formatMessage({
id: 'component.global.pleaseEnter',
})} ${formatMessage({ id: 'page.route.form.itemLabel.template' })}`,
},
]}
>
<Input
placeholder={`${formatMessage({
id: 'component.global.pleaseEnter',
})} ${formatMessage({ id: 'page.route.form.itemLabel.template' })}`}
disabled={disabled}
/>
</Form.Item>
);
default:
return null;
}
})
}
</Form.List>
);
case URIRewriteType.REGEXP:
default:
return null;
}
};

const getHostRewriteItems = () => {
switch (hostRewrite) {
case HostRewriteType.REWRITE:
return (
<Form.Item
label={formatMessage({ id: 'page.route.form.itemLabel.newHost' })}
name={['proxyRewrite', 'host']}
rules={[
{
required: true,
message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
id: 'page.route.form.itemLabel.newHost',
})}`,
},
]}
>
<Input
placeholder={`${formatMessage({
id: 'component.global.pleaseEnter',
})} ${formatMessage({ id: 'page.route.form.itemLabel.newHost' })}`}
disabled={disabled}
/>
</Form.Item>
);
case HostRewriteType.KEEP:
default:
return null;
}
};

useEffect(() => {}, []);

return (
<PanelSection title={formatMessage({ id: 'page.route.panelSection.title.requestOverride' })}>
<Form.Item
label={formatMessage({ id: 'page.route.form.itemLabel.scheme' })}
name={['proxyRewrite', 'scheme']}
>
<Radio.Group disabled={disabled}>
<Radio value={ShcemeRewrite.KEEP}>
{formatMessage({ id: 'page.route.radio.staySame' })}
</Radio>
<Radio value={ShcemeRewrite.HTTP}>{(ShcemeRewrite.HTTP).toLocaleUpperCase()}</Radio>
<Radio value={ShcemeRewrite.HTTPS}>{(ShcemeRewrite.HTTPS).toLocaleUpperCase()}</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label={formatMessage({ id: 'page.route.form.itemLabel.uriRewriteType' })}
name='URIRewriteType'
>
<Radio.Group
onChange={(e) => {
setUriRewrite(e.target.value);
}}
disabled={disabled}
>
<Radio value={URIRewriteType.KEEP}>
{formatMessage({ id: 'page.route.radio.staySame' })}
</Radio>
<Radio value={URIRewriteType.STATIC}>
{formatMessage({ id: 'page.route.radio.static' })}
</Radio>
<Radio value={URIRewriteType.REGEXP}>
{formatMessage({ id: 'page.route.radio.regx' })}
</Radio>
</Radio.Group>
</Form.Item>
{getUriRewriteItems()}

<Form.Item
label={formatMessage({ id: 'page.route.form.itemLabel.hostRewriteType' })}
name='hostRewriteType'
>
<Radio.Group
onChange={(e) => {
setHostRewrite(e.target.value);
}}
disabled={disabled}
>
<Radio value={HostRewriteType.KEEP}>
{formatMessage({ id: 'page.route.radio.staySame' })}
</Radio>
<Radio value={HostRewriteType.REWRITE}>
{formatMessage({ id: 'page.route.radio.static' })}
</Radio>
</Radio.Group>
</Form.Item>
{getHostRewriteItems()}

<Form.List
name={['proxyRewrite', 'kvHeaders']}
initialValue={[{

}]}
>
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? FORM_ITEM_LAYOUT : FORM_ITEM_WITHOUT_LABEL)}
label={
index === 0
? formatMessage({ id: 'page.route.form.itemLabel.headerRewrite' })
: ''
}
key={field.key}
>
<Row gutter={24} key={field.name}>
<Col span={11}>
<Form.Item
name={[field.name, 'key']}
fieldKey={[field.fieldKey, 'key']}
noStyle
>
<Input
placeholder={`${formatMessage({
id: 'component.global.pleaseEnter',
})}${formatMessage({ id: 'page.route.parameterName' })}`}
disabled={disabled}
/>
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
name={[field.name, 'value']}
fieldKey={[field.fieldKey, 'value']}
noStyle
>
<Input
placeholder={`${formatMessage({
id: 'component.global.pleaseEnter',
})}${formatMessage({ id: 'page.route.value' })}`}
disabled={disabled}
/>
</Form.Item>
</Col>
{!disabled && fields.length > 1 && (
<Col>
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => remove(field.name)}
/>
</Col>
)}
</Row>
</Form.Item>
))}
<Form.Item {...FORM_ITEM_WITHOUT_LABEL}>
<Button type="dashed" disabled={disabled} onClick={() => add()} icon={<PlusOutlined />}>
{formatMessage({ id: 'component.global.create' })}
</Button>
</Form.Item>
</>
)}
</Form.List>
</PanelSection>
);
};

export default ProxyRewrite;
2 changes: 2 additions & 0 deletions web/src/pages/Route/components/Step1/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,15 @@ import styles from '../../Create.less';
import MetaView from './MetaView';
import RequestConfigView from './RequestConfigView';
import MatchingRulesView from './MatchingRulesView';
import ProxyRewrite from './ProxyRewrite';

const Step1: React.FC<RouteModule.Step1PassProps> = (props) => {
return (
<>
<Form {...FORM_ITEM_LAYOUT} form={props.form} layout="horizontal" className={styles.stepForm}>
<MetaView {...props} />
<RequestConfigView {...props} />
<ProxyRewrite {...props} />
</Form>
<MatchingRulesView {...props} />
</>
Expand Down
6 changes: 6 additions & 0 deletions web/src/pages/Route/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,12 @@ export const DEFAULT_STEP_1_DATA: RouteModule.Form1Data = {
ret_code: 302,
methods: HTTP_METHOD_OPTION_LIST,
service_id: '',
proxyRewrite: {
scheme: 'keep',
},
URIRewriteType: 0,
hostRewriteType: 0,

};

export const DEFAULT_STEP_3_DATA: RouteModule.Step3Data = {
Expand Down
12 changes: 9 additions & 3 deletions web/src/pages/Route/locales/en-US.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export default {
'Maximum length 100, only letters, Numbers, _, and - are supported, and can only begin with letters',

'page.route.panelSection.title.requestConfigBasicDefine': 'Request Basic Define',
'page.route.protocol': 'Protocol',
'page.route.form.itemLabel.httpMethod': 'HTTP Method',
'page.route.form.itemLabel.scheme': 'Scheme',
'page.route.form.itemLabel.priority': 'Priority',
'page.route.form.itemLabel.redirect': 'Redirect',
'page.route.select.option.enableHttps': 'Enable HTTPS',
Expand Down Expand Up @@ -104,7 +104,11 @@ export default {
'page.route.weight': 'Weight',
'page.route.radio.staySame': 'Stay The Same',
'page.route.form.itemLabel.newPath': 'New Path',
'page.route.form.itemLabel.rewriteType': 'Request Path',
'page.route.form.itemLabel.newHost': 'New Host',
'page.route.form.itemLabel.regx': 'Regexp',
'page.route.form.itemLabel.template': 'Template',
'page.route.form.itemLabel.uriRewriteType': 'URI Override',
'page.route.form.itemLabel.hostRewriteType': 'Host Override',
'page.route.form.itemLabel.redirectURI': 'Redirect URI',
'page.route.input.placeholder.newPath': 'For example: /foo/bar/index.html',

Expand Down Expand Up @@ -134,5 +138,7 @@ export default {
'page.route.exportRoutesTips': 'Please choose the type of file you want to export',
'page.route.button.importOpenApi': 'Import OpenAPI',
'page.route.button.selectFile': 'Please Select File',
'page.route.list': 'Route List'
'page.route.list': 'Route List',
'page.route.panelSection.title.requestOverride': 'Request Override',
'page.route.form.itemLabel.headerRewrite': 'Header Override',
};
Loading

0 comments on commit d5d3d50

Please sign in to comment.