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/01 11:32:10 UTC
[incubator-apisix-dashboard] branch next updated: feat: clean code
(#230)
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 95cd8fb feat: clean code (#230)
95cd8fb is described below
commit 95cd8fb4c58f2c92e2ff2130d01f2bd4ffb46d31
Author: litesun <31...@users.noreply.github.com>
AuthorDate: Mon Jun 1 19:32:03 2020 +0800
feat: clean code (#230)
* 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
---
src/pages/Routes/components/Step1/MetaView.tsx | 4 +-
.../Routes/components/Step1/RequestConfigView.tsx | 16 +-
src/pages/Routes/components/Step1/index.tsx | 9 -
.../components/Step2/HttpHeaderRewriteView.tsx | 132 +++++++++++
.../Routes/components/Step2/RequestRewriteView.tsx | 101 ++++++++
src/pages/Routes/components/Step2/index.tsx | 254 +--------------------
src/pages/Routes/constants.ts | 11 +-
7 files changed, 260 insertions(+), 267 deletions(-)
diff --git a/src/pages/Routes/components/Step1/MetaView.tsx b/src/pages/Routes/components/Step1/MetaView.tsx
index 31dced4..02921ba 100644
--- a/src/pages/Routes/components/Step1/MetaView.tsx
+++ b/src/pages/Routes/components/Step1/MetaView.tsx
@@ -2,8 +2,8 @@ import React from 'react';
import Form, { FormInstance } from 'antd/es/form';
import { Input } from 'antd';
+import { FORM_ITEM_LAYOUT } from '@/pages/Routes/constants';
import PanelSection from '../PanelSection';
-import { formItemLayout } from '.';
import styles from '../../Create.less';
interface Props extends RouteModule.Data {
@@ -13,7 +13,7 @@ interface Props extends RouteModule.Data {
const MetaView: React.FC<Props> = ({ form, disabled }) => {
return (
<PanelSection title="名称及其描述">
- <Form {...formItemLayout} form={form} layout="horizontal" className={styles.stepForm}>
+ <Form {...FORM_ITEM_LAYOUT} form={form} layout="horizontal" className={styles.stepForm}>
<Form.Item
label="API 名称"
name="name"
diff --git a/src/pages/Routes/components/Step1/RequestConfigView.tsx b/src/pages/Routes/components/Step1/RequestConfigView.tsx
index c4b6d35..599d4ee 100644
--- a/src/pages/Routes/components/Step1/RequestConfigView.tsx
+++ b/src/pages/Routes/components/Step1/RequestConfigView.tsx
@@ -4,9 +4,9 @@ import { Row, Checkbox, Button, Col, Input, Space } from 'antd';
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
-import { httpMethodOptionList } from '@/pages/Routes/constants';
+import { FORM_ITEM_LAYOUT, HTTP_METHOD_OPTION_LIST } from '@/pages/Routes/constants';
+
import PanelSection from '../PanelSection';
-import { formItemLayout } from '.';
import styles from '../../Create.less';
interface Props extends RouteModule.Data {
@@ -21,7 +21,7 @@ const RequestConfigView: React.FC<Props> = ({ data, form, disabled, onChange })
]);
const protocolList = ['HTTP', 'HTTPS', 'WebSocket'];
const [httpMethodList, setHttpMethodList] = useState({
- checkedList: httpMethodOptionList,
+ checkedList: HTTP_METHOD_OPTION_LIST,
indeterminate: false,
checkAll: true,
});
@@ -33,13 +33,13 @@ const RequestConfigView: React.FC<Props> = ({ data, form, disabled, onChange })
const onMethodsChange = (checkedList: CheckboxValueType[]) => {
setHttpMethodList({
checkedList: checkedList as RouteModule.HttpMethod[],
- indeterminate: !!checkedList.length && checkedList.length < httpMethodOptionList.length,
- checkAll: checkedList.length === httpMethodOptionList.length,
+ indeterminate: !!checkedList.length && checkedList.length < HTTP_METHOD_OPTION_LIST.length,
+ checkAll: checkedList.length === HTTP_METHOD_OPTION_LIST.length,
});
};
const onCheckAllChange = (e: CheckboxChangeEvent) => {
setHttpMethodList({
- checkedList: e.target.checked ? httpMethodOptionList : [],
+ checkedList: e.target.checked ? HTTP_METHOD_OPTION_LIST : [],
indeterminate: false,
checkAll: e.target.checked,
});
@@ -95,7 +95,7 @@ const RequestConfigView: React.FC<Props> = ({ data, form, disabled, onChange })
return (
<PanelSection title="请求基础定义">
- <Form {...formItemLayout} form={form} layout="horizontal" className={styles.stepForm}>
+ <Form {...FORM_ITEM_LAYOUT} form={form} layout="horizontal" className={styles.stepForm}>
<Form.Item label="协议" name="protocol" rules={[{ required: true, message: '请勾选协议' }]}>
<Row>
<Checkbox.Group
@@ -138,7 +138,7 @@ const RequestConfigView: React.FC<Props> = ({ data, form, disabled, onChange })
ANY
</Checkbox>
<Checkbox.Group
- options={httpMethodOptionList}
+ options={HTTP_METHOD_OPTION_LIST}
value={httpMethodList.checkedList}
onChange={onMethodsChange}
disabled={disabled}
diff --git a/src/pages/Routes/components/Step1/index.tsx b/src/pages/Routes/components/Step1/index.tsx
index fb3859b..f872681 100644
--- a/src/pages/Routes/components/Step1/index.tsx
+++ b/src/pages/Routes/components/Step1/index.tsx
@@ -5,15 +5,6 @@ import MetaView from './MetaView';
import RequestConfigView from './RequestConfigView';
import MatchingRulesView from './MatchingRulesView';
-export const formItemLayout = {
- labelCol: {
- span: 6,
- },
- wrapperCol: {
- span: 18,
- },
-};
-
const Step1: React.FC<RouteModule.Data> = (props) => {
const [form] = Form.useForm();
return (
diff --git a/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx b/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx
new file mode 100644
index 0000000..fde1996
--- /dev/null
+++ b/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx
@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import Form, { FormInstance } from 'antd/es/form';
+import { Button, Table, Space, Modal, Input } from 'antd';
+
+import TextArea from 'antd/lib/input/TextArea';
+import PanelSection from '../PanelSection';
+
+interface Props extends RouteModule.Data {
+ form: FormInstance;
+}
+
+const HttpHeaderRewriteView: React.FC<Props> = ({ data, onChange }) => {
+ const { upstream_header } = data.step2Data;
+ const [visible, setVisible] = useState(false);
+ const [modalForm] = Form.useForm();
+
+ const handleEdit = (record: RouteModule.UpstreamHeader) => {
+ setVisible(true);
+ modalForm.setFieldsValue(record);
+ };
+ const handleRemove = (key: string) => {
+ onChange({ upstream_header: upstream_header.filter((item) => item.key !== key) });
+ };
+
+ const columns = [
+ {
+ title: '请求头',
+ dataIndex: 'header_name',
+ key: 'header_name',
+ },
+ {
+ title: '值',
+ dataIndex: 'header_value',
+ key: 'header_value',
+ },
+ {
+ title: '描述',
+ dataIndex: 'header_desc',
+ key: 'header_desc',
+ },
+ {
+ title: '操作',
+ key: 'action',
+ render: (_: any, record: RouteModule.UpstreamHeader) => (
+ <Space size="middle">
+ <a
+ onClick={() => {
+ handleEdit(record);
+ }}
+ >
+ 编辑
+ </a>
+ <a
+ onClick={() => {
+ handleRemove(record.key);
+ }}
+ >
+ 移除
+ </a>
+ </Space>
+ ),
+ },
+ ];
+
+ const renderModal = () => {
+ const handleOk = () => {
+ modalForm.validateFields().then((value) => {
+ onChange({
+ upstream_header: upstream_header.concat({
+ ...(value as RouteModule.UpstreamHeader),
+ key: Math.random().toString(36).slice(2),
+ }),
+ });
+ setVisible(false);
+ });
+ };
+
+ return (
+ <Modal
+ title="新增"
+ centered
+ visible={visible}
+ onOk={handleOk}
+ onCancel={() => {
+ setVisible(false);
+ modalForm.resetFields();
+ }}
+ destroyOnClose
+ >
+ <Form form={modalForm} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
+ <Form.Item
+ label="请求头"
+ name="header_name"
+ rules={[{ required: true, message: '请输入请求头' }]}
+ >
+ <Input />
+ </Form.Item>
+ <Form.Item
+ label="值"
+ name="header_value"
+ rules={[{ required: true, message: '请输入值' }]}
+ >
+ <Input />
+ </Form.Item>
+ <Form.Item label="描述" name="header_desc">
+ <TextArea />
+ </Form.Item>
+ </Form>
+ </Modal>
+ );
+ };
+
+ return (
+ <PanelSection title="HTTP 头改写">
+ <Button
+ onClick={() => {
+ setVisible(true);
+ }}
+ type="primary"
+ style={{
+ marginBottom: 16,
+ }}
+ >
+ 新增
+ </Button>
+ <Table key="table" bordered dataSource={upstream_header} columns={columns} />
+ {renderModal()}
+ </PanelSection>
+ );
+};
+
+export default HttpHeaderRewriteView;
diff --git a/src/pages/Routes/components/Step2/RequestRewriteView.tsx b/src/pages/Routes/components/Step2/RequestRewriteView.tsx
new file mode 100644
index 0000000..ee1912b
--- /dev/null
+++ b/src/pages/Routes/components/Step2/RequestRewriteView.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import Form, { FormInstance } from 'antd/es/form';
+import Radio, { RadioChangeEvent } from 'antd/lib/radio';
+import { Input, Row, Col, InputNumber, Button, Space } from 'antd';
+
+import { FORM_ITEM_LAYOUT } from '@/pages/Routes/constants';
+import PanelSection from '../PanelSection';
+import styles from '../../Create.less';
+
+interface Props extends RouteModule.Data {
+ form: FormInstance;
+}
+
+const RequestRewriteView: React.FC<Props> = ({ data, form, onChange }) => {
+ const { step2Data } = data;
+ const { backendAddressList, backendProtocol } = step2Data;
+ const onProtocolChange = (e: RadioChangeEvent) => {
+ onChange({ backendProtocol: e.target.value });
+ };
+
+ const addBackendAddress = () => {
+ onChange({
+ backendAddressList: backendAddressList.concat({ host: '', port: 0, weight: 0 }),
+ });
+ };
+ const renderBackendAddress = () =>
+ backendAddressList.map((item, index) => (
+ <Row key={`${item.host + index}`} style={{ marginBottom: '10px' }} gutter={[16, 16]}>
+ <Col span={12}>
+ <Input placeholder="HOST" />
+ </Col>
+ <Col span={4}>
+ <InputNumber placeholder="Port" />
+ </Col>
+ <Col span={4}>
+ <InputNumber placeholder="Weight" />
+ </Col>
+ <Col span={4}>
+ <Space>
+ {backendAddressList.length > 1 && (
+ <Button
+ type="primary"
+ danger
+ onClick={() => {
+ onChange({
+ backendAddressList: backendAddressList.filter((_, _index) => _index !== index),
+ });
+ }}
+ >
+ 删除
+ </Button>
+ )}
+ </Space>
+ </Col>
+ </Row>
+ ));
+
+ return (
+ <PanelSection title="请求改写">
+ <Form
+ {...FORM_ITEM_LAYOUT}
+ form={form}
+ layout="horizontal"
+ className={styles.stepForm}
+ initialValues={step2Data}
+ >
+ <Form.Item label="协议" name="protocol" rules={[{ required: true, message: '请勾选协议' }]}>
+ <Row>
+ <Radio.Group onChange={onProtocolChange} name="backendProtocol" value={backendProtocol}>
+ <Radio value="HTTP">HTTP</Radio>
+ <Radio value="HTTPS">HTTPS</Radio>
+ <Radio value="originalRequest">原始请求</Radio>
+ </Radio.Group>
+ </Row>
+ </Form.Item>
+ <Form.Item label="后端地址" rules={[{ required: true, message: '请输入后端地址' }]}>
+ {renderBackendAddress()}
+ <Button type="primary" onClick={addBackendAddress}>
+ 增加
+ </Button>
+ </Form.Item>
+ <Form.Item label="后端请求 Path">
+ <Row>
+ <Input />
+ </Row>
+ </Form.Item>
+ <Form.Item label="连接超时">
+ <InputNumber /> ms
+ </Form.Item>
+ <Form.Item label="发送超时">
+ <InputNumber /> ms
+ </Form.Item>
+ <Form.Item label="接收超时">
+ <InputNumber /> ms
+ </Form.Item>
+ </Form>
+ </PanelSection>
+ );
+};
+
+export default RequestRewriteView;
diff --git a/src/pages/Routes/components/Step2/index.tsx b/src/pages/Routes/components/Step2/index.tsx
index 89e56bf..7fe4f0c 100644
--- a/src/pages/Routes/components/Step2/index.tsx
+++ b/src/pages/Routes/components/Step2/index.tsx
@@ -1,256 +1,16 @@
-import React, { useState } from 'react';
-import { Form, Row, Col, Input, Space, Button, Radio, InputNumber, Table, Modal } from 'antd';
-import { RadioChangeEvent } from 'antd/lib/radio';
-import PanelSection from '../PanelSection';
-import styles from '../../Create.less';
+import React from 'react';
+import { Form } from 'antd';
-const { TextArea } = Input;
+import RequestRewriteView from './RequestRewriteView';
+import HttpHeaderRewriteView from './HttpHeaderRewriteView';
-const DEFAULT_MODAL_DATA: RouteModule.UpstreamHeader = {
- header_name: '',
- header_value: '',
- header_desc: '',
- key: '',
-};
-
-const formItemLayout = {
- labelCol: {
- span: 6,
- },
- wrapperCol: {
- span: 18,
- },
-};
-
-const Step2: React.FC<RouteModule.Data> = ({ data, onChange }) => {
- const { step2Data } = data;
- const { upstream_header, backendAddressList, backendProtocol } = step2Data;
- const [modalVisible, setModalVisible] = useState(false);
- const [modalForm] = Form.useForm();
- const [editModalData, setEditModalData] = useState<RouteModule.UpstreamHeader>(
- DEFAULT_MODAL_DATA,
- );
+const Step2: React.FC<RouteModule.Data> = (props) => {
const [form] = Form.useForm();
- const handleRemove = (key: string) => {
- onChange({ upstream_header: upstream_header.filter((item) => item.key !== key) });
- };
-
- const columns = [
- {
- title: '请求头',
- dataIndex: 'header_name',
- key: 'header_name',
- },
- {
- title: '值',
- dataIndex: 'header_value',
- key: 'header_value',
- },
- {
- title: '描述',
- dataIndex: 'header_desc',
- key: 'header_desc',
- },
- {
- title: '操作',
- key: 'action',
- render: (_: any, record: RouteModule.UpstreamHeader) => (
- <Space size="middle">
- <a
- onClick={() => {
- handleRemove(record.key);
- }}
- >
- 移除
- </a>
- </Space>
- ),
- },
- ];
-
- const renderRequestRewrite = () => {
- const onProtocolChange = (e: RadioChangeEvent) => {
- onChange({ backendProtocol: e.target.value });
- };
-
- const addBackendAddress = () => {
- onChange({
- backendAddressList: backendAddressList.concat({ host: '', port: 0, weight: 0 }),
- });
- };
-
- const renderBackendAddress = () =>
- backendAddressList.map((item, index) => (
- <Row key={`${item.host + index}`} style={{ marginBottom: '10px' }} gutter={[16, 16]}>
- <Col span={12}>
- <Input placeholder="HOST" />
- </Col>
- <Col span={4}>
- <InputNumber placeholder="Port" />
- </Col>
- <Col span={4}>
- <InputNumber placeholder="Weight" />
- </Col>
- <Col span={4}>
- <Space>
- {backendAddressList.length > 1 && (
- <Button
- type="primary"
- danger
- onClick={() => {
- onChange({
- backendAddressList: backendAddressList.filter(
- (_, _index) => _index !== index,
- ),
- });
- }}
- >
- 删除
- </Button>
- )}
- </Space>
- </Col>
- </Row>
- ));
-
- return (
- <PanelSection title="请求改写">
- <Form
- {...formItemLayout}
- form={form}
- layout="horizontal"
- className={styles.stepForm}
- initialValues={step2Data}
- >
- <Form.Item
- label="协议"
- name="protocol"
- rules={[{ required: true, message: '请勾选协议' }]}
- >
- <Row>
- <Radio.Group
- onChange={onProtocolChange}
- name="backendProtocol"
- value={backendProtocol}
- >
- <Radio value="HTTP">HTTP</Radio>
- <Radio value="HTTPS">HTTPS</Radio>
- <Radio value="originalRequest">原始请求</Radio>
- </Radio.Group>
- </Row>
- </Form.Item>
- <Form.Item label="后端地址" rules={[{ required: true, message: '请输入后端地址' }]}>
- {renderBackendAddress()}
- <Button type="primary" onClick={addBackendAddress}>
- 增加
- </Button>
- </Form.Item>
- <Form.Item label="后端请求 Path">
- <Row>
- <Input />
- </Row>
- </Form.Item>
- <Form.Item label="连接超时">
- <InputNumber /> ms
- </Form.Item>
- <Form.Item label="发送超时">
- <InputNumber /> ms
- </Form.Item>
- <Form.Item label="接收超时">
- <InputNumber /> ms
- </Form.Item>
- </Form>
- </PanelSection>
- );
- };
-
- const renderHttpHeaderRewrite = () => {
- const handleAdd = () => {
- setModalVisible(true);
- };
- return (
- <PanelSection title="HTTP 头改写">
- <div>
- <Button
- onClick={handleAdd}
- type="primary"
- style={{
- marginBottom: 16,
- }}
- >
- 新增
- </Button>
- <Table key="table" bordered dataSource={upstream_header} columns={columns} />
- </div>
- </PanelSection>
- );
- };
-
- const renderModal = () => {
- const handleOk = () => {
- modalForm.validateFields().then((value) => {
- onChange({
- upstream_header: upstream_header.concat({
- ...(value as RouteModule.UpstreamHeader),
- key: Math.random().toString(36).slice(2),
- }),
- });
- setModalVisible(false);
- });
- };
- const handleCancel = () => {
- setModalVisible(false);
- };
-
- const handleClose = () => {
- setEditModalData(DEFAULT_MODAL_DATA);
- modalForm.resetFields();
- };
-
- return (
- <Modal
- title="新增"
- centered
- visible={modalVisible}
- onOk={handleOk}
- onCancel={handleCancel}
- afterClose={handleClose}
- destroyOnClose
- >
- <Form
- form={modalForm}
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 20 }}
- initialValues={editModalData}
- >
- <Form.Item
- label="请求头"
- name="header_name"
- rules={[{ required: true, message: '请输入请求头' }]}
- >
- <Input />
- </Form.Item>
- <Form.Item
- label="值"
- name="header_value"
- rules={[{ required: true, message: '请输入值' }]}
- >
- <Input />
- </Form.Item>
- <Form.Item label="描述" name="upstream_header_desc">
- <TextArea />
- </Form.Item>
- </Form>
- </Modal>
- );
- };
-
return (
<>
- {renderModal()}
- {renderRequestRewrite()}
- {renderHttpHeaderRewrite()}
+ <RequestRewriteView form={form} {...props} />
+ <HttpHeaderRewriteView form={form} {...props} />
</>
);
};
diff --git a/src/pages/Routes/constants.ts b/src/pages/Routes/constants.ts
index 15c2f18..4155eb1 100644
--- a/src/pages/Routes/constants.ts
+++ b/src/pages/Routes/constants.ts
@@ -1 +1,10 @@
-export const httpMethodOptionList = ['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'];
+export const HTTP_METHOD_OPTION_LIST = ['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'];
+
+export const FORM_ITEM_LAYOUT = {
+ labelCol: {
+ span: 6,
+ },
+ wrapperCol: {
+ span: 18,
+ },
+};