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:12:03 UTC
[incubator-apisix-dashboard] branch next updated: feat: added
preview page for route
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 6acc038 feat: added preview page for route
6acc038 is described below
commit 6acc038da0e08f68875c697322959e7012b24b9c
Author: juzhiyuan <jj...@gmail.com>
AuthorDate: Mon Jun 1 19:10:32 2020 +0800
feat: added preview page for route
---
src/pages/Routes/Create.tsx | 3 ++
.../Routes/components/ActionBar/ActionBar.tsx | 2 +-
.../Routes/components/CreateStep3/CreateStep3.tsx | 40 +++++++-------
.../Routes/components/CreateStep4/CreateStep4.tsx | 19 +++++++
src/pages/Routes/components/CreateStep4/index.ts | 1 +
.../Routes/components/Step1/MatchingRulesView.tsx | 22 ++++----
src/pages/Routes/components/Step1/MetaView.tsx | 8 +--
.../Routes/components/Step1/RequestConfigView.tsx | 63 +++++++++++-----------
src/pages/Routes/components/Step1/index.tsx | 2 +-
src/pages/Routes/typing.d.ts | 1 +
10 files changed, 96 insertions(+), 65 deletions(-)
diff --git a/src/pages/Routes/Create.tsx b/src/pages/Routes/Create.tsx
index bed1970..25ac33a 100644
--- a/src/pages/Routes/Create.tsx
+++ b/src/pages/Routes/Create.tsx
@@ -7,6 +7,7 @@ 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';
const { Step } = Steps;
@@ -68,6 +69,8 @@ const Create: React.FC = () => {
);
case 2:
return <CreateStep3 data={data} onChange={setStep3Data} />;
+ case 3:
+ return <CreateStep4 data={data} onChange={() => {}} />;
default:
return null;
}
diff --git a/src/pages/Routes/components/ActionBar/ActionBar.tsx b/src/pages/Routes/components/ActionBar/ActionBar.tsx
index 389e44a..7ae1d80 100644
--- a/src/pages/Routes/components/ActionBar/ActionBar.tsx
+++ b/src/pages/Routes/components/ActionBar/ActionBar.tsx
@@ -29,7 +29,7 @@ const ActionBar: React.FC<Props> = ({ step, onChange }) => {
</Col>
<Col>
<Button type="primary" onClick={() => onChange(step + 1)}>
- {step < 3 ? '下一步' : '创建'}
+ {step < 3 ? '下一步' : '提交'}
</Button>
</Col>
</Row>
diff --git a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
index 8782c3e..d8ebc62 100644
--- a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
+++ b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
@@ -16,7 +16,7 @@ const sectionStyle = {
gridColumnGap: 10,
};
-const CreateStep3: React.FC<Props> = ({ data, onChange }) => {
+const CreateStep3: React.FC<Props> = ({ data, disabled, onChange }) => {
// NOTE: Plugin in blacklist WILL NOT be shown on Step3.
const pluginBlackList = [
'basic-auth',
@@ -63,24 +63,26 @@ const CreateStep3: React.FC<Props> = ({ data, onChange }) => {
/>
))}
</PanelSection>
- <PanelSection title="未启用" style={sectionStyle}>
- {inactiveList.map(({ name }) => (
- <PluginCard
- name={name}
- actions={[
- <SettingOutlined onClick={() => setCurrentPlugin(name)} />,
- <LinkOutlined
- onClick={() =>
- window.open(
- `https://github.com/apache/incubator-apisix/blob/master/doc/plugins/${name}.md`,
- )
- }
- />,
- ]}
- key={name}
- />
- ))}
- </PanelSection>
+ {!disabled && (
+ <PanelSection title="未启用" style={sectionStyle}>
+ {inactiveList.map(({ name }) => (
+ <PluginCard
+ name={name}
+ actions={[
+ <SettingOutlined onClick={() => setCurrentPlugin(name)} />,
+ <LinkOutlined
+ onClick={() =>
+ window.open(
+ `https://github.com/apache/incubator-apisix/blob/master/doc/plugins/${name}.md`,
+ )
+ }
+ />,
+ ]}
+ key={name}
+ />
+ ))}
+ </PanelSection>
+ )}
<PluginDrawer
name={currentPlugin}
initialData={currentPlugin ? data.step3Data.plugins[currentPlugin] : {}}
diff --git a/src/pages/Routes/components/CreateStep4/CreateStep4.tsx b/src/pages/Routes/components/CreateStep4/CreateStep4.tsx
new file mode 100644
index 0000000..fdb2ea2
--- /dev/null
+++ b/src/pages/Routes/components/CreateStep4/CreateStep4.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Step1 from '../Step1';
+import Step2 from '../Step2';
+import CreateStep3 from '../CreateStep3';
+
+interface Props extends RouteModule.Data {}
+
+const CreateStep4: React.FC<Props> = (props) => {
+ return (
+ <>
+ <Step1 {...props} disabled />
+ <Step2 {...props} disabled />
+ <CreateStep3 {...props} disabled />
+ </>
+ );
+};
+
+export default CreateStep4;
diff --git a/src/pages/Routes/components/CreateStep4/index.ts b/src/pages/Routes/components/CreateStep4/index.ts
new file mode 100644
index 0000000..b9b39e1
--- /dev/null
+++ b/src/pages/Routes/components/CreateStep4/index.ts
@@ -0,0 +1 @@
+export { default } from './CreateStep4';
diff --git a/src/pages/Routes/components/Step1/MatchingRulesView.tsx b/src/pages/Routes/components/Step1/MatchingRulesView.tsx
index ae87d6c..8b91de2 100644
--- a/src/pages/Routes/components/Step1/MatchingRulesView.tsx
+++ b/src/pages/Routes/components/Step1/MatchingRulesView.tsx
@@ -5,7 +5,7 @@ import PanelSection from '../PanelSection';
interface Props extends RouteModule.Data {}
-const MatchingRulesView: React.FC<Props> = ({ data, onChange }) => {
+const MatchingRulesView: React.FC<Props> = ({ data, disabled, onChange }) => {
const { advancedMatchingRules } = data.step1Data;
const [visible, setVisible] = useState(false);
@@ -129,15 +129,17 @@ const MatchingRulesView: React.FC<Props> = ({ data, onChange }) => {
return (
<PanelSection title="高级路由匹配条件">
- <Button
- onClick={() => setVisible(true)}
- type="primary"
- style={{
- marginBottom: 16,
- }}
- >
- 增加
- </Button>
+ {!disabled && (
+ <Button
+ onClick={() => setVisible(true)}
+ type="primary"
+ style={{
+ marginBottom: 16,
+ }}
+ >
+ 增加
+ </Button>
+ )}
<Table key="table" bordered dataSource={advancedMatchingRules} columns={columns} />
{renderModal()}
</PanelSection>
diff --git a/src/pages/Routes/components/Step1/MetaView.tsx b/src/pages/Routes/components/Step1/MetaView.tsx
index 7a74b2b..31dced4 100644
--- a/src/pages/Routes/components/Step1/MetaView.tsx
+++ b/src/pages/Routes/components/Step1/MetaView.tsx
@@ -6,11 +6,11 @@ import PanelSection from '../PanelSection';
import { formItemLayout } from '.';
import styles from '../../Create.less';
-interface Props {
+interface Props extends RouteModule.Data {
form: FormInstance;
}
-const MetaView: React.FC<Props> = ({ form }) => {
+const MetaView: React.FC<Props> = ({ form, disabled }) => {
return (
<PanelSection title="名称及其描述">
<Form {...formItemLayout} form={form} layout="horizontal" className={styles.stepForm}>
@@ -19,10 +19,10 @@ const MetaView: React.FC<Props> = ({ form }) => {
name="name"
rules={[{ required: true, message: '请输入 API 名称' }]}
>
- <Input placeholder="请输入 API 名称" />
+ <Input placeholder="请输入 API 名称" disabled={disabled} />
</Form.Item>
<Form.Item label="描述" name="desc">
- <Input.TextArea placeholder="请输入描述" />
+ <Input.TextArea placeholder="请输入描述" disabled={disabled} />
</Form.Item>
</Form>
</PanelSection>
diff --git a/src/pages/Routes/components/Step1/RequestConfigView.tsx b/src/pages/Routes/components/Step1/RequestConfigView.tsx
index 359d44a..c4b6d35 100644
--- a/src/pages/Routes/components/Step1/RequestConfigView.tsx
+++ b/src/pages/Routes/components/Step1/RequestConfigView.tsx
@@ -4,16 +4,16 @@ 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 PanelSection from '../PanelSection';
import { formItemLayout } from '.';
import styles from '../../Create.less';
-import { httpMethodOptionList } from '@/pages/Routes/constants';
interface Props extends RouteModule.Data {
form: FormInstance;
}
-const RequestConfigView: React.FC<Props> = ({ data, form, onChange }) => {
+const RequestConfigView: React.FC<Props> = ({ data, form, disabled, onChange }) => {
const { paths, hosts } = data.step1Data;
const [protocolValueList, setProtocolValueList] = useState<RouteModule.RequestProtocol[]>([
'HTTP',
@@ -49,11 +49,11 @@ const RequestConfigView: React.FC<Props> = ({ data, form, onChange }) => {
hosts.map((item, index) => (
<Row key={`${item + index}`} style={{ marginBottom: '10px' }} gutter={[16, 16]}>
<Col span={16}>
- <Input placeholder="HOST" />
+ <Input placeholder="HOST" disabled={disabled} />
</Col>
<Col span={4}>
<Space>
- {hosts.length > 1 && (
+ {hosts.length > 1 && !disabled && (
<Button
type="primary"
danger
@@ -73,36 +73,33 @@ const RequestConfigView: React.FC<Props> = ({ data, form, onChange }) => {
paths.map((item, index) => (
<Row key={`${item + index}`} style={{ marginBottom: '10px' }} gutter={[16, 16]}>
<Col span={16}>
- <Input placeholder="请输入 Path" />
- </Col>
- <Col span={4}>
- <Space>
- <Button
- type="primary"
- danger
- onClick={() => {
- onChange({ paths: paths.filter((_, _index) => _index !== index) });
- }}
- >
- 删除
- </Button>
- </Space>
+ <Input placeholder="请输入 Path" disabled={disabled} />
</Col>
+ {!disabled && (
+ <Col span={4}>
+ <Space>
+ <Button
+ type="primary"
+ danger
+ onClick={() => {
+ onChange({ paths: paths.filter((_, _index) => _index !== index) });
+ }}
+ >
+ 删除
+ </Button>
+ </Space>
+ </Col>
+ )}
</Row>
));
- const addPath = () => {
- onChange({
- paths: paths.concat(['']),
- });
- };
-
return (
<PanelSection title="请求基础定义">
<Form {...formItemLayout} form={form} layout="horizontal" className={styles.stepForm}>
<Form.Item label="协议" name="protocol" rules={[{ required: true, message: '请勾选协议' }]}>
<Row>
<Checkbox.Group
+ disabled={disabled}
options={protocolList}
value={protocolValueList}
onChange={onProtocolChange}
@@ -112,16 +109,20 @@ const RequestConfigView: React.FC<Props> = ({ data, form, onChange }) => {
{/* TODO: name */}
<Form.Item label="HOST" rules={[{ required: true, message: '请输入 HOST' }]}>
{renderHosts()}
- <Button type="primary" onClick={() => onChange({ hosts: hosts.concat('') })}>
- 增加
- </Button>
+ {!disabled && (
+ <Button type="primary" onClick={() => onChange({ hosts: hosts.concat('') })}>
+ 增加
+ </Button>
+ )}
</Form.Item>
{/* TODO: name */}
<Form.Item label="PATH">
{renderPaths()}
- <Button onClick={addPath} type="primary">
- 增加
- </Button>
+ {!disabled && (
+ <Button onClick={() => onChange({ paths: paths.concat(['']) })} type="primary">
+ 增加
+ </Button>
+ )}
</Form.Item>
<Form.Item
label="HTTP Methods"
@@ -132,6 +133,7 @@ const RequestConfigView: React.FC<Props> = ({ data, form, onChange }) => {
indeterminate={httpMethodList.indeterminate}
onChange={onCheckAllChange}
checked={httpMethodList.checkAll}
+ disabled={disabled}
>
ANY
</Checkbox>
@@ -139,6 +141,7 @@ const RequestConfigView: React.FC<Props> = ({ data, form, onChange }) => {
options={httpMethodOptionList}
value={httpMethodList.checkedList}
onChange={onMethodsChange}
+ disabled={disabled}
/>
</Form.Item>
</Form>
diff --git a/src/pages/Routes/components/Step1/index.tsx b/src/pages/Routes/components/Step1/index.tsx
index bb9b854..fb3859b 100644
--- a/src/pages/Routes/components/Step1/index.tsx
+++ b/src/pages/Routes/components/Step1/index.tsx
@@ -18,7 +18,7 @@ const Step1: React.FC<RouteModule.Data> = (props) => {
const [form] = Form.useForm();
return (
<>
- <MetaView form={form} />
+ <MetaView form={form} {...props} />
<RequestConfigView form={form} {...props} />
<MatchingRulesView {...props} />
</>
diff --git a/src/pages/Routes/typing.d.ts b/src/pages/Routes/typing.d.ts
index b3023d1..fda64db 100644
--- a/src/pages/Routes/typing.d.ts
+++ b/src/pages/Routes/typing.d.ts
@@ -23,6 +23,7 @@ declare namespace RouteModule {
};
interface Data {
+ disabled?: boolean;
data: {
step1Data: Step1Data;
step2Data: Step2Data;