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/04 07:42:27 UTC
[incubator-apisix-dashboard] branch next updated: Feat header (#241)
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 f6d20dc Feat header (#241)
f6d20dc is described below
commit f6d20dc52ff9f1485abd00095af3ff9bb00d67b0
Author: 琚致远 <ju...@apache.org>
AuthorDate: Thu Jun 4 15:42:18 2020 +0800
Feat header (#241)
* feat: added action selector for header
* feat: fix transformer
* feat: added Result page
* update default page
---
src/pages/Routes/Create.tsx | 29 ++++++++++++-----
.../Routes/components/ActionBar/ActionBar.tsx | 4 +++
.../Routes/components/ResultView/ResultView.tsx | 27 ++++++++++++++++
src/pages/Routes/components/ResultView/index.ts | 1 +
.../components/Step2/HttpHeaderRewriteView.tsx | 36 +++++++++++++++++-----
src/pages/Routes/transform.ts | 9 ++++--
6 files changed, 90 insertions(+), 16 deletions(-)
diff --git a/src/pages/Routes/Create.tsx b/src/pages/Routes/Create.tsx
index 035f09b..71d0cd8 100644
--- a/src/pages/Routes/Create.tsx
+++ b/src/pages/Routes/Create.tsx
@@ -1,15 +1,16 @@
import React, { useState, useEffect } from 'react';
-import { Card, Steps, Form, notification } from 'antd';
+import { Card, Steps, Form } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { DEFAULT_STEP_1_DATA, DEFAULT_STEP_2_DATA, DEFAULT_STEP_3_DATA } from './constants';
+import { createRoute, fetchRoute, updateRoute } from './service';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
-import styles from './Create.less';
import CreateStep3 from './components/CreateStep3';
-import ActionBar from './components/ActionBar';
import CreateStep4 from './components/CreateStep4';
-import { DEFAULT_STEP_1_DATA, DEFAULT_STEP_2_DATA, DEFAULT_STEP_3_DATA } from './constants';
-import { createRoute, fetchRoute, updateRoute } from './service';
+import ResultView from './components/ResultView';
+import ActionBar from './components/ActionBar';
+import styles from './Create.less';
const { Step } = Steps;
@@ -48,6 +49,15 @@ const Create: React.FC = (props) => {
}
}, []);
+ const onReset = () => {
+ setStep1Data(DEFAULT_STEP_1_DATA);
+ setStep2Data(DEFAULT_STEP_2_DATA);
+ setStep3Data(DEFAULT_STEP_3_DATA);
+ form1.resetFields();
+ form2.resetFields();
+ setStep(0);
+ };
+
const renderStep = () => {
if (step === 0) {
return (
@@ -81,6 +91,10 @@ const Create: React.FC = (props) => {
return <CreateStep4 data={routeData} form1={form1} form2={form2} onChange={() => {}} />;
}
+ if (step === 4) {
+ return <ResultView onReset={onReset} />;
+ }
+
return null;
};
@@ -108,15 +122,16 @@ const Create: React.FC = (props) => {
if (nextStep === 4) {
if ((props as any).route.name === 'edit') {
updateRoute((props as any).match.params.rid, { data: routeData }).then(() => {
- notification.success({ message: '更新路由成功' });
+ setStep(nextStep);
});
} else {
createRoute({ data: routeData }).then(() => {
- notification.success({ message: '创建路由成功' });
+ setStep(nextStep);
});
}
}
};
+
return (
<>
<PageHeaderWrapper>
diff --git a/src/pages/Routes/components/ActionBar/ActionBar.tsx b/src/pages/Routes/components/ActionBar/ActionBar.tsx
index 7ae1d80..e734bf2 100644
--- a/src/pages/Routes/components/ActionBar/ActionBar.tsx
+++ b/src/pages/Routes/components/ActionBar/ActionBar.tsx
@@ -19,6 +19,10 @@ const style: CSSProperties = {
};
const ActionBar: React.FC<Props> = ({ step, onChange }) => {
+ if (step > 3) {
+ return null;
+ }
+
return (
<div style={style}>
<Row gutter={10} justify="end">
diff --git a/src/pages/Routes/components/ResultView/ResultView.tsx b/src/pages/Routes/components/ResultView/ResultView.tsx
new file mode 100644
index 0000000..3297040
--- /dev/null
+++ b/src/pages/Routes/components/ResultView/ResultView.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Result, Button } from 'antd';
+
+type Props = {
+ onReset?(): void;
+};
+
+const ResultView: React.FC<Props> = ({ onReset }) => (
+ <Result
+ status="success"
+ title="提交成功"
+ extra={[
+ <Button
+ type="primary"
+ key="goto-list"
+ onClick={() => window.location.replace('/dashboard/routes')}
+ >
+ 返回路由列表
+ </Button>,
+ <Button key="create" onClick={onReset}>
+ 创建新路由
+ </Button>,
+ ]}
+ />
+);
+
+export default ResultView;
diff --git a/src/pages/Routes/components/ResultView/index.ts b/src/pages/Routes/components/ResultView/index.ts
new file mode 100644
index 0000000..94e7334
--- /dev/null
+++ b/src/pages/Routes/components/ResultView/index.ts
@@ -0,0 +1 @@
+export { default } from './ResultView';
diff --git a/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx b/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx
index fa41e81..48a6981 100644
--- a/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx
+++ b/src/pages/Routes/components/Step2/HttpHeaderRewriteView.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Form from 'antd/es/form';
-import { Button, Table, Space, Modal, Input } from 'antd';
+import { Button, Table, Space, Modal, Input, Select } from 'antd';
import PanelSection from '../PanelSection';
@@ -11,6 +11,7 @@ const HttpHeaderRewriteView: React.FC<Props> = ({ data, disabled, onChange }) =>
const [visible, setVisible] = useState(false);
const [modalForm] = Form.useForm();
const [mode, setMode] = useState<RouteModule.ModalType>('CREATE');
+ const [showModalValue, setShowModalValue] = useState(true);
const handleEdit = (record: RouteModule.UpstreamHeader) => {
setMode('EDIT');
@@ -28,6 +29,14 @@ const HttpHeaderRewriteView: React.FC<Props> = ({ data, disabled, onChange }) =>
key: 'header_name',
},
{
+ title: '行为',
+ dataIndex: 'header_action',
+ key: 'header_action',
+ render: (action: 'override' | 'remove') => {
+ return action === 'override' ? '重写/新建' : '删除';
+ },
+ },
+ {
title: '值',
dataIndex: 'header_value',
key: 'header_value',
@@ -87,7 +96,7 @@ const HttpHeaderRewriteView: React.FC<Props> = ({ data, disabled, onChange }) =>
return (
<Modal
- title={mode === 'EDIT' ? '编辑请求头' : '增加请求头'}
+ title={mode === 'EDIT' ? '编辑请求头' : '操作请求头'}
centered
visible={visible}
onOk={handleOk}
@@ -108,12 +117,24 @@ const HttpHeaderRewriteView: React.FC<Props> = ({ data, disabled, onChange }) =>
<Input />
</Form.Item>
<Form.Item
- label="值"
- name="header_value"
- rules={[{ required: true, message: '请输入值' }]}
+ label="行为"
+ name="header_action"
+ rules={[{ required: true, message: '请输入请求头' }]}
>
- <Input />
+ <Select onChange={(e) => setShowModalValue(e === 'override')}>
+ <Select.Option value="override">重写/添加</Select.Option>
+ <Select.Option value="remove">删除</Select.Option>
+ </Select>
</Form.Item>
+ {showModalValue && (
+ <Form.Item
+ label="值"
+ name="header_value"
+ rules={[{ required: true, message: '请输入值' }]}
+ >
+ <Input />
+ </Form.Item>
+ )}
</Form>
</Modal>
);
@@ -126,13 +147,14 @@ const HttpHeaderRewriteView: React.FC<Props> = ({ data, disabled, onChange }) =>
onClick={() => {
setMode('CREATE');
setVisible(true);
+ modalForm.setFieldsValue({ header_action: 'override' });
}}
type="primary"
style={{
marginBottom: 16,
}}
>
- 增加
+ 操作
</Button>
)}
<Table key="table" bordered dataSource={upstreamHeaderList} columns={columns} />
diff --git a/src/pages/Routes/transform.ts b/src/pages/Routes/transform.ts
index a17a0c4..474805a 100644
--- a/src/pages/Routes/transform.ts
+++ b/src/pages/Routes/transform.ts
@@ -10,7 +10,7 @@ export const transformStepData = ({
const upstream_header = {};
step2Data.upstreamHeaderList.forEach((header) => {
- upstream_header[header.header_name] = header.header_value;
+ upstream_header[header.header_name] = header.header_value || '';
});
let redirect: RouteModule.Redirect = {};
@@ -128,7 +128,12 @@ export const transformRouteData = (data: RouteModule.Body) => {
const { upstream, upstream_path, upstream_header } = data;
const upstreamHeaderList = Object.entries(upstream_header).map(([k, v]) => {
- return { header_name: k, header_value: v, key: Math.random().toString(36).slice(2) };
+ return {
+ header_name: k,
+ header_value: v,
+ key: Math.random().toString(36).slice(2),
+ header_action: v ? 'override' : 'remove',
+ };
});
const step2Data: RouteModule.Step2Data = {